@pfmcodes/caret 0.2.9 → 0.3.1

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 };