Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

BUG - wrong order for inlineStyleRanges when serializing the object #3150

Open
junrezapico opened this issue Jun 22, 2022 · 0 comments
Open

Comments

@junrezapico
Copy link

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

getting a serialized object of editor state via convertToRaw(newEditorState.getCurrentContent()) will give wrongly ordered inlineStyleRanges array.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.

I created jsfiddle https://jsfiddle.net/gqrpwk6d/32/ . Applied styles array order is wrong. Sample steps to reproduce this issue

  1. Input 6 characters string like "qwerty"
  2. Highlight the 6 characters and apply "Verdana" style by clicking the VERDANA button
  3. Highlight the 3rd to 4th character "er" and then apply "Helvetica" style by clicking HELVETICA button
  4. Highlight the 6 characters again and apply "Times New Roman" font by clicking Times New Roman button
  5. Check console logs

What is the expected behavior?

The order of the array for inlineStyleRanges should be inlineStyleRanges should logically be based on the order of the events.
So the order should be
[{ length: 6, offset: 0, style: "fontfamily-Verdana" }, { length: 2, offset: 2, style: "fontfamily-Helvetica" }, { length: 6, offset: 0, style: "fontfamily-Times New Roman" }, ]
but instead I get
[{ length: 6, offset: 0, style: "fontfamily-Verdana" }, { length: 6, offset: 0, style: "fontfamily-Times New Roman" }, { length: 2, offset: 2, style: "fontfamily-Helvetica" }].
This becomes a problem for us because we have to save the object to database by serializing the object via convertToRaw function and then restoring it from database using convertFromRaw function. And since the order of the serialized style is wrong, the restored EditorState is also wrong.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

draft-js version is 0.11.7 and is the same for all browsers and OSes. Tried reverting to version 0.10 but the behavior is still the same

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

No branches or pull requests

1 participant