@pfmcodes/caret 0.2.1 → 0.2.5

package/types/editor.ts

@@ -3,39 +3,45 @@ import languages from "./languages.ts";
 
 languages.init();
 
-async function createEditor(editor: HTMLElement, data: { value?: string, language: string, theme?: string }) {
-    const editor1: HTMLTextAreaElement = document.createElement("textarea");
-    const highlighted: HTMLPreElement = document.createElement("pre");
-    const caret: HTMLDivElement = document.createElement("div");
-    const measureCanvas: HTMLCanvasElement = document.createElement("canvas");
-    const measureCtx: CanvasRenderingContext2D = measureCanvas.getContext("2d") as CanvasRenderingContext2D;
-    if (!measureCtx) {
-        throw new Error("Failed to get 2D context from canvas");
-    }
+async function createEditor(editor: HTMLElement, data: any) {
+    const editor1 = document.createElement("textarea");
+    const highlighted = document.createElement("pre");
+    const caret = document.createElement("div");
+    const measureCanvas = document.createElement("canvas");
+    const measureCtx: any = 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: HTMLDivElement = document.createElement("div");
-
-    editor1.id = "Caret-textarea";
-    highlighted.id = "Caret-highlighted";
-    caret.id = "Caret-caret";
-    lineCounter.id = "Caret-lineCounter";
-    editor1.className = 'dark';
-    highlighted.className = 'dark';
-    caret.className = 'dark';
-    lineCounter.className = 'dark';
+    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: HTMLLinkElement | null = document.getElementById("Caret-theme") as HTMLLinkElement;
+        let themeLink = document.getElementById("Caret-theme")
         if (!themeLink) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
@@ -46,7 +52,7 @@ async function createEditor(editor: HTMLElement, data: { value?: string, languag
             themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
         }
     } else {
-        let themeLink: HTMLLinkElement | null = document.getElementById("Caret-theme") as HTMLLinkElement;
+        let themeLink  = document.getElementById("Caret-theme");
         if (!themeLink) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
@@ -58,17 +64,16 @@ async function createEditor(editor: HTMLElement, data: { value?: string, languag
         }
     }
     editor1.spellcheck = false;
-    editor1.autocapitalize = "off";
-    editor1.autocomplete = "off";
-    editor1.autocorrect = "off" as any;
+    (editor1 as any).autocapitalize = "off";
+    (editor1 as any).autocomplete = "off";
+    (editor1 as any).autocorrect = false;
     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 as string;
-        highlighted.innerHTML = await _render(code, language, editor1);
+        editor1.value = data.value;
+        highlighted.innerHTML = await _render(data.value, language, editor1);
     }
-    const keyDown = async (e: KeyboardEvent) => {
+    const keyDown = async (e: any) => {
         if (e.key !== "Tab") return;
 
         e.preventDefault();
@@ -137,12 +142,15 @@ async function createEditor(editor: HTMLElement, data: { value?: string, languag
     }
 
     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;
     }
@@ -170,47 +178,92 @@ async function createEditor(editor: HTMLElement, data: { value?: string, languag
 
     editor1.addEventListener("blur", blur);
 
+    function getVisualRow(text: string, wrapAt: number) {
+        // 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: any) => {
+        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);
@@ -253,7 +306,7 @@ async function createEditor(editor: HTMLElement, data: { value?: string, languag
                 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();
@@ -263,10 +316,88 @@ async function createEditor(editor: HTMLElement, data: { value?: string, languag
         setValue,
         focus,
         setLanguage,
-        destroy
+        destroy,
+        onDidChangeModelContent,
     };
 }
 
+function wrapCode(code: string, wrapAt = 71) {
+    return code.split("\n").map(line => {
+        if (line.length <= wrapAt) return line;
+
+        const indent = line.match(/^(\s*)/)?.at(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: string, wrapAt = 71) {
+    const wrapMap: any = []; // 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*)/)?.at(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: string) {
     return str
         .replace(/&/g, "&amp;")
@@ -274,12 +405,11 @@ function escapeHtml(str: string) {
         .replace(/>/g, "&gt;");
 }
 
-async function _render(code: string, language: string, editor: HTMLElement) {
+async function _render(code: string, language: any, editor: HTMLElement) {
     // 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);
@@ -298,12 +428,18 @@ async function _render(code: string, language: string, editor: HTMLElement) {
     
     // Split into three sections
     const beforeLines = lines.slice(0, visibleStart);
-    const visibleLines = lines.slice(visibleStart, visibleEnd);
+    const visibleLines: any = lines.slice(visibleStart, visibleEnd);
     const afterLines = lines.slice(visibleEnd);
     
     // Only highlight visible portion
-    
-    const highlightedVisible = hljs.highlight(visibleLines.join("\n"), { language }).value;
+    let wrappedCode;
+    if (visibleLines.length === 0) {
+        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;