@pfmcodes/caret 0.1.1 → 0.1.2

package/README.md

@@ -1,16 +1,16 @@
 # Caret
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-lightblue.svg)](https://opensource.org/licenses/MIT)
-[![JavaScript](https://img.shields.io/badge/JavaScript-64.0%25-yellow)](https://github.com/PFMCODES/caret)
-[![CSS](https://img.shields.io/badge/CSS-18.0%25-blue)](https://github.com/PFMCODES/caret)
-[![SCSS](https://img.shields.io/badge/SCSS-18.0%25-pink)](https://github.com/PFMCODES/caret)
+[![License: MIT](https://img.shields.io/badge/License-MIT-4000ff.svg)](https://opensource.org/licenses/MIT)
+[![JavaScript](https://img.shields.io/badge/JavaScript-64.0%25-f6fa03)](https://github.com/PFMCODES/lexius-edior)
+[![CSS](https://img.shields.io/badge/CSS-18.0%25-2e7ad1)](https://github.com/pfmcodes/lexius-editor)
+[![SCSS](https://img.shields.io/badge/SCSS-18.0%25-f8899d)](https://github.com/pfmcodes/lexius-editor)
 
-A lightweight, feature-rich code editor with real-time syntax highlighting and custom caret rendering. Built with vanilla JavaScript and powered by Highlight.js, Caret delivers a smooth coding experience with professional-grade features.
+A lightweight, feature-rich code editor with real-time syntax highlighting and custom caret rendering. Built with vanilla JavaScript and powered by Highlight.js, caret delivers a smooth coding experience with professional-grade features.
 
 ## ✨ Features
 
 - 🎨 **Live Syntax Highlighting** - Real-time code highlighting powered by Highlight.js
-- 🖱️ **Custom Caret** - Smooth, pixel-perfect caret positioning and rendering
+- 🖱️ **Custom Caret** - Smooth, pixel-perfect Caret positioning and rendering
 - 🔢 **Line Numbers** - Built-in line counter with dynamic updates
 - ⌨️ **Smart Indentation** - Tab/Shift+Tab support for indenting/unindenting code blocks
 - 🎭 **Theme Support** - Multiple syntax highlighting themes (light/dark modes)
@@ -34,19 +34,19 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 ### NPM
 
 ```bash
-npm install caret
+npm install @pfmcodes/caret
 ```
 
 ### Yarn
 
 ```bash
-yarn add caret
+yarn add @pfmcodes/caret
 ```
 
 ### PNPM
 
 ```bash
-pnpm add caret
+pnpm add @pfmcodes/caret
 ```
 
 ## 🏁 Quick Start
@@ -66,7 +66,7 @@ pnpm add caret
   <div id="editor"></div>
   
   <script type="module">
-    import editor from './node_modules/caret/esm/index.js';
+    import editor from './node_modules/@pfmcodes/caret/esm/index.js';
     
     const instance = await editor.createEditor(
       document.getElementById('editor'),
@@ -84,7 +84,7 @@ pnpm add caret
 ### ES Module Import
 
 ```javascript
-import editor from 'caret/esm';
+import editor from '@pfmcodes/caret';
 
 // Create editor instance
 const editorInstance = await editor.createEditor(
@@ -116,7 +116,7 @@ caret/
 ### JavaScript Editor
 
 ```javascript
-import editor from 'caret/esm';
+import editor from '@pfmcodes/caret';
 
 const jsEditor = await editor.createEditor(
   document.getElementById('js-editor'),
@@ -193,7 +193,7 @@ The editor comes with default styles that you can override:
   line-height: 1.6;
 }
 
-/* Customize the caret */
+/* Customize the Caret */
 #Caret-caret {
   background: #00ff00 !important;
   width: 3px !important;
@@ -244,7 +244,7 @@ editorInstance.setLanguage('python');
 The editor automatically:
 - Updates syntax highlighting as you type
 - Adjusts line numbers dynamically
-- Maintains caret position accurately
+- Maintains Caret position accurately
 - Synchronizes all visual components
 
 ### Configuration Options
@@ -329,7 +329,7 @@ Line numbers are automatically generated and synchronized with your code.
 - **Shift + Tab** - Unindent selected lines
 
 #### Custom Caret
-The editor features a custom-rendered caret that adapts to your theme (light/dark).
+The editor features a custom-rendered Caret that adapts to your theme (light/dark).
 
 #### Synchronized Scrolling
 All editor components (code, highlights, line numbers) scroll together smoothly.
@@ -460,7 +460,7 @@ Caret uses a clever layering technique:
 
 1. **Textarea Layer** - Handles user input and cursor management
 2. **Pre/Code Layer** - Displays syntax-highlighted code (overlay)
-3. **Custom Caret** - Renders a styled caret in the correct position
+3. **Custom Caret** - Renders a styled Caret in the correct position
 4. **Line Numbers** - Dynamically generated and synchronized
 
 The editor synchronizes all layers during:
@@ -494,10 +494,10 @@ Contributions are welcome! Please follow these steps:
 
 ```bash
 # Clone the repository
-git clone https://github.com/PFMCODES/caret.git
+git clone https://github.com/pfmcodes/lexius-editor.git
 
 # Navigate to the directory
-cd caret
+cd lexius-editor
 
 # Install dependencies
 npm install
@@ -521,13 +521,13 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ## 📞 Support
 
-- **Issues**: [GitHub Issues](https://github.com/PFMCODES/caret/issues)
-- **Discussions**: [GitHub Discussions](https://github.com/PFMCODES/caret/discussions)
+- **Issues**: [GitHub Issues](https://github.com/pfmcodes/lexius-editor/issues)
+- **Discussions**: [GitHub Discussions](https://github.com/pfmcodes/lexius-editor/discussions)
 
 ## 🔗 Links
 
-- [GitHub Repository](https://github.com/PFMCODES/caret)
-- [NPM Package](https://www.npmjs.com/package/caret) *(if published)*
+- [GitHub Repository](https://github.com/pfmcodes/lexius-editor)
+- [NPM Package](https://www.npmjs.com/package/@pfmcodes/caret) *(if published)*
 
 ---
 

package/commonjs/editor.js

@@ -0,0 +1,272 @@
+const hljs = require("../highlight.js/es/core.js"); // Use default export
+const languages = require("./languages.js");
+
+languages.init();
+
+async function createEditor(editor, data) {
+    const editor1 = document.createElement("textarea");
+    const highlighted = document.createElement("pre");
+    const caret = document.createElement("div");
+    const measureCanvas = document.createElement("canvas");
+    const measureCtx = 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 = document.createElement("div");
+
+    editor1.id = "Caret-textarea";
+    highlighted.id = "Caret-highlighted";
+    caret.id = "Caret-caret";
+    lineCounter.id = "Caret-lineCounter";
+    let code = data.value || "";
+    let language = data.language;
+    let theme = data.theme;
+    if (!languages.registeredlanguages.includee(language)) {
+        languages.registerlanguage(language);
+    }
+    if (theme) {
+        let themeLink = document.getElementById("Caret-theme")
+        if (!themeLink) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.id = "Caret-theme";
+            link.href = `./highlight.js/styles/${theme}.css`;
+            document.head.appendChild(link);
+        } else {
+            themeLink.href = `./highlight.js/styles/${theme}.css`;
+        }
+    } else {
+        let themeLink  = document.getElementById("Caret-theme");
+        if (!themeLink) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.id = "Caret-theme";
+            link.href = `./highlight.js/styles/hybrid.css`;
+            document.head.appendChild(link);
+        } else {
+            themeLink.href = `./highlight.js/styles/hybrid.css`;
+        }
+    }
+    editor1.spellcheck = false;
+    editor1.autocapitalize = "off";
+    editor1.autocomplete = "off";
+    editor1.autocorrect = "off";
+    editor.style = "position: relative; width: 600px; height: 300px; overflow: hidden; /* 👈 CRITICAL */ font-size: 14px;"   
+    if (code) {
+        editor1.value = code;
+        editor1.style.paddingTop = "-9px";
+        highlighted.innerHTML = hljs.highlight(code, { language: language }).value;
+    }
+    const keyDown = (e) => {
+        if (e.key !== "Tab") return;
+
+        e.preventDefault();
+
+        const value = editor1.value;
+        const start = editor1.selectionStart;
+        const end = editor1.selectionEnd;
+
+        const indent = "    ";
+
+        // Find line start & end
+        const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+        const lineEnd = value.indexOf("\n", end);
+        const finalLineEnd = lineEnd === -1 ? value.length : lineEnd;
+
+        const block = value.slice(lineStart, finalLineEnd);
+        const lines = block.split("\n");
+
+        let newLines;
+        let delta = 0;
+
+        if (e.shiftKey) {
+            // UNINDENT
+            newLines = lines.map(line => {
+                if (line.startsWith(indent)) {
+                    delta -= indent.length;
+                    return line.slice(indent.length);
+                }
+                if (line.startsWith("\t")) {
+                    delta -= 1;
+                    return line.slice(1);
+                }
+                return line;
+            });
+        } else {
+            // INDENT
+            newLines = lines.map(line => indent + line);
+            delta = indent.length;
+        }
+
+        const newBlock = newLines.join("\n");
+
+        editor1.value =
+            value.slice(0, lineStart) +
+            newBlock +
+            value.slice(finalLineEnd);
+
+        // Fix selection
+        editor1.selectionStart = start + delta;
+        editor1.selectionEnd =
+            end + delta * newLines.length;
+
+        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        updateLineNumbers();
+        updateCaret();
+    }
+    editor1.addEventListener("keydown", keyDown);
+    editor.appendChild(lineCounter);
+    editor.appendChild(highlighted);
+    editor.appendChild(editor1);
+    editor.appendChild(caret);
+
+    function updateFontMetrics() {
+        const style = getComputedStyle(editor1);
+        measureCtx.font = `${style.fontSize} ${style.fontFamily}`;
+    }
+
+    function updateLineNumbers() {
+        const lineCount = editor1.value.split("\n").length;
+
+        let html = "";
+        for (let i = 1; i <= lineCount; i++) {
+            html += `<div class="Caret-lineCounter-number" style="color: ${lineColor}">${i}</div>`;
+        }
+
+        lineCounter.innerHTML = html;
+    }
+
+
+    function getFontMetrics() {
+        const metrics = measureCtx.measureText("Mg");
+        return {
+            ascent: metrics.actualBoundingBoxAscent,
+            descent: metrics.actualBoundingBoxDescent,
+            height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+        };
+    }
+    const focus = () => {
+        caret.style.opacity = "1";
+        caret.style.background = caretColor;
+    };
+
+    editor1.addEventListener("focus", focus);
+
+    const blur = () => {
+        caret.style.opacity = "0";
+    };
+
+    editor1.addEventListener("blur", blur);
+
+    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 style = getComputedStyle(editor1);
+        const paddingLeft = parseFloat(style.paddingLeft);
+        const paddingTop = parseFloat(style.paddingTop);
+        const lineHeight = parseFloat(style.lineHeight);
+
+        updateFontMetrics();
+        const metrics = measureCtx.measureText("Mg");
+        const ascent = metrics.actualBoundingBoxAscent;
+
+        caret.style.left =
+            paddingLeft + measureCtx.measureText(lineText).width + "px";
+        caret.style.top =
+           -9 +
+            paddingTop +
+            lineIndex * lineHeight +
+            (lineHeight - ascent) +
+            "px";
+
+        caret.style.height = `${lineHeight}px`;
+    }
+    const input = () => {
+        caret.style.opacity = "1";
+        highlighted.innerHTML = hljs.highlight(editor1.value, { language: language }).value;
+        updateLineNumbers();
+        updateCaret();
+    };
+    editor1.addEventListener("input", input);
+    const scroll = () => {
+        const x = -editor1.scrollLeft;
+        const y = -editor1.scrollTop;
+
+        highlighted.style.transform = `translate(${x}px, ${y}px)`;
+        caret.style.transform = `translate(${x}px, ${y}px)`;
+        lineCounter.style.transform = `translateY(${y}px)`;
+    };
+    editor1.addEventListener("scroll", scroll);
+
+    updateFontMetrics();
+    getFontMetrics();
+
+    editor1.addEventListener("click", updateCaret);
+    editor1.addEventListener("keyup", updateCaret);
+    
+    // Initial caret position
+    updateLineNumbers();
+    updateCaret();
+    
+    // Focus the editor
+    editor1.focus();
+    function destroy() {
+        editor1.removeEventListener('click', updateCaret);
+        editor1.removeEventListener('keyup', updateCaret);
+        editor1.removeEventListener('scroll', scroll);
+        editor1.removeEventListener('keydown', keyDown);
+        editor.innerHTML = "";
+    }
+    function refresh() {
+        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        updateLineNumbers();
+        updateCaret();
+    }
+    function getValue() {
+        return editor1.value;
+    }
+    function setValue(i) {
+        editor1.value = i;
+        refresh();
+    }
+    function setLanguage(l) {
+        language = l;
+        if (!languages.registeredlanguages.includee(language)) {
+            languages.registerlanguage(language);
+        }
+        refresh();
+    }
+    return {
+        getValue,
+        setValue,
+        focus,
+        setLanguage,
+        destroy
+    };
+}
+
+const editor = {
+    createEditor
+};
+
+module.exports = editor;
+
+/* 
+
+createEditor: creates the main editor, using html Elements like, textarea and etc.
+                refresh: refreshs the editor
+                getValue: return the current value from the editor
+                setValue: sets a certain value to the editor's value
+                focus: focusses the editor
+                destroy: destroys and removeEventListeners
+                updateCaret: updates the caret positon, height and other metrics using math
+                updateLineNumbers: just add new line numbers
+                getFontMetrics: returns back the font's metrics like height
+                updateFontMetrics: update the fontMetrics
+
+*/

package/commonjs/index.js

@@ -0,0 +1,10 @@
+const editor = require("./editor.js");
+const theme = require("./theme.js");
+const language = require("./languages.js");
+
+const Caret = {
+    editor,
+    theme,
+    language
+}
+module.exports = Caret;

package/commonjs/languages.js

@@ -0,0 +1,97 @@
+const javascript = require("../highlight.js/es/languages/javascript.js");
+const xml = require("../highlight.js/es/languages/xml.js");
+const css = require("../highlight.js/es/languages/css.js");
+const python = require("../highlight.js/es/languages/python.js");
+const java = require("../highlight.js/es/languages/java.js");
+const csharp = require("../highlight.js/es/languages/csharp.js");
+const cpp = require("../highlight.js/es/languages/cpp.js");
+const ruby = require("../highlight.js/es/languages/ruby.js");
+const php = require("../highlight.js/es/languages/php.js");
+const go = require("../highlight.js/es/languages/go.js");
+const c = require("../highlight.js/es/languages/c.js");
+const rust = require("../highlight.js/es/languages/rust.js");
+const kotlin = require("../highlight.js/es/languages/kotlin.js");
+const swift = require("../highlight.js/es/languages/swift.js");
+const typescript = require("../highlight.js/es/languages/typescript.js");
+const json = require("../highlight.js/es/languages/json.js");
+const bash = require("../highlight.js/es/languages/bash.js");
+const plaintext = require("../highlight.js/es/languages/plaintext.js");
+const hljs = require("../highlight.js/es/core.js");
+
+let registeredLanguages = [];
+
+function init() {
+    // Register all languages
+    hljs.registerLanguage("javascript", javascript);
+    hljs.registerLanguage("xml", xml);
+    hljs.registerLanguage("css", css);
+    hljs.registerLanguage("html", xml);
+    hljs.registerLanguage("python", python);
+    hljs.registerLanguage("java", java);
+    hljs.registerLanguage("csharp", csharp);
+    hljs.registerLanguage("cpp", cpp);
+    hljs.registerLanguage("ruby", ruby);
+    hljs.registerLanguage("php", php);
+    hljs.registerLanguage("go", go);
+    hljs.registerLanguage("c", c);
+    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",
+        "python",
+        "java",
+        "csharp",
+        "cpp",
+        "ruby",
+        "php",
+        "go",
+        "c",
+        "rust",
+        "kotlin",
+        "swift",
+        "typescript",
+        "json",
+        "bash",
+        "shell",
+        "sh",
+        "plaintext"
+    ]
+}
+
+function registerLanguage(name, definition) {
+    hljs.registerLanguage(name, definition);
+    if (!registeredLanguages.includes(name)) {
+        registeredLanguages.push(name);
+    }
+}
+
+const languages = {
+    init,
+    registeredLanguages,
+    registerLanguage,
+    hljs
+}
+
+module.exports = languages;
+
+/* 
+
+registeredLannguage: added for the editor.js can check if the langauge provided already is regsitered or not
+
+
+init: just registers some languages and updates the registeredLangauges variable
+
+registerLanguage: just registers a language
+
+*/

package/commonjs/theme.js

@@ -0,0 +1,18 @@
+function setTheme(name) {
+  const link = document.getElementById("Caret-theme");
+  link.href = `./highlight.js/styles/${name}.css`;
+}
+
+function removeTheme() {
+  const link = document.getElementById("Caret-theme");
+    if (link) {
+        link.parentNode.removeChild(link);
+    }
+}
+
+const theme = {
+    removeTheme,
+    setTheme
+}
+
+module.exports = theme;

package/esm/editor.js

@@ -21,6 +21,10 @@ async function createEditor(editor, data) {
     let code = data.value || "";
     let language = data.language;
     let theme = data.theme;
+    if (!languages.registeredLanguages.includee(language)) {
+        languages.registerLanguage(language);
+        language.registeredLanguages.push(language);
+    }
     if (theme) {
         let themeLink = document.getElementById("Caret-theme")
         if (!themeLink) {
@@ -54,7 +58,7 @@ async function createEditor(editor, data) {
         editor1.style.paddingTop = "-9px";
         highlighted.innerHTML = hljs.highlight(code, { language: language }).value;
     }
-    editor1.addEventListener("keydown", (e) => {
+    const keyDown = (e) => {
         if (e.key !== "Tab") return;
 
         e.preventDefault();
@@ -110,7 +114,8 @@ async function createEditor(editor, data) {
         highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
         updateLineNumbers();
         updateCaret();
-    });
+    }
+    editor1.addEventListener("keydown", keyDown);
     editor.appendChild(lineCounter);
     editor.appendChild(highlighted);
     editor.appendChild(editor1);
@@ -141,15 +146,18 @@ async function createEditor(editor, data) {
             height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
         };
     }
-
-    editor1.addEventListener("focus", () => {
+    const focus = () => {
         caret.style.opacity = "1";
         caret.style.background = caretColor;
-    });
+    };
+
+    editor1.addEventListener("focus", focus);
 
-    editor1.addEventListener("blur", () => {
+    const blur = () => {
         caret.style.opacity = "0";
-    });
+    };
+
+    editor1.addEventListener("blur", blur);
 
     function updateCaret() {
         const start = editor1.selectionStart;
@@ -179,22 +187,22 @@ async function createEditor(editor, data) {
 
         caret.style.height = `${lineHeight}px`;
     }
-
-    editor1.addEventListener("input", () => {
+    const input = () => {
         caret.style.opacity = "1";
         highlighted.innerHTML = hljs.highlight(editor1.value, { language: language }).value;
         updateLineNumbers();
         updateCaret();
-    });
-
-    editor1.addEventListener("scroll", () => {
+    };
+    editor1.addEventListener("input", input);
+    const scroll = () => {
         const x = -editor1.scrollLeft;
         const y = -editor1.scrollTop;
 
         highlighted.style.transform = `translate(${x}px, ${y}px)`;
         caret.style.transform = `translate(${x}px, ${y}px)`;
         lineCounter.style.transform = `translateY(${y}px)`;
-    });
+    };
+    editor1.addEventListener("scroll", scroll);
 
     updateFontMetrics();
     getFontMetrics();
@@ -208,12 +216,39 @@ async function createEditor(editor, data) {
     
     // Focus the editor
     editor1.focus();
+    function destroy() {
+        editor1.removeEventListener('click', updateCaret);
+        editor1.removeEventListener('keyup', updateCaret);
+        editor1.removeEventListener('scroll', scroll);
+        editor1.removeEventListener('keydown', keyDown);
+        editor.innerHTML = "";
+    }
+    function refresh() {
+        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        updateLineNumbers();
+        updateCaret();
+    }
+    function getValue() {
+        return editor1.value;
+    }
+    function setValue(i) {
+        editor1.value = i;
+        refresh();
+    }
+    function setLanguage(l) {
+        language = l;
+        if (!languages.registeredLanguages.includee(language)) {
+            languages.registerLanguage(language);
+            language.registeredLanguages.push(language);
+        }
+        refresh();
+    }
     return {
-        getValue: () => editor1.value,
-        setValue: v => { editor1.value = v; /* refresh */ },
-        focus: () => editor1.focus(),
-        setLanguage: lang => { language = lang; refresh(); },
-        destroy: () => editor.innerHTML = ""
+        getValue,
+        setValue,
+        focus,
+        setLanguage,
+        destroy
     };
 }
 
@@ -221,4 +256,19 @@ const editor = {
     createEditor
 };
 
-export default editor;
+export default editor;
+
+/* 
+
+createEditor: creates the main editor, using html Elements like, textarea and etc.
+                refresh: refreshs the editor
+                getValue: return the current value from the editor
+                setValue: sets a certain value to the editor's value
+                focus: focusses the editor
+                destroy: destroys and removeEventListeners
+                updateCaret: updates the caret positon, height and other metrics using math
+                updateLineNumbers: just add new line numbers
+                getFontMetrics: returns back the font's metrics like height
+                updateFontMetrics: update the fontMetrics
+
+*/