@pfmcodes/caret 0.2.0 → 0.2.5

package/esm/editor.js

@@ -2,6 +2,7 @@ import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Us
 import languages from "./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);
@@ -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/esm/languages.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) {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.2.0",
+  "version": "0.2.5",
   "description": "The official code editor engine for lexius",
   "type": "module",
   "main": "./esm/index.js",