diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index 9f4a1a51..61131af4 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -69,6 +69,38 @@ editor Both calls would return `true` if it’s possible to apply the commands, and `false` in case it’s not. +In order to make that work with your custom commands, don’t forget to return `true` or `false`. + +For some of your own commands, you probably want to work with the raw [transaction](/api/overview). To make them work with `.can()` you should check if the transaction should be dispatched. Here is how we do that within `.insertText()`: + +```js +export default (value: string): Command => ({ tr, dispatch }) => { + if (dispatch) { + tr.insertText(value) + } + + return true +} +``` + +If you’re just wrapping another tiptap command, you don’t need to check that, we’ll do it for you. + +```js +bold: (): Command => ({ commands }) => { + return commands.toggleMark('bold') +}, +``` + +If you’re just wrapping a ProseMirror command, you’ll need to pass `dispatch` anyway. Then there’s also no need to check it: + +```js +export default (typeOrName: string | NodeType): Command => ({ state, dispatch }) => { + const type = getNodeType(typeOrName, state.schema) + + return liftListItem(type)(state, dispatch) +} +``` + ### Try commands If you want to run a list of commands, but want only the first successful command to be applied, you can do this with the `.first()` method. This method runs one command after the other and stops at the first which returns `true`. diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md index 6638ac63..0d6002c7 100644 --- a/docs/src/docPages/guide/node-views.md +++ b/docs/src/docPages/guide/node-views.md @@ -5,7 +5,7 @@ ## Introduction Node views are the best thing since sliced bread, at least if you’re a fan of customization (and bread). Node views enable you to add literally anything to a node. If you can write it in JavaScript, you can use it in your editor. -```js + ## Different types of node views @@ -37,6 +37,10 @@ export default Node.create({ ``` +#### Example: Task item + +https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/src/task-item.ts#L74 + ### Without content ```html @@ -132,3 +136,13 @@ export default { } ``` + +### Component with Content + +```html + +```