docs: add color shortcut

zzxming · Jan 16, 2025 · 2ec0374 · 2ec0374
1 parent bf0c378
commit 2ec0374
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -74,20 +74,75 @@ interface MenuItemsGroup extends MenuCommonOptions {
 
 ## Other Module
 
+### Color
+
+because the origin quill color will changes with the movement of the cursor. so we need to save the last color that user select.
+
+module `quill-easy-color` can do that. and it provide more powerful custom color picker. more info see [quill-table-up](https://github.com/zzxming/quill-easy-color)
+
+```ts
+// pick one of the theme
+import { EasyColorBubbleTheme, EasyColorSnowTheme } from 'quill-easy-color';
+import QuillShortcutKey, { defaultMenuItems, generateTableUpShortKeyMenu } from 'quill-shortcut-key';
+
+Quill.register({
+  'themes/snow': EasyColorSnowTheme,
+  'themes/bubble': EasyColorBubbleTheme,
+}, true);
+const { tableUpConfig, tableUpKeyboardControl } = generateTableUpShortKeyMenu(createSelectBox);
+const quill1 = new Quill('#editor', {
+  theme: 'snow',
+  modules: {
+    // ...
+    'keyboard': {
+      bindings: {
+        ...defaultShortKey,
+        color: {
+          key: 'c',
+          altKey: true,
+          shortKey: true,
+          handler() {
+            const selected = this.quill.getModule('toolbar').container.querySelector('.ql-color.ql-color-picker .ql-picker-options .ql-selected');
+            this.quill.format('color', selected?.dataset?.value || false, Quill.sources.USER);
+          },
+        },
+        background: {
+          key: 'b',
+          altKey: true,
+          shortKey: true,
+          handler() {
+            const selected = this.quill.getModule('toolbar').container.querySelector('.ql-background.ql-color-picker .ql-picker-options .ql-selected');
+            this.quill.format('background', selected?.dataset?.value || false, Quill.sources.USER);
+          },
+        },
+      },
+    },
+    'shortcut-key': {
+      menuItems: defaultMenuItems,
+    },
+  },
+});
+```
+
 ### Table
 
-use the module `quill-table-up`. you need install it first
+use the module `quill-table-up`. you need install it first. more info see [quill-table-up](https://github.com/zzxming/quill-table-up)
 
 ```ts
 import QuillShortcutKey, { defaultMenuItems, generateTableUpShortKeyMenu } from 'quill-shortcut-key';
 import { createSelectBox } from 'quill-table-up';
 
-// ignored TableUp config
+// ignored TableUp config and registe
 const { tableUpConfig, tableUpKeyboardControl } = generateTableUpShortKeyMenu(createSelectBox);
-const quill1 = new Quill('#editor', {
+const quill = new Quill('#editor', {
   // ...
   modules: {
     // ...
+    'keyboard': {
+      bindings: {
+        ...defaultShortKey,
+      },
+    },
     'shortcut-key': {
       menuItems: [
         tableUpConfig,

diff --git a/docs/index.html b/docs/index.html
@@ -23,8 +23,10 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/table-creator.css" />
-    <link rel="stylesheet" href="./index.css" />
+    <script src="https://cdn.jsdelivr.net/gh/zzxming/quill-easy-color@gh-pages/index.umd.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zzxming/quill-easy-color@gh-pages/index.css" />
     <script src="./dev.js"></script>
+    <link rel="stylesheet" href="./index.css" />
     <style>
       .main {
         position: relative;

diff --git a/docs/index.js b/docs/index.js
@@ -7,8 +7,10 @@ const {
 } = window.QuillShortcutKey;
 const { default: TableUp, defaultCustomSelect, createSelectBox, TableAlign, TableMenuContextmenu, TableResizeBox, TableResizeScale, TableSelection, TableVirtualScrollbar } = window.TableUp;
 const { default: QuillToolbarTip } = window.QuillToolbarTip;
+const { EasyColorSnowTheme } = window.QuillEasyColor;
 
 Quill.register({
+  [`themes/snow`]: EasyColorSnowTheme,
   [`modules/shortcut-key`]: QuillShortcutKey,
   [`modules/${TableUp.moduleName}`]: TableUp,
   [`modules/${QuillToolbarTip.moduleName}`]: QuillToolbarTip,
@@ -39,19 +41,37 @@ const quill1 = new Quill('#editor1', {
     'keyboard': {
       bindings: {
         ...defaultShortKey,
+        color: {
+          key: 'c',
+          altKey: true,
+          shortKey: true,
+          handler() {
+            const selected = this.quill.getModule('toolbar').container.querySelector('.ql-color.ql-color-picker .ql-picker-options .ql-selected');
+            this.quill.format('color', selected?.dataset?.value || false, Quill.sources.USER);
+          },
+        },
+        background: {
+          key: 'b',
+          altKey: true,
+          shortKey: true,
+          handler() {
+            const selected = this.quill.getModule('toolbar').container.querySelector('.ql-background.ql-color-picker .ql-picker-options .ql-selected');
+            this.quill.format('background', selected?.dataset?.value || false, Quill.sources.USER);
+          },
+        },
       },
     },
     [QuillToolbarTip.moduleName]: {
       defaultTooltipOptions: {
         tipHoverable: false,
       },
       tipTextMap: {
-        'background': 'Background',
+        'background': 'Background\nalt+ctrl+c',
         'blockquote': 'Blockquote',
         'bold': 'Bold\nctrl+b',
-        'clean': 'Clean',
+        'clean': 'Clean\nctrl+/',
         'code': 'Code\nctrl+e',
-        'color': 'Color',
+        'color': 'Color\nalt+ctrl+b',
         'formula': 'Formula',
         'italic': 'Italic\nctrl+i',
         'image': 'Image',
@@ -107,6 +127,9 @@ const quill1 = new Quill('#editor1', {
       },
     },
   },
+  themeOptions: {
+    keepChooseColor: true,
+  },
 });
 
 const quill = [quill1];