Preserve bold text when pasted

[ivan-i]

Fixes #306

[jhchen]

Can you change this to > 400? Technically a font-weight of 500 is also considered bolded.

[ivan-i]

After some reading I am not sure that > 400 is correct. From https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Fallback:

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Therefore I think > 500 is actually correct.

CSS specs agree:
http://www.w3.org/TR/css3-fonts/#propdef-font-weight
http://www.w3.org/TR/css3-fonts/#fontstylematchingalg
http://www.w3.org/TR/CSS2/fonts.html#propdef-font-weight

[jhchen]

You are correct thank you for looking into it and the PR.

[aadamsx]

I'm running into this issue now. I have text in word, and some of it is bolded, when I copy and paste it the bolded text reverts to normal. I'm running on 0.20.0.

So this fix failed and is not apart of 0.20.0, now what?

I can type in to the editor 'This is BOLD text', and save and the bold shows. Then I copy and paste the resulting html in a <li>html here</li> into a Word document and I get the right result, 'This is BOLD text', but if I take the same copied html and paste it again in a new Quill editor window the bold is gone.

This is what the saved 'This is BOLD text' looks like:

<div class="ql-editor ql-content" contenteditable="true">This text is <b>BOLD</b></div><div class="ql-paste-manager" contenteditable="true"><br></div>

[aadamsx]

Here's a little more background on what I'm seeing:

I'm using Quill Editor to provide rich text editing into my application. I'm also using clipboar.js to copy this text to the clipboard.

In mongo when I save off a simple edit session, it looks something like this:

<div class="ql-editor ql-content" contenteditable="true">This</div><div class="ql-editor ql-content" contenteditable="true"><br></div><div class="ql-editor ql-content" contenteditable="true">text</div><div class="ql-editor ql-content" contenteditable="true"><br></div><div class="ql-editor ql-content" contenteditable="true">is</div><div class="ql-editor ql-content" contenteditable="true"><br></div><div class="ql-editor ql-content" contenteditable="true"><b>BOLD</b></div><div class="ql-paste-manager" contenteditable="true"><br></div>

Using Meteor Blaze and Handlebars my code to target this html looks like this:

                      <div class="contents regular">
                        <div id="message-{{messageId}}">
                          {{{message}}}
                        </div>
                      </div>
                      <span id="copy-{{messageId}}" alt="Copy to clipboard" data-clipboard-target="#message-{{messageId}}" data-id="{{messageId}}" class="" style="float: right; margin-right: 15px; cursor: pointer;">
                        <i class="fa fa-clipboard"></i>
                      </span>

I also have code to allow me to see what is copied to the clipboard:

  var clipboard = new Clipboard('span[id^="copy-"]');
  clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
  });

When I copy the text to the clipboard, all I see in this example is this in the console:

Action: copy
messages-detail.js?005609202faf1271a61336d16a44247de0aa130c:30 Text: 
This

text

is

BOLD

So when I copy this text from the clipboard to Word, the word BOLD is bolded, but if I copy this from the clipboard back into Quill editor, all the formatting and any color stays, but I loose the bold in the BOLD text.

Also, any tips on why the formatting stays when copying to Word but not when I try copying to the Quill Editor.

Edit:

I'm using ClipMate to see what's actually copied to the clipboard. I have contents in Binary format to see the formatting. Just focusing on the BOLD text element, I see this in the binary:

<b style="box-sizing: border-box; -webkit-font-smoothing: antialiased; font-weight: 700; background-color: inherit;">BOLD</b>

But when it's copied into Quill, the <b> element turns into a <span>

[aadamsx]

After further research. The bold seems to be working in FF but not in Chrome.

I have another example...

This is the underlying HTML that clipboar.js is suppose to be copying to the clipboard:

<b style="color: rgb(204, 0, 0); font-family: Arial, sans-serif; font-size: 12pt;">*****Bold Text****&nbsp;</b>

Of course if you look at the text property in Clipboard, the text just looks like so: ** *_Bold Text_* **, but the underlying embedded HTML comes along with it on the clipboard.

When I copy from Chrome rich-text (with embedded HTML) to the Quill Editor with clipboar.js, looking at the binary of the clipboard, the bolded text has this for embedded HTML:

<b style="box-sizing: border-box; -webkit-font-smoothing: antialiased; font-weight: 700; color: rgb(204, 0,0); font-family: Arial, sans-serif; font-size: 12pt; background-color: inherit;"><br class="Apple-interchange-newline">*** Bold Text ***Â</b>

In FF the binary for the text looks like this:

<b style="color: rgb(204, 0,0); font-family: Arial, sans-serif; font-size: 12pt;">*** Bold Text ***</b>

In Chrome the *** Bold Text *** is not bolded, in FF it is.

This is the mongo field saved from Quill when in Chrome:

<div class="ql-editor ql-content" contenteditable="true"><br></div><div class="ql-editor ql-content" contenteditable="true"><span style="color: rgb(204, 0, 0); font-family: Arial, sans-serif; font-size: 12pt;">*****Bold Text*****&nbsp;</span></div><div class="ql-paste-manager" contenteditable="true"><br></div>

Here, the <b has been replace with a <span>

This is the mongo field saved from Quill when in FF:

<div class="ql-editor ql-content" contenteditable="true"><b style="color: rgb(204, 0, 0); font-family: Arial,sans-serif; font-size: 12pt;">*****Bold Text*****&nbsp;</b></div><div class="ql-editor ql-content" contenteditable="true"><br></div><div class="ql-paste-manager" contenteditable="true"><br></div>

[jhchen]

First this PR addresses an issue where Quill loses bolding pasted within itself. Word is out of scope of this PR. That being said it still seems to work. If I copy bolded text or a sentence with bolded words from Word 2016, the formatting stays when pasted into Chrome on the quilljs.com editor. I'm not clear on what interaction there is between clipboard.js and Quill but if you can reduce and reproduce the issue outside of Meteor and clipboard.js, you should make a separate Github issue with reproduction steps.