[Bug]: Tab characters are stripped in useEditor content prop

[Nantris]

Affected Packages

core

Version(s)

2.5.9

Bug Description

Related to #4862 - I noticed I had one test marked as skip with a TODO to re-enable once #4862 was resolved. Unfortunately this test continues to fail as setContent strips \t characters out unexpectedly.

\t is being preserved inside codeblocks, but it should be preserved everywhere

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

\t is preserved

Additional Context (Optional)

These are also lost when setting the initial content of the editor.

Our old editor had \t support everywhere and this makes it impossible for us to move users to the new editor because their content would be irreversibly modified.

Dependency Updates

• Yes, I've updated all my dependencies.

[nperez0111]

Can you share what specifically you are testing, because from my understanding setContent should preserve tabs now:

tiptap/demos/src/Commands/InsertContent/React/index.spec.js

Lines 45 to 50 in 81d3b8a

	it('should keep newlines and tabs', () => {
	cy.get('.tiptap').then(([{ editor }]) => {
	editor.commands.insertContent('<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>')
	})
	})

[Nantris]

Thanks for your reply @nperez0111.

It seems this is a discrepancy in how insertContent works versus setContent.

I just tested, and insertContent works fine to insert tab characters, but setContent does not. The editor fails to preserve \t upon reload as well, I guess because the content property of useEditor is using the same logic as setContent somewhere under the hood?

• Works: editor.commands.insertContent('<p>\t\t\t</p>')
• Silently fails: editor.commands.setContent('<p>\t\t\t</p>')

Tested with @tiptap/[email protected]

[nperez0111]

Ah yea so this was the compromise for preserving backwards compatibility. So for setContent you need to set a flag on preserveWhitespace for the whitespace to be respected. Looking at the source code it will be obvious what you will need to change if you set preserveWhiteSpace to "full" you'll get the same behavior as insertContentAt

https://github.com/ueberdosis/tiptap/blob/develop/packages/core/src/commands/setContent.ts

[Nantris]

Ah that makes sense - thank you. I wonder though about about initially setting the editor content in useEditor? Is it possible to preserveWhiteSpace in that context? I took a very quick look around the code and didn't see anything to that effect.

I could sort of try to patch that myself by just calling setContent instead of using content, but I wonder about rendering delay and maybe other edge cases that might arise from doing so.

[nperez0111]

I think that you should be able to preserveWhitespace by setting parseOptions on the editor options:

tiptap/packages/core/src/Editor.ts

Line 298 in e31673d

this.options.parseOptions,

So it should look like this:

const editor = useEditor({
    parseOptions:{
      preserveWhitespace: 'full',
    },
    content: 'content'

[Nantris]

Thank you so much for the tip @nperez0111 and apologies for overlooking it in the docs. It works great.