Copy/paste between editors #787

bryanph · 2016-11-16T10:11:05Z

How can I make sure custom blocks and entities are preserved if I copy from one Draft editor to another? Hence, I want the custom block/entity to be recreated in the new editor.

Take for example the entity example in the repo, when copying from one draft instance to another, the entities are not copied along, just the raw text. The same happens with custom blocks, for example in the media example

bryanph · 2016-11-16T19:22:54Z

I think one way to implement this is to set the required data for the blocks and entities in the ClipboardData object when the user triggers a copy event. Then on a paste event you check if the required data is set in the ClipboardData and if so, use that data to paste the entities and custom blocks into the second editor (by cloning the entities and inserting the blocks).

What do you think?

StorytellerCZ · 2016-11-27T06:03:10Z

Yes, but won't that interfere with copying into non-draft editors?

bryanph · 2016-11-27T16:37:33Z

@StorytellerCZ It seems like you can just set arbitrary data in the DataTransfer object keyed by a "type", see https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData . No idea if this is an accepted practice though.

In the example below I do that. One thing to be cautious of though is that every time a user copies editor data, you must serialize the content state which is quite costly. No

<html>
    <script>
    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);

    </script>
    <body>
        <p>
            Text to Copy
        </p>
        <textarea rows="4" cols="50"></textarea>
    </body>
</html>

mitermayer · 2016-12-16T06:56:37Z

We are currently working on a solution for this issue

christophepas · 2017-01-13T11:59:26Z

Hey @mitermayer ! Glad to know this is wip, have you any update on a solution for this ?

Apart from mentions this is also a problem for nested lists, and in general an onCopy method added to the Editor API could help solve these issues.

trevtrich · 2017-08-30T22:20:59Z

@mitermayer has there been any movement on this? We could really use this functionality. Right now we're considering forking and working on a solution. Would you guys be open to a PR if we come up with something we're happy with?

Assuming dev on this has stopped and we start implementing a solution, would appreciate any guidance on major problems you ran into that we might hit as well.

flarnie · 2017-09-29T21:32:31Z

Just an update - I don't expect any support for this in the near future. It would be an interesting long term goal but we have shifted to have internal folks work on some other fixes and features for Draft.

mzedeler · 2018-03-05T12:07:43Z

I am going to need this and expect to be working on a solution within a month or two.

thibaudcolas · 2018-04-18T22:21:17Z

I have been able to make this work a bit better by leveraging the internal Draft.js editor clipboard, at least if the copy-paste happens between editors that are on the same page (quite a common circumstance in a CMS that uses Draft.js).

The basic idea is:

When editors mount (componentDidMount), register a ref to their DraftEditor component in a global object (eg. window.myEditorRefs). Associate the ref with the editor's getEditorKey (internal method related to the editorKey prop) – make sure these are unique between all editors if you set it manually.
When editors unmount, un-register the ref.
In handlePastedText, check whether the paste contains an editor key (data-editor) like Draft.js does internally: https://github.com/facebook/draft-js/blob/4c4465f6c05b6dbb9eb769f98e659f917bbdc0f6/src/component/handlers/edit/editOnPaste.js#L122-L130
If it does, find the corresponding editor in your registry of editor refs.
Get the clipboard data from its internal clipboard, and insert it as a fragment.

I only put this together in half an hour so might be overlooking something (and the code is horrible): springload/draftail#148

Of course this would be much easier if there was a way to directly set the editor's clipboard on the copy data (https://github.com/facebook/draft-js/blob/4c4465f6c05b6dbb9eb769f98e659f917bbdc0f6/src/component/handlers/edit/editOnCopy.js#L25-L36), and then retrieve it in the paste (like @bryanph shows above, except with Draft.js data). That said I'm not that familiar with clipboard data handling in browsers so don't know exactly if that would actually work.

I'll try this further over the next few days and report back with more findings.

mzedeler · 2018-04-19T09:14:17Z

I've done some investigation and can see that I am forced to write my own replacement of the copy/paste-behavior, because I have extra data that isn't stored in any of the internal Draft data structures.

My plan is to ensure that Draft never tries to use the internal clipboard and then populate the normal clipboard with HTML fragments that have been enriched with the data that I keep outside the normal Draft data structures.

I think it could be a worthy long term goal to try to replace Drafts internal clipboard with a behavior where the data on the normal clipboard is sufficient for Draft when pasting. By doing this, we can remove a source of unpredictable behavior in Draft.

thibaudcolas · 2018-06-10T22:06:13Z

I've worked on this further since #787 (comment) and managed to fix the issue in my editor. Also submitted a similar fix for Draft.js itself over at #1784.

If you don't want to wait for that PR to be merged, the details on how to fix this in your own project are at the end of #1784.

dav-sap · 2020-11-11T10:30:25Z

Is thing something that might be fixed soon? Its a common use case

mzedeler · 2020-11-11T19:33:13Z

I think it is a relevant comment, @dav-sap, but the development of Draft.js is progressing extremely slowly. As you can see, the proposed fix by Thibaud has been open for more than two years.

yornaath · 2021-09-19T08:40:40Z

Currently building a rich text editor with alot of entity usage and copy pasting between documents is a huge use case. Any progress on getting this to prod?

bryanph · 2021-09-19T10:10:01Z

@gorillatron Honestly, I moved away from draft-js a long time ago and I feel there's no reason to start using this in a new project, there are much better alternatives out there. This project has been in maintenance mode for a long time now. Look into slate or prosemirror for better approaches to the rich text editing problem.

mitermayer self-assigned this Dec 16, 2016

mitermayer added big picture enhancement labels Dec 16, 2016

stevemolitor mentioned this issue Dec 16, 2017

Spike Replacing CodeMirror with Draft-js zapier/formatic#93

Open

thibaudcolas mentioned this issue Mar 30, 2018

copy paste from rich text editor X to rich text editor Y loses links/hr wagtail/wagtail#4432

Closed

thibaudcolas mentioned this issue Apr 17, 2018

feature request: idempotent copy/paste behaviour springload/draftail#147

Closed

trevtrich mentioned this issue Apr 18, 2018

feature: idempotent copy-paste? #1731

Closed

thibaudcolas mentioned this issue Apr 18, 2018

WIP: On paste, read content from internal clipboard via paste registry springload/draftail#148

Closed

thibaudcolas mentioned this issue May 20, 2018

Override Draft.js copy-paste to preserve full editor content thibaudcolas/draftjs-conductor#2

Merged

thibaudcolas mentioned this issue Jun 10, 2018

Transfer selected content via HTML clipboard on copy-paste between editors #1784

Closed

4 tasks

pablopunk mentioned this issue Aug 29, 2018

Use editor3 internal clipboard to copy entities from open editors superdesk/superdesk-client-core#2509

Merged

asamuzaK mentioned this issue Apr 9, 2020

Support React based editors asamuzaK/withExEditor#123

Closed

nickoferrall mentioned this issue Dec 23, 2020

Discussion thread links ParabolInc/parabol#4483

Merged

3 tasks

kdblocher mentioned this issue Oct 20, 2021

Copying system definition from the Bridge App to GoogleDoc flattens bidding levels kdblocher/bridge#76

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Copy/paste between editors #787

Copy/paste between editors #787

bryanph commented Nov 16, 2016 •

edited

Loading

bryanph commented Nov 16, 2016 •

edited

Loading

StorytellerCZ commented Nov 27, 2016

bryanph commented Nov 27, 2016

mitermayer commented Dec 16, 2016

christophepas commented Jan 13, 2017

trevtrich commented Aug 30, 2017

flarnie commented Sep 29, 2017 •

edited

Loading

mzedeler commented Mar 5, 2018

thibaudcolas commented Apr 18, 2018 •

edited

Loading

mzedeler commented Apr 19, 2018

thibaudcolas commented Jun 10, 2018

dav-sap commented Nov 11, 2020

mzedeler commented Nov 11, 2020

yornaath commented Sep 19, 2021

bryanph commented Sep 19, 2021

Copy/paste between editors #787

Copy/paste between editors #787

Comments

bryanph commented Nov 16, 2016 • edited Loading

bryanph commented Nov 16, 2016 • edited Loading

StorytellerCZ commented Nov 27, 2016

bryanph commented Nov 27, 2016

mitermayer commented Dec 16, 2016

christophepas commented Jan 13, 2017

trevtrich commented Aug 30, 2017

flarnie commented Sep 29, 2017 • edited Loading

mzedeler commented Mar 5, 2018

thibaudcolas commented Apr 18, 2018 • edited Loading

mzedeler commented Apr 19, 2018

thibaudcolas commented Jun 10, 2018

dav-sap commented Nov 11, 2020

mzedeler commented Nov 11, 2020

yornaath commented Sep 19, 2021

bryanph commented Sep 19, 2021

bryanph commented Nov 16, 2016 •

edited

Loading

bryanph commented Nov 16, 2016 •

edited

Loading

flarnie commented Sep 29, 2017 •

edited

Loading

thibaudcolas commented Apr 18, 2018 •

edited

Loading