cherry-muse 1.0.1

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;
+  }
+}

package/src/utils/pasteHelper.js

@@ -0,0 +1,253 @@
+/**
+ * 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 { createElement } from '@/utils/dom';
+
+const SAFE_AREA_MARGIN = 15;
+
+/**
+ * Cherry实现了将粘贴的html内容转成对应的markdown源码的功能
+ * 本工具主要实现将粘贴html转成的markdown源码在编辑器中选中，并给出切换按钮
+ * 可以切换为纯文本内容，或者markdown内容
+ */
+const pasteHelper = {
+  /**
+   * 核心方法，粘贴后展示切换按钮
+   * 只有粘贴html时才会出现切换按钮
+   * @param {Object} currentCursor 当前的光标位置
+   * @param {Object} editor 编辑器对象
+   * @param {string} html html里的纯文本内容
+   * @param {string} md html对应的markdown源码
+   * @returns
+   */
+  showSwitchBtnAfterPasteHtml($cherry, currentCursor, editor, html, md) {
+    if (html.trim() === md.trim()) {
+      return;
+    }
+    this.init($cherry, currentCursor, editor, html, md);
+    this.setSelection();
+    this.bindListener();
+    this.initBubble();
+    this.showBubble();
+    // 默认粘贴成markdown格式，如果用户上次选择粘贴为纯文本，则需要切换为text
+    if (this.getTypeFromLocalStorage() === 'text') {
+      this.switchTextClick();
+    }
+  },
+
+  init($cherry, currentCursor, editor, html, md) {
+    this.$cherry = $cherry;
+    this.html = html;
+    this.md = md;
+    this.codemirror = editor;
+    this.currentCursor = currentCursor;
+    this.locale = $cherry.locale;
+  },
+
+  /**
+   * 获取缓存中的复制粘贴类型
+   */
+  getTypeFromLocalStorage() {
+    if (typeof localStorage === 'undefined') {
+      return 'md';
+    }
+    return localStorage.getItem('cherry-paste-type') || 'md';
+  },
+
+  /**
+   * 记忆最近一次用户选择的粘贴类型
+   */
+  setTypeToLocalStorage(type) {
+    if (typeof localStorage === 'undefined') {
+      return;
+    }
+    localStorage.setItem('cherry-paste-type', type);
+  },
+
+  /**
+   * 在编辑器中自动选中刚刚粘贴的内容
+   */
+  setSelection() {
+    const { /* sticky, xRel, */ ...end } = this.codemirror.getCursor();
+    const begin = this.currentCursor;
+    this.codemirror.setSelection(begin, end);
+  },
+  /**
+   * 绑定事件
+   * 当编辑器选中区域改变、内容改变时，隐藏切换按钮
+   * 当编辑器滚动时，实时更新切换按钮的位置
+   * @returns null
+   */
+  bindListener() {
+    if (!this.hasBindListener) {
+      this.hasBindListener = true;
+    } else {
+      return true;
+    }
+    this.codemirror.on('beforeSelectionChange', (codemirror, info) => {
+      this.hideBubble();
+    });
+    this.codemirror.on('beforeChange', (codemirror, info) => {
+      this.hideBubble();
+    });
+    this.codemirror.on('scroll', (codemirror) => {
+      this.updatePositionWhenScroll();
+    });
+  },
+
+  isHidden() {
+    return this.bubbleDom.style.display === 'none';
+  },
+
+  toggleBubbleDisplay() {
+    if (this.isHidden()) {
+      this.bubbleDom.style.display = '';
+      return;
+    }
+    this.bubbleDom.style.display = 'none';
+    return;
+  },
+
+  hideBubble() {
+    if (this.noHide) {
+      return true;
+    }
+    if (this.isHidden()) {
+      return;
+    }
+    this.toggleBubbleDisplay();
+  },
+
+  updatePositionWhenScroll() {
+    if (this.isHidden()) {
+      return;
+    }
+    // FIXME: update position when stick to the bottom
+    // const isStickToBottom = !this.bubbleDom.style.top;
+    const offset = this.bubbleDom.dataset.scrollTop - this.getScrollTop();
+    this.bubbleDom.style.marginTop = `${offset}px`;
+  },
+
+  getScrollTop() {
+    return this.codemirror.getScrollInfo().top;
+  },
+
+  showBubble() {
+    const { top } = this.getLastSelectedPosition();
+    if (this.isHidden()) {
+      this.toggleBubbleDisplay();
+      this.bubbleDom.style.marginTop = '0';
+      this.bubbleDom.dataset.scrollTop = this.getScrollTop();
+    }
+    /**
+     * @type {HTMLDivElement}
+     */
+    const codemirrorWrapper = this.codemirror.getWrapperElement();
+    const maxTop = codemirrorWrapper.clientHeight - this.bubbleDom.getBoundingClientRect().height - SAFE_AREA_MARGIN;
+
+    if (top > maxTop) {
+      this.bubbleDom.style.top = '';
+      this.bubbleDom.style.bottom = `${SAFE_AREA_MARGIN}px`;
+    } else {
+      this.bubbleDom.style.top = `${top}px`;
+      this.bubbleDom.style.bottom = '';
+    }
+  },
+
+  initBubble() {
+    if (this.bubbleDom) {
+      this.bubbleDom.setAttribute('data-type', 'md');
+      return true;
+    }
+    const dom = createElement('div', 'cherry-bubble cherry-bubble--centered cherry-switch-paste');
+    dom.style.display = 'none';
+
+    const switchText = createElement('span', 'cherry-toolbar-button cherry-text-btn', {
+      title: this.locale.pastePlain,
+    });
+    switchText.innerText = 'TEXT';
+
+    const switchMd = createElement('span', 'cherry-toolbar-button cherry-md-btn', {
+      title: this.locale.pasteMarkdown,
+    });
+    switchMd.innerText = 'Markdown';
+
+    const switchBG = createElement('span', 'switch-btn--bg');
+
+    this.bubbleDom = dom;
+    this.switchText = switchText;
+    this.switchMd = switchMd;
+    this.switchBG = switchBG;
+    this.bubbleDom.appendChild(switchText);
+    this.bubbleDom.appendChild(switchMd);
+    this.bubbleDom.appendChild(switchBG);
+    this.bubbleDom.setAttribute('data-type', 'md');
+    this.codemirror.getWrapperElement().appendChild(this.bubbleDom);
+    this.switchMd.addEventListener('click', this.switchMDClick.bind(this));
+    this.switchText.addEventListener('click', this.switchTextClick.bind(this));
+  },
+
+  switchMDClick(event) {
+    this.setTypeToLocalStorage('md');
+    if (this.bubbleDom.getAttribute('data-type') === 'md') {
+      return;
+    }
+    this.noHide = true;
+    this.bubbleDom.setAttribute('data-type', 'md');
+    this.codemirror.doc.replaceSelection(this.md);
+    this.setSelection();
+    this.showBubble();
+    this.noHide = false;
+  },
+  switchTextClick(event) {
+    this.setTypeToLocalStorage('text');
+    if (this.bubbleDom.getAttribute('data-type') === 'text') {
+      return;
+    }
+    this.noHide = true;
+    this.bubbleDom.setAttribute('data-type', 'text');
+    this.codemirror.doc.replaceSelection(this.html);
+    this.setSelection();
+    this.showBubble();
+    this.noHide = false;
+  },
+
+  getLastSelectedPosition() {
+    const selectedObjs = Array.from(this.codemirror.getWrapperElement().getElementsByClassName('CodeMirror-selected'));
+    let width = 0;
+    let top = 0;
+    if (selectedObjs.length <= 0) {
+      this.hideBubble();
+      return {};
+    }
+    // FIXME: remove redundant width calculation
+    for (let key = 0; key < selectedObjs.length; key++) {
+      const item = selectedObjs[key];
+      const position = item.getBoundingClientRect();
+      const tmpWidth = position.left + position.width / 2;
+      const tmpTop = position.top + position.height;
+      if (tmpTop > top && tmpWidth >= width) {
+        top = tmpTop;
+      }
+      if (tmpWidth > width) {
+        width = tmpWidth;
+      }
+    }
+    return { top };
+  },
+};
+
+export default pasteHelper;

package/src/utils/recount-pos.js

@@ -0,0 +1,59 @@
+/**
+ * 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 diff from 'fast-diff';
+/**
+ * 更新内容时保持光标不变
+ * @param {Number} pos 光标相对文档开头的偏移量
+ * @param {String} oldContent 变更前的内容
+ * @param {String} newContent 变更后的内容
+ * @returns {Number} newPos 新的光标偏移量
+ */
+export default function getPosBydiffs(pos, oldContent, newContent) {
+  const diffs = diff(oldContent, newContent);
+  let newPos = pos;
+  let tmpPos = pos;
+  for (let i = 0; i < diffs.length; i++) {
+    const val = diffs[i];
+    if (tmpPos <= 0) {
+      return newPos;
+    }
+    const opType = val[0];
+    const opLength = val[1].length;
+    switch (opType) {
+      // 没有改变的内容
+      case diff.EQUAL:
+        if (tmpPos <= opLength) {
+          return newPos;
+        }
+        tmpPos -= opLength;
+        break;
+      // 删除的内容
+      case diff.DELETE:
+        if (tmpPos <= opLength) {
+          return newPos - opLength + tmpPos;
+        }
+        tmpPos -= opLength;
+        newPos -= opLength;
+        break;
+      // 新增的内容
+      case diff.INSERT:
+        newPos += opLength;
+        break;
+    }
+  }
+  return newPos;
+}