mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
prefix all commands with ‚commands‘
This commit is contained in:
parent
c3fa5ebf1b
commit
13489998b9
@ -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)]
|
||||
}))
|
||||
|
@ -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()
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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),
|
||||
|
@ -32,7 +32,7 @@ const Blockquote = createNode({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Shift-Mod-9': () => this.editor.blockquote(),
|
||||
'Shift-Mod-9': () => this.editor.commands.blockquote(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -43,7 +43,7 @@ const Bold = createMark({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-b': () => this.editor.bold(),
|
||||
'Mod-b': () => this.editor.commands.bold(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -30,7 +30,7 @@ const BulletList = createNode({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Shift-Control-8': () => this.editor.bulletList(),
|
||||
'Shift-Control-8': () => this.editor.commands.bulletList(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -78,7 +78,7 @@ const CodeBlock = createNode({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-Shift-c': () => this.editor.codeBlock(),
|
||||
'Mod-Shift-c': () => this.editor.commands.codeBlock(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -30,7 +30,7 @@ const Code = createMark({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-`': () => this.editor.code(),
|
||||
'Mod-`': () => this.editor.commands.code(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
@ -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 }),
|
||||
},
|
||||
}), {})
|
||||
},
|
||||
|
@ -56,7 +56,7 @@ const Highlight = createMark({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-e': () => this.editor.highlight(),
|
||||
'Mod-e': () => this.editor.commands.highlight(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
@ -39,7 +39,7 @@ const Italic = createMark({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-i': () => this.editor.italic(),
|
||||
'Mod-i': () => this.editor.commands.italic(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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'),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
@ -49,7 +49,7 @@ const OrderedList = createNode({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Shift-Control-9': () => this.editor.orderedList(),
|
||||
'Shift-Control-9': () => this.editor.commands.orderedList(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -28,7 +28,7 @@ const Paragraph = createNode({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-Alt-0': () => this.editor.paragraph(),
|
||||
'Mod-Alt-0': () => this.editor.commands.paragraph(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
@ -39,7 +39,7 @@ const Strike = createMark({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-d': () => this.editor.strike(),
|
||||
'Mod-d': () => this.editor.commands.strike(),
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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()
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -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'),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
@ -28,7 +28,7 @@ const Underline = createMark({
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-u': () => this.editor.underline(),
|
||||
'Mod-u': () => this.editor.commands.underline(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user