@pfmcodes/caret 0.2.5 → 0.2.7

package/README.md

@@ -33,6 +33,14 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 
 ## What's-New?
 
+### v0.2.7
+- another cleanup but this time, with file optimizations and updated comments at the end of each containing short summaries of each function and variables(only some important variables)
+
+### v0.2.6
+
+- CommonJs support has been removed to reduce package size
+
+### v0.2.5
 - Multiple editor instances support
 - Word-aware line wrapping
 - Fixed language re-registration bug
@@ -75,7 +83,7 @@ pnpm add @pfmcodes/caret
   <div id="editor"></div>
   
   <script type="module">
-    import editor from './node_modules/@pfmcodes/caret/esm/index.js';
+    import editor from './node_modules/@pfmcodes/caret/index.js';
     
     const instance = await editor.editor.createEditor(
       document.getElementById('editor'),
@@ -93,7 +101,7 @@ pnpm add @pfmcodes/caret
 ### ES Module Import
 
 ```javascript
-import editor from './node_modules/@pfmcodes/caret/esm/index.js';
+import editor from './node_modules/@pfmcodes/caret/index.js';
 
 // Create editor instance
 const editorInstance = await editor.editor.createEditor(
@@ -110,14 +118,17 @@ const editorInstance = await editor.editor.createEditor(
 
 ```
 caret/
-├── esm/                  # ES Module builds
-├── highlight.js/         # Syntax highlighting support
-├── types/               # TypeScript type definitions
-├── index.css            # Core styles
-├── package.json         # Package configuration
+├── types/              # TypeScript type definitions
 ├── .gitignore          # Git ignore rules
 ├── .npmignore          # NPM ignore rules
-└── LICENSE             # MIT License
+├── editor.js           # main editor file essential for ui
+├── index.css           # Core styles
+├── index.js            # Main file
+├── langauges.js        # handles langauge related tasks
+├── LICENSE             # MIT License
+├── package.json        # Package configuration
+├── README.md           # The file containing instructions and help
+└── theme.js            # handles theme related tasks
 ```
 
 ## Usage
@@ -125,8 +136,7 @@ caret/
 ### JavaScript Editor
 
 ```javascript
-import editor from './node_modules/@pfmcodes/caret/esm/index.js'; // auto link to commonjs version
-
+import editor from './node_modules/@pfmcodes/caret/index.js';
 const jsEditor = await editor.editor.createEditor(
   document.getElementById('js-editor'),
   {
@@ -407,7 +417,7 @@ Here's a complete working example:
   <div id="editor"></div>
   
   <script type="module">
-    import editor from './node_modules/@pfmcodes/caret/esm/index.js';
+    import editor from './node_modules/@pfmcodes/caret/index.js';
     
     // Initialize editor
     const editorInstance = await editor.editor.createEditor(

package/{esm/editor.js → editor.js}

@@ -1,5 +1,5 @@
 import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Use default export
-import languages from "./languages.js";
+import languages from "./langauges.js";
 
 languages.init();
 let numberWrappedCode = 0;
@@ -453,16 +453,24 @@ const editor = {
 
 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
+/*
+createEditor(editor, data): creates the main editor using HTML elements like textarea, pre, div etc.
+    Returns an object with the following methods:
+        getValue() -> returns the current value from the editor
+        setValue(val) -> sets a value to the editor
+        focus() -> focuses the editor
+        setLanguage(lang) -> changes the syntax highlighting language
+        destroy() -> destroys the editor and removes all event listeners
+        onDidChangeModelContent(fn) -> fires a callback whenever the editor content changes
+
+Internal functions:
+        _render(code, language, editor) -> virtual renderer, only highlights visible lines for performance
+        wrapCode(code, wrapAt) -> wraps long lines at word boundaries
+        getWrapMap(code, wrapAt) -> returns an array mapping each line to its visual line count
+        escapeHtml(str) -> escapes HTML special characters
+        updateCaret() -> updates the caret position using canvas font metrics
+        updateLineNumbers() -> re-renders line numbers, accounting for wrapped lines
+        updateFontMetrics() -> updates the canvas font to match the textarea's computed style
+        getFontMetrics() -> returns ascent, descent and height of the current font
+        getVisualRow(text, wrapAt) -> returns which visual row and remaining text the caret is on
 */

package/index.js

@@ -0,0 +1,22 @@
+import editor from "./editor.js";
+import theme from "./theme.js";
+import language from "./langauges.js";
+
+const Caret = {
+    editor,
+    theme,
+    language
+}
+export default Caret;
+
+/* 
+Caret.editor: 
+    createEditor() -> backbone of caret, handles ui and abstractions
+Caret.theme:
+    setTheme() -> changes the current highlight.js theme
+Caret.langauge:
+    init() -> initializes default avaible languages
+    registerLanguage() -> registers a new languages
+    registeredLangauges[List]: has all the langauges registered
+    hljs: the highlight.js module
+*/

package/{esm/languages.js → langauges.js}

@@ -22,31 +22,31 @@ let registeredLanguages = [];
 
 function init() {
     // Register all languages
-    hljs.registerLanguage("javascript", javascript);
-    hljs.registerLanguage("xml", xml);
-    hljs.registerLanguage("typescript", typescript);
-    hljs.registerAliases(["jsx"], { languageName: "javascript" });
-    hljs.registerAliases(["js"], { languageName: "javascript" });
-    hljs.registerAliases(["ts"], { languageName: "typescript" });
-    hljs.registerAliases(["html"], { languageName: "xml" });
-    hljs.registerAliases(["svg"], { languageName: "xml" });
-    hljs.registerLanguage("css", css);
-    hljs.registerLanguage("python", python);
-    hljs.registerLanguage("java", java);
-    hljs.registerLanguage("csharp", csharp);
-    hljs.registerLanguage("cpp", cpp);
-    hljs.registerLanguage("ruby", ruby);
-    hljs.registerLanguage("php", php);
-    hljs.registerLanguage("go", go);
-    hljs.registerLanguage("c", c);
-    hljs.registerLanguage("rust", rust);
-    hljs.registerLanguage("kotlin", kotlin);
-    hljs.registerLanguage("swift", swift);
-    hljs.registerLanguage("json", json);
-    hljs.registerLanguage("bash", bash);
-    hljs.registerLanguage("shell", bash);
-    hljs.registerLanguage("sh", bash);
-    hljs.registerLanguage("plaintext", plaintext);
+    registerLanguage("javascript", javascript);
+    registerLanguage("xml", xml);
+    registerLanguage("typescript", typescript);
+    registerAliases(["jsx"], { languageName: "javascript" });
+    registerAliases(["js"], { languageName: "javascript" });
+    registerAliases(["ts"], { languageName: "typescript" });
+    registerAliases(["html"], { languageName: "xml" });
+    registerAliases(["svg"], { languageName: "xml" });
+    registerLanguage("css", css);
+    registerLanguage("python", python);
+    registerLanguage("java", java);
+    registerLanguage("csharp", csharp);
+    registerLanguage("cpp", cpp);
+    registerLanguage("ruby", ruby);
+    registerLanguage("php", php);
+    registerLanguage("go", go);
+    registerLanguage("c", c);
+    registerLanguage("rust", rust);
+    registerLanguage("kotlin", kotlin);
+    registerLanguage("swift", swift);
+    registerLanguage("json", json);
+    registerLanguage("bash", bash);
+    registerLanguage("shell", bash);
+    registerLanguage("sh", bash);
+    registerLanguage("plaintext", plaintext);
     registeredLanguages.push(
         "javascript", "js",
         "xml", "html", "svg",
@@ -70,9 +70,13 @@ function init() {
 }
 
 function registerLanguage(name, definition) {
-    hljs.registerLanguage(name, definition);
     if (!registeredLanguages.includes(name)) {
+        hljs.registerLanguage(name, definition);
         registeredLanguages.push(name);
+        return;
+    } else {
+        console.warn(`Caret: Language ${name} already registered, aborting`);
+        return;
     }
 }
 
@@ -86,12 +90,7 @@ const languages = {
 export default languages;
 
 /* 
-
 registeredLannguage: added for the editor.js can check if the langauge provided already is regsitered or not
-
-
 init: just registers some languages and updates the registeredLangauges variable
-
 registerLanguage: just registers a language
-
 */

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "The official code editor engine for lexius",
   "type": "module",
-  "main": "./esm/index.js",
+  "main": "./index.js",
   "types": "./types/index.d.ts",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./esm/index.js",
-      "require": "./commonjs/index.js"
+      "default": "./index.js"
     },
-    "./commonjs": "./commonjs/index.js",
-    "./esm": "./esm/index.js"
+    "./editor": "./esm/index.js",
+    "./langauges": "./langauges.js",
+    "./theme": "./theme.js"
   },
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
   "author": "PFMCODES",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/PFMCODES/lexius-editor/issues"
+    "url": "https://github.com/PFMCODES/Caret/issues"
   },
-  "homepage": "https://github.com/PFMCODES/lexius-editor#readme"
+  "homepage": "https://github.com/PFMCODES/Caret#readme"
 }

package/theme.js

@@ -0,0 +1,14 @@
+function setTheme(name) {
+  const link = document.getElementById("Caret-theme");
+  link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${name}.css`;
+}
+
+const theme = {
+    setTheme
+}
+
+export default theme;
+
+/*
+setTheme() -> changes the current highlight.js theme
+*/

package/types/editor.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Use default export
-import languages from "./languages.ts";
+import languages from "./langauges.ts";
 
 languages.init();
 
@@ -49,6 +50,7 @@ async function createEditor(editor: HTMLElement, data: any) {
             link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
             document.head.appendChild(link);
         } else {
+            // @ts-ignore
             themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
         }
     } else {
@@ -60,6 +62,7 @@ async function createEditor(editor: HTMLElement, data: any) {
             link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
             document.head.appendChild(link);
         } else {
+            // @ts-ignore
             themeLink.href = `./highlight.js/styles/hybrid.css`;
         }
     }
@@ -455,16 +458,24 @@ const editor = {
 
 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
+/*
+createEditor(editor, data): creates the main editor using HTML elements like textarea, pre, div etc.
+    Returns an object with the following methods:
+        getValue() -> returns the current value from the editor
+        setValue(val) -> sets a value to the editor
+        focus() -> focuses the editor
+        setLanguage(lang) -> changes the syntax highlighting language
+        destroy() -> destroys the editor and removes all event listeners
+        onDidChangeModelContent(fn) -> fires a callback whenever the editor content changes
+
+Internal functions:
+        _render(code, language, editor) -> virtual renderer, only highlights visible lines for performance
+        wrapCode(code, wrapAt) -> wraps long lines at word boundaries
+        getWrapMap(code, wrapAt) -> returns an array mapping each line to its visual line count
+        escapeHtml(str) -> escapes HTML special characters
+        updateCaret() -> updates the caret position using canvas font metrics
+        updateLineNumbers() -> re-renders line numbers, accounting for wrapped lines
+        updateFontMetrics() -> updates the canvas font to match the textarea's computed style
+        getFontMetrics() -> returns ascent, descent and height of the current font
+        getVisualRow(text, wrapAt) -> returns which visual row and remaining text the caret is on
 */

package/types/index.d.ts

@@ -32,3 +32,15 @@ declare module "@pfmcodes/caret" {
 
   export default Caret;
 }
+
+/* 
+Caret.editor: 
+    createEditor() -> backbone of caret, handles ui and abstractions
+Caret.theme:
+    setTheme() -> changes the current highlight.js theme
+Caret.langauge:
+    init() -> initializes default avaible languages
+    registerLanguage() -> registers a new languages
+    registeredLangauges[List]: has all the langauges registered
+    hljs: the highlight.js module
+*/

package/types/index.ts

@@ -1,10 +1,22 @@
 import editor from "./editor.ts";
 import theme from "./theme.ts";
-import language from "./languages.ts";
+import language from "./langauges.ts";
 
 const Caret = {
     editor,
     theme,
     language
 }
-export default Caret;
+export default Caret;
+
+/* 
+Caret.editor: 
+    createEditor() -> backbone of caret, handles ui and abstractions
+Caret.theme:
+    setTheme() -> changes the current highlight.js theme
+Caret.langauge:
+    init() -> initializes default avaible languages
+    registerLanguage() -> registers a new languages
+    registeredLangauges[List]: has all the langauges registered
+    hljs: the highlight.js module
+*/

package/types/theme.ts

@@ -3,16 +3,12 @@ function setTheme(name: string) {
   link.href = `./highlight.js/styles/${name}.css`;
 }
 
-function removeTheme() {
-  const link = document.getElementById("Caret-theme") as HTMLLinkElement;
-    if (link && link.parentNode) {
-        link.parentNode.removeChild(link);
-    }
-}
-
 const theme = {
-    removeTheme,
     setTheme
 }
 
-export default theme;
+export default theme;
+
+/*
+setTheme() -> changes the current highlight.js theme
+*/

package/commonjs/editor.js

@@ -1,469 +0,0 @@
-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();
-let numberWrappedCode = 0;
-
-async function createEditor(editor, data) {
-    const editor1 = document.createElement("textarea");
-    const highlighted = document.createElement("pre");
-    const caret = document.createElement("div");
-    const measureCanvas = document.createElement("canvas");
-    const measureCtx = measureCanvas.getContext("2d");
-    const isDark = data.theme && (data.theme.includes("dark") || data.theme.includes("night"));
-    const caretColor = isDark ? "#fff" : "#7116d8";
-    const lineColor = isDark ? "#fff" : "#000";
-    const lineCounter = document.createElement("div");
-
-    const i = Math.random().toString(16).slice(2);
-    editor1.id = `Caret-textarea-${i}`;
-    highlighted.id = `Caret-highlighted-${i}`;
-    caret.id = `Caret-caret-${i}`;
-    lineCounter.id = `Caret-lineCounter-${i}`;
-    editor1.classList.add("Caret-textarea");
-    highlighted.classList.add("Caret-highlighted");
-    caret.classList.add("Caret-caret");
-    lineCounter.classList.add("Caret-lineCounter");
-    editor1.classList.add("dark");
-    highlighted.classList.add("dark");
-    caret.classList.add("dark");
-    lineCounter.classList.add("dark");
-    editor1.style.backgroundColor = isDark ? "#222" : "#fff";
-    let code = data.value || "";
-    let language = data.language;
-    let theme = data.theme;
-    let lock = data.readOnly || false;
-    if (lock) {
-        editor1.readOnly = true;
-    }
-    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 = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
-            document.head.appendChild(link);
-        } else {
-            themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/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 = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/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.autocorrect = "off";
-    editor.style = "position: relative; width: 600px; height: 300px; overflow: hidden; /* 👈 CRITICAL */ font-size: 14px;"   
-    if (code && editor && editor1 && language && highlighted) {
-        editor1.style.paddingTop = "-9px";
-        editor1.value = data.value;
-        highlighted.innerHTML = await _render(data.value, language, editor1);
-    }
-    const keyDown = async (e) => {
-        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;
-        let delta = 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 = await _render(editor1.value, language, editor1);
-        updateLineNumbers();
-        updateCaret();
-    }
-    editor1.addEventListener("keydown", keyDown);
-    editor.appendChild(lineCounter);
-    editor.appendChild(highlighted);
-    editor.appendChild(editor1);
-    editor.appendChild(caret);
-
-    function updateFontMetrics() {
-        const style = getComputedStyle(editor1);
-        measureCtx.font = `${style.fontSize} ${style.fontFamily}`;
-    }
-
-    function updateLineNumbers() {
-        const lines = editor1.value.split("\n");
-        const wrapMap = getWrapMap(editor1.value, 71);
-
-        let html = "";
-        lines.forEach((line, i) => {
-            const visualLines = wrapMap[i] || 1;
-            // first visual line gets the number
-            html += `<div class="Caret-lineCounter-number" style="color: ${lineColor}; height: calc(1.5em * ${visualLines})">${i + 1}</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 getVisualRow(text, wrapAt) {
-        // simulate exactly what wrapCode does, but track caret position
-        const words = text.split(" ");
-        let currentLine = "";
-        let visualRow = 0;
-
-        for (let w = 0; w < words.length; w++) {
-            const word = words[w];
-            const isLast = w === words.length - 1;
-            const test = currentLine ? currentLine + " " + word : word;
-
-            if (test.length > wrapAt && currentLine !== "") {
-                visualRow++;
-                currentLine = word;
-            } else {
-                currentLine = test;
-            }
-        }
-
-        return { row: visualRow, lineText: currentLine };
-    }
-
-    function updateCaret() {
-        const start = editor1.selectionStart;
-        const text = editor1.value.slice(0, start);
-
-        const lines = text.split("\n");
-        const lineIndex = lines.length - 1;
-        const currentLineText = lines[lineIndex].replace(/\t/g, "  ");
-
-        const style = getComputedStyle(editor1);
-        const paddingLeft = parseFloat(style.paddingLeft);
-        const paddingTop = parseFloat(style.paddingTop);
-        const lineHeight = parseFloat(style.lineHeight) || 20;
-
-        updateFontMetrics();
-        const ascent = measureCtx.measureText("Mg").actualBoundingBoxAscent;
-
-        const WRAP_AT = 71;
-
-        // count visual rows from all previous lines
-        let totalVisualRows = 0;
-        for (let i = 0; i < lineIndex; i++) {
-            const l = lines[i].replace(/\t/g, "  ");
-            const { row } = getVisualRow(l, WRAP_AT);
-            totalVisualRows += row + 1;
-        }
-
-        const { row, lineText } = getVisualRow(currentLineText, WRAP_AT);
-        const onWrappedLine = row > 0;
-
-        totalVisualRows += row;
-
-        if (onWrappedLine) {
-            // on wrapped line - X is just the text on this visual row
-            caret.style.left = paddingLeft + measureCtx.measureText(lineText).width + "px";
-        } else {
-            // on original line - X is full line text width
-            caret.style.left = paddingLeft + measureCtx.measureText(lineText.trimEnd()).width + "px";
-        }
-
-        caret.style.top = -9 + paddingTop + totalVisualRows * lineHeight + (lineHeight - ascent) + "px";
-        caret.style.height = `${lineHeight - 5}px`;
-    }
-
-    const input = async () => {
-        caret.style.opacity = "1";
-        highlighted.innerHTML = await _render(editor1.value, language, editor1);
-        updateLineNumbers();
-        updateCaret();
-    };
-
-    const onDidChangeModelContent = (fn) => {
-        editor1.addEventListener("input", fn)
-    }
-
-    editor1.addEventListener("input", input);
-    const scroll = async () => {
-        const x = -editor1.scrollLeft;
-        const y = -editor1.scrollTop;
-        highlighted.innerHTML = await _render(editor1.value, language, editor1);
-        highlighted.style.transform = `translateY(${y}px)`;
-        caret.style.transform = `translateY(${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 = "";
-    }
-    async function refresh() {
-        highlighted.innerHTML = await _render(editor1.value, language, editor1);
-        updateLineNumbers();
-        updateCaret();
-    }
-    function getValue() {
-        return editor1.value;
-    }
-    function setValue(i) {
-        editor1.value = i;
-        refresh();
-    }
-    async function setLanguage(l) {
-        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`);
-            languages.registerLanguage(l, mod)
-        }
-        language = l;
-        refresh();
-    }
-    return {
-        getValue,
-        setValue,
-        focus,
-        setLanguage,
-        destroy,
-        onDidChangeModelContent,
-    };
-}
-
-function wrapCode(code, wrapAt = 71) {
-    return code.split("\n").map(line => {
-        if (line.length <= wrapAt) return line;
-
-        const indent = line.match(/^(\s*)/)[1];
-        const words = line.trimStart().split(" ");
-        const wrappedLines = [];
-        let currentLine = indent; // first line keeps indent
-        let isFirstLine = true;
-
-        for (const word of words) {
-            if (word.length > wrapAt) {
-                if (currentLine.trim()) {
-                    wrappedLines.push(currentLine);
-                    currentLine = "";
-                    isFirstLine = false;
-                }
-                for (let i = 0; i < word.length; i += wrapAt) {
-                    wrappedLines.push(word.slice(i, i + wrapAt));
-                }
-                continue;
-            }
-
-            const test = currentLine ? currentLine + " " + word : word;
-            if (test.length > wrapAt) {
-                wrappedLines.push(currentLine);
-                currentLine = word; // no indent on continuation lines
-                isFirstLine = false;
-            } else {
-                currentLine = test;
-            }
-        }
-
-        if (currentLine) wrappedLines.push(currentLine);
-        return wrappedLines.join("\n");
-    }).join("\n");
-}
-
-function getWrapMap(code, wrapAt = 71) {
-    const wrapMap = []; // wrapMap[originalLineIndex] = number of visual lines it produces
-
-    code.split("\n").forEach((line, i) => {
-        if (line.length <= wrapAt) {
-            wrapMap[i] = 1; // no wrap, 1 visual line
-            return;
-        }
-
-        const indent = line.match(/^(\s*)/)[1];
-        const words = line.trimStart().split(" ");
-        let currentLine = indent;
-        let visualLines = 1;
-
-        for (const word of words) {
-            if (word.length > wrapAt) {
-                if (currentLine.trim()) {
-                    visualLines++;
-                    currentLine = "";
-                }
-                visualLines += Math.floor(word.length / wrapAt);
-                continue;
-            }
-
-            const test = currentLine ? currentLine + " " + word : word;
-            if (test.length > wrapAt) {
-                visualLines++;
-                currentLine = word;
-            } else {
-                currentLine = test;
-            }
-        }
-
-        wrapMap[i] = visualLines;
-    });
-
-    return wrapMap;
-}
-
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-}
-
-async function _render(code, language, editor) {
-    // If no editor context provided, just highlight everything (initial load)
-    if (!editor) {
-        return hljs.highlight(code, { language }).value;
-    }
-    const scrollTop = editor.scrollTop;
-    const scrollBottom = scrollTop + editor.clientHeight;
-    const style = getComputedStyle(editor);
-    const lineHeight = parseFloat(style.lineHeight);
-    
-    // Calculate visible line range
-    const startLine = Math.floor(scrollTop / lineHeight);
-    const endLine = Math.ceil(scrollBottom / lineHeight);
-    
-    const lines = code.split("\n");
-    
-    // Add buffer (render extra lines above/below for smooth scrolling)
-    const bufferLines = 10;
-    const visibleStart = Math.max(0, startLine - bufferLines) || 0;
-    const visibleEnd = Math.min(lines.length, endLine + bufferLines) || 0;
-    
-    // Split into three sections
-    const beforeLines = lines.slice(0, visibleStart);
-    const visibleLines = lines.slice(visibleStart, visibleEnd);
-    const afterLines = lines.slice(visibleEnd);
-    
-    // Only highlight visible portion
-    let wrappedCode;
-    if (visibleLines == []) {
-        wrappedCode = wrapCode(code, 68);
-    }
-    else {
-        wrappedCode = wrapCode(visibleLines.join("\n"), 71)
-    }
-    const highlightedVisible = hljs.highlight(wrappedCode, { language }).value;
-    // Plain text for non-visible areas (no highlighting = faster)
-    if (highlightedVisible.trim() === "") {
-        return hljs.highlight(escapeHtml(code), { language }).value;
-    }
-    const beforeHTML = "\n".repeat(beforeLines.length);
-    const afterHTML = "\n".repeat(afterLines.length);
-    return beforeHTML + highlightedVisible + afterHTML;
-}
-
-const editor = {
-    createEditor
-};
-
-module.exports = 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/commonjs/index.js

@@ -1,10 +0,0 @@
-const editor = require("./editor.js");
-const theme = require("./theme.js");
-const language = require("./languages.js");
-
-const Caret = {
-    editor,
-    theme,
-    language
-}
-module.exports = Caret;

package/commonjs/languages.js

@@ -1,102 +0,0 @@
-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 = [];
-
-function init() {
-    // Register all languages
-    hljs.registerLanguage("javascript", javascript);
-    hljs.registerLanguage("xml", xml);
-    hljs.registerLanguage("typescript", typescript);
-    hljs.registerAliases(["jsx"], { languageName: "javascript" });
-    hljs.registerAliases(["js"], { languageName: "javascript" });
-    hljs.registerAliases(["ts"], { languageName: "typescript" });
-    hljs.registerAliases(["html"], { languageName: "xml" });
-    hljs.registerAliases(["svg"], { languageName: "xml" });
-    hljs.registerLanguage("css", css);
-    hljs.registerLanguage("python", python);
-    hljs.registerLanguage("java", java);
-    hljs.registerLanguage("csharp", csharp);
-    hljs.registerLanguage("cpp", cpp);
-    hljs.registerLanguage("ruby", ruby);
-    hljs.registerLanguage("php", php);
-    hljs.registerLanguage("go", go);
-    hljs.registerLanguage("c", c);
-    hljs.registerLanguage("rust", rust);
-    hljs.registerLanguage("kotlin", kotlin);
-    hljs.registerLanguage("swift", swift);
-    hljs.registerLanguage("json", json);
-    hljs.registerLanguage("bash", bash);
-    hljs.registerLanguage("shell", bash);
-    hljs.registerLanguage("sh", bash);
-    hljs.registerLanguage("plaintext", plaintext);
-    registeredLanguages = [
-        "javascript",
-        "js",
-        'jsx',
-        "xml",
-        "html",
-        "svg",
-        "python",
-        "java",
-        "csharp",
-        "cpp",
-        "ruby",
-        "php",
-        "go",
-        "c",
-        "rust",
-        "kotlin",
-        "swift",
-        "typescript",
-        "json",
-        "bash",
-        "shell",
-        "sh",
-        "plaintext"
-    ]
-}
-
-function registerLanguage(name, definition) {
-    hljs.registerLanguage(name, definition);
-    if (!registeredLanguages.includes(name)) {
-        registeredLanguages.push(name);
-    }
-}
-
-const languages = {
-    init,
-    registeredLanguages,
-    registerLanguage,
-    hljs
-}
-
-module.exports = languages;
-
-/* 
-
-registeredLannguage: added for the editor.js can check if the langauge provided already is regsitered or not
-
-
-init: just registers some languages and updates the registeredLangauges variable
-
-registerLanguage: just registers a language
-
-*/

package/commonjs/theme.js

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

package/esm/index.js

@@ -1,10 +0,0 @@
-import editor from "./editor.js";
-import theme from "./theme.js";
-import language from "./languages.js";
-
-const Caret = {
-    editor,
-    theme,
-    language
-}
-export default Caret;

package/esm/theme.js

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

package/types/esm-highlight.d.ts

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