cherry-muse 1.0.1

package/src/utils/image.js

@@ -0,0 +1,99 @@
+/**
+ * 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.
+ */
+
+const imgAltHelper = {
+  /**
+   * 提取alt部分的扩展属性
+   * @param {string} alt 图片引用中的alt部分
+   * @returns
+   */
+  processExtendAttributesInAlt(alt) {
+    const attrRegex = /#([0-9]+(px|em|pt|pc|in|mm|cm|ex|%)|auto)/g;
+    const info = alt.match(attrRegex);
+    if (!info) {
+      return '';
+    }
+    let extendAttrs = '';
+    const [width, height] = info;
+    if (width) {
+      extendAttrs = ` width="${width.replace(/[ #]*/g, '')}"`;
+    }
+    if (height) {
+      extendAttrs += ` height="${height.replace(/[ #]*/g, '')}"`;
+    }
+    return extendAttrs;
+  },
+
+  /**
+   * 提取alt部分的扩展样式
+   * @param {string} alt 图片引用中的alt部分
+   * @returns {{extendStyles:string, extendClasses:string}}
+   */
+  processExtendStyleInAlt(alt) {
+    let extendStyles = this.$getAlignment(alt);
+    let extendClasses = '';
+    const info = alt.match(/#(border|shadow|radius|B|S|R)/g);
+    if (info) {
+      for (let i = 0; i < info.length; i++) {
+        switch (info[i]) {
+          case '#border':
+          case '#B':
+            extendStyles += 'border:1px solid #888888;padding: 2px;box-sizing: border-box;';
+            extendClasses += ' cherry-img-border';
+            break;
+          case '#shadow':
+          case '#S':
+            extendStyles += 'box-shadow:0 2px 15px -5px rgb(0 0 0 / 50%);';
+            extendClasses += ' cherry-img-shadow';
+            break;
+          case '#radius':
+          case '#R':
+            extendStyles += 'border-radius: 15px;';
+            extendClasses += ' cherry-img-radius';
+            break;
+        }
+      }
+    }
+    return { extendStyles, extendClasses };
+  },
+
+  /**
+   * 从alt中提取对齐方式信息
+   * @param {string} alt
+   * @returns {string}
+   */
+  $getAlignment(alt) {
+    const styleRegex = /#(center|right|left|float-right|float-left)/i;
+    const info = alt.match(styleRegex);
+    if (!info) {
+      return '';
+    }
+    const [, alignment] = info;
+    switch (alignment) {
+      case 'center':
+        return 'transform:translateX(-50%);margin-left:50%;display:block;';
+      case 'right':
+        return 'transform:translateX(-100%);margin-left:100%;margin-right:-100%;display:block;';
+      case 'left':
+        return 'transform:translateX(0);margin-left:0;display:block;';
+      case 'float-right':
+        return 'float:right;transform:translateX(0);margin-left:0;display:block;';
+      case 'float-left':
+        return 'float:left;transform:translateX(0);margin-left:0;display:block;';
+    }
+  },
+};
+export default imgAltHelper;

package/src/utils/imgSizeHandler.js

@@ -0,0 +1,279 @@
+/**
+ * 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.
+ */
+/**
+ * 用于在图片四周画出调整图片尺寸的边框
+ */
+const imgSizeHandler = {
+  mouseResize: {},
+  getImgPosition() {
+    const position = this.img.getBoundingClientRect();
+    const editorPosition = this.previewerDom.parentNode.getBoundingClientRect();
+    const padding = parseFloat(this.img.style.padding) || 0;
+    return {
+      bottom: position.bottom - editorPosition.bottom,
+      top: position.top - editorPosition.top + padding * 1.5,
+      height: position.height,
+      width: position.width,
+      right: position.right - editorPosition.right,
+      left: position.left - editorPosition.left + padding * 1.5,
+      x: position.x - editorPosition.x,
+      y: position.y - editorPosition.y,
+    };
+  },
+  initBubbleButtons() {
+    const position = this.getImgPosition();
+    return {
+      points: {
+        arr: [
+          'leftTop',
+          'leftBottom',
+          'rightTop',
+          'rightBottom',
+          'leftMiddle',
+          'middleBottom',
+          'middleTop',
+          'rightMiddle',
+        ],
+        arrInfo: {
+          leftTop: { name: '20', left: 0, top: 0 },
+          leftBottom: { name: '00', left: 0, top: 0 },
+          rightTop: { name: '22', left: 0, top: 0 },
+          rightBottom: { name: '02', left: 0, top: 0 },
+          leftMiddle: { name: '10', left: 0, top: 0 },
+          middleBottom: { name: '01', left: 0, top: 0 },
+          middleTop: { name: '21', left: 0, top: 0 },
+          rightMiddle: { name: '12', left: 0, top: 0 },
+        },
+      },
+      imgSrc: this.img.src,
+      style: {
+        width: this.img.width,
+        height: this.img.height,
+        left: position.left - 1,
+        top: position.top - 1,
+        marginTop: 0,
+        marginLeft: 0,
+      },
+      scrollTop: this.previewerDom.scrollTop,
+      position,
+    };
+  },
+  showBubble(img, container, previewerDom) {
+    if (this.$isResizing()) {
+      return;
+    }
+    this.img = img;
+    this.previewerDom = previewerDom;
+    this.container = container;
+    this.buts = this.initBubbleButtons();
+    this.drawBubbleButs();
+  },
+  emit(type, event = {}) {
+    switch (type) {
+      case 'mousedown':
+        return this.resizeBegin(event);
+      case 'mouseup':
+        return this.resizeStop(event);
+      case 'mousemove':
+        return this.resizeWorking(event);
+      case 'scroll':
+        return this.dealScroll(event);
+      case 'remove':
+        return this.remove();
+      case 'previewUpdate':
+        return this.previewUpdate(event);
+    }
+  },
+  previewUpdate(callback) {
+    if (this.$isResizing()) {
+      return;
+    }
+    this.remove();
+    callback();
+  },
+  drawBubbleButs() {
+    if (this.butsLayout) {
+      return this.updateBubbleButs();
+    }
+    this.butsLayout = this.container;
+    this.butsImg = document.createElement('div');
+    this.butsImg.className = 'cherry-previewer-img-size-handler__background';
+    this.butsImg.style.backgroundImage = `url(${this.buts.imgSrc})`;
+    this.butsLayout.appendChild(this.butsImg);
+
+    this.butsPoints = {};
+    Object.keys(this.buts.points.arr).forEach((index) => {
+      const name = this.buts.points.arr[index];
+      const tmp = document.createElement('div');
+      tmp.className = [
+        'cherry-previewer-img-size-handler__points',
+        `cherry-previewer-img-size-handler__points-${name}`,
+      ].join(' ');
+      tmp.dataset.name = name;
+      this.butsLayout.appendChild(tmp);
+      this.butsPoints[`pints-${name}`] = tmp;
+    });
+    return this.updateBubbleButs();
+  },
+  remove() {
+    this.butsLayout = false;
+  },
+  updateBubbleButs() {
+    this.$updatePointsInfo();
+    Object.keys(this.buts.style).forEach((name) => {
+      this.butsLayout.style[name] = `${this.buts.style[name]}px`;
+    });
+    Object.keys(this.buts.points.arr).forEach((index) => {
+      const name = this.buts.points.arr[index];
+      this.butsPoints[`pints-${name}`].style.top = `${this.buts.points.arrInfo[name].top}px`;
+      this.butsPoints[`pints-${name}`].style.left = `${this.buts.points.arrInfo[name].left}px`;
+    });
+  },
+  $updatePointsInfo() {
+    const pointLeft = this.buts.style.width;
+    const pointTop = this.buts.style.height;
+    const newPointsInfo = this.$getPointsInfo(pointLeft, pointTop);
+    Object.keys(this.buts.points.arr).forEach((index) => {
+      const name = this.buts.points.arr[index];
+      if (this.buts.points.arrInfo[name].left !== newPointsInfo[name].left) {
+        this.buts.points.arrInfo[name].left = newPointsInfo[name].left;
+      }
+      if (this.buts.points.arrInfo[name].top !== newPointsInfo[name].top) {
+        this.buts.points.arrInfo[name].top = newPointsInfo[name].top;
+      }
+    });
+  },
+  $getPointsInfo(left, top) {
+    return {
+      leftTop: { left: 0, top: 0 },
+      leftBottom: { left: 0, top },
+      rightTop: { left, top: 0 },
+      rightBottom: { left, top },
+      leftMiddle: { left: 0, top: top / 2 },
+      middleBottom: { left: left / 2, top },
+      middleTop: { left: left / 2, top: 0 },
+      rightMiddle: { left, top: top / 2 },
+    };
+  },
+  $isResizing() {
+    return this.mouseResize.resize;
+  },
+  dealScroll(event) {
+    const position = this.getImgPosition();
+    if (this.butsLayout.style.marginTop !== position.top - this.buts.position.top) {
+      this.butsLayout.style.marginTop = `${position.top - this.buts.position.top}px`;
+      this.buts.style.marginTop = `${position.top - this.buts.position.top}px`;
+    }
+    if (this.butsLayout.style.marginLeft !== position.left - this.buts.position.left) {
+      this.butsLayout.style.marginLeft = `${position.left - this.buts.position.left}px`;
+      this.buts.style.marginLeft = `${position.left - this.buts.position.left}px`;
+    }
+  },
+  initMouse() {
+    return { left: 0, top: 0, resize: false, name: '' };
+  },
+  resizeBegin(event) {
+    const point = event.target;
+    if (!point.classList.contains('cherry-previewer-img-size-handler__points')) {
+      return false;
+    }
+    this.mouseResize.left = event.clientX;
+    this.mouseResize.top = event.clientY;
+    this.mouseResize.resize = true;
+    this.mouseResize.name = point.getAttribute('data-name');
+    this.previewerDom.classList.add('doing-resize-img');
+  },
+  resizeStop(event, buts, editor, menu) {
+    if (!this.$isResizing()) {
+      return false;
+    }
+    this.img.style.width = `${this.buts.style.width}px`;
+    this.img.style.height = `${this.buts.style.height}px`;
+    this.buts.style.marginTop = 0;
+    this.buts.style.marginLeft = 0;
+    this.updateBubbleButs();
+    this.mouseResize.resize = false;
+    this.previewerDom.classList.remove('doing-resize-img');
+    this.change();
+  },
+  resizeWorking(event, buts) {
+    if (!this.$isResizing()) {
+      return;
+    }
+    const changeX = event.clientX - this.mouseResize.left;
+    const changeY = event.clientY - this.mouseResize.top;
+    let change = {};
+    switch (this.mouseResize.name) {
+      case 'leftTop':
+      case 'leftBottom':
+      case 'leftMiddle':
+        change = this.$getChange(changeX, changeY, 'x');
+        this.buts.style.width = this.buts.position.width - change.changeX;
+        if (this.mouseResize.name !== 'leftMiddle') {
+          this.buts.style.height = this.buts.position.height - change.changeY;
+        }
+        break;
+      case 'rightTop':
+      case 'rightBottom':
+      case 'rightMiddle':
+        change = this.$getChange(changeX, changeY, 'x');
+        this.buts.style.width = this.buts.position.width + change.changeX;
+        if (this.mouseResize.name !== 'rightMiddle') {
+          this.buts.style.height = this.buts.position.height + change.changeY;
+        }
+        break;
+      case 'middleTop':
+        change = this.$getChange(changeX, changeY, 'y');
+        this.buts.style.height = this.buts.position.height - change.changeY;
+        break;
+      case 'middleBottom':
+        change = this.$getChange(changeX, changeY, 'y');
+        this.buts.style.height = this.buts.position.height + change.changeY;
+        break;
+    }
+    this.updateBubbleButs();
+    this.change();
+  },
+  change() {
+    this.emitChange(this.img, { width: this.buts.style.width, height: this.buts.style.height });
+  },
+  bindChange(func) {
+    this.emitChange = func;
+  },
+  /**
+   * 根据宽（x）或高（y）来进行等比例缩放
+   * @param {number} x 宽度
+   * @param {number} y 高度
+   * @param {string} type 类型，以宽/高为基准做等比例缩放
+   * @returns
+   */
+  $getChange(x, y, type) {
+    const ret = { changeX: 0, changeY: 0 };
+    switch (type) {
+      case 'y':
+        ret.changeY = y;
+        ret.changeX = (y * this.buts.position.width) / this.buts.position.height;
+        break;
+      default:
+        ret.changeX = x;
+        ret.changeY = (x * this.buts.position.height) / this.buts.position.width;
+        break;
+    }
+    return ret;
+  },
+};
+
+export default imgSizeHandler;

package/src/utils/jsonUtils.js

@@ -0,0 +1,17 @@
+export default function extraJSON(src) {
+  if (typeof src === 'object') {
+    return src;
+  }
+  try {
+    return JSON.parse(src);
+  } catch (e) {
+    try {
+      // eslint-disable-next-line no-new-func
+      const fn = new Function(`return ${src}`);
+      return fn();
+    } catch (e) {
+      console.error('解析错误:', e);
+    }
+    return {};
+  }
+}

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(/<input[^>]*>/g, '');
+          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();
+  }
+}