The "Blank space" before and after a string is ignored when pasting

[Softvision-MariusComan]

From: mozilla/notes#262

[Affected versions]:

• Firefox Notes 1.8.0dev
• Firefox 55 and up

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Prerequisites]:

• Have a Firefox profile with the latest "Firefox Notes" add-on version (1.8.0dev) installed.

[Steps to reproduce]:

1. Open the browser with the profiles from prerequisites.
2. Write a string in the sidebar an press the space key (e.g. "Test ").
3. Select and copy all content from the sidebar.
4. Paste the copied string in the "Notes" sidebar and observe the behavior.

[Expected result]:

• The string from step 2 is pasted (space included).

[Actual result]:

• Space character is not pasted.

[Notes]:

• The issue is also reproducible with the TxP. version of "Firefox Notes"
• If the "Blank space" between two characters is copied and pasted without any issues.
• Attached a screen recording of the issue:
  

[Nomia]

Hi, is there any solution for this issue or that issue #1751 @jhchen

[Nomia]

I tried this solution:

.ql-editor {
     white-space: normal !important;
}

it seems fixed this problem, coz this style rule will turn every space key stroke into  [space] in the html. (there is a space in  [space], example below)

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fdfsdfdsf</p>

but, when you put content that contains  [space] in the editor with dangerouslyPasteHtml, the  [space] will become   the ending space is removed. example below:

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fdfsdfdsf</p>

Is there any solution for this, can I turn this remove-every-space feature off?

thx @jhchen @byronm

[vishalsingh119]

i already tried white-space:normal , but its not working

[mopcweb]

are there any updates?

[vkolotov]

For those who is still suffering from this nasty issue in 2021 O_o:

// this module is to workaround a nasty issue with preserving white spaces (they got stripped out):
// https://github.com/quilljs/quill/issues/1752
// https://github.com/quilljs/quill/issues/2459
// https://github.com/quilljs/quill/issues/1751
class PreserveWhiteSpace {
  constructor(private quill: any, private options: {}) {
    quill.container.style.whiteSpace = "pre-line";
  }
}
Quill.register('modules/preserveWhiteSpace', PreserveWhiteSpace);

Do not forget to add preserveWhiteSpace module in your quill, e.g.:

export const quillModulesBasic: Quill.StringMap = {
  imageResize: {
    modules: [ 'Resize', 'DisplaySize' ]
  },
  clickableLink: true,
  preserveWhiteSpace: true,
  toolbar: [
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
...

The root cause is in the quill.core.js module, specifically in the computeStyle function, for some unknown reason it does not return "whiteSpace" set to "pre-line" or "pre-wrap" (even if it is set in css). Which leads to matchText function to strip out white spaces:

[vasyan]

@vkolotov it saved my day, thank you! Anyway, my case about the wrong caret position after restore the last selection and it works perfectly though.

[JamalSBS]

@vkolotov That is TypeScript, correct?

That isn't working for me when attempting this same solution in vanilla JS

class PreserveWhiteSpace {
    constructor(quill, options) {
        this.quill = quill;
        this.options = options;
        quill.container.style.whiteSpace = "pre-line";
    }
}
Quill.register('modules/preserveWhiteSpace', PreserveWhiteSpace);

[aprilandjan]

Just add style to .ql-clipboard to make it have white-space: pre-wrap, the same as .ql-editor, then the matchText function will preserve whitespace as expected:

.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
  // ensure quill clipboard preserve whitespaces
  white-space: pre-wrap;
  word-wrap: break-word;
}

Try it here

[agbrettpittman]

Just add style to .ql-clipboard to make it have white-space: pre-wrap, the same as .ql-editor, then the matchText function will preserve whitespace as expected:

.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
  // ensure quill clipboard preserve whitespaces
  white-space: pre-wrap;
  word-wrap: break-word;
}

Try it here

I'm using react-quill and this seemed to work for me.

[BlackMooseNicky]

Just add style to .ql-clipboard to make it have white-space: pre-wrap, the same as .ql-editor, then the matchText function will preserve whitespace as expected:

.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
  // ensure quill clipboard preserve whitespaces
  white-space: pre-wrap;
  word-wrap: break-word;
}

Try it here

I am using Angular and this worked for me! Thank you so much :D.