Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quill can't understand "font-weight: bold" ? #1456

Closed
despreju opened this issue May 16, 2017 · 3 comments
Closed

Quill can't understand "font-weight: bold" ? #1456

despreju opened this issue May 16, 2017 · 3 comments

Comments

@despreju
Copy link

Hello everyone !

I need to load an HTML content into an editor, and Im using Quill.
The problem is that my content have tag like "font-weight: bold", and Quill delete them ->

HTML content loaded into Quill ->
<p>Some text <span style="font-weight: bold;">bold text</span></p>

Quill transform it ->
<p>Some text bold text</p>

I have this problem only with firefox and internet explorer, it's working good on Chrome.
Im using Quill 1.2.4.

Any ideas guys ?

@benbro
Copy link
Contributor

benbro commented May 16, 2017

I can reproduce:

  1. Visit http://codepen.io/anon/pen/NjBxdy
  2. Open the console.

Expected behavior:
In Chrome the first line is bold and the console gives 'bold' for el.style.fontWeight and window.getComputedStyle(el).fontWeight

Actual behavior:
In Firefox the first line isn't bold and window.getComputedStyle(el).fontWeight == '700'

This line gives false in Firefox:
https://github.com/quilljs/quill/blob/develop/modules/clipboard.js#L302

if (style.fontWeight && computeStyle(node).fontWeight === 'bold') {
    formats.bold = true;
}

Platforms:

Chrome 58 on Windows 7 - good.
Firefox 53 on Windows 7 - bad.

Version:
Quill 1.2.4

@despreju
Copy link
Author

despreju commented May 16, 2017

Nice, it's working perfectly on Firefox and Edge when I modify the condition like this:

  if (style.fontWeight && (computeStyle(node).fontWeight === 'bold' || computeStyle(node).fontWeight === '700'))  {
    formats.bold = true;
  }

Should you submit the patch or do you have a better solution to offer ?
Anyway, thank you !

@benbro
Copy link
Contributor

benbro commented May 16, 2017

The spec says:

The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'.

benbro added a commit that referenced this issue May 16, 2017
According to the CSS spec:
The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'.
https://www.w3.org/TR/CSS2/fonts.html#font-boldness

Fixes #1456
jhchen pushed a commit that referenced this issue May 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants