@pfmcodes/caret 0.3.1 → 0.3.2

package/README.md

@@ -191,7 +191,7 @@ pnpm add @pfmcodes/caret
   <div id="result"></div>
 
   <script type="module">
-    import Caret from '.node_modules/@pfmcodes/caret/index.js';
+    import Caret from './index.js';
 
     window.language = 'javascript';
     window.currentTheme = 'tokyo-night-dark';
@@ -239,13 +239,12 @@ for i in range(25):
     const editorInstance = await Caret.createEditor(
       document.getElementById('editor'),
       jsCode,
-      'demo-editor',
       {
         dark: true,
         language: 'javascript',
+        id: `${Math.floor(Math.random() * 1000000000)}`,
         hlTheme: 'tokyo-night-dark',
         focusColor: '#7116d8',
-        id: Math.floor(Math.random() * 1000000000),
         theme: {
           dark: {
             'background.editor': '#1a1a2e',
@@ -264,7 +263,7 @@ for i in range(25):
         }
       }
     );
-    
+
     window.editorInstance = editorInstance;
 
     window.changeLanguage = async (lang) => {
@@ -358,8 +357,8 @@ import Caret from './node_modules/@pfmcodes/caret/index.js';
 const editor = await Caret.createEditor(
   document.getElementById('editor'),  // parent element
   'const x = 42;',                    // initial content
-  'my-editor',                        // unique id
   {
+    id: 'my-editor',                        // unique id
     dark: true,
     language: 'javascript',
     hlTheme: 'tokyo-night-dark'
@@ -375,10 +374,10 @@ import Caret from './node_modules/@pfmcodes/caret/index.js';
 const editor = await Caret.createEditor(
   document.getElementById('editor'),
   code,
-  'readonly-editor',
   {
     dark: true,
     language: 'python',
+    id: 'readonly-editor',
     hlTheme: 'github-dark',
     lock: true
   }
@@ -391,8 +390,8 @@ const editor = await Caret.createEditor(
 import Caret from './node_modules/@pfmcodes/caret/index.js';
 
 // each editor needs a unique id
-const editor1 = await Caret.createEditor(el1, code1, 'editor-1', options);
-const editor2 = await Caret.createEditor(el2, code2, 'editor-2', options);
+const editor1 = await Caret.createEditor(el1, code1, {id: 'editor-1', ...options});
+const editor2 = await Caret.createEditor(el2, code2, { id: 'editor-2', ...options });
 ```
 
 ### Custom Theme
@@ -465,17 +464,18 @@ Creates a new editor instance.
 
 **Options:**
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `dark` | `boolean` | `false` | Dark mode |
-| `shadow` | `boolean` | `true` | Box shadow |
-| `focusColor` | `string` | `#7c3aed` | Border color on focus |
-| `shadowColor` | `string` | `#000` | Shadow color |
-| `lock` | `boolean` | `false` | Read-only mode |
-| `language` | `string` | `plaintext` | Highlight.js language |
-| `hlTheme` | `string` | `hybrid` | Highlight.js theme |
-| `font` | `object` | — | Custom font `{ url, name }` |
-| `theme` | `object` | — | Custom colors (see above) |
+| Option | Type | Default | Required | Description |
+|--------|------|---------|----------|-------------|
+| `dark` | `boolean` | `false` | ✕ | Dark mode |
+| `id` | `string` | - | ✓ | required to distinguish between multiple instances |
+| `shadow` | `boolean` | `true` | ✕ | Box shadow |
+| `focusColor` | `string` | `#7c3aed` | ✕ | Border color on focus |
+| `shadowColor` | `string` | `#000` | ✕ | Shadow color |
+| `lock` | `boolean` | `false` | ✕ | Read-only mode |
+| `language` | `string` | `plaintext` | ✓ | Highlight.js language |
+| `hlTheme` | `string` | `hybrid` | ✕ | Highlight.js theme |
+| `font` | `object` | — | ✕ | Custom font `{ url, name }` |
+| `theme` | `object` | — | ✕ | Custom colors ([see more.](#default-colors)) |
 
 **Returns:** `Promise<EditorInstance>`
 
@@ -520,6 +520,23 @@ await editor.setLanguage('python');
 editor.delete();
 ```
 
+### Default Colors
+from `option`:
+| Property | Default |
+|----------|---------|
+| focusColor| #7c3aed |
+| shadowColor | #000000 |
+---
+
+from `theme`:
+| Property | Dark | Light |
+|----------|------|-------|
+| `background.editor` | #101010 | #d4d4d4 |
+| `editor.caret` | #ffffff | #111111 |
+| `color.editor` | #ffffff | #000000 |
+| `color.lineCounter` | #ffffff | #111111 |
+| `background.lineCounter` | #1e1e1e | #ffffff |
+
 ### Keyboard Shortcuts
 
 | Shortcut | Action |

package/components/textEditor.js

@@ -2,8 +2,8 @@
  * createTextEditor {
  *    @param {HTMLElement} parent - The element to append the editor to
  *    @param {string} content - Initial content of the editor, default is ""
- *    @param {string|number} id - Unique ID for this instance, used for undo/redo stack namespacing
  *    @param {Object} options - Optional configuration {
+ *            @param {string|number} id - Unique ID for this instance, used for undo/redo stack namespacing
  *            @param {boolean} dark - dark theme enabled, false by default
  *            @param {boolean} shadow - box shadow enabled, true by default
  *            @param {string} focusColor - border color on focus, default #7c3aed
@@ -49,9 +49,9 @@
  *
  *    @notes
  *    - Requires Chrome/Chromium — uses EditContext API (not supported in Firefox/Safari yet)
- *    - Undo/redo stacks accessible globally via window.caret[`undoStack.${id}`]
+ *    - Undo/redo stacks accessible globally via window.caret.undoStack[id]
  *    - \u200B (zero-width space) used internally for newline rendering, stripped from getValue()
- *    - Keyboard shortcuts: Ctrl+Z undo, Ctrl+Y / Ctrl+Shift+Z redo, Tab indent, Shift+Tab unindent
+ *    - Keyboard shortcuts: Ctrl+Z: undo, Ctrl+Y / Ctrl+Shift+Z: redo, Tab: indent, Shift+Tab: unindent, Arrow keys(←→↓↑): navigate around
  * }
 */
 
@@ -64,7 +64,8 @@ import languages from "./languages.js";
 
 languages.init();
 
-async function createTextEditor(parent, content = "", id, options = {}) {
+async function createTextEditor(parent, content = "", options = {}) {
+    const id = options.id;
     let onCursorMoveFn = null;
     async function isChromiumEngine() {
         if (navigator.userAgentData) {
@@ -103,21 +104,36 @@ 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`);
+        console.error(`parameter 'id' from options must not be a '${typeof id}', it must be a number or string, current value of 'id': ${options.id}`);
         return;
     }
     if (!parent || !(parent instanceof HTMLElement)) {
-        console.error(`'parent' parameter of function 'createTextEditor' must be an HTMLElement`);
+        console.error(`'parent' parameter of function 'createTextEditor' must be an HTMLElement, must not be a ${typeof parent}, current value of 'parent': ${options.parent}`);
         return;
     }
     if (!("EditContext" in window)) {
         console.error("EditContext API is not supported in ", await getBrowserName());
         return;
     }
+    if (options.language === undefined || options.language === null || typeof options.language !== "string") {
+        console.error(`parameter 'language' from options must be a string, not be a '${typeof options.language}', current value of 'langauge': ${options.language}`);
+        return;
+    }
+
+    if (!window.caret) window.caret = {
+        instances: {},
+        undoStack: {},
+        redoStack: {}
+    };
+
+    if (window.caret.instances[id]) {
+        console.error(`Caret: instance with id "${id}" already exists`);
+        return;
+    }
 
-    if (!window.caret) window.caret = {};
-    window.caret[`undoStack.${id}`] = [{ content, cursor: 0 }];
-    window.caret[`redoStack.${id}`] = [];
+    window.caret.instances[id] = true;
+    window.caret.undoStack[id] = [{ content, cursor: 0 }];
+    window.caret.redoStack[id] = [];
 
     const lock = options.lock || false;
     const focusColor = options.focusColor || '#7c3aed';
@@ -127,15 +143,44 @@ async function createTextEditor(parent, content = "", id, options = {}) {
     const theme = options.theme;
     const font = options.font || {};
     let language = options.language || "plaintext";
+    let cachedThemes = null;
+    let cachedBase16 = null;
+    let onThemeChangeFn = null;
+
+    const loadThemes = async () => {
+        if (!cachedThemes || !cachedBase16) {
+            const [themes, base16] = await Promise.all([
+                fetch('https://raw.githubusercontent.com/PFMCODES/Website./main/apps/caret/themes.json').then(res => res.json()),
+                fetch('https://raw.githubusercontent.com/PFMCODES/Website./main/apps/caret/themes-base16.json').then(res => res.json())
+            ]);
+
+            cachedThemes = themes;
+            cachedBase16 = base16;
+        }
+    };
+
+    const isValidTheme = async (theme) => {
+        if (!theme) return false;
+
+        await loadThemes();
+
+        const valid = cachedThemes.includes(theme) || cachedBase16.includes(theme);
+
+        if (!valid) {
+            console.warn(`${theme} is an invalid Highlight.js theme, defaulting to hybrid`);
+        }
+
+        return valid;
+    };
 
     const themeLink = document.createElement("link");
     themeLink.rel = "stylesheet";
     themeLink.id = `caret-theme-${id}`;
-    themeLink.href = options.hlTheme
+    const validTheme = await isValidTheme(options.hlTheme);
+    themeLink.href = validTheme
         ? `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);
-
     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);
@@ -202,7 +247,7 @@ async function createTextEditor(parent, content = "", id, options = {}) {
     if (options.theme) {
         caretColor = dark ? options.theme.dark["editor.caret"] : options.theme.light["editor.caret"];
     } else {
-        caretColor = "#fff";
+        caretColor = dark ? "#fff" : "#111";
     }
 
     parent.style.display = "flex";
@@ -234,16 +279,16 @@ async function createTextEditor(parent, content = "", id, options = {}) {
     }
 
     function saveState() {
-        const stack = window.caret[`undoStack.${id}`];
+        const stack = window.caret.undoStack[id];
         if (text !== stack[stack.length - 1]?.content) {
             stack.push({ content: text, cursor: selStart });
-            window.caret[`redoStack.${id}`] = [];
+            window.caret.redoStack[id] = [];
         }
     }
 
     function undo() {
-        const stack = window.caret[`undoStack.${id}`];
-        const redoStack = window.caret[`redoStack.${id}`];
+        const stack = window.caret.undoStack[id];
+        const redoStack = window.caret.redoStack[id];
         if (stack.length <= 1) return;
         const current = stack.pop();
         redoStack.push(current);
@@ -257,8 +302,8 @@ async function createTextEditor(parent, content = "", id, options = {}) {
     }
 
     function redo() {
-        const stack = window.caret[`undoStack.${id}`];
-        const redoStack = window.caret[`redoStack.${id}`];
+        const stack = window.caret.undoStack[id];
+        const redoStack = window.caret.redoStack[id];
         if (redoStack.length === 0) return;
         const next = redoStack.pop();
         stack.push(next);
@@ -271,6 +316,7 @@ async function createTextEditor(parent, content = "", id, options = {}) {
 
     editContext.addEventListener("textupdate", (e) => {
         if (lock) return;
+        console.log("updateRange:", e.updateRangeStart, e.updateRangeEnd, "text:", e.text);
         text = text.slice(0, e.updateRangeStart) + e.text + text.slice(e.updateRangeEnd);
         text = text.replaceAll("\u200B", "");
         selStart = selEnd = e.selectionStart;
@@ -363,7 +409,22 @@ async function createTextEditor(parent, content = "", id, options = {}) {
             render();
             return;
         }
-        if (e.key === "ArrowLeft") {
+        if (e.key === "ArrowLeft" && e.shiftKey) {
+            e.preventDefault();
+            selStart = Math.max(0, selStart - 1);
+            editContext.updateSelection(selStart, selEnd);
+            caret.update(selStart);
+            return;
+        }
+
+        if (e.key === "ArrowRight" && e.shiftKey) {
+            e.preventDefault();
+            selEnd = Math.min(text.length, selEnd + 1);
+            editContext.updateSelection(selStart, selEnd);
+            caret.update(selEnd);
+            return;
+        }
+        if (e.key === "ArrowLeft" && !e.shiftKey) {
             e.preventDefault();
             selStart = selEnd = Math.max(0, selStart - 1);
             editContext.updateSelection(selStart, selEnd);
@@ -372,7 +433,7 @@ async function createTextEditor(parent, content = "", id, options = {}) {
             return;
         }
 
-        if (e.key === "ArrowRight") {
+        if (e.key === "ArrowRight" && !e.shiftKey) {
             e.preventDefault();
             selStart = selEnd = Math.min(text.length, selStart + 1);
             editContext.updateSelection(selStart, selEnd);
@@ -381,7 +442,38 @@ async function createTextEditor(parent, content = "", id, options = {}) {
             return;
         }
 
-        if (e.key === "ArrowUp") {
+        if (e.key === "ArrowUp" && e.shiftKey) {
+            e.preventDefault();
+            const lineStart = text.lastIndexOf("\n", selStart - 1) + 1;
+            const prevLineEnd = lineStart - 1;
+            const prevLineStart = text.lastIndexOf("\n", prevLineEnd - 1) + 1;
+            const col = selStart - lineStart;
+            const prevLineLength = prevLineEnd - prevLineStart;
+            selStart = prevLineStart + Math.min(col, prevLineLength);
+            // selEnd stays — extends selection upward
+            editContext.updateSelection(selStart, selEnd);
+            caret.update(selStart);
+            if (onCursorMoveFn) onCursorMoveFn(selStart);
+            return;
+        }
+
+        if (e.key === "ArrowDown" && e.shiftKey) {
+            e.preventDefault();
+            const lineStart = text.lastIndexOf("\n", selEnd - 1) + 1;
+            const nextLineStart = text.indexOf("\n", selEnd) + 1;
+            const nextLineEnd = text.indexOf("\n", nextLineStart);
+            const finalNextLineEnd = nextLineEnd === -1 ? text.length : nextLineEnd;
+            const col = selEnd - lineStart;
+            const nextLineLength = finalNextLineEnd - nextLineStart;
+            selEnd = nextLineStart + Math.min(col, nextLineLength);
+            // selStart stays — extends selection downward
+            editContext.updateSelection(selStart, selEnd);
+            caret.update(selEnd);
+            if (onCursorMoveFn) onCursorMoveFn(selEnd);
+            return;
+        }
+
+        if (e.key === "ArrowUp" && !e.shiftKey) {
             e.preventDefault();
             const lineStart = text.lastIndexOf("\n", selStart - 1) + 1;
             const prevLineEnd = lineStart - 1;
@@ -395,7 +487,7 @@ async function createTextEditor(parent, content = "", id, options = {}) {
             return;
         }
 
-        if (e.key === "ArrowDown") {
+        if (e.key === "ArrowDown" && !e.shiftKey) {
             e.preventDefault();
             const lineStart = text.lastIndexOf("\n", selStart - 1) + 1;
             const nextLineStart = text.indexOf("\n", selStart) + 1;
@@ -438,6 +530,60 @@ async function createTextEditor(parent, content = "", id, options = {}) {
         caret.hide();
     });
 
+    let isMouseDown = false;
+    let dragStart = 0;
+
+    main.addEventListener("mousedown", (e) => {
+        isMouseDown = true;
+        main.focus();
+        const range = document.caretRangeFromPoint(e.clientX, e.clientY);
+        if (!range) return;
+
+        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;
+        }
+
+        dragStart = offset;
+        selStart = selEnd = offset;
+        editContext.updateSelection(selStart, selEnd);
+        caret.update(selStart);
+    });
+
+    main.addEventListener("mousemove", (e) => {
+        if (!isMouseDown) return;
+        const range = document.caretRangeFromPoint(e.clientX, e.clientY);
+        if (!range) return;
+
+        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 = Math.min(dragStart, offset);
+        selEnd = Math.max(dragStart, offset);
+        editContext.updateSelection(selStart, selEnd);
+        caret.update(selStart);
+    });
+
+    document.addEventListener("mouseup", () => {
+        isMouseDown = false;
+    });
+
     main.addEventListener("click", (e) => {
         main.focus();
         const range = document.caretRangeFromPoint(e.clientX, e.clientY);
@@ -482,6 +628,14 @@ async function createTextEditor(parent, content = "", id, options = {}) {
         id: options.id,
         onChange: (fn) => { onChangeFn = fn; },
         isFocused: () => isFocused,
+        setTheme: async (name) => {
+            const validTheme = await isValidTheme(name);
+            themeLink.href = validTheme
+                ? `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${name}.css`
+                : `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
+                if (onThemeChangeFn) onThemeChangeFn(validTheme ? name : "hybrid");
+        },
+        onThemeChange: (cb) => { onThemeChangeFn = cb; },
         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`);
@@ -490,12 +644,16 @@ async function createTextEditor(parent, content = "", id, options = {}) {
             language = lang;
             render();
         },
+        onCursorMove: (cb) => { onCursorMoveFn = cb },
         delete: () => {
             parent.removeChild(main);
             parent.removeChild(lineCounter);
             caret.destroy();
             document.head.removeChild(themeLink);
             parent.style = "";
+            delete window.caret.instances[id];
+            delete window.caret.undoStack[id];
+            delete window.caret.redoStack[id];
         }
     };
 }

package/package.json

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