thibaudcolas
commented
6 years ago Hey @Pomax,
Copy-paste (not) being idempotent is definitely a bug, but unfortunately my answer will be the same as https://github.com/wagtail/wagtail/issues/4432#issuecomment-377624630 (this is the exact same issue) – Fixing these would require overriding Draft.js copy-paste handling within Draftail with a new implementation, which I'd love to do but likely won't have time for in the foreseeable future. (or fixing those bugs directly in Draft.js).
It's definitely not low priority, but at this point in time I'm the only regular contributor to the client-side parts of the "rich text in Wagtail" work. Over the last 5 months I've only been doing this in my free time, so even things that are the most urgent tend to take longer than ideal. For copy-paste in particular, I decided to focus on preventing unwanted formatting from getting in (https://github.com/thibaudcolas/draftjs-filters), and decided to leave out the "preserve wanted formatting as-is" troubleshooting for later.
You can see all of the other issues I'm aware of and decided to not prioritise here: #138
Back to solving this – my thoughts are that I would like to avoid forking Draft.js at all costs (maintenance hell), and would also rather override as little of its paste processing as possible. Here is what I would like to try: https://github.com/facebook/draft-js/issues/787#issuecomment-263132062
Roughly the steps are:
- Learn more about the Draft.js
handlePastedTexthandler- See if it can be easily overriden, detecting a "Draft.js source"
- and whether we can reuse its built-in implementation for the non-Draft.js content sources (eg. Word)
- If it's not doable, try to do the same with a React
onPaste/onCopy - If that doesn't work, use global event handlers like shown below (taken from the above issue)
function addExtraData(e) {
var clipboardData = e.clipboardData;
var someObj = {
"test": { "test": "test" }
}
var selection = window.getSelection()
console.log("called addExtraData")
console.log(selection)
e.clipboardData.setData('text/plain', selection)
e.clipboardData.setData('test', JSON.stringify(someObj))
e.preventDefault()
}
function getExtraData(e) {
var data = e.clipboardData.getData('text/plain')
var data2 = e.clipboardData.getData('test')
console.log("called getExtraData")
console.log(data)
console.log(JSON.parse(data2))
}
document.addEventListener('copy', addExtraData);
document.addEventListener('paste', getExtraData);Alternatively I would love to attempt to contribute a fix for this directly in Draft.js, but I would expect this to take even more time (both in work involved, and timespan), so can't reasonably do this in my free time.
Pomax
mzedeler
Right now it is impossible to copy and paste the content of one draftail editor into another. It seems fairly important (I'm tempted to say crucial?) to make sure that a copy action puts all the data in the clipboard that is necessary to properly paste it back in, but I haven't dug into the code and have no idea how much work that would be. Hopefully not so much as to make it a low priority job =)
STR that clearly demonstrate copy/paste failing:
expected result: the original content actual result: loads of markup has disappeared (links are gone, hr are gone, empty lines are gone both inside and outside of code blocks)
Does draftail use the clipboard API to make sure that a copy action uses the true markup as referenced by the renderer, rather than a derivative markup based on what the browser rendered?