From 13489998b98f082484d5354b42f6376e13ccacdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 13 Nov 2020 11:42:04 +0100 Subject: [PATCH] =?UTF-8?q?prefix=20all=20commands=20with=20=E2=80=9Acomma?= =?UTF-8?q?nds=E2=80=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/CommandManager.ts | 59 ++++++-------------- packages/core/src/Editor.ts | 13 ++--- packages/core/src/extensions/keymap.ts | 6 +- packages/extension-blockquote/src/index.ts | 2 +- packages/extension-bold/src/index.ts | 2 +- packages/extension-bullet-list/src/index.ts | 2 +- packages/extension-code-block/src/index.ts | 2 +- packages/extension-code/src/index.ts | 2 +- packages/extension-hard-break/src/index.ts | 4 +- packages/extension-heading/src/index.ts | 2 +- packages/extension-highlight/src/index.ts | 2 +- packages/extension-history/src/index.ts | 6 +- packages/extension-italic/src/index.ts | 2 +- packages/extension-list-item/src/index.ts | 6 +- packages/extension-ordered-list/src/index.ts | 2 +- packages/extension-paragraph/src/index.ts | 2 +- packages/extension-strike/src/index.ts | 2 +- packages/extension-task-item/src/index.ts | 8 +-- packages/extension-text-align/src/index.ts | 10 ++-- packages/extension-underline/src/index.ts | 2 +- 20 files changed, 54 insertions(+), 82 deletions(-) diff --git a/packages/core/src/CommandManager.ts b/packages/core/src/CommandManager.ts index 95fbc8b33..b9fef148c 100644 --- a/packages/core/src/CommandManager.ts +++ b/packages/core/src/CommandManager.ts @@ -1,6 +1,9 @@ import { EditorState, Transaction } from 'prosemirror-state' import { - SingleCommands, ChainedCommands, Editor, CommandSpec, + SingleCommands, + ChainedCommands, + Editor, + CommandSpec, } from './Editor' import getAllMethodNames from './utils/getAllMethodNames' @@ -8,7 +11,7 @@ export default class CommandManager { editor: Editor - rawCommands: { [key: string]: any } = {} + commands: { [key: string]: any } = {} methodNames: string[] = [] @@ -24,7 +27,7 @@ export default class CommandManager { * @param callback The method of your command */ public registerCommand(name: string, callback: CommandSpec): Editor { - if (this.rawCommands[name]) { + if (this.commands[name]) { throw new Error(`tiptap: command '${name}' is already defined.`) } @@ -32,25 +35,17 @@ export default class CommandManager { throw new Error(`tiptap: '${name}' is a protected name.`) } - this.rawCommands[name] = callback + this.commands[name] = callback return this.editor } - public get commands() { - return { - ...this.wrapCommands(), - chain: () => this.createChain(), - can: () => this.createCan(), - } - } - - public wrapCommands() { - const { rawCommands, editor } = this + public createCommands() { + const { commands, editor } = this const { state, view } = editor return Object.fromEntries(Object - .entries(rawCommands) + .entries(commands) .map(([name, command]) => { const method = (...args: any) => { const { tr } = state @@ -66,30 +61,8 @@ export default class CommandManager { })) as SingleCommands } - public runSingleCommand(name: string) { - const { rawCommands, editor } = this - const { state, view } = editor - const command = rawCommands[name] - - if (!command) { - // TODO: prevent vue devtools to throw error - // throw new Error(`tiptap: command '${name}' not found.`) - return - } - - return (...args: any) => { - const { tr } = state - const props = this.buildProps(tr) - const callback = command(...args)(props) - - view.dispatch(tr) - - return callback - } - } - public createChain(startTr?: Transaction, shouldDispatch = true) { - const { rawCommands, editor } = this + const { commands, editor } = this const { state, view } = editor const callbacks: boolean[] = [] const hasStartTransaction = !!startTr @@ -105,7 +78,7 @@ export default class CommandManager { return () => callbacks.every(callback => callback === true) } - const command = rawCommands[name] + const command = commands[name] if (!command) { throw new Error(`tiptap: command '${name}' not found.`) @@ -123,13 +96,13 @@ export default class CommandManager { } public createCan(startTr?: Transaction) { - const { rawCommands, editor } = this + const { commands, editor } = this const { state } = editor const dispatch = false const tr = startTr || state.tr const props = this.buildProps(tr, dispatch) const formattedCommands = Object.fromEntries(Object - .entries(rawCommands) + .entries(commands) .map(([name, command]) => { return [name, (...args: any[]) => command(...args)({ ...props, dispatch })] })) as SingleCommands @@ -141,7 +114,7 @@ export default class CommandManager { } public buildProps(tr: Transaction, shouldDispatch = true) { - const { editor, rawCommands } = this + const { editor, commands } = this const { state, view } = editor const props = { @@ -156,7 +129,7 @@ export default class CommandManager { can: () => this.createCan(tr), get commands() { return Object.fromEntries(Object - .entries(rawCommands) + .entries(commands) .map(([name, command]) => { return [name, (...args: any[]) => command(...args)(props)] })) diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts index c173f16f2..8757cabb3 100644 --- a/packages/core/src/Editor.ts +++ b/packages/core/src/Editor.ts @@ -68,10 +68,6 @@ interface EditorOptions { editable: boolean, } -declare module './Editor' { - interface Editor extends SingleCommands {} -} - @magicMethods export class Editor extends EventEmitter { @@ -116,7 +112,7 @@ export class Editor extends EventEmitter { this.createView() this.injectCSS() - window.setTimeout(() => this.proxy.focus(this.options.autoFocus), 0) + window.setTimeout(() => this.commands.focus(this.options.autoFocus), 0) } /** @@ -126,11 +122,14 @@ export class Editor extends EventEmitter { */ // eslint-disable-next-line private __get(name: string) { - return this.commandManager.runSingleCommand(name) + // TODO: maybe remove proxy } + /** + * An object of all registered commands. + */ public get commands() { - return this.commandManager.commands + return this.commandManager.createCommands() } /** diff --git a/packages/core/src/extensions/keymap.ts b/packages/core/src/extensions/keymap.ts index 68b589361..087cbd7bc 100644 --- a/packages/core/src/extensions/keymap.ts +++ b/packages/core/src/extensions/keymap.ts @@ -14,21 +14,21 @@ import { createExtension } from '../Extension' export const Keymap = createExtension({ addKeyboardShortcuts() { - const handleBackspace = () => this.editor.try(({ state, dispatch }) => [ + const handleBackspace = () => this.editor.commands.try(({ state, dispatch }) => [ () => undoInputRule(state, dispatch), () => deleteSelection(state, dispatch), () => joinBackward(state, dispatch), () => selectNodeBackward(state, dispatch), ]) - const handleDelete = () => this.editor.try(({ state, dispatch }) => [ + const handleDelete = () => this.editor.commands.try(({ state, dispatch }) => [ () => deleteSelection(state, dispatch), () => joinForward(state, dispatch), () => selectNodeForward(state, dispatch), ]) return { - Enter: () => this.editor.try(({ commands, state, dispatch }) => [ + Enter: () => this.editor.commands.try(({ commands, state, dispatch }) => [ () => newlineInCode(state, dispatch), () => createParagraphNear(state, dispatch), () => liftEmptyBlock(state, dispatch), diff --git a/packages/extension-blockquote/src/index.ts b/packages/extension-blockquote/src/index.ts index 2f9dc1373..f4995c351 100644 --- a/packages/extension-blockquote/src/index.ts +++ b/packages/extension-blockquote/src/index.ts @@ -32,7 +32,7 @@ const Blockquote = createNode({ addKeyboardShortcuts() { return { - 'Shift-Mod-9': () => this.editor.blockquote(), + 'Shift-Mod-9': () => this.editor.commands.blockquote(), } }, diff --git a/packages/extension-bold/src/index.ts b/packages/extension-bold/src/index.ts index 2f42f747c..4b649d4da 100644 --- a/packages/extension-bold/src/index.ts +++ b/packages/extension-bold/src/index.ts @@ -43,7 +43,7 @@ const Bold = createMark({ addKeyboardShortcuts() { return { - 'Mod-b': () => this.editor.bold(), + 'Mod-b': () => this.editor.commands.bold(), } }, diff --git a/packages/extension-bullet-list/src/index.ts b/packages/extension-bullet-list/src/index.ts index 4b4bbc87e..cc1c19903 100644 --- a/packages/extension-bullet-list/src/index.ts +++ b/packages/extension-bullet-list/src/index.ts @@ -30,7 +30,7 @@ const BulletList = createNode({ addKeyboardShortcuts() { return { - 'Shift-Control-8': () => this.editor.bulletList(), + 'Shift-Control-8': () => this.editor.commands.bulletList(), } }, diff --git a/packages/extension-code-block/src/index.ts b/packages/extension-code-block/src/index.ts index 8b7c1fc4f..5fa068ec6 100644 --- a/packages/extension-code-block/src/index.ts +++ b/packages/extension-code-block/src/index.ts @@ -78,7 +78,7 @@ const CodeBlock = createNode({ addKeyboardShortcuts() { return { - 'Mod-Shift-c': () => this.editor.codeBlock(), + 'Mod-Shift-c': () => this.editor.commands.codeBlock(), } }, diff --git a/packages/extension-code/src/index.ts b/packages/extension-code/src/index.ts index 655e4d109..30679ee19 100644 --- a/packages/extension-code/src/index.ts +++ b/packages/extension-code/src/index.ts @@ -30,7 +30,7 @@ const Code = createMark({ addKeyboardShortcuts() { return { - 'Mod-`': () => this.editor.code(), + 'Mod-`': () => this.editor.commands.code(), } }, diff --git a/packages/extension-hard-break/src/index.ts b/packages/extension-hard-break/src/index.ts index 2112c1952..95b92ca6e 100644 --- a/packages/extension-hard-break/src/index.ts +++ b/packages/extension-hard-break/src/index.ts @@ -39,8 +39,8 @@ const HardBreak = createNode({ addKeyboardShortcuts() { return { - 'Mod-Enter': () => this.editor.hardBreak(), - 'Shift-Enter': () => this.editor.hardBreak(), + 'Mod-Enter': () => this.editor.commands.hardBreak(), + 'Shift-Enter': () => this.editor.commands.hardBreak(), } }, }) diff --git a/packages/extension-heading/src/index.ts b/packages/extension-heading/src/index.ts index bf1e5c43b..d5053f7c3 100644 --- a/packages/extension-heading/src/index.ts +++ b/packages/extension-heading/src/index.ts @@ -65,7 +65,7 @@ const Heading = createNode({ return this.options.levels.reduce((items, level) => ({ ...items, ...{ - [`Mod-Alt-${level}`]: () => this.editor.setBlockType('heading', { level }), + [`Mod-Alt-${level}`]: () => this.editor.commands.setBlockType('heading', { level }), }, }), {}) }, diff --git a/packages/extension-highlight/src/index.ts b/packages/extension-highlight/src/index.ts index d0a6370df..fac55d1fb 100644 --- a/packages/extension-highlight/src/index.ts +++ b/packages/extension-highlight/src/index.ts @@ -56,7 +56,7 @@ const Highlight = createMark({ addKeyboardShortcuts() { return { - 'Mod-e': () => this.editor.highlight(), + 'Mod-e': () => this.editor.commands.highlight(), } }, diff --git a/packages/extension-history/src/index.ts b/packages/extension-history/src/index.ts index c41705034..539fce5c1 100644 --- a/packages/extension-history/src/index.ts +++ b/packages/extension-history/src/index.ts @@ -31,9 +31,9 @@ const History = createExtension({ addKeyboardShortcuts() { return { - 'Mod-z': () => this.editor.undo(), - 'Mod-y': () => this.editor.redo(), - 'Shift-Mod-z': () => this.editor.redo(), + 'Mod-z': () => this.editor.commands.undo(), + 'Mod-y': () => this.editor.commands.redo(), + 'Shift-Mod-z': () => this.editor.commands.redo(), } }, }) diff --git a/packages/extension-italic/src/index.ts b/packages/extension-italic/src/index.ts index 9847378d4..772a5cba6 100644 --- a/packages/extension-italic/src/index.ts +++ b/packages/extension-italic/src/index.ts @@ -39,7 +39,7 @@ const Italic = createMark({ addKeyboardShortcuts() { return { - 'Mod-i': () => this.editor.italic(), + 'Mod-i': () => this.editor.commands.italic(), } }, diff --git a/packages/extension-list-item/src/index.ts b/packages/extension-list-item/src/index.ts index d40414dc2..f75f5d808 100644 --- a/packages/extension-list-item/src/index.ts +++ b/packages/extension-list-item/src/index.ts @@ -21,9 +21,9 @@ const ListItem = createNode({ addKeyboardShortcuts() { return { - Enter: () => this.editor.splitListItem('listItem'), - Tab: () => this.editor.sinkListItem('listItem'), - 'Shift-Tab': () => this.editor.liftListItem('listItem'), + Enter: () => this.editor.commands.splitListItem('listItem'), + Tab: () => this.editor.commands.sinkListItem('listItem'), + 'Shift-Tab': () => this.editor.commands.liftListItem('listItem'), } }, }) diff --git a/packages/extension-ordered-list/src/index.ts b/packages/extension-ordered-list/src/index.ts index 931c0c08e..10ccfd59a 100644 --- a/packages/extension-ordered-list/src/index.ts +++ b/packages/extension-ordered-list/src/index.ts @@ -49,7 +49,7 @@ const OrderedList = createNode({ addKeyboardShortcuts() { return { - 'Shift-Control-9': () => this.editor.orderedList(), + 'Shift-Control-9': () => this.editor.commands.orderedList(), } }, diff --git a/packages/extension-paragraph/src/index.ts b/packages/extension-paragraph/src/index.ts index 8704dc927..6f7c24d8d 100644 --- a/packages/extension-paragraph/src/index.ts +++ b/packages/extension-paragraph/src/index.ts @@ -28,7 +28,7 @@ const Paragraph = createNode({ addKeyboardShortcuts() { return { - 'Mod-Alt-0': () => this.editor.paragraph(), + 'Mod-Alt-0': () => this.editor.commands.paragraph(), } }, }) diff --git a/packages/extension-strike/src/index.ts b/packages/extension-strike/src/index.ts index a8b3e57af..1775b457f 100644 --- a/packages/extension-strike/src/index.ts +++ b/packages/extension-strike/src/index.ts @@ -39,7 +39,7 @@ const Strike = createMark({ addKeyboardShortcuts() { return { - 'Mod-d': () => this.editor.strike(), + 'Mod-d': () => this.editor.commands.strike(), } }, diff --git a/packages/extension-task-item/src/index.ts b/packages/extension-task-item/src/index.ts index ec8fc80b7..a30c25ea2 100644 --- a/packages/extension-task-item/src/index.ts +++ b/packages/extension-task-item/src/index.ts @@ -49,8 +49,8 @@ const TaskItem = createNode({ addKeyboardShortcuts() { const shortcuts = { - Enter: () => this.editor.splitListItem('taskItem'), - 'Shift-Tab': () => this.editor.liftListItem('taskItem'), + Enter: () => this.editor.commands.splitListItem('taskItem'), + 'Shift-Tab': () => this.editor.commands.liftListItem('taskItem'), } if (!this.options.nested) { @@ -59,7 +59,7 @@ const TaskItem = createNode({ return { ...shortcuts, - Tab: () => this.editor.sinkListItem('taskItem'), + Tab: () => this.editor.commands.sinkListItem('taskItem'), } }, @@ -78,7 +78,7 @@ const TaskItem = createNode({ view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, { checked, })) - editor.focus() + editor.commands.focus() } }) diff --git a/packages/extension-text-align/src/index.ts b/packages/extension-text-align/src/index.ts index 6f79df2fa..f7caf0cb5 100644 --- a/packages/extension-text-align/src/index.ts +++ b/packages/extension-text-align/src/index.ts @@ -49,13 +49,13 @@ const TextAlign = createExtension({ // TODO: re-use only 'textAlign' attribute // TODO: use custom splitBlock only for `this.options.types` // TODO: use complete default enter handler (chainCommand) with custom splitBlock - Enter: () => this.editor.splitBlock({ + Enter: () => this.editor.commands.splitBlock({ withAttributes: true, }), - 'Ctrl-Shift-l': () => this.editor.textAlign('left'), - 'Ctrl-Shift-e': () => this.editor.textAlign('center'), - 'Ctrl-Shift-r': () => this.editor.textAlign('right'), - 'Ctrl-Shift-j': () => this.editor.textAlign('justify'), + 'Ctrl-Shift-l': () => this.editor.commands.textAlign('left'), + 'Ctrl-Shift-e': () => this.editor.commands.textAlign('center'), + 'Ctrl-Shift-r': () => this.editor.commands.textAlign('right'), + 'Ctrl-Shift-j': () => this.editor.commands.textAlign('justify'), } }, }) diff --git a/packages/extension-underline/src/index.ts b/packages/extension-underline/src/index.ts index 004dbd26c..39628b7f6 100644 --- a/packages/extension-underline/src/index.ts +++ b/packages/extension-underline/src/index.ts @@ -28,7 +28,7 @@ const Underline = createMark({ addKeyboardShortcuts() { return { - 'Mod-u': () => this.editor.underline(), + 'Mod-u': () => this.editor.commands.underline(), } }, })