Use typescript

Author: dev-juju

codebox.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    hljs: any
+  }
+}
+
+export {};

dist/index.min.js

@@ -1,6 +1,6 @@
 {
   "name": "@bomdi/codebox",
-  "version": "1.0.12",
+  "version": "2.0.0",
   "license": "ISC",
   "description": "Code syntax highlighting tool for Editor.js",
   "keywords": [
@@ -22,20 +22,22 @@
     "start": "node test.js"
   },
   "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/node": "^7.8.4",
-    "@babel/preset-env": "7.5.5",
+    "@babel/core": "7.19.0",
+    "@babel/node": "^7.18.10",
+    "@babel/preset-env": "7.19.0",
+    "@types/node": "^18.7.15",
     "babel-eslint": "^10.0.3",
-    "babel-loader": "8.0.6",
-    "css-loader": "^1.0.0",
-    "eslint": "^6.8.0",
-    "style-loader": "^0.21.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.7"
+    "babel-loader": "8.2.5",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.23.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   },
   "files": [
     "dist"
   ],
-  "main": "dist/index.min.js",
-  "dependencies": {}
+  "main": "dist/index.min.js"
 }

package-lock.json

@@ -3,20 +3,13 @@
 [![](https://img.shields.io/npm/v/@bomdi/codebox)](https://www.npmjs.com/package/@bomdi/codebox)
 [![](https://img.shields.io/npm/dw/@bomdi/codebox)](https://www.npmjs.com/package/@bomdi/codebox)
 [![](https://flat.badgen.net/npm/license/@bomdi/codebox)](https://www.npmjs.com/package/@bomdi/codebox)
+[![](https://flat.badgen.net/badge/icon/typescript?icon=typescript&label)](https://www.npmjs.com/package/@bomdi/codebox)
 
 Code syntax highlighting tool for [Editor.js](https://editorjs.io/)
 
-![](https://firebasestorage.googleapis.com/v0/b/bomdisoft-28c17.appspot.com/o/images%2FCodeBox.png?alt=media&token=565a0782-f684-4f7d-8430-dfd4a5bdaa11)
+## Setup
 
-## 💗 If you like this package 💗
-
-Support us on Patreon
-
- 👉  [https://www.patreon.com/devjuju](https://www.patreon.com/devjuju)
-
-## Installation
-
-### Install via NPM
+Install the package via NPM
 
 ```shell
 npm i @bomdi/codebox
@@ -25,6 +18,8 @@ npm i @bomdi/codebox
 Add to your module/application
 
 ```javascript
+import CodeBox from '@bomdi/codebox';
+OR
 const CodeBox = require('@bomdi/codebox');
 ```
 
@@ -106,8 +101,8 @@ export default CodeBlock;
 
 ## Author
 
-Adombang Munang Mbomndih (Bomdi)
+Dev Juju
 
-LinkedIn: [LinkedIn](http://www.linkedin.com/in/adombangmunang)
+[Contact Us](https://bomdisoft.com)
 
-![](https://firebasestorage.googleapis.com/v0/b/editorjs-react-renderer.appspot.com/o/Bomdi%202.jpg?alt=media&token=323c4b3e-8542-4031-9660-74280a8cfefc)
+[Learn](https://devjuju.com)

package.json

@@ -5,15 +5,37 @@
   * @version 1.0.0
   * @created - 2020.02.12
   * @author - Adombang Munang Mbomndih (Bomdi) <dzedock@gmail.com> (https://bomdisoft.com)
+  *
+  * Version History
+  * ---------------
+  * @version 2.0.0 - 2022.09.06 - Use TypeScript - Adombang Munang Mbomndih
   */
 
 
 //#region imports
 require('./style.css').toString();
-const { DEFAULT_THEMES, COMMON_LANGUAGES } = require('./constants');
 //#endregion
 
+const DEFAULT_THEMES = ['light', 'dark'];
+const COMMON_LANGUAGES = {
+  none: 'Auto-detect', apache: 'Apache', bash: 'Bash', cs: 'C#', cpp: 'C++', css: 'CSS', coffeescript: 'CoffeeScript', diff: 'Diff',
+  go: 'Go', html: 'HTML, XML', http: 'HTTP', json: 'JSON', java: 'Java', javascript: 'JavaScript', kotlin: 'Kotlin',
+  less: 'Less', lua: 'Lua', makefile: 'Makefile', markdown: 'Markdown', nginx: 'Nginx', objectivec: 'Objective-C',
+  php: 'PHP', perl: 'Perl', properties: 'Properties', python: 'Python', ruby: 'Ruby', rust: 'Rust', scss: 'SCSS',
+  sql: 'SQL', shell: 'Shell Session', swift: 'Swift', toml: 'TOML, also INI', typescript: 'TypeScript', yaml: 'YAML',
+  plaintext: 'Plaintext'
+};
+
 class CodeBox {
+  api: any;
+  config: { themeName: any; themeURL: any; useDefaultTheme: any; };
+  data: { code: any; language: any; theme: any; };
+  highlightScriptID: string;
+  highlightCSSID: string;
+  codeArea: HTMLDivElement;
+  selectInput: HTMLInputElement;
+  selectDropIcon: HTMLElement;
+
   constructor({ data, api, config }){
     this.api = api;
     this.config = {
@@ -68,7 +90,7 @@ class CodeBox {
 
     codeAreaHolder.setAttribute('class', 'codeBoxHolder');
     this.codeArea.setAttribute('class', `codeBoxTextArea ${ this.config.useDefaultTheme } ${ this.data.language }`);
-    this.codeArea.setAttribute('contenteditable', true);
+    this.codeArea.setAttribute('contenteditable', 'true');
     this.codeArea.innerHTML = this.data.code;
     this.api.listeners.on(this.codeArea, 'blur', event => this._highlightCodeArea(event), false);
     this.api.listeners.on(this.codeArea, 'paste', event => this._handleCodeAreaPaste(event), false);
@@ -106,7 +128,7 @@ class CodeBox {
     this.selectDropIcon.innerHTML = '&#8595;';
     this.selectInput.setAttribute('class', `codeBoxSelectInput ${ this.config.useDefaultTheme }`);
     this.selectInput.setAttribute('type', 'text');
-    this.selectInput.setAttribute('readonly', true);
+    this.selectInput.setAttribute('readonly', 'true');
     this.selectInput.value = this.data.language;
     this.api.listeners.on(this.selectInput, 'click', event => this._handleSelectInputClick(event), false);
 
@@ -130,7 +152,7 @@ class CodeBox {
   }
 
   _highlightCodeArea(event){
-    hljs.highlightBlock(this.codeArea);
+    window.hljs.highlightBlock(this.codeArea);
   }
 
   _handleCodeAreaPaste(event){
@@ -147,7 +169,7 @@ class CodeBox {
     this.codeArea.removeAttribute('class');
     this.data.language = language[0];
     this.codeArea.setAttribute('class', `codeBoxTextArea ${ this.config.useDefaultTheme } ${ this.data.language }`);
-    hljs.highlightBlock(this.codeArea);
+    window.hljs.highlightBlock(this.codeArea);
   }
 
   _closeAllLanguageSelects(){
@@ -195,4 +217,4 @@ class CodeBox {
 }
 
 
-module.exports = CodeBox;
+export default CodeBox;

readme.md

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+
+    "outDir": "./dist/"
+  },
+  "include": [
+    "codebox.d.ts",
+    "**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

src/constants.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   mode: 'production',
-  entry: path.normalize(`${__dirname}/src/index.js`),
+  entry: path.normalize(`${__dirname}/src/index.ts`),
   output: {
     path: path.normalize(`${__dirname}/dist`),
     publicPath: '/',
@@ -13,14 +13,22 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|ts)$/,
         use: [
           {
             loader: 'babel-loader',
-            query: {
+            options: {
               presets: ['@babel/preset-env'],
             },
           },
+          {
+            loader: 'ts-loader',
+            options: {
+              compilerOptions: {
+                noEmit: false,
+              },
+            },
+          }
         ],
         exclude: /node_modules/,
       },
@@ -32,5 +40,8 @@ module.exports = {
         ]
       }
     ]
-  }
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
 };