@pfmcodes/caret 0.1.5 → 0.2.1

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)
+- [Perfomance 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 perfomace check out [this](#performance-notes) and [this](#performance).
 
-## 🚀 Installation
+##  Installation
 
 ### NPM
 
@@ -54,7 +56,7 @@ yarn add @pfmcodes/caret
 pnpm add @pfmcodes/caret
 ```
 
-## 🏁 Quick Start
+## Quick Start
 
 ### Basic Usage
 
@@ -89,7 +91,7 @@ pnpm add @pfmcodes/caret
 ### ES Module Import
 
 ```javascript
-import editor from '@pfmcodes/caret';
+import editor from './node_modules/@pfmcodes/caret/esm/index.js';
 
 // Create editor instance
 const editorInstance = await editor.editor.createEditor(
@@ -102,7 +104,7 @@ const editorInstance = await editor.editor.createEditor(
 );
 ```
 
-## 📁 Project Structure
+## Project Structure
 
 ```
 caret/
@@ -116,12 +118,12 @@ caret/
 └── LICENSE             # MIT License
 ```
 
-## 💡 Usage
+## Usage
 
 ### JavaScript Editor
 
 ```javascript
-import editor from '@pfmcodes/caret'; // auto link to commonjs version
+import editor from './node_modules/@pfmcodes/caret/esm/index.js'; // auto link to commonjs version
 
 const jsEditor = await editor.editor.createEditor(
   document.getElementById('js-editor'),
@@ -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**: v0.1.5 used to handle 500 lines before lagging, with new caret@0.2.0 and onwards, there's almost 20 times performance increase now it can handle 10K+ lines smoothly before lagging(better results in optimized browsers like firefox)
 
 ### 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

@@ -59,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();
@@ -117,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();
     }
@@ -194,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)`;
@@ -230,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();
     }
@@ -263,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/editor.js

@@ -59,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();
@@ -117,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();
     }
@@ -194,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)`;
@@ -230,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();
     }
@@ -263,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/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,6 +1,6 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "The official code editor engine for lexius",
   "type": "module",
   "main": "./esm/index.js",

package/types/editor.ts

@@ -3,15 +3,18 @@ import languages from "./languages.ts";
 
 languages.init();
 
-async function createEditor(editor: HTMLElement, data: any) {
+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")!;
-    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 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";
@@ -23,32 +26,32 @@ async function createEditor(editor: HTMLElement, data: any) {
     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;
+    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 = document.getElementById("Caret-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 = `./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");
+        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 = `./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`;
@@ -57,14 +60,15 @@ async function createEditor(editor: HTMLElement, data: any) {
     editor1.spellcheck = false;
     editor1.autocapitalize = "off";
     editor1.autocomplete = "off";
-    (editor1 as any).autocorrect = false;
+    editor1.autocorrect = "off" as any;
     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 as string;
+        highlighted.innerHTML = await _render(code, language, editor1);
     }
-    const keyDown = (e: any) => {
+    const keyDown = async (e: KeyboardEvent) => {
         if (e.key !== "Tab") return;
 
         e.preventDefault();
@@ -83,8 +87,8 @@ async function createEditor(editor: HTMLElement, data: any) {
         const block = value.slice(lineStart, finalLineEnd);
         const lines = block.split("\n");
 
-        let newLines: any;
-        let delta: number = 0;
+        let newLines;
+        let delta = 0;
 
         if (e.shiftKey) {
             // UNINDENT
@@ -117,7 +121,7 @@ async function createEditor(editor: HTMLElement, data: any) {
         editor1.selectionEnd =
             end + delta * newLines.length;
 
-        highlighted.innerHTML = hljs.highlight(editor1.value, { language }).value;
+        highlighted.innerHTML = await _render(editor1.value, language, editor1);
         updateLineNumbers();
         updateCaret();
     }
@@ -128,15 +132,15 @@ async function createEditor(editor: HTMLElement, data: any) {
     editor.appendChild(caret);
 
     function updateFontMetrics() {
-        const style: any = getComputedStyle(editor1);
+        const style = getComputedStyle(editor1);
         measureCtx.font = `${style.fontSize} ${style.fontFamily}`;
     }
 
     function updateLineNumbers() {
-        const lineCount: number = editor1.value.split("\n").length;
+        const lineCount = editor1.value.split("\n").length;
 
-        let html: string = "";
-        for (let i: number = 1; i <= lineCount; i++) {
+        let html = "";
+        for (let i = 1; i <= lineCount; i++) {
             html += `<div class="Caret-lineCounter-number" style="color: ${lineColor}">${i}</div>`;
         }
 
@@ -194,17 +198,17 @@ async function createEditor(editor: HTMLElement, data: any) {
 
         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)`;
@@ -230,8 +234,8 @@ async function createEditor(editor: HTMLElement, data: any) {
         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();
     }
@@ -263,6 +267,52 @@ async function createEditor(editor: HTMLElement, data: any) {
     };
 }
 
+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
 };

package/types/languages.ts

@@ -1,21 +1,40 @@
+// @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> = [];