Quill: after copy/past from open office or others. Adding extra whitespace at the start of each block

[delmotte]

after copy/past from open office or others. Adding extra whitespace at the start of each block

I change p to div. But got the same issue

Expected behavior:

just Copy past like the original open office editor. Without extra white space

Version:

1.3.2

[rmarianni]

I think I have some more information on this.

The exact same problem happens whenever we try to use the text-indent CSS property to format a block element. So, in order to reproduce this behavior, we can use this fiddle (created by @axu6705 in a comment on issue #1274) and follow these steps:

1. load the fiddle and click the "+1" indent button on the toolbar;
2. use the browser's inspector to check Quill's contents; you can see that Quill correctly adds the style attribute to the block element (<p>) with the text-indent property; right now, Quill's contents should be:

<p style="text-indent: 1em;"><span style="background-color: rgb(255, 153, 0); color: rgb(230, 0, 0);">Hello World!</span></p>

1. now update the editor with this exact same content, so that the HTML portion of the fiddle looks like this:

<div id="editor">
  <p style="text-indent: 1em;"><span style="color: rgb(230, 0, 0); background-color: rgb(255, 153, 0);">Hello World!</span></p>
</div>

1. run the fiddle and inspect Quill's contents again; you should see this:

<p> <span style="background-color: rgb(255, 153, 0); color: rgb(230, 0, 0);">Hello World!</span></p>

There are two unexpected behaviors in this case:

a) The style attribute with the text-indent property is not there anymore;
b) There is a tab character (\t) at between the <p> and the <span> tags, which is probably the extra whitespace delmotte refers to.

To be sure, I cloned the repository and wrote the following tests:

1. test/unit/core/quill.js, inside the describe('construction', function() { ... }); block:

it('should not add a tab character when the "text-indent" CSS class is used', function() {
  const innerHtml =
    '<p style="text-indent: 1em;">' +
      '<span style="background-color: rgb(255, 153, 0); color: rgb(230, 0, 0);">Hello World!</span>' +
    '</p>';
  let quill = this.initialize(Quill, innerHtml);
  expect(quill.root).toEqualHTML(innerHtml);
});

1. test/unit/modules/clipboard.js, inside the describe('convert', function() {...}); block:

it('should not add a tab character when the "text-indent" CSS class is used', function() {
  const innerHtml =
    '<p style="text-indent: 1cm;">' +
      '<span style="background-color: rgb(255, 153, 0); color: rgb(230, 0, 0);">Hello World!</span>' +
    '</p>';
  let delta = this.clipboard.convert(innerHtml);
  expect(delta).toEqual(new Delta().insert('Hello World!', { color: '#e60000', background: '#ff9900' }));
});

If you add those tests and run the suite, they fail just like the functional test I have just described.

By the way, since there are two unwanted behaviors (the removal of a valid attribute and the inclusion of an unwanted tab character), I'm aware that I should have written four tests instead of only two (treating each unwanted behavior in its own test), but, anyway, those tests might still help, and can surely be improved.

This problem might actually be critical, as it inadvertently modifies the user's text, and it happens not only when the user pastes text from another editor, but whenever Quill loads HTML content - even if this content is valid and has been generated by Quill itself, configured with a seemingly valid custom Attributor.

[jhchen]

Are the space issues you are seeing just extra horizontal space like @rmarianni or also extra vertical space @delmotte? Thanks for the detailed investigation either way @rmarianni

[rmarianni]

Glad to help, and thank you for Quill @jschen.

Now I remember I've seen a situation where an extra vertical space is added as well - and after some time, I was finally able to reproduce it by loading the aforementioned fiddle with this content:

<div id="editor">
<p>
  <span style="color: black; background-color: white; font-size: 12pt; font-family: sans-serif;">A block-level element with an inline element</span> followed by a text node.
</p>
<p style="margin-top: 1cm; margin-bottom: 1cm;">And then another block-level element with a text node.</p>
</div>

By running the fiddle and inspecting Quill's contents, this is what we see:

<p>
  <span style="background-color: white; color: black;">A block-level element with an inline element</span> followed by a text node.
</p>
<p><br></p>
<p>And then another block-level element with a text node.</p>

Unfortunately I didn't have the time to make (or write) further tests, but it looks like this extra vertical space is related to the second paragraph's style attribute; notice that Quill has removed it after loading the content. Besides, no extra vertical space is added if we use one of Quill's own CSS classes instead:

<p>
  <span style="color: black; background-color: white; font-size: 12pt; font-family: sans-serif;">A block-level element with an inline element</span> followed by a text node.
</p>
<p class="ql-indent-1">And then another block-level element with a text node.</p>

The problem happens even if we write (and register) custom Block blots to manage those formats (margin-top and margin-bottom, in this example).

This behavior is probably related to the issue @delmotte reported, and I think we can reproduce it by following these steps:

1. Create a new document in LibreOffice Writer (for instance);
2. Type a word, press Enter, type another word.
3. Format the second line/paragraph with some space above it (in LibreOffice, Format, Paragraph, Spacing, Above paragraph, some non-zero value).
4. Select all, copy.
5. Paste it in Quill and inspect its contents; notice that an extra vertical space is added between the paragraphs, and the second one has no style attribute.

I hope this helps.

[timothyallan]

I'm running into this too using inline styles for text-indent. You can see in this updated fiddle, that Quill ignores any text-indent settings which are already inline, and replaces it with a single tab/space. https://jsfiddle.net/zjrs2qje/15/

My users are able to save correct HTML, and retrieve it from the DB, but as soon as the HTML is sent to Quill to display it again, all the indenting is lost.

[jrundellloyaltyone]

Nested bullet lists and indentations are also not correctly preserved when pasting from Word.

[CBattle]

So in the playground in the AutoSave: https://quilljs.com/playground/#autosave

Replace in the JS from the "// Store accumulated changes" down to the start of "// Check for unsaved data" with the below JS that simulates saving the content as HTML and then restoring the HTML from the database via the clipboard. I increased the delay to 10 seconds to give you time to make the bullet list.

setInterval(function() {
  quill.clipboard.dangerouslyPasteHTML(quill.root.innerHTML)
}, 10*1000);

Now make some of the LOTR text into a bullet list and watch as the bullet list slowly creeps down the page as Quill inserts a <p><br/></p> at the font of the <ul>tag every refresh.

It only happens if the <ul> tag is not the first line.