fix: add CreateNodeFromContentOptions to insertContent (#1678)

* ✨ Add CreateNodeFromContentOptions to insertContent * 📝 Add it to the doc
ueberdosis · Aug 9, 2021 · aabdfd6 · aabdfd6
1 parent a0444b5
commit aabdfd6
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 6 deletions.
diff --git a/docs/src/demos/Examples/Tables/React/index.jsx b/docs/src/demos/Examples/Tables/React/index.jsx
@@ -32,6 +32,31 @@ const CustomTableCell = TableCell.extend({
   },
 })
 
+export const tableHTML = `
+  <table style="width:100%">
+    <tr>
+      <th>Firstname</th>
+      <th>Lastname</th> 
+      <th>Age</th>
+    </tr>
+    <tr>
+      <td>Jill</td>
+      <td>Smith</td>
+      <td>50</td>
+    </tr>
+    <tr>
+      <td>Eve</td>
+      <td>Jackson</td>
+      <td>94</td>
+    </tr>
+    <tr>
+      <td>John</td>
+      <td>Doe</td>
+      <td>80</td>
+    </tr>
+  </table>
+`
+
 const MenuBar = ({ editor }) => {
   if (!editor) {
     return null
@@ -42,6 +67,13 @@ const MenuBar = ({ editor }) => {
       <button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
         insertTable
       </button>
+      <button onClick={() => editor.chain().focus().insertContent(tableHTML, {
+        parseOptions: {
+          preserveWhitespace: false,
+        },
+      }).run()}>
+        insertHTMLTable
+      </button>
       <button onClick={() => editor.chain().focus().addColumnBefore().run()} disabled={!editor.can().addColumnBefore()}>
         addColumnBefore
       </button>

diff --git a/docs/src/docPages/api/commands/insert-content.md b/docs/src/docPages/api/commands/insert-content.md
@@ -16,6 +16,14 @@ editor.commands.insertContent('Example Text')
 // HTML
 editor.commands.insertContent('<h1>Example Text</h1>')
 
+// HTML with trim white space
+editor.commands.insertContent('<h1>Example Text</h1>', 
+{
+  parseOptions: {
+    preserveWhitespace: false,
+  }
+})
+
 // JSON/Nodes
 editor.commands.insertContent({
   type: 'heading',

diff --git a/packages/core/src/commands/insertContent.ts b/packages/core/src/commands/insertContent.ts
@@ -1,3 +1,4 @@
+import { CreateNodeFromContentOptions } from '../helpers/createNodeFromContent'
 import { RawCommands, Content } from '../types'
 
 declare module '@tiptap/core' {
@@ -6,11 +7,11 @@ declare module '@tiptap/core' {
       /**
        * Insert a node or string of HTML at the current position.
        */
-      insertContent: (value: Content) => ReturnType,
+      insertContent: (value: Content, options?: CreateNodeFromContentOptions) => ReturnType,
     }
   }
 }
 
-export const insertContent: RawCommands['insertContent'] = value => ({ tr, commands }) => {
-  return commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value)
+export const insertContent: RawCommands['insertContent'] = (value, options) => ({ tr, commands }) => {
+  return commands.insertContentAt({ from: tr.selection.from, to: tr.selection.to }, value, options)
 }
diff --git a/packages/core/src/commands/insertContentAt.ts b/packages/core/src/commands/insertContentAt.ts
@@ -1,4 +1,4 @@
-import createNodeFromContent from '../helpers/createNodeFromContent'
+import createNodeFromContent, { CreateNodeFromContentOptions } from '../helpers/createNodeFromContent'
 import selectionToInsertionEnd from '../helpers/selectionToInsertionEnd'
 import {
   RawCommands,
@@ -12,17 +12,18 @@ declare module '@tiptap/core' {
       /**
        * Insert a node or string of HTML at a specific position.
        */
-      insertContentAt: (position: number | Range, value: Content) => ReturnType,
+      insertContentAt: (position: number | Range, value: Content, options?: CreateNodeFromContentOptions) => ReturnType,
     }
   }
 }
 
-export const insertContentAt: RawCommands['insertContentAt'] = (position, value) => ({ tr, dispatch, editor }) => {
+export const insertContentAt: RawCommands['insertContentAt'] = (position, value, options) => ({ tr, dispatch, editor }) => {
   if (dispatch) {
     const content = createNodeFromContent(value, editor.schema, {
       parseOptions: {
         preserveWhitespace: 'full',
       },
+      ...(options || {}),
     })
 
     // don’t dispatch an empty fragment because this can lead to strange errors