zenoamaro/react-quill

Cannot store and display whitespace

Open

#311 opened on Jan 2, 2018

View on GitHub
 (6 comments) (5 reactions) (0 assignees)JavaScript (6,238 stars) (860 forks)batch import
enhancementhelp wanted

Description

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!

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
The bug is in src/mixin.js at line 68 where dangerouslyPasteHTML is called, causing whitespace collapse. The maintainer jhchen suggested adding white space: pre wrap style or using a different method to preserve whitespace. A possible fix is to replace dangerouslyPasteHTML with an innerHTML assignment that includes whitespace preservation, or to add CSS to the container. See comments: https://github.com/quilljs/quill/issues/1751#issuecomment 338581862.