Quill removing spaces when tags are adjacent

[ryan-honor-ed]

This only happens when loading the default value (or using dangerouslypastehtml). If you have two tags that are adjacent, say a "strong" and an anchor "a" and they have a space in between them. so "please click here" then when it gets loaded into a quill editor, the space between these two will get removed. This is definitely problematic and I haven't found a way around this programmatically.

Steps for Reproduction

1. Visit https://codesandbox.io/s/react-uncontrolled-component-default-state-quill-forked-eynydr?file=/src/index.js
2. Click on the "Change Template" button to watch it load the html

Expected behavior: It should honor the spaces between tags

Actual behavior: You will see the spaces between the different tags all get removed.

Platforms: Chrome, React

Version: quill 1.3.7

[easir-kh]

I experience same issue just with spans <span>sepa</span> <span>rate</span> = separate

update: issue found in quill.js (1.3.7) -> function matchText(node, delta)

if (text.trim().length === 0 && node.parentNode.classList.contains('ql-clipboard')) {
  return delta;
}
.... other stuff

// final return
return delta.insert(text);

in this case text is " ". (text.trim().length === 0 will be true) matchText returns the provided delta unmodified never reaching the bottom return where the space is actually inserted. Removing that if sentence removes the problem and tags with a space in between is working as expected.

In 2.0.0-dev4: matchText function is now found in clipboard.ts and the described if sentence is replaced with if (text.trim().length === 0 && text.includes('\n')) Swapping the old check with this new check also seem to work in 1.3.7.

Thoughts: I'm not sure why this check is there in the first place as I can't understand why '\n' (2.0.0-dev4) or " " (1.3.7) should not be inserted if provided as part of the content, but maybe there is a good reason.

@ryan-honor-ed

[h4murabi]

I solved using a workaround, the Zero-width space between the tags. Ex:

<strong>Lorem</strong> &#x200B;<em>ipsum</em>

[matteocarpi]

I am having a similar issue, though inside the tags. So an initial value of <p>some text </p> becomes <p>some text</p>. My problem is that I have no control over the initial value, and it's important for me that it stays the same as I am using the editor as part of a form and I need to detect when the value changes from the original to trigger an auto-save.

@ryan-honor-ed did you find a solution in the end? 🙏

[matteocarpi]

Hey @hamurabiaraujo do you mind sharing an example of how you implemented your workaround? Would help me A LOT!

Thanks!

M

[h4murabi]

@matteocarpi, I had a code like this:

<strong>Free shipping</strong> <em>selected locations</em>

But the ' ' between the </strong> and <em> was removed by quill. If a put a content between them, the problem was solved. So how I can't use visible content, used the Zero-width space to keep the space. The resultant code:

<strong>Free shipping</strong> &#x200B;<em>selected locations</em>

[matteocarpi]

Hey @hamurabiaraujo, thanks for the reply!

Ok! so you fixed it manually inserting that in your content. I was wondering if you found a way that would dynamically replace all spaces with a space and the zero-width-space.

[h4murabi]

Yep, in my case a hardcoded solution solved. But I think that you can use a regex or some strategy to see content in the middle of adjacent tags. Then you can join the space + the zero-width.