|
| 1 | +import { Extension, type Editor } from '@tiptap/core'; |
| 2 | + |
| 3 | +import type { HtmlStyle } from '../../types'; |
| 4 | +import { isFormatBlocked } from '../formats/formatRules'; |
| 5 | + |
| 6 | +export interface ShortcutPluginOptions { |
| 7 | + getHtmlStyle: () => Required<HtmlStyle>; |
| 8 | +} |
| 9 | + |
| 10 | +function insertPlainTextFromClipboard(editor: Editor): Promise<void> { |
| 11 | + return navigator.clipboard.readText().then((text) => { |
| 12 | + if (editor.isDestroyed) return; |
| 13 | + editor.chain().focus().deleteSelection().insertContent(text).run(); |
| 14 | + }); |
| 15 | +} |
| 16 | + |
| 17 | +export const ShortcutPlugin = Extension.create<ShortcutPluginOptions>({ |
| 18 | + name: 'shortcutPlugin', |
| 19 | + |
| 20 | + addOptions() { |
| 21 | + return { |
| 22 | + getHtmlStyle: () => { |
| 23 | + throw new Error( |
| 24 | + 'ShortcutPlugin.configure({ getHtmlStyle }) is required' |
| 25 | + ); |
| 26 | + }, |
| 27 | + }; |
| 28 | + }, |
| 29 | + |
| 30 | + addKeyboardShortcuts() { |
| 31 | + const htmlStyle = () => this.options.getHtmlStyle(); |
| 32 | + |
| 33 | + const mark = |
| 34 | + (name: string, run: (editor: Editor) => boolean) => |
| 35 | + ({ editor }: { editor: Editor }) => { |
| 36 | + if (!editor.isEditable) return false; |
| 37 | + if (isFormatBlocked(name, editor, htmlStyle())) return true; |
| 38 | + return run(editor); |
| 39 | + }; |
| 40 | + |
| 41 | + return { |
| 42 | + 'Mod-Shift-v': ({ editor }) => { |
| 43 | + if (!editor.isEditable) return false; |
| 44 | + insertPlainTextFromClipboard(editor).catch(() => {}); |
| 45 | + return true; |
| 46 | + }, |
| 47 | + 'Mod-Alt-Shift-c': ({ editor }) => { |
| 48 | + if (!editor.isEditable) return false; |
| 49 | + return editor.commands.toggleCodeBlock(); |
| 50 | + }, |
| 51 | + 'Mod-Shift-c': mark('code', (editor) => editor.commands.toggleCode()), |
| 52 | + 'Mod-Shift-x': mark('strike', (editor) => editor.commands.toggleStrike()), |
| 53 | + 'Mod-b': mark('bold', (editor) => editor.commands.toggleBold()), |
| 54 | + 'Mod-i': mark('italic', (editor) => editor.commands.toggleItalic()), |
| 55 | + 'Mod-u': mark('underline', (editor) => editor.commands.toggleUnderline()), |
| 56 | + 'Mod-Shift-7': ({ editor }) => { |
| 57 | + if (!editor.isEditable) return false; |
| 58 | + return editor.commands.toggleOrderedList(); |
| 59 | + }, |
| 60 | + 'Mod-Shift-8': ({ editor }) => { |
| 61 | + if (!editor.isEditable) return false; |
| 62 | + return editor.commands.toggleUnorderedList(); |
| 63 | + }, |
| 64 | + 'Mod-Shift-9': ({ editor }) => { |
| 65 | + if (!editor.isEditable) return false; |
| 66 | + return editor.commands.toggleCheckboxList(false); |
| 67 | + }, |
| 68 | + 'Mod-Alt-0': ({ editor }) => { |
| 69 | + if (!editor.isEditable) return false; |
| 70 | + return editor.commands.setParagraph(); |
| 71 | + }, |
| 72 | + 'Mod-Alt-1': ({ editor }) => { |
| 73 | + if (!editor.isEditable) return false; |
| 74 | + return editor.commands.toggleHeading({ level: 1 }); |
| 75 | + }, |
| 76 | + 'Mod-Alt-2': ({ editor }) => { |
| 77 | + if (!editor.isEditable) return false; |
| 78 | + return editor.commands.toggleHeading({ level: 2 }); |
| 79 | + }, |
| 80 | + 'Mod-Alt-3': ({ editor }) => { |
| 81 | + if (!editor.isEditable) return false; |
| 82 | + return editor.commands.toggleHeading({ level: 3 }); |
| 83 | + }, |
| 84 | + 'Mod-Alt-4': ({ editor }) => { |
| 85 | + if (!editor.isEditable) return false; |
| 86 | + return editor.commands.toggleHeading({ level: 4 }); |
| 87 | + }, |
| 88 | + 'Mod-Alt-5': ({ editor }) => { |
| 89 | + if (!editor.isEditable) return false; |
| 90 | + return editor.commands.toggleHeading({ level: 5 }); |
| 91 | + }, |
| 92 | + 'Mod-Alt-6': ({ editor }) => { |
| 93 | + if (!editor.isEditable) return false; |
| 94 | + return editor.commands.toggleHeading({ level: 6 }); |
| 95 | + }, |
| 96 | + }; |
| 97 | + }, |
| 98 | +}); |
0 commit comments