feat: #1549 流式渲染场景，优化代码块自动闭合的时机并优化行内公式在表格里也可以自动闭合 (#1640)

* feat: #1549 流式渲染场景，优化代码块自动闭合的时机并优化行内公式在表格里也可以自动闭合

* fix: 更新测试用例

Author: sunsonliu

.changeset/cool-rooms-drum.md

@@ -0,0 +1,5 @@
+---
+'cherry-markdown': patch
+---
+
+feat: #1549 流式渲染场景，优化代码块自动闭合的时机并优化行内公式在表格里也可以自动闭合

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

@@ -390,7 +390,13 @@ export default class CodeBlock extends ParagraphBase {
     if ($codes.length % 2 === 1) {
       const lastCode = $codes[$codes.length - 1].replace(/(`)[^`]+$/, '$1').replace(/\n+/, '');
       const $str = str.replace(/\n+$/, '').replace(/\n`{1,2}$/, '');
-      return `${$str}\n${lastCode}\n`;
+      return (
+        `${$str}\n${lastCode}\n`
+          // 如果自动闭合后代码块为空，则删除代码块
+          .replace(/\n`{3,}[^`\n]*\n\s*`{3,}\n$/g, '\n')
+          // 如果自动闭合的是mermaid图，则再判断第二行以后的内容是否为空，如果为空，则删除代码块
+          .replace(/\n`{3,}\s*mermaid\s*\n[^\n]+\n\s*`{3,}\n$/g, '\n')
+      );
     }
     return str;
   }

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

@@ -36,6 +36,11 @@ export default class InlineMath extends ParagraphBase {
     // 非浏览器环境下配置为 node
     this.engine = isBrowser() ? (config.engine ?? 'MathJax') : 'node';
     this.$cherry = cherry;
+    /**
+     * 这里本意是用来存储「上一轮」成功渲染里的最后一个公式
+     * 但因为偷懒，存的是「上一次」成功渲染里的公式，所以这里有个大大的「TODO」
+     * 同时，mermaid渲染那里也有同样的问题，也有个大大的「TODO」
+     */
     this.lastCode = '';
   }
 
@@ -105,17 +110,27 @@ export default class InlineMath extends ParagraphBase {
     let $str = str;
     // 格里处理行内公式，让一个td里的行内公式语法生效，让跨td的行内公式语法失效
     $str = $str.replace(getTableRule(true), (whole, ...args) => {
-      return whole
-        .split('|')
-        .map((oneTd) => {
+      const arr = whole.split('|');
+      return arr
+        .map((oneTd, index) => {
           // 单元格里的段落公式直接替换成行内公式
-          return this.makeInlineMath(this.transformBlockMathToInlineMath(oneTd));
+          const tdContent = this.transformBlockMathToInlineMath(oneTd);
+          // 判断是否为最后一个td
+          if (index === arr.length - 1) {
+            return this.makeInlineMathWithSelfClosing(tdContent);
+          }
+          return this.makeInlineMath(tdContent);
         })
         .join('|')
         .replace(/\\~D/g, '~D') // 出现反斜杠的情况（如/$e=m^2$）会导致多一个反斜杠，这里替换掉
         .replace(/~D/g, '\\~D');
     });
-    $str = this.makeInlineMath($str);
+    $str = this.makeInlineMathWithSelfClosing($str);
+    return $str;
+  }
+
+  makeInlineMathWithSelfClosing(str) {
+    let $str = this.makeInlineMath(str);
     if (this.isSelfClosing()) {
       const $oldStr = $str;
       $str = this.$dealUnclosingMath($str);

packages/cherry-markdown/test/core/__snapshots__/CommonMark.spec.ts.snap

@@ -787,21 +787,9 @@ exports[`engine > CommonMark-123 1`] = `
 `;
 
 exports[`engine > CommonMark-124 1`] = `
-"<div
-        data-sign="aed8acd0d907b2d4e168f20021dfa9ae1a8574319b7e6048909ee71173b0f5cd"
-        data-type="codeBlock"
-        data-lines="4" 
-        data-edit-code="true" 
-        data-copy-code="true"
-        data-expand-code="false"
-        data-change-lang="true"
-        data-lang="javascript"
-        style="position:relative"
-        class="cherry-code-expand"
-      >
-      <pre class="language-javascript"><code class="language-javascript"><span class="code-line">aaa</span>
-<span class="code-line"><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token template-punctuation string">\`</span></span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string"></span></span></span></code></pre>
-      </div><p data-sign="341bc3f1b434f6d1f5d0fa7347d3a70f754a52ce92292c4ab0dad22cb0d3c32a1" data-type="p" data-lines="1">\`\`\`\`\`\`</p>
+"<p data-sign="5356c3c275167a75447833ddc8dde1b582e561bad07d6c5c8a1e3774cbfa516b1" data-type="p" data-lines="1"><code>\`\`
+aaa
+\`</code></p>
 "
 `;
 
@@ -1100,20 +1088,8 @@ exports[`engine > CommonMark-146 1`] = `
 `;
 
 exports[`engine > CommonMark-147 1`] = `
-"<div
-        data-sign="f11be2dd92768aa5923aefaa736e14e2231f747463c161ab8fd07e682bb6646a"
-        data-type="codeBlock"
-        data-lines="3" 
-        data-edit-code="true" 
-        data-copy-code="true"
-        data-expand-code="false"
-        data-change-lang="true"
-        data-lang="javascript"
-        style="position:relative"
-        class="cherry-code-expand"
-      >
-      <pre class="language-javascript"><code class="language-javascript"><span class="code-line"><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token template-punctuation string">\`</span></span>\` aaa</span></code></pre>
-      </div><p data-sign="f1b901847390b0ed7e374e7c1e464ec17b46a427c487a5ad6cbd2906405083d51" data-type="p" data-lines="1">\`\`\`</p>
+"<p data-sign="8c8ee4db3a5455cfc767d4d904b8c89599b0a497c0951aa221b95327f03346b41" data-type="p" data-lines="1"><code>\`
+\`</code> aaa</p>
 "
 `;