Inline styling lost after loading/pasting html

[drego]

I'm currently trying to use Quill to create an editor and be able to format an email in HTML.
In order to allow the styling of the email content I'm using only inline styling attributes instead of the quill classes.
However, when I try to load or paste the html content into the editor, some of the inline styles are ignored/removed. I noticed that some of the inline styles (like color, background-color,text-align) are kept but others are just removed (for instance some font families and text-indent).
Here is a verifiable example of this problem.

Steps for Reproduction

1. Visit the example provided
2. Verify that some inline fonts are applied by Quill and others are ignored.
3. Verify that the indent specified with inline styling is ignored by Quill.

Expected behavior:
The fonts and indent specified by inline styling should be recognized and kept by Quill.

Actual behavior:
Some fonts are kept and others are removed when loading Quill. Text indent specified by inline styling is also removed.

Platforms:
Google Chrome Version 58.0.3029.110 (64-bit)

Version:
1.2.6

[revmischa]

This is a high priority issue for us, we need the ability to initialize the editor with some pre-existing HTML with inline styling.

[sendlane-ray]

Is there a workaround for this?

[revmischa]

yeah switch to a different editor lmao

[sendlane-ray]

Downgrade to version 1.0.3. (bug started with version 1.0.4)
or delete the whitelist.

This bug only happens when the font family has quotes.

import Quill from 'quill';

let Font = Quill.import('attributors/style/font');
delete Font.whitelist;

Quill.register(Font);

[jhchen]

This is fixed with the fix from #1873 fa99fa0 for font family. The expected case for text indent is replace with a tab character, which it already does.

[dynothunder]

The expected case for text indent is replace with a tab character, which it already does. can't understand where you told about tab character

[pdkovacs]

I am still having this issue with version 1.3.6 with code based on this example: https://stackoverflow.com/questions/43728080/how-to-add-font-types-on-quill-js-with-toolbar-options (And the issue is -- still -- with font families having white space(s) included in their names.)

The key difference compared with the test code here is how the font "module" is imported:
formats/font vs attributors/style/font .
Is one of them incorrect? Are they both correct, just serving different purpose?

[MwumLi]

how to solve this?

[bogoroh]

@drego, Did you fix this? Still having the issue

[komendantaa]

I've found a workaround.

"quill": "^1.3.7"

 editorCreated(quill: Quill) {
    quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
      const font = node.className.match(/(?<=ql-font-)(\w*-?)*/)?.[0];
      if (font) {
        return new Delta().insert(node.textContent, {
          ...(delta?.ops?.[0].attributes ?? {}),
          font: font,
        })
      }
      return delta
    })
    this.content = this._content;
  }

Worked for me.

[ViktorDimitrievski]

I am still having this issue with version 1.3.6 with code based on this example: https://stackoverflow.com/questions/43728080/how-to-add-font-types-on-quill-js-with-toolbar-options (And the issue is -- still -- with font families having white space(s) included in their names.)

The key difference compared with the test code here is how the font "module" is imported: formats/font vs attributors/style/font . Is one of them incorrect? Are they both correct, just serving different purpose?

Wow.... When you use

customOptions: [
   		{
   			        import: 'formats/font',
   				whitelist: [
   					'arial',
   					'arialBlack',
   					'helvetica',
   					'monospace',
   					'georgia',
   					'book',
   					'comic',
   					'courier',
   					'tahoma',
   					'terminal',
   					'monaco',
   					'times',
   					'trebuchet',
   					'verdana',
   				],
   			},
   

end result would be <p><span class="ql-font-comic">Hello ComincSans</span></p>

But when u change only import to import: 'attributors/style/font',
result would be <p><span style="font-family: comic;">Hello ComincSans</span></p>

After hour of search I have found out this ...which in documentation can not be found. Nice! Thank you @pdkovacs