fix(core): fix new lines being added via elementFromString (#4767)

Co-authored-by: bdbch <dominik@bdbch.com>
ueberdosis · Jan 10, 2024 · b7a2504 · b7a2504
1 parent 0b85891
commit b7a2504
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/demos/src/Issues/2720/React/index.spec.js b/demos/src/Issues/2720/React/index.spec.js
@@ -20,4 +20,11 @@ context('/src/Issues/2720/React/', () => {
     // 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')
   })
+
+  it('should keep newlines in pre tag', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<pre><code>foo\nbar</code></pre>')
+      cy.get('.tiptap').should('contain.html', '<pre><code>foo\nbar</code></pre>')
+    })
+  })
 })
diff --git a/packages/core/src/helpers/createNodeFromContent.ts b/packages/core/src/helpers/createNodeFromContent.ts
@@ -40,7 +40,6 @@ 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

diff --git a/packages/core/src/utilities/elementFromString.ts b/packages/core/src/utilities/elementFromString.ts
@@ -1,6 +1,26 @@
+const removeWhitespaces = (node: HTMLElement) => {
+  const children = node.childNodes
+
+  for (let i = children.length - 1; i >= 0; i -= 1) {
+    const child = children[i]
+
+    if (child.nodeType === 3 && child.nodeValue && !/\S/.test(child.nodeValue)) {
+      node.removeChild(child)
+    } else if (child.nodeType === 1) {
+      removeWhitespaces(child as HTMLElement)
+    }
+  }
+
+  return node
+}
+
 export function elementFromString(value: string): HTMLElement {
   // add a wrapper to preserve leading and trailing whitespace
   const wrappedValue = `<body>${value}</body>`
 
-  return new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
+  const html = new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
+
+  removeWhitespaces(html)
+
+  return removeWhitespaces(html)
 }