fix: fix newline stripping via insertContent

* fix(core): fix whitespace handling in elementFromString function * demos: add button to insert HTML content with span tags * Move tests and demo to insertContent demo --------- Co-authored-by: bdbch <dominik@bdbch.com>
ueberdosis · Jan 29, 2024 · 8954007 · 8954007
1 parent 6a5aa60
commit 8954007
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 107 deletions.
diff --git a/...src/Commands/InsertContent/Vue/index.html → ...c/Commands/InsertContent/React/index.html b/...src/Commands/InsertContent/Vue/index.html → ...c/Commands/InsertContent/React/index.html
diff --git a/demos/src/Issues/2720/React/index.jsx → ...rc/Commands/InsertContent/React/index.jsx b/demos/src/Issues/2720/React/index.jsx → ...rc/Commands/InsertContent/React/index.jsx
@@ -33,6 +33,9 @@ const MenuBar = () => {
       <button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
         Insert html content
       </button>
+      <button data-test-id="html-content-spans" onClick={() => editor.chain().insertContent('<p><b>Hello</b> <i>World</i></p>').focus().run()}>
+        Insert html with span tags content
+      </button>
       <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 → ...ommands/InsertContent/React/index.spec.js b/demos/src/Issues/2720/React/index.spec.js → ...ommands/InsertContent/React/index.spec.js
@@ -1,4 +1,4 @@
-context('/src/Issues/2720/React/', () => {
+context('/src/Commands/InsertContent/React/', () => {
   before(() => {
     cy.visit('/src/Issues/2720/React/')
   })
@@ -14,6 +14,20 @@ context('/src/Issues/2720/React/', () => {
     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 keep spaces inbetween tags in html content', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('<p><b>Hello</b> <i>World</i></p>')
+      cy.get('.tiptap').should('contain.html', '<p><strong>Hello</strong> <em>World</em></p>')
+    })
+  })
+
+  it('should keep empty spaces', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.insertContent('  ')
+      cy.get('.tiptap').should('contain.html', '<p>  </p>')
+    })
+  })
+
   it('should insert text content correctly', () => {
     cy.get('button[data-test-id="text-content"]').click()
 
@@ -23,7 +37,7 @@ context('/src/Issues/2720/React/', () => {
 
   it('should keep newlines in pre tag', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent('<pre><code>foo\nbar</code></pre>')
+      editor.commands.insertContent('<pre><code>foo\nbar</code></pre>')
       cy.get('.tiptap').should('contain.html', '<pre><code>foo\nbar</code></pre>')
     })
   })

diff --git a/demos/src/Issues/2720/React/styles.scss → .../Commands/InsertContent/React/styles.scss b/demos/src/Issues/2720/React/styles.scss → .../Commands/InsertContent/React/styles.scss
diff --git a/demos/src/Commands/InsertContent/Vue/index.vue b/demos/src/Commands/InsertContent/Vue/index.vue
diff --git a/demos/src/Issues/2720/React/index.html b/demos/src/Issues/2720/React/index.html
diff --git a/packages/core/src/utilities/elementFromString.ts b/packages/core/src/utilities/elementFromString.ts
@@ -4,7 +4,7 @@ const removeWhitespaces = (node: HTMLElement) => {
   for (let i = children.length - 1; i >= 0; i -= 1) {
     const child = children[i]
 
-    if (child.nodeType === 3 && child.nodeValue && !/\S/.test(child.nodeValue)) {
+    if (child.nodeType === 3 && child.nodeValue && /^(\n\s\s|\n)$/.test(child.nodeValue)) {
       node.removeChild(child)
     } else if (child.nodeType === 1) {
       removeWhitespaces(child as HTMLElement)
@@ -20,7 +20,5 @@ export function elementFromString(value: string): HTMLElement {
 
   const html = new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
 
-  removeWhitespaces(html)
-
   return removeWhitespaces(html)
 }