feat: 通过快捷键来实现显示|隐藏 toolbar 或设置按钮子菜单隐藏toolbar #268

Tencent · Aug 16, 2022 · 8c05a87 · 8c05a87
1 parent 10cce7d
commit 8c05a87
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 26 deletions.
diff --git a/src/toolbars/hooks/Insert.js b/src/toolbars/hooks/Insert.js
@@ -16,18 +16,15 @@
 import MenuBase from '@/toolbars/MenuBase';
 import BubbleTableMenu from '@/toolbars/BubbleTable';
 import { getSelection } from '@/utils/selection';
-import Event from '@/Event';
 /**
  * "插入"按钮
  */
 export default class Insert extends MenuBase {
-  $toolbarStatus = false;
   // TODO: 需要优化参数传入方式
   constructor(editor, options, engine) {
     super(editor);
     this.setName('insert', 'insert');
-    this.$toolbarStatus = engine.markdownParams.toolbars.showToolbar; // 获取toolbar默认配置
-    this.engine = engine;
+
     this.subBubbleTableMenu = new BubbleTableMenu({ row: 9, col: 9 });
     editor.options.wrapperDom.appendChild(this.subBubbleTableMenu.dom);
 
@@ -53,7 +50,6 @@ export default class Insert extends MenuBase {
       { iconName: 'pdf', name: 'pdf', onclick: this.bindSubClick.bind(this, 'pdf') },
       { iconName: 'word', name: 'word', onclick: this.bindSubClick.bind(this, 'word') },
       { iconName: 'pinyin', name: 'ruby', onclick: this.bindSubClick.bind(this, 'ruby') },
-      { iconName: '', name: 'toggleToolbar', onclick: this.bindSubClick.bind(this, 'toggleToolbar') },
     ];
     // 用户可配置
     if (options instanceof Array) {
@@ -245,9 +241,6 @@ export default class Insert extends MenuBase {
           return $selection.replace(/^\s*\{\s*([\s\S]+?)\s*\|[\s\S]+\}\s*/gm, '$1');
         }
         return ` { ${$selection} | ${this.editor.$cherry.options.callback.changeString2Pinyin($selection).trim()} } `;
-      case 'toggleToolbar':
-        this.toggleToolbar();
-        return '';
     }
   }
 
@@ -286,27 +279,9 @@ export default class Insert extends MenuBase {
         shortKey: 'formula',
         shortcutKey: 'Mod-m',
       },
-      {
-        shortKey: 'toggleToolbar',
-        shortcutKey: 'Mod-q',
-      },
     ];
   }
 
-  /**
-   * 切换Toolbar显示状态
-   */
-  toggleToolbar() {
-    const wrapperDom = this.engine.$cherry.cherryDom.childNodes[0];
-    if (wrapperDom instanceof HTMLDivElement) {
-      if (wrapperDom.className.indexOf('cherry--no-toolbar') > -1) {
-        wrapperDom.classList.remove('cherry--no-toolbar');
-      } else {
-        wrapperDom.classList.add('cherry--no-toolbar');
-      }
-    }
-  }
-
   get shortcutKeys() {
     const shortcutKeyMap = this.shortcutKeyMaps();
     return shortcutKeyMap.map((item) => {

diff --git a/src/toolbars/hooks/Settings.js b/src/toolbars/hooks/Settings.js
@@ -40,8 +40,15 @@ export default class Settings extends MenuBase {
     this.subMenuConfig = [
       { iconName: classicBrIconName, name: classicBrName, onclick: this.bindSubClick.bind(this, 'classicBr') },
       { iconName: previewIcon, name: previewName, onclick: this.bindSubClick.bind(this, 'previewClose') },
+      { iconName: '', name: '隐藏Toolbar', onclick: this.bindSubClick.bind(this, 'toggleToolbar') },
     ];
     this.attachEventListeners();
+    this.shortcutKeyMaps = [
+      {
+        shortKey: 'toggleToolbar',
+        shortcutKey: 'Mod-0',
+      },
+    ];
   }
 
   /**
@@ -116,6 +123,8 @@ export default class Settings extends MenuBase {
    * @returns
    */
   onClick(selection, shortKey = '', callback) {
+    // eslint-disable-next-line no-param-reassign
+    shortKey = this.matchShortcutKey(shortKey);
     if (shortKey === 'classicBr') {
       const [dom] = Array.from(this.subMenu.dom.children);
       if (dom.childNodes[1].textContent === locale.zh_CN.classicBr) {
@@ -147,7 +156,44 @@ export default class Settings extends MenuBase {
       } else {
         this.editor.previewer.editOnly(true);
       }
+    } else if (shortKey === 'toggleToolbar') {
+      this.toggleToolbar();
     }
     return selection;
   }
+
+  /**
+   * 解析快捷键
+   * @param {string} shortcutKey 快捷键
+   * @returns
+   */
+  matchShortcutKey(shortcutKey) {
+    const shortcutKeyMap = this.shortcutKeyMaps.find((item) => {
+      return item.shortcutKey === shortcutKey;
+    });
+    return shortcutKeyMap !== undefined ? shortcutKeyMap.shortKey : shortcutKey;
+  }
+
+  /**
+   * 切换Toolbar显示状态
+   */
+  toggleToolbar() {
+    const { wrapperDom } = this.engine.$cherry;
+    if (wrapperDom instanceof HTMLDivElement) {
+      const toolbarInstanceId = this.engine.$cherry.toolbar.instanceId;
+      if (wrapperDom.className.indexOf('cherry--no-toolbar') > -1) {
+        wrapperDom.classList.remove('cherry--no-toolbar');
+        Event.emit(toolbarInstanceId, Event.Events.toolbarShow);
+      } else {
+        wrapperDom.classList.add('cherry--no-toolbar');
+        Event.emit(toolbarInstanceId, Event.Events.toolbarHide);
+      }
+    }
+  }
+
+  get shortcutKeys() {
+    return this.shortcutKeyMaps.map((item) => {
+      return item.shortcutKey;
+    });
+  }
 }