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

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

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
+}

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)

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)
 

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)
   }

packages/core/src/commands/setContent.ts

@@ -1,5 +1,11 @@
 import { TextSelection } from 'prosemirror-state'
-import { AnyObject, Command, RawCommands } from '../types'
+import createDocument from '../helpers/createDocument'
+import {
+  AnyObject,
+  Command,
+  RawCommands,
+  Content,
+} from '../types'
 
 declare module '@tiptap/core' {
   interface Commands {
@@ -7,15 +13,18 @@ declare module '@tiptap/core' {
       /**
        * Replace the whole document with new content.
        */
-      setContent: (content: string, emitUpdate?: Boolean, parseOptions?: AnyObject) => Command,
+      setContent: (
+        content: Content,
+        emitUpdate?: Boolean,
+        parseOptions?: AnyObject,
+      ) => Command,
     }
   }
 }
 
 export const setContent: RawCommands['setContent'] = (content, emitUpdate = false, parseOptions = {}) => ({ tr, editor, dispatch }) => {
-  const { createDocument } = editor
   const { doc } = tr
-  const document = createDocument(content, parseOptions)
+  const document = createDocument(content, editor.schema, parseOptions)
   const selection = TextSelection.create(doc, 0, doc.content.size)
 
   if (dispatch) {

packages/core/src/extensions/commands.ts

@@ -11,6 +11,7 @@ import * as exitCode from '../commands/exitCode'
 import * as extendMarkRange from '../commands/extendMarkRange'
 import * as first from '../commands/first'
 import * as focus from '../commands/focus'
+import * as insertContent from '../commands/insertContent'
 import * as insertHTML from '../commands/insertHTML'
 import * as insertNode from '../commands/insertNode'
 import * as insertText from '../commands/insertText'
@@ -58,6 +59,7 @@ export { exitCode }
 export { extendMarkRange }
 export { first }
 export { focus }
+export { insertContent }
 export { insertHTML }
 export { insertNode }
 export { insertText }
@@ -110,6 +112,7 @@ export const Commands = Extension.create({
       ...extendMarkRange,
       ...first,
       ...focus,
+      ...insertContent,
       ...insertHTML,
       ...insertNode,
       ...insertText,

packages/core/src/helpers/createDocument.ts

@@ -0,0 +1,13 @@
+import { Schema, Node as ProseMirrorNode } from 'prosemirror-model'
+import { AnyObject } from '../types'
+import createNodeFromContent from './createNodeFromContent'
+
+export type Content = string | JSON | null
+
+export default function createDocument(
+  content: Content,
+  schema: Schema,
+  parseOptions: AnyObject = {},
+): ProseMirrorNode {
+  return createNodeFromContent(content, schema, { slice: false, parseOptions }) as ProseMirrorNode
+}

packages/core/src/helpers/createNodeFromContent.ts

@@ -0,0 +1,59 @@
+import {
+  Schema,
+  DOMParser,
+  Node as ProseMirrorNode,
+  Fragment,
+} from 'prosemirror-model'
+import elementFromString from '../utilities/elementFromString'
+import { AnyObject } from '../types'
+
+export type Content = string | JSON | null
+
+export type CreateNodeFromContentOptions = {
+  slice?: boolean,
+  parseOptions?: AnyObject,
+}
+
+export default function createNodeFromContent(
+  content: Content,
+  schema: Schema,
+  options?: CreateNodeFromContentOptions,
+): string | ProseMirrorNode | Fragment {
+  options = {
+    slice: true,
+    parseOptions: {},
+    ...options,
+  }
+
+  if (content && typeof content === 'object') {
+    try {
+      return schema.nodeFromJSON(content)
+    } catch (error) {
+      console.warn(
+        '[tiptap warn]: Invalid content.',
+        'Passed value:',
+        content,
+        'Error:',
+        error,
+      )
+
+      return createNodeFromContent('', schema, options)
+    }
+  }
+
+  if (typeof content === 'string') {
+    const isHTML = content.trim().startsWith('<') && content.trim().endsWith('>')
+
+    if (isHTML || !options.slice) {
+      const parser = DOMParser.fromSchema(schema)
+
+      return options.slice
+        ? parser.parseSlice(elementFromString(content), options.parseOptions).content
+        : parser.parse(elementFromString(content), options.parseOptions)
+    }
+
+    return content
+  }
+
+  return createNodeFromContent('', schema, options)
+}