From 144266036110e39cb78f7ef081391d1bc7cf794a Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik.biedebach@ueber.io>
Date: Thu, 21 Sep 2023 10:37:48 +0200
Subject: [PATCH 1/5] fix(core): fix insertContentAt keeping new lines in html
 content

---
 demos/src/Issues/2720/React/index.html        |   0
 demos/src/Issues/2720/React/index.jsx         | 249 ++++++++++++++++++
 demos/src/Issues/2720/React/index.spec.js     | 143 ++++++++++
 demos/src/Issues/2720/React/styles.scss       |  56 ++++
 packages/core/src/commands/insertContentAt.ts |   1 +
 .../core/src/helpers/createNodeFromContent.ts |   1 +
 6 files changed, 450 insertions(+)
 create mode 100644 demos/src/Issues/2720/React/index.html
 create mode 100644 demos/src/Issues/2720/React/index.jsx
 create mode 100644 demos/src/Issues/2720/React/index.spec.js
 create mode 100644 demos/src/Issues/2720/React/styles.scss

diff --git a/demos/src/Issues/2720/React/index.html b/demos/src/Issues/2720/React/index.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demos/src/Issues/2720/React/index.jsx b/demos/src/Issues/2720/React/index.jsx
new file mode 100644
index 0000000000..098cfe4a91
--- /dev/null
+++ b/demos/src/Issues/2720/React/index.jsx
@@ -0,0 +1,249 @@
+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>`
+
+const textContent = `Hello World
+This is content with a new line. Is this working?
+
+Lets see if multiple new lines are inserted correctly
+
+Test`
+
+const MenuBar = () => {
+  const { editor } = useCurrentEditor()
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <>
+      <button onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
+        Insert html content
+      </button>
+      <button onClick={() => editor.chain().insertContent(textContent).focus().run()}>
+        Insert text content
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleBold()
+            .run()
+        }
+        className={editor.isActive('bold') ? 'is-active' : ''}
+      >
+        bold
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleItalic()
+            .run()
+        }
+        className={editor.isActive('italic') ? 'is-active' : ''}
+      >
+        italic
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleStrike()
+            .run()
+        }
+        className={editor.isActive('strike') ? 'is-active' : ''}
+      >
+        strike
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleCode()
+            .run()
+        }
+        className={editor.isActive('code') ? 'is-active' : ''}
+      >
+        code
+      </button>
+      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+        clear marks
+      </button>
+      <button onClick={() => editor.chain().focus().clearNodes().run()}>
+        clear nodes
+      </button>
+      <button
+        onClick={() => editor.chain().focus().setParagraph().run()}
+        className={editor.isActive('paragraph') ? 'is-active' : ''}
+      >
+        paragraph
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+      >
+        h1
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+      >
+        h2
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+      >
+        h3
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
+      >
+        h4
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
+        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
+      >
+        h5
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
+        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
+      >
+        h6
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        className={editor.isActive('bulletList') ? 'is-active' : ''}
+      >
+        bullet list
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        className={editor.isActive('orderedList') ? 'is-active' : ''}
+      >
+        ordered list
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        className={editor.isActive('codeBlock') ? 'is-active' : ''}
+      >
+        code block
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        className={editor.isActive('blockquote') ? 'is-active' : ''}
+      >
+        blockquote
+      </button>
+      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+        horizontal rule
+      </button>
+      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
+        hard break
+      </button>
+      <button
+        onClick={() => editor.chain().focus().undo().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .undo()
+            .run()
+        }
+      >
+        undo
+      </button>
+      <button
+        onClick={() => editor.chain().focus().redo().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .redo()
+            .run()
+        }
+      >
+        redo
+      </button>
+      <button
+        onClick={() => editor.chain().focus().setColor('#958DF1').run()}
+        className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
+      >
+        purple
+      </button>
+    </>
+  )
+}
+
+const extensions = [
+  Color.configure({ types: [TextStyle.name, ListItem.name] }),
+  TextStyle.configure({ types: [ListItem.name] }),
+  StarterKit.configure({
+    bulletList: {
+      keepMarks: true,
+      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+    },
+    orderedList: {
+      keepMarks: true,
+      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+    },
+  }),
+]
+
+const content = `
+<h2>
+  Hi there,
+</h2>
+<p>
+  this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+</p>
+<ul>
+  <li>
+    That’s a bullet list with one …
+  </li>
+  <li>
+    … or two list items.
+  </li>
+</ul>
+<p>
+  Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+</p>
+<pre><code class="language-css">body {
+display: none;
+}</code></pre>
+<p>
+  I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+</p>
+<blockquote>
+  Wow, that’s amazing. Good work, boy! 👏
+  <br />
+  — Mom
+</blockquote>
+`
+
+export default () => {
+  return (
+    <EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
+  )
+}
diff --git a/demos/src/Issues/2720/React/index.spec.js b/demos/src/Issues/2720/React/index.spec.js
new file mode 100644
index 0000000000..b23e72c17e
--- /dev/null
+++ b/demos/src/Issues/2720/React/index.spec.js
@@ -0,0 +1,143 @@
+context('/src/Examples/Default/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/Default/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<h1>Example Text</h1>')
+      cy.get('.tiptap').type('{selectall}')
+    })
+  })
+
+  it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
+    cy.get('.tiptap h1').should('exist')
+    cy.get('.tiptap p').should('not.exist')
+
+    cy.get('.tiptap')
+      .trigger('keydown', { modKey: true, altKey: true, key: '0' })
+      .find('p')
+      .should('contain', 'Example Text')
+  })
+
+  const buttonMarks = [
+    { label: 'bold', tag: 'strong' },
+    { label: 'italic', tag: 'em' },
+    { label: 'strike', tag: 's' },
+  ]
+
+  buttonMarks.forEach(m => {
+    it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
+      cy.get('.tiptap').type('{selectall}Hello world')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('be.disabled')
+    })
+
+    it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
+      cy.get('.tiptap').type('{selectall}Hello world')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('not.be.disabled')
+    })
+
+    it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('be.disabled')
+    })
+
+    it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('not.be.disabled')
+    })
+
+    it(`should apply ${m.label} when the button is pressed`, () => {
+      cy.get('.tiptap').type('{selectall}Hello world')
+      cy.get('button').contains('paragraph').click()
+      cy.get('.tiptap').type('{selectall}')
+      cy.get('button').contains(m.label).click()
+      cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
+    })
+  })
+
+  it('should clear marks when the button is pressed', () => {
+    cy.get('.tiptap').type('{selectall}Hello world')
+    cy.get('button').contains('paragraph').click()
+    cy.get('.tiptap').type('{selectall}')
+    cy.get('button').contains('bold').click()
+    cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
+    cy.get('button').contains('clear marks').click()
+    cy.get('.tiptap strong').should('not.exist')
+  })
+
+  it('should clear nodes when the button is pressed', () => {
+    cy.get('.tiptap').type('{selectall}Hello world')
+    cy.get('button').contains('bullet list').click()
+    cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
+    cy.get('button').contains('clear nodes').click()
+    cy.get('.tiptap ul').should('not.exist')
+    cy.get('.tiptap p').should('have.length', 3)
+  })
+
+  const buttonNodes = [
+    { label: 'h1', tag: 'h1' },
+    { label: 'h2', tag: 'h2' },
+    { label: 'h3', tag: 'h3' },
+    { label: 'h4', tag: 'h4' },
+    { label: 'h5', tag: 'h5' },
+    { label: 'h6', tag: 'h6' },
+    { label: 'bullet list', tag: 'ul' },
+    { label: 'ordered list', tag: 'ol' },
+    { label: 'code block', tag: 'pre code' },
+    { label: 'blockquote', tag: 'blockquote' },
+  ]
+
+  buttonNodes.forEach(n => {
+    it(`should set ${n.label} when the button is pressed`, () => {
+      cy.get('button').contains('paragraph').click()
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
+
+      cy.get('button').contains(n.label).click()
+      cy.get(`.tiptap ${n.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get('button').contains(n.label).click()
+      cy.get(`.tiptap ${n.tag}`).should('not.exist')
+    })
+  })
+
+  it('should add a hr when on the same line as a node', () => {
+    cy.get('.tiptap').type('{rightArrow}')
+    cy.get('button').contains('horizontal rule').click()
+    cy.get('.tiptap hr').should('exist')
+    cy.get('.tiptap h1').should('exist')
+  })
+
+  it('should add a hr when on a new line', () => {
+    cy.get('.tiptap').type('{rightArrow}{enter}')
+    cy.get('button').contains('horizontal rule').click()
+    cy.get('.tiptap hr').should('exist')
+    cy.get('.tiptap h1').should('exist')
+  })
+
+  it('should add a br', () => {
+    cy.get('.tiptap').type('{rightArrow}')
+    cy.get('button').contains('hard break').click()
+    cy.get('.tiptap h1 br').should('exist')
+  })
+
+  it('should undo', () => {
+    cy.get('.tiptap').type('{selectall}{backspace}')
+    cy.get('button').contains('undo').click()
+    cy.get('.tiptap').should('contain', 'Hello world')
+  })
+
+  it('should redo', () => {
+    cy.get('.tiptap').type('{selectall}{backspace}')
+    cy.get('button').contains('undo').click()
+    cy.get('.tiptap').should('contain', 'Hello world')
+    cy.get('button').contains('redo').click()
+    cy.get('.tiptap').should('not.contain', 'Hello world')
+  })
+})
diff --git a/demos/src/Issues/2720/React/styles.scss b/demos/src/Issues/2720/React/styles.scss
new file mode 100644
index 0000000000..4d2b2c81ea
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/core/src/commands/insertContentAt.ts b/packages/core/src/commands/insertContentAt.ts
index 68589c5a22..69f917625c 100644
--- a/packages/core/src/commands/insertContentAt.ts
+++ b/packages/core/src/commands/insertContentAt.ts
@@ -89,6 +89,7 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
         tr.insertText(value as string, from, to)
       }
     } else {
+      console.log(content)
       tr.replaceWith(from, to, content)
     }
 
diff --git a/packages/core/src/helpers/createNodeFromContent.ts b/packages/core/src/helpers/createNodeFromContent.ts
index b6a7e74895..2870e2ee14 100644
--- a/packages/core/src/helpers/createNodeFromContent.ts
+++ b/packages/core/src/helpers/createNodeFromContent.ts
@@ -40,6 +40,7 @@ export function createNodeFromContent(
   }
 
   if (typeof content === 'string') {
+    content = content.replace('\n', '') // we need to remove new lines since the parser will add breaks
     const parser = DOMParser.fromSchema(schema)
 
     return options.slice

From 68b52e0732ee46ff9471292c48794de0371bca16 Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik.biedebach@ueber.io>
Date: Thu, 21 Sep 2023 10:51:16 +0200
Subject: [PATCH 2/5] test(core): add tests

---
 demos/src/Issues/2720/React/index.jsx     |   8 +-
 demos/src/Issues/2720/React/index.spec.js | 142 ++--------------------
 2 files changed, 14 insertions(+), 136 deletions(-)

diff --git a/demos/src/Issues/2720/React/index.jsx b/demos/src/Issues/2720/React/index.jsx
index 098cfe4a91..585d5fe3d7 100644
--- a/demos/src/Issues/2720/React/index.jsx
+++ b/demos/src/Issues/2720/React/index.jsx
@@ -13,9 +13,7 @@ const htmlContent = `<h1><a href="https://tiptap.dev/">Tiptap</a></h1>
 const textContent = `Hello World
 This is content with a new line. Is this working?
 
-Lets see if multiple new lines are inserted correctly
-
-Test`
+Lets see if multiple new lines are inserted correctly`
 
 const MenuBar = () => {
   const { editor } = useCurrentEditor()
@@ -26,10 +24,10 @@ const MenuBar = () => {
 
   return (
     <>
-      <button onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
+      <button testId="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
         Insert html content
       </button>
-      <button onClick={() => editor.chain().insertContent(textContent).focus().run()}>
+      <button testId="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
         Insert text content
       </button>
       <button
diff --git a/demos/src/Issues/2720/React/index.spec.js b/demos/src/Issues/2720/React/index.spec.js
index b23e72c17e..354963e099 100644
--- a/demos/src/Issues/2720/React/index.spec.js
+++ b/demos/src/Issues/2720/React/index.spec.js
@@ -1,143 +1,23 @@
-context('/src/Examples/Default/React/', () => {
+context('/src/Issues/2720/React/', () => {
   before(() => {
-    cy.visit('/src/Examples/Default/React/')
+    cy.visit('/src/Issues/2720/React/')
   })
 
   beforeEach(() => {
-    cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent('<h1>Example Text</h1>')
-      cy.get('.tiptap').type('{selectall}')
-    })
-  })
-
-  it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
-    cy.get('.tiptap h1').should('exist')
-    cy.get('.tiptap p').should('not.exist')
-
-    cy.get('.tiptap')
-      .trigger('keydown', { modKey: true, altKey: true, key: '0' })
-      .find('p')
-      .should('contain', 'Example Text')
-  })
-
-  const buttonMarks = [
-    { label: 'bold', tag: 'strong' },
-    { label: 'italic', tag: 'em' },
-    { label: 'strike', tag: 's' },
-  ]
-
-  buttonMarks.forEach(m => {
-    it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
-      cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains(m.label).should('be.disabled')
-    })
-
-    it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
-      cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
-      cy.get('button').contains(m.label).should('not.be.disabled')
-    })
-
-    it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
-      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains(m.label).should('be.disabled')
-    })
-
-    it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
-      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-      cy.get('button').contains('code').click()
-      cy.get('button').contains('code').click()
-      cy.get('button').contains(m.label).should('not.be.disabled')
-    })
-
-    it(`should apply ${m.label} when the button is pressed`, () => {
-      cy.get('.tiptap').type('{selectall}Hello world')
-      cy.get('button').contains('paragraph').click()
-      cy.get('.tiptap').type('{selectall}')
-      cy.get('button').contains(m.label).click()
-      cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
-    })
-  })
-
-  it('should clear marks when the button is pressed', () => {
-    cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('paragraph').click()
-    cy.get('.tiptap').type('{selectall}')
-    cy.get('button').contains('bold').click()
-    cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
-    cy.get('button').contains('clear marks').click()
-    cy.get('.tiptap strong').should('not.exist')
-  })
-
-  it('should clear nodes when the button is pressed', () => {
-    cy.get('.tiptap').type('{selectall}Hello world')
-    cy.get('button').contains('bullet list').click()
-    cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
-    cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
-    cy.get('button').contains('clear nodes').click()
-    cy.get('.tiptap ul').should('not.exist')
-    cy.get('.tiptap p').should('have.length', 3)
-  })
-
-  const buttonNodes = [
-    { label: 'h1', tag: 'h1' },
-    { label: 'h2', tag: 'h2' },
-    { label: 'h3', tag: 'h3' },
-    { label: 'h4', tag: 'h4' },
-    { label: 'h5', tag: 'h5' },
-    { label: 'h6', tag: 'h6' },
-    { label: 'bullet list', tag: 'ul' },
-    { label: 'ordered list', tag: 'ol' },
-    { label: 'code block', tag: 'pre code' },
-    { label: 'blockquote', tag: 'blockquote' },
-  ]
-
-  buttonNodes.forEach(n => {
-    it(`should set ${n.label} when the button is pressed`, () => {
-      cy.get('button').contains('paragraph').click()
-      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
-
-      cy.get('button').contains(n.label).click()
-      cy.get(`.tiptap ${n.tag}`).should('exist').should('have.text', 'Hello world')
-      cy.get('button').contains(n.label).click()
-      cy.get(`.tiptap ${n.tag}`).should('not.exist')
-    })
-  })
-
-  it('should add a hr when on the same line as a node', () => {
-    cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('horizontal rule').click()
-    cy.get('.tiptap hr').should('exist')
-    cy.get('.tiptap h1').should('exist')
+    cy.get('.tiptap').type('{selectall}{backspace}')
   })
 
-  it('should add a hr when on a new line', () => {
-    cy.get('.tiptap').type('{rightArrow}{enter}')
-    cy.get('button').contains('horizontal rule').click()
-    cy.get('.tiptap hr').should('exist')
-    cy.get('.tiptap h1').should('exist')
-  })
+  it('should insert html content correctly', () => {
+    cy.get('button[testId="html-content"]').click()
 
-  it('should add a br', () => {
-    cy.get('.tiptap').type('{rightArrow}')
-    cy.get('button').contains('hard break').click()
-    cy.get('.tiptap h1 br').should('exist')
+    // check if the content html is correct
+    cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
   })
 
-  it('should undo', () => {
-    cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
-    cy.get('.tiptap').should('contain', 'Hello world')
-  })
+  it('should insert text content correctly', () => {
+    cy.get('button[testId="text-content"]').click()
 
-  it('should redo', () => {
-    cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('button').contains('undo').click()
-    cy.get('.tiptap').should('contain', 'Hello world')
-    cy.get('button').contains('redo').click()
-    cy.get('.tiptap').should('not.contain', 'Hello world')
+    // 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')
   })
 })

From e97bc2785ac1165d33a12a80d764138c1e386442 Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik.biedebach@ueber.io>
Date: Thu, 21 Sep 2023 10:53:38 +0200
Subject: [PATCH 3/5] chore: remove stray console.log

---
 packages/core/src/commands/insertContentAt.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/src/commands/insertContentAt.ts b/packages/core/src/commands/insertContentAt.ts
index 69f917625c..68589c5a22 100644
--- a/packages/core/src/commands/insertContentAt.ts
+++ b/packages/core/src/commands/insertContentAt.ts
@@ -89,7 +89,6 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
         tr.insertText(value as string, from, to)
       }
     } else {
-      console.log(content)
       tr.replaceWith(from, to, content)
     }
 

From 074f6d17f3ce9bd05a8aa06eb5999f2bf74ef00b Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik.biedebach@ueber.io>
Date: Thu, 21 Sep 2023 10:57:24 +0200
Subject: [PATCH 4/5] chore: remove buttons from demo

---
 demos/src/Issues/2720/React/index.jsx | 193 +-------------------------
 1 file changed, 1 insertion(+), 192 deletions(-)

diff --git a/demos/src/Issues/2720/React/index.jsx b/demos/src/Issues/2720/React/index.jsx
index 585d5fe3d7..8216926fdb 100644
--- a/demos/src/Issues/2720/React/index.jsx
+++ b/demos/src/Issues/2720/React/index.jsx
@@ -30,166 +30,6 @@ const MenuBar = () => {
       <button testId="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
         Insert text content
       </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleBold()
-            .run()
-        }
-        className={editor.isActive('bold') ? 'is-active' : ''}
-      >
-        bold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleItalic()
-            .run()
-        }
-        className={editor.isActive('italic') ? 'is-active' : ''}
-      >
-        italic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleStrike()
-            .run()
-        }
-        className={editor.isActive('strike') ? 'is-active' : ''}
-      >
-        strike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleCode()
-            .run()
-        }
-        className={editor.isActive('code') ? 'is-active' : ''}
-      >
-        code
-      </button>
-      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
-        clear marks
-      </button>
-      <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        clear nodes
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setParagraph().run()}
-        className={editor.isActive('paragraph') ? 'is-active' : ''}
-      >
-        paragraph
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-      >
-        h1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-      >
-        h2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-      >
-        h3
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
-        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
-      >
-        h4
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
-        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
-      >
-        h5
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
-        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
-      >
-        h6
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        bullet list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        ordered list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        code block
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={editor.isActive('blockquote') ? 'is-active' : ''}
-      >
-        blockquote
-      </button>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
-      </button>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
-        hard break
-      </button>
-      <button
-        onClick={() => editor.chain().focus().undo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .undo()
-            .run()
-        }
-      >
-        undo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().redo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .redo()
-            .run()
-        }
-      >
-        redo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#958DF1').run()}
-        className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
-      >
-        purple
-      </button>
     </>
   )
 }
@@ -200,45 +40,14 @@ const extensions = [
   StarterKit.configure({
     bulletList: {
       keepMarks: true,
-      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
     },
     orderedList: {
       keepMarks: true,
-      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
     },
   }),
 ]
 
-const content = `
-<h2>
-  Hi there,
-</h2>
-<p>
-  this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-</p>
-<ul>
-  <li>
-    That’s a bullet list with one …
-  </li>
-  <li>
-    … or two list items.
-  </li>
-</ul>
-<p>
-  Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
-</p>
-<pre><code class="language-css">body {
-display: none;
-}</code></pre>
-<p>
-  I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
-</p>
-<blockquote>
-  Wow, that’s amazing. Good work, boy! 👏
-  <br />
-  — Mom
-</blockquote>
-`
+const content = ''
 
 export default () => {
   return (

From ca6546f26a203beba580d9214e86aafb28c1de15 Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik.biedebach@ueber.io>
Date: Thu, 21 Sep 2023 12:03:01 +0200
Subject: [PATCH 5/5] fix(core): fix replacement on multiple breaks

---
 demos/src/Issues/2720/React/index.jsx            | 16 +++++++++++-----
 demos/src/Issues/2720/React/index.spec.js        |  6 +++---
 .../core/src/helpers/createNodeFromContent.ts    |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/demos/src/Issues/2720/React/index.jsx b/demos/src/Issues/2720/React/index.jsx
index 8216926fdb..ac574f71d6 100644
--- a/demos/src/Issues/2720/React/index.jsx
+++ b/demos/src/Issues/2720/React/index.jsx
@@ -7,13 +7,19 @@ 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>`
+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`
+Lets see if multiple new lines are inserted correctly
+
+And more lines`
 
 const MenuBar = () => {
   const { editor } = useCurrentEditor()
@@ -24,10 +30,10 @@ const MenuBar = () => {
 
   return (
     <>
-      <button testId="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
+      <button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
         Insert html content
       </button>
-      <button testId="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
+      <button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
         Insert text content
       </button>
     </>
diff --git a/demos/src/Issues/2720/React/index.spec.js b/demos/src/Issues/2720/React/index.spec.js
index 354963e099..6035fd14a5 100644
--- a/demos/src/Issues/2720/React/index.spec.js
+++ b/demos/src/Issues/2720/React/index.spec.js
@@ -8,14 +8,14 @@ context('/src/Issues/2720/React/', () => {
   })
 
   it('should insert html content correctly', () => {
-    cy.get('button[testId="html-content"]').click()
+    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>')
+    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[testId="text-content"]').click()
+    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')
diff --git a/packages/core/src/helpers/createNodeFromContent.ts b/packages/core/src/helpers/createNodeFromContent.ts
index 2870e2ee14..7b161d67ec 100644
--- a/packages/core/src/helpers/createNodeFromContent.ts
+++ b/packages/core/src/helpers/createNodeFromContent.ts
@@ -40,7 +40,7 @@ export function createNodeFromContent(
   }
 
   if (typeof content === 'string') {
-    content = content.replace('\n', '') // we need to remove new lines since the parser will add breaks
+    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