From 30a54dd2f35e08d17a98261061495b3b1a509c34 Mon Sep 17 00:00:00 2001
From: zbf <zbfcqtl@gmail.com>
Date: Tue, 21 May 2024 14:45:52 +0800
Subject: [PATCH] refactor: standardized attribute rendering approach

---
 package.json                                  |  2 +-
 .../Content/markdownIt/admonition/index.ts    |  1 -
 .../layouts/Content/markdownIt/code/index.ts  | 27 ++++------
 .../Content/markdownIt/heading/index.ts       |  1 -
 .../layouts/Content/markdownIt/katex/index.ts | 50 ++++++++++++-------
 packages/MdEditor/utils/markdown-it.ts        | 17 +++++++
 yarn.lock                                     |  8 +--
 7 files changed, 62 insertions(+), 44 deletions(-)
 create mode 100644 packages/MdEditor/utils/markdown-it.ts

diff --git a/package.json b/package.json
index 28985a53..b8c260e9 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@codemirror/lang-markdown": "^6.2.5",
     "@codemirror/language-data": "^6.5.1",
     "@types/markdown-it": "^14.0.1",
-    "@vavt/util": "^1.5.1",
+    "@vavt/util": "^1.6.2",
     "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.3",
     "lru-cache": "^10.2.0",
diff --git a/packages/MdEditor/layouts/Content/markdownIt/admonition/index.ts b/packages/MdEditor/layouts/Content/markdownIt/admonition/index.ts
index bddc4d34..86746d07 100644
--- a/packages/MdEditor/layouts/Content/markdownIt/admonition/index.ts
+++ b/packages/MdEditor/layouts/Content/markdownIt/admonition/index.ts
@@ -29,7 +29,6 @@ const AdmonitionPlugin = (md: markdownit, options: AdmonitionPluginOps) => {
         'class',
         `${prefix}-admonition ${prefix}-admonition-${token.info}`
       ]);
-      tokens[idx].attrSet('data-line', String(tokens[idx].map![0]));
     } else if (token.type === 'admonition_title_open') {
       tokens[idx].attrPush(['class', `${prefix}-admonition-title`]);
     }
diff --git a/packages/MdEditor/layouts/Content/markdownIt/code/index.ts b/packages/MdEditor/layouts/Content/markdownIt/code/index.ts
index f114a33a..db7d5afe 100644
--- a/packages/MdEditor/layouts/Content/markdownIt/code/index.ts
+++ b/packages/MdEditor/layouts/Content/markdownIt/code/index.ts
@@ -10,6 +10,7 @@ import markdownit, { Renderer, Token } from 'markdown-it';
 import { Ref } from 'vue';
 import { StaticTextDefaultValue } from '~/type';
 import { prefix } from '~/config';
+import { mergeAttrs } from '~/utils/markdown-it';
 
 export interface CodeTabsPluginOps extends markdownit.Options {
   editorId: string;
@@ -18,22 +19,6 @@ export interface CodeTabsPluginOps extends markdownit.Options {
   autoFoldThreshold: number;
 }
 
-const mergeAttrs = (token: Token, open: boolean) => {
-  const i = token.attrIndex('class');
-  const tmpAttrs = token.attrs ? token.attrs!.slice() : [];
-
-  if (i < 0) {
-    tmpAttrs.push(['class', `${prefix}-code`]);
-  } else {
-    tmpAttrs[i] = tmpAttrs[i].slice() as [string, string];
-    tmpAttrs[i][1] += ` ${prefix}-code"`;
-  }
-
-  open && tmpAttrs.push(['open', '']);
-
-  return tmpAttrs;
-};
-
 const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
   const defaultRender = md.renderer.rules.fence,
     unescapeAll = md.utils.unescapeAll,
@@ -77,8 +62,11 @@ const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
     const [GROUP] = getGroupAndTab(tokens[idx]);
     if (GROUP === null) {
       const { open, tagContainer, tagHeader } = getTagType(tokens[idx]);
+      const addAttrs: [[string, string]] = [['class', `${prefix}-code`]];
+      open && addAttrs.push(['open', '']);
+
       const tmpToken = {
-        attrs: mergeAttrs(tokens[idx], open)
+        attrs: mergeAttrs(tokens[idx], addAttrs)
       };
 
       const codeRendered = defaultRender!(tokens, idx, options, env, slf);
@@ -105,8 +93,11 @@ const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
       langs = '';
 
     const { open, tagContainer, tagHeader } = getTagType(tokens[idx]);
+    const addAttrs: [[string, string]] = [['class', `${prefix}-code`]];
+    open && addAttrs.push(['open', '']);
+
     const tmpToken = {
-      attrs: mergeAttrs(tokens[idx], open)
+      attrs: mergeAttrs(tokens[idx], addAttrs)
     };
 
     for (let i = idx; i < tokens.length; i++) {
diff --git a/packages/MdEditor/layouts/Content/markdownIt/heading/index.ts b/packages/MdEditor/layouts/Content/markdownIt/heading/index.ts
index 8a1dc1bc..e0a13a98 100644
--- a/packages/MdEditor/layouts/Content/markdownIt/heading/index.ts
+++ b/packages/MdEditor/layouts/Content/markdownIt/heading/index.ts
@@ -24,7 +24,6 @@ const HeadingPlugin = (md: markdownit, options: HeadingPluginOps) => {
     });
 
     if (token.map && token.level === 0) {
-      token.attrSet('data-line', String(token.map![0]));
       token.attrSet(
         'id',
         options.mdHeadingId(text, level, options.headsRef.value.length)
diff --git a/packages/MdEditor/layouts/Content/markdownIt/katex/index.ts b/packages/MdEditor/layouts/Content/markdownIt/katex/index.ts
index 8363cd99..e69691e7 100644
--- a/packages/MdEditor/layouts/Content/markdownIt/katex/index.ts
+++ b/packages/MdEditor/layouts/Content/markdownIt/katex/index.ts
@@ -4,8 +4,15 @@
  * 该代码只是正对md-editor-v3系列功能做了适配
  */
 import { ShallowRef } from 'vue';
-import markdownit, { ParserBlock, ParserInline, StateInline } from 'markdown-it';
+import markdownit, {
+  ParserBlock,
+  ParserInline,
+  Renderer,
+  StateInline,
+  Token
+} from 'markdown-it';
 import { prefix } from '~/config';
+import { mergeAttrs } from '~/utils/markdown-it';
 
 // Test if potential opening or closing delimieter
 // Assumes that there is a "$" at state.src[pos]
@@ -174,30 +181,40 @@ const math_block: ParserBlock.RuleBlock = (state, start, end, silent) => {
   return true;
 };
 
-const KatexPlugin = (md: markdownit, options: { katexRef: ShallowRef }) => {
+const KatexPlugin = (md: markdownit, { katexRef }: { katexRef: ShallowRef }) => {
   // set KaTeX as the renderer for markdown-it-simplemath
-  const katexInline = (str: string) => {
-    if (options.katexRef.value) {
-      const html = options.katexRef.value.renderToString(str, {
+  const katexInline: Renderer.RenderRule = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx];
+    const tmpToken = {
+      attrs: mergeAttrs(token, [['class', `${prefix}-katex-inline`]])
+    };
+
+    if (katexRef.value) {
+      const html = katexRef.value.renderToString(token.content, {
         throwOnError: false
       });
 
-      return `<span class="${prefix}-katex-inline" data-processed>${html}</span>`;
+      return `<span ${slf.renderAttrs(tmpToken as Token)} data-processed>${html}</span>`;
     } else {
-      return `<span class="${prefix}-katex-inline">${str}</span>`;
+      return `<span ${slf.renderAttrs(tmpToken as Token)}>${token.content}</span>`;
     }
   };
 
-  const katexBlock = (str: string, lineNum: number) => {
-    if (options.katexRef.value) {
-      const html = options.katexRef.value.renderToString(str, {
+  const katexBlock: Renderer.RenderRule = (tokens, idx, options, env, slf) => {
+    const token = tokens[idx];
+    const tmpToken = {
+      attrs: mergeAttrs(token, [['class', `${prefix}-katex-block`]])
+    };
+
+    if (katexRef.value) {
+      const html = katexRef.value.renderToString(token.content, {
         throwOnError: false,
         displayMode: true
       });
 
-      return `<p class="${prefix}-katex-block" data-line=${lineNum} data-processed>${html}</p>`;
+      return `<p ${slf.renderAttrs(tmpToken as Token)} data-processed>${html}</p>`;
     } else {
-      return `<p class="${prefix}-katex-block" data-line=${lineNum}>${str}</p>`;
+      return `<p ${slf.renderAttrs(tmpToken as Token)}>${token.content}</p>`;
     }
   };
 
@@ -206,13 +223,8 @@ const KatexPlugin = (md: markdownit, options: { katexRef: ShallowRef }) => {
     alt: ['paragraph', 'reference', 'blockquote', 'list']
   });
 
-  md.renderer.rules.math_inline = (tokens, idx) => {
-    return katexInline(tokens[idx].content);
-  };
-
-  md.renderer.rules.math_block = (tokens, idx) => {
-    return katexBlock(tokens[idx].content, tokens[idx].map![0]) + '\n';
-  };
+  md.renderer.rules.math_inline = katexInline;
+  md.renderer.rules.math_block = katexBlock;
 };
 
 export default KatexPlugin;
diff --git a/packages/MdEditor/utils/markdown-it.ts b/packages/MdEditor/utils/markdown-it.ts
new file mode 100644
index 00000000..91ebce08
--- /dev/null
+++ b/packages/MdEditor/utils/markdown-it.ts
@@ -0,0 +1,17 @@
+import { Token } from 'markdown-it';
+
+export const mergeAttrs = (token: Token, addAttrs: [string, string][]) => {
+  const tmpAttrs = token.attrs ? token.attrs!.slice() : [];
+
+  addAttrs.forEach((addAttr) => {
+    const i = token.attrIndex(addAttr[0]);
+    if (i < 0) {
+      tmpAttrs.push(addAttr);
+    } else {
+      tmpAttrs[i] = tmpAttrs[i].slice() as [string, string];
+      tmpAttrs[i][1] += ` ${addAttr[1]}`;
+    }
+  });
+
+  return tmpAttrs;
+};
diff --git a/yarn.lock b/yarn.lock
index 9c9a6d1d..ae24dd1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1478,10 +1478,10 @@
   resolved "https://registry.npmjs.org/@vavt/markdown-theme/-/markdown-theme-4.0.1.tgz#c0d15160df0cd2c7fc2c6900b562daa6c862faec"
   integrity sha512-wxIczllsg/xynSWegQR6HgrOFdI+rRHcAvCgYobnQTYddtqakxsOb92XZo+XGgFidxsDqDFD/GhfevlGwZW03A==
 
-"@vavt/util@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.npmjs.org/@vavt/util/-/util-1.5.1.tgz#e75b1e26571453037384585acedd2eba70f42780"
-  integrity sha512-/q/ilzRwZZJlnDAl6DGZ8pinOSAjR91dcck79bi1ujrqYlPaFVHnbmkDeGPuLub6A821rXvtPXVRXULrfMN03Q==
+"@vavt/util@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.npmjs.org/@vavt/util/-/util-1.6.2.tgz#e80ef1a5761c4b90c9585d5370146edcc77c658d"
+  integrity sha512-YSurh9awM1Xax5qgSkKbZZQZxC5bBTlqOq+YLQ2GqexKN87iz40IOq4cdTD7n63rIjT3fQH/GZmMpRJxwNev2w==
 
 "@vavt/vite-plugin-import-markdown@^1.0.0":
   version "1.0.1"