React-quill: Cannot store and display whitespace

[emaciel10]

I noticed a strange bug when attempting to save and re-render html from quill. I am using React Quill v1.2.3

Right now it is impossible to store and display a string with more than one tab or space in a row.
Here is a link to a comment from LDFM who also experienced this same problem:
https://github.com/quilljs/quill/issues/1751#issuecomment-336071574
LFDM pointed out that the line that is causing this issue is:
https://github.com/zenoamaro/react-quill/blob/master/src/mixin.js#L68

Since dangerouslyPasteHTML is called, the whitespace get's collapsed down to a single space but jhchen's comment towards the end of that same issue linked above seems to point to a solution.
https://github.com/quilljs/quill/issues/1751#issuecomment-338581862

Thanks for your help!

[alexkrolick]

We'd take a PR to add a preserveWhitespace (or similar) option - it sounds like creating a pre tag around or instead of the container div would cause the paste to not collapse spaces.

[twmilli]

Are there any updates or workarounds for this issue?

[roelzkie15]

Still no update regarding this issue?

[948198676]

Still no update regarding this issue?

[murtyjones]

Anyone have a workaround here?

Tried to add <pre> around all tab instances using react-quill's onChange handler, but it continually is replace by <p>.

[murtyjones]

In my case, I managed to make it work by doing this:

        <ReactQuill
          ...
          defaultValue={ this.state.value }
          onChange={ v => {
            // replace tabs with spaces
            this.handleChange(
              v.replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
            )
          } }
        />

Note the use of defaultValue instead of value.