diff --git a/src/Editor.js b/src/Editor.js index 6a940655..1421dea7 100644 --- 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 index b0296df4..d66eb466 100644 --- 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 index 4b1ea04b..15de4666 100644 --- 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 index d4c55895..20930286 100644 --- 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;