You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
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>,
},
Each such item should have a permanent and unique property.
Therefore, a more elegant solution here would be:
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.
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.
The text was updated successfully, but these errors were encountered:
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).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):But this cannot be good for React performance. Ideally:
Therefore, a more elegant solution here would be:
EditorState
is the entity key exists. Say the Entity key in question is123
.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.
The text was updated successfully, but these errors were encountered: