cherry-muse 1.0.1

package/src/toolbars/Bubble.js

@@ -0,0 +1,232 @@
+/**
+ * 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 Toolbar from './Toolbar';
+import Event from '../Event';
+/**
+ * 在编辑区域选中文本时浮现的bubble工具栏
+ */
+export default class Bubble extends Toolbar {
+  /**
+   * @type {'flex' | 'block'}
+   */
+  static displayType = 'flex';
+  // constructor(options) {
+  //     super(options);
+  // }
+
+  set visible(visible) {
+    const bubbleStyle = window.getComputedStyle(this.bubbleDom);
+    if (visible) {
+      bubbleStyle.display === 'none' && (this.bubbleDom.style.display = Bubble.displayType);
+      // bubbleStyle.visibility !== 'visible' && (this.bubbleBottom.style.visibility = 'visible');
+    } else {
+      bubbleStyle.display !== 'none' && (this.bubbleDom.style.display = 'none');
+      // bubbleStyle.visibility !== 'hidden' && (this.bubbleBottom.style.visibility = 'hidden');
+    }
+  }
+
+  get visible() {
+    const bubbleStyle = window.getComputedStyle(this.bubbleDom);
+    return bubbleStyle.display !== 'none' && bubbleStyle.visibility !== 'hidden';
+  }
+
+  init() {
+    this.options.editor = this.$cherry.editor;
+    this.addSelectionChangeListener();
+    this.bubbleDom = this.options.dom;
+    this.editorDom = this.options.editor.getEditorDom();
+    this.initBubbleDom();
+    this.editorDom.querySelector('.CodeMirror').appendChild(this.bubbleDom);
+  }
+
+  appendMenusToDom(menus) {
+    this.options.dom.appendChild(menus);
+  }
+
+  /**
+   * 计算编辑区域的偏移量
+   * @returns {number} 编辑区域的滚动区域
+   */
+  getScrollTop() {
+    return this.options.editor.editor.getScrollInfo().top;
+  }
+
+  /**
+   * 当编辑区域滚动的时候自动隐藏bubble工具栏和子工具栏
+   */
+  updatePositionWhenScroll() {
+    if (this.bubbleDom.style.display === Bubble.displayType) {
+      this.bubbleDom.style.marginTop = `${parseFloat(this.bubbleDom.dataset.scrollTop) - this.getScrollTop()}px`;
+    }
+  }
+
+  /**
+   * 根据高度计算bubble工具栏出现的位置的高度
+   * 根据宽度计算bubble工具栏出现的位置的left值，以及bubble工具栏三角箭头的left值
+   * @param {number} top 高度
+   * @param {number} width 选中文本内容的宽度
+   */
+  showBubble(top, width) {
+    if (!this.visible) {
+      this.visible = true;
+      this.bubbleDom.style.marginTop = '0';
+      this.bubbleDom.dataset.scrollTop = String(this.getScrollTop());
+    }
+    const positionLimit = this.editorDom.querySelector('.CodeMirror-lines').firstChild.getBoundingClientRect();
+    const editorPosition = this.editorDom.getBoundingClientRect();
+    const minLeft = positionLimit.left - editorPosition.left;
+    const maxLeft = positionLimit.width + minLeft;
+    const minTop = this.bubbleDom.offsetHeight * 2;
+    let $top = top;
+    if ($top < minTop) {
+      // 如果高度小于编辑器的顶部，则让bubble工具栏出现在选中文本的下放
+      $top += this.bubbleDom.offsetHeight - this.bubbleTop.getBoundingClientRect().height;
+      this.bubbleTop.style.display = 'block';
+      this.bubbleBottom.style.display = 'none';
+    } else {
+      // 反之出现在选中文本内容的上方
+      $top -= this.bubbleDom.offsetHeight + 2 * this.bubbleBottom.getBoundingClientRect().height;
+      this.bubbleTop.style.display = 'none';
+      this.bubbleBottom.style.display = 'block';
+    }
+    this.bubbleDom.style.top = `${$top}px`;
+    let left = width - this.bubbleDom.offsetWidth / 2;
+    if (left < minLeft) {
+      // 如果位置超过了编辑器的最左边，则控制bubble工具栏不超出编辑器最左边
+      // 同时bubble工具栏上的箭头尽量指向选中文本内容的中间位置
+      left = minLeft;
+      this.$setBubbleCursorPosition(`${width - minLeft}px`);
+    } else if (left + this.bubbleDom.offsetWidth > maxLeft) {
+      // 如果位置超过了编辑器的最右边，则控制bubble工具栏不超出编辑器最右边
+      // 同时bubble工具栏上的箭头尽量指向选中文本内容的中间位置
+      left = maxLeft - this.bubbleDom.offsetWidth;
+      this.$setBubbleCursorPosition(`${width - left}px`);
+    } else {
+      // 让bubble工具栏的箭头处于工具栏的中间位置
+      this.$setBubbleCursorPosition('50%');
+    }
+    // 安全边距 20px
+    this.bubbleDom.style.left = `${Math.max(20, left)}px`;
+  }
+
+  hideBubble() {
+    this.visible = false;
+  }
+
+  /**
+   * 控制bubble工具栏的箭头的位置
+   * @param {string} left 左偏移量
+   */
+  $setBubbleCursorPosition(left = '50%') {
+    if (left === '50%') {
+      this.bubbleTop.style.left = '50%';
+      this.bubbleBottom.style.left = '50%';
+    } else {
+      const $left = parseFloat(left) < 10 ? '10px' : left;
+      this.bubbleTop.style.left = $left;
+      this.bubbleBottom.style.left = $left;
+    }
+  }
+
+  initBubbleDom() {
+    const top = document.createElement('div');
+    top.className = 'cherry-bubble-top';
+    const bottom = document.createElement('div');
+    bottom.className = 'cherry-bubble-bottom';
+    this.bubbleTop = top;
+    this.bubbleBottom = bottom;
+    this.bubbleDom.appendChild(top);
+    this.bubbleDom.appendChild(bottom);
+    // 默认不可见
+    this.visible = false;
+  }
+
+  getBubbleDom() {
+    return this.bubbleDom;
+  }
+
+  addSelectionChangeListener() {
+    this.options.editor.addListener('change', (codemirror) => {
+      // 当编辑区内容变更时自动隐藏bubble工具栏
+      this.hideBubble();
+    });
+    this.options.editor.addListener('refresh', (codemirror) => {
+      // 当编辑区内容刷新时自动隐藏bubble工具栏
+      this.hideBubble();
+    });
+    this.options.editor.addListener('scroll', (codemirror) => {
+      // 当编辑区滚动时，需要实时同步bubble工具栏的位置
+      this.updatePositionWhenScroll();
+    });
+    this.options.editor.addListener('beforeSelectionChange', (codemirror, info) => {
+      setTimeout(() => {
+        const selections = codemirror.getSelections();
+        const selectionStr = selections.join('');
+        if (selectionStr !== this.lastSelectionsStr && (selectionStr || this.lastSelectionsStr)) {
+          this.lastSelections = !this.lastSelections ? [] : this.lastSelections;
+          Event.emit('Bubble', 'selectionChange', { selections, lastSelections: this.lastSelections, info });
+          this.lastSelections = selections;
+          this.lastSelectionsStr = selectionStr;
+        }
+      }, 10);
+      // 当编辑区选中内容改变时，需要展示/隐藏bubble工具栏，并计算工具栏位置
+      if (info.origin !== '*mouse' && (info.origin !== null || typeof info.origin === 'undefined')) {
+        return true;
+      }
+      if (!info.ranges[0]) {
+        return true;
+      }
+      const anchor = info.ranges[0].anchor.line * 1000000 + info.ranges[0].anchor.ch;
+      const head = info.ranges[0].head.line * 1000000 + info.ranges[0].head.ch;
+      let direction = 'asc';
+      if (anchor > head) {
+        direction = 'desc';
+      }
+      setTimeout(() => {
+        const selections = codemirror.getSelections();
+        if (selections.join('').length <= 0) {
+          this.hideBubble();
+          return;
+        }
+        const selectedObjs = codemirror.getWrapperElement().getElementsByClassName('CodeMirror-selected');
+        const editorPosition = this.editorDom.getBoundingClientRect();
+        let width = 0;
+        let top = 0;
+        if (typeof selectedObjs !== 'object' || selectedObjs.length <= 0) {
+          this.hideBubble();
+          return;
+        }
+        for (let key = 0; key < selectedObjs.length; key++) {
+          const one = selectedObjs[key];
+          const position = one.getBoundingClientRect();
+          const targetTop = position.top - editorPosition.top;
+          if (direction === 'asc') {
+            if (targetTop >= top) {
+              top = targetTop;
+              width = position.left - editorPosition.left + position.width / 2;
+            }
+          } else {
+            if (targetTop <= top || top <= 0) {
+              top = targetTop;
+              width = position.left - editorPosition.left + position.width / 2;
+            }
+          }
+        }
+        this.showBubble(top, width);
+      }, 10);
+    });
+  }
+}

package/src/toolbars/BubbleTable.js

@@ -0,0 +1,147 @@
+/**
+ * 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 createTableItem = (dataset, className) => {
+  const dom = document.createElement('td');
+  dom.className = className || 'table-item';
+  Object.keys(dataset).forEach((prop) => {
+    dom.dataset[prop] = dataset[prop];
+  });
+  return dom;
+};
+
+/**
+ * 插入表格的辅助面板
+ */
+export default class BubbleTableMenu {
+  constructor({ row, col }, className) {
+    this.init(row, col, className);
+    this.initEventListeners();
+    this.afterClick = (...args) => {};
+  }
+
+  init(row, col, className) {
+    const container = document.createElement('table');
+    const cellArr = [];
+    const classNames = ['cherry-insert-table-menu', 'cherry-dropdown'];
+    container.className = classNames.join(' ');
+    for (let r = 1; r <= row; r++) {
+      const rowContainer = document.createElement('tr');
+      rowContainer.className = 'cherry-insert-table-menu-row';
+      cellArr[r - 1] = [];
+      for (let c = 1; c <= col; c++) {
+        const cell = createTableItem({ row: r, col: c }, 'cherry-insert-table-menu-item');
+        rowContainer.appendChild(cell);
+        cellArr[r - 1][c - 1] = cell;
+      }
+      container.appendChild(rowContainer);
+    }
+    container.style.display = 'none';
+    container.addEventListener('EditorHideToolbarSubMenu', () => {
+      this.hide();
+    });
+    this.dom = container;
+    this.cell = cellArr;
+    this.maxRow = row;
+    this.maxCol = col;
+    this.activeRow = 0;
+    this.activeCol = 0;
+    return this.dom;
+  }
+
+  initEventListeners() {
+    this.dom.addEventListener('mousemove', this.handleMouseMove.bind(this), false);
+    // 不能用click
+    this.dom.addEventListener('mouseup', this.handleMouseUp.bind(this));
+  }
+
+  setActiveCell(row, col) {
+    if (this.activeRow === row && this.activeCol === col) {
+      return;
+    }
+    const minRow = Math.min(this.activeRow, row);
+    const maxRow = Math.max(this.activeRow, row);
+    if (minRow !== maxRow) {
+      // 先清空或按照历史列数增减active类
+      for (let r = maxRow; r > minRow; r--) {
+        for (let c = 1; c <= this.activeCol; c++) {
+          this.cell[r - 1][c - 1].classList.toggle('active');
+        }
+      }
+    }
+    const minCol = Math.min(this.activeCol, col);
+    const maxCol = Math.max(this.activeCol, col);
+    if (minCol !== maxCol) {
+      for (let c = maxCol; c > minCol; c--) {
+        for (let r = 1; r <= row; r++) {
+          this.cell[r - 1][c - 1].classList.toggle('active');
+        }
+      }
+    }
+    this.activeRow = row;
+    this.activeCol = col;
+  }
+
+  handleMouseMove(event) {
+    let { target } = event;
+    if (target === this.dom) {
+      return;
+    }
+    if (!target.classList.contains('cherry-insert-table-menu-item')) {
+      target = target.querySelector('.cherry-insert-table-menu-item');
+    }
+    if (!target) {
+      return;
+    }
+    this.setActiveCell(target.dataset.row, target.dataset.col);
+  }
+
+  handleMouseUp(event) {
+    let { target } = event;
+    if (target === this.dom) {
+      this.afterClick(this.activeRow, this.activeCol);
+      this.hide();
+      return;
+    }
+    if (!target.classList.contains('cherry-insert-table-menu-item')) {
+      target = target.querySelector('.cherry-insert-table-menu-item');
+    }
+    if (!target) {
+      this.afterClick(this.activeRow, this.activeCol);
+      this.hide();
+      return;
+    }
+    // 正中单元格时才使用target的dataset
+    this.afterClick(this.activeRow, this.activeCol);
+    this.hide();
+  }
+
+  show(callback) {
+    this.dom.style.display = 'block';
+    this.afterClick = callback;
+  }
+
+  hide() {
+    this.dom.style.display = 'none';
+    // reset active status
+    for (let r = 0; r < this.maxRow; r++) {
+      for (let c = 0; c < this.maxCol; c++) {
+        this.cell[r][c].classList.remove('active');
+      }
+    }
+    this.activeRow = 0;
+    this.activeCol = 0;
+  }
+}

package/src/toolbars/HookCenter.js

@@ -0,0 +1,185 @@
+/**
+ * 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 Bold from './hooks/Bold';
+import Italic from './hooks/Italic';
+import Split from './hooks/Split';
+import Strikethrough from './hooks/Strikethrough';
+import Sub from './hooks/Sub';
+import Sup from './hooks/Sup';
+import Color from './hooks/Color';
+import Header from './hooks/Header';
+import Insert from './hooks/Insert';
+import List from './hooks/List';
+import Ol from './hooks/Ol';
+import Ul from './hooks/Ul';
+import CheckList from './hooks/CheckList';
+import Graph from './hooks/Graph';
+import Size from './hooks/Size';
+import H1 from './hooks/H1';
+import H2 from './hooks/H2';
+import H3 from './hooks/H3';
+import Quote from './hooks/Quote';
+import TogglePreview from './hooks/TogglePreview';
+import FullScreen from './hooks/FullScreen';
+import Undo from './hooks/Undo';
+import Redo from './hooks/Redo';
+import Code from './hooks/Code';
+import Export from './hooks/Export';
+import Underline from './hooks/Underline';
+import SwitchModel from './hooks/SwitchModel';
+import Image from './hooks/Image';
+import Audio from './hooks/Audio';
+import Video from './hooks/Video';
+import Br from './hooks/Br';
+import Hr from './hooks/Hr';
+import Link from './hooks/Link';
+import Table from './hooks/Table';
+import Toc from './hooks/Toc';
+import LineTable from './hooks/LineTable';
+import BarTable from './hooks/BarTable';
+
+import File from './hooks/File';
+import Ruby from './hooks/Ruby';
+// SideToc
+import Copy from './hooks/Copy';
+import Panel from './hooks/Panel';
+import Detail from './hooks/Detail';
+import Badge from './hooks/Badge';
+import ECharts from './hooks/ECharts';
+import Card from '@/toolbars/hooks/Card';
+import Formula from '@/toolbars/hooks/Formula';
+import Emoji from '@/toolbars/hooks/Emoji';
+import Iframe from '@/toolbars/hooks/Iframe';
+// 定义默认支持的工具栏
+// 目前不支持按需动态加载
+// 如果对CherryMarkdown构建后的文件大小有比较严格的要求，可以根据实际情况删减hook
+const HookList = {
+  bold: Bold,
+  italic: Italic,
+  '|': Split,
+  strikethrough: Strikethrough,
+  sub: Sub,
+  sup: Sup,
+  header: Header,
+  insert: Insert,
+  list: List,
+  ol: Ol,
+  ul: Ul,
+  checklist: CheckList,
+  graph: Graph,
+  size: Size,
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  color: Color,
+  quote: Quote,
+  togglePreview: TogglePreview,
+  code: Code,
+  export: Export,
+  fullScreen: FullScreen,
+  copy: Copy,
+  undo: Undo,
+  redo: Redo,
+  underline: Underline,
+  switchModel: SwitchModel,
+  image: Image,
+  audio: Audio,
+  video: Video,
+  br: Br,
+  hr: Hr,
+  link: Link,
+  table: Table,
+  toc: Toc,
+  lineTable: LineTable,
+  barTable: BarTable,
+  ruby: Ruby,
+  file: File,
+  panel: Panel,
+  detail: Detail,
+  badge: Badge,
+  echarts: ECharts,
+  card: Card,
+  formula: Formula,
+  emoji: Emoji,
+  iframe: Iframe,
+};
+
+export default class HookCenter {
+  constructor(toolbar) {
+    this.toolbar = toolbar;
+    /**
+     * @type {{[key: string]: import('@/toolbars/MenuBase').default}} 保存所有菜单实例
+     */
+    this.hooks = {};
+    /**
+     * @type {string[]} 所有注册的菜单名称
+     */
+    this.allMenusName = [];
+    /**
+     * @type {string[]} 一级菜单的名称
+     */
+    this.level1MenusName = [];
+    /**
+     * @type {{ [parentName: string]: string[]}} 二级菜单的名称, e.g. {一级菜单名称: [二级菜单名称1, 二级菜单名称2]}
+     */
+    this.level2MenusName = {};
+    this.init();
+  }
+
+  $newMenu(name) {
+    if (this.hooks[name]) {
+      return;
+    }
+    const { $cherry, customMenu } = this.toolbar.options;
+    if (HookList[name]) {
+      this.allMenusName.push(name);
+      this.hooks[name] = new HookList[name]($cherry);
+    } else if (customMenu !== undefined && customMenu !== null && customMenu[name]) {
+      this.allMenusName.push(name);
+      // 如果是自定义菜单，传参兼容旧版
+      this.hooks[name] = new customMenu[name]($cherry);
+    }
+  }
+
+  /**
+   * 根据配置动态渲染、绑定工具栏
+   * @returns
+   */
+  init() {
+    const { buttonConfig } = this.toolbar.options;
+    buttonConfig.forEach((item) => {
+      if (typeof item === 'string') {
+        this.level1MenusName.push(item);
+        this.$newMenu(item);
+      } else if (typeof item === 'object') {
+        const keys = Object.keys(item);
+        if (keys.length === 1) {
+          // 只接受形如{ name: [ subMenu ] }的参数
+          const [name] = keys;
+          this.level1MenusName.push(name);
+          this.$newMenu(name);
+          this.level2MenusName[name] = item[name];
+          item[name].forEach((subItem) => {
+            this.$newMenu(subItem);
+          });
+        }
+      }
+    });
+  }
+}