option to clone entities on paste

[afraser]

I just noticed that if I paste a block with entities in it, the newly created block has entities with the same key. I have an inline equation entity type where each equation is represented by content in it's data hash, not the content it's decorating (a single space). So pasting an equation should result in a new, independent equation that is editable on it's own.

That is, if I edit a pasted equation, it updates both the pasted equation and the one it was copied from.

It looks like these might be the relevant places:
https://github.com/facebook/draft-js/blob/master/src/component/handlers/edit/editOnPaste.js#L59
https://github.com/facebook/draft-js/blob/master/src/component/handlers/edit/editOnPaste.js#L164

Maybe this could be handled with new DraftEntityMutability values?

eg.
MUTABLE_UNIQUE
IMMUTABLE_UNIQUE
SEGMENTED_UNIQUE

Thoughts?

[hellendag]

Good question. This is in the gray area between feature and bug. :) In some scenarios, one might want the same entity to apply to the pasted content, but this is a clear case where one would not.

One thing I have been thinking about is whether it makes sense to define a "paste config" object that can be passed as a prop to Editor. This would allow stripPastedStyles to have a proper home rather than being a first-class prop, would allow better flexibility for keeping/discarding certain styles, and would make something like this pretty trivial to configure -- e.g. pasteUniqueEntities: true to force duplication of all entity objects for the pasted output.

Has this only been an issue for you within paste behavior, or have you encountered any other trouble with duplicated entities?

[afraser]

@hellendag This has only been an issue with pasting. I can't really think of any other ways that draft might need to handle duplicating entities for me, but then again, I'm pretty new to using it.

A similar case could me made for pasting media. A user who copies and pastes a media object into a different part of the document may intend to modify that object. e.g. pasting a video player embed and wanting to change the start/end time in one instance and not the other.

I like the idea of a pasteConfig it solves my problem more elegantly and makes a home for other paste configurations. What about the other paste handlers: handlePastedText and handlePastedFiles ...would it make sense to move them in as well?

[afraser]

@hellendag I've forked the repo and am beginning to work on this.

Would this likely be accepted in a PR?

I addition to pasteUniqueEntities, I'm going to be doing some additional work to fix pasting of inline equation entities. Here's my strategy

1. Ensure 'internal paste' is detected for selections within a block that contain an Entity
   • Modify Draft Entity id scheme so we can detect when an Entity is pasted based off of it's DOM id
   • If Draft Entity ids are found in the pasted HTML, use the internal clipboard.
   • Relevant updates will be made here: https://github.com/facebook/draft-js/blob/master/src/component/handlers/edit/editOnPaste.js#L109-L140
2. Use pasteUniqueEntities to ensure pasted Entities are cloned.

Would this additional work likely be accepted in a PR?

I just want to get a feel for how cleanly I should try to implement these features.

[makenosound]

@afraser This is definitely something I’d like to see. If you need someone to test out the implementations you’re looking at then let me know.

[afraser]

@makenosound I have a PR for this here: #525

I've also cooked up a solution that doesn't require any changes to Draft and uses the editor onPaste callback. You can find that here: #390 (comment)

[makenosound]

@afraser That’s great, thanks for doing the leg-work and for sharing your interim solution.

[jasonenglish]

Another situation I've seen specifically with link entities is where you can drag part of the link and move it and now the "new" link and the old share the same entity key. Right now I have UI that allows you to modify the link text and url based on the entity key, which obviously break in these scenarios

[afraser]

@jasonenglish The comment I referenced in the comment above has the following gist which actually addresses that very problem.

https://gist.github.com/afraser/6dedbe486d9a254ab490c2df6ca3abd2

search for cloneEntitiesInFragment

EDIT: I just realized that I may have misread your comment. Sounds like you're actually talking about splitting up an existing link somehow by selecting part of it and dragging it. This is a very strange use-case that could be solved by using cloneEntitiesInFragment but most likely should be solved by removing the entity references altogether since it's no longer the same underlying content.

[hammadmlk]

is there any way to clone entities on paste other than waiting for a new build that allows it?

[thibaudcolas]

I've made a cloneEntities function that does this as part of a library I'm building: https://github.com/thibaudcolas/draftjs-filters

Usage would look something like this:

import { cloneEntities } from "draftjs-filters"

function onChange(nextState) {
  const { editorState } = this.state
  const shouldFilterPaste =
    nextState.getCurrentContent() !== editorState.getCurrentContent()
    editorState.getLastChangeType() === "insert-fragment"
  let filteredState = nextState

  if (shouldFilterPaste) {
    const content = filteredState.getCurrentContent()
    filteredState = EditorState.set(editorState, {
        currentContent: cloneEntities(content),
    })
  }

  this.setState({ editorState: filteredState })
}