feat: keep backwards compatibility with previous versions

ueberdosis · May 30, 2024 · 6da6344 · 6da6344
1 parent 49f41e1
commit 6da6344
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 9 deletions.
diff --git a/demos/src/Commands/SetContent/React/index.spec.js b/demos/src/Commands/SetContent/React/index.spec.js
@@ -41,9 +41,16 @@ context('/src/Commands/SetContent/React/', () => {
     })
   })
 
-  it('should keep newlines and tabs', () => {
+  it('should remove newlines and tabs', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p>Hello\n\tworld\n\t\thow\n\t\t\tnice.</p>')
+      cy.get('.tiptap').should('contain.html', '<p>Hello world how nice.</p>')
+    })
+  })
+
+  it('should keep newlines and tabs when preserveWhitespace = full', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Hello\n\tworld\n\t\thow\n\t\t\tnice.</p>', false, { preserveWhitespace: 'full' })
       cy.get('.tiptap').should('contain.html', '<p>Hello\n\tworld\n\t\thow\n\t\t\tnice.</p>')
     })
   })
@@ -70,17 +77,19 @@ context('/src/Commands/SetContent/React/', () => {
     })
   })
 
-  it('should keep newlines and tabs', () => {
+  it('should remove newlines and tabs between html fragments', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent('<p>Hello\n\tworld\n\t\thow\n\t\t\tnice.\ntest\tOK</p>')
-      cy.get('.tiptap').should('contain.html', '<p>Hello\n\tworld\n\t\thow\n\t\t\tnice.\ntest\tOK</p>')
+      editor.commands.setContent('<h1>Tiptap</h1>\n\t<p><strong>Hello World</strong></p>')
+      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
     })
   })
 
-  it('should keep newlines and tabs', () => {
+  // TODO I'm not certain about this behavior and what it should do...
+  // This exists in insertContentAt as well
+  it('should keep newlines and tabs between html fragments when preserveWhitespace = full', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent('<h1>Tiptap</h1>\n<p><strong>Hello World</strong></p>')
-      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
+      editor.commands.setContent('<h1>Tiptap</h1>\n\t<p><strong>Hello World</strong></p>', false, { preserveWhitespace: 'full' })
+      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p>\n\t</p><p><strong>Hello World</strong></p>')
     })
   })
 
@@ -91,16 +100,39 @@ context('/src/Commands/SetContent/React/', () => {
     })
   })
 
+  it('should allow inserting nothing when preserveWhitespace = full', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('', false, { preserveWhitespace: 'full' })
+      cy.get('.tiptap').should('contain.html', '')
+    })
+  })
+
   it('should allow inserting a partial HTML tag', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p>foo')
       cy.get('.tiptap').should('contain.html', '<p>foo</p>')
     })
   })
 
-  it('should allow inserting an incomplete HTML tag', () => {
+  it('should allow inserting a partial HTML tag when preserveWhitespace = full', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>foo', false, { preserveWhitespace: 'full' })
+      cy.get('.tiptap').should('contain.html', '<p>foo</p>')
+    })
+  })
+
+  it('will remove an incomplete HTML tag', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('foo<p')
+      cy.get('.tiptap').should('contain.html', '<p>foo</p>')
+    })
+  })
+
+  // TODO I'm not certain about this behavior and what it should do...
+  // This exists in insertContentAt as well
+  it('should allow inserting an incomplete HTML tag when preserveWhitespace = full', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('foo<p', false, { preserveWhitespace: 'full' })
       cy.get('.tiptap').should('contain.html', '<p>foo&lt;p</p>')
     })
   })
@@ -112,6 +144,13 @@ context('/src/Commands/SetContent/React/', () => {
     })
   })
 
+  it('should allow inserting a list when preserveWhitespace = full', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<ul><li>ABC</li><li>123</li></ul>', false, { preserveWhitespace: 'full' })
+      cy.get('.tiptap').should('contain.html', '<ul><li><p>ABC</p></li><li><p>123</p></li></ul>')
+    })
+  })
+
   it('should remove newlines and tabs when parseOptions.preserveWhitespace=false', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n', false, { preserveWhitespace: false })

diff --git a/packages/core/src/commands/setContent.ts b/packages/core/src/commands/setContent.ts
@@ -1,5 +1,6 @@
 import { ParseOptions } from '@tiptap/pm/model'
 
+import { createDocument } from '../helpers/createDocument.js'
 import { Content, RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
@@ -35,10 +36,21 @@ declare module '@tiptap/core' {
 }
 
 export const setContent: RawCommands['setContent'] = (content, emitUpdate = false, parseOptions = {}) => ({
-  tr, dispatch, commands,
+  editor, tr, dispatch, commands,
 }) => {
   const { doc } = tr
 
+  // This is to keep backward compatibility with the previous behavior
+  // TODO remove this in the next major version
+  if (parseOptions.preserveWhitespace !== 'full') {
+    const document = createDocument(content, editor.schema, parseOptions)
+
+    if (dispatch) {
+      tr.replaceWith(0, doc.content.size, document).setMeta('preventUpdate', !emitUpdate)
+    }
+    return true
+  }
+
   if (dispatch) {
     tr.setMeta('preventUpdate', !emitUpdate)
   }