@cherry-markdown/cherry-markdown-dev 0.9.0-dev.202504110650.834443a → 0.9.0-dev.202504160300.d23d141

package/src/toolbars/BubbleTable.js

@@ -1,147 +0,0 @@
-/**
- * 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

@@ -1,131 +0,0 @@
-/**
- * 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

@@ -1,36 +0,0 @@
-/**
- * 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

@@ -1,231 +0,0 @@
-/**
- * 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}`);
-          }
-          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);
-        }
-      }
-    });
-  }
-}