Fix/insert content at block insertions

.changeset/lazy-needles-train.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/core": major
+---
+
+`insertContent` and `insertContentAt` commands should not split text nodes like paragraphs into multiple nodes when the inserted content is at the beginning of the text to avoid empty nodes being created

demos/src/Commands/InsertContent/React/index.jsx

@@ -1,11 +1,12 @@
 import './styles.scss'
 
 import { Color } from '@tiptap/extension-color'
+import { Image } from '@tiptap/extension-image'
 import ListItem from '@tiptap/extension-list-item'
 import TextStyle from '@tiptap/extension-text-style'
 import { EditorProvider, useCurrentEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React from 'react'
+import React, { useCallback } from 'react'
 
 const htmlContent = `
   <h1><a href="https://tiptap.dev/">Tiptap</a></h1>
@@ -24,6 +25,12 @@ And more lines`
 const MenuBar = () => {
   const { editor } = useCurrentEditor()
 
+  const insertImage = useCallback(() => {
+    const url = prompt('Enter an image URL')
+
+    editor.chain().insertContent(`<img src="${url}" alt="Example image" />`).focus().run()
+  }, [editor])
+
   if (!editor) {
     return null
   }
@@ -40,12 +47,14 @@ const MenuBar = () => {
         <button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
           Insert text content
         </button>
+        <button data-test-id="image-content" onClick={insertImage}>Insert image</button>
       </div>
     </div>
   )
 }
 
 const extensions = [
+  Image,
   Color.configure({ types: [TextStyle.name, ListItem.name] }),
   TextStyle.configure({ types: [ListItem.name] }),
   StarterKit.configure({

demos/src/Commands/InsertContent/React/index.spec.js

@@ -11,7 +11,7 @@ context('/src/Commands/InsertContent/React/', () => {
     cy.get('button[data-test-id="html-content"]').click()
 
     // check if the content html is correct
-    cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p><p>This is a paragraph<br>with a break.</p><p>And this is some additional string content.</p>')
+    cy.get('.tiptap').should('contain.html', '<h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/">Tiptap</a></h1><p><strong>Hello World</strong></p><p>This is a paragraph<br>with a break.</p><p>And this is some additional string content.</p>')
   })
 
   it('should keep spaces inbetween tags in html content', () => {
@@ -91,4 +91,21 @@ context('/src/Commands/InsertContent/React/', () => {
     })
   })
 
+  it('should split content when image is inserted inbetween text', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('<p>HelloWorld</p>')
+      editor.commands.setTextSelection(6)
+      editor.commands.insertContent('<img src="https://example.image/1" alt="This is an example" />')
+      cy.get('.tiptap').should('contain.html', '<p>Hello</p><img src="https://example.image/1" alt="This is an example" contenteditable="false" draggable="true"><p>World</p>')
+    })
+  })
+
+  it('should not split content when image is inserted at beginning of text', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('<p>HelloWorld</p>')
+      editor.commands.setTextSelection(1)
+      editor.commands.insertContent('<img src="https://example.image/1" alt="This is an example" />')
+      cy.get('.tiptap').should('contain.html', '<img src="https://example.image/1" alt="This is an example" contenteditable="false" draggable="true"><p>HelloWorld</p>')
+    })
+  })
 })