feat: 增加禁用所有快捷键的功能；增加搜索的按钮

examples/scripts/index-demo.js

@@ -119,6 +119,16 @@ var basicConfig = {
           return defaultWrapper;
         },
       },
+      autoLink: {
+        /** 生成的<a>标签追加target属性的默认值 空：在<a>标签里不会追加target属性， _blank：在<a>标签里追加target="_blank"属性 */
+        target: '',
+        /** 生成的<a>标签追加rel属性的默认值 空：在<a>标签里不会追加rel属性， nofollow：在<a>标签里追加rel="nofollow：在"属性*/
+        rel: '',
+        /** 是否开启短链接 */
+        enableShortLink: true,
+        /** 短链接长度 */
+        shortLinkLength: 20,
+      },
       codeBlock: {
         theme: 'twilight',
         lineNumber: true, // 默认显示行号
@@ -200,16 +210,15 @@ var basicConfig = {
       'graph',
       'customMenuTable',
       'togglePreview',
-      'settings',
       'codeTheme',
-      'export',
+      'search',
+      'shortcutKey',
       {
         customMenuBName: ['ruby', 'audio', 'video', 'customMenuAName'],
       },
       'customMenuCName',
-      'theme',
     ],
-    toolbarRight: ['fullScreen', '|', 'changeLocale', 'wordCount'],
+    toolbarRight: ['fullScreen', '|', 'export', 'changeLocale', 'wordCount'],
     bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
     sidebar: ['mobilePreview', 'copy', 'theme', 'publish'],
     sidebar: ['mobilePreview', 'copy', 'theme'],

src/Cherry.config.js

@@ -411,7 +411,8 @@ const defaultConfig = {
         ],
       },
       'graph',
-      'settings',
+      'shortcutKey',
+      'togglePreview',
     ],
     toolbarRight: [],
     sidebar: false,

src/Cherry.js

@@ -966,8 +966,10 @@ export default class Cherry extends CherryStatic {
     }
     if (this.toolbar.matchShortcutKey(evt)) {
       // 快捷键
-      evt.preventDefault();
-      this.toolbar.fireShortcutKey(evt);
+      const needPreventDefault = this.toolbar.fireShortcutKey(evt);
+      if (needPreventDefault) {
+        evt.preventDefault();
+      }
     }
   }
 

src/Editor.js

@@ -23,12 +23,12 @@ import 'codemirror/addon/edit/continuelist';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/fold/xml-fold';
 import 'codemirror/addon/edit/matchtags';
-import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/display/placeholder';
 import 'codemirror/keymap/sublime';
 import 'codemirror/keymap/vim';
 
-import 'cm-search-replace/src/search';
+// import 'cm-search-replace/src/search';
+import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/scroll/annotatescrollbar';
 import 'codemirror/addon/search/matchesonscrollbar';
 // import 'codemirror/addon/selection/active-line';
@@ -122,6 +122,18 @@ export default class Editor {
     this.instanceId = this.$cherry.getInstanceId();
   }
 
+  /**
+   * 禁用快捷键
+   * @param {boolean} disable 是否禁用快捷键
+   */
+  disableShortcut = (disable = true) => {
+    if (disable) {
+      this.editor.setOption('keyMap', 'default');
+    } else {
+      this.editor.setOption('keyMap', this.options.keyMap);
+    }
+  };
+
   /**
    * 在onChange后处理draw.io的xml数据和图片的base64数据，对这种超大的数据增加省略号，
    * 以及对全角符号进行特殊染色。
@@ -131,7 +143,14 @@ export default class Editor {
       this.noChange = false;
       return;
     }
-    // 如果编辑器隐藏了，则不再处理（否则有性能问题）
+    /**
+     * 如果编辑器隐藏了，则不再处理（否则有性能问题）
+     * - 性能问题出现的原因：
+     *  1. 纯预览模式下，cherry的高度可能会被设置成auto（也就是没有滚动条）
+     *  2. 这时候codemirror的高度也是auto，其“视窗懒加载”提升性能的手段就失效了
+     *  3. 这时再大量的调用markText等api就会非常耗时
+     * - 经过上述分析，最好的判断应该是判断**编辑器高度是否为auto**，但考虑到一般只有纯预览模式才大概率设置成auto，所以就只判断纯预览模式了
+     */
     if (this.$cherry.status.editor === 'hide') {
       return;
     }

src/locales/en_US.js

@@ -132,4 +132,7 @@ export default {
   shortcutStatic17: 'Undo',
   shortcutStatic18: 'Redo',
   leftMouseButton: 'left mouse button',
+  disableShortcut: 'Disable all shortcuts',
+  recoverShortcut: 'Restore default',
+  search: 'Search',
 };

src/locales/ru_RU.js

@@ -132,4 +132,7 @@ export default {
   shortcutStatic17: 'Отменить',
   shortcutStatic18: 'Вернуть отмену',
   leftMouseButton: 'левая кнопка мыши',
+  disableShortcut: 'Отключить все горячие клавиши',
+  recoverShortcut: 'Восстановить по умолчанию',
+  search: 'Поиск',
 };

src/locales/zh_CN.js

@@ -135,4 +135,7 @@ export default {
   shortcutStatic17: '撤销',
   shortcutStatic18: '回滚撤销',
   leftMouseButton: '鼠标左键',
+  disableShortcut: '禁用所有快捷键',
+  recoverShortcut: '恢复默认',
+  search: '搜索',
 };

src/sass/ch-icon.scss

@@ -93,7 +93,6 @@
 .ch-icon-help:before { content: "\EA60" }
 .ch-icon-pen-fill:before { content: "\EA61" }
 .ch-icon-pen:before { content: "\EA62" }
-.ch-icon-search:before { content: "\EA63" }
 .ch-icon-tips:before { content: "\EA64" }
 .ch-icon-warn:before { content: "\EA65" }
 .ch-icon-mistake:before { content: "\EA66" }
@@ -114,4 +113,7 @@
 .ch-icon-expand:before { content: "\EA75" }
 .ch-icon-unExpand:before { content: "\EA76" }
 .ch-icon-swap-vert:before { content: "\EA77" }
-.ch-icon-swap:before { content: "\EA78" }
+.ch-icon-swap:before { content: "\EA78" }
+.ch-icon-keyboard:before { content: "\EA79" }
+.ch-icon-command:before { content: "\EA7A" }
+.ch-icon-search:before { content: "\EA7B" }

src/sass/components/shortcut_key_config.scss

@@ -74,11 +74,35 @@
       }
     }
   }
-  .shortcut-panel-title {
+  .shortcut-panel-title, .shortcut-panel-settings {
     font-size: 14px;
     padding: 10px 15px;
     background-color: #eee; 
     // border-bottom: 1px solid #888;
     // border-top: 1px solid #888;
   }
+  .shortcut-panel-settings {
+    padding: 10px 15px;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    border-bottom: 1px solid #aaa;
+    justify-content: space-between;
+    display: flex;
+    .shortcut-settings-btn {
+      height: auto;
+      line-height: 1.2em;
+      &:hover {
+        color: rgb(255, 77, 79);
+      }
+    }
+  }
+  &.disable {
+    .cherry-shortcut-key-config-panel-ul {
+      opacity: 0.3;
+    }
+    .j-shortcut-settings-disable-btn {
+      color: rgb(255, 77, 79);
+    }
+  }
 }

src/toolbars/HookCenter.js

@@ -74,6 +74,8 @@ 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';
 
 // 定义默认支持的工具栏
 // 目前不支持按需动态加载
@@ -136,6 +138,8 @@ const HookList = {
   // chatgpt: ChatGpt,
   publish: Publish,
   changeLocale: ChangeLocale,
+  shortcutKey: ShortcutKey,
+  search: Search,
 };
 
 export default class HookCenter {

src/toolbars/ShortcutKeyConfigPanel.js

@@ -7,6 +7,9 @@ import {
   keyStack2UniqueString,
   shortcutCode2Key,
   keyStack2UnPlatformUniqueString,
+  isEnableShortcutKey,
+  setDisableShortcutKey,
+  storageKeyMap,
 } from '@/utils/shortcutKey';
 import { createElement } from '@/utils/dom';
 /**
@@ -32,6 +35,9 @@ export default class ShortcutKeyConfigPanel {
     this.shortcutKeyboardKeyClassName = 'keyboard-key';
     // 双击快捷键区域
     this.handleDbClick = (/** @type {MouseEvent} */ e) => {
+      if (!isEnableShortcutKey(this.$cherry.nameSpace)) {
+        return;
+      }
       if (e.target instanceof HTMLElement) {
         if (
           e.target.classList.contains(this.shortcutConfigPanelKbdClassName) ||
@@ -129,6 +135,27 @@ export default class ShortcutKeyConfigPanel {
         }
       }
     };
+    this.clickSettingsDisableBtn = () => {
+      if (!isEnableShortcutKey(this.$cherry.nameSpace)) {
+        setDisableShortcutKey(this.$cherry.nameSpace, 'enable');
+        this.dom.classList.remove('disable');
+        this.$cherry.editor.disableShortcut(false);
+      } else {
+        setDisableShortcutKey(this.$cherry.nameSpace, 'disable');
+        this.dom.classList.add('disable');
+        this.$cherry.editor.disableShortcut(true);
+      }
+    };
+    this.clickSettingsRecoverBtn = () => {
+      setDisableShortcutKey(this.$cherry.nameSpace, 'enable');
+      this.dom.classList.remove('disable');
+      this.$cherry.editor.disableShortcut(false);
+      this.$cherry.toolbar.shortcutKeyMap = {};
+      this.$cherry.toolbar.collectShortcutKey(false);
+      storageKeyMap(this.$cherry.nameSpace, this.$cherry.toolbar.shortcutKeyMap);
+      this.dom.innerHTML = this.generateShortcutKeyConfigPanelHtmlStr();
+      this.show();
+    };
     this.init();
   }
 
@@ -143,6 +170,9 @@ export default class ShortcutKeyConfigPanel {
       this.dom.innerHTML = this.generateShortcutKeyConfigPanelHtmlStr();
       // 实例化后，将容器插入到富文本编辑器中，默认隐藏
       this.dom.style.display = 'none';
+      if (!isEnableShortcutKey(this.$cherry.nameSpace)) {
+        this.dom.classList.add('disable');
+      }
       this.$cherry.wrapperDom.append(this.dom);
     }
   }
@@ -181,6 +211,14 @@ export default class ShortcutKeyConfigPanel {
     // </div>
     const ulStr = `
       <div class="cherry-shortcut-key-config-panel-inner">
+        <div class="shortcut-panel-settings">
+          <btn class="shortcut-settings-btn j-shortcut-settings-disable-btn"><i class="ch-icon ch-icon-cherry-table-delete"></i> ${
+            this.$cherry.locale.disableShortcut
+          }</btn>
+          <btn class="shortcut-settings-btn j-shortcut-settings-recover-btn"><i class="ch-icon ch-icon-undo"></i> ${
+            this.$cherry.locale.recoverShortcut
+          }</btn>
+        </div>
         <div class="shortcut-panel-title">${this.$cherry.locale.editShortcutKeyConfigTip}</div>
         <ul class="${this.shortcutUlClassName}" id="${this.shortcutUlId}">${liStr}</ul>
         ${this.$getStaticShortcut()}
@@ -210,7 +248,6 @@ export default class ShortcutKeyConfigPanel {
       { name: this.$cherry.locale.shortcutStatic12, key: 'Ctrl+Shift+M' },
       { name: this.$cherry.locale.shortcutStatic13, key: `Ctrl+${this.$cherry.locale.leftMouseButton}` },
       { name: this.$cherry.locale.shortcutStatic14, key: 'Ctrl+Shift+L' },
-      { name: this.$cherry.locale.shortcutStatic15, key: 'Ctrl+F' },
       { name: this.$cherry.locale.shortcutStatic16, key: 'Alt+F3' },
       { name: this.$cherry.locale.shortcutStatic17, key: 'Ctrl+Z' },
       { name: this.$cherry.locale.shortcutStatic18, key: 'Ctrl+Y' },
@@ -240,20 +277,36 @@ export default class ShortcutKeyConfigPanel {
    */
   show() {
     this.dom.style.removeProperty('display');
-    const ulWrapper = document.querySelector(`#${this.shortcutUlId}`);
+    const ulWrapper = this.dom.querySelector(`#${this.shortcutUlId}`);
     if (ulWrapper instanceof HTMLUListElement) {
       // 监听双击
       ulWrapper.addEventListener('dblclick', this.handleDbClick);
     }
+    const settingsDisableBtn = this.dom.querySelector('.j-shortcut-settings-disable-btn');
+    if (settingsDisableBtn instanceof HTMLElement) {
+      settingsDisableBtn.addEventListener('click', this.clickSettingsDisableBtn);
+    }
+    const settingsRecoverBtn = this.dom.querySelector('.j-shortcut-settings-recover-btn');
+    if (settingsRecoverBtn instanceof HTMLElement) {
+      settingsRecoverBtn.addEventListener('click', this.clickSettingsRecoverBtn);
+    }
   }
 
   hide() {
     this.dom.style.display = 'none';
-    const ulWrapper = document.querySelector(`#${this.shortcutUlId}`);
+    const ulWrapper = this.dom.querySelector(`#${this.shortcutUlId}`);
     if (ulWrapper instanceof HTMLUListElement) {
       // 销毁时取消监听
       ulWrapper.removeEventListener('dblclick', this.handleDbClick);
     }
+    const settingsDisableBtn = this.dom.querySelector('.j-shortcut-settings-disable-btn');
+    if (settingsDisableBtn instanceof HTMLElement) {
+      settingsDisableBtn.removeEventListener('click', this.clickSettingsDisableBtn);
+    }
+    const settingsRecoverBtn = this.dom.querySelector('.j-shortcut-settings-recover-btn');
+    if (settingsRecoverBtn instanceof HTMLElement) {
+      settingsRecoverBtn.removeEventListener('click', this.clickSettingsRecoverBtn);
+    }
   }
 
   isShow() {
@@ -274,9 +327,16 @@ export default class ShortcutKeyConfigPanel {
     }
     const pos = settingsDom.getBoundingClientRect();
     if (this.isHide()) {
-      this.dom.style.left = `${pos.left + pos.width}px`;
+      this.dom.style.left = `${pos.left + pos.width / 2}px`;
       this.dom.style.top = `${pos.top + pos.height}px`;
       this.show();
+      const me = this.dom.getBoundingClientRect();
+      this.dom.style.marginLeft = `0px`;
+      this.dom.style.left = `${pos.left + pos.width / 2 - me.width / 2}px`;
+      // 如果弹窗位置超出屏幕，则自动调整位置
+      if (me.left + me.width > window.innerWidth) {
+        this.dom.style.left = `${window.innerWidth - me.width - 5}px`;
+      }
       return;
     }
     return this.hide();