@codady/coax 0.0.5 → 0.0.7

package/src/components/Coax.js

@@ -1,5 +1,5 @@
 /**
- *  Last modified: 2026/01/12 15:11:21
+ *  Last modified: 2026/01/15 19:21:29
  * Coax - A custom web component for syntax highlighting, code display, and interactive features
  *
  */
@@ -9,6 +9,8 @@ import NAMESPACE from "@codady/utils/namespace";
 import getEl from "@codady/utils/getEl";
 import createTools from "@codady/utils/createTools";
 import createEl from "@codady/utils/createEl";
+import trimEmptyLines from "@codady/utils/trimEmptyLines";
+import escapeHtmlChars from "@codady/utils/escapeHtmlChars";
 class Coax extends HTMLElement {
     // A static Map to hold the configuration for different languages
     static languages = new Map();
@@ -36,7 +38,7 @@ class Coax extends HTMLElement {
         // Attach a Shadow DOM to the custom element
         this.attachShadow({ mode: 'open' });
         // Remove leading/trailing whitespace from the raw code content
-        this.source = this.textContent?.replace(/^\s*\n|\n\s*$/g, '') || '';
+        this.source = escapeHtmlChars(trimEmptyLines(this.textContent));
         // Initialize the basic structure of the component
         this.shadowRoot.innerHTML = `
             <style id="base-styles">
@@ -317,7 +319,7 @@ class Coax extends HTMLElement {
       * @param line - The line of code to highlight.
       * @param config - The language configuration object.
       */
-    getLineToFill(codeWrap, line, config) {
+    getLineToFillHighLight(codeWrap, line, config) {
         config = config || Coax.languages.get(this.lang);
         let highlightedLine = this.getHighLightString(line, config);
         // 将高亮后的内容填充到 div 中
@@ -328,10 +330,10 @@ class Coax extends HTMLElement {
      * Highlights new source code and appends it to the code body.
      * @param newCode - The new source code to highlight and append.
      */
-    async highlight(newCode) {
+    async highlight(newCode = this.source) {
         const config = Coax.languages.get(this.lang), startIndex = this.highlightEl.children.length, 
         // 将新源码按行分割
-        newCodeLines = newCode ? newCode.split('\n') : [];
+        newCodeLines = newCode ? newCode.split('\n') : [], hasSpeedAttr = this.hasAttribute('speed'), hasSanitizedAttr = this.hasAttribute('sanitized');
         //更新别名
         this.updateName(config);
         if (!newCodeLines.length)
@@ -339,13 +341,13 @@ class Coax extends HTMLElement {
         // 如果没有找到配置，则输出原始代码，并不进行高亮处理
         for (let [index, lineString] of newCodeLines.entries()) {
             //如果是空行则跳过
-            if (!lineString.trim() && this.hasAttribute('sanitized'))
+            if (!lineString.trim() && hasSanitizedAttr)
                 continue;
             // 创建一个 div 包裹每一行
             const lineWrap = this.createLineWrap(index, startIndex), codeWrap = lineWrap.lastElementChild;
             //标记完成
             lineWrap.completed = true;
-            if (this.hasAttribute('speed')) {
+            if (hasSpeedAttr) {
                 this.highlightEl.appendChild(lineWrap);
                 //流式打字
                 await typeWriter(lineString, {
@@ -354,11 +356,11 @@ class Coax extends HTMLElement {
                         codeWrap.innerHTML = fullText;
                     }
                 });
-                this.getLineToFill(codeWrap, lineString, config);
+                this.getLineToFillHighLight(codeWrap, lineString, config);
             }
             else {
                 //直接打出
-                this.getLineToFill(codeWrap, lineString, config);
+                this.getLineToFillHighLight(codeWrap, lineString, config);
                 //
                 this.highlightEl.appendChild(lineWrap);
             }
@@ -423,19 +425,32 @@ class Coax extends HTMLElement {
             this.codeNameEl.innerHTML = this.alias;
         }
     }
+    trimLineString(str) {
+        // 删除开头的第一个换行符
+        if (str.startsWith('\n')) {
+            str = str.substring(1);
+        }
+        // 删除结尾的第一个换行符
+        if (str.endsWith('\n')) {
+            str = str.slice(0, -1);
+        }
+        return str;
+    }
     /**
      * Renders the highlighted code within the shadow DOM.
      */
-    render(code = this.source) {
+    render() {
         //同时多次改变属性，只执行一次
         if (this._renderQueued)
             return;
         this._renderQueued = true;
-        this.clear();
-        this.injectThemeStyles();
-        //一次性渲染
-        this.highlight(code);
-        this._renderQueued = false;
+        requestAnimationFrame(async () => {
+            this.highlightEl.innerHTML = '';
+            this.injectThemeStyles();
+            //一次性渲染
+            await this.highlight();
+            this._renderQueued = false;
+        });
     }
     /**
      * Clears the current content and resets the state.
@@ -448,14 +463,20 @@ class Coax extends HTMLElement {
      * @param newCode - The new source code to replace the existing code.
      */
     async replace(newCode) {
-        this.clear();
-        await this.highlight(newCode);
+        newCode = escapeHtmlChars(newCode);
+        this.source = trimEmptyLines(newCode);
+        if (this._renderQueued)
+            return;
+        this.highlightEl.innerHTML = '';
+        //一次性渲染
+        await this.highlight();
     }
     /**
      * Appends new source code to the current content and highlights only the new portion.
      * @param newCode - The new source code to append and highlight.
      */
     async append(newCode) {
+        newCode = escapeHtmlChars(newCode);
         // 将新的代码追加到现有代码末尾
         this.source += `\n${newCode}`;
         // 高亮新的部分
@@ -483,7 +504,7 @@ class Coax extends HTMLElement {
         lineWrap.completed = true;
         //行结束前保存
         this.lastLineString = this.lineString;
-        this.getLineToFill(lineWrap?.lastElementChild, this.lineString);
+        this.getLineToFillHighLight(lineWrap?.lastElementChild, this.lineString);
         //一行结束，清空临时行文本
         this.lineString = '';
     }
@@ -504,20 +525,21 @@ class Coax extends HTMLElement {
      * @param forceClose - Forcefully close the line if set to `true`.
      */
     stream(str, forceClose = false) {
-        const { lineWrap, codeWrap } = this.getLastLine();
+        str = escapeHtmlChars(str);
+        const { lineWrap, codeWrap } = this.getLastLine(), isLine = str.startsWith('\n') || str.endsWith('\n');
         this.highlightEl.appendChild(lineWrap);
         //汇集
         this.source += str;
+        //临时保存行文本
+        this.lineString += isLine ? this.trimLineString(str) : str;
         //如果没有遇到换行符号，也可以强制结束
-        if (forceClose || (str.startsWith('\n') || str.endsWith('\n'))) {
+        if (forceClose || isLine) {
             //标记完成
             this.close();
         }
         else {
             //插入文本
             codeWrap.innerHTML += str;
-            //临时保存行文本
-            this.lineString += str;
         }
         //滚动到最底部
         this.autoScrollCode();

package/src/components/Coax.ts

@@ -1,5 +1,5 @@
 /**
- *  Last modified: 2026/01/12 15:11:21
+ *  Last modified: 2026/01/15 19:21:29
  * Coax - A custom web component for syntax highlighting, code display, and interactive features
  * 
  */
@@ -10,6 +10,8 @@ import NAMESPACE from "@codady/utils/namespace";
 import getEl from "@codady/utils/getEl";
 import createTools, { toolsItem } from "@codady/utils/createTools";
 import createEl from "@codady/utils/createEl";
+import trimEmptyLines from "@codady/utils/trimEmptyLines";
+import escapeHtmlChars from "@codady/utils/escapeHtmlChars";
 
 
 // Define the structure for the language configuration
@@ -58,7 +60,7 @@ class Coax extends HTMLElement {
         // Attach a Shadow DOM to the custom element
         this.attachShadow({ mode: 'open' });
         // Remove leading/trailing whitespace from the raw code content
-        this.source = this.textContent?.replace(/^\s*\n|\n\s*$/g, '') || '';
+        this.source = escapeHtmlChars(trimEmptyLines(this.textContent));
         // Initialize the basic structure of the component
         (this.shadowRoot as any).innerHTML = `
             <style id="base-styles">
@@ -342,7 +344,7 @@ class Coax extends HTMLElement {
       * @param line - The line of code to highlight.
       * @param config - The language configuration object.
       */
-    getLineToFill(codeWrap: Element, line: string, config?: LanguageConfig) {
+    getLineToFillHighLight(codeWrap: Element, line: string, config?: LanguageConfig) {
         config = config || Coax.languages.get(this.lang);
         let highlightedLine = this.getHighLightString(line, config);
         // 将高亮后的内容填充到 div 中
@@ -352,25 +354,27 @@ class Coax extends HTMLElement {
      * Highlights new source code and appends it to the code body.
      * @param newCode - The new source code to highlight and append.
      */
-    async highlight(newCode: string) {
+    async highlight(newCode: string = this.source) {
         const config = Coax.languages.get(this.lang),
             startIndex = this.highlightEl.children.length,
             // 将新源码按行分割
-            newCodeLines = newCode ? newCode.split('\n') : [];
+            newCodeLines = newCode ? newCode.split('\n') : [],
+            hasSpeedAttr = this.hasAttribute('speed'),
+            hasSanitizedAttr = this.hasAttribute('sanitized');
         //更新别名
-        this.updateName(config)
+        this.updateName(config); 
         if (!newCodeLines.length) return true;
         // 如果没有找到配置，则输出原始代码，并不进行高亮处理
         for (let [index, lineString] of newCodeLines.entries()) {
             //如果是空行则跳过
-            if (!lineString.trim() && this.hasAttribute('sanitized')) continue;
+            if (!lineString.trim() && hasSanitizedAttr) continue;
             // 创建一个 div 包裹每一行
             const lineWrap = this.createLineWrap(index, startIndex),
                 codeWrap = lineWrap.lastElementChild as Element;
             //标记完成
             (lineWrap as any).completed = true;
 
-            if (this.hasAttribute('speed')) {
+            if (hasSpeedAttr) {
                 this.highlightEl.appendChild(lineWrap);
                 //流式打字
                 await typeWriter(lineString, {
@@ -379,10 +383,10 @@ class Coax extends HTMLElement {
                         codeWrap.innerHTML = fullText;
                     }
                 });
-                this.getLineToFill(codeWrap, lineString, config);
+                this.getLineToFillHighLight(codeWrap, lineString, config);
             } else {
                 //直接打出
-                this.getLineToFill(codeWrap, lineString, config);
+                this.getLineToFillHighLight(codeWrap, lineString, config);
                 //
                 this.highlightEl.appendChild(lineWrap);
             }
@@ -452,18 +456,35 @@ class Coax extends HTMLElement {
             this.codeNameEl.innerHTML = this.alias;
         }
     }
+  
+    trimLineString(str: string) {
+        // 删除开头的第一个换行符
+        if (str.startsWith('\n')) {
+            str = str.substring(1);
+        }
+
+        // 删除结尾的第一个换行符
+        if (str.endsWith('\n')) {
+            str = str.slice(0, -1);
+        }
+
+        return str;
+    }
     /**
      * Renders the highlighted code within the shadow DOM.
      */
-    render(code = this.source) {
+    render() {
         //同时多次改变属性，只执行一次
         if (this._renderQueued) return;
         this._renderQueued = true;
-        this.clear();
-        this.injectThemeStyles();
-        //一次性渲染
-        this.highlight(code);
-        this._renderQueued = false;
+        requestAnimationFrame(async () => {
+            this.highlightEl.innerHTML = '';
+            this.injectThemeStyles();
+            //一次性渲染
+            await this.highlight();
+            this._renderQueued = false;
+        });
+
     }
     /**
      * Clears the current content and resets the state.
@@ -476,14 +497,19 @@ class Coax extends HTMLElement {
      * @param newCode - The new source code to replace the existing code.
      */
     async replace(newCode: string) {
-        this.clear();
-        await this.highlight(newCode);
+        newCode = escapeHtmlChars(newCode);
+        this.source = trimEmptyLines(newCode);
+        if (this._renderQueued) return;
+        this.highlightEl.innerHTML = '';
+        //一次性渲染
+        await this.highlight();
     }
     /**
      * Appends new source code to the current content and highlights only the new portion.
      * @param newCode - The new source code to append and highlight.
      */
     async append(newCode: string) {
+        newCode = escapeHtmlChars(newCode);
         // 将新的代码追加到现有代码末尾
         this.source += `\n${newCode}`;
         // 高亮新的部分
@@ -511,7 +537,7 @@ class Coax extends HTMLElement {
         (lineWrap as any).completed = true;
         //行结束前保存
         this.lastLineString = this.lineString;
-        this.getLineToFill(lineWrap?.lastElementChild as Element, this.lineString);
+        this.getLineToFillHighLight(lineWrap?.lastElementChild as Element, this.lineString);
         //一行结束，清空临时行文本
         this.lineString = '';
     }
@@ -531,20 +557,23 @@ class Coax extends HTMLElement {
      * @param forceClose - Forcefully close the line if set to `true`.
      */
     stream(str: string, forceClose: boolean = false) {
-        const { lineWrap, codeWrap } = this.getLastLine();
+        str = escapeHtmlChars(str);
+        const { lineWrap, codeWrap } = this.getLastLine(),
+            isLine = str.startsWith('\n') || str.endsWith('\n');
         this.highlightEl.appendChild(lineWrap);
         //汇集
         this.source += str;
 
+        //临时保存行文本
+        this.lineString += isLine ? this.trimLineString(str) : str;
+
         //如果没有遇到换行符号，也可以强制结束
-        if (forceClose || (str.startsWith('\n') || str.endsWith('\n'))) {
+        if (forceClose || isLine) {
             //标记完成
             this.close();
         } else {
             //插入文本
             codeWrap.innerHTML += str;
-            //临时保存行文本
-            this.lineString += str;
         }
         //滚动到最底部
         this.autoScrollCode();

package/src/modules.js

@@ -1,5 +1,5 @@
 /**
- * @since Last modified: 2026/01/12 14:10:29
+ * @since Last modified: 2026/01/15 19:21:31
  */
 'use strict';
 import Coax from './components/Coax.js';

package/src/modules.ts

@@ -1,5 +1,5 @@
 /**
- * @since Last modified: 2026/01/12 14:10:29
+ * @since Last modified: 2026/01/15 19:21:31
  */
 'use strict'