Merge branch 'dev'

* dev:
  feat: #370 增加refreshPreviewer方法，可以强制重新渲染预览区域
  fix: 跨单元格的行内公式、行内代码语法改成不生效

src/Cherry.js

@@ -338,6 +338,19 @@ export default class Cherry extends CherryStatic {
     return this.insert(content, isSelect, anchor, focus);
   }
 
+  /**
+   * 强制重新渲染预览区域
+   */
+  refreshPreviewer() {
+    try {
+      const markdownText = this.getValue();
+      const html = this.engine.makeHtml(markdownText);
+      this.previewer.refresh(html);
+    } catch (e) {
+      throw new NestedError(e);
+    }
+  }
+
   /**
    * 覆盖编辑区的内容
    * @param {string} content markdown内容

src/Previewer.js

@@ -643,6 +643,14 @@ export default class Previewer {
     }
   }
 
+  /**
+   * 强制重新渲染预览区域
+   */
+  refresh(html) {
+    const domContainer = this.getDomContainer();
+    domContainer.innerHTML = html;
+  }
+
   update(html) {
     // 更新时保留图片懒加载逻辑
     const newHtml = this.lazyLoadImg.changeSrc2DataSrc(html);

src/core/hooks/CodeBlock.js

@@ -16,7 +16,7 @@
 import ParagraphBase from '@/core/ParagraphBase';
 import Prism from 'prismjs';
 import { escapeHTMLSpecialChar } from '@/utils/sanitize';
-import { getCodeBlockRule } from '@/utils/regexp';
+import { getTableRule, getCodeBlockRule } from '@/utils/regexp';
 import { prependLineFeedForParagraph } from '@/utils/lineFeed';
 
 Prism.manual = true;
@@ -39,6 +39,7 @@ export default class CodeBlock extends ParagraphBase {
     this.lineNumber = config.lineNumber; // 是否显示行号
     this.copyCode = config.copyCode; // 是否显示“复制”按钮
     this.indentedCodeBlock = typeof config.indentedCodeBlock === 'undefined' ? true : config.indentedCodeBlock; // 是否支持缩进代码块
+    this.INLINE_CODE_REGEX = /(`+)(.+?(?:\n.+?)*?)\1/g;
     if (config && config.customRenderer) {
       this.customLang = Object.keys(config.customRenderer).map((lang) => lang.toLowerCase());
       this.customParser = { ...config.customRenderer };
@@ -266,7 +267,7 @@ export default class CodeBlock extends ParagraphBase {
     // 预处理缩进代码块
     $str = this.$replaceCodeInIndent($str);
 
-    $str = $str.replace(this.RULE.reg, (match, leadingContent, lang, code) => {
+    $str = $str.replace(this.RULE.reg, (match, leadingContent, begin, lang, code) => {
       let $code = code;
       const { sign, lines } = this.computeLines(match, leadingContent, code);
       // 从缓存中获取html
@@ -311,12 +312,31 @@ export default class CodeBlock extends ParagraphBase {
       cacheCode = this.$codeCache(sign, cacheCode);
       return this.getCacheWithSpace(this.pushCache(cacheCode, sign, lines), match);
     });
+    // 表格里处理行内代码，让一个td里的行内代码语法生效，让跨td的行内代码语法失效
+    $str = $str.replace(getTableRule(true), (whole, ...args) => {
+      return whole
+        .split('|')
+        .map((oneTd) => {
+          return this.makeInlineCode(oneTd);
+        })
+        .join('|')
+        .replace(/`/g, '\\`');
+    });
     // 为了避免InlineCode被HtmlBlock转义，需要在这里提前缓存
     // InlineBlock只需要在afterMakeHtml还原即可
-    const INLINE_CODE_REGEX = /(`+)(.+?(?:\n.+?)*?)\1/g;
-    if (INLINE_CODE_REGEX.test($str)) {
+    $str = this.makeInlineCode($str);
+
+    // 处理缩进代码块
+    $str = this.$getIndentCodeBlock($str);
+
+    return $str;
+  }
+
+  makeInlineCode(str) {
+    let $str = str;
+    if (this.INLINE_CODE_REGEX.test($str)) {
       $str = $str.replace(/\\`/g, '~~not~inlineCode');
-      $str = $str.replace(INLINE_CODE_REGEX, (match, syntax, code) => {
+      $str = $str.replace(this.INLINE_CODE_REGEX, (match, syntax, code) => {
         if (code.trim() === '`') {
           return match;
         }
@@ -330,10 +350,6 @@ export default class CodeBlock extends ParagraphBase {
       });
       $str = $str.replace(/~~not~inlineCode/g, '\\`');
     }
-
-    // 处理缩进代码块
-    $str = this.$getIndentCodeBlock($str);
-
     return $str;
   }
 

src/core/hooks/InlineMath.js

@@ -17,7 +17,7 @@ import ParagraphBase from '@/core/ParagraphBase';
 import { escapeFormulaPunctuations, LoadMathModule } from '@/utils/mathjax';
 import { getHTML } from '@/utils/dom';
 import { isBrowser } from '@/utils/env';
-import { isLookbehindSupported } from '@/utils/regexp';
+import { getTableRule, isLookbehindSupported } from '@/utils/regexp';
 import { replaceLookbehind } from '@/utils/lookbehind-replace';
 
 /**
@@ -67,6 +67,21 @@ export default class InlineMath extends ParagraphBase {
   }
 
   beforeMakeHtml(str) {
+    let $str = str;
+    // 格里处理行内公式，让一个td里的行内公式语法生效，让跨td的行内公式语法失效
+    $str = $str.replace(getTableRule(true), (whole, ...args) => {
+      return whole
+        .split('|')
+        .map((oneTd) => {
+          return this.makeInlineMath(oneTd);
+        })
+        .join('|')
+        .replace(/~D/g, '\\~D');
+    });
+    return this.makeInlineMath($str);
+  }
+
+  makeInlineMath(str) {
     if (!this.test(str)) {
       return str;
     }

src/utils/regexp.js

@@ -159,10 +159,11 @@ export function getCodeBlockRule() {
      * (?:^|\n)是区块的通用开头
      * (\n*)捕获区块前的所有换行
      * (?:[^\S\n]*)捕获```前置的空格字符
+     * 只要有连续3个及以上`并且前后`的数量相等，则认为是代码快语法
      */
-    begin: /(?:^|\n)(\n*(?:[^\S\n]*))```([^`]*?)\n/,
+    begin: /(?:^|\n)(\n*(?:[^\S\n]*))(`{3,})([^`]*?)\n/,
     content: /([\w\W]*?)/, // '([\\w\\W]*?)',
-    end: /[^\S\n]*```[ \t]*(?=$|\n+)/, // '\\s*```[ \\t]*(?=$|\\n+)',
+    end: /[^\S\n]*\2[ \t]*(?=$|\n+)/, // '\\s*```[ \\t]*(?=$|\\n+)',
   };
   codeBlock.reg = new RegExp(codeBlock.begin.source + codeBlock.content.source + codeBlock.end.source, 'g');
   return codeBlock;