@cherry-markdown/cherry-markdown-dev 0.8.58-dev

package/src/utils/lineFeed.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * 为段落前加换行符
+ * @param {string} match    匹配全文
+ * @param {string} processedContent 加入的内容
+ */
+export function prependLineFeedForParagraph(match, processedContent, canNestedInList = false) {
+  if (!/^\n/.test(match)) {
+    return processedContent;
+  }
+  if (canNestedInList) {
+    const leadingLinesCount = match.match(/^\n+/g)?.[0]?.length ?? 0;
+    // 前置换行符数量大于2时，补充两个换行符，否则只补充一个
+    if (leadingLinesCount > 1) {
+      return `\n\n${processedContent}`;
+    }
+    return `\n${processedContent}`;
+  }
+  return `\n\n${processedContent}`;
+}
+
+/**
+ * 计算段落所占行数，必须传入通过 prependLineFeedForParagraph 方法处理后的内容，才能计算准确
+ * @param {string} preLinesMatch 前置匹配行
+ * @param {number} contentLines 实际内容行数
+ */
+export function calculateLinesOfParagraph(preLinesMatch, contentLines) {
+  let preLineCount = (preLinesMatch.match(/\n/g) || []).length;
+  // 前置行匹配文本为空，说明是全文开头
+  // 非全文开头前面必有两个从 prependLineFeed 方法新增加的换行符
+  if (preLinesMatch !== '') {
+    preLineCount -= 2;
+  }
+  return preLineCount + contentLines;
+}

package/src/utils/listContentHandler.js

@@ -0,0 +1,227 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getValueWithoutCode, LIST_CONTENT } from '@/utils/regexp';
+
+export default class ListHandler {
+  /** @type{HTMLElement} */
+  bubbleContainer = null;
+
+  regList = LIST_CONTENT;
+
+  /** @type{Array.<import('codemirror').Position>} */
+  range = [];
+
+  /** @type{import('codemirror').Position} */
+  position = { line: 0, ch: 0 };
+
+  input = false;
+
+  isCheckbox = false;
+
+  /**
+   * @param {string} trigger 触发方式
+   * @param {HTMLParagraphElement} target 目标dom
+   * @param {HTMLDivElement} container bubble容器
+   * @param {HTMLDivElement} previewerDom 预览器dom
+   * @param {import('../Editor').default} editor 编辑器实例
+   */
+  constructor(trigger, target, container, previewerDom, editor, options = {}) {
+    this.trigger = trigger;
+    this.target = target;
+    this.container = container;
+    this.previewerDom = previewerDom;
+    this.editor = editor;
+    this.insertLineBreak = false; // 是否为插入换行符
+    this.handleEditablesInputBinded = this.handleEditablesInput.bind(this); // 保证this指向正确以及能够正确移除事件
+    this.handleEditablesUnfocusBinded = this.handleEditablesUnfocus.bind(this);
+    this.target.addEventListener('input', this.handleEditablesInputBinded, false);
+    this.target.addEventListener('focusout', this.handleEditablesUnfocusBinded, false);
+    this.setSelection();
+  }
+
+  /**
+   * 触发事件
+   * @param {string} type 事件类型
+   * @param {Event} event 事件对象
+   */
+  emit(type, event) {
+    switch (type) {
+      case 'remove':
+        return this.remove();
+    }
+  }
+
+  remove() {
+    if (this.bubbleContainer) {
+      this.bubbleContainer.style.display = 'none';
+      if (this.bubbleContainer.children[0] instanceof HTMLTextAreaElement) {
+        this.bubbleContainer.children[0].value = ''; // 清空内容
+      }
+    }
+    this.target.removeAttribute('contenteditable');
+    this.target.removeEventListener('input', this.handleEditablesInputBinded, false);
+    this.target.removeEventListener('focusout', this.handleEditablesUnfocusBinded, false);
+    const cursor = this.editor.editor.getCursor(); // 获取光标位置
+    this.editor.editor.setSelection(cursor, cursor); // 取消选中
+  }
+
+  setSelection() {
+    const allLi = Array.from(this.previewerDom.querySelectorAll('li.cherry-list-item')); // 预览区域内所有的li
+    const targetLiIdx = allLi.findIndex((li) => li === this.target.parentElement);
+    if (targetLiIdx === -1) {
+      return; // 没有找到li
+    }
+    const contents = getValueWithoutCode(this?.editor.editor.getValue())?.split('\n') ?? [];
+    let contentsLiCount = 0; // 编辑器中是列表的数量
+    let targetLine = -1; // 行
+    let targetCh = -1; // 列
+    const targetContent = []; // 当前点击的li的内容
+    for (let lineIdx = 0; lineIdx < contents.length; lineIdx++) {
+      const lineContent = contents[lineIdx];
+      if (!lineContent || lineContent === '/n') {
+        if (targetContent.length <= 0) {
+          continue;
+        } else {
+          break;
+        }
+      }
+      // 匹配是否符合列表的正则
+      const regRes = this.regList.exec(lineContent);
+      if (regRes !== null) {
+        if (targetContent.length > 0) {
+          break;
+        }
+        const [, indent, identifier, checkbox, content] = regRes;
+        if (contentsLiCount === targetLiIdx && indent !== undefined) {
+          targetLine = lineIdx;
+          // eslint-disable-next-line prefer-destructuring
+          targetContent.push(content); // 这里只取一个没必要解构
+          targetCh = lineContent.indexOf(content);
+          // 1. 这种需要特殊处理，需要跳过一个空格位，否则层级会错乱
+          if (identifier?.endsWith('.')) {
+            targetCh += 1;
+          }
+          // checkbox 编辑的元素内以选中的checkbox开头时需要去掉，否则会被解析
+          if (checkbox) {
+            this.isCheckbox = true;
+          }
+        }
+        contentsLiCount += 1;
+      } else if (targetContent.length > 0) {
+        targetContent.push(lineContent);
+      }
+    }
+    const from = { line: targetLine, ch: targetCh };
+    const to = {
+      line: targetLine + targetContent.length - 1,
+      ch: targetCh + targetContent[targetContent.length - 1]?.length,
+    };
+    this.editor.editor.setSelection(from, to);
+    this.range = [from, to];
+    this.position = this.editor.editor.getCursor(); // 输入就获取光标位置，防止后面点到编辑器dom的时候光标位置不对
+  }
+
+  /**
+   * 处理contenteditable元素的输入事件
+   * @param {InputEvent} event
+   */
+  handleEditablesInput(event) {
+    this.input = true;
+    event.stopPropagation();
+    event.preventDefault();
+    /** @typedef {'insertText'|'insertFromPaste'|'insertParagraph'|'insertLineBreak'|'deleteContentBackward'|'deleteContentForward'|'deleteByCut'|'deleteContentForward'|'deleteWordBackward'} InputType*/
+    if (event.target instanceof HTMLParagraphElement) {
+      if (event.inputType === 'insertParagraph' || event.inputType === 'insertLineBreak') {
+        this.insertLineBreak = true;
+        this.handleInsertLineBreak(event);
+      }
+    }
+  }
+
+  /**
+   * 处理contenteditable元素的失去焦点事件
+   * @param {FocusEvent} event
+   */
+  handleEditablesUnfocus(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.target instanceof HTMLParagraphElement) {
+      if (this.input) {
+        if (!this.insertLineBreak) {
+          const replaceHtml = !this.isCheckbox
+            ? event.target.innerHTML
+            : event.target.innerHTML.replace(/<span class="ch-icon ch-icon-(square|check)"><\/span>/, '');
+          const md = this.editor.$cherry.engine.makeMarkdown(replaceHtml);
+          const [from, to] = this.range;
+          this.editor.editor.replaceRange(md, from, to);
+        }
+        this.isCheckbox = false;
+        this.input = false;
+        this.insertLineBreak = false;
+      }
+      this.remove();
+    }
+  }
+
+  /**
+   * @param {InputEvent} event
+   */
+  handleInsertLineBreak(event) {
+    /** @type {Array<string>} */
+    let splitInnerText = [];
+    // @ts-ignore
+    if ('innerText' in event.target && typeof event.target.innerText === 'string') {
+      // @ts-ignore
+      splitInnerText = event.target.innerText.split('\n');
+    }
+    // 只有第一段是换行，后面的换行都应该认为是另一行
+    const [before, ...after] = splitInnerText;
+    // 获取当前光标位置
+    const cursor = this.editor.editor.getCursor();
+    // 获取光标行的内容
+    const lineContent = this.editor.editor.getLine(cursor.line);
+    const regRes = this.regList.exec(lineContent);
+    let insertContent = '\n- ';
+    if (regRes !== null) {
+      // 存在选中的checkbox则替换为未选中的checkbox，其他的保持原样
+      insertContent = `\n${regRes[1]}${regRes[2]?.replace('[x]', '[ ] ')}`;
+    }
+    insertContent += after?.join('') ?? '';
+    // 把当前行内容剪掉
+    this.editor.editor.replaceRange(
+      before,
+      {
+        line: cursor.line,
+        ch: regRes[2]?.length ?? 0,
+      },
+      {
+        line: cursor.line,
+        ch: lineContent.length,
+      },
+    );
+    // 在当前行的末尾插入一个换行符，这会创建一个新行
+    this.editor.editor.replaceRange(insertContent, {
+      line: cursor.line,
+      ch: lineContent.length,
+    });
+    // 将光标移动到新行
+    this.editor.editor.setCursor({ line: cursor.line + 1, ch: insertContent.length + 1 });
+    // 将光标聚焦到编辑器上
+    this.editor.editor.focus();
+    this.remove();
+  }
+}

package/src/utils/lookbehind-replace.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ *
+ * @param {string} str
+ * @param {{replacedText:string;begin:number;length:number;}[]} buffer
+ */
+function replaceStringByBuffer(str, buffer) {
+  if (!buffer.length) {
+    return str;
+  }
+  const slicedString = [];
+  let offset = 0;
+  buffer.forEach((buf, index) => {
+    slicedString.push(str.slice(offset, buf.begin));
+    slicedString.push(buf.replacedText);
+    offset = buf.begin + buf.length;
+    if (index === buffer.length - 1) {
+      slicedString.push(str.slice(offset));
+    }
+  });
+  // console.log(slicedString, slicedString.join(''));
+  return slicedString.join('');
+}
+
+/**
+ * @param {string} str 原始字符串
+ * @param {RegExp} regex 正则
+ * @param {(...args: any[])=>string} replacer 字符串替换函数
+ * @param {boolean} [continuousMatch=false] 是否连续匹配，主要用于需要后向断言的连续语法匹配
+ * @param {number} [rollbackLength=1] 连续匹配时，每次指针回退的长度，默认为 1
+ */
+export function replaceLookbehind(str, regex, replacer, continuousMatch = false, rollbackLength = 1) {
+  if (!regex) {
+    return str;
+  }
+  // 从头开始匹配
+  regex.lastIndex = 0;
+  let args;
+  let lastIndex = 0;
+  const replaceBuffer = [];
+  while ((args = regex.exec(str)) !== null) {
+    const replaceInfo = {
+      begin: args.index,
+      length: args[0].length,
+    };
+    if (continuousMatch && args.index === lastIndex - rollbackLength) {
+      const [match, , ...restArgs] = args;
+      // 丢弃 leadingChar，需要调整begin和length
+      replaceBuffer.push({
+        begin: replaceInfo.begin + rollbackLength,
+        length: replaceInfo.length - rollbackLength,
+        replacedText: replacer(match.slice(rollbackLength), '', ...restArgs),
+      });
+    } else {
+      replaceBuffer.push({
+        ...replaceInfo,
+        replacedText: replacer(...args),
+      });
+    }
+    // console.log(args);
+    lastIndex = regex.lastIndex;
+    regex.lastIndex -= rollbackLength;
+  }
+  // 正则复位，避免影响其他逻辑
+  regex.lastIndex = 0;
+  return replaceStringByBuffer(str, replaceBuffer);
+}

package/src/utils/mathjax.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { isBrowser } from './env';
+import { PUNCTUATION } from './regexp';
+import { escapeHTMLSpecialChar } from './sanitize';
+
+/**
+ * 装饰器，挂载对应的模块到实例上
+ */
+export function LoadMathModule() {
+  if (!isBrowser()) {
+    return;
+  }
+  // @ts-ignore
+  this.katex = this.externals?.katex ?? window.katex;
+  // @ts-ignore
+  this.MathJax = this.externals?.MathJax ?? window.MathJax;
+}
+
+export const configureMathJax = (usePlugins) => {
+  if (!isBrowser()) {
+    console.log('mathjax disabled');
+    return;
+  }
+  const plugins = usePlugins
+    ? ['input/asciimath', '[tex]/noerrors', '[tex]/cancel', '[tex]/color', '[tex]/boldsymbol', 'ui/safe']
+    : ['ui/safe'];
+  // @ts-ignore
+  window.MathJax = {
+    startup: {
+      elements: ['.Cherry-Math', '.Cherry-InlineMath'],
+      typeset: true,
+    },
+    tex: {
+      inlineMath: [
+        ['$', '$'],
+        ['\\(', '\\)'],
+      ],
+      displayMath: [
+        ['$$', '$$'],
+        ['\\[', '\\]'],
+      ],
+      tags: 'ams',
+      packages: { '[+]': ['noerrors', 'cancel', 'color'] },
+      macros: {
+        bm: ['{\\boldsymbol{#1}}', 1],
+      },
+    },
+    options: {
+      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'],
+      ignoreHtmlClass: 'tex2jax_ignore',
+      processHtmlClass: 'tex2jax_process',
+      // 关闭 mathjax 菜单
+      enableMenu: false,
+    },
+    loader: {
+      load: plugins,
+    },
+  };
+};
+
+const noEscape = ['&', '<', '>', '"', "'"]; // 需要转换为HTML实体字符的符号
+
+// 用于预处理会在Markdown中被反转义的字符，如：\\ 会被反转义为 \
+export const escapeFormulaPunctuations = (formula) => {
+  const $formula = formula.replace(new RegExp(PUNCTUATION, 'g'), (match) => {
+    if (noEscape.indexOf(match) !== -1) {
+      // HTML特殊字符需要转换为实体字符，防XSS注入
+      return escapeHTMLSpecialChar(match);
+    }
+    return `\\${match}`; // 先转义特殊字符，防止在afterMakeHtml中被反转义
+  });
+  return $formula;
+};
+
+export default {};

package/src/utils/myersDiff.js

@@ -0,0 +1,211 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Myers' Diff 算法
+ * 用来对两个数列/字符串做diff,得到增/删元素的最简形式
+ * 参考文献: http://www.xmailserver.org/diff2.pdf
+ */
+
+import Logger from '@/Logger';
+
+export default class MyersDiff {
+  constructor(newObj, oldObj, getElement) {
+    this.options = {
+      newObj, // 用于diff的新列表/字符串
+      oldObj, // 用于diff的旧列表/字符串
+      getElement, // 获取用于比较的元素的函数
+    };
+  }
+
+  /**
+   * 执行diff操作
+   */
+  doDiff() {
+    const snakes = this.findSnakes(this.options.newObj, this.options.oldObj);
+    const result = this.assembleResult(snakes, this.options.newObj, this.options.oldObj);
+    return result;
+  }
+
+  /**
+   * 用于判断列表/字符串元素是否相等的判据函数
+   */
+  getElement(obj, index) {
+    if (typeof this.options.getElement === 'function') {
+      // 支持传入自定义的比较函数
+      return this.options.getElement(obj, index);
+    }
+    return obj[index];
+  }
+
+  /**
+   * 寻找从起点到终点的折线
+   */
+  findSnakes(newObj, oldObj) {
+    const newLen = newObj.length || 0; // 新diff对象的长度
+    const oldLen = oldObj.length || 0; // 旧diff对象的长度
+    const lengthSum = newLen + oldLen; // 长度之和
+    const v = { 1: 0 }; // "每个节点的深度值"的缓存对象
+    const allSnakes = { 0: { 1: 0 } }; // "每个节点对应的折线"的缓存对象
+
+    // d是起点到对应节点的编辑距离,简而言之,若把新增一个节点或删除一个节点都视作一次"操作",那么通过d次操作可以从起点到达对应节点
+    for (let d = 0; d <= lengthSum; d++) {
+      const tmp = {};
+      for (let k = -d; k <= d; k += 2) {
+        // 转换坐标系,k可以视为对应节点(x,y)的x坐标值减y坐标值
+        const down = k === -d || (k !== d && v[k - 1] < v[k + 1]);
+        const kPrev = down ? k + 1 : k - 1;
+
+        const xStart = v[kPrev];
+        // let yStart = xStart - kPrev;
+        const xMid = down ? xStart : xStart + 1;
+        const yMid = xMid - k;
+        let xEnd = xMid;
+        let yEnd = yMid;
+
+        while (xEnd < oldLen && yEnd < newLen && this.getElement(oldObj, xEnd) === this.getElement(newObj, yEnd)) {
+          xEnd += 1;
+          yEnd += 1;
+        }
+
+        v[k] = xEnd;
+        tmp[k] = xEnd;
+
+        if (xEnd >= oldLen && yEnd >= newLen) {
+          // 成功抵达终点
+          allSnakes[d] = tmp;
+          return this.$backtraceSnakes(allSnakes, newLen, oldLen, d);
+        }
+      }
+      allSnakes[d] = tmp;
+    }
+
+    return [];
+  }
+
+  /**
+   * 回溯,找出关键路径对应的折线
+   */
+  $backtraceSnakes(allSnakes, newLen, oldLen, d) {
+    const keySnakes = [];
+    const p = { x: oldLen, y: newLen }; // 模拟节点,从终点开始
+
+    // 执行回溯,倒回起点,找到并记录关键路径
+    for (let i = d; i > 0; i--) {
+      const v = allSnakes[i];
+      const vPrev = allSnakes[i - 1];
+      const k = p.x - p.y;
+
+      const xEnd = v[k];
+      // let yEnd = xEnd - k;
+
+      const down = k === -i || (k !== i && vPrev[k + 1] > vPrev[k - 1]);
+      const kPrev = down ? k + 1 : k - 1;
+
+      const xStart = vPrev[kPrev];
+      const yStart = xStart - kPrev;
+
+      const xMid = down ? xStart : xStart + 1;
+      // let yMid = xMid - k;
+
+      keySnakes.unshift({ xStart, xMid, xEnd });
+
+      p.x = xStart;
+      p.y = yStart;
+    }
+
+    return keySnakes;
+  }
+
+  /**
+   * 组装出返回值
+   */
+  assembleResult(snakes, newObj, oldObj) {
+    const grayColor = 'color: gray';
+    const redColor = 'color: red';
+    const greenColor = 'color: green';
+    const blueColor = 'color: blue';
+    let consoleStr = '';
+    const args = [];
+    let yOffset = 0;
+    const result = []; // 返回的操作集
+    let change = {}; // 本次操作
+    let lastChange = {}; // 缓存上一次操作
+    let firstDeleteChange = {}; // 连续删除时用来缓存最初的删除
+    snakes.forEach((snake, index) => {
+      let currentPos = snake.xStart;
+
+      if (index === 0 && snake.xStart !== 0) {
+        for (let j = 0; j < snake.xStart; j++) {
+          consoleStr += `%c${this.getElement(oldObj, j)}, `;
+          args.push(grayColor);
+          yOffset += 1;
+        }
+      }
+
+      if (snake.xMid - snake.xStart === 1) {
+        // 删除
+        change = {
+          type: 'delete',
+          oldIndex: snake.xStart,
+          newIndex: 0,
+        };
+        if (lastChange.type === 'delete' && lastChange.oldIndex === change.oldIndex - 1) {
+          // 检测到连续删除,缓存最初的删除
+          firstDeleteChange = firstDeleteChange ? lastChange : firstDeleteChange;
+        }
+        result.push(change);
+        lastChange = change;
+        consoleStr += `%c${this.getElement(oldObj, snake.xStart)}, `;
+        args.push(redColor);
+        currentPos = snake.xMid;
+      } else {
+        // 添加
+        change = {
+          type: 'insert',
+          oldIndex: snake.xStart,
+          newIndex: yOffset,
+        };
+        if (lastChange.type === 'delete' && lastChange.oldIndex === change.oldIndex - 1) {
+          // 和上一条删除合并为"更新"
+          result.pop();
+          firstDeleteChange = firstDeleteChange ? lastChange : firstDeleteChange;
+          change = {
+            type: 'update',
+            oldIndex: firstDeleteChange.oldIndex, // 合并时,更新目标定位连续删除块中的首个元素
+            newIndex: yOffset,
+          };
+          args.push(blueColor);
+        } else {
+          args.push(greenColor);
+        }
+        firstDeleteChange = {};
+        result.push(change);
+        lastChange = change;
+        consoleStr += `%c${this.getElement(newObj, yOffset)}, `;
+        yOffset += 1;
+      }
+
+      // 不变
+      for (let i = 0; i < snake.xEnd - currentPos; i++) {
+        consoleStr += `%c${this.getElement(oldObj, currentPos + i)}, `;
+        args.push(grayColor);
+        yOffset += 1;
+      }
+    });
+    Logger.log(consoleStr, ...args);
+    return result;
+  }
+}