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 | | Command | Description |
| ----------------------- | --------------------------------------------------------- | | ----------------------- | --------------------------------------------------------- |
| .clearNodes() | Normalize nodes to a simple paragraph. | | .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. | | .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. | | .resetNodeAttributes() | Resets all node attributes to the default value. |
| .selectParentNode() | Select the parent node. | | .selectParentNode() | Select the parent node. |
| .setMark() | Add a mark with new attributes. | | .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. | | .toggleMark() | Toggle a mark on and off. |
| .toggleNode() | Toggle a node with another node. | | .toggleNode() | Toggle a node with another node. |
| .toggleWrap() | Wraps nodes in another node, or removes an existing wrap. | | .toggleWrap() | Wraps nodes in another node, or removes an existing wrap. |
| .undoInputRule() | Undo an input rule. |
| .unsetAllMarks() | Remove all marks in the current selection. | | .unsetAllMarks() | Remove all marks in the current selection. |
| .unsetMark() | Remove a mark in the current selection. | | .unsetMark() | Remove a mark in the current selection. |
| .updateNodeAttributes() | Update attributes of a node. | | .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. | | .wrapInList() | Wrap a node in a list. |
### Selection ### Selection
| Command | Description | | Command | Description |
| ------------------ | --------------------------------------- | | --------------------- | --------------------------------------- |
| .blur() | Removes focus from the editor. | | .blur() | Removes focus from the editor. |
| .deleteSelection() | Delete the selection, if there is one. | | .deleteSelection() | Delete the selection, if there is one. |
| .focus() | Focus the editor at the given position. | | .focus() | Focus the editor at the given position. |
| .scrollIntoView() | Scroll the selection into view. | | .scrollIntoView() | Scroll the selection into view. |
| .selectAll() | Select the whole document. | | .selectAll() | Select the whole document. |
| .selectNodeBackward() | Select a node backward. |
| .selectNodeForward() | Select a node forward. |
| .selectParentNode() | Select the parent node. |
## Add your own commands ## 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. 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 { Extension } from '../Extension'
import * as blur from '../commands/blur' import * as blur from '../commands/blur'
import * as clearContent from '../commands/clearContent' import * as clearContent from '../commands/clearContent'
import * as command from '../commands/command'
import * as clearNodes from '../commands/clearNodes' 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 deleteSelection from '../commands/deleteSelection'
import * as exitCode from '../commands/exitCode'
import * as extendMarkRange from '../commands/extendMarkRange' import * as extendMarkRange from '../commands/extendMarkRange'
import * as first from '../commands/first' import * as first from '../commands/first'
import * as focus from '../commands/focus' import * as focus from '../commands/focus'
import * as insertHTML from '../commands/insertHTML' import * as insertHTML from '../commands/insertHTML'
import * as insertText from '../commands/insertText' 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 lift from '../commands/lift'
import * as liftEmptyBlock from '../commands/liftEmptyBlock'
import * as liftListItem from '../commands/liftListItem' import * as liftListItem from '../commands/liftListItem'
import * as newlineInCode from '../commands/newlineInCode'
import * as resetNodeAttributes from '../commands/resetNodeAttributes' import * as resetNodeAttributes from '../commands/resetNodeAttributes'
import * as scrollIntoView from '../commands/scrollIntoView' import * as scrollIntoView from '../commands/scrollIntoView'
import * as selectAll from '../commands/selectAll' 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 selectParentNode from '../commands/selectParentNode'
import * as setContent from '../commands/setContent' import * as setContent from '../commands/setContent'
import * as setMark from '../commands/setMark' import * as setMark from '../commands/setMark'
@ -25,6 +33,7 @@ import * as toggleList from '../commands/toggleList'
import * as toggleMark from '../commands/toggleMark' import * as toggleMark from '../commands/toggleMark'
import * as toggleNode from '../commands/toggleNode' import * as toggleNode from '../commands/toggleNode'
import * as toggleWrap from '../commands/toggleWrap' import * as toggleWrap from '../commands/toggleWrap'
import * as undoInputRule from '../commands/undoInputRule'
import * as unsetAllMarks from '../commands/unsetAllMarks' import * as unsetAllMarks from '../commands/unsetAllMarks'
import * as unsetMark from '../commands/unsetMark' import * as unsetMark from '../commands/unsetMark'
import * as updateNodeAttributes from '../commands/updateNodeAttributes' import * as updateNodeAttributes from '../commands/updateNodeAttributes'
@ -40,17 +49,25 @@ export const Commands = Extension.create({
...clearContent, ...clearContent,
...clearNodes, ...clearNodes,
...command, ...command,
...createParagraphNear,
...deleteSelection, ...deleteSelection,
...exitCode,
...extendMarkRange, ...extendMarkRange,
...first, ...first,
...focus, ...focus,
...insertHTML, ...insertHTML,
...insertText, ...insertText,
...joinBackward,
...joinForward,
...lift, ...lift,
...liftEmptyBlock,
...liftListItem, ...liftListItem,
...newlineInCode,
...resetNodeAttributes, ...resetNodeAttributes,
...scrollIntoView, ...scrollIntoView,
...selectAll, ...selectAll,
...selectNodeBackward,
...selectNodeForward,
...selectParentNode, ...selectParentNode,
...setContent, ...setContent,
...setMark, ...setMark,
@ -62,8 +79,9 @@ export const Commands = Extension.create({
...toggleMark, ...toggleMark,
...toggleNode, ...toggleNode,
...toggleWrap, ...toggleWrap,
...unsetMark, ...undoInputRule,
...unsetAllMarks, ...unsetAllMarks,
...unsetMark,
...updateNodeAttributes, ...updateNodeAttributes,
...wrapIn, ...wrapIn,
...wrapInList, ...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' import { Extension } from '../Extension'
export const Keymap = Extension.create({ export const Keymap = Extension.create({
name: 'keymap', name: 'keymap',
addKeyboardShortcuts() { addKeyboardShortcuts() {
const handleBackspace = () => this.editor.commands.first(({ state, dispatch }) => [ const handleBackspace = () => this.editor.commands.first(({ commands }) => [
() => undoInputRule(state, dispatch), () => commands.undoInputRule(),
() => deleteSelection(state, dispatch), () => commands.deleteSelection(),
() => joinBackward(state, dispatch), () => commands.joinBackward(),
() => selectNodeBackward(state, dispatch), () => commands.selectNodeBackward(),
]) ])
const handleDelete = () => this.editor.commands.first(({ state, dispatch }) => [ const handleDelete = () => this.editor.commands.first(({ commands }) => [
() => deleteSelection(state, dispatch), () => commands.deleteSelection(),
() => joinForward(state, dispatch), () => commands.joinForward(),
() => selectNodeForward(state, dispatch), () => commands.selectNodeForward(),
]) ])
return { return {
Enter: () => this.editor.commands.first(({ commands, state, dispatch }) => [ Enter: () => this.editor.commands.first(({ commands }) => [
() => newlineInCode(state, dispatch), () => commands.newlineInCode(),
() => createParagraphNear(state, dispatch), () => commands.createParagraphNear(),
() => liftEmptyBlock(state, dispatch), () => commands.liftEmptyBlock(),
() => commands.splitBlock(), () => commands.splitBlock(),
]), ]),
'Mod-Enter': exitCode, 'Mod-Enter': () => this.editor.commands.exitCode(),
Backspace: () => handleBackspace(), Backspace: () => handleBackspace(),
'Mod-Backspace': () => handleBackspace(), 'Mod-Backspace': () => handleBackspace(),
Delete: () => handleDelete(), Delete: () => handleDelete(),
'Mod-Delete': () => handleDelete(), 'Mod-Delete': () => handleDelete(),
// we dont need a custom `selectAll` for now // we dont need a custom `selectAll` for now
// 'Mod-a': () => this.editor.selectAll(), // 'Mod-a': () => this.editor.commands.selectAll(),
} }
}, },
}) })