feat: add insertContent() command, deprecate insertText(), insertHTML…

…() and insertNode()
ueberdosis · Apr 7, 2021 · b8d9b7d · b8d9b7d
1 parent 63acc57
commit b8d9b7d
Show file tree

Hide file tree

Showing 21 changed files with 198 additions and 113 deletions.
diff --git a/docs/src/demos/Guide/Content/ReadOnly/index.spec.js b/docs/src/demos/Guide/Content/ReadOnly/index.spec.js
@@ -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: ')
     })

diff --git a/docs/src/demos/Nodes/Emoji/index.vue b/docs/src/demos/Nodes/Emoji/index.vue
@@ -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" />

diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md
@@ -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();
     },

diff --git a/docs/src/docPages/api/commands/insert-content.md b/docs/src/docPages/api/commands/insert-content.md
@@ -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',
+    },
+  ],
+})
+```
+
diff --git a/docs/src/docPages/api/commands/insert-html.md b/docs/src/docPages/api/commands/insert-html.md
diff --git a/docs/src/docPages/api/commands/insert-node.md b/docs/src/docPages/api/commands/insert-node.md
diff --git a/docs/src/docPages/api/commands/insert-text.md b/docs/src/docPages/api/commands/insert-text.md
diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md
@@ -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.                                         |

diff --git a/docs/src/docPages/api/nodes/emoji.md b/docs/src/docPages/api/nodes/emoji.md
@@ -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" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
@@ -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

diff --git a/...rc/tests/core/commands/insertHTML.spec.js → ...tests/core/commands/insertContent.spec.js b/...rc/tests/core/commands/insertHTML.spec.js → ...tests/core/commands/insertContent.spec.js
@@ -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>')
     })

diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
@@ -2,12 +2,12 @@ import {
   EditorState, Plugin, PluginKey, Transaction,
 } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
-import { Schema, DOMParser, Node } from 'prosemirror-model'
-import elementFromString from './utilities/elementFromString'
+import { Schema } from 'prosemirror-model'
 import getNodeAttributes from './helpers/getNodeAttributes'
 import getMarkAttributes from './helpers/getMarkAttributes'
 import isActive from './helpers/isActive'
 import removeElement from './utilities/removeElement'
+import createDocument from './helpers/createDocument'
 import getHTMLFromFragment from './helpers/getHTMLFromFragment'
 import isNodeEmpty from './helpers/isNodeEmpty'
 import createStyleTag from './utilities/createStyleTag'
@@ -16,7 +16,6 @@ import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
 import {
   EditorOptions,
-  Content,
   CanCommands,
   ChainedCommands,
   SingleCommands,
@@ -233,11 +232,13 @@ export class Editor extends EventEmitter {
    * Creates a ProseMirror view.
    */
   private createView(): void {
+
+    console.log(this.schema.topNodeType)
     this.view = new EditorView(this.options.element, {
       ...this.options.editorProps,
       dispatchTransaction: this.dispatchTransaction.bind(this),
       state: EditorState.create({
-        doc: this.createDocument(this.options.content),
+        doc: createDocument(this.options.content, this.schema, this.options.parseOptions),
       }),
     })
 
@@ -275,34 +276,6 @@ export class Editor extends EventEmitter {
     })
   }
 
-  /**
-   * Creates a ProseMirror document.
-   */
-  public createDocument = (content: Content, parseOptions = this.options.parseOptions): Node => {
-    if (content && typeof content === 'object') {
-      try {
-        return this.schema.nodeFromJSON(content)
-      } catch (error) {
-        console.warn(
-          '[tiptap warn]: Invalid content.',
-          'Passed value:',
-          content,
-          'Error:',
-          error,
-        )
-        return this.createDocument('')
-      }
-    }
-
-    if (typeof content === 'string') {
-      return DOMParser
-        .fromSchema(this.schema)
-        .parse(elementFromString(content), parseOptions)
-    }
-
-    return this.createDocument('')
-  }
-
   public isCapturingTransaction = false
 
   private capturedTransaction: Transaction | null = null

diff --git a/packages/core/src/commands/insertContent.ts b/packages/core/src/commands/insertContent.ts
@@ -0,0 +1,35 @@
+import createNodeFromContent from '../helpers/createNodeFromContent'
+import selectionToInsertionEnd from '../helpers/selectionToInsertionEnd'
+import { Command, RawCommands, Content } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands {
+    insertContent: {
+      /**
+       * Insert a node or string of HTML at the current position.
+       */
+      insertContent: (value: Content) => Command,
+    }
+  }
+}
+
+export const insertContent: RawCommands['insertContent'] = value => ({ tr, dispatch, editor }) => {
+  if (dispatch) {
+    const content = createNodeFromContent(value, editor.schema)
+
+    if (typeof content === 'string') {
+      tr.insertText(content)
+
+      return true
+    }
+
+    if (!tr.selection.empty) {
+      tr.deleteSelection()
+    }
+
+    tr.insert(tr.selection.anchor, content)
+    selectionToInsertionEnd(tr, tr.steps.length - 1, -1)
+  }
+
+  return true
+}
diff --git a/packages/core/src/commands/insertHTML.ts b/packages/core/src/commands/insertHTML.ts
@@ -15,6 +15,8 @@ declare module '@tiptap/core' {
 }
 
 export const insertHTML: RawCommands['insertHTML'] = value => ({ tr, state, dispatch }) => {
+  console.warn('[tiptap warn]: insertHTML() is deprecated. please use insertContent() instead.')
+
   const { selection } = tr
   const element = elementFromString(value)
   const slice = DOMParser.fromSchema(state.schema).parseSlice(element)

diff --git a/packages/core/src/commands/insertNode.ts b/packages/core/src/commands/insertNode.ts
@@ -14,6 +14,8 @@ declare module '@tiptap/core' {
 }
 
 export const insertNode: RawCommands['insertNode'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+  console.warn('[tiptap warn]: insertNode() is deprecated. please use insertContent() instead.')
+
   const { selection } = tr
   const type = getNodeType(typeOrName, state.schema)
 

diff --git a/packages/core/src/commands/insertText.ts b/packages/core/src/commands/insertText.ts
@@ -12,6 +12,8 @@ declare module '@tiptap/core' {
 }
 
 export const insertText: RawCommands['insertText'] = value => ({ tr, dispatch }) => {
+  console.warn('[tiptap warn]: insertText() is deprecated. please use insertContent() instead.')
+
   if (dispatch) {
     tr.insertText(value)
   }