Cannot store and display whitespace

emaciel10 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Are there any updates or workarounds for this issue?

roelzkie15 commented 6 years ago

Still no update regarding this issue?

948198676 commented 6 years ago

Still no update regarding this issue?

murtyjones commented 6 years ago

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 commented 6 years ago

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.

zenoamaro / react-quill

Cannot store and display whitespace #311