Quill: When copying and pasting in text with size large, the pasted text does not preserve size

[sferoze]

If you copy a word that is size Large in Quill editor. And the paste the word on a new line. The pasted word does not preserve the size. It is pasted in normal size, when the format should be preserved.

Steps for Reproduction

1. Visit quill example on homepage and use the 3rd example with the ability to change size in toolbar.
2. Make a word Large size
3. Copy that word to clipboard
4. Paste the word on a new line and it will not preserve the large formatting.

Expected behavior:

Should preserve the format upon paste when copying text in quill editor

Actual behavior:

Does not preserve format, pasted text reverts to normal size

Platforms:

Chrome

Version:

Quill 1.1.3

[sferoze]

Its interesting. If you add a color to the large size text, and then copy and paste, then the size stays the same. Its only if its black text.

[bricksimpleseanmccaffery]

@jhchen Any update on this issue?

[kaptron]

By adding a matcher I was able to get it to preserve the ql-size-xx format, like so:

function preserveSizeFormat(node, delta) {
  const match = node.className.match(/ql-size-(.*)/)
  const fontSize = node.style['font-size']
  // HACK: when className is not present, check style attribute
  const styleMatch = fontSize && fontSize !== '16px'
  if (match || styleMatch) {
    delta.map(function(op) {
      if (!op.attributes) op.attributes = {}
      // grab the size from `ql-size-{x}`
      if (match) {
        op.attributes.size = match[1]
      } else if (styleMatch) {
        const large = fontSize === '13px' || fontSize === '0.8125rem'
        op.attributes.size = large ? 'large' : 'huge'
      }
      return op
    })
  }
  return delta
}
quill.clipboard.addMatcher('span', preserveSizeFormat);
quill.clipboard.addMatcher('a', preserveSizeFormat);

In order to preserve formatting in all use cases (e.g. pasting at the beginning of the sentence), I also had to add that HACK above where in some cases the ql-size-xx class did not appear. Note that those fontSize checks are specific to my use case, but just to demonstrate how you might determine the size.

I also added the matcher to a tags so that links with size attributes would also be preserved.