mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
docs: add more content about dispatching commands
This commit is contained in:
parent
ecd0a6669a
commit
775adc7af7
@ -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`.
|
||||
|
||||
|
@ -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
|
||||
<!-- ```js
|
||||
import { Node } from '@tiptap/core'
|
||||
import { VueRenderer } from '@tiptap/vue'
|
||||
import Component from './Component.vue'
|
||||
@ -23,7 +23,7 @@ export default Node.create({
|
||||
})
|
||||
},
|
||||
})
|
||||
```
|
||||
``` -->
|
||||
|
||||
## Different types of node views
|
||||
|
||||
@ -37,6 +37,10 @@ export default Node.create({
|
||||
</div>
|
||||
```
|
||||
|
||||
#### 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 {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Component with Content
|
||||
|
||||
```html
|
||||
<template>
|
||||
<node-view-wrapper class="dom">
|
||||
<node-view-content class="content-dom" />
|
||||
</node-view-wrapper>
|
||||
</template>
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user