fix: image syntax compatibility (#1555)

* fix(ref): fix use reference after empty alt text

* fix(cache): fix broken data uri after bigdata restored

* fix(checkbox): fix incorrect checkbox replacement from click

* fix(url): fix empty url not restored

* chore: update snapshot

* chore: update yarn lock

* chore: add changeset

Addresses image syntax issues and resolves bug #1554.

---------

Co-authored-by: 阿菜 Cai <[email protected]>

Author: lyngai

.changeset/tiny-items-scream.md

@@ -0,0 +1,5 @@
+---
+"cherry-markdown": patch
+---
+
+fix: image syntax compatibility, Fixes #1554

packages/cherry-markdown/src/Engine.js

@@ -19,7 +19,7 @@ import NestedError, { $expectTarget, $expectInherit, $expectInstance } from './u
 import CryptoJS from 'crypto-js';
 import SyntaxBase from './core/SyntaxBase';
 import ParagraphBase from './core/ParagraphBase';
-import { PUNCTUATION, longTextReg, imgBase64Reg, imgDrawioXmlReg } from './utils/regexp';
+import { PUNCTUATION, longTextReg, imgBase64Reg, imgDrawioXmlReg, base64Reg } from './utils/regexp';
 import { escapeHTMLSpecialChar } from './utils/sanitize';
 import Logger from './Logger';
 import { configureMathJax } from './utils/mathjax';
@@ -343,7 +343,12 @@ export default class Engine {
 
   // 缓存大文本数据，用以提升渲染性能
   $cacheBigData(md) {
-    let $md = md.replace(imgBase64Reg, (whole, m1, m2) => {
+    let $md = md.replace(base64Reg, (dataUri) => {
+      const cacheKey = `data:cherry/cache;sha256,${this.hash(dataUri)}`;
+      this.cachedBigData[cacheKey] = dataUri;
+      return cacheKey;
+    });
+    $md = $md.replace(imgBase64Reg, (whole, m1, m2) => {
       const cacheKey = `bigDataBegin${this.hash(m2)}bigDataEnd`;
       this.cachedBigData[cacheKey] = m2;
       return `${m1}${cacheKey})`;
@@ -361,10 +366,17 @@ export default class Engine {
     return $md;
   }
 
+  /**
+   * @param {string} md
+   */
   $deCacheBigData(md) {
-    return md.replace(/bigDataBegin[^\n]+?bigDataEnd/g, (whole) => {
-      return this.cachedBigData[whole];
-    });
+    return md
+      .replace(/data:cherry\/cache;sha256,[0-9a-f]+/g, (cacheUri) => {
+        return this.cachedBigData[cacheUri];
+      })
+      .replace(/bigDataBegin[^\n]+?bigDataEnd/g, (whole) => {
+        return this.cachedBigData[whole];
+      });
   }
 
   /**

packages/cherry-markdown/src/UrlCache.js

@@ -84,7 +84,7 @@ export default class UrlCache {
     const cherryInnerLinkRegex = /cherry-inner:\/\/([0-9a-f]+)/gi;
     const $html = html.replace(cherryInnerLinkRegex, (match) => {
       const originalUrl = UrlCache.get(match);
-      return originalUrl || match;
+      return typeof originalUrl === 'string' ? originalUrl : match;
     });
     return $html;
   }

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

@@ -38,16 +38,38 @@ export default class CommentReference extends ParagraphBase {
     this.commentCache = {};
   }
 
+  /**
+   * 去除包裹 url 的尖括号
+   * @param {string} wrappedUrl
+   */
+  unwrapUrl(wrappedUrl) {
+    const url = wrappedUrl.trim();
+    // 原始的尖括号
+    if (url.startsWith('<') && url.endsWith('>')) {
+      return url.slice(1, -1);
+    }
+    // 被转义保护的尖括号
+    if (url.startsWith('&#60;') && url.endsWith('&#62;')) {
+      return url.slice(5, -5);
+    }
+    return url;
+  }
+
   pushCommentReferenceCache(key, cache) {
     const [url, ...args] = cache.split(/[ ]+/g);
-    const innerUrl = UrlCache.set(url);
+    const innerUrl = UrlCache.set(this.unwrapUrl(url));
     this.commentCache[`${key}`.toLowerCase()] = [innerUrl, ...args].join(' ');
   }
 
   getCommentReferenceCache(key) {
     return this.commentCache[`${key}`.toLowerCase()] || null;
   }
 
+  /**
+   *
+   * @param {string} str
+   * @returns
+   */
   beforeMakeHtml(str) {
     let $str = str;
     if (this.test($str)) {
@@ -57,7 +79,7 @@ export default class CommentReference extends ParagraphBase {
         return lineFeeds.join('');
       });
       // 替换实际引用
-      const refRegex = /(\[[^\]\n]+?\])?(?:\[([^\]\n]+?)\])/g; // 匹配[xxx][ref]形式的内容，不严格大小写
+      const refRegex = /(\[[^\]]*?\])?(?:\[([^\]\n]+?)\])/g; // 匹配[xxx][ref]形式的内容，不严格大小写
       $str = $str.replace(refRegex, (match, leadingContent, key) => {
         const cache = this.getCommentReferenceCache(key);
         if (cache) {

packages/cherry-markdown/src/toolbars/PreviewerBubble.js

@@ -246,11 +246,11 @@ export default class PreviewerBubble {
     let targetCh = -1;
     contents.forEach((lineContent, lineIdx) => {
       const tmp = lineContent.trim(); // 去掉句首的空格和制表符
-      if (tmp.startsWith('- [ ]') || tmp.startsWith('- [x]')) {
+      if (/^-\s+\[[ x]\]/i.test(tmp)) {
         // 如果是个checkbox
         if (editorCheckboxCount === this.checkboxIdx) {
           targetLine = lineIdx;
-          targetCh = lineContent.indexOf('- [') + 3;
+          targetCh = lineContent.indexOf('[') + 1;
         }
         editorCheckboxCount += 1;
       }

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

@@ -263,7 +263,7 @@ export function getDetailRule() {
 export const imgBase64Reg = /(\[[^\n]*?\]\(data:image\/[a-z]{1,10};base64,)([^)]+)\)/g;
 
 // 匹配base64数据
-export const base64Reg = /(data:image\/[a-z]{1,10};base64,)([0-9a-zA-Z+/]+)/g;
+export const base64Reg = /(data:image\/[a-z]{1,10};base64,)([0-9a-zA-Z+/=]+)/g;
 
 // 匹配内容非常多的单行文本，为了避免表格的场景，所以特意避免表格的识别
 export const longTextReg = /([^\n]{100})([^\n|`\s]{5900,})/g;

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

@@ -1360,7 +1360,7 @@ exports[`engine > CommonMark-192 1`] = `
 `;
 
 exports[`engine > CommonMark-193 1`] = `
-"<p data-sign="c748929db636b086c31f362ad2f999f6257bb59351aa714a748ec92ec7769b383" data-type="p" data-lines="3">      /url  <br>           'the title'  </p><p data-sign="3c65f714b4d72f614794b9c1dc97a9cb988e5bd7a6981a79e63700f04f901b8b2" data-type="p" data-lines="2">[foo](cherry-inner://e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 )</p>
+"<p data-sign="c748929db636b086c31f362ad2f999f6257bb59351aa714a748ec92ec7769b383" data-type="p" data-lines="3">      /url  <br>           'the title'  </p><p data-sign="3c65f714b4d72f614794b9c1dc97a9cb988e5bd7a6981a79e63700f04f901b8b2" data-type="p" data-lines="2">[foo]( )</p>
 "
 `;
 
@@ -1395,7 +1395,7 @@ exports[`engine > CommonMark-199 1`] = `
 `;
 
 exports[`engine > CommonMark-200 1`] = `
-"<p data-sign="901a805d3b4da566f815e5f755cc0781c4da142101080d8d5db1f7fb9ef0971b1" data-type="p" data-lines="1"><a href="&#60;&#62;">foo</a></p>
+"<p data-sign="710f04ae6827e964349ae1ce3cc82a5088ee94ab7a10d615a82f3ac2c94631a21" data-type="p" data-lines="1"><a href="">foo</a></p>
 "
 `;