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

4
docs/src/demos/Guide/Content/ReadOnly/index.spec.js
View File

@@ -6,7 +6,7 @@ context('/demos/Guide/Content/ReadOnly', () => {
it('should be read-only', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setEditable(false)
editor.commands.insertText('Edited: ')
editor.commands.insertContent('Edited: ')
cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ')
})
@@ -15,7 +15,7 @@ context('/demos/Guide/Content/ReadOnly', () => {
it('should be editable', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setEditable(true)
editor.commands.insertText('Edited: ')
editor.commands.insertContent('Edited: ')
cy.get('.ProseMirror p:first').should('contain', 'Edited: ')
})

12
docs/src/demos/Nodes/Emoji/index.vue
View File

@@ -1,21 +1,21 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus(). insertText('✨').run()">
<button @click="editor.chain().focus().insertContent('✨').run()">
✨
</button>
<button @click="editor.chain().focus(). insertText('😅').run()">
<button @click="editor.chain().focus().insertContent('😅').run()">
😅
</button>
<button @click="editor.chain().focus(). insertText('🎉').run()">
<button @click="editor.chain().focus().insertContent('🎉').run()">
🎉
</button>
<button @click="editor.chain().focus(). insertText('💖').run()">
<button @click="editor.chain().focus().insertContent('💖').run()">
💖
</button>
<button @click="editor.chain().focus(). insertText('👀').run()">
<button @click="editor.chain().focus().insertContent('👀').run()">
👀
</button>
<button @click="editor.chain().focus(). insertText('👍️').run()">
<button @click="editor.chain().focus().insertContent('👍️').run()">
👍️
</button>
<editor-content :editor="editor" />

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" />

10
docs/src/links.yaml
View File

@@ -136,14 +136,8 @@
- title: clearContent
link: /api/commands/clear-content
type: draft
- title: insertHTML
link: /api/commands/insert-html
type: draft
- title: insertNode
link: /api/commands/insert-node
type: draft
- title: insertText
link: /api/commands/insert-text
- title: insertContent
link: /api/commands/insert-content
type: draft
- title: setContent
link: /api/commands/set-content

10
docs/src/tests/core/commands/insertHTML.spec.js → docs/src/tests/core/commands/insertContent.spec.js
View File

@@ -1,23 +1,23 @@
context('insertHTML', () => {
context('insertContent', () => {
before(() => {
cy.visit('/demos/Examples/Default/Vue')
})
it('returns true for the insertHTML command', () => {
it('returns true for the insertContent command', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
const command = editor.commands.insertHTML('<p>Cindy Lauper</p>')
const command = editor.commands.insertContent('<p>Cindy Lauper</p>')
expect(command).to.be.eq(true)
})
})
it('appends the content when using the insertHTML command', () => {
it('appends the content when using the insertContent command', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
editor.commands.insertHTML('<p>Cindy Lauper</p>')
editor.commands.insertContent('<p>Cindy Lauper</p>')
expect(editor.getHTML()).to.be.eq('<p>Example Text</p><p>Cindy Lauper</p>')
})