1.5.8: 升级quill@2.0.0-rc.5 & 更改quill.snow.css引入方式

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Change-Log
 
+### 1.5.9
+- 添加保存快捷键回调
+
 ### 1.5.8
 - 更改quill.snow.css引入方式
 - 升级quill@2.0.0-rc.5

index.tsx

@@ -1,8 +1,6 @@
 import React, { useRef, useEffect, CSSProperties, FC } from 'react';
-import Quill, { RangeStatic, Sources } from 'quill';
+import Quill, { Range, EmitterSource } from 'quill';
 import Delta from 'quill-delta';
-import IconUndo from 'quill/assets/icons/undo.svg';
-import IconRedo from 'quill/assets/icons/redo.svg';
 import {
   highlightInit,
   // Image,
@@ -20,10 +18,12 @@ import {
   // QSyntax,
   // ListItem,
   // CodeHandler,
-  keyboardBinds
+  keyboardBindsFn,
 } from './modules/index';
 import { optionDisableToggle, setContent, throttle } from './utils';
 import { getI18nText, i18nConfig } from './i18n';
+import IconUndo from 'quill/assets/icons/undo.svg';
+import IconRedo from 'quill/assets/icons/redo.svg';
 import 'quill/dist/quill.snow.css';
 import './assets/richTextEditor.less';
 import './assets/modules.less';
@@ -95,8 +95,9 @@ interface IEditorProps {
   getQuill?: (quill: Quill, uploadedImgsList?: string[]) => void;
   content?: Delta | string;
   onChange?: (delta: Delta, old: Delta) => void;
-  onFocus?: (range?: RangeStatic) => void;
-  onBlur?: (oldRange?: RangeStatic) => void;
+  onFocus?: (range?: Range) => void;
+  onBlur?: (oldRange?: Range) => void;
+  onSave?: () => void;
   i18n?: 'en' | 'zh';
   style?: CSSProperties;
 }
@@ -294,7 +295,7 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
   }, [modules]);
 
   useEffect(() => {
-    const { placeholder, getQuill, onChange, onFocus, onBlur } = props;
+    const { placeholder, getQuill, onChange, onFocus, onBlur, onSave } = props;
     if (quillModules.current['better-table']) {
       Quill.register(
         {
@@ -371,7 +372,9 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
         keyboard: {
           bindings: {
             ...QuillBetterTable.keyboardBindings,
-            ...keyboardBinds,
+            ...keyboardBindsFn({
+              save: onSave,
+            }),
           },
         },
 
@@ -391,7 +394,7 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
 
     quillRef.current.on(
       'selection-change',
-      (range: RangeStatic, oldRange: RangeStatic, source: Sources) => {
+      (range: Range, oldRange: Range, source: EmitterSource) => {
         if (range == null || !quillRef.current?.hasFocus()) return;
 
         // 当新建table或者选中table时，禁止部分toolbar options，添加table时触发的source=api
@@ -412,14 +415,14 @@ const RichTextEditor: FC<IEditorProps> = (props) => {
     getQuill && getQuill(quillRef.current, uploadedImgsList.current);
 
     if (onChange) {
-      quillRef.current.on('text-change', (delta: Delta, old: Delta, source: Sources) => {
+      quillRef.current.on('text-change', (delta: Delta, old: Delta, source: EmitterSource) => {
         source === 'user' && onChange(delta, old);
       });
     }
     if (onFocus || onBlur) {
       quillRef.current.on(
         'selection-change',
-        (range: RangeStatic, oldRange: RangeStatic, source: Sources) => {
+        (range: Range, oldRange: Range, source: EmitterSource) => {
           const hasFocus = range && !oldRange;
           const hasBlur = !range && oldRange;
           if (onFocus && hasFocus) onFocus(range);

lib/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react';
-import Quill, { RangeStatic } from 'quill';
+import Quill, { Range } from 'quill';
 import Delta from 'quill-delta';
 import 'quill/dist/quill.snow.css';
 import './assets/richTextEditor.less';
@@ -74,8 +74,9 @@ interface IEditorProps {
     getQuill?: (quill: Quill, uploadedImgsList?: string[]) => void;
     content?: Delta | string;
     onChange?: (delta: Delta, old: Delta) => void;
-    onFocus?: (range?: RangeStatic) => void;
-    onBlur?: (oldRange?: RangeStatic) => void;
+    onFocus?: (range?: Range) => void;
+    onBlur?: (oldRange?: Range) => void;
+    onSave?: () => void;
     i18n?: 'en' | 'zh';
     style?: CSSProperties;
 }

lib/index.js

@@ -32386,10 +32386,6 @@ var Delta$2 = /** @class */ (function () {
 }());
 var Delta_1 = Delta$2;
 
-var IconUndo = "<svg viewbox=\"0 0 18 18\">\n  <polygon class=\"ql-fill ql-stroke\" points=\"6 10 4 12 2 10 6 10\"></polygon>\n  <path class=\"ql-stroke\" d=\"M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9\"></path>\n</svg>";
-
-var IconRedo = "<svg viewbox=\"0 0 18 18\">\n  <polygon class=\"ql-fill ql-stroke\" points=\"12 10 14 12 16 10 12 10\"></polygon>\n  <path class=\"ql-stroke\" d=\"M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5\"></path>\n</svg>";
-
 const i18nConfig = {
     en: {
         toolbarHeader: 'Body',
@@ -46099,54 +46095,69 @@ class QSyntax extends BaseSyntax {
   }
 }
 
-const keyboardBinds = {
-    'list autofill': {
-        key: ' ',
-        collapsed: true,
-        prefix: /^\d+\.$/,
-        format: {
-            list: false,
-            'code-block': false,
-            blockquote: false,
-            header: false,
-            table: false,
-            'table-cell-line': false,
+const keyboardBindsFn = (options) => {
+    const { onSave } = options;
+    return {
+        'list autofill': {
+            key: ' ',
+            collapsed: true,
+            prefix: /^\d+\.$/,
+            format: {
+                list: false,
+                'code-block': false,
+                blockquote: false,
+                header: false,
+                table: false,
+                'table-cell-line': false,
+            },
+            handler(range, context) {
+                const { prefix, line } = context;
+                const start = parseInt(prefix.replace('.', ''), 10);
+                if (start !== 1) {
+                    this.quill.formatLine(range.index, 1, 'list', `ordered-${start}`);
+                    this.quill.formatLine(range.index, 1, 'list', `ordered-${start}`);
+                }
+                else {
+                    this.quill.formatLine(range.index, 1, 'list', 'ordered');
+                    this.quill.formatLine(range.index, 1, 'list', 'ordered');
+                }
+                this.quill.deleteText(range.index - prefix.length, prefix.length);
+            },
         },
-        handler(range, context) {
-            const { prefix, line } = context;
-            const start = parseInt(prefix.replace('.', ''), 10);
-            if (start !== 1) {
-                this.quill.formatLine(range.index, 1, 'list', `ordered-${start}`);
-                this.quill.formatLine(range.index, 1, 'list', `ordered-${start}`);
-            }
-            else {
-                this.quill.formatLine(range.index, 1, 'list', 'ordered');
-                this.quill.formatLine(range.index, 1, 'list', 'ordered');
-            }
-            this.quill.deleteText(range.index - prefix.length, prefix.length);
+        'code backspace': {
+            key: 'Backspace',
+            format: ['code-block', 'list', 'blockquote'],
+            handler(range, context) {
+                var _a, _b;
+                if (this.quill) {
+                    const [line] = this.quill.getLine(range.index);
+                    const isEmpty = !line.children.head.text || line.children.head.text.trim() === '';
+                    const format = this.quill.getFormat(range);
+                    const allCode = (_b = (_a = context === null || context === void 0 ? void 0 : context.line) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.cachedText;
+                    if (range.index === 0 &&
+                        context.suffix === '' &&
+                        ((format['code-block'] && (allCode === '\n' || allCode === '')) ||
+                            (!format['code-block'] && isEmpty))) {
+                        this.quill.removeFormat(range.index, range.length);
+                        return false;
+                    }
+                }
+                return true;
+            },
         },
-    },
-    'code backspace': {
-        key: 'Backspace',
-        format: ['code-block', 'list', 'blockquote'],
-        handler(range, context) {
-            var _a, _b;
-            if (this.quill) {
-                const [line] = this.quill.getLine(range.index);
-                const isEmpty = !line.children.head.text || line.children.head.text.trim() === '';
-                const format = this.quill.getFormat(range);
-                const allCode = (_b = (_a = context === null || context === void 0 ? void 0 : context.line) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.cachedText;
-                if (range.index === 0 &&
-                    context.suffix === '' &&
-                    ((format['code-block'] && (allCode === '\n' || allCode === '')) ||
-                        (!format['code-block'] && isEmpty))) {
-                    this.quill.removeFormat(range.index, range.length);
+        save: {
+            key: 's',
+            shortKey: true,
+            handler(range, context) {
+                console.log('keyboard save!');
+                if (onSave) {
+                    onSave();
                     return false;
                 }
-            }
-            return true;
+                return true;
+            },
         },
-    },
+    };
 };
 
 Quill.register(Image, true);
@@ -46163,6 +46174,10 @@ Quill.register({
     'modules/qSyntax': QSyntax,
 }, true);
 
+var IconUndo = "<svg viewbox=\"0 0 18 18\">\n  <polygon class=\"ql-fill ql-stroke\" points=\"6 10 4 12 2 10 6 10\"></polygon>\n  <path class=\"ql-stroke\" d=\"M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9\"></path>\n</svg>";
+
+var IconRedo = "<svg viewbox=\"0 0 18 18\">\n  <polygon class=\"ql-fill ql-stroke\" points=\"12 10 14 12 16 10 12 10\"></polygon>\n  <path class=\"ql-stroke\" d=\"M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5\"></path>\n</svg>";
+
 const RichTextEditor = (props) => {
     const { modules = {}, content, i18n = 'en', style = {}, readOnly = false } = props;
     const quillModules = useRef({});
@@ -46295,7 +46310,7 @@ const RichTextEditor = (props) => {
         icons.redo = IconRedo;
     }, [modules]);
     useEffect(() => {
-        const { placeholder, getQuill, onChange, onFocus, onBlur } = props;
+        const { placeholder, getQuill, onChange, onFocus, onBlur, onSave } = props;
         if (quillModules.current['better-table']) {
             Quill.register({
                 'modules/better-table': BetterTable,
@@ -46340,7 +46355,9 @@ const RichTextEditor = (props) => {
                 }, clipboard: {
                     matchers: [['BR', lineBreakMatcher]],
                 }, keyboard: {
-                    bindings: Object.assign(Object.assign({}, BetterTable.keyboardBindings), keyboardBinds),
+                    bindings: Object.assign(Object.assign({}, BetterTable.keyboardBindings), keyboardBindsFn({
+                        save: onSave,
+                    })),
                 }, history: {
                     delay: 2000,
                     maxStack: 100,

lib/modules/index.d.ts

@@ -9,5 +9,5 @@ import { ListItem } from './customeFormats/listItem';
 import { toolbarInit, LinkHandler, undoHandler, redoHandler, TableHandler, ImageHandler, CodeHandler } from './toolbar';
 import { showTitle } from './iconTitle/title';
 import QSyntax from './customeFormats/syntax';
-import { keyboardBinds } from './keyboard';
-export { highlightInit, ImageDrop, Image, ListItem, ImageResize, MagicUrl, MarkdownShortcuts, QuillBetterTable, QSyntax, toolbarInit, showTitle, keyboardBinds, LinkHandler, TableHandler, ImageHandler, undoHandler, redoHandler, CodeHandler, };
+import { keyboardBindsFn } from './keyboard';
+export { highlightInit, ImageDrop, Image, ListItem, ImageResize, MagicUrl, MarkdownShortcuts, QuillBetterTable, QSyntax, toolbarInit, showTitle, keyboardBindsFn, LinkHandler, TableHandler, ImageHandler, undoHandler, redoHandler, CodeHandler, };

lib/modules/keyboard.d.ts

@@ -1,4 +1,5 @@
-export declare const keyboardBinds: {
+import { Range } from 'quill';
+export declare const keyboardBindsFn: (options: any) => {
     'list autofill': {
         key: string;
         collapsed: boolean;
@@ -11,12 +12,12 @@ export declare const keyboardBinds: {
             table: boolean;
             'table-cell-line': boolean;
         };
-        handler(range: any, context: any): void;
+        handler(range: Range, context: any): void;
     };
     'code backspace': {
         key: string;
         format: string[];
-        handler(range: any, context: {
+        handler(range: Range, context: {
             line: {
                 parent: {
                     cachedText?: string;
@@ -27,4 +28,9 @@ export declare const keyboardBinds: {
             offset: number;
         }): boolean;
     };
+    save: {
+        key: string;
+        shortKey: boolean;
+        handler(range: Range, context: any): boolean;
+    };
 };

modules/index.ts

@@ -11,7 +11,7 @@ import { ListItem } from './customeFormats/listItem';
 import { toolbarInit, LinkHandler, undoHandler, redoHandler, TableHandler, ImageHandler, CodeHandler } from './toolbar';
 import { showTitle } from './iconTitle/title';
 import QSyntax from './customeFormats/syntax';
-import { keyboardBinds } from './keyboard';
+import { keyboardBindsFn } from './keyboard';
 
 Quill.register(Image, true); // 允许图片的样式保存在Delta中
 Quill.register(ListItem, true); // 允许图片的样式保存在Delta中
@@ -42,7 +42,7 @@ export {
   QSyntax,
   toolbarInit,
   showTitle,
-  keyboardBinds,
+  keyboardBindsFn,
   LinkHandler,
   TableHandler,
   ImageHandler,