@jx3box/jx3box-editor 3.0.3 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {

package/src/Article.vue

@@ -66,6 +66,7 @@ import execLazyload from "./assets/js/img";
 import execFilterIframe from "./assets/js/iframe";
 import execFilterLink from "./assets/js/a";
 import execSplitPages from "./assets/js/nextpage";
+import normalizeMarkdownForVditor from "./assets/js/normalizeMarkdownForVditor";
 
 // 扩展文本
 import renderFoldBlock from "./assets/js/fold";
@@ -244,8 +245,9 @@ export default {
         },
         renderMarkdownChunk: async function (chunk) {
             const temp = document.createElement("div");
+            const normalizedChunk = normalizeMarkdownForVditor(chunk);
 
-            await Vditor.preview(temp, chunk || "", {
+            await Vditor.preview(temp, normalizedChunk, {
                 mode: "light",
                 lang: "zh_CN",
                 hljs: {
@@ -254,7 +256,9 @@ export default {
                     style: "github",
                 },
                 markdown: {
+                    mark: true,
                     sanitize: true,
+                    toc: true,
                 },
                 icon: "ant",
             });

package/src/Markdown.vue

@@ -35,6 +35,7 @@ import {
 import Vditor from "vditor";
 import "vditor/dist/index.css";
 import "github-markdown-css/github-markdown-light.css";
+import normalizeMarkdownForVditor from "./assets/js/normalizeMarkdownForVditor";
 
 const { __cms } = JX3BOX;
 const UPLOAD_API = `${__cms}api/cms/upload`;
@@ -130,6 +131,7 @@ export default {
             previewVisible: false,
             isRebuildingEditor: false,
             isUploadingImage: false,
+            previewRenderVersion: 0,
             counterElement: null,
             counterClickListener: null,
             counterClickTimestamps: [],
@@ -235,7 +237,9 @@ export default {
                         style: "github",
                     },
                     markdown: {
+                        mark: true,
                         sanitize: true,
+                        toc: true,
                     },
                     mode: this.getPreviewMode(),
                 },
@@ -300,7 +304,7 @@ export default {
             if (this.editor.getValue() === nextValue) return;
             this.editor.setValue(nextValue);
             if (this.previewVisible) {
-                this.editor.renderPreview();
+                this.renderPreviewContent();
             }
         },
         getToolbarButton(name) {
@@ -356,9 +360,38 @@ export default {
 
             this.syncEditorPanels();
             if (this.previewVisible) {
-                this.editor.renderPreview();
+                this.renderPreviewContent();
             }
         },
+        renderPreviewContent: async function () {
+            if (!this.editorReady || !this.editor) return;
+
+            const previewRoot = this.$refs.editorHost?.querySelector?.(".vditor-preview");
+            const previewBody = previewRoot?.querySelector?.(".vditor-reset") || previewRoot;
+            if (!previewBody) return;
+
+            const version = ++this.previewRenderVersion;
+            const normalizedMarkdown = normalizeMarkdownForVditor(this.editor.getValue());
+
+            await Vditor.preview(previewBody, normalizedMarkdown, {
+                mode: "light",
+                lang: "zh_CN",
+                hljs: {
+                    enable: true,
+                    lineNumber: false,
+                    style: "github",
+                },
+                markdown: {
+                    mark: true,
+                    sanitize: true,
+                    toc: true,
+                },
+                icon: "ant",
+            });
+
+            if (version !== this.previewRenderVersion) return;
+            previewBody.classList.add("markdown-body");
+        },
         togglePreview() {
             this.previewVisible = !this.previewVisible;
 
@@ -528,8 +561,8 @@ export default {
     }
 
     .vditor-toolbar {
-    display: flex;
-    align-items: center;
+        display: flex;
+        align-items: center;
         padding: 10px 12px;
         background: #f6f8fa;
         border-bottom: 1px solid #d8dee4;

package/src/assets/js/normalizeMarkdownForVditor.js

@@ -0,0 +1,39 @@
+const PROTECTED_SEGMENT_REGEXP = /(```[\s\S]*?```|~~~[\s\S]*?~~~|`[^`\n]*`|\$\$[\s\S]*?\$\$|\$[^$\n]+\$)/g;
+
+function replaceUnderline(text) {
+    return text.replace(/\+\+([^\n+][^\n]*?)\+\+/g, "<u>$1</u>");
+}
+
+function replaceSuperscript(text) {
+    return text.replace(
+        /(^|[^\w\\])([A-Za-z0-9)\]}\u4e00-\u9fa5]+)\^([^^\s][^^]*?)\^/g,
+        (match, prefix, base, value) => {
+            return `${prefix}${base}<sup>${value}</sup>`;
+        }
+    );
+}
+
+function replaceSubscript(text) {
+    return text.replace(/(^|[^\w\\])([A-Za-z0-9)\]}\u4e00-\u9fa5]+)~([^~\s][^~]*?)~/g, (match, prefix, base, value) => {
+        return `${prefix}${base}<sub>${value}</sub>`;
+    });
+}
+
+function normalizePlainMarkdown(text) {
+    return [replaceUnderline, replaceSuperscript, replaceSubscript].reduce((result, transform) => {
+        return transform(result);
+    }, text);
+}
+
+export default function normalizeMarkdownForVditor(markdown) {
+    const source = String(markdown || "");
+    if (!source) return "";
+
+    const segments = source.split(PROTECTED_SEGMENT_REGEXP);
+
+    return segments
+        .map((segment, index) => {
+            return index % 2 === 1 ? segment : normalizePlainMarkdown(segment);
+        })
+        .join("");
+}