@pfmcodes/caret 0.2.8 → 0.3.0

package/components/caret.js

@@ -0,0 +1,95 @@
+/**
+ * caret.js - Custom caret for EditContext based editors
+ */
+
+/**
+ * createCaret {
+ *   @param {HTMLElement} parent - the editor container
+ *   @param {HTMLElement} main - the editor div
+ *   @param {Object} options {
+ *     @param {string} caretColor - caret color
+ *     @param {number} caretWidth - caret width in px, default 2
+ *   }
+ *   @returns {{ update: (selStart, main) => void, show: () => void, hide: () => void, destroy: () => void }}
+ * }
+ */
+function createCaret(parent, main, options = {}) {
+    const color = options.caretColor || options.focusColor || "#fff";
+    const width = options.caretWidth || 2;
+
+    const caretEl = document.createElement("div");
+    caretEl.className = "Caret-caret-" + options.id;
+    caretEl.style.position = "absolute";
+    caretEl.style.width = `${width}px`;
+    caretEl.style.background = color;
+    caretEl.style.pointerEvents = "none";
+    caretEl.style.zIndex = "10";
+    caretEl.style.opacity = "0";
+    caretEl.style.borderRadius = "1px";
+    caretEl.style.animation = "caret-blink 1s step-end infinite";
+
+    if (!document.getElementById("caret-blink-style")) {
+        const style = document.createElement("style");
+        style.id = "caret-blink-style";
+        style.textContent = `@keyframes caret-blink { 0%,100%{opacity:1} 50%{opacity:0} }`;
+        document.head.appendChild(style);
+    }
+
+    parent.appendChild(caretEl);
+
+    function update(selStart) {
+        // walk text nodes to find exact position
+        let remaining = selStart;
+        let targetNode = null;
+        let targetOffset = 0;
+
+        const walker = document.createTreeWalker(main, NodeFilter.SHOW_TEXT);
+        let node;
+        while ((node = walker.nextNode())) {
+            if (remaining <= node.textContent.length) {
+                targetNode = node;
+                targetOffset = remaining;
+                break;
+            }
+            remaining -= node.textContent.length;
+        }
+
+        if (!targetNode) {
+            caretEl.style.left = "5px";
+            caretEl.style.top = "5px";
+            caretEl.style.height = "21px";
+            return;
+        }
+
+        const range = document.createRange();
+        range.setStart(targetNode, targetOffset);
+        range.collapse(true);
+
+        const rect = range.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+
+        if (rect.width === 0 && rect.height === 0) return;
+
+        caretEl.style.left = rect.left - parentRect.left + parent.scrollLeft + "px";
+        caretEl.style.top = rect.top - parentRect.top + parent.scrollTop + "px";
+        caretEl.style.height = (rect.height || 21) + "px";
+    }
+
+    function show() {
+        caretEl.style.opacity = "1";
+        caretEl.style.animation = "caret-blink 1s step-end infinite";
+    }
+
+    function hide() {
+        caretEl.style.opacity = "0";
+        caretEl.style.animation = "none";
+    }
+
+    function destroy() {
+        caretEl.remove();
+    }
+
+    return { update, show, hide, destroy };
+}
+
+export { createCaret };

package/components/font.js

@@ -0,0 +1,16 @@
+/**
+ * loadFont {
+ *     @param {string} name - name of the font
+ *     @param {string/url} url - url to external font
+ *     @returns {void}
+ * }
+*/
+
+// load the font dynamically
+async function loadFont(name, url) {
+    const font = new FontFace(name, `url("${url}")`);
+    await font.load();
+    document.fonts.add(font);
+}
+
+export { loadFont }

package/components/lineCounter.js

@@ -0,0 +1,91 @@
+/**
+ * createLineCounter {
+ *     @param {HTMLElement} parent - the parent element the line counter goes inside of
+ *     @param {number} lines - number of lines in the code
+ *     @param {string/number} id - id for sepration and distinguishtion of multiple instances
+ *     @param {object} options {
+ *         @param {string/color} focusColor - border color of the editor when its in use
+ *         @param {string/color} background - background color of the line counter
+ *         @param {boolean} dark - if the user has dark theme enabled or not
+ *         @param {object} theme {
+ *             @param {object} dark {
+ *                  @param {string/color} background - background color for the dark theme
+ *             }
+ *             @param {object} light {
+ *                  @param {string/color} background - background color for the light theme
+ *             }
+ *         }
+ *         @param {object} font {
+ *             @param {string} url -  external font url or file path
+ *             @param {string} name - font name, required for both internal and external custom font application
+ *         }
+ *     }
+ * }
+ */
+
+import { loadFont } from "./font.js";
+
+async function createLineCounter(parent, lines, id, options) {
+    let fontUrl;
+    let fontName;
+    const font = options.font || {};
+    if (!font.url && !font.name) {
+        fontName = "monospace";
+        parent.style.fontFamily = fontName;
+    }
+    else if (!font.url && font.name) {
+        parent.style.fontFamily = font.name;
+    }
+    else {
+        fontUrl = font.url;
+        fontName = font.name;
+        loadFont(fontName, fontUrl);
+        parent.style.fontFamily = fontName;
+    }
+    const lineCounter = document.createElement("div");
+    lineCounter.className = "lineCounter";
+    lineCounter.id = `lineCounter-${id}`;
+    const dark = options.dark || false;
+    const theme =  options.theme || {};
+    lineCounter.style.height = "auto";
+    lineCounter.style.fontSize = "14px";
+    lineCounter.style.lineHeight = "1.5";
+    lineCounter.style.minWidth = "25px";
+    lineCounter.style.top = "0px";
+    lineCounter.style.borderRight = options.focusColor || "#fff";
+    if (Object.keys(theme).length === 0) {
+        lineCounter.style.color = dark ? "#fff" : "#111";
+        lineCounter.style.background = dark ? "#1e1e1e" : "#fff";
+        parent.style.background = dark ? "#1e1e1e" : "#fff";
+    } else {
+        lineCounter.style.color = dark ? theme.dark["color.lineCounter"] : theme.light["color.lineCounter"];
+        lineCounter.style.background = dark ? theme.dark["background.lineCounter"] : theme.light["background.lineCounter"];
+        parent.style.background = dark ? theme.dark["background.lineCounter"] : theme.light["background.lineCounter"];
+    }
+    for (let i = 0; i < lines; i++) {
+        const lineNumber = document.createElement("div");
+        lineNumber.className = "line-number";
+        lineNumber.id = `line-number-${i}-${id}`;
+        lineNumber.innerText = i + 1;
+        lineCounter.appendChild(lineNumber);
+    }
+
+    parent.appendChild(lineCounter);
+    return lineCounter; // 👈 return so you can update it later
+}
+
+function updateLineCounter(lineCounter, lines) {
+    lineCounter.innerHTML = "";
+    for (let i = 0; i < lines; i++) {
+        const lineNumber = document.createElement("div");
+        lineNumber.className = "line-number";
+        lineNumber.innerText = i + 1;
+        lineCounter.appendChild(lineNumber);
+        lineNumber.style.height = "calc(14px * 1.5)"; // font-size * line-height
+        lineNumber.style.display = "flex";
+        lineNumber.style.alignItems = "center";
+        lineNumber.style.margin = "auto";
+    }
+}
+
+export { createLineCounter, updateLineCounter };

package/components/textEditor.js

@@ -0,0 +1,411 @@
+/**
+ * createTextEditor {
+ *    @param {string} content - Initial content of the editor
+ *    @param {HTMLElement} parent - The element to append the editor to
+ *    @param {Object} options - Optional configuration {
+ *            @param {boolean} dark - dark theme is enabled or not, false by default
+ *            @param {boolean} shadow - should boxShadow be enabled, true by default
+ *            @param {string} focusColor - color of focus border, by default it is purple(#7c3aed)
+ *            @param {string} shadowColor - only needed if the box shadow is enabled, default is black
+ *            @param {boolean} lock - if enabled, makes the editor non editable, false by default
+ *            @param {string} language - language for syntax highlighting, default is plaintext
+ *            @param {string} hlTheme - highlight.js theme, default is hybrid
+ *            @param {JSON} font {
+ *                @param {string} url - optional, only needed if applying custom font
+ *                @param {string} name - required if you want custom font with or without external font
+ *            }
+ *            @param {string/number} id - unique id for the editor for multiple instances
+ *            @param {JSON} theme {
+ *                @param {object} dark {
+ *                    @param {string/color} background - background color for the dark theme
+ *                    @param {string/color} color.editor - text color for dark theme
+ *                    @param {string/color} editor.caret - caret color for dark theme
+ *                }
+ *                @param {object} light {
+ *                    @param {string/color} background - background color for the light theme
+ *                    @param {string/color} color.editor - text color for light theme
+ *                    @param {string/color} editor.caret - caret color for light theme
+ *                }
+ *            }
+ *    }
+ *    @returns {object} {
+ *                @return {string} getValue => () - returns the current value of editor
+ *                @return {void} setValue => (@param {string} val) - sets the value of editor
+ *                @return {void} onChange => (@param {function} fn) - fires when value changes
+ *                @return {boolean} isFocused - tells if the editor is focused
+ *                @return {void} setLanguage => (@param {string} lang) - changes highlight language
+ *    }
+ * }
+*/
+import { createLineCounter, updateLineCounter } from "./lineCounter.js";
+import { loadFont } from "./font.js";
+import { createCaret } from "./caret.js";
+// @ts-ignore
+import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js";
+import languages from "./languages.js";
+
+languages.init();
+
+async function createTextEditor(parent, content = "", id, options = {}) {
+    if (id === undefined || id === null || (typeof id !== "string" && typeof id !== "number")) {
+        console.error(`parameter 'id' of function createTextEditor must not be '${typeof id}', it must be a number or string`);
+        return;
+    }
+    if (!parent || !(parent instanceof HTMLElement)) {
+        console.error(`'parent' parameter of function 'createTextEditor' must be an HTMLElement`);
+        return;
+    }
+    if (!("EditContext" in window)) {
+        console.error("EditContext API is not supported in this browser");
+        return;
+    }
+
+    // undo/redo stack
+    if (!window.caret) window.caret = {};
+    window.caret[`undoStack.${id}`] = [{ content, cursor: 0 }];
+    window.caret[`redoStack.${id}`] = [];
+
+    const lock = options.lock || false;
+    const focusColor = options.focusColor || '#7c3aed';
+    const dark = options.dark || false;
+    const boxShadow = options.shadow ?? true;
+    const shadowColor = options.shadowColor || "#000";
+    const theme = options.theme;
+    const font = options.font || {};
+    let language = options.language || "plaintext";
+
+    // load hljs theme
+    const themeLink = document.createElement("link");
+    themeLink.rel = "stylesheet";
+    themeLink.id = `caret-theme-${id}`;
+    themeLink.href = options.hlTheme
+        ? `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${options.hlTheme}.css`
+        : `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
+    document.head.appendChild(themeLink);
+
+    // load language if not registered
+    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);
+    }
+
+    let fontName;
+    if (!font.url && !font.name) {
+        fontName = "monospace";
+        parent.style.fontFamily = fontName;
+    } else if (!font.url && font.name) {
+        parent.style.fontFamily = font.name;
+    } else {
+        fontName = font.name;
+        loadFont(fontName, font.url);
+        parent.style.fontFamily = fontName;
+    }
+
+    // text model
+    let text = content;
+    let selStart = content.length;
+    let selEnd = content.length;
+    let isFocused = false;
+    let onChangeFn = null;
+
+    // EditContext
+    const editContext = new EditContext({
+        text,
+        selectionStart: selStart,
+        selectionEnd: selEnd
+    });
+
+    // main div
+    const main = document.createElement("div");
+    main.editContext = editContext;
+    main.tabIndex = 0;
+    main.style.whiteSpace = "pre";
+    main.style.height = "100%";
+    main.style.width = "100%";
+    main.style.minWidth = "50px";
+    main.style.minHeight = "25px";
+    main.style.fontSize = "14px";
+    main.style.lineHeight = "1.5";
+    main.style.outline = "none";
+    main.style.boxSizing = "border-box";
+    main.style.borderTopRightRadius = "5px";
+    main.style.borderBottomRightRadius = "5px";
+    main.style.transition = "all 0.2s ease-in-out";
+    main.style.display = "block";
+    main.style.paddingTop = "5px";
+    main.style.overflowX = "auto";
+    main.style.scrollbarWidth = "none";
+    main.style.cursor = "text";
+    main.style.userSelect = "none";
+    main.style.caretColor = "transparent";
+
+    if (boxShadow) main.style.boxShadow = `1px 1px 1px 1px ${shadowColor}`;
+
+    if (!theme) {
+        main.style.background = dark ? "#101010" : "#d4d4d4";
+        main.style.color = dark ? "#fff" : "#000";
+    } else {
+        main.style.background = dark ? theme.dark["background.editor"] : theme.light["background.editor"];
+        main.style.color = dark ? theme.dark["color.editor"] : theme.light["color.editor"];
+    }
+
+    // caret color
+    let caretColor;
+    if (options.theme) {
+        caretColor = dark ? options.theme.dark["editor.caret"] : options.theme.light["editor.caret"];
+    } else {
+        caretColor = "#fff";
+    }
+
+    // parent styles
+    parent.style.display = "flex";
+    parent.style.alignItems = "flex-start";
+    parent.style.border = "2px solid #0000";
+    parent.style.padding = "5px";
+    parent.style.position = "relative";
+
+    // line counter
+    let lineCounter;
+    lineCounter = await createLineCounter(parent, content.split("\n").length, id, options);
+
+    parent.appendChild(main);
+
+    // caret
+    const caret = createCaret(parent, main, { ...options, caretColor });
+
+    // --- render ---
+    function render() {
+        const highlighted = unescapeHTML(hljs.highlight(unescapeHTML(text), { language }).value);
+        main.innerHTML = highlighted;
+        updateLineCounter(lineCounter, text.trimEnd().split("\n").length);
+        caret.update(selStart);
+        if (onChangeFn) onChangeFn(text);
+    }
+
+    // --- undo/redo ---
+    function saveState() {
+        const stack = window.caret[`undoStack.${id}`];
+        if (text !== stack[stack.length - 1]?.content) {
+            stack.push({ content: text, cursor: selStart });
+            window.caret[`redoStack.${id}`] = [];
+        }
+    }
+
+    function undo() {
+        const stack = window.caret[`undoStack.${id}`];
+        const redoStack = window.caret[`redoStack.${id}`];
+        if (stack.length <= 1) return;
+        const current = stack.pop();
+        redoStack.push(current);
+        const prev = stack[stack.length - 1];
+        text = prev.content;
+        const diff = current.content.length - prev.content.length;
+        selStart = selEnd = Math.max(0, current.cursor - diff);
+        editContext.updateText(0, editContext.text.length, text);
+        editContext.updateSelection(selStart, selEnd);
+        render();
+    }
+
+    function redo() {
+        const stack = window.caret[`undoStack.${id}`];
+        const redoStack = window.caret[`redoStack.${id}`];
+        if (redoStack.length === 0) return;
+        const next = redoStack.pop();
+        stack.push(next);
+        text = next.content;
+        selStart = selEnd = next.cursor;
+        editContext.updateText(0, editContext.text.length, text);
+        editContext.updateSelection(selStart, selEnd);
+        render();
+    }
+
+    // --- EditContext events ---
+    editContext.addEventListener("textupdate", (e) => {
+        if (lock) return;
+        text = text.slice(0, e.updateRangeStart) + e.text + text.slice(e.updateRangeEnd);
+        selStart = selEnd = e.selectionStart;
+        editContext.updateText(0, editContext.text.length, text);
+        saveState();
+        render();
+    });
+
+    editContext.addEventListener("selectionchange", (e) => {
+        selStart = e.selectionStart;
+        selEnd = e.selectionEnd;
+        caret.update(selStart);
+    });
+
+    editContext.addEventListener("textformatupdate", () => {
+        // IME formatting — ignore for now
+    });
+
+    // --- keyboard events ---
+    main.addEventListener("keydown", (e) => {
+        if (lock) return;
+
+        if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === "z") {
+            e.preventDefault();
+            undo();
+            return;
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === "y") {
+            e.preventDefault();
+            redo();
+            return;
+        }
+        if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "Z") {
+            e.preventDefault();
+            redo();
+            return;
+        }
+
+        // Tab
+        if (e.key === "Tab" && !e.shiftKey) {
+            e.preventDefault();
+            const indent = "    ";
+            if (selStart !== selEnd) {
+                const before = text.slice(0, selStart);
+                const selected = text.slice(selStart, selEnd);
+                const after = text.slice(selEnd);
+                const indented = selected.split("\n").map(l => indent + l).join("\n");
+                text = before + indented + after;
+                selEnd = selStart + indented.length;
+            } else {
+                text = text.slice(0, selStart) + indent + text.slice(selStart);
+                selStart = selEnd = selStart + indent.length;
+            }
+            editContext.updateText(0, editContext.text.length, text);
+            editContext.updateSelection(selStart, selEnd);
+            saveState();
+            render();
+            return;
+        }
+
+        // Shift+Tab
+        if (e.shiftKey && e.key === "Tab") {
+            e.preventDefault();
+            if (selStart !== selEnd) {
+                const before = text.slice(0, selStart);
+                const selected = text.slice(selStart, selEnd);
+                const after = text.slice(selEnd);
+                const unindented = selected.split("\n").map(l =>
+                    l.startsWith("    ") ? l.slice(4) :
+                    l.startsWith("\t") ? l.slice(1) : l
+                ).join("\n");
+                text = before + unindented + after;
+                selEnd = selStart + unindented.length;
+            } else {
+                const lineStart = text.lastIndexOf("\n", selStart - 1) + 1;
+                const linePrefix = text.slice(lineStart, lineStart + 4);
+                if (linePrefix === "    ") {
+                    text = text.slice(0, lineStart) + text.slice(lineStart + 4);
+                    selStart = selEnd = Math.max(lineStart, selStart - 4);
+                }
+            }
+            editContext.updateText(0, editContext.text.length, text);
+            editContext.updateSelection(selStart, selEnd);
+            saveState();
+            render();
+            return;
+        }
+    });
+
+    // paste
+    main.addEventListener("paste", (e) => {
+        if (lock) return;
+        e.preventDefault();
+        const pasteText = e.clipboardData.getData("text/plain");
+        text = text.slice(0, selStart) + pasteText + text.slice(selEnd);
+        selStart = selEnd = selStart + pasteText.length;
+        editContext.updateText(0, editContext.text.length, text);
+        editContext.updateSelection(selStart, selEnd);
+        saveState();
+        render();
+    });
+
+    // focus/blur
+    main.addEventListener("focus", () => {
+        isFocused = true;
+        parent.style.border = `2px solid ${focusColor}`;
+        parent.style.boxShadow = "none";
+        caret.show();
+        caret.update(selStart);
+    });
+
+    main.addEventListener("blur", () => {
+        isFocused = false;
+        parent.style.border = "2px solid #0000";
+        if (boxShadow) parent.style.boxShadow = `1px 1px 1px 1px ${shadowColor}`;
+        caret.hide();
+    });
+
+    // click to position cursor
+    main.addEventListener("click", (e) => {
+        main.focus();
+        const range = document.caretRangeFromPoint(e.clientX, e.clientY);
+        if (!range) return;
+
+        // walk text nodes to find offset
+        let offset = 0;
+        let remaining = 0;
+        const walker = document.createTreeWalker(main, NodeFilter.SHOW_TEXT);
+        let node;
+        while ((node = walker.nextNode())) {
+            if (node === range.startContainer) {
+                offset = remaining + range.startOffset;
+                break;
+            }
+            remaining += node.textContent.length;
+        }
+
+        selStart = selEnd = offset;
+        editContext.updateSelection(selStart, selEnd);
+        caret.update(selStart);
+    });
+
+    // initial render
+    render();
+
+    return {
+        getValue: () => text,
+        setValue: (val) => {
+            text = val;
+            selStart = selEnd = val.length;
+            editContext.updateText(0, editContext.text.length, text);
+            editContext.updateSelection(selStart, selEnd);
+            render();
+        },
+        id: options.id,
+        onChange: (fn) => { onChangeFn = fn; },
+        isFocused: () => isFocused,
+        setLanguage: async (lang) => {
+            if (!languages.registeredLanguages.includes(lang)) {
+                const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${lang}.js`);
+                languages.registerLanguage(lang, mod.default);
+            }
+            language = lang;
+            render();
+        },
+        delete: () => {
+            parent.removeChild(main);
+            parent.removeChild(lineCounter);
+            caret.destroy();
+            document.head.removeChild(themeLink);
+            parent.style = "";
+        }
+    };
+}
+
+function unescapeHTML(str) {
+  const entities = {
+    '&amp;': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+    '&#039;': "'"
+  };
+  return str.replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#039;/g, tag => entities[tag] || tag);
+}
+
+export { createTextEditor }

package/index.js

@@ -1,22 +1,7 @@
-import editor from "./editor.js";
-import theme from "./theme.js";
-import language from "./langauges.js";
-
+import * as t from "./components/textEditor.js";
 const Caret = {
-    editor,
-    theme,
-    language
+    createEditor: t.createTextEditor,
+    createTextEditor: t.createTextEditor
 }
-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
-*/
+export default Caret;

package/package.json

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

package/utilities.js

@@ -0,0 +1,36 @@
+export function intoString(a)  {
+    return `${a}`;
+}
+
+export function isMoreThanOneChange(s1, s2) {
+  const len1 = s1.length;
+  const len2 = s2.length;
+
+  // 1. If length difference is > 1, they definitely have > 1 change
+  if (Math.abs(len1 - len2) > 1) return true;
+
+  let count = 0;
+  let i = 0, j = 0;
+
+  while (i < len1 && j < len2) {
+    if (s1[i] !== s2[j]) {
+      count++;
+      if (count > 1) return true; // Exit early
+
+      if (len1 > len2) {
+        i++; // Character deleted in s2
+      } else if (len1 < len2) {
+        j++; // Character added in s2
+      } else {
+        i++; j++; // Character replaced
+      }
+    } else {
+      i++; j++;
+    }
+  }
+
+  // Check for a trailing character difference at the end
+  if (i < len1 || j < len2) count++;
+  
+  return count > 1;
+}