@pfmcodes/caret 0.1.1 → 0.1.3

package/esm/editor.js

@@ -1,5 +1,5 @@
 import hljs from "../highlight.js/es/core.js"; // Use default export
-import languages from "./languages.js"
+import languages from "./languages.js";
 
 languages.init();
 
@@ -18,9 +18,15 @@ async function createEditor(editor, data) {
     highlighted.id = "Caret-highlighted";
     caret.id = "Caret-caret";
     lineCounter.id = "Caret-lineCounter";
+    editor1.style.backgroundColor = isDark ? "#222" : "#fff";
     let code = data.value || "";
     let language = data.language;
     let theme = data.theme;
+    if (!languages.registeredLanguages.includes(language)) {
+        const mod = await import(`../highlight.js/es/languages/${language}.js`);
+        languages.registerLanguage(language, mod.default);
+        languages.registeredLanguages.push(language);
+    }
     if (theme) {
         let themeLink = document.getElementById("Caret-theme")
         if (!themeLink) {
@@ -54,7 +60,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 +116,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 +148,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 +189,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 +218,43 @@ 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();
+    }
+    async function setLanguage(l) {
+        if (!languages.registeredLanguages.includes(l)) {
+            if (l === "html" || l === "svg") {
+                language = "xml";
+                l = "xml";
+            }
+            const mod = await import(`../highlight.js/es/languages/${l}.js`);
+            
+        }
+        language = l;
+        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 +262,18 @@ 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
+*/

package/esm/languages.js

@@ -18,7 +18,9 @@ import bash from "../highlight.js/es/languages/bash.js";
 import plaintext from "../highlight.js/es/languages/plaintext.js";
 import hljs from "../highlight.js/es/core.js";
 
-export function init() {
+let registeredLanguages = [];
+
+function init() {
     // Register all languages
     hljs.registerLanguage("javascript", javascript);
     hljs.registerLanguage("xml", xml);
@@ -40,7 +42,56 @@ export function init() {
     hljs.registerLanguage("bash", bash);
     hljs.registerLanguage("shell", bash);
     hljs.registerLanguage("sh", bash);
-    hljs.registerLanguage("plaintext", plaintext)
+    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);
+    }
 }
 
-export default { init, registerLanguage: hljs.registerLanguage.bind(hljs), hljs };
+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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "The official code editor engine for lexius",
   "type": "module",
   "main": "./index.cjs",
-  "types": "./types/index.d.ts",
+  "types": "./types/types.d.ts",
   "exports": {
     ".": {
       "import": "./esm/index.js",

package/types/editor.d.ts

@@ -1,27 +1,167 @@
-export interface EditorInitData {
-  /** Initial code value */
+/**
+ * Caret Editor - TypeScript Type Definitions
+ * A lightweight code editor with syntax highlighting and custom caret rendering
+ */
+
+/**
+ * Configuration options for creating a Caret editor instance
+ */
+export interface CaretEditorConfig {
+  /**
+   * Initial code content to display in the editor
+   * @default ""
+   */
   value?: string;
 
-  /** Language id registered in Highlight.js */
+  /**
+   * Programming language for syntax highlighting
+   * Must be a language supported by Highlight.js
+   * @example "javascript", "python", "html", "css"
+   */
   language: string;
 
-  /** Highlight.js theme name (without .css) */
+  /**
+   * Highlight.js theme name for syntax highlighting
+   * Can be any theme available in the highlight.js/styles directory
+   * @example "hybrid", "monokai", "github", "atom-one-dark"
+   * @default "hybrid"
+   */
   theme?: string;
 }
 
-export interface CaretEditorElements {
-  textarea: HTMLTextAreaElement;
-  highlighted: HTMLPreElement;
-  caret: HTMLDivElement;
+/**
+ * Font metrics information returned by getFontMetrics
+ */
+export interface FontMetrics {
+  /**
+   * Height of the ascender (portion of characters above baseline)
+   */
+  ascent: number;
+
+  /**
+   * Height of the descender (portion of characters below baseline)
+   */
+  descent: number;
+
+  /**
+   * Total height of the font (ascent + descent)
+   */
+  height: number;
+}
+
+/**
+ * Caret editor instance returned by createEditor
+ */
+export interface CaretEditorInstance {
+  /**
+   * Get the current value/content of the editor
+   * @returns The current code content as a string
+   */
+  getValue(): string;
+
+  /**
+   * Set the value/content of the editor
+   * @param value - The new code content to set
+   */
+  setValue(value: string): void;
+
+  /**
+   * Focus the editor textarea
+   */
+  focus(): void;
+
+  /**
+   * Change the programming language for syntax highlighting
+   * @param language - The new language identifier (e.g., "javascript", "python")
+   */
+  setLanguage(language: string): void;
+
+  /**
+   * Destroy the editor instance and remove all event listeners
+   * Cleans up the DOM and prepares for garbage collection
+   */
+  destroy(): void;
 }
 
 /**
- * Creates a Caret editor inside the given container.
- *
- * @param editor DOM element that will contain the editor
- * @param data Initial editor configuration
+ * Language manager for registering and initializing Highlight.js languages
  */
-export function createEditor(
-  editor: HTMLElement,
-  data: EditorInitData
-): Promise<void>;
+export interface LanguageManager {
+  /**
+   * Initialize the language manager
+   */
+  init(): void;
+
+  /**
+   * Register a new language for syntax highlighting
+   * @param language - The language identifier to register
+   */
+  registerLanguage(language: string): void;
+
+  /**
+   * List of currently registered languages
+   */
+  registeredLanguages: string[];
+}
+
+/**
+ * Main editor object containing the createEditor function
+ */
+export interface CaretEditor {
+  /**
+   * Create a new Caret editor instance
+   * 
+   * @param container - The HTMLElement that will contain the editor
+   * @param config - Configuration options for the editor
+   * @returns A CaretEditorInstance with methods to control the editor
+   * 
+   * @example
+   * ```typescript
+   * import editor from 'caret';
+   * 
+   * const editorContainer = document.getElementById('editor');
+   * const instance = await editor.createEditor(editorContainer, {
+   *   value: 'console.log("Hello, World!");',
+   *   language: 'javascript',
+   *   theme: 'monokai'
+   * });
+   * 
+   * // Get current value
+   * const code = instance.getValue();
+   * 
+   * // Update the content
+   * instance.setValue('const x = 42;');
+   * 
+   * // Change language
+   * instance.setLanguage('typescript');
+   * 
+   * // Clean up when done
+   * instance.destroy();
+   * ```
+   */
+  createEditor(
+    container: HTMLElement,
+    config: CaretEditorConfig
+  ): Promise<CaretEditorInstance>;
+}
+
+/**
+ * Default export - the main Caret editor object
+ */
+declare const editor: CaretEditor;
+
+export default editor;
+
+/**
+ * Module augmentation for importing Highlight.js
+ */
+declare module "../highlight.js/es/core.js" {
+  import type { HLJSApi } from "highlight.js";
+  const hljs: HLJSApi;
+  export default hljs;
+}
+
+declare module "./languages.js" {
+  const languages: LanguageManager;
+  export default languages;
+}