@pfmcodes/caret 0.2.6 → 0.2.7

package/README.md

@@ -33,6 +33,9 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 
 ## What's-New?
 
+### 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

@@ -453,16 +453,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/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",
@@ -70,9 +70,13 @@ function init() {
 }
 
 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;
     }
 }
 
@@ -86,12 +90,7 @@ 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
-
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "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/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;
-}