cherry-muse 1.0.1

package/src/toolbars/Toc.js

@@ -0,0 +1,246 @@
+/**
+ * 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';
+import Event from '../Event';
+import md5 from 'md5';
+/**
+ * 悬浮目录
+ */
+export default class Toc {
+  constructor(options) {
+    this.$cherry = options.$cherry;
+    this.editor = options.$cherry.editor.editor;
+    this.tocStr = '';
+    this.updateLocationHash = options.updateLocationHash ?? true;
+    this.defaultModel = options.defaultModel ?? 'full';
+    this.showAutoNumber = options.showAutoNumber ?? false;
+    this.position = options.position ?? 'absolute';
+    this.cssText = options.cssText ?? '';
+    this.init();
+  }
+
+  init() {
+    this.drawDom();
+    this.timer = setTimeout(() => {
+      this.updateTocList();
+    }, 300);
+    Event.on('editor', 'change', (editor) => {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.updateTocList();
+        this.$switchModel(this.model);
+      }, 300);
+    });
+    this.$switchModel(this.getModelFromLocalStorage());
+  }
+
+  getModelFromLocalStorage() {
+    if (typeof localStorage === 'undefined') {
+      return this.defaultModel;
+    }
+    return localStorage.getItem('cherry-toc-model') || this.defaultModel;
+  }
+
+  setModelToLocalStorage(model) {
+    if (typeof localStorage === 'undefined') {
+      return;
+    }
+    localStorage.setItem('cherry-toc-model', model);
+  }
+
+  drawDom() {
+    const tocDom = createElement(
+      'div',
+      `cherry-flex-toc cherry-flex-toc__pure${this.showAutoNumber ? ' auto-num' : ''}`,
+    );
+    if (this.position === 'fixed') {
+      tocDom.classList.add('cherry-flex-toc__fixed');
+    }
+
+    if (this.cssText.length > 0) {
+      tocDom.style.cssText = this.cssText;
+    }
+
+    const tocHead = createElement('div', 'cherry-toc-head');
+    const tocTitle = createElement('span', 'cherry-toc-title');
+    tocTitle.append(this.$cherry.locale.toc);
+    const tocClose = createElement('span', 'material-symbols-outlined ch-icon ch-icon-chevronsRight ');
+    tocClose.append('keyboard_double_arrow_right');
+    const tocOpen = createElement('span', 'material-symbols-outlined ch-icon ch-icon-chevronsLeft ');
+    tocOpen.append('keyboard_double_arrow_left');
+    this.tocClose = tocClose;
+    this.tocOpen = tocOpen;
+    tocHead.appendChild(tocTitle);
+    tocHead.appendChild(tocClose);
+    tocHead.appendChild(tocOpen);
+    tocDom.appendChild(tocHead);
+    const tocListDom = createElement('div', 'cherry-toc-list');
+    this.tocListDom = tocListDom;
+    tocDom.appendChild(tocListDom);
+    this.tocDom = tocDom;
+    this.$cherry.wrapperDom.appendChild(tocDom);
+    this.bindClickEvent();
+  }
+
+  bindClickEvent() {
+    this.tocDom.addEventListener('click', (e) => {
+      const a = this.$getClosestNode(e.target, 'A');
+      if (a === false) {
+        return;
+      }
+      if (/cherry-toc-one-a/.test(a.className)) {
+        const { id, index } = a.dataset;
+        if (this.$cherry.status.previewer === 'hide') {
+          // editorOnly模式下，需要定位到编辑区对应位置
+          const searcher = this.$cherry.editor.editor.getSearchCursor(
+            /(?:^|\n)\n*((?:[ \t\u00a0]*#{1,6}).+?|(?:[ \t\u00a0]*.+)\n(?:[ \t\u00a0]*[=]+|[-]+))(?=$|\n)/g,
+          );
+          for (let i = 0; i <= index; i++) {
+            searcher.findNext();
+          }
+          const target = searcher.from();
+          this.$cherry.editor.scrollToLineNum(target.line, target.line + 1, 0);
+        } else {
+          // 有预览的情况下，直接通过滚动预览区位置实现滚动到锚点
+          this.$cherry.previewer.scrollToHeadByIndex(index);
+        }
+        if (this.updateLocationHash) {
+          location.href = id;
+        }
+      }
+    });
+    this.tocClose.addEventListener('click', (e) => {
+      this.$switchModel('pure');
+      this.setModelToLocalStorage('pure');
+    });
+    this.tocOpen.addEventListener('click', (e) => {
+      this.$switchModel('full');
+      this.setModelToLocalStorage('full');
+    });
+    if (window) {
+      window.addEventListener('resize', () => {
+        this.$switchModel(this.model);
+      });
+    }
+    this.editor.on('scroll', (codemirror, evt) => {
+      this.updateTocList(true);
+    });
+    const scrollDom = this.$cherry.previewer.getDomCanScroll();
+    if (scrollDom.nodeName === 'HTML') {
+      window.addEventListener('scroll', () => {
+        this.updateTocList(true);
+      });
+    } else {
+      scrollDom.addEventListener('scroll', () => {
+        this.updateTocList(true);
+      });
+    }
+  }
+
+  $switchModel(model = 'pure') {
+    this.model = model;
+    const targetClassName = `cherry-flex-toc__${model}`;
+    if (!this.tocDom.classList.contains(targetClassName)) {
+      this.tocDom.classList.remove(`cherry-flex-toc__pure`);
+      this.tocDom.classList.remove(`cherry-flex-toc__full`);
+      this.tocDom.classList.add(targetClassName);
+    }
+    const list = this.tocListDom.querySelectorAll('.cherry-toc-one-a');
+    if (list.length > 0) {
+      let targetHeight = 28;
+      if (model === 'pure') {
+        const { height } = this.tocListDom.getBoundingClientRect();
+        const minHeight = Math.floor((height - list.length * 3) / list.length);
+        // eslint-disable-next-line no-nested-ternary
+        targetHeight = minHeight < 3 ? 3 : minHeight > 10 ? 10 : minHeight;
+      }
+      for (let i = 0; i < list.length; i++) {
+        // @ts-ignore
+        if (list[i].style.height !== `${targetHeight}px`) {
+          // @ts-ignore
+          list[i].style.height = `${targetHeight}px`;
+        }
+      }
+    }
+  }
+
+  $getClosestNode(node, targetNodeName) {
+    if (!node || !node.tagName) {
+      return false;
+    }
+    if (node.tagName === targetNodeName) {
+      return node;
+    }
+    if (node.parentNode.tagName === 'BODY') {
+      return false;
+    }
+    return this.$getClosestNode(node.parentNode, targetNodeName);
+  }
+
+  updateTocList(onlyScroll = false) {
+    if (onlyScroll === true) {
+      // do nothing
+    } else {
+      const tocList = this.$cherry.getToc();
+      let tocStr = '';
+      tocList.map((item) => {
+        tocStr += item.text;
+        return item;
+      });
+      tocStr = md5(tocStr);
+      if (this.tocStr !== tocStr) {
+        this.tocStr = tocStr;
+        let tocHtml = '';
+        let index = 0;
+        tocList.map((item) => {
+          const text = item.text.replace(/<a .+?<\/a>/g, '');
+          const title = text.replace(/<[^>]+?>/g, '');
+          tocHtml += `<a class="cherry-toc-one-a cherry-toc-one-a__${item.level > 5 ? 5 : item.level}"
+            title="${title}"
+            data-index="${index}"
+            data-id="#${item.id}"
+            >${text}</a>`;
+          index += 1;
+          return item;
+        });
+        this.tocListDom.innerHTML = tocHtml;
+      }
+    }
+    // 处理当前标题的高亮
+    if (this.$cherry.status.previewer === 'hide') {
+      // 似乎没有特别好的办法，先欠着
+    } else {
+      const scrollDom = this.$cherry.previewer.getDomCanScroll();
+      const minY = scrollDom.nodeName === 'HTML' ? 0 : scrollDom.getBoundingClientRect().y;
+      const headList = this.$cherry.previewer.getDomContainer().querySelectorAll('h1,h2,h3,h4,h5,h6');
+      let index = 0;
+      for (; index < headList.length; index++) {
+        const { y } = headList[index].getBoundingClientRect();
+        if (y > minY + 20) {
+          break;
+        }
+      }
+      index = index > 0 ? index - 1 : index;
+      this.tocListDom.querySelectorAll('.cherry-toc-one-a').forEach((item, key) => {
+        if (key === index) {
+          item.classList.add('current');
+        } else {
+          item.classList.remove('current');
+        }
+      });
+    }
+  }
+}

package/src/toolbars/Toolbar.js

@@ -0,0 +1,401 @@
+/**
+ * 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 { mac } from 'codemirror/src/util/browser';
+import HookCenter from './HookCenter';
+import Event from '@/Event';
+import { createElement } from '@/utils/dom';
+import Logger from '@/Logger';
+
+/**
+ * @typedef {()=>void} Bold 向cherry编辑器中插入粗体语法
+ * @typedef {()=>void} Italic 向cherry编辑器中插入斜体语法
+ * @typedef {(level:1|2|3|4|5|'1'|'2'|'3'|'4'|'5')=>void} Header  向cherry编辑器中插入标题语法
+ * - level 标题等级 1~5
+ * @typedef {()=>void} Strikethrough 向cherry编辑器中插入删除线语法
+ * @typedef {(type:'ol'|'ul'|'checklist'|1|2|3|'1'|'2'|'3')=>void} List 向cherry编辑器中插入有序、无序列表或者checklist语法
+ * - ol(1)有序
+ * - ul(2)无序列表
+ * - checklist(3)checklist
+ * @typedef {(insert:'hr'|'br'|'code'|'formula'|'checklist'|'toc'|'link'|'image'|'video'|'audio'|'normal-table'|'normal-table-row*col')=>void} Insert 向cherry编辑器中插入特定语法
+ * - hr 水平分割线
+ * - br 换行
+ * - code 代码块
+ * - formula 公式
+ * - checklist 检查项
+ * - toc 目录
+ * - link 链接
+ * - image 图片
+ * - video 视频
+ * - audio 音频
+ * - normal-table 插入3行5列的表格
+ * - normal-table-row*col 如normal-table-2*4插入2行(包含表头是3行)4列的表格
+ * @typedef {(type:'1'|'2'|'3'|'4'|'5'|'6'|1|2|3|4|5|6|'flow'|'sequence'|'state'|'class'|'pie'|'gantt')=>void} Graph 向cherry编辑器中插入画图语法
+ * - flow(1) 流程图
+ * - sequence(2) 时序图
+ * - state(3)状态图
+ * - class(4)类图
+ * - pie(5)饼图
+ * - gantt(6)甘特图
+ */
+
+export default class Toolbar {
+  /**
+   * @typedef {{
+   * bold?:Bold;
+   * italic?:Italic;
+   * header?:Header;
+   * strikethrough?:Strikethrough;
+   * list?:List;
+   * insert?:Insert;
+   * graph?:Graph;
+   * [key:string]:any;
+   * }} ToolbarHandlers
+   * @type ToolbarHandlers 外部获取 toolbarHandlers 的部分功能
+   */
+  toolbarHandlers = {};
+
+  constructor(options) {
+    // 存储所有菜单的实例
+    this.menus = {};
+    // 存储所有快捷键的影射  {快捷键: 菜单名称}
+    this.shortcutKeyMap = {};
+    // 存储所有二级菜单面板
+    this.subMenus = {};
+    this.currentActiveSubMenu = null;
+    // 默认的菜单配置
+    this.options = {
+      dom: document.createElement('div'),
+      buttonConfig: ['bold'],
+      customMenu: [],
+      position: 'left',
+    };
+
+    Object.assign(this.options, options);
+    this.$cherry = this.options.$cherry;
+    this.instanceId = this.$cherry.instanceId;
+    this.menus = new HookCenter(this);
+    this.drawMenus();
+    this.collectShortcutKey();
+    this.collectToolbarHandler();
+    this.init();
+  }
+
+  init() {
+    Event.on(this.instanceId, Event.Events.cleanAllSubMenus, () => this.hideAllSubMenu());
+  }
+  previewOnly() {
+    this.options.dom.classList.add('preview-only');
+    this.$cherry.wrapperDom.classList.add('cherry--no-toolbar');
+    Event.emit(this.instanceId, Event.Events.toolbarHide);
+  }
+
+  showToolbar() {
+    this.options.dom.classList.remove('preview-only');
+    this.$cherry.wrapperDom.classList.remove('cherry--no-toolbar');
+    Event.emit(this.instanceId, Event.Events.toolbarShow);
+  }
+
+  isHasLevel2Menu(name) {
+    // FIXME: return boolean
+    return this.menus.level2MenusName[name];
+  }
+
+  isHasConfigMenu(name) {
+    // FIXME: return boolean
+    return this.menus.hooks[name].subMenuConfig || [];
+  }
+
+  /**
+   * 判断是否有子菜单，目前有两种子菜单配置方式：1、通过`subMenuConfig`属性 2、通过`buttonConfig`配置属性
+   * @param {string} name
+   * @returns {boolean} 是否有子菜单
+   */
+  isHasSubMenu(name) {
+    return Boolean(this.isHasLevel2Menu(name) || this.isHasConfigMenu(name).length > 0);
+  }
+
+  /**
+   * 根据配置画出来一级工具栏
+   */
+  drawMenus() {
+    const fragLeft = document.createDocumentFragment();
+
+    this.menus.level1MenusName.forEach((name) => {
+      const btn = this.menus.hooks[name].createBtn();
+      if (typeof window === 'object' && 'onpointerup' in window) {
+        // 只有先down再up的才触发click逻辑，避免误触（尤其是float menu的场景）
+        btn.addEventListener(
+          'pointerdown',
+          () => {
+            this.isPointerDown = true;
+          },
+          false,
+        );
+        btn.addEventListener(
+          'pointerup',
+          (event) => {
+            this.isPointerDown && this.onClick(event, name);
+            this.isPointerDown = false;
+          },
+          false,
+        );
+      } else {
+        // vscode 插件里不支持 pointer event
+        btn.addEventListener(
+          'click',
+          (event) => {
+            this.onClick(event, name);
+          },
+          false,
+        );
+      }
+      if (this.isHasSubMenu(name)) {
+        btn.classList.add('cherry-toolbar-dropdown');
+      }
+      fragLeft.appendChild(btn);
+    });
+
+    this.appendMenusToDom(fragLeft);
+  }
+
+  appendMenusToDom(menus) {
+    const position = this.options.position === 'right' ? 'right' : 'left';
+    const className = `toolbar-${position}`;
+    let toolbarContainer = this.options.dom.querySelector(`.${className}`);
+    if (!toolbarContainer) {
+      toolbarContainer = createElement('div', className);
+      this.options.dom.appendChild(toolbarContainer);
+    }
+    toolbarContainer.appendChild(menus);
+  }
+
+  setSubMenuPosition(menuObj, subMenuObj) {
+    const pos = menuObj.getMenuPosition();
+    subMenuObj.style.left = `${pos.left + pos.width / 2}px`;
+    subMenuObj.style.top = `${pos.top + pos.height}px`;
+    subMenuObj.style.position = menuObj.positionModel;
+  }
+
+  drawSubMenus(name) {
+    this.subMenus[name] = createElement('div', 'cherry-dropdown', { name });
+    this.setSubMenuPosition(this.menus.hooks[name], this.subMenus[name]);
+    // 如果有配置的二级菜单
+    const level2MenusName = this.isHasLevel2Menu(name);
+    if (level2MenusName) {
+      level2MenusName.forEach((level2Name) => {
+        const subMenu = this.menus.hooks[level2Name];
+        if (subMenu !== undefined && typeof subMenu.createBtn === 'function') {
+          const btn = subMenu.createBtn(true);
+          // 二级菜单的dom认定为一级菜单的
+          subMenu.dom = subMenu.dom ? subMenu.dom : this.menus.hooks[name].dom;
+          btn.addEventListener('click', (event) => this.onClick(event, level2Name, true), false);
+          this.subMenus[name].appendChild(btn);
+        }
+      });
+    }
+    // 兼容旧版本配置的二级菜单
+    const subMenuConfig = this.isHasConfigMenu(name);
+    if (subMenuConfig.length > 0) {
+      subMenuConfig.forEach((config) => {
+        const btn = this.menus.hooks[name].createSubBtnByConfig(config);
+        if (!config?.disabledHideAllSubMenu) {
+          btn.addEventListener('click', () => this.hideAllSubMenu(), false);
+        }
+        this.subMenus[name].appendChild(btn);
+      });
+    }
+    this.$cherry.wrapperDom.appendChild(this.subMenus[name]);
+  }
+
+  /**
+   * 处理点击事件
+   */
+  onClick(event, name, focusEvent = false) {
+    const menu = this.menus.hooks[name];
+    if (!menu) {
+      return;
+    }
+    if (this.isHasSubMenu(name) && !focusEvent) {
+      this.toggleSubMenu(name);
+    } else {
+      /**
+       * 如果定义了hideOtherSubMenu，则隐藏其他二级菜单，但不隐藏自己（因为其二级菜单是自己实现的独立逻辑）
+       *  比如：颜色选择器、快捷键配置
+       */
+      // @ts-ignore
+      if (typeof menu.hideOtherSubMenu === 'function') {
+        // @ts-ignore
+        menu.hideOtherSubMenu(() => this.hideAllSubMenu());
+      } else {
+        this.hideAllSubMenu();
+      }
+      menu.fire(event, name);
+    }
+  }
+
+  /**
+   * 激活二级菜单添加选中颜色
+   * @param {string} name
+   */
+  activeSubMenuItem(name) {
+    const subMenu = this.subMenus[name];
+    const index = this.menus.hooks?.[name]?.getActiveSubMenuIndex(subMenu);
+    subMenu?.querySelectorAll('.cherry-dropdown-item').forEach((item, i) => {
+      item.classList.toggle('cherry-dropdown-item__selected', i === index);
+    });
+  }
+  updateSubMenuPosition() {
+    if (this.currentActiveSubMenu && this.subMenus[this.currentActiveSubMenu]) {
+      this.setSubMenuPosition(this.menus.hooks[this.currentActiveSubMenu], this.subMenus[this.currentActiveSubMenu]);
+    }
+  }
+
+  /**
+   * 展开/收起二级菜单
+   */
+  toggleSubMenu(name) {
+    if (!this.subMenus[name]) {
+      // 如果没有二级菜单，则先画出来，然后再显示
+      this.hideAllSubMenu();
+      this.drawSubMenus(name);
+      this.subMenus[name].style.display = 'block';
+      this.activeSubMenuItem(name);
+      this.currentActiveSubMenu = name;
+      return;
+    }
+    if (this.subMenus[name].style.display === 'none') {
+      // 如果是隐藏的，则先隐藏所有二级菜单，再显示当前二级菜单
+      this.hideAllSubMenu();
+      this.subMenus[name].style.display = 'block';
+      this.setSubMenuPosition(this.menus.hooks[name], this.subMenus[name]);
+      this.activeSubMenuItem(name);
+      this.currentActiveSubMenu = name;
+    } else {
+      // 如果是显示的，则隐藏当前二级菜单
+      this.subMenus[name].style.display = 'none';
+      this.currentActiveSubMenu = null;
+    }
+  }
+
+  /**
+   * 隐藏所有的二级菜单
+   */
+  hideAllSubMenu() {
+    this.currentActiveSubMenu = null;
+    this.$cherry.wrapperDom.querySelectorAll('.cherry-dropdown').forEach((dom) => {
+      dom.style.display = 'none';
+    });
+  }
+
+  /**
+   * 收集工具栏的各项信息，主要有：
+   *   this.toolbarHandlers
+   *   this.menus.hooks
+   *   this.shortcutKeyMap
+   * @param {Toolbar} toolbarObj 工具栏对象
+   */
+  collectMenuInfo(toolbarObj) {
+    this.toolbarHandlers = Object.assign({}, this.toolbarHandlers, toolbarObj.toolbarHandlers);
+    this.menus.hooks = Object.assign({}, toolbarObj.menus.hooks, this.menus.hooks);
+    // 只有没设置自定义快捷键的时候才需要收集其他toolbar对象的快捷键配置
+    if (!this.options.shortcutKey || Object.keys(this.options.shortcutKey).length <= 0) {
+      this.shortcutKeyMap = Object.assign({}, this.shortcutKeyMap, toolbarObj.shortcutKeyMap);
+    }
+  }
+
+  /**
+   * 收集快捷键
+   */
+  collectShortcutKey() {
+    if (this.options.shortcutKey && Object.keys(this.options.shortcutKey).length > 0) {
+      this.shortcutKeyMap = this.options.shortcutKey;
+    } else {
+      this.menus.allMenusName.forEach((name) => {
+        this.menus.hooks[name].shortcutKeys?.forEach((key) => {
+          this.shortcutKeyMap[key] = name;
+        });
+      });
+    }
+  }
+
+  collectToolbarHandler() {
+    this.toolbarHandlers = this.menus.allMenusName.reduce((handlerMap, name) => {
+      const menuHook = this.menus.hooks[name];
+      if (!menuHook) {
+        return handlerMap;
+      }
+      handlerMap[name] = (shortcut, _callback) => {
+        if (typeof _callback === 'function') {
+          Logger.warn(
+            'MenuBase#onClick param callback is no longer supported. Please register the callback via MenuBase#registerAfterClickCb instead.',
+          );
+        }
+        menuHook.fire.call(menuHook, undefined, shortcut);
+      };
+      return handlerMap;
+    }, {});
+  }
+
+  /**
+   * 监测是否有对应的快捷键
+   * @param {KeyboardEvent} evt keydown 事件
+   * @returns {boolean} 是否有对应的快捷键
+   */
+  matchShortcutKey(evt) {
+    return !!this.shortcutKeyMap[this.getCurrentKey(evt)];
+  }
+
+  /**
+   * 触发对应快捷键的事件
+   * @param {KeyboardEvent} evt
+   */
+  fireShortcutKey(evt) {
+    const currentKey = this.getCurrentKey(evt);
+    this.menus.hooks[this.shortcutKeyMap[currentKey]]?.fire(evt, currentKey);
+  }
+
+  /**
+   * 格式化当前按键，mac下的command按键转换为ctrl
+   * @param {KeyboardEvent} event
+   * @returns
+   */
+  getCurrentKey(event) {
+    let key = '';
+    if (event.ctrlKey) {
+      key += 'Ctrl-';
+    }
+
+    if (event.altKey) {
+      key += 'Alt-';
+    }
+
+    if (event.metaKey && mac) {
+      key += 'Ctrl-';
+    }
+
+    // 如果存在shift键
+    if (event.shiftKey) {
+      key += `Shift-`;
+    }
+
+    // 如果还有第三个键 且不是 shift键
+    if (event.key && event.key.toLowerCase() !== 'shift') {
+      key += event.key.toLowerCase();
+    }
+
+    return key;
+  }
+}

package/src/toolbars/hooks/Audio.js

@@ -0,0 +1,53 @@
+/**
+ * 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 MenuBase from '@/toolbars/MenuBase';
+import { handleUpload, handleParams } from '@/utils/file';
+/**
+ * 插入音频
+ */
+export default class Audio extends MenuBase {
+  constructor($cherry) {
+    super($cherry);
+    this.setName('audio', 'mic');
+  }
+
+  /**
+   * 响应点击事件
+   * @param {string} selection 被用户选中的文本内容
+   * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
+   */
+  onClick(selection, shortKey = '') {
+    if (this.hasCacheOnce()) {
+      // @ts-ignore
+      const { name, url, params } = this.getAndCleanCacheOnce();
+      const begin = '!audio[';
+      const end = `](${url})`;
+      this.registerAfterClickCb(() => {
+        this.setLessSelection(begin, end);
+      });
+      const finalName = params.name ? params.name : name;
+      return `${begin}${finalName}${handleParams(params)}${end}`;
+    }
+    const accept = this.$cherry.options?.fileTypeLimitMap?.audio ?? '*';
+    // 插入图片，调用上传文件逻辑
+    handleUpload(this.editor, 'audio', accept, (name, url, params) => {
+      this.setCacheOnce({ name, url, params });
+      this.fire(null);
+    });
+    this.updateMarkdown = false;
+    return selection;
+  }
+}