[Bug]: Removing spaces between tags

[szymekjanaczek]

Which packages did you experience the bug in?

core, react

What Tiptap version are you using?

2.1.16

What’s the bug you are facing?

Let's assume we write a text and format it like below:

<p>Lorem <em>ipsum <strong>dolor</strong></em> <strong>sit</strong> amet.</p>

When saving this somewhere and then recovering and load into tiptap again, getting text in this format:

<p>Lorem <em>ipsum <strong>dolor</strong></em><strong>sit</strong> amet.</p>

Without space between </em> and <strong>. So the words "dolor" and "sits" connects into one word "dolorsit".

What browser are you using?

Chrome

Code example

codesandbox.io - React version

const editor = useEditor({
  extensions: [StarterKit],
  editorProps: {
    attributes: {
      class: "Editor",
    },
  },
  content: `
    <p>Lorem <em>ipsum <strong>dolor</strong></em> <strong>sit</strong> amet.</p>
  `,
});

return (
  <div className="App">
    <EditorContent editor={editor} />
  </div>
);

What did you expect to happen?

Reading the text as it has been previously written - with spaces between HTML tags.
So when I save

<p>Lorem <em>ipsum <strong>dolor</strong></em> <strong>sit</strong> amet.</p>

And then set it as a content of the TipTap editor, I want to keep original spaces - without gluing words together.

Anything to add? (optional)

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[andrewvasilchuk]

I'm getting the same problem. This is related to the changes made in #4767.

[szymekjanaczek]

I'm getting the same problem. This is related to the changes made in #4767.

At least some clue.
@andrewvasilchuk, have you tried installing an older version - from before this update?

[andrewvasilchuk]

@szymekjanaczek yes the problem is not seen in 2.1.15.

[ashu12chi]

I am facing similar issue: #4822

[andrewvasilchuk]

Another example may be seen on the "Mention" extension page.

<span data-type="mention" data-id="Winona Ryder"></span> <span data-type="mention" data-id="Axl Rose"></span>

The HTML above is collapsed when parsed by the editor, but there is an empty space between these 2 mentions.

[ElHex]

This is also happening in the project I'm working on and its related to this commit (confirmed after a lot of time debugging tiptap)

I guess its not checking the options set like (preserveWhitespace: true)
b7a2504

[svenadlung]

Thanks for reporting. I was able to reproduce. Will be working on a fix.

[brendawon]

Hi, I am currently experiencing this same issue using version 2.4.0. When applying marks next to each other on the same line, the space is removed.

[nperez0111]

@brendawon Are you still seeing this issue with 2.5.5 though? The fix landed in 2.5.0 I believe

[brendawon]

I updated to 2.5.5, but my problem still persists @nperez0111

I wonder if my issue is slightly different. When applying marks next to each other on the same line, there is a space in the Editor UI, but the space is removed from the html. For my purposes, I am saving the html and rendering it elsewhere, and the space is removed there. If I try to edit my saved content, the space does still remain in the Editor UI.

As a workaround, I can apply marks including the space on either end, but it's not ideal from a UX perspective.

[brendawon]

sorry, appeared to be an issue with my HTML parser. fixing that + v2.5.5 is working for me! thanks

[masudhossain]

I'm getting this issue with \n\. So putting this Can we make sure this works. Thanks!\n\n---------- Forwarded message ---------\nFrom: Jon Doe \nDate: Wed, Aug 21, 2024 into the content with below looks fine until you type any key.

    parseOptions: {
      preserveWhitespace: 'full',
    },
    ```