@pfmcodes/caret 0.1.3 → 0.1.5

package/README.md

@@ -21,6 +21,7 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 
 ## 📋 Table of Contents
 
+- [What's new](#What's-New?)
 - [Installation](#installation)
 - [Quick Start](#quick-start)
 - [Project Structure](#project-structure)
@@ -29,6 +30,10 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 - [Contributing](#contributing)
 - [License](#license)
 
+## What's-New?
+
+### New fresh package directory, now the heavy work is done in the cloud while minimizing package size to just a few Kilo Bytes.
+
 ## 🚀 Installation
 
 ### NPM
@@ -68,7 +73,7 @@ pnpm add @pfmcodes/caret
   <script type="module">
     import editor from './node_modules/@pfmcodes/caret/esm/index.js';
     
-    const instance = await editor.createEditor(
+    const instance = await editor.editor.createEditor(
       document.getElementById('editor'),
       {
         value: 'console.log("Hello, World!");',
@@ -87,7 +92,7 @@ pnpm add @pfmcodes/caret
 import editor from '@pfmcodes/caret';
 
 // Create editor instance
-const editorInstance = await editor.createEditor(
+const editorInstance = await editor.editor.createEditor(
   document.getElementById('editor'),
   {
     value: '',           // Initial code
@@ -116,9 +121,9 @@ caret/
 ### JavaScript Editor
 
 ```javascript
-import editor from '@pfmcodes/caret';
+import editor from '@pfmcodes/caret'; // auto link to commonjs version
 
-const jsEditor = await editor.createEditor(
+const jsEditor = await editor.editor.createEditor(
   document.getElementById('js-editor'),
   {
     value: `function greet(name) {

package/commonjs/editor.js

@@ -1,4 +1,4 @@
-const hljs = require("../highlight.js/es/core.js"); // Use default export
+const hljs = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"); // Use default export
 const languages = require("./languages.js");
 
 languages.init();
@@ -18,12 +18,16 @@ async function createEditor(editor, data) {
     highlighted.id = "Caret-highlighted";
     caret.id = "Caret-caret";
     lineCounter.id = "Caret-lineCounter";
+    editor1.className = 'dark';
+    highlighted.className = 'dark';
+    caret.className = 'dark';
+    lineCounter.className = 'dark';
     editor1.style.backgroundColor = isDark ? "#222" : "#fff";
     let code = data.value || "";
     let language = data.language;
     let theme = data.theme;
     if (!languages.registeredLanguages.includes(language)) {
-        const mod = await import(`../highlight.js/es/languages/${language}.js`);
+        const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${language}.js`);
         languages.registerLanguage(language, mod.default);
         languages.registeredLanguages.push(language);
     }
@@ -33,10 +37,10 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/${theme}.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
             document.head.appendChild(link);
         } else {
-            themeLink.href = `./highlight.js/styles/${theme}.css`;
+            themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
         }
     } else {
         let themeLink  = document.getElementById("Caret-theme");
@@ -44,7 +48,7 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/hybrid.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
             document.head.appendChild(link);
         } else {
             themeLink.href = `./highlight.js/styles/hybrid.css`;
@@ -139,6 +143,7 @@ async function createEditor(editor, data) {
         lineCounter.innerHTML = html;
     }
 
+    highlighted.style.paddingTop = "12px"
 
     function getFontMetrics() {
         const metrics = measureCtx.measureText("Mg");
@@ -187,7 +192,7 @@ async function createEditor(editor, data) {
             (lineHeight - ascent) +
             "px";
 
-        caret.style.height = `${lineHeight}px`;
+        caret.style.height = `${lineHeight - 5}px`;
     }
     const input = () => {
         caret.style.opacity = "1";
@@ -243,7 +248,7 @@ async function createEditor(editor, data) {
                 language = "xml";
                 l = "xml";
             }
-            const mod = await import(`../highlight.js/es/languages/${l}.js`);
+            const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${l}.js`);
             
         }
         language = l;

package/commonjs/languages.js

@@ -1,22 +1,22 @@
-const javascript = require("../highlight.js/es/languages/javascript.js");
-const xml = require("../highlight.js/es/languages/xml.js");
-const css = require("../highlight.js/es/languages/css.js");
-const python = require("../highlight.js/es/languages/python.js");
-const java = require("../highlight.js/es/languages/java.js");
-const csharp = require("../highlight.js/es/languages/csharp.js");
-const cpp = require("../highlight.js/es/languages/cpp.js");
-const ruby = require("../highlight.js/es/languages/ruby.js");
-const php = require("../highlight.js/es/languages/php.js");
-const go = require("../highlight.js/es/languages/go.js");
-const c = require("../highlight.js/es/languages/c.js");
-const rust = require("../highlight.js/es/languages/rust.js");
-const kotlin = require("../highlight.js/es/languages/kotlin.js");
-const swift = require("../highlight.js/es/languages/swift.js");
-const typescript = require("../highlight.js/es/languages/typescript.js");
-const json = require("../highlight.js/es/languages/json.js");
-const bash = require("../highlight.js/es/languages/bash.js");
-const plaintext = require("../highlight.js/es/languages/plaintext.js");
-const hljs = require("../highlight.js/es/core.js");
+const javascript = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/javascript.js");
+const xml = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/xml.js");
+const css = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/css.js");
+const python = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/python.js");
+const java = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/java.js");
+const csharp = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/csharp.js");
+const cpp = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/cpp.js");
+const ruby = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/ruby.js");
+const php = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/php.js");
+const go = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/go.js");
+const c = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/c.js");
+const rust = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/rust.js");
+const kotlin = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/kotlin.js");
+const swift = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/swift.js");
+const typescript = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/typescript.js");
+const json = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/json.js");
+const bash = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/bash.js");
+const plaintext = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/plaintext.js");
+const hljs = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js");
 
 let registeredLanguages = [];
 

package/commonjs/theme.js

@@ -1,6 +1,6 @@
 function setTheme(name) {
   const link = document.getElementById("Caret-theme");
-  link.href = `./highlight.js/styles/${name}.css`;
+  link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${name}.css`;
 }
 
 function removeTheme() {

package/esm/editor.js

@@ -1,4 +1,4 @@
-import hljs from "../highlight.js/es/core.js"; // Use default export
+import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Use default export
 import languages from "./languages.js";
 
 languages.init();
@@ -18,12 +18,16 @@ async function createEditor(editor, data) {
     highlighted.id = "Caret-highlighted";
     caret.id = "Caret-caret";
     lineCounter.id = "Caret-lineCounter";
+    editor1.className = 'dark';
+    highlighted.className = 'dark';
+    caret.className = 'dark';
+    lineCounter.className = 'dark';
     editor1.style.backgroundColor = isDark ? "#222" : "#fff";
     let code = data.value || "";
     let language = data.language;
     let theme = data.theme;
     if (!languages.registeredLanguages.includes(language)) {
-        const mod = await import(`../highlight.js/es/languages/${language}.js`);
+        const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${language}.js`);
         languages.registerLanguage(language, mod.default);
         languages.registeredLanguages.push(language);
     }
@@ -33,10 +37,10 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/${theme}.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
             document.head.appendChild(link);
         } else {
-            themeLink.href = `./highlight.js/styles/${theme}.css`;
+            themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
         }
     } else {
         let themeLink  = document.getElementById("Caret-theme");
@@ -44,7 +48,7 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/hybrid.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
             document.head.appendChild(link);
         } else {
             themeLink.href = `./highlight.js/styles/hybrid.css`;
@@ -139,6 +143,7 @@ async function createEditor(editor, data) {
         lineCounter.innerHTML = html;
     }
 
+    highlighted.style.paddingTop = "12px"
 
     function getFontMetrics() {
         const metrics = measureCtx.measureText("Mg");
@@ -187,7 +192,7 @@ async function createEditor(editor, data) {
             (lineHeight - ascent) +
             "px";
 
-        caret.style.height = `${lineHeight}px`;
+        caret.style.height = `${lineHeight - 5}px`;
     }
     const input = () => {
         caret.style.opacity = "1";
@@ -243,7 +248,7 @@ async function createEditor(editor, data) {
                 language = "xml";
                 l = "xml";
             }
-            const mod = await import(`../highlight.js/es/languages/${l}.js`);
+            const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${l}.js`);
             
         }
         language = l;

package/esm/languages.js

@@ -1,22 +1,22 @@
-import javascript from "../highlight.js/es/languages/javascript.js";
-import xml from "../highlight.js/es/languages/xml.js";
-import css from "../highlight.js/es/languages/css.js";
-import python from "../highlight.js/es/languages/python.js";
-import java from "../highlight.js/es/languages/java.js";
-import csharp from "../highlight.js/es/languages/csharp.js";
-import cpp from "../highlight.js/es/languages/cpp.js";
-import ruby from "../highlight.js/es/languages/ruby.js";
-import php from "../highlight.js/es/languages/php.js";
-import go from "../highlight.js/es/languages/go.js";
-import c from "../highlight.js/es/languages/c.js";
-import rust from "../highlight.js/es/languages/rust.js";
-import kotlin from "../highlight.js/es/languages/kotlin.js";
-import swift from "../highlight.js/es/languages/swift.js";
-import typescript from "../highlight.js/es/languages/typescript.js";
-import json from "../highlight.js/es/languages/json.js";
-import bash from "../highlight.js/es/languages/bash.js";
-import plaintext from "../highlight.js/es/languages/plaintext.js";
-import hljs from "../highlight.js/es/core.js";
+import javascript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/javascript.js";
+import xml from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/xml.js";
+import css from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/css.js";
+import python from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/python.js";
+import java from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/java.js";
+import csharp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/csharp.js";
+import cpp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/cpp.js";
+import ruby from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/ruby.js";
+import php from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/php.js";
+import go from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/go.js";
+import c from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/c.js";
+import rust from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/rust.js";
+import kotlin from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/kotlin.js";
+import swift from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/swift.js";
+import typescript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/typescript.js";
+import json from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/json.js";
+import bash from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/bash.js";
+import plaintext from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/plaintext.js";
+import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js";
 
 let registeredLanguages = [];
 

package/esm/theme.js

@@ -1,6 +1,6 @@
 function setTheme(name) {
   const link = document.getElementById("Caret-theme");
-  link.href = `./highlight.js/styles/${name}.css`;
+  link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${name}.css`;
 }
 
 function removeTheme() {

package/index.css

@@ -6,11 +6,11 @@
   font-family: monospace;
   background: transparent;
   color: transparent;
-  caret-color: transparent;
+  caret-color: #fff;
   border: 1px solid #ccc;
-  resize: none;
-  overflow: auto; /* 👈 ONLY THIS SCROLLS */
+  overflow: scroll; /* 👈 ONLY THIS SCROLLS */
   z-index: 1;
+  width: 100%;
 }
 #Caret-textarea:focus {
   outline: none;
@@ -32,6 +32,7 @@
   position: absolute;
   width: 2px !important;              /* 👈 thickness */
   opacity: 0;
+  display: none;
   pointer-events: none;
   z-index: 3;
   top: 12px;
@@ -79,17 +80,19 @@
   flex-direction: column;
   height: fit-content;
   justify-content: space-around;
+  z-index: 10;
 }
 
 @keyframes blink {
   50% { opacity: 0; }
 }
 
-@media (prefers-color-scheme: dark) {
-  #Caret-caret {
-    background: #fff0; /* caret color */
-  }
-  #Caret-highlighted {
-    color: #fff;
-  }
+#Caret-caret.dark {
+  background: #fff0; /* caret color */
+}
+#Caret-highlighted.dark {
+  color: #fff;
+}
+#Caret-lineCounter.dark {
+  color: #fff;
 }

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "The official code editor engine for lexius",
   "type": "module",
-  "main": "./index.cjs",
-  "types": "./types/types.d.ts",
+  "main": "./esm/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./esm/index.js",
-      "require": "./commonjs/index.js",
-      "types": "./types/index.d.ts"
-    }
+      "require": "./commonjs/index.js"
+    },
+    "./commonjs": "./commonjs/index.js",
+    "./esm": "./esm/index.js"
   },
   "repository": {
     "type": "git",
@@ -24,6 +26,7 @@
     "syntax-highlighting",
     "language-server",
     "typescript",
+    "python",
     "javascript",
     "ide",
     "browser-editor",

package/types/editor.ts

@@ -0,0 +1,284 @@
+import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Use default export
+import languages from "./languages.ts";
+
+languages.init();
+
+async function createEditor(editor: HTMLElement, data: any) {
+    const editor1: HTMLTextAreaElement = document.createElement("textarea");
+    const highlighted: HTMLPreElement = document.createElement("pre");
+    const caret: HTMLDivElement = document.createElement("div");
+    const measureCanvas: HTMLCanvasElement = document.createElement("canvas");
+    const measureCtx: CanvasRenderingContext2D  = measureCanvas.getContext("2d")!;
+    const isDark: boolean = data.theme && (data.theme.includes("dark") || data.theme.includes("night"));
+    const caretColor: string = isDark ? "#fff" : "#7116d8";
+    const lineColor: string = isDark ? "#fff" : "#000";
+    const lineCounter: HTMLDivElement = document.createElement("div");
+
+    editor1.id = "Caret-textarea";
+    highlighted.id = "Caret-highlighted";
+    caret.id = "Caret-caret";
+    lineCounter.id = "Caret-lineCounter";
+    editor1.className = 'dark';
+    highlighted.className = 'dark';
+    caret.className = 'dark';
+    lineCounter.className = 'dark';
+    editor1.style.backgroundColor = isDark ? "#222" : "#fff";
+    let code: string = data.value || "";
+    let language: string = data.language;
+    let theme: string = data.theme;
+    if (!languages.registeredLanguages.includes(language)) {
+        const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${language}.js`);
+        languages.registerLanguage(language, mod.default);
+        languages.registeredLanguages.push(language);
+    }
+    if (theme) {
+        let themeLink = document.getElementById("Caret-theme")
+        if (!themeLink) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.id = "Caret-theme";
+            link.href = `./highlight.js/styles/${theme}.css`;
+            document.head.appendChild(link);
+        } else {
+            themeLink.href = `./highlight.js/styles/${theme}.css`;
+        }
+    } else {
+        let themeLink  = document.getElementById("Caret-theme");
+        if (!themeLink) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.id = "Caret-theme";
+            link.href = `./highlight.js/styles/hybrid.css`;
+            document.head.appendChild(link);
+        } else {
+            themeLink.href = `./highlight.js/styles/hybrid.css`;
+        }
+    }
+    editor1.spellcheck = false;
+    editor1.autocapitalize = "off";
+    editor1.autocomplete = "off";
+    (editor1 as any).autocorrect = false;
+    editor.style = "position: relative; width: 600px; height: 300px; overflow: hidden; /* 👈 CRITICAL */ font-size: 14px;"   
+    if (code) {
+        editor1.value = code;
+        editor1.style.paddingTop = "-9px";
+        highlighted.innerHTML = hljs.highlight(code, { language: language }).value;
+    }
+    const keyDown = (e: any) => {
+        if (e.key !== "Tab") return;
+
+        e.preventDefault();
+
+        const value = editor1.value;
+        const start = editor1.selectionStart;
+        const end = editor1.selectionEnd;
+
+        const indent = "    ";
+
+        // Find line start & end
+        const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+        const lineEnd = value.indexOf("\n", end);
+        const finalLineEnd = lineEnd === -1 ? value.length : lineEnd;
+
+        const block = value.slice(lineStart, finalLineEnd);
+        const lines = block.split("\n");
+
+        let newLines: any;
+        let delta: number = 0;
+
+        if (e.shiftKey) {
+            // UNINDENT
+            newLines = lines.map(line => {
+                if (line.startsWith(indent)) {
+                    delta -= indent.length;
+                    return line.slice(indent.length);
+                }
+                if (line.startsWith("\t")) {
+                    delta -= 1;
+                    return line.slice(1);
+                }
+                return line;
+            });
+        } else {
+            // INDENT
+            newLines = lines.map(line => indent + line);
+            delta = indent.length;
+        }
+
+        const newBlock = newLines.join("\n");
+
+        editor1.value =
+            value.slice(0, lineStart) +
+            newBlock +
+            value.slice(finalLineEnd);
+
+        // Fix selection
+        editor1.selectionStart = start + delta;
+        editor1.selectionEnd =
+            end + delta * newLines.length;
+
+        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        updateLineNumbers();
+        updateCaret();
+    }
+    editor1.addEventListener("keydown", keyDown);
+    editor.appendChild(lineCounter);
+    editor.appendChild(highlighted);
+    editor.appendChild(editor1);
+    editor.appendChild(caret);
+
+    function updateFontMetrics() {
+        const style: any = getComputedStyle(editor1);
+        measureCtx.font = `${style.fontSize} ${style.fontFamily}`;
+    }
+
+    function updateLineNumbers() {
+        const lineCount: number = editor1.value.split("\n").length;
+
+        let html: string = "";
+        for (let i: number = 1; i <= lineCount; i++) {
+            html += `<div class="Caret-lineCounter-number" style="color: ${lineColor}">${i}</div>`;
+        }
+
+        lineCounter.innerHTML = html;
+    }
+
+    highlighted.style.paddingTop = "12px"
+
+    function getFontMetrics() {
+        const metrics = measureCtx.measureText("Mg");
+        return {
+            ascent: metrics.actualBoundingBoxAscent,
+            descent: metrics.actualBoundingBoxDescent,
+            height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+        };
+    }
+    const focus = () => {
+        caret.style.opacity = "1";
+        caret.style.background = caretColor;
+    };
+
+    editor1.addEventListener("focus", focus);
+
+    const blur = () => {
+        caret.style.opacity = "0";
+    };
+
+    editor1.addEventListener("blur", blur);
+
+    function updateCaret() {
+        const start = editor1.selectionStart;
+        const text = editor1.value.slice(0, start);
+
+        const lines = text.split("\n");
+        const lineIndex = lines.length - 1;
+        const lineText = lines[lineIndex].replace(/\t/g, "  ");
+
+        const style = getComputedStyle(editor1);
+        const paddingLeft = parseFloat(style.paddingLeft);
+        const paddingTop = parseFloat(style.paddingTop);
+        const lineHeight = parseFloat(style.lineHeight);
+
+        updateFontMetrics();
+        const metrics = measureCtx.measureText("Mg");
+        const ascent = metrics.actualBoundingBoxAscent;
+
+        caret.style.left =
+            paddingLeft + measureCtx.measureText(lineText).width + "px";
+        caret.style.top =
+           -9 +
+            paddingTop +
+            lineIndex * lineHeight +
+            (lineHeight - ascent) +
+            "px";
+
+        caret.style.height = `${lineHeight - 5}px`;
+    }
+    const input = () => {
+        caret.style.opacity = "1";
+        highlighted.innerHTML = hljs.highlight(editor1.value, { language: language }).value;
+        updateLineNumbers();
+        updateCaret();
+    };
+    editor1.addEventListener("input", input);
+    const scroll = () => {
+        const x = -editor1.scrollLeft;
+        const y = -editor1.scrollTop;
+
+        highlighted.style.transform = `translate(${x}px, ${y}px)`;
+        caret.style.transform = `translate(${x}px, ${y}px)`;
+        lineCounter.style.transform = `translateY(${y}px)`;
+    };
+    editor1.addEventListener("scroll", scroll);
+
+    updateFontMetrics();
+    getFontMetrics();
+
+    editor1.addEventListener("click", updateCaret);
+    editor1.addEventListener("keyup", updateCaret);
+    
+    // Initial caret position
+    updateLineNumbers();
+    updateCaret();
+    
+    // Focus the editor
+    editor1.focus();
+    function destroy() {
+        editor1.removeEventListener('click', updateCaret);
+        editor1.removeEventListener('keyup', updateCaret);
+        editor1.removeEventListener('scroll', scroll);
+        editor1.removeEventListener('keydown', keyDown);
+        editor.innerHTML = "";
+    }
+    function refresh() {
+        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        updateLineNumbers();
+        updateCaret();
+    }
+    function getValue() {
+        return editor1.value;
+    }
+    function setValue(i: string) {
+        editor1.value = i;
+        refresh();
+    }
+    async function setLanguage(l: string) {
+        if (!languages.registeredLanguages.includes(l)) {
+            if (l === "html" || l === "svg") {
+                language = "xml";
+                l = "xml";
+            }
+            const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${l}.js`);
+            
+        }
+        language = l;
+        refresh();
+    }
+    return {
+        getValue,
+        setValue,
+        focus,
+        setLanguage,
+        destroy
+    };
+}
+
+const editor = {
+    createEditor
+};
+
+export default editor;
+
+/* 
+
+createEditor: creates the main editor, using html Elements like, textarea and etc.
+                refresh: refreshs the editor
+                getValue: return the current value from the editor
+                setValue: sets a certain value to the editor's value
+                focus: focusses the editor
+                destroy: destroys and removeEventListeners
+                updateCaret: updates the caret positon, height and other metrics using math
+                updateLineNumbers: just add new line numbers
+                getFontMetrics: returns back the font's metrics like height
+                updateFontMetrics: update the fontMetrics
+*/

package/types/esm-highlight.d.ts

@@ -0,0 +1,4 @@
+declare module "https://esm.sh/@pfmcodes/highlight.js@1.0.0/*" {
+  const mod: any;
+  export default mod;
+}