ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add insertContent() command, deprecate insertText(), insertHTML() and insertNode()

Browse Source
This commit is contained in:
Philipp Kühn
2021-04-07 11:53:37 +02:00
parent 63acc57305
commit b8d9b7d4c7
21 changed files with 198 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/src/docPages/api/commands.md
View File

@@ -43,8 +43,8 @@ addCommands() {
// Does work:
return chain()
.insertNode('timecode', attributes)
.insertText(' ')
.insertContent('foo!')
.insertContent('bar!')
.run()
},
}
@@ -60,7 +60,7 @@ editor
.focus()
.command(({ tr }) => {
// manipulate the transaction
tr.insertText('hey, that’s cool!')
tr.insertContent('hey, that’s cool!')
return true
})
@@ -91,7 +91,7 @@ Both calls would return `true` if it’s possible to apply the commands, and `fa
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/concept). To make them work with `.can()` you should check if the transaction should be dispatched. Here is how we do that within `.insertText()`:
For some of your own commands, you probably want to work with the raw [transaction](/api/concept). To make them work with `.can()` you should check if the transaction should be dispatched. Here is how you can create a simple `.insertText()` command:
```js
export default (value: string): Command => ({ tr, dispatch }) => {
@@ -148,13 +148,11 @@ commands.first([
Have a look at all of the core commands listed below. They should give you a good first impression of what’s possible.
### Content
| Command | Description | Links |
| --------------- | ------------------------------------------------ | ----------------------------------- |
| .clearContent() | Clear the whole document. | [More](/api/commands/clear-content) |
| .insertHTML() | Insert a string of HTML at the current position. | [More](/api/commands/insert-html) |
| .insertNode() | Insert a node at the current position. | [More](/api/commands/insert-node) |
| .insertText() | Insert a string of text at the current position. | [More](/api/commands/insert-text) |
| .setContent() | Replace the whole document with new content. | [More](/api/commands/set-content) |
| Command | Description | Links |
| ---------------- | -------------------------------------------------------- | ------------------------------------ |
| .clearContent() | Clear the whole document. | [More](/api/commands/clear-content) |
| .insertContent() | Insert a node or string of HTML at the current position. | [More](/api/commands/insert-content) |
| .setContent() | Replace the whole document with new content. | [More](/api/commands/set-content) |
### Nodes & Marks
| Command | Description |
@@ -220,13 +218,13 @@ this.editor
.chain()
.focus()
.createParagraphNear()
.insertText(text)
.insertContent(text)
.setBlockquote()
.insertHTML('<p></p>')
.insertContent('<p></p>')
.createParagraphNear()
.unsetBlockquote()
.createParagraphNear()
.insertHTML('<p></p>')
.insertContent('<p></p>')
.run()
```
@@ -237,7 +235,18 @@ addCommands() {
insertTimecode: attributes => ({ chain }) => {
return chain()
.focus()
.insertNode('timecode', attributes)
.insertContent({
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'heading',
},
],
})
.insertText(' ')
.run();
},

23
docs/src/docPages/api/commands/insert-content.md Normal file
View File

@@ -0,0 +1,23 @@
# insertContent
## Parameters
## Usage
```js
this.editor.commands.insertContent('text')
this.editor.commands.insertContent('<p>HTML</p>')
this.editor.commands.insertContent({
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'nested nodes',
},
],
})
```

13
docs/src/docPages/api/commands/insert-html.md
View File

@@ -1,13 +0,0 @@
# insertHTML
See also: [insertText](/api/commands/insert-text), [insertNode](/api/commands/insert-node)
## Parameters
## Usage
```js
this.editor.commands.insertHTML('<p>Example text</p>')
```

13
docs/src/docPages/api/commands/insert-node.md
View File

@@ -1,13 +0,0 @@
# insertNode
See also: [insertHTML](/api/commands/insert-html), [insertText](/api/commands/insert-text)
## Parameters
## Usage
```js
this.editor.commands.insertNode('paragraph')
```

12
docs/src/docPages/api/commands/insert-text.md
View File

@@ -1,12 +0,0 @@
# insertText
See also: [insertHTML](/api/commands/insert-html), [insertNode](/api/commands/insert-node)
## Parameters
## Usage
```js
this.editor.commands.insertText('Example text')
```

1
docs/src/docPages/api/editor.md
View File

@@ -14,7 +14,6 @@ Don’t confuse methods with [commands](/api/commands). Commands are used to cha
| --------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `can()` | - | Check if a command or a command chain can be executed. Without executing it. |
| `chain()` | - | Create a command chain to call multiple commands at once. |
| `createDocument()` | `content` EditorContent<br>`parseOptions` | Creates a ProseMirror document. |
| `destroy()` | – | Stops the editor instance and unbinds all events. |
| `getHTML()` | – | Returns the current content as HTML. |
| `getJSON()` | – | Returns the current content as JSON. |

2
docs/src/docPages/api/nodes/emoji.md
View File

@@ -13,7 +13,7 @@ We need your support to maintain, update, support and develop tiptap 2. If you
You can use any emoji picker, or build your own. Just use [commands](/api/commands) to insert the picked emojis.
```js
this.editor.chain().focus().insertText('✨').run()
this.editor.chain().focus().insertContent('✨').run()
```
<demo name="Nodes/Emoji" />