@pfmcodes/caret 0.1.4 → 0.1.5

package/README.md

@@ -73,7 +73,7 @@ pnpm add @pfmcodes/caret
   <script type="module">
     import editor from './node_modules/@pfmcodes/caret/esm/index.js';
     
-    const instance = await editor.createEditor(
+    const instance = await editor.editor.createEditor(
       document.getElementById('editor'),
       {
         value: 'console.log("Hello, World!");',
@@ -92,7 +92,7 @@ pnpm add @pfmcodes/caret
 import editor from '@pfmcodes/caret';
 
 // Create editor instance
-const editorInstance = await editor.createEditor(
+const editorInstance = await editor.editor.createEditor(
   document.getElementById('editor'),
   {
     value: '',           // Initial code
@@ -121,9 +121,9 @@ caret/
 ### JavaScript Editor
 
 ```javascript
-import editor from '@pfmcodes/caret';
+import editor from '@pfmcodes/caret'; // auto link to commonjs version
 
-const jsEditor = await editor.createEditor(
+const jsEditor = await editor.editor.createEditor(
   document.getElementById('js-editor'),
   {
     value: `function greet(name) {

package/commonjs/editor.js

@@ -18,6 +18,10 @@ async function createEditor(editor, data) {
     highlighted.id = "Caret-highlighted";
     caret.id = "Caret-caret";
     lineCounter.id = "Caret-lineCounter";
+    editor1.className = 'dark';
+    highlighted.className = 'dark';
+    caret.className = 'dark';
+    lineCounter.className = 'dark';
     editor1.style.backgroundColor = isDark ? "#222" : "#fff";
     let code = data.value || "";
     let language = data.language;
@@ -33,10 +37,10 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/${theme}.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
             document.head.appendChild(link);
         } else {
-            themeLink.href = `./highlight.js/styles/${theme}.css`;
+            themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
         }
     } else {
         let themeLink  = document.getElementById("Caret-theme");
@@ -44,7 +48,7 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/hybrid.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
             document.head.appendChild(link);
         } else {
             themeLink.href = `./highlight.js/styles/hybrid.css`;
@@ -139,6 +143,7 @@ async function createEditor(editor, data) {
         lineCounter.innerHTML = html;
     }
 
+    highlighted.style.paddingTop = "12px"
 
     function getFontMetrics() {
         const metrics = measureCtx.measureText("Mg");
@@ -187,7 +192,7 @@ async function createEditor(editor, data) {
             (lineHeight - ascent) +
             "px";
 
-        caret.style.height = `${lineHeight}px`;
+        caret.style.height = `${lineHeight - 5}px`;
     }
     const input = () => {
         caret.style.opacity = "1";

package/commonjs/theme.js

@@ -1,6 +1,6 @@
 function setTheme(name) {
   const link = document.getElementById("Caret-theme");
-  link.href = `./highlight.js/styles/${name}.css`;
+  link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${name}.css`;
 }
 
 function removeTheme() {

package/esm/editor.js

@@ -22,7 +22,6 @@ async function createEditor(editor, data) {
     highlighted.className = 'dark';
     caret.className = 'dark';
     lineCounter.className = 'dark';
-    editor.classList.add("");
     editor1.style.backgroundColor = isDark ? "#222" : "#fff";
     let code = data.value || "";
     let language = data.language;
@@ -38,10 +37,10 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/${theme}.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
             document.head.appendChild(link);
         } else {
-            themeLink.href = `./highlight.js/styles/${theme}.css`;
+            themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
         }
     } else {
         let themeLink  = document.getElementById("Caret-theme");
@@ -49,7 +48,7 @@ async function createEditor(editor, data) {
             const link = document.createElement("link");
             link.rel = "stylesheet";
             link.id = "Caret-theme";
-            link.href = `./highlight.js/styles/hybrid.css`;
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
             document.head.appendChild(link);
         } else {
             themeLink.href = `./highlight.js/styles/hybrid.css`;

package/esm/theme.js

@@ -1,6 +1,6 @@
 function setTheme(name) {
   const link = document.getElementById("Caret-theme");
-  link.href = `./highlight.js/styles/${name}.css`;
+  link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${name}.css`;
 }
 
 function removeTheme() {

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "The official code editor engine for lexius",
   "type": "module",
-  "main": "./index.cjs",
-  "types": "./types/types.d.ts",
+  "main": "./esm/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./esm/index.js",
-      "require": "./commonjs/index.js",
-      "types": "./types/index.d.ts"
-    }
+      "require": "./commonjs/index.js"
+    },
+    "./commonjs": "./commonjs/index.js",
+    "./esm": "./esm/index.js"
   },
   "repository": {
     "type": "git",
@@ -24,6 +26,7 @@
     "syntax-highlighting",
     "language-server",
     "typescript",
+    "python",
     "javascript",
     "ide",
     "browser-editor",
@@ -35,4 +38,4 @@
     "url": "https://github.com/PFMCODES/lexius-editor/issues"
   },
   "homepage": "https://github.com/PFMCODES/lexius-editor#readme"
-}
+}

package/types/editor.ts

@@ -0,0 +1,284 @@
+import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Use default export
+import languages from "./languages.ts";
+
+languages.init();
+
+async function createEditor(editor: HTMLElement, data: any) {
+    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")!;
+    const isDark: boolean = data.theme && (data.theme.includes("dark") || data.theme.includes("night"));
+    const caretColor: string = isDark ? "#fff" : "#7116d8";
+    const lineColor: string = 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';
+    editor1.style.backgroundColor = isDark ? "#222" : "#fff";
+    let code: string = data.value || "";
+    let language: string = data.language;
+    let theme: string = data.theme;
+    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 = 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 as any).autocorrect = false;
+    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: any) => {
+        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: any;
+        let delta: number = 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: any = getComputedStyle(editor1);
+        measureCtx.font = `${style.fontSize} ${style.fontFamily}`;
+    }
+
+    function updateLineNumbers() {
+        const lineCount: number = editor1.value.split("\n").length;
+
+        let html: string = "";
+        for (let i: number = 1; i <= lineCount; i++) {
+            html += `<div class="Caret-lineCounter-number" style="color: ${lineColor}">${i}</div>`;
+        }
+
+        lineCounter.innerHTML = html;
+    }
+
+    highlighted.style.paddingTop = "12px"
+
+    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 - 5}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: string) {
+        editor1.value = i;
+        refresh();
+    }
+    async function setLanguage(l: string) {
+        if (!languages.registeredLanguages.includes(l)) {
+            if (l === "html" || l === "svg") {
+                language = "xml";
+                l = "xml";
+            }
+            const mod = await import(`https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/${l}.js`);
+            
+        }
+        language = l;
+        refresh();
+    }
+    return {
+        getValue,
+        setValue,
+        focus,
+        setLanguage,
+        destroy
+    };
+}
+
+const editor = {
+    createEditor
+};
+
+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
+*/

package/types/esm-highlight.d.ts

@@ -0,0 +1,4 @@
+declare module "https://esm.sh/@pfmcodes/highlight.js@1.0.0/*" {
+  const mod: any;
+  export default mod;
+}

package/types/index.d.ts

@@ -0,0 +1,34 @@
+declare module "@pfmcodes/caret" {
+  interface CaretEditorAPI {
+    createEditor(
+      el: HTMLElement,
+      data: any
+    ): Promise<{
+      getValue(): string;
+      setValue(v: string): void;
+      focus(): void;
+      setLanguage(l: string): Promise<void>;
+      destroy(): void;
+    }>;
+  }
+
+  interface CaretThemeApi {
+    setTheme(name: string): void;
+    removeTheme(name: string): void;
+  }
+
+  interface CaretLanguageApi {
+    registeredLanguages: string[];
+    init(): void;
+    registerLanguage(name: string, definition: any): void;
+    hljs: any;
+  }
+
+  const Caret: {
+    editor: CaretEditorAPI;
+    theme: CaretThemeApi;
+    language: CaretLanguageApi;
+  };
+
+  export default Caret;
+}

package/types/index.ts

@@ -0,0 +1,10 @@
+import editor from "./editor.ts";
+import theme from "./theme.ts";
+import language from "./languages.ts";
+
+const Caret = {
+    editor,
+    theme,
+    language
+}
+export default Caret;

package/types/languages.ts

@@ -0,0 +1,98 @@
+import javascript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/javascript.js";
+import xml from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/xml.js";
+import css from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/css.js";
+import python from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/python.js";
+import java from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/java.js";
+import csharp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/csharp.js";
+import cpp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/cpp.js";
+import ruby from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/ruby.js";
+import php from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/php.js";
+import go from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/go.js";
+import c from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/c.js";
+import rust from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/rust.js";
+import kotlin from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/kotlin.js";
+import swift from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/swift.js";
+import typescript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/typescript.js";
+import json from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/json.js";
+import bash from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/bash.js";
+import plaintext from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/plaintext.js";
+import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js";
+
+let registeredLanguages: Array<T> = [];
+type T = any
+
+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: string, definition: any) {
+    hljs.registerLanguage(name, definition);
+    if (!registeredLanguages.includes(name)) {
+        registeredLanguages.push(name);
+    }
+}
+
+const languages = {
+    init,
+    registeredLanguages,
+    registerLanguage,
+    hljs
+}
+
+export default 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/types/theme.ts

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