@pfmcodes/caret 0.2.6 → 0.2.8

package/README.md

@@ -1,5 +1,5 @@
 # Caret
-
+![LOGO](https://github.com/PFMCODES/Caret/raw/main/logo.svg)
 [![License: MIT](https://img.shields.io/badge/License-MIT-4000ff.svg)](https://opensource.org/licenses/MIT)
 [![JavaScript](https://img.shields.io/badge/JavaScript-63.7%25-f6fa03)](https://github.com/PFMCODES/lexius-edior)
 [![JavaScript](https://img.shields.io/badge/TypeScript-32.3%25-0244f7)](https://github.com/PFMCODES/lexius-edior)
@@ -33,6 +33,12 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 
 ## What's-New?
 
+### v0.2.8
+- just mistake i made has been fixed
+
+### v0.2.7
+- another cleanup but this time, with file optimizations and updated comments at the end of each containing short summaries of each function and variables(only some important variables)
+
 ### v0.2.6
 
 - CommonJs support has been removed to reduce package size

package/editor.js

@@ -71,8 +71,10 @@ async function createEditor(editor, data) {
     editor.style = "position: relative; width: 600px; height: 300px; overflow: hidden; /* 👈 CRITICAL */ font-size: 14px;"   
     if (code && editor && editor1 && language && highlighted) {
         editor1.style.paddingTop = "-9px";
-        editor1.value = data.value;
-        highlighted.innerHTML = await _render(data.value, language, editor1);
+        editor1.value = code;
+        let h = await _render(code, language, editor1);
+        highlighted.innerHTML = h;
+        console.log({h: h, code: code})
     }
     const keyDown = async (e) => {
         if (e.key !== "Tab") return;
@@ -396,13 +398,6 @@ function getWrapMap(code, wrapAt = 71) {
     return wrapMap;
 }
 
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-}
-
 async function _render(code, language, editor) {
     // If no editor context provided, just highlight everything (initial load)
     if (!editor) {
@@ -440,7 +435,7 @@ async function _render(code, language, editor) {
     const highlightedVisible = hljs.highlight(wrappedCode, { language }).value;
     // Plain text for non-visible areas (no highlighting = faster)
     if (highlightedVisible.trim() === "") {
-        return hljs.highlight(escapeHtml(code), { language }).value;
+        return hljs.highlight(code, { language }).value;
     }
     const beforeHTML = "\n".repeat(beforeLines.length);
     const afterHTML = "\n".repeat(afterLines.length);
@@ -453,16 +448,23 @@ const 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
+/*
+createEditor(editor, data): creates the main editor using HTML elements like textarea, pre, div etc.
+    Returns an object with the following methods:
+        getValue() -> returns the current value from the editor
+        setValue(val) -> sets a value to the editor
+        focus() -> focuses the editor
+        setLanguage(lang) -> changes the syntax highlighting language
+        destroy() -> destroys the editor and removes all event listeners
+        onDidChangeModelContent(fn) -> fires a callback whenever the editor content changes
+
+Internal functions:
+        _render(code, language, editor) -> virtual renderer, only highlights visible lines for performance
+        wrapCode(code, wrapAt) -> wraps long lines at word boundaries
+        getWrapMap(code, wrapAt) -> returns an array mapping each line to its visual line count
+        updateCaret() -> updates the caret position using canvas font metrics
+        updateLineNumbers() -> re-renders line numbers, accounting for wrapped lines
+        updateFontMetrics() -> updates the canvas font to match the textarea's computed style
+        getFontMetrics() -> returns ascent, descent and height of the current font
+        getVisualRow(text, wrapAt) -> returns which visual row and remaining text the caret is on
 */

package/index.js

@@ -7,4 +7,16 @@ const Caret = {
     theme,
     language
 }
-export default Caret;
+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
+*/

package/langauges.js

@@ -22,31 +22,31 @@ let registeredLanguages = [];
 
 function init() {
     // Register all languages
-    hljs.registerLanguage("javascript", javascript);
-    hljs.registerLanguage("xml", xml);
-    hljs.registerLanguage("typescript", typescript);
-    hljs.registerAliases(["jsx"], { languageName: "javascript" });
-    hljs.registerAliases(["js"], { languageName: "javascript" });
-    hljs.registerAliases(["ts"], { languageName: "typescript" });
-    hljs.registerAliases(["html"], { languageName: "xml" });
-    hljs.registerAliases(["svg"], { languageName: "xml" });
-    hljs.registerLanguage("css", css);
-    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("json", json);
-    hljs.registerLanguage("bash", bash);
-    hljs.registerLanguage("shell", bash);
-    hljs.registerLanguage("sh", bash);
-    hljs.registerLanguage("plaintext", plaintext);
+    registerLanguage("javascript", javascript);
+    registerLanguage("xml", xml);
+    registerLanguage("typescript", typescript);
+    registerAliases(["jsx"], { languageName: "javascript" });
+    registerAliases(["js"], { languageName: "javascript" });
+    registerAliases(["ts"], { languageName: "typescript" });
+    registerAliases(["html"], { languageName: "xml" });
+    registerAliases(["svg"], { languageName: "xml" });
+    registerLanguage("css", css);
+    registerLanguage("python", python);
+    registerLanguage("java", java);
+    registerLanguage("csharp", csharp);
+    registerLanguage("cpp", cpp);
+    registerLanguage("ruby", ruby);
+    registerLanguage("php", php);
+    registerLanguage("go", go);
+    registerLanguage("c", c);
+    registerLanguage("rust", rust);
+    registerLanguage("kotlin", kotlin);
+    registerLanguage("swift", swift);
+    registerLanguage("json", json);
+    registerLanguage("bash", bash);
+    registerLanguage("shell", bash);
+    registerLanguage("sh", bash);
+    registerLanguage("plaintext", plaintext);
     registeredLanguages.push(
         "javascript", "js",
         "xml", "html", "svg",
@@ -69,10 +69,18 @@ function init() {
     );
 }
 
+export function registerAliases(a, b) {
+    hljs.registerAliases(a, b)
+}
+
 function registerLanguage(name, definition) {
-    hljs.registerLanguage(name, definition);
     if (!registeredLanguages.includes(name)) {
+        hljs.registerLanguage(name, definition);
         registeredLanguages.push(name);
+        return;
+    } else {
+        console.warn(`Caret: Language ${name} already registered, aborting`);
+        return;
     }
 }
 
@@ -80,18 +88,15 @@ const languages = {
     init,
     registeredLanguages,
     registerLanguage,
+    registerAliases,
     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
-
+registerAliases: basically registers a nickname or second name for an language
 */

package/package.json

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

package/theme.js

@@ -3,16 +3,12 @@ function setTheme(name) {
   link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${name}.css`;
 }
 
-function removeTheme() {
-  const link = document.getElementById("Caret-theme");
-    if (link) {
-        link.parentNode.removeChild(link);
-    }
-}
-
 const theme = {
-    removeTheme,
     setTheme
 }
 
-export default theme;
+export default theme;
+
+/*
+setTheme() -> changes the current highlight.js theme
+*/

package/types/editor.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Use default export
-import languages from "./languages.ts";
+import languages from "./langauges.ts";
 
 languages.init();
 
@@ -49,6 +50,7 @@ async function createEditor(editor: HTMLElement, data: any) {
             link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
             document.head.appendChild(link);
         } else {
+            // @ts-ignore
             themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
         }
     } else {
@@ -60,6 +62,7 @@ async function createEditor(editor: HTMLElement, data: any) {
             link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/hybrid.css`;
             document.head.appendChild(link);
         } else {
+            // @ts-ignore
             themeLink.href = `./highlight.js/styles/hybrid.css`;
         }
     }
@@ -455,16 +458,24 @@ const 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
+/*
+createEditor(editor, data): creates the main editor using HTML elements like textarea, pre, div etc.
+    Returns an object with the following methods:
+        getValue() -> returns the current value from the editor
+        setValue(val) -> sets a value to the editor
+        focus() -> focuses the editor
+        setLanguage(lang) -> changes the syntax highlighting language
+        destroy() -> destroys the editor and removes all event listeners
+        onDidChangeModelContent(fn) -> fires a callback whenever the editor content changes
+
+Internal functions:
+        _render(code, language, editor) -> virtual renderer, only highlights visible lines for performance
+        wrapCode(code, wrapAt) -> wraps long lines at word boundaries
+        getWrapMap(code, wrapAt) -> returns an array mapping each line to its visual line count
+        escapeHtml(str) -> escapes HTML special characters
+        updateCaret() -> updates the caret position using canvas font metrics
+        updateLineNumbers() -> re-renders line numbers, accounting for wrapped lines
+        updateFontMetrics() -> updates the canvas font to match the textarea's computed style
+        getFontMetrics() -> returns ascent, descent and height of the current font
+        getVisualRow(text, wrapAt) -> returns which visual row and remaining text the caret is on
 */

package/types/index.d.ts

@@ -32,3 +32,15 @@ declare module "@pfmcodes/caret" {
 
   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
+*/

package/types/index.ts

@@ -1,10 +1,22 @@
 import editor from "./editor.ts";
 import theme from "./theme.ts";
-import language from "./languages.ts";
+import language from "./langauges.ts";
 
 const Caret = {
     editor,
     theme,
     language
 }
-export default Caret;
+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
+*/

package/types/{languages.ts → langauges.ts}

@@ -37,8 +37,7 @@ import plaintext from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/
 // @ts-ignore
 import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js";
 
-let registeredLanguages: Array<T> = [];
-type T = any
+let registeredLanguages: Array<any> = [];
 
 function init() {
     // Register all languages
@@ -89,6 +88,10 @@ function init() {
     ]
 }
 
+export function registerAliases(a: any, b: any) {
+    hljs.registerAliases(a, b)
+}
+
 function registerLanguage(name: string, definition: any) {
     hljs.registerLanguage(name, definition);
     if (!registeredLanguages.includes(name)) {
@@ -106,12 +109,8 @@ const languages = {
 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
-
+registerAliases: basically registers a nickname or second name for an language
 */

package/types/theme.ts

@@ -3,16 +3,12 @@ function setTheme(name: string) {
   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;
+export default theme;
+
+/*
+setTheme() -> changes the current highlight.js theme
+*/

package/types/esm-highlight.d.ts

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