fix(core): fix insertContentAt keeping new lines in html content (#4465)

* fix(core): fix insertContentAt keeping new lines in html content

* test(core): add tests

* chore: remove stray console.log

* chore: remove buttons from demo

* fix(core): fix replacement on multiple breaks

demos/src/Issues/2720/React/index.jsx

@@ -0,0 +1,62 @@
+import './styles.scss'
+
+import { Color } from '@tiptap/extension-color'
+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'
+
+const htmlContent = `
+  <h1><a 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>
+`
+
+const textContent = `Hello World
+This is content with a new line. Is this working?
+
+Lets see if multiple new lines are inserted correctly
+
+And more lines`
+
+const MenuBar = () => {
+  const { editor } = useCurrentEditor()
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <>
+      <button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
+        Insert html content
+      </button>
+      <button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
+        Insert text content
+      </button>
+    </>
+  )
+}
+
+const extensions = [
+  Color.configure({ types: [TextStyle.name, ListItem.name] }),
+  TextStyle.configure({ types: [ListItem.name] }),
+  StarterKit.configure({
+    bulletList: {
+      keepMarks: true,
+    },
+    orderedList: {
+      keepMarks: true,
+    },
+  }),
+]
+
+const content = ''
+
+export default () => {
+  return (
+    <EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
+  )
+}

demos/src/Issues/2720/React/index.spec.js

@@ -0,0 +1,23 @@
+context('/src/Issues/2720/React/', () => {
+  before(() => {
+    cy.visit('/src/Issues/2720/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').type('{selectall}{backspace}')
+  })
+
+  it('should insert html content correctly', () => {
+    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>')
+  })
+
+  it('should insert text content correctly', () => {
+    cy.get('button[data-test-id="text-content"]').click()
+
+    // check if the content html is correct
+    cy.get('.tiptap').should('contain.html', 'Hello World\nThis is content with a new line. Is this working?\n\nLets see if multiple new lines are inserted correctly')
+  })
+})

demos/src/Issues/2720/React/styles.scss

@@ -0,0 +1,56 @@
+/* Basic editor styles */
+.tiptap {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    margin: 2rem 0;
+  }
+}

packages/core/src/helpers/createNodeFromContent.ts

@@ -40,6 +40,7 @@ export function createNodeFromContent(
   }
 
   if (typeof content === 'string') {
+    content = content.split('\n').map(part => part.trim()).join('') // we need to remove new lines since the parser will add breaks
     const parser = DOMParser.fromSchema(schema)
 
     return options.slice