fix: 列表内的行内语法污染了列表 Fixed #40 (#41)

Co-authored-by: sunsonliu <sunsonliu@tencent.com>
Tencent · Dec 6, 2021 · d7546b8 · d7546b8
1 parent e21895b
commit d7546b8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 54 deletions.
diff --git a/src/core/HooksConfig.js b/src/core/HooksConfig.js
@@ -38,7 +38,6 @@ import Blockquote from './hooks/Blockquote';
 import AutoLink from './hooks/AutoLink';
 import MathBlock from './hooks/MathBlock';
 import InlineMath from './hooks/InlineMath';
-import CheckList from './hooks/CheckList';
 import Toc from './hooks/Toc';
 import Footnote from './hooks/Footnote';
 import CommentReference from './hooks/CommentReference';
@@ -64,7 +63,6 @@ const hooksConfig = [
   CommentReference,
   Transfer,
   Br,
-  CheckList,
   Table,
   Blockquote,
   Toc,

diff --git a/src/core/hooks/CheckList.js b/src/core/hooks/CheckList.js
diff --git a/src/core/hooks/List.js b/src/core/hooks/List.js
@@ -33,6 +33,15 @@ function classNamesToAttributeString(array) {
   return '';
 }
 
+function makeChecklist(text) {
+  return text.replace(/([*+-]\s+)\[(\s|x)\]/g, (whole, pre, test) => {
+    const checkHtml = /\s/.test(test)
+      ? '<span class="ch-icon ch-icon-square"></span>'
+      : '<span class="ch-icon ch-icon-check"></span>';
+    return `${pre}${checkHtml}`;
+  });
+}
+
 export default class List extends ParagraphBase {
   static HOOK_NAME = 'list';
 
@@ -62,8 +71,8 @@ export default class List extends ParagraphBase {
   }
 
   $wrapList(text, dataLines, sentenceMakeFunc) {
-    const { sign: contentSign, html } = sentenceMakeFunc(text);
-    const sign = this.signWithCache(html) || contentSign;
+    const sign = this.$engine.md5(text);
+    const html = makeChecklist(text);
     const items = html.split('\n');
     // 列表结尾换行符个数
     const endLineFlagLength = html.match(/\n*$/g)[0].length;
@@ -128,21 +137,22 @@ export default class List extends ParagraphBase {
     // 内容处理
     const listStack = [null]; // 列表类型栈
     items.forEach((item, index) => {
+      const { html: itemWithHtml } = sentenceMakeFunc(item);
       // 数组越界，跳过
       if (index < 1) {
         return;
       }
 
       // 无类型列表单独处理，不入栈
       if (types[index] === 'blank') {
-        handledHtml += `<br>${item}`;
+        handledHtml += `<br>${itemWithHtml}`;
         return;
       }
 
       const itemClassNames = [];
       const blockAttrs = {};
       // checklist 判断
-      if (checklistRegex.test(item)) {
+      if (checklistRegex.test(itemWithHtml)) {
         itemClassNames.push('check-list-item');
       }
 
@@ -160,7 +170,7 @@ export default class List extends ParagraphBase {
           blockAttrs.start = `${starts[index]}`;
         }
         listStack.unshift(types[index]); // 有序、无序列表入栈
-        handledHtml += `<${types[index]}${attrsToAttributeString(blockAttrs)}>${newListItemStartTag}${item}`;
+        handledHtml += `<${types[index]}${attrsToAttributeString(blockAttrs)}>${newListItemStartTag}${itemWithHtml}`;
       } else if (indents[index] <= indents[index - 1]) {
         // 缩进减少，列表项闭合
         // delta表示需要出栈的次数
@@ -197,7 +207,7 @@ export default class List extends ParagraphBase {
         } else {
           handledHtml += `</li>${newListItemStartTag}`;
         }
-        handledHtml += item;
+        handledHtml += itemWithHtml;
       }
     });