From 0300630a5b04b61d4eef8155f24ca0ef2d683966 Mon Sep 17 00:00:00 2001
From: Dominik <6538827+bdbch@users.noreply.github.com>
Date: Mon, 27 Feb 2023 19:26:14 +0100
Subject: [PATCH] fix(core): allow insertContentAt and insertContent text node
 arrays (#3790)

* fix(core): allow insertContentAt and insertContent to handle array of text nodes

* fix(core): allow insertContent via json including a text content
---
 .../src/Commands/InsertContent/Vue/index.html |   0
 .../Commands/InsertContent/Vue/index.spec.js  |  11 ++
 .../src/Commands/InsertContent/Vue/index.vue  | 102 ++++++++++++++++++
 packages/core/src/commands/insertContentAt.ts |  10 +-
 4 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 demos/src/Commands/InsertContent/Vue/index.html
 create mode 100644 demos/src/Commands/InsertContent/Vue/index.spec.js
 create mode 100644 demos/src/Commands/InsertContent/Vue/index.vue

diff --git a/demos/src/Commands/InsertContent/Vue/index.html b/demos/src/Commands/InsertContent/Vue/index.html
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/demos/src/Commands/InsertContent/Vue/index.spec.js b/demos/src/Commands/InsertContent/Vue/index.spec.js
new file mode 100644
index 00000000000..8daa404475d
--- /dev/null
+++ b/demos/src/Commands/InsertContent/Vue/index.spec.js
@@ -0,0 +1,11 @@
+context('/src/Commands/InsertContent/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Commands/InsertContent/Vue/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+})
diff --git a/demos/src/Commands/InsertContent/Vue/index.vue b/demos/src/Commands/InsertContent/Vue/index.vue
new file mode 100644
index 00000000000..546aa9358ce
--- /dev/null
+++ b/demos/src/Commands/InsertContent/Vue/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div v-if="editor">
+    <button @click="insertContentByString">Insert content by string</button>
+    <button @click="insertContentByJSON">Insert content by JSON</button>
+    <button @click="insertTextByJSON">Insert text by JSON</button>
+    <button @click="insertTextByJSONArray">Insert text by JSON Array</button>
+  </div>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+      ],
+      content: `
+        <p>
+          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+        </p>
+        <p>
+          The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
+        </p>
+      `,
+    })
+  },
+
+  beforeUnmount() {
+    this.editor.destroy()
+  },
+
+  methods: {
+    insertContentByString() {
+      this.editor.chain().focus().insertContent('<p>Hello World</p>').run()
+    },
+    insertContentByJSON() {
+      this.editor.chain().focus().insertContent({
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Hello',
+          },
+          {
+            type: 'text',
+            text: ' ',
+          },
+          {
+            type: 'text',
+            text: 'World',
+          },
+        ],
+      }).run()
+    },
+    insertTextByJSON() {
+      this.editor.chain().focus().insertContent({
+        type: 'text',
+        text: 'Hello World',
+      }).run()
+    },
+    insertTextByJSONArray() {
+      this.editor.chain().focus().insertContent([{
+        type: 'text',
+        text: 'Hello',
+      }, {
+        type: 'text',
+        text: ' ',
+      }, {
+        type: 'text',
+        text: 'World',
+      }]).run()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>
diff --git a/packages/core/src/commands/insertContentAt.ts b/packages/core/src/commands/insertContentAt.ts
index 63a1889913f..b0d54092416 100644
--- a/packages/core/src/commands/insertContentAt.ts
+++ b/packages/core/src/commands/insertContentAt.ts
@@ -79,7 +79,15 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
     // if there is only plain text we have to use `insertText`
     // because this will keep the current marks
     if (isOnlyTextContent) {
-      tr.insertText(value as string, from, to)
+      // if value is string, we can use it directly
+      // otherwise if it is an array, we have to join it
+      if (Array.isArray(value)) {
+        tr.insertText(value.map(v => v.text || '').join(''), from, to)
+      } else if (typeof value === 'object' && !!value && !!value.text) {
+        tr.insertText(value.text, from, to)
+      } else {
+        tr.insertText(value as string, from, to)
+      }
     } else {
       tr.replaceWith(from, to, content)
     }