quill
quill copied to clipboard
slab
Superscript/subscript styles not preserved in pasted text
- Visit quilljs.com, navigate to the editor with the expanded toolset
- Highlight some text, and make it subscripted or superscripted
- Copy that text, either with or without surrounding text
- Paste that text somewhere else in the document
Expected behavior: Superscript/subscript style is maintained in the pasted text Actual behavior: Superscript/subscript style is removed from the pasted text Platforms: Win7, Chrome Version 86.0.4240.111 (Official Build) (32-bit)
So I know this is old but I haven't seen anyone else talk about this issue (My Google Fu must be bad) and I am struggling with it using Quill JS 1.3.7.
I have no solution yet but my findings so far is that the problem seems to exist in all the browsers I've tried except Firefox.
So that is:
- Chrome
- Edge
- Opera
- Safari
On MacBook Pro Catalina v10.15.7 and Windows 10 Pro Build 19042.1288
So when trying to figure out the issue I first looked at the paste data via the matcher as well as a custom paste event in each browser.
In Firefox you seem to get the formatted node as is from the paste like <sup>Copied Text</sup>.
But in other browsers you get a span with styles relevant to your copied data.
Based on the matchStyles matcher in Quills clipboard module I think here lies the problem as to why matching super/sub is so difficult. You can see in that utility that you read the nodes styles and then apply a relevant format. But the styles you get for super/sub are exactly the same. Something like:
<span style="font-size: x-small; white-space: pre-wrap;">Copied Text</span>
There's no way to tell if it was super/sub from this. Note here that this span is output from a matcher. On Chrome with a custom paste event which just logs the result of event.clipboardData.getData('text/html') you'd get something like:
<span style="color: rgb(27, 27, 27); font-family: Helvetica, Arial, sans-serif; font-size: x-small; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(254, 254, 254); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Copied Text</span>
A lot more guff but the same issue exists where we can tell super/sub apart from the styles. I assume Quill is stripping out initialisation styles when handling the matched nodes.
Now I don't know of a way to manipulate this paste data yet (if even possible in these browsers) but hopefully someone much smarter than me can figure it out.
Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray:
