@pfmcodes/caret 0.2.1 → 0.2.6

package/README.md

@@ -33,8 +33,15 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 
 ## What's-New?
 
-### The editor has been optimized like crazy, the editor used to lag at 500 lines not it does not lag until 10k+ lines(x20 performance increase)
-### for more info about the perfomace check out [this](#performance-notes) and [this](#performance).
+### 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
+- Known issue: custom caret may be 1 character off on original lines of a wrapped line
 
 ##  Installation
 
@@ -73,7 +80,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'),
@@ -91,7 +98,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(
@@ -108,14 +115,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
@@ -123,8 +133,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'),
   {
@@ -142,7 +151,7 @@ console.log(greet('World'));`,
 ### Python Editor
 
 ```javascript
-const pyEditor = await editor.createEditor(
+const pyEditor = await editor.editor.createEditor(
   document.getElementById('py-editor'),
   {
     value: `def fibonacci(n):
@@ -160,7 +169,7 @@ print([fibonacci(i) for i in range(10)])`,
 ### Empty Editor (Start from Scratch)
 
 ```javascript
-const emptyEditor = await editor.createEditor(
+const emptyEditor = await editor.editor.createEditor(
   document.getElementById('empty-editor'),
   {
     value: '',
@@ -215,19 +224,19 @@ Caret supports all languages available in Highlight.js:
 
 ```javascript
 // JavaScript
-await editor.createEditor(el, { language: 'javascript', ... });
+await editor.editor.createEditor(el, { language: 'javascript', ... });
 
 // Python
-await editor.createEditor(el, { language: 'python', ... });
+await editor.editor.createEditor(el, { language: 'python', ... });
 
 // TypeScript
-await editor.createEditor(el, { language: 'typescript', ... });
+await editor.editor.createEditor(el, { language: 'typescript', ... });
 
 // HTML
-await editor.createEditor(el, { language: 'html', ... });
+await editor.editor.createEditor(el, { language: 'html', ... });
 
 // CSS
-await editor.createEditor(el, { language: 'css', ... });
+await editor.editor.createEditor(el, { language: 'css', ... });
 
 // And many more...
 ```
@@ -235,7 +244,7 @@ await editor.createEditor(el, { language: 'css', ... });
 ### Dynamic Language Switching
 
 ```javascript
-const editorInstance = await editor.createEditor(el, {
+const editorInstance = await editor.editor.createEditor(el, {
   value: 'console.log("Hello");',
   language: 'javascript',
   theme: 'hybrid'
@@ -257,7 +266,7 @@ The editor automatically:
 ### Configuration Options
 
 ```javascript
-const editorInstance = await editor.createEditor(
+const editorInstance = await editor.editor.createEditor(
   containerElement,
   {
     // Initial code content
@@ -352,7 +361,7 @@ Here's a complete working example:
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Caret Demo</title>
-  <link rel="stylesheet" href="./node_modules/caret/index.css">
+  <link rel="stylesheet" href="./index.css">
   <style>
     body {
       font-family: system-ui, -apple-system, sans-serif;
@@ -393,21 +402,22 @@ Here's a complete working example:
   <h1 style="text-align: center;">Caret Demo</h1>
   
   <div class="controls">
-    <button onclick="changeLanguage('javascript')">JavaScript</button>
-    <button onclick="changeLanguage('python')">Python</button>
-    <button onclick="changeLanguage('html')">HTML</button>
-    <button onclick="changeTheme('monokai')">Monokai</button>
-    <button onclick="changeTheme('github')">GitHub</button>
-    <button onclick="getCode()">Get Code</button>
+    <button onclick="window.changeLanguage('javascript')">JavaScript</button>
+    <button onclick="window.changeLanguage('python')">Python</button>
+    <button onclick="window.changeLanguage('html')">HTML</button>
+    <button onclick="window.changeTheme('monokai')">Monokai</button>
+    <button onclick="window.changeTheme('github-dark')">GitHub</button>
+    <button onclick="window.changeTheme('atom-one-dark')">Atom One Dark</button>
+    <button onclick="window.getCode()">Get Code</button>
   </div>
   
   <div id="editor"></div>
   
   <script type="module">
-    import editor from './node_modules/caret/esm/index.js';
+    import editor from './node_modules/@pfmcodes/caret/index.js';
     
     // Initialize editor
-    const editorInstance = await editor.createEditor(
+    const editorInstance = await editor.editor.createEditor(
       document.getElementById('editor'),
       {
         value: `// Welcome to Caret!
@@ -421,7 +431,7 @@ for (let i = 0; i < 10; i++) {
   console.log(\`F(\${i}) = \${fibonacci(i)}\`);
 }`,
         language: 'javascript',
-        theme: 'atom-one-dark'
+        theme: 'tokyo-night-dark'
       }
     );
     
@@ -433,20 +443,7 @@ for (let i = 0; i < 10; i++) {
     };
     
     window.changeTheme = (theme) => {
-      // Recreate editor with new theme
-      const currentCode = editorInstance.getValue();
-      editorInstance.destroy();
-      
-      editor.createEditor(
-        document.getElementById('editor'),
-        {
-          value: currentCode,
-          language: 'javascript',
-          theme: theme
-        }
-      ).then(instance => {
-        window.editorInstance = instance;
-      });
+      editor.theme.setTheme(theme);
     };
     
     window.getCode = () => {

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

@@ -1,7 +1,8 @@
 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;
 
 async function createEditor(editor, data) {
     const editor1 = document.createElement("textarea");
@@ -14,18 +15,27 @@ async function createEditor(editor, data) {
     const lineColor = isDark ? "#fff" : "#000";
     const lineCounter = 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';
+    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);
@@ -61,7 +71,6 @@ async function createEditor(editor, data) {
     editor.style = "position: relative; width: 600px; height: 300px; overflow: hidden; /* 👈 CRITICAL */ font-size: 14px;"   
     if (code && editor && editor1 && language && highlighted) {
         editor1.style.paddingTop = "-9px";
-        console.log(data.value + " data.value");
         editor1.value = data.value;
         highlighted.innerHTML = await _render(data.value, language, editor1);
     }
@@ -134,12 +143,15 @@ async function createEditor(editor, data) {
     }
 
     function updateLineNumbers() {
-        const lineCount = editor1.value.split("\n").length;
+        const lines = editor1.value.split("\n");
+        const wrapMap = getWrapMap(editor1.value, 71);
 
         let html = "";
-        for (let i = 1; i <= lineCount; i++) {
-            html += `<div class="Caret-lineCounter-number" style="color: ${lineColor}">${i}</div>`;
-        }
+        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;
     }
@@ -167,47 +179,89 @@ async function createEditor(editor, data) {
 
     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 lineText = lines[lineIndex].replace(/\t/g, "  ");
+        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);
+        const lineHeight = parseFloat(style.lineHeight) || 20;
 
         updateFontMetrics();
-        const metrics = measureCtx.measureText("Mg");
-        const ascent = metrics.actualBoundingBoxAscent;
+        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;
 
-        caret.style.left =
-            paddingLeft + measureCtx.measureText(lineText).width + "px";
-        caret.style.top =
-           -9 +
-            paddingTop +
-            lineIndex * lineHeight +
-            (lineHeight - ascent) +
-            "px";
+        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 = `translate(${x}px, ${y}px)`;
-        caret.style.transform = `translate(${x}px, ${y}px)`;
+        highlighted.style.transform = `translateY(${y}px)`;
+        caret.style.transform = `translateY(${y}px)`;
         lineCounter.style.transform = `translateY(${y}px)`;
     };
     editor1.addEventListener("scroll", scroll);
@@ -244,13 +298,13 @@ async function createEditor(editor, data) {
         refresh();
     }
     async function setLanguage(l) {
+        if (l === "html" || l === "svg") {
+            language = "xml";
+            l = "xml";
+        }
         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();
@@ -260,10 +314,88 @@ async function createEditor(editor, data) {
         setValue,
         focus,
         setLanguage,
-        destroy
+        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;")
@@ -276,7 +408,6 @@ async function _render(code, language, editor) {
     if (!editor) {
         return hljs.highlight(code, { language }).value;
     }
-    
     const scrollTop = editor.scrollTop;
     const scrollBottom = scrollTop + editor.clientHeight;
     const style = getComputedStyle(editor);
@@ -299,8 +430,14 @@ async function _render(code, language, editor) {
     const afterLines = lines.slice(visibleEnd);
     
     // Only highlight visible portion
-    
-    const highlightedVisible = hljs.highlight(visibleLines.join("\n"), { language }).value;
+    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;

package/index.css

@@ -1,4 +1,4 @@
-#Caret-textarea {
+.Caret-textarea {
   position: absolute;
   border: none;
   inset: 0;
@@ -7,33 +7,40 @@
   background: transparent;
   color: transparent;
   caret-color: #fff;
-  border: 1px solid #ccc;
   overflow-x: scroll; /* 👈 ONLY THIS SCROLLS */
   z-index: 1;
-  width: 100%;
+  width: auto;
+  min-width: max-content;
 }
 
-#Caret-texarea::-webkit-scrollbar {
-  z-index: 3;
+::-webkit-scrollbar {
+  display: none;
+}
+
+.Caret-caret, .Caret-lineCounter, .Caret-textarea {
+  overflow: auto;
+  overflow-x: auto;
 }
 
-#Caret-textarea:focus {
+.Caret-textarea:focus {
   outline: none;
 }
 
-#Caret-highlighted {
+.Caret-highlighted {
   position: absolute;
   top: 0;
   left: 0;
   margin: 0;
   padding: 10px;
   pointer-events: none;
-  overflow: hidden; /* 👈 IMPORTANT */
+  overflow: visible; /* 👈 IMPORTANT */
   z-index: 2;
   white-space: pre;
+  min-width: max-content;
+  width: auto;
 }
 
-#Caret-caret {
+.Caret-caret {
   position: absolute;
   width: 2px !important;              /* 👈 thickness */
   opacity: 0;
@@ -44,20 +51,20 @@
   animation: blink 1s step-end infinite;
 }
 
-#Caret-textarea,
-#Caret-highlighted,
-#Caret-lineCounter {
+.Caret-textarea,
+.Caret-highlighted,
+.Caret-lineCounter {
   font: inherit;
   line-height: inherit;
 }
 
-#Caret-textarea::selection {
+.Caret-textarea::selection {
     color: transparent;
     background-color: rgb(79, 79, 249);
 }
 
-#Caret-textarea,
-#Caret-highlighted {
+.Caret-textarea,
+.Caret-highlighted {
   font-family: monospace;
   font-size: 14px;
   line-height: 1.5;
@@ -65,7 +72,7 @@
   tab-size: 2;
 }
 
-#Caret-lineCounter {
+.Caret-lineCounter {
   position: absolute;
   top: 0;
   left: 0;
@@ -74,7 +81,7 @@
   font-family: monospace;
   font: 18px;
   line-height: 1.5;
-  color: #999;
+  color: .999;
   text-align: right;
   user-select: none;
   opacity: 0.7;
@@ -92,12 +99,12 @@
   50% { opacity: 0; }
 }
 
-#Caret-caret.dark {
+.Caret-caret.dark {
   background: #fff0; /* caret color */
 }
-#Caret-highlighted.dark {
+.Caret-highlighted.dark {
   color: #fff;
 }
-#Caret-lineCounter.dark {
+.Caret-lineCounter.dark {
   color: #fff;
 }

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

@@ -1,6 +1,6 @@
 import editor from "./editor.js";
 import theme from "./theme.js";
-import language from "./languages.js";
+import language from "./langauges.js";
 
 const Caret = {
     editor,

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

@@ -24,8 +24,13 @@ 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("html", xml);
     hljs.registerLanguage("python", python);
     hljs.registerLanguage("java", java);
     hljs.registerLanguage("csharp", csharp);
@@ -37,18 +42,15 @@ function init() {
     hljs.registerLanguage("rust", rust);
     hljs.registerLanguage("kotlin", kotlin);
     hljs.registerLanguage("swift", swift);
-    hljs.registerLanguage("typescript", typescript);
     hljs.registerLanguage("json", json);
     hljs.registerLanguage("bash", bash);
     hljs.registerLanguage("shell", bash);
     hljs.registerLanguage("sh", bash);
     hljs.registerLanguage("plaintext", plaintext);
-    registeredLanguages = [
-        "javascript",
-        "js",
-        "xml",
-        "html",
-        "svg",
+    registeredLanguages.push(
+        "javascript", "js",
+        "xml", "html", "svg",
+        "css",
         "python",
         "java",
         "csharp",
@@ -62,11 +64,9 @@ function init() {
         "swift",
         "typescript",
         "json",
-        "bash",
-        "shell",
-        "sh",
+        "bash", "shell", "sh",
         "plaintext"
-    ]
+    );
 }
 
 function registerLanguage(name, definition) {