From 8954007b2b92b040d69b26a0866ae58fabf5e512 Mon Sep 17 00:00:00 2001
From: bdbch <6538827+bdbch@users.noreply.github.com>
Date: Mon, 29 Jan 2024 13:15:39 +0100
Subject: [PATCH] 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>
---
 .../InsertContent/{Vue => React}/index.html   |   0
 .../InsertContent}/React/index.jsx            |   3 +
 .../InsertContent}/React/index.spec.js        |  18 +++-
 .../InsertContent}/React/styles.scss          |   0
 .../src/Commands/InsertContent/Vue/index.vue  | 102 ------------------
 demos/src/Issues/2720/React/index.html        |   0
 .../core/src/utilities/elementFromString.ts   |   4 +-
 7 files changed, 20 insertions(+), 107 deletions(-)
 rename demos/src/Commands/InsertContent/{Vue => React}/index.html (100%)
 rename demos/src/{Issues/2720 => Commands/InsertContent}/React/index.jsx (88%)
 rename demos/src/{Issues/2720 => Commands/InsertContent}/React/index.spec.js (62%)
 rename demos/src/{Issues/2720 => Commands/InsertContent}/React/styles.scss (100%)
 delete mode 100644 demos/src/Commands/InsertContent/Vue/index.vue
 delete mode 100644 demos/src/Issues/2720/React/index.html

diff --git a/demos/src/Commands/InsertContent/Vue/index.html b/demos/src/Commands/InsertContent/React/index.html
similarity index 100%
rename from demos/src/Commands/InsertContent/Vue/index.html
rename to demos/src/Commands/InsertContent/React/index.html
diff --git a/demos/src/Issues/2720/React/index.jsx b/demos/src/Commands/InsertContent/React/index.jsx
similarity index 88%
rename from demos/src/Issues/2720/React/index.jsx
rename to demos/src/Commands/InsertContent/React/index.jsx
index ac574f71d6d..e2ffe37d1f5 100644
--- a/demos/src/Issues/2720/React/index.jsx
+++ b/demos/src/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 b/demos/src/Commands/InsertContent/React/index.spec.js
similarity index 62%
rename from demos/src/Issues/2720/React/index.spec.js
rename to demos/src/Commands/InsertContent/React/index.spec.js
index 025c7b7b3d6..0bbb643d8c2 100644
--- a/demos/src/Issues/2720/React/index.spec.js
+++ b/demos/src/Commands/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 b/demos/src/Commands/InsertContent/React/styles.scss
similarity index 100%
rename from demos/src/Issues/2720/React/styles.scss
rename to demos/src/Commands/InsertContent/React/styles.scss
diff --git a/demos/src/Commands/InsertContent/Vue/index.vue b/demos/src/Commands/InsertContent/Vue/index.vue
deleted file mode 100644
index a4366b419bf..00000000000
--- a/demos/src/Commands/InsertContent/Vue/index.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div v-if="editor">
-    <button @click="insertContentByString">Insert content by string</button>
-    <button @click="insertContentByJSON">Insert content by JSON</button>
-    <button @click="insertTextByJSON">Insert text by JSON</button>
-    <button @click="insertTextByJSONArray">Insert text by JSON Array</button>
-  </div>
-  <editor-content :editor="editor" />
-</template>
-
-<script>
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import { Editor, EditorContent } from '@tiptap/vue-3'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      extensions: [
-        Document,
-        Paragraph,
-        Text,
-      ],
-      content: `
-        <p>
-          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
-        </p>
-        <p>
-          The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
-        </p>
-      `,
-    })
-  },
-
-  beforeUnmount() {
-    this.editor.destroy()
-  },
-
-  methods: {
-    insertContentByString() {
-      this.editor.chain().focus().insertContent('<p>Hello World</p>').run()
-    },
-    insertContentByJSON() {
-      this.editor.chain().focus().insertContent({
-        type: 'paragraph',
-        content: [
-          {
-            type: 'text',
-            text: 'Hello',
-          },
-          {
-            type: 'text',
-            text: ' ',
-          },
-          {
-            type: 'text',
-            text: 'World',
-          },
-        ],
-      }).run()
-    },
-    insertTextByJSON() {
-      this.editor.chain().focus().insertContent({
-        type: 'text',
-        text: 'Hello World',
-      }).run()
-    },
-    insertTextByJSONArray() {
-      this.editor.chain().focus().insertContent([{
-        type: 'text',
-        text: 'Hello',
-      }, {
-        type: 'text',
-        text: ' ',
-      }, {
-        type: 'text',
-        text: 'World',
-      }]).run()
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-/* Basic editor styles */
-.tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-</style>
diff --git a/demos/src/Issues/2720/React/index.html b/demos/src/Issues/2720/React/index.html
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/core/src/utilities/elementFromString.ts b/packages/core/src/utilities/elementFromString.ts
index 69a27634a9f..93ae51af81f 100644
--- 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)
 }