@pfmcodes/caret 0.1.2 → 0.1.4

package/README.md

@@ -21,6 +21,7 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 
 ## 📋 Table of Contents
 
+- [What's new](#What's-New?)
 - [Installation](#installation)
 - [Quick Start](#quick-start)
 - [Project Structure](#project-structure)
@@ -29,6 +30,10 @@ A lightweight, feature-rich code editor with real-time syntax highlighting and c
 - [Contributing](#contributing)
 - [License](#license)
 
+## 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.
+
 ## 🚀 Installation
 
 ### NPM

package/commonjs/editor.js

@@ -1,4 +1,4 @@
-const hljs = require("../highlight.js/es/core.js"); // Use default export
+const hljs = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"); // Use default export
 const languages = require("./languages.js");
 
 languages.init();
@@ -18,11 +18,14 @@ 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.includee(language)) {
-        languages.registerlanguage(language);
+    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")
@@ -234,11 +237,16 @@ async function createEditor(editor, data) {
         editor1.value = i;
         refresh();
     }
-    function setLanguage(l) {
-        language = l;
-        if (!languages.registeredlanguages.includee(language)) {
-            languages.registerlanguage(language);
+    async function setLanguage(l) {
+        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 {

package/commonjs/languages.js

@@ -1,22 +1,22 @@
-const javascript = require("../highlight.js/es/languages/javascript.js");
-const xml = require("../highlight.js/es/languages/xml.js");
-const css = require("../highlight.js/es/languages/css.js");
-const python = require("../highlight.js/es/languages/python.js");
-const java = require("../highlight.js/es/languages/java.js");
-const csharp = require("../highlight.js/es/languages/csharp.js");
-const cpp = require("../highlight.js/es/languages/cpp.js");
-const ruby = require("../highlight.js/es/languages/ruby.js");
-const php = require("../highlight.js/es/languages/php.js");
-const go = require("../highlight.js/es/languages/go.js");
-const c = require("../highlight.js/es/languages/c.js");
-const rust = require("../highlight.js/es/languages/rust.js");
-const kotlin = require("../highlight.js/es/languages/kotlin.js");
-const swift = require("../highlight.js/es/languages/swift.js");
-const typescript = require("../highlight.js/es/languages/typescript.js");
-const json = require("../highlight.js/es/languages/json.js");
-const bash = require("../highlight.js/es/languages/bash.js");
-const plaintext = require("../highlight.js/es/languages/plaintext.js");
-const hljs = require("../highlight.js/es/core.js");
+const javascript = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/javascript.js");
+const xml = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/xml.js");
+const css = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/css.js");
+const python = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/python.js");
+const java = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/java.js");
+const csharp = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/csharp.js");
+const cpp = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/cpp.js");
+const ruby = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/ruby.js");
+const php = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/php.js");
+const go = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/go.js");
+const c = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/c.js");
+const rust = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/rust.js");
+const kotlin = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/kotlin.js");
+const swift = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/swift.js");
+const typescript = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/typescript.js");
+const json = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/json.js");
+const bash = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/bash.js");
+const plaintext = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/plaintext.js");
+const hljs = require("https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js");
 
 let registeredLanguages = [];
 

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 hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js"; // Use default export
+import languages from "./languages.js";
 
 languages.init();
 
@@ -18,12 +18,19 @@ 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';
+    editor.classList.add("");
+    editor1.style.backgroundColor = isDark ? "#222" : "#fff";
     let code = data.value || "";
     let language = data.language;
     let theme = data.theme;
-    if (!languages.registeredLanguages.includee(language)) {
-        languages.registerLanguage(language);
-        language.registeredLanguages.push(language);
+    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")
@@ -137,6 +144,7 @@ async function createEditor(editor, data) {
         lineCounter.innerHTML = html;
     }
 
+    highlighted.style.paddingTop = "12px"
 
     function getFontMetrics() {
         const metrics = measureCtx.measureText("Mg");
@@ -185,7 +193,7 @@ async function createEditor(editor, data) {
             (lineHeight - ascent) +
             "px";
 
-        caret.style.height = `${lineHeight}px`;
+        caret.style.height = `${lineHeight - 5}px`;
     }
     const input = () => {
         caret.style.opacity = "1";
@@ -235,12 +243,16 @@ async function createEditor(editor, data) {
         editor1.value = i;
         refresh();
     }
-    function setLanguage(l) {
-        language = l;
-        if (!languages.registeredLanguages.includee(language)) {
-            languages.registerLanguage(language);
-            language.registeredLanguages.push(language);
+    async function setLanguage(l) {
+        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 {
@@ -270,5 +282,4 @@ createEditor: creates the main editor, using html Elements like, textarea and et
                 updateLineNumbers: just add new line numbers
                 getFontMetrics: returns back the font's metrics like height
                 updateFontMetrics: update the fontMetrics
-
 */

package/esm/languages.js

@@ -1,22 +1,22 @@
-import javascript from "../highlight.js/es/languages/javascript.js";
-import xml from "../highlight.js/es/languages/xml.js";
-import css from "../highlight.js/es/languages/css.js";
-import python from "../highlight.js/es/languages/python.js";
-import java from "../highlight.js/es/languages/java.js";
-import csharp from "../highlight.js/es/languages/csharp.js";
-import cpp from "../highlight.js/es/languages/cpp.js";
-import ruby from "../highlight.js/es/languages/ruby.js";
-import php from "../highlight.js/es/languages/php.js";
-import go from "../highlight.js/es/languages/go.js";
-import c from "../highlight.js/es/languages/c.js";
-import rust from "../highlight.js/es/languages/rust.js";
-import kotlin from "../highlight.js/es/languages/kotlin.js";
-import swift from "../highlight.js/es/languages/swift.js";
-import typescript from "../highlight.js/es/languages/typescript.js";
-import json from "../highlight.js/es/languages/json.js";
-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";
+import javascript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/javascript.js";
+import xml from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/xml.js";
+import css from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/css.js";
+import python from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/python.js";
+import java from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/java.js";
+import csharp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/csharp.js";
+import cpp from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/cpp.js";
+import ruby from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/ruby.js";
+import php from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/php.js";
+import go from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/go.js";
+import c from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/c.js";
+import rust from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/rust.js";
+import kotlin from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/kotlin.js";
+import swift from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/swift.js";
+import typescript from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/typescript.js";
+import json from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/json.js";
+import bash from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/bash.js";
+import plaintext from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/languages/plaintext.js";
+import hljs from "https://esm.sh/@pfmcodes/highlight.js@1.0.0/es/core.js";
 
 let registeredLanguages = [];
 

package/index.css

@@ -6,11 +6,11 @@
   font-family: monospace;
   background: transparent;
   color: transparent;
-  caret-color: transparent;
+  caret-color: #fff;
   border: 1px solid #ccc;
-  resize: none;
-  overflow: auto; /* 👈 ONLY THIS SCROLLS */
+  overflow: scroll; /* 👈 ONLY THIS SCROLLS */
   z-index: 1;
+  width: 100%;
 }
 #Caret-textarea:focus {
   outline: none;
@@ -32,6 +32,7 @@
   position: absolute;
   width: 2px !important;              /* 👈 thickness */
   opacity: 0;
+  display: none;
   pointer-events: none;
   z-index: 3;
   top: 12px;
@@ -79,17 +80,19 @@
   flex-direction: column;
   height: fit-content;
   justify-content: space-around;
+  z-index: 10;
 }
 
 @keyframes blink {
   50% { opacity: 0; }
 }
 
-@media (prefers-color-scheme: dark) {
-  #Caret-caret {
-    background: #fff0; /* caret color */
-  }
-  #Caret-highlighted {
-    color: #fff;
-  }
+#Caret-caret.dark {
+  background: #fff0; /* caret color */
+}
+#Caret-highlighted.dark {
+  color: #fff;
+}
+#Caret-lineCounter.dark {
+  color: #fff;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfmcodes/caret",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "The official code editor engine for lexius",
   "type": "module",
   "main": "./index.cjs",
@@ -35,4 +35,4 @@
     "url": "https://github.com/PFMCODES/lexius-editor/issues"
   },
   "homepage": "https://github.com/PFMCODES/lexius-editor#readme"
-}
+}