@pfmcodes/caret 0.1.4 → 0.2.0

package/README.md

@@ -1,25 +1,25 @@
 # 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)
+[![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)
+[![CSS](https://img.shields.io/badge/CSS-4.0%25-2e7ad1)](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.
 
-## ✨ Features
+## Features
 
-- 🎨 **Live Syntax Highlighting** - Real-time code highlighting powered by Highlight.js
-- 🖱️ **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)
-- 📜 **Smooth Scrolling** - Synchronized scrolling for code, highlights, and line numbers
-- 📦 **ES Modules** - Modern ESM architecture for easy integration
-- 🎯 **TypeScript Ready** - Full TypeScript definitions included
-- ⚡ **Lightweight** - Pure JavaScript, no heavy frameworks required
+- **Live Syntax Highlighting** - Real-time code highlighting powered by Highlight.js
+- **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)
+- **Smooth Scrolling** - Synchronized scrolling for code, highlights, and line numbers
+- **ES Modules** - Modern ESM architecture for easy integration
+- **TypeScript Ready** - Full TypeScript definitions included
+- **Lightweight** - Pure JavaScript, no heavy frameworks required
 
-## 📋 Table of Contents
+## Table of Contents
 
 - [What's new](#What's-New?)
 - [Installation](#installation)
@@ -29,12 +29,14 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 - [Customization](#customization)
 - [Contributing](#contributing)
 - [License](#license)
+- [Performance Notes](#performance-notes)
 
 ## What's-New?
 
-### New fresh package directory, now the heavy work is done in the cloud while minimizing package size to just a few Kilo Bytes.
+### The editor has been optimized like crazy, the editor used to lag at 500 lines not it does not lag until 10k+ lines(x20 performance increase)
+### for more info about the performance check out [this.](#performance-notes)
 
-## 🚀 Installation
+##  Installation
 
 ### NPM
 
@@ -54,7 +56,7 @@ yarn add @pfmcodes/caret
 pnpm add @pfmcodes/caret
 ```
 
-## 🏁 Quick Start
+## Quick Start
 
 ### Basic Usage
 
@@ -73,7 +75,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 +94,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
@@ -102,7 +104,7 @@ const editorInstance = await editor.createEditor(
 );
 ```
 
-## 📁 Project Structure
+## Project Structure
 
 ```
 caret/
@@ -116,14 +118,14 @@ caret/
 └── LICENSE             # MIT License
 ```
 
-## 💡 Usage
+## Usage
 
 ### 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) {
@@ -168,7 +170,7 @@ const emptyEditor = await editor.createEditor(
 );
 ```
 
-## 🎨 Customization
+## Customization
 
 ### Custom Styling
 
@@ -205,7 +207,7 @@ The editor comes with default styles that you can override:
 }
 ```
 
-## 🎯 Advanced Features
+## Advanced Features
 
 ### Multi-Language Support
 
@@ -290,7 +292,7 @@ Caret supports all Highlight.js themes. Popular options include:
 - `stackoverflow-light`
 - `xcode`
 
-## 🛠️ API Reference
+## API Reference
 
 ### createEditor(container, options)
 
@@ -339,7 +341,7 @@ The editor features a custom-rendered Caret that adapts to your theme (light/dar
 #### Synchronized Scrolling
 All editor components (code, highlights, line numbers) scroll together smoothly.
 
-## 📖 Complete Example
+## Complete Example
 
 Here's a complete working example:
 
@@ -457,7 +459,7 @@ for (let i = 0; i < 10; i++) {
 </html>
 ```
 
-## ⚙️ Technical Details
+## Technical Details
 
 ### How It Works
 
@@ -478,6 +480,7 @@ The editor synchronizes all layers during:
 - **Real-time Highlighting**: Uses Highlight.js for fast, accurate syntax highlighting
 - **Canvas Measurement**: Employs HTML5 Canvas API for precise text width calculations
 - **Event Optimization**: Efficiently updates only what's necessary on each interaction
+- **Heavy Optimization**: previous version(0.1.6) used to handle 500 lines before lagging, with new caret@0.2.0, there's almost 20 times perfomace increase now it can handle 10K+ lines smoothly before lagging(better results in optimized browsers like firfox)
 
 ### Browser Support
 
@@ -485,7 +488,7 @@ The editor synchronizes all layers during:
 - Chrome, Firefox, Safari, Edge (latest versions)
 - Requires JavaScript modules support
 
-## 🤝 Contributing
+## Contributing
 
 Contributions are welcome! Please follow these steps:
 
@@ -514,26 +517,31 @@ npm run dev
 npm run build
 ```
 
-## 📝 License
+## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## 🙏 Acknowledgments
+## Performance Notes
+- Handles 10k+ lines smoothly in all browsers
+- Firefox DevTools can inspect up to 3M lines without breaking a sweat
+- Chrome DevTools politely requests you don't inspect past 300k lines
+
+## Acknowledgments
 
 - Built with modern JavaScript/TypeScript
 - Syntax highlighting powered by Highlight.js
 - Inspired by various text editor projects in the JavaScript ecosystem
 
-## 📞 Support
+## Support
 
 - **Issues**: [GitHub Issues](https://github.com/pfmcodes/lexius-editor/issues)
 - **Discussions**: [GitHub Discussions](https://github.com/pfmcodes/lexius-editor/discussions)
 
-## 🔗 Links
+## Links
 
 - [GitHub Repository](https://github.com/pfmcodes/lexius-editor)
 - [NPM Package](https://www.npmjs.com/package/@pfmcodes/caret) *(if published)*
 
 ---
 
-Made with ❤️ by [PFMCODES](https://github.com/PFMCODES)
+Made with ❤️ by [PFMCODES](https://github.com/PFMCODES)

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`;
@@ -55,12 +59,13 @@ async function createEditor(editor, data) {
     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;
+    if (code && editor && editor1 && language && highlighted) {
         editor1.style.paddingTop = "-9px";
-        highlighted.innerHTML = hljs.highlight(code, { language: language }).value;
+        console.log(data.value + " data.value");
+        editor1.value = data.value;
+        highlighted.innerHTML = await _render(data.value, language, editor1);
     }
-    const keyDown = (e) => {
+    const keyDown = async (e) => {
         if (e.key !== "Tab") return;
 
         e.preventDefault();
@@ -113,7 +118,7 @@ async function createEditor(editor, data) {
         editor1.selectionEnd =
             end + delta * newLines.length;
 
-        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         updateLineNumbers();
         updateCaret();
     }
@@ -139,6 +144,7 @@ async function createEditor(editor, data) {
         lineCounter.innerHTML = html;
     }
 
+    highlighted.style.paddingTop = "12px"
 
     function getFontMetrics() {
         const metrics = measureCtx.measureText("Mg");
@@ -187,19 +193,19 @@ async function createEditor(editor, data) {
             (lineHeight - ascent) +
             "px";
 
-        caret.style.height = `${lineHeight}px`;
+        caret.style.height = `${lineHeight - 5}px`;
     }
-    const input = () => {
+    const input = async () => {
         caret.style.opacity = "1";
-        highlighted.innerHTML = hljs.highlight(editor1.value, { language: language }).value;
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         updateLineNumbers();
         updateCaret();
     };
     editor1.addEventListener("input", input);
-    const scroll = () => {
+    const scroll = async () => {
         const x = -editor1.scrollLeft;
         const y = -editor1.scrollTop;
-
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         highlighted.style.transform = `translate(${x}px, ${y}px)`;
         caret.style.transform = `translate(${x}px, ${y}px)`;
         lineCounter.style.transform = `translateY(${y}px)`;
@@ -225,8 +231,8 @@ async function createEditor(editor, data) {
         editor1.removeEventListener('keydown', keyDown);
         editor.innerHTML = "";
     }
-    function refresh() {
-        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+    async function refresh() {
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         updateLineNumbers();
         updateCaret();
     }
@@ -258,6 +264,52 @@ async function createEditor(editor, data) {
     };
 }
 
+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) {
+        return hljs.highlight(code, { language }).value;
+    }
+    
+    const scrollTop = editor.scrollTop;
+    const scrollBottom = scrollTop + editor.clientHeight;
+    const style = getComputedStyle(editor);
+    const lineHeight = parseFloat(style.lineHeight);
+    
+    // Calculate visible line range
+    const startLine = Math.floor(scrollTop / lineHeight);
+    const endLine = Math.ceil(scrollBottom / lineHeight);
+    
+    const lines = code.split("\n");
+    
+    // Add buffer (render extra lines above/below for smooth scrolling)
+    const bufferLines = 10;
+    const visibleStart = Math.max(0, startLine - bufferLines) || 0;
+    const visibleEnd = Math.min(lines.length, endLine + bufferLines) || 0;
+    
+    // Split into three sections
+    const beforeLines = lines.slice(0, visibleStart);
+    const visibleLines = lines.slice(visibleStart, visibleEnd);
+    const afterLines = lines.slice(visibleEnd);
+    
+    // Only highlight visible portion
+    
+    const highlightedVisible = hljs.highlight(visibleLines.join("\n"), { language }).value;
+    // Plain text for non-visible areas (no highlighting = faster)
+    if (highlightedVisible.trim() === "") {
+        return hljs.highlight(escapeHtml(code), { language }).value;
+    }
+    const beforeHTML = "\n".repeat(beforeLines.length);
+    const afterHTML = "\n".repeat(afterLines.length);
+    return beforeHTML + highlightedVisible + afterHTML;
+}
+
 const editor = {
     createEditor
 };

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`;
@@ -60,12 +59,13 @@ async function createEditor(editor, data) {
     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;
+    if (code && editor && editor1 && language && highlighted) {
         editor1.style.paddingTop = "-9px";
-        highlighted.innerHTML = hljs.highlight(code, { language: language }).value;
+        console.log(data.value + " data.value");
+        editor1.value = data.value;
+        highlighted.innerHTML = await _render(data.value, language, editor1);
     }
-    const keyDown = (e) => {
+    const keyDown = async (e) => {
         if (e.key !== "Tab") return;
 
         e.preventDefault();
@@ -118,7 +118,7 @@ async function createEditor(editor, data) {
         editor1.selectionEnd =
             end + delta * newLines.length;
 
-        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         updateLineNumbers();
         updateCaret();
     }
@@ -195,17 +195,17 @@ async function createEditor(editor, data) {
 
         caret.style.height = `${lineHeight - 5}px`;
     }
-    const input = () => {
+    const input = async () => {
         caret.style.opacity = "1";
-        highlighted.innerHTML = hljs.highlight(editor1.value, { language: language }).value;
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         updateLineNumbers();
         updateCaret();
     };
     editor1.addEventListener("input", input);
-    const scroll = () => {
+    const scroll = async () => {
         const x = -editor1.scrollLeft;
         const y = -editor1.scrollTop;
-
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         highlighted.style.transform = `translate(${x}px, ${y}px)`;
         caret.style.transform = `translate(${x}px, ${y}px)`;
         lineCounter.style.transform = `translateY(${y}px)`;
@@ -231,8 +231,8 @@ async function createEditor(editor, data) {
         editor1.removeEventListener('keydown', keyDown);
         editor.innerHTML = "";
     }
-    function refresh() {
-        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+    async function refresh() {
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         updateLineNumbers();
         updateCaret();
     }
@@ -264,6 +264,52 @@ async function createEditor(editor, data) {
     };
 }
 
+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) {
+        return hljs.highlight(code, { language }).value;
+    }
+    
+    const scrollTop = editor.scrollTop;
+    const scrollBottom = scrollTop + editor.clientHeight;
+    const style = getComputedStyle(editor);
+    const lineHeight = parseFloat(style.lineHeight);
+    
+    // Calculate visible line range
+    const startLine = Math.floor(scrollTop / lineHeight);
+    const endLine = Math.ceil(scrollBottom / lineHeight);
+    
+    const lines = code.split("\n");
+    
+    // Add buffer (render extra lines above/below for smooth scrolling)
+    const bufferLines = 10;
+    const visibleStart = Math.max(0, startLine - bufferLines) || 0;
+    const visibleEnd = Math.min(lines.length, endLine + bufferLines) || 0;
+    
+    // Split into three sections
+    const beforeLines = lines.slice(0, visibleStart);
+    const visibleLines = lines.slice(visibleStart, visibleEnd);
+    const afterLines = lines.slice(visibleEnd);
+    
+    // Only highlight visible portion
+    
+    const highlightedVisible = hljs.highlight(visibleLines.join("\n"), { language }).value;
+    // Plain text for non-visible areas (no highlighting = faster)
+    if (highlightedVisible.trim() === "") {
+        return hljs.highlight(escapeHtml(code), { language }).value;
+    }
+    const beforeHTML = "\n".repeat(beforeLines.length);
+    const afterHTML = "\n".repeat(afterLines.length);
+    return beforeHTML + highlightedVisible + afterHTML;
+}
+
 const editor = {
     createEditor
 };

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/index.css

@@ -2,16 +2,21 @@
   position: absolute;
   border: none;
   inset: 0;
-  padding: 10px;
+  padding: 10px 10px 10px 0px;
   font-family: monospace;
   background: transparent;
   color: transparent;
   caret-color: #fff;
   border: 1px solid #ccc;
-  overflow: scroll; /* 👈 ONLY THIS SCROLLS */
+  overflow-x: scroll; /* 👈 ONLY THIS SCROLLS */
   z-index: 1;
   width: 100%;
 }
+
+#Caret-texarea::-webkit-scrollbar {
+  z-index: 3;
+}
+
 #Caret-textarea:focus {
   outline: none;
 }

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "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,334 @@
+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: { value?: string, language: string, theme?: string }) {
+    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") as CanvasRenderingContext2D;
+    if (!measureCtx) {
+        throw new Error("Failed to get 2D context from canvas");
+    }
+    const isDark = data.theme && (data.theme.includes("dark") || data.theme.includes("night"));
+    const caretColor = isDark ? "#fff" : "#7116d8";
+    const lineColor = 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 = data.value || "";
+    let language = data.language;
+    let theme = 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: HTMLLinkElement | null = document.getElementById("Caret-theme") as HTMLLinkElement;
+        if (!themeLink) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.id = "Caret-theme";
+            link.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
+            document.head.appendChild(link);
+        } else {
+            themeLink.href = `https://esm.sh/@pfmcodes/highlight.js@1.0.0/styles/${theme}.css`;
+        }
+    } else {
+        let themeLink: HTMLLinkElement | null = document.getElementById("Caret-theme") as HTMLLinkElement;
+        if (!themeLink) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.id = "Caret-theme";
+            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`;
+        }
+    }
+    editor1.spellcheck = false;
+    editor1.autocapitalize = "off";
+    editor1.autocomplete = "off";
+    editor1.autocorrect = "off" as any;
+    editor.style = "position: relative; width: 600px; height: 300px; overflow: hidden; /* 👈 CRITICAL */ font-size: 14px;"   
+    if (code && editor && editor1 && language && highlighted) {
+        editor1.style.paddingTop = "-9px";
+        console.log(data.value + " data.value");
+        editor1.value = data.value as string;
+        highlighted.innerHTML = await _render(code, language, editor1);
+    }
+    const keyDown = async (e: KeyboardEvent) => {
+        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 = await _render(editor1.value, language, editor1);
+        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;
+    }
+
+    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 = async () => {
+        caret.style.opacity = "1";
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
+        updateLineNumbers();
+        updateCaret();
+    };
+    editor1.addEventListener("input", input);
+    const scroll = async () => {
+        const x = -editor1.scrollLeft;
+        const y = -editor1.scrollTop;
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
+        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 = "";
+    }
+    async function refresh() {
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
+        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
+    };
+}
+
+function escapeHtml(str: string) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+
+async function _render(code: string, language: string, editor: HTMLElement) {
+    // If no editor context provided, just highlight everything (initial load)
+    if (!editor) {
+        return hljs.highlight(code, { language }).value;
+    }
+    
+    const scrollTop = editor.scrollTop;
+    const scrollBottom = scrollTop + editor.clientHeight;
+    const style = getComputedStyle(editor);
+    const lineHeight = parseFloat(style.lineHeight);
+    
+    // Calculate visible line range
+    const startLine = Math.floor(scrollTop / lineHeight);
+    const endLine = Math.ceil(scrollBottom / lineHeight);
+    
+    const lines = code.split("\n");
+    
+    // Add buffer (render extra lines above/below for smooth scrolling)
+    const bufferLines = 10;
+    const visibleStart = Math.max(0, startLine - bufferLines) || 0;
+    const visibleEnd = Math.min(lines.length, endLine + bufferLines) || 0;
+    
+    // Split into three sections
+    const beforeLines = lines.slice(0, visibleStart);
+    const visibleLines = lines.slice(visibleStart, visibleEnd);
+    const afterLines = lines.slice(visibleEnd);
+    
+    // Only highlight visible portion
+    
+    const highlightedVisible = hljs.highlight(visibleLines.join("\n"), { language }).value;
+    // Plain text for non-visible areas (no highlighting = faster)
+    if (highlightedVisible.trim() === "") {
+        return hljs.highlight(escapeHtml(code), { language }).value;
+    }
+    const beforeHTML = "\n".repeat(beforeLines.length);
+    const afterHTML = "\n".repeat(afterLines.length);
+    return beforeHTML + highlightedVisible + afterHTML;
+}
+
+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,117 @@
+// @ts-ignore
+import javascript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/javascript.js";
+// @ts-ignore
+import xml from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/xml.js";
+// @ts-ignore
+import css from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/css.js";
+// @ts-ignore
+import python from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/python.js";
+// @ts-ignore
+import java from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/java.js";
+// @ts-ignore
+import csharp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/csharp.js";
+// @ts-ignore
+import cpp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/cpp.js";
+// @ts-ignore
+import ruby from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/ruby.js";
+// @ts-ignore
+import php from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/php.js";
+// @ts-ignore
+import go from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/go.js";
+// @ts-ignore
+import c from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/c.js";
+// @ts-ignore
+import rust from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/rust.js";
+// @ts-ignore
+import kotlin from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/kotlin.js";
+// @ts-ignore
+import swift from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/swift.js";
+// @ts-ignore
+import typescript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/typescript.js";
+// @ts-ignore
+import json from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/json.js";
+// @ts-ignore
+import bash from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/bash.js";
+// @ts-ignore
+import plaintext from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/plaintext.js";
+// @ts-ignore
+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;