Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redraft keeps duplicating entities when entity is copy-pasted from editor #95

Open
nik-john opened this issue Apr 8, 2022 · 2 comments

Comments

@nik-john
Copy link

nik-john commented Apr 8, 2022

redraftjs-duplication

Because Redraft uses the entity key as is from the raw ContentState, a weird duplication behavior is introduced when an entity is copy-pasted into the same editor (see demo above with bug repro on the official Demo page).

Screenshot 2022-04-08 at 12 56 05 PM

The because the entity key also serves as the React key, it confuses React and upon every blur of the editor the entity gets duplicated.

One hacky workaround is to add unique random strings to all Entity renderers like so (excuse the poor code quality of invoking uuid directly the render):

entities: {
    // key is the entity key value from raw
    LINK: (children, data, { key }) => <Link key={`${key}-${uuid()}`} to={data.url}>{children}</Link>,
  },

But this cannot be good for React performance. Ideally:

Each such item should have a permanent and unique property.

Therefore, a more elegant solution here would be:

  1. Whenever a new Entity is introduced, check within the same Editor's EditorState is the entity key exists. Say the Entity key in question is 123.
  2. If the key exists, concatenate the entity key of the new Entity with a randomly generated string, delimited by another identifiable string like 123__redraft____foo (the rationale for the 'identifiable' part being that if at any point, the original entity key needs to be filtered out for whatever reason, we could always parse through and just remove everything from the __redraft. If this is not a concern, then the suffix can be completely random).

PS: I don't foresee this as an issue between multiple editors on the same page, so checking within the same Editor should suffice.

PPS: DraftJS does handle duplicate entities in it's rendering through sequentially numbered keys. I will try and link to the relevant code once I manage to find time to dive into the DraftJS codebase.

Screenshot 2022-04-08 at 1 51 46 PM

@nik-john
Copy link
Author

@lokiuz Could you take a look at this and acknowledge if this is a valid bug? Thank you!

@nik-john
Copy link
Author

nik-john commented May 6, 2022

@bramus @danez @Flyingmana @alejandronanez Checking in again to see if I can get your thoughts on this. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant