feat: shortcut key and quick menu

packages/docs/package.json

@@ -19,7 +19,7 @@
     "mathlive": "^0.101.0",
     "quill-header-list": "0.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
-    "quill-toolbar-tip": "^0.0.10",
+    "quill-toolbar-tip": "^0.0.11",
     "vue": "^3.5.13",
     "vue-toastification": "2.0.0-rc.5"
   },

packages/fluent-editor/package.json

@@ -35,7 +35,8 @@
   "dependencies": {
     "lodash-es": "^4.17.15",
     "quill": "^2.0.0",
-    "quill-easy-color": "^0.0.5"
+    "quill-easy-color": "^0.0.8",
+    "quill-shortcut-key": "0.0.1"
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",

packages/fluent-editor/src/assets/style.scss

@@ -6,6 +6,7 @@
     url('./iconfont/iconfont.ttf') format('truetype');
 }
 @import 'quill/dist/quill.snow';
+@import 'quill-shortcut-key/index.css';
 
 @import './variable.scss';
 @import './common';

packages/fluent-editor/src/config/i18n/en-us.ts

@@ -102,6 +102,7 @@ export const EN_US = {
   'background': 'Background Color',
   'font': 'Font',
   'size': 'Size',
+  'list': 'List',
   'list-ordered': 'Ordered List',
   'list-bullet': 'Unordered List',
   'list-check': 'Task List',
@@ -123,6 +124,7 @@ export const EN_US = {
   'header-5': 'Heading 5',
   'header-6': 'Heading 6',
   'header-list': 'Heading List',
+  'input-recall-menu-placeholder': 'Input / recall menu',
   'clear-color': 'Clear color',
   'custom-color': 'Color picker',
 }

packages/fluent-editor/src/config/i18n/zh-cn.ts

@@ -100,6 +100,7 @@ export const ZH_CN = {
   'background': '背景色',
   'font': '字体',
   'size': '字号',
+  'list': '列表',
   'list-ordered': '有序列表',
   'list-bullet': '无序列表',
   'list-check': '任务列表',
@@ -121,6 +122,7 @@ export const ZH_CN = {
   'header-5': '标题5',
   'header-6': '标题6',
   'header-list': '标题列表',
+  'input-recall-menu-placeholder': '输入 / 唤起菜单',
   'clear-color': '清除颜色',
   'custom-color': '选择颜色',
 }

packages/fluent-editor/src/fluent-editor.ts

@@ -16,11 +16,11 @@ import Link from './modules/link' // 超链接
 import MathliveModule from './modules/mathlive' // latex公式
 import MathliveBlot from './modules/mathlive/formats'
 import Mention from './modules/mention/Mention' // @提醒
+import { ShortCutKey } from './modules/shortcut-key'
 import Syntax from './modules/syntax' // 代码块高亮
 import BetterTable from './modules/table/better-table' // 表格
 import Toolbar from './modules/toolbar' // 工具栏
 import { ColorPicker, Picker } from './modules/toolbar/better-picker'
-// import QuickMenu from './modules/quick-menu' // 快捷菜单
 import SnowTheme from './themes/snow'
 import Icons from './ui/icons'
 
@@ -48,12 +48,12 @@ FluentEditor.register(
     'modules/link': Link,
     'modules/mathlive': MathliveModule,
     'modules/mention': Mention,
-    // 'modules/quickmenu': QuickMenu, // TODO
     'modules/syntax': Syntax,
     'modules/toolbar': Toolbar,
     'modules/uploader': Uploader,
     // make sure register after `HeaderList`
     'modules/better-table': BetterTable,
+    'modules/shortcut-key': ShortCutKey,
 
     'themes/snow': SnowTheme,
 

packages/fluent-editor/src/modules/link/index.ts

@@ -23,14 +23,6 @@ SnowTheme.prototype.extendToolbar = function (toolbar) {
   this.buildButtons(toolbar.container.querySelectorAll('button'), icons)
   this.buildPickers(toolbar.container.querySelectorAll('select'), icons)
   this.tooltip = new Tooltip(this.quill, this.options.bounds)
-  if (toolbar.container.querySelector('.ql-link')) {
-    this.quill.keyboard.addBinding(
-      { key: 'k', shortKey: true },
-      (_range, context) => {
-        toolbar.handlers.link.call(toolbar, !context.format.link)
-      },
-    )
-  }
 }
 
 export default Link