add more core commands

This commit is contained in:
Philipp Kühn 2021-01-06 13:02:30 +01:00
parent d90510156b
commit 5e29cc1481
12 changed files with 134 additions and 36 deletions

View File

@ -107,7 +107,14 @@ Have a look at all of the core commands listed below. They should give you a goo
| Command | Description |
| ----------------------- | --------------------------------------------------------- |
| .clearNodes() | Normalize nodes to a simple paragraph. |
| .createParagraphNear() | Create a paragraph nearby. |
| .exitCode() | Exit from a code block. |
| .extendMarkRange() | Extends the text selection to the current mark. |
| .joinBackward() | Join two nodes backward. |
| .joinForward() | Join two nodes forward. |
| .lift() | Removes an existing wrap. |
| .liftEmptyBlock() | Lift block if empty. |
| .newlineInCode() | Add a newline character in code. |
| .resetNodeAttributes() | Resets all node attributes to the default value. |
| .selectParentNode() | Select the parent node. |
| .setMark() | Add a mark with new attributes. |
@ -116,6 +123,7 @@ Have a look at all of the core commands listed below. They should give you a goo
| .toggleMark() | Toggle a mark on and off. |
| .toggleNode() | Toggle a node with another node. |
| .toggleWrap() | Wraps nodes in another node, or removes an existing wrap. |
| .undoInputRule() | Undo an input rule. |
| .unsetAllMarks() | Remove all marks in the current selection. |
| .unsetMark() | Remove a mark in the current selection. |
| .updateNodeAttributes() | Update attributes of a node. |
@ -130,13 +138,16 @@ Have a look at all of the core commands listed below. They should give you a goo
| .wrapInList() | Wrap a node in a list. |
### Selection
| Command | Description |
| ------------------ | --------------------------------------- |
| .blur() | Removes focus from the editor. |
| .deleteSelection() | Delete the selection, if there is one. |
| .focus() | Focus the editor at the given position. |
| .scrollIntoView() | Scroll the selection into view. |
| .selectAll() | Select the whole document. |
| Command | Description |
| --------------------- | --------------------------------------- |
| .blur() | Removes focus from the editor. |
| .deleteSelection() | Delete the selection, if there is one. |
| .focus() | Focus the editor at the given position. |
| .scrollIntoView() | Scroll the selection into view. |
| .selectAll() | Select the whole document. |
| .selectNodeBackward() | Select a node backward. |
| .selectNodeForward() | Select a node forward. |
| .selectParentNode() | Select the parent node. |
## Add your own commands
All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.

View File

@ -0,0 +1,9 @@
import { createParagraphNear as originalCreateParagraphNear } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Create a paragraph nearby.
*/
export const createParagraphNear = (): Command => ({ state, dispatch }) => {
return originalCreateParagraphNear(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { exitCode as originalExitCode } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Exit from a code block.
*/
export const exitCode = (): Command => ({ state, dispatch }) => {
return originalExitCode(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { joinBackward as originalJoinBackward } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Join two nodes backward.
*/
export const joinBackward = (): Command => ({ state, dispatch }) => {
return originalJoinBackward(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { joinForward as originalJoinForward } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Join two nodes forward.
*/
export const joinForward = (): Command => ({ state, dispatch }) => {
return originalJoinForward(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { liftEmptyBlock as originalLiftEmptyBlock } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Lift block if empty.
*/
export const liftEmptyBlock = (): Command => ({ state, dispatch }) => {
return originalLiftEmptyBlock(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { newlineInCode as originalNewlineInCode } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Add a newline character in code.
*/
export const newlineInCode = (): Command => ({ state, dispatch }) => {
return originalNewlineInCode(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { selectNodeBackward as originalSelectNodeBackward } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Select a node backward.
*/
export const selectNodeBackward = (): Command => ({ state, dispatch }) => {
return originalSelectNodeBackward(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { selectNodeForward as originalSelectNodeForward } from 'prosemirror-commands'
import { Command } from '../types'
/**
* Select a node forward.
*/
export const selectNodeForward = (): Command => ({ state, dispatch }) => {
return originalSelectNodeForward(state, dispatch)
}

View File

@ -0,0 +1,9 @@
import { undoInputRule as originalUndoInputRule } from 'prosemirror-inputrules'
import { Command } from '../types'
/**
* Undo an input rule.
*/
export const undoInputRule = (): Command => ({ state, dispatch }) => {
return originalUndoInputRule(state, dispatch)
}

View File

@ -1,19 +1,27 @@
import { Extension } from '../Extension'
import * as blur from '../commands/blur'
import * as clearContent from '../commands/clearContent'
import * as command from '../commands/command'
import * as clearNodes from '../commands/clearNodes'
import * as command from '../commands/command'
import * as createParagraphNear from '../commands/createParagraphNear'
import * as deleteSelection from '../commands/deleteSelection'
import * as exitCode from '../commands/exitCode'
import * as extendMarkRange from '../commands/extendMarkRange'
import * as first from '../commands/first'
import * as focus from '../commands/focus'
import * as insertHTML from '../commands/insertHTML'
import * as insertText from '../commands/insertText'
import * as joinBackward from '../commands/joinBackward'
import * as joinForward from '../commands/joinForward'
import * as lift from '../commands/lift'
import * as liftEmptyBlock from '../commands/liftEmptyBlock'
import * as liftListItem from '../commands/liftListItem'
import * as newlineInCode from '../commands/newlineInCode'
import * as resetNodeAttributes from '../commands/resetNodeAttributes'
import * as scrollIntoView from '../commands/scrollIntoView'
import * as selectAll from '../commands/selectAll'
import * as selectNodeBackward from '../commands/selectNodeBackward'
import * as selectNodeForward from '../commands/selectNodeForward'
import * as selectParentNode from '../commands/selectParentNode'
import * as setContent from '../commands/setContent'
import * as setMark from '../commands/setMark'
@ -25,6 +33,7 @@ import * as toggleList from '../commands/toggleList'
import * as toggleMark from '../commands/toggleMark'
import * as toggleNode from '../commands/toggleNode'
import * as toggleWrap from '../commands/toggleWrap'
import * as undoInputRule from '../commands/undoInputRule'
import * as unsetAllMarks from '../commands/unsetAllMarks'
import * as unsetMark from '../commands/unsetMark'
import * as updateNodeAttributes from '../commands/updateNodeAttributes'
@ -40,17 +49,25 @@ export const Commands = Extension.create({
...clearContent,
...clearNodes,
...command,
...createParagraphNear,
...deleteSelection,
...exitCode,
...extendMarkRange,
...first,
...focus,
...insertHTML,
...insertText,
...joinBackward,
...joinForward,
...lift,
...liftEmptyBlock,
...liftListItem,
...newlineInCode,
...resetNodeAttributes,
...scrollIntoView,
...selectAll,
...selectNodeBackward,
...selectNodeForward,
...selectParentNode,
...setContent,
...setMark,
@ -62,8 +79,9 @@ export const Commands = Extension.create({
...toggleMark,
...toggleNode,
...toggleWrap,
...unsetMark,
...undoInputRule,
...unsetAllMarks,
...unsetMark,
...updateNodeAttributes,
...wrapIn,
...wrapInList,

View File

@ -1,48 +1,36 @@
import {
newlineInCode,
createParagraphNear,
liftEmptyBlock,
exitCode,
deleteSelection,
joinForward,
joinBackward,
selectNodeForward,
selectNodeBackward,
} from 'prosemirror-commands'
import { undoInputRule } from 'prosemirror-inputrules'
import { Extension } from '../Extension'
export const Keymap = Extension.create({
name: 'keymap',
addKeyboardShortcuts() {
const handleBackspace = () => this.editor.commands.first(({ state, dispatch }) => [
() => undoInputRule(state, dispatch),
() => deleteSelection(state, dispatch),
() => joinBackward(state, dispatch),
() => selectNodeBackward(state, dispatch),
const handleBackspace = () => this.editor.commands.first(({ commands }) => [
() => commands.undoInputRule(),
() => commands.deleteSelection(),
() => commands.joinBackward(),
() => commands.selectNodeBackward(),
])
const handleDelete = () => this.editor.commands.first(({ state, dispatch }) => [
() => deleteSelection(state, dispatch),
() => joinForward(state, dispatch),
() => selectNodeForward(state, dispatch),
const handleDelete = () => this.editor.commands.first(({ commands }) => [
() => commands.deleteSelection(),
() => commands.joinForward(),
() => commands.selectNodeForward(),
])
return {
Enter: () => this.editor.commands.first(({ commands, state, dispatch }) => [
() => newlineInCode(state, dispatch),
() => createParagraphNear(state, dispatch),
() => liftEmptyBlock(state, dispatch),
Enter: () => this.editor.commands.first(({ commands }) => [
() => commands.newlineInCode(),
() => commands.createParagraphNear(),
() => commands.liftEmptyBlock(),
() => commands.splitBlock(),
]),
'Mod-Enter': exitCode,
'Mod-Enter': () => this.editor.commands.exitCode(),
Backspace: () => handleBackspace(),
'Mod-Backspace': () => handleBackspace(),
Delete: () => handleDelete(),
'Mod-Delete': () => handleDelete(),
// we dont need a custom `selectAll` for now
// 'Mod-a': () => this.editor.selectAll(),
// 'Mod-a': () => this.editor.commands.selectAll(),
}
},
})