ci:merge

Author: iRuxu

.github/workflows/npmpkg.yaml

@@ -1,9 +1,10 @@
 name: Publish NPM Package
 
-on:
-    push:
-        branches:
-            - master
+on: [push]
+# on:
+#     push:
+#         branches:
+#             - master
 
 jobs:
     build:

package-lock.json

@@ -34,34 +34,3 @@ <h6>NPC</h6>
 <p><a class="e-jx3-npc w-jx3-element" href="https://www.jx3box.com/app/database/?type=npc&amp;query=69700&amp;level=" target="_blank" rel="noopener" data-type="npc" data-mode="" data-id="69700" data-client="std">[追捧者头子]</a></p>
 
 
-<div class="e-pz-iframe"><iframe style="border:none;background:none;max-width:100%;overflow:hidden;" src="https://www.jx3box.com/pz/iframe.html?id=70" width="1280" height="720" frameborder="0"></iframe></div>
-
-<a class="e-jx3-buff w-jx3-element isBuff" href="https://origin.jx3box.com/app/database/?type=buff&amp;query=124&amp;level=1" data-type="buff" data-client="origin" data-id="124" data-level="1">[花语酥心]</a>
-
-<br />
-
-<a class="e-jx3-buff w-jx3-element isDebuff" href="https://www.jx3box.com/app/database/?type=buff&amp;query=1267&amp;level=0" data-type="buff" data-client="std" data-id="1267" data-level="0">[虫蛊・销魂]</a>
-
-<br />
-
-<a class="e-jx3-skill w-jx3-element" href="https://www.jx3box.com/app/database/?type=skill&amp;query=551&amp;level=0" data-type="skill" data-client="std" data-id="551" data-level="0">[心鼓弦]</a>
-
-<br />
-
-<a class="e-jx3-item e-jx3-item-q3 w-jx3-element" href="https://www.jx3box.com/item/#/view/5_10428" target="_blank" rel="noopener" data-type="item" data-mode="" data-id="5_10428" data-quality="3" data-client="std">[幽月凝光]</a>
-
-<pre class="e-jx3-resource"><span class="u-id">ID:551</span>
-  <img class="u-pic" title="IconID:898" src="https://img.jx3box.com/icon/898.png" />
-  <span class="u-name">心鼓弦</span>
-  <span class="u-desc">救治一个重伤的友方目标，可在战斗中使用。</span>
-</pre>
-
-<hr />
-
-<p>#TT哭泣</p>
-
-<a data-type="emotion" class="e-jx3-emotion w-jx3-element" data-id="940" target="_blank" href="/emotion/940">
-  <img class="e-jx3-emotion-img" data-type="emotion" data-id="940" style="width:80px;" src="https://img.jx3box.com/upload/post/2022/6/10/76986_7373574.gif" alt="940" />
-</a>
-
-

public/demo/article_jx3.html

@@ -7,13 +7,6 @@ <h4>圈人</h4>
   <a class="e-jx3-author w-jx3-element" href="/author/8" target="_blank" rel="noopener" data-type="author" data-mode="" data-id="8">@浮烟</a>
 </p>
 
-<p>
-  文件下载链接：
-  <a href="https://cdn.jx3box.com/2020/01/%E5%87%8C%E9%9B%AA%E9%98%81%E8%AE%A1%E7%AE%97%E5%99%A83.2%EF%BC%88%E6%9B%B4%E6%96%B0%E5%A4%A7%E9%99%84%E9%AD%94%EF%BC%89.xlsx">
-    凌雪阁计算器（xlsx）
-  </a>
-</p>
-
 
 <h4>播放器</h4>
 <pre class="w-audio e-audio">name|飞舞;author|醉栩;user_id|8719;src|https://cdn.jx3box.com/design/event/jx3cxk/web/item/luolebai.mp3;avatar|https://oss.jx3box.com/upload/avatar/2022/12/11/8719_8836198.jpg</pre>
@@ -43,97 +36,3 @@ <h4>信纸</h4>
 </div>
 <style>.letter--yueye{max-width: 1240px;margin:0 auto;color:#fff;font-size:18px;}.letter-title--yueye{background:url("https://cdn.jx3box.com/upload/design/letter/2023/11/27/4011_8157448.png") no-repeat top;text-align:center;background-size: 100% 100%;height: 75px;width: 320px;font-weight: bold;line-height: 75px;font-size: 24px;letter-spacing: 2px;box-sizing: border-box;margin: 0 auto;padding: 0 20px;margin-bottom: 20px;word-wrap: normal;word-break: keep-all;text-overflow: ellipsis;overflow: hidden;}.letter-body--yueye{background:url("https://cdn.jx3box.com/upload/design/letter/2023/11/29/4011_9334649.png");background-size: 100%;line-height: 36px;}.letter-body--yueye p{margin: 0;line-height: 36px;}.letter-header--yueye{background:url("https://cdn.jx3box.com/upload/design/letter/2023/11/29/4011_6979374.png") top center no-repeat;background-size: 100%;padding-top:50px;}.letter-footer--yueye{background:url("https://cdn.jx3box.com/upload/design/letter/2023/11/29/4011_7953837.png") bottom center  no-repeat;background-size: 100%;padding:0 4% 50px 4%;min-height:100px;}</style>
 <p>&nbsp;</p>
-
-<template>
-	<div class="c-letter-paper">
-		<div
-			:class="`c-letter-title c-letter-title__${data.slug}`"
-			:style="{
-				backgroundImage: `url(${data.img_title || ''})`,
-				backgroundRepeat: 'no-repeat',
-				backgroundSize: 'cover',
-			}"
-		>
-			我是抬头
-		</div>
-		<div
-			:class="`c-letter-content c-letter-content__${data.slug}`"
-			:style="{
-				backgroundImage: `url(${data.img_body || ''})`,
-			}"
-		>
-			<div
-				class="u-header"
-				:style="{
-					backgroundImage: `url(${data.img_header || ''})`,
-					backgroundRepeat: 'no-repeat',
-					backgroundPosition: 'top center',
-				}"
-			>
-				<div
-					class="u-footer"
-					:style="{
-						backgroundImage: `url(${data.img_footer || ''})`,
-						backgroundRepeat: 'no-repeat',
-						backgroundPosition: 'bottom center',
-					}"
-				>
-					<p v-for="o in 4" :key="o">明月几时有，把酒问青天。</p>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: "letter-demo",
-	props: {
-		data: {
-			type: Object,
-			default: () => {},
-		},
-	},
-	data() {
-		return {
-			styleTag: null,
-		};
-	},
-	watch: {
-		"data.style": {
-			immediate: true,
-			handler(val) {
-				this.insertStyle(val);
-			},
-		},
-	},
-	methods: {
-		insertStyle(style) {
-			if (this.styleTag) {
-				document.body.removeChild(this.styleTag);
-			}
-			this.styleTag = document.createElement("style");
-			this.styleTag.textContent = style;
-			document.body.appendChild(this.styleTag);
-		},
-	},
-};
-</script>
-<style lang="less">
-.c-letter-title {
-	background-size: cover;
-}
-.c-letter-content {
-	margin-top: 20px;
-	background-repeat: repeat-y;
-	background-size: contain;
-}
-.c-letter-content .u-header,
-.c-letter-content .u-footer {
-	background-size: contain;
-	background-repeat: no-repeat;
-}
-.c-letter-content .u-footer {
-	background-position: bottom;
-}
-</style>

public/demo/article_jx3box.html

@@ -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",
             });

src/Article.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;

src/Markdown.vue

@@ -133,13 +133,14 @@
                 .y(-3px);
             }
         }
-        .u-medals {
+        .m-medals {
             padding: 0 2px;
             line-height: unset;
 
             .m-medal {
                 line-height: normal;
                 flex-wrap: wrap;
+                .flex;
             }
         }
 

src/assets/css/module/author.less

@@ -90,6 +90,8 @@
         line-height: 18px;
         color: darken(#dcdfe6, 5%);
         cursor: pointer;
+        .flex;
+        align-items: center;
         &:hover {
             color: darken(#dcdfe6, 20%);
         }

src/assets/css/module/directory.less

@@ -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("");
+}

src/assets/js/normalizeMarkdownForVditor.js

@@ -43,7 +43,7 @@
             </div>
             <!-- <div class="u-honor" :style="honorStyle" v-if="honor">{{ honor }}</div> -->
             <div class="u-trophy" v-if="hasTrophy">
-                <div class="u-medals" v-if="medals && medals.length">
+                <div class="m-medals" v-if="medals && medals.length">
                     <div class="m-medal">
                         <a
                             v-for="item in medals"