fix: 保存无效的 JS 时弹出提示、避免代码中的 HTML 标签破坏 DOM 结构

fix #21

Author: TCOTC

README_zh_CN.md

@@ -51,6 +51,7 @@
 
 - 管理菜单支持调整代码片段排序 [#17](https://github.com/TCOTC/snippets/issues/17)
 - 在代码编辑器中使用任何快捷键都不再触发思源原生操作 [#19](https://github.com/TCOTC/snippets/issues/19)
+- 保存无效的 JS 时弹出提示、避免代码中的 HTML 标签破坏 DOM 结构 [#21](https://github.com/TCOTC/snippets/issues/21)
 
 ##### v1.2.0
 

index.js

@@ -2271,9 +2271,11 @@ class PluginSnippets extends siyuan__WEBPACK_IMPORTED_MODULE_3__.Plugin {
     const isTouch = this.isMobile || this.isTouchDevice;
     let snippetsHtml = "";
     snippetsList.forEach((snippet) => {
+      const safeSnippetName = document.createElement("span");
+      safeSnippetName.textContent = snippet.name || snippet.content.slice(0, 200);
       snippetsHtml += \`
                 <div class="jcsm-snippet-item b3-menu__item" data-type="\${snippet.type}" data-id="\${snippet.id}">
-                    <span class="jcsm-snippet-name fn__flex-1" placeholder="\${this.i18n.emptySnippet}">\${snippet.name || snippet.content.slice(0, 200)}</span>
+                    <span class="jcsm-snippet-name fn__flex-1" placeholder="\${this.i18n.emptySnippet}">\${safeSnippetName.innerHTML}</span>
                     <span class="fn__space"></span>
                     <button class="block__icon block__icon--show fn__flex-center\${isTouch ? " jcsm-touch" : ""}\${this.showDeleteButton ? "" : " fn__none"}" data-type="delete"><svg><use xlink:href="#iconTrashcan"></use></svg></button>
                     <button class="block__icon block__icon--show fn__flex-center\${isTouch ? " jcsm-touch" : ""}\${this.showDuplicateButton ? "" : " fn__none"}" data-type="duplicate"><svg><use xlink:href="#iconCopy"></use></svg></button>
@@ -2648,6 +2650,9 @@ class PluginSnippets extends siyuan__WEBPACK_IMPORTED_MODULE_3__.Plugin {
             newElement.textContent = snippet.content;
             document.head.appendChild(newElement);
           } else if (snippet.type === "js") {
+            if (!this.isValidJavaScriptCode(snippet.content)) {
+              this.showErrorMessage(this.i18n.invalidJavaScriptCode);
+            }
             newElement = document.createElement("script");
             newElement.id = elementId;
             newElement.type = "text/javascript";

plugin.json

@@ -2,7 +2,7 @@
   "name": "snippets",
   "author": "TCOTC",
   "url": "https://github.com/TCOTC/snippets",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "minAppVersion": "3.1.27",
   "backends": [
     "all"

src/i18n/en_US.json

@@ -158,5 +158,6 @@
   "topBarPosition": "Top bar button position",
   "topBarPositionDescription": "The position of the snippet manager button in the top bar, takes effect after reloading the interface",
   "topBarPositionLeft": "Left",
-  "topBarPositionRight": "Right"
+  "topBarPositionRight": "Right",
+  "invalidJavaScriptCode": "Invalid JavaScript code"
 }

src/i18n/ja_JP.json

@@ -158,5 +158,6 @@
   "topBarPosition": "トップバーボタンの位置",
   "topBarPositionDescription": "トップバーに表示されるスニペットマネージャーボタンの位置。インターフェースを再読み込みした後に有効になります",
   "topBarPositionLeft": "左側",
-  "topBarPositionRight": "右側"
+  "topBarPositionRight": "右側",
+  "invalidJavaScriptCode": "無効な JavaScript コード"
 }

src/i18n/zh_CHT.json

@@ -158,5 +158,6 @@
   "topBarPosition": "頂欄按鈕位置",
   "topBarPositionDescription": "在頂欄中顯示代碼片段管理器按鈕的位置，重新載入介面後生效",
   "topBarPositionLeft": "左側",
-  "topBarPositionRight": "右側"
+  "topBarPositionRight": "右側",
+  "invalidJavaScriptCode": "無效的 JavaScript 代碼"
 }

src/i18n/zh_CN.json

@@ -158,5 +158,6 @@
   "topBarPosition": "顶栏按钮位置",
   "topBarPositionDescription": "在顶栏中显示代码片段管理器按钮的位置，重新加载界面后生效",
   "topBarPositionLeft": "左侧",
-  "topBarPositionRight": "右侧"
+  "topBarPositionRight": "右侧",
+  "invalidJavaScriptCode": "无效的 JavaScript 代码"
 }

src/index.ts

@@ -2168,10 +2168,15 @@ export default class PluginSnippets extends Plugin {
 
         const isTouch = this.isMobile || this.isTouchDevice;
         let snippetsHtml = "";
+        
         snippetsList.forEach((snippet: Snippet) => {
+            // 创建临时的 DOM 元素来安全地设置代码片段名称 https://github.com/TCOTC/snippets/issues/21
+            const safeSnippetName = document.createElement("span");
+            safeSnippetName.textContent = snippet.name || snippet.content.slice(0, 200);
+            
             snippetsHtml += `
                 <div class="jcsm-snippet-item b3-menu__item" data-type="${snippet.type}" data-id="${snippet.id}">
-                    <span class="jcsm-snippet-name fn__flex-1" placeholder="${this.i18n.emptySnippet}">${ snippet.name || snippet.content.slice(0, 200) }</span>
+                    <span class="jcsm-snippet-name fn__flex-1" placeholder="${this.i18n.emptySnippet}">${safeSnippetName.innerHTML}</span>
                     <span class="fn__space"></span>
                     <button class="block__icon block__icon--show fn__flex-center${ isTouch ? " jcsm-touch" : ""}${this.showDeleteButton    ? "" : " fn__none"}" data-type="delete"><svg><use xlink:href="#iconTrashcan"></use></svg></button>
                     <button class="block__icon block__icon--show fn__flex-center${ isTouch ? " jcsm-touch" : ""}${this.showDuplicateButton ? "" : " fn__none"}" data-type="duplicate"><svg><use xlink:href="#iconCopy"></use></svg></button>
@@ -2181,6 +2186,7 @@ export default class PluginSnippets extends Plugin {
                 </div>
             `;
         });
+        
         return snippetsHtml;
     }
 
@@ -2596,6 +2602,9 @@ export default class PluginSnippets extends Plugin {
                     newElement.textContent = snippet.content;
                     document.head.appendChild(newElement);
                 } else if (snippet.type === "js") {
+                    if (!this.isValidJavaScriptCode(snippet.content)) {
+                        this.showErrorMessage(this.i18n.invalidJavaScriptCode);
+                    }
                     newElement = document.createElement("script");
                     newElement.id = elementId;
                     newElement.type = "text/javascript";