@pfmcodes/caret 0.2.0 → 0.2.5

package/README.md

@@ -29,12 +29,14 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 - [Customization](#customization)
 - [Contributing](#contributing)
 - [License](#license)
-- [Performance Notes](#performance-notes)
+- [Perfomance Notes](#performance-notes)
 
 ## 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 performance check out [this.](#performance-notes)
+- 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
 
@@ -91,7 +93,7 @@ pnpm add @pfmcodes/caret
 ### ES Module Import
 
 ```javascript
-import editor from '@pfmcodes/caret';
+import editor from './node_modules/@pfmcodes/caret/esm/index.js';
 
 // Create editor instance
 const editorInstance = await editor.editor.createEditor(
@@ -123,7 +125,7 @@ caret/
 ### JavaScript Editor
 
 ```javascript
-import editor from '@pfmcodes/caret'; // auto link to commonjs version
+import editor from './node_modules/@pfmcodes/caret/esm/index.js'; // auto link to commonjs version
 
 const jsEditor = await editor.editor.createEditor(
   document.getElementById('js-editor'),
@@ -142,7 +144,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 +162,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 +217,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 +237,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 +259,7 @@ The editor automatically:
 ### Configuration Options
 
 ```javascript
-const editorInstance = await editor.createEditor(
+const editorInstance = await editor.editor.createEditor(
   containerElement,
   {
     // Initial code content
@@ -352,7 +354,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 +395,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/esm/index.js';
     
     // Initialize editor
-    const editorInstance = await editor.createEditor(
+    const editorInstance = await editor.editor.createEditor(
       document.getElementById('editor'),
       {
         value: `// Welcome to Caret!
@@ -421,7 +424,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 +436,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 = () => {
@@ -480,7 +470,7 @@ The editor synchronizes all layers during:
 - **Real-time Highlighting**: Uses Highlight.js for fast, accurate syntax highlighting
 - **Canvas Measurement**: Employs HTML5 Canvas API for precise text width calculations
 - **Event Optimization**: Efficiently updates only what's necessary on each interaction
-- **Heavy Optimization**: previous version(0.1.6) used to handle 500 lines before lagging, with new caret@0.2.0, there's almost 20 times perfomace increase now it can handle 10K+ lines smoothly before lagging(better results in optimized browsers like firfox)
+- **Heavy Optimization**: v0.1.5 used to handle 500 lines before lagging, with new caret@0.2.0 and onwards, there's almost 20 times performance increase now it can handle 10K+ lines smoothly before lagging(better results in optimized browsers like firefox)
 
 ### Browser Support
 

package/commonjs/editor.js

@@ -2,6 +2,7 @@ const hljs = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js");
 const languages = require("./languages.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);
@@ -250,7 +304,7 @@ async function createEditor(editor, data) {
                 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/commonjs/languages.js

@@ -1,22 +1,22 @@
-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");
+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 = [];
 
@@ -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,7 +42,6 @@ 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);
@@ -46,6 +50,7 @@ function init() {
     registeredLanguages = [
         "javascript",
         "js",
+        'jsx',
         "xml",
         "html",
         "svg",