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

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/FloatMenu.js

@@ -0,0 +1,131 @@
+/**
+ * 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';
+/**
+ * 当光标处于编辑器新行起始位置时出现的浮动工具栏
+ */
+export default class FloatMenu extends Toolbar {
+  // constructor(options) {
+  //     super(options);
+  // }
+
+  init() {
+    this.editor = this.$cherry.editor;
+    this.editorDom = this.editor.getEditorDom();
+    this.editorDom.querySelector('.CodeMirror-scroll').appendChild(this.options.dom);
+    this.initAction();
+    Object.entries(this.shortcutKeyMap).forEach(([key, value]) => {
+      this.$cherry.toolbar.shortcutKeyMap[key] = value;
+    });
+  }
+
+  appendMenusToDom(menus) {
+    this.options.dom.appendChild(menus);
+  }
+
+  initAction() {
+    const self = this;
+    this.editor.addListener('cursorActivity', (codemirror, evt) => {
+      // 当编辑区光标位置改变时触发
+      self.cursorActivity(evt, codemirror);
+    });
+
+    this.editor.addListener('update', (codemirror, evt) => {
+      // 当编辑区内容改变时触发
+      self.cursorActivity(evt, codemirror);
+    });
+
+    this.editor.addListener('refresh', (codemirror, evt) => {
+      // 当编辑器刷新时触发
+      setTimeout(() => {
+        self.cursorActivity(evt, codemirror);
+      }, 0);
+    });
+  }
+
+  update(evt, codeMirror) {
+    const pos = codeMirror.getCursor();
+    if (this.isHidden(pos.line, codeMirror)) {
+      this.options.dom.style.display = 'none';
+      return false;
+    }
+    this.options.dom.style.display = 'inline-block';
+  }
+
+  /**
+   * 当光标激活时触发，当光标处于行起始位置时展示float工具栏；反之隐藏
+   * @param {Event} evt
+   * @param {CodeMirror.Editor} codeMirror
+   * @returns
+   */
+  cursorActivity(evt, codeMirror) {
+    const pos = codeMirror.getCursor();
+    const codeMirrorLines = document.querySelector('.cherry-editor .CodeMirror-lines');
+    if (!codeMirrorLines) {
+      return false;
+    }
+    const computedLinesStyle = getComputedStyle(codeMirrorLines);
+    const codeWrapPaddingLeft = parseFloat(computedLinesStyle.paddingLeft);
+    const codeWrapPaddingTop = parseFloat(computedLinesStyle.paddingTop);
+    // const cursorHandle = codeMirror.getLineHandle(pos.line);
+    // const verticalMiddle = cursorHandle.height * 1 / 2;
+
+    if (this.isHidden(pos.line, codeMirror)) {
+      this.options.dom.style.display = 'none';
+      return false;
+    }
+    this.options.dom.style.display = 'inline-block';
+    this.options.dom.style.left = `${codeWrapPaddingLeft}px`;
+    this.options.dom.style.top = `${this.getLineHeight(pos.line, codeMirror) + codeWrapPaddingTop}px`;
+  }
+
+  /**
+   * 判断是否需要隐藏Float工具栏
+   * 有选中内容，或者光标所在行有内容时隐藏float 工具栏
+   * @param {number} line
+   * @param {CodeMirror.Editor} codeMirror
+   * @returns {boolean} 是否需要隐藏float工具栏，true：需要隐藏
+   */
+  isHidden(line, codeMirror) {
+    const selections = codeMirror.getSelections();
+    if (selections.length > 1) {
+      return true;
+    }
+    const selection = codeMirror.getSelection();
+    if (selection.length > 0) {
+      return true;
+    }
+    if (codeMirror.getLine(line)) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * 获取对应行的行高度，用来让float 工具栏在该行保持垂直居中
+   * @param {number} line
+   * @param {CodeMirror.Editor} codeMirror
+   * @returns
+   */
+  getLineHeight(line, codeMirror) {
+    let height = 0;
+    codeMirror.getDoc().eachLine(0, line, (line) => {
+      height += line.height;
+    });
+
+    return height;
+  }
+}

package/src/toolbars/HiddenToolbar.js

@@ -0,0 +1,36 @@
+/**
+ * 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';
+/**
+ * 预览区域右侧悬浮的工具栏
+ * 推荐放置跟编辑区域完全无关的工具栏
+ *    比如复制预览区域内容、修改预览区域主题等
+ */
+export default class HiddenToolbar extends Toolbar {
+  // constructor(options) {
+  //   super(options);
+  // }
+  appendMenusToDom(menus) {
+    return;
+  }
+
+  init() {
+    super.init();
+    Object.entries(this.shortcutKeyMap).forEach(([key, value]) => {
+      this.$cherry.toolbar.shortcutKeyMap[key] = value;
+    });
+  }
+}

package/src/toolbars/HookCenter.js

@@ -0,0 +1,234 @@
+/**
+ * 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 QuickTable from './hooks/QuickTable';
+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 InlineCode from './hooks/InlineCode';
+import CodeTheme from './hooks/CodeTheme';
+import Export from './hooks/Export';
+import Settings from './hooks/Settings';
+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 Formula from './hooks/Formula';
+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 Pdf from './hooks/Pdf';
+import File from './hooks/File';
+import Word from './hooks/Word';
+import Ruby from './hooks/Ruby';
+import Theme from './hooks/Theme';
+import WordCount from './hooks/WordCount';
+// import ChatGpt from './hooks/ChatGpt';
+// Sidebar
+import MobilePreview from './hooks/MobilePreview';
+import Copy from './hooks/Copy';
+import Panel from './hooks/Panel';
+import Justify from './hooks/Justify';
+import Detail from './hooks/Detail';
+import DrawIo from './hooks/DrawIo';
+import Publish from './hooks/Publish';
+import ChangeLocale from './hooks/ChangeLocale';
+import ShortcutKey from './hooks/ShortcutKey';
+import Search from './hooks/Search';
+
+// 定义默认支持的工具栏
+// 目前不支持按需动态加载
+// 如果对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,
+  quickTable: QuickTable,
+  togglePreview: TogglePreview,
+  code: Code,
+  inlineCode: InlineCode,
+  codeTheme: CodeTheme,
+  export: Export,
+  settings: Settings,
+  fullScreen: FullScreen,
+  mobilePreview: MobilePreview,
+  copy: Copy,
+  undo: Undo,
+  redo: Redo,
+  underline: Underline,
+  switchModel: SwitchModel,
+  image: Image,
+  audio: Audio,
+  video: Video,
+  br: Br,
+  hr: Hr,
+  formula: Formula,
+  link: Link,
+  table: Table,
+  toc: Toc,
+  lineTable: LineTable,
+  barTable: BarTable,
+  pdf: Pdf,
+  word: Word,
+  ruby: Ruby,
+  theme: Theme,
+  file: File,
+  panel: Panel,
+  justify: Justify,
+  detail: Detail,
+  drawIo: DrawIo,
+  wordCount: WordCount,
+  // chatgpt: ChatGpt,
+  publish: Publish,
+  changeLocale: ChangeLocale,
+  shortcutKey: ShortcutKey,
+  search: Search,
+};
+
+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 = {};
+    // menu 参数配置的属性名
+    this.menuOptionsKey = ['name', 'icon', 'subMenu'];
+    this.init();
+  }
+
+  /**
+   * 实例化菜单
+   * @param {string} name 菜单名称
+   * @param {null|import('~types/menus').CustomMenuConfig} options 菜单配置项
+   * @returns
+   */
+  $newMenu(name, options = null) {
+    if (this.hooks[name]) {
+      return;
+    }
+    /**
+     * 传入了options代表是新写法，不传兼容旧写法：即name和iconName一致，省去了在MenuBase的子类中调用setName
+     * 因为下面判断了name的合法性，这里就不需要再判断一次了，也防止了setName写错
+     * @type {import('~types/menus').CustomMenuConfig}
+     */
+    const currentMenuOptions = options || { name, icon: name };
+    const { $cherry, customMenu } = this.toolbar.options;
+    $cherry.$currentMenuOptions = currentMenuOptions;
+    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;
+          if (this.menuOptionsKey.includes(name)) {
+            throw Error(`this menu key is not allowed: ${name}, forbid menu key: ${this.menuOptionsKey}`);
+          }
+          console.warn(
+            `this subMenu config type will be deprecated, please use {subMenu: ['${name}']} config: ${item}`,
+          );
+          this.level1MenusName.push(name);
+          this.$newMenu(name);
+          this.level2MenusName[name] = item[name];
+          item[name].forEach((subItem) => {
+            this.$newMenu(subItem);
+          });
+        } else {
+          if (!item.name) {
+            return;
+          }
+          this.level1MenusName.push(item.name);
+          this.$newMenu(item.name, item);
+        }
+      }
+    });
+  }
+}