feat: #999 处理大文本缩略展示的逻辑，对单行超大文本作特殊缩略处理 (#1000)

Tencent · Dec 16, 2024 · fdbb48c · fdbb48c
1 parent a645e7f
commit fdbb48c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/src/Editor.js b/src/Editor.js
@@ -39,7 +39,7 @@ import { addEvent } from './utils/event';
 import Logger from '@/Logger';
 import { handleFileUploadCallback } from '@/utils/file';
 import { createElement } from './utils/dom';
-import { imgBase64Reg, imgDrawioXmlReg } from './utils/regexp';
+import { longTextReg, base64Reg, imgDrawioXmlReg } from './utils/regexp';
 import { handleNewlineIndentList } from './utils/autoindent';
 
 /**
@@ -139,10 +139,6 @@ export default class Editor {
    * 以及对全角符号进行特殊染色。
    */
   dealSpecialWords = () => {
-    if (this.noChange) {
-      this.noChange = false;
-      return;
-    }
     /**
      * 如果编辑器隐藏了，则不再处理（否则有性能问题）
      * - 性能问题出现的原因：
@@ -154,9 +150,10 @@ export default class Editor {
     if (this.$cherry.status.editor === 'hide') {
       return;
     }
-    this.formatFullWidthMark();
-    this.formatBigData2Mark(imgBase64Reg, 'cm-url base64');
+    this.formatBigData2Mark(base64Reg, 'cm-url base64');
     this.formatBigData2Mark(imgDrawioXmlReg, 'cm-url drawio');
+    this.formatBigData2Mark(longTextReg, 'cm-url long-text');
+    this.formatFullWidthMark();
   };
 
   /**
@@ -186,7 +183,6 @@ export default class Editor {
       }
       const newSpan = createElement('span', `cm-string ${className}`, { title: bigString });
       newSpan.textContent = bigString;
-      this.noChange = true;
       codemirror.markText(begin, end, { replacedWith: newSpan, atomic: true });
     }
   };

diff --git a/src/Engine.js b/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, imgBase64Reg, imgDrawioXmlReg } from './utils/regexp';
+import { PUNCTUATION, longTextReg, imgBase64Reg, imgDrawioXmlReg } from './utils/regexp';
 import { escapeHTMLSpecialChar } from './utils/sanitize';
 import Logger from './Logger';
 import { configureMathJax } from './utils/mathjax';
@@ -252,6 +252,11 @@ export default class Engine {
       this.cachedBigData[cacheKey] = m2;
       return `${m1}${cacheKey}}`;
     });
+    $md = $md.replace(longTextReg, (whole, m1, m2) => {
+      const cacheKey = `bigDataBegin${this.hash(m2)}bigDataEnd`;
+      this.cachedBigData[cacheKey] = m2;
+      return `${m1}${cacheKey}}`;
+    });
     return $md;
   }
 

diff --git a/src/sass/cherry.scss b/src/sass/cherry.scss
@@ -480,6 +480,7 @@
     padding: 15px 34px;
 
     // 对draw.io的xml数据，和图片里base64格式的数据限定最大宽度
+    .long-text,
     .drawio,
     .base64 {
       display: inline-block;

diff --git a/src/utils/regexp.js b/src/utils/regexp.js
@@ -262,6 +262,12 @@ export function getDetailRule() {
 // 匹配图片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;
 
+// 匹配base64数据
+export const base64Reg = /(data:image\/[a-z]{1,10};base64,)([0-9a-zA-Z+/]+)/g;
+
+// 匹配内容非常多的单行文本
+export const longTextReg = /([^\n]{100})([^\n]{500,})/g;
+
 // 匹配图片{}里的data-xml属性
 export const imgDrawioXmlReg = /(!\[[^\n]*?\]\([^)]+\)\{[^}]* data-xml=)([^}]+)\}/g;