feat: 增加对<details>标签的支持 #1902

.changeset/quiet-actors-turn.md

@@ -0,0 +1,5 @@
+---
+'cherry-markdown': patch
+---
+
+feat: 增加对<details>标签的支持

packages/cherry-markdown/src/core/hooks/Detail.js

@@ -15,7 +15,7 @@
  */
 import ParagraphBase from '@/core/ParagraphBase';
 import { prependLineFeedForParagraph } from '@/utils/lineFeed';
-import { getDetailRule } from '@/utils/regexp';
+import { getDetailRule, getDetailHtmlRule } from '@/utils/regexp';
 import { blockNames } from '@/utils/sanitize';
 
 /**
@@ -36,27 +36,31 @@ export default class Detail extends ParagraphBase {
   }
 
   makeHtml(str, sentenceMakeFunc) {
-    return str.replace(this.RULE.reg, (match, preLines, isOpen, title, content) => {
-      const lineCount = this.getLineCount(match, preLines);
-      const sign = this.$engine.hash(match);
-      const testHasCache = this.testHasCache(sign);
-      if (testHasCache !== false) {
-        return prependLineFeedForParagraph(match, testHasCache);
-      }
-      const { type, html } = this.$getDetailInfo(isOpen, title, content, sentenceMakeFunc);
-      const ret = this.pushCache(
-        `<div class="cherry-detail cherry-detail__${type}" data-sign="${sign}" data-lines="${lineCount}" >${html}</div>`,
-        sign,
-        lineCount,
-      );
-      return prependLineFeedForParagraph(match, ret);
-    });
+    this.sentenceMakeFunc = sentenceMakeFunc;
+    str = str.replace(this.RULE.reg, this.$makeHtml.bind(this));
+    return str.replace(getDetailHtmlRule(), this.$makeHtml.bind(this));
+  }
+
+  $makeHtml(match, preLines, isOpen, title, content) {
+    const lineCount = this.getLineCount(match, preLines);
+    const sign = this.$engine.hash(match);
+    const testHasCache = this.testHasCache(sign);
+    if (testHasCache !== false) {
+      return prependLineFeedForParagraph(match, testHasCache);
+    }
+    const { type, html } = this.$getDetailInfo(isOpen, title, content, this.sentenceMakeFunc);
+    const ret = this.pushCache(
+      `<div class="cherry-detail cherry-detail__${type}" data-sign="${sign}" data-lines="${lineCount}" >${html}</div>`,
+      sign,
+      lineCount,
+    );
+    return prependLineFeedForParagraph(match, ret);
   }
 
   $getDetailInfo(isOpen, title, str, sentenceMakeFunc) {
     const type = /\n\s*(\+\+|\+\+-)\s*[^\n]+\n/.test(str) ? 'multiple' : 'single';
     const arr = str.split(/\n\s*(\+\+[-]{0,1}\s*[^\n]+)\n/);
-    let defaultOpen = isOpen === '-';
+    let defaultOpen = /(-|open)/.test(isOpen);
     let currentTitle = title;
     let html = '';
     if (type === 'multiple') {

packages/cherry-markdown/src/utils/regexp.js

@@ -267,6 +267,20 @@ export function getDetailRule() {
   return ret;
 }
 
+/**
+ * detail Html标签语法的识别正则
+ * 例：
+ * <details open>
+ *   <summary>标题</summary>
+ *   内容
+ * </details>
+ * @returns {object}
+ */
+export function getDetailHtmlRule() {
+  const reg = /(?:^|\n)(\n*(?:[^\S\n]*))<details[ ]*(open)?>[\s]*<summary>([\w\W]*?)<\/summary>([\w\W]+?)<\/details>/g;
+  return reg;
+}
+
 // 匹配图片URL里的base64，[name](data:image/png;base64,xxx) 和 ![alt](data:image/png;base64,xxx) 这两种形式的都处理
 export const imgBase64Reg = /(\[[^\n]*?\]\(data:image\/[a-z]{1,10};base64,)([^)]+)\)/g;