facebookarchive / draft-js

A React framework for building text editors.

Home Page:https://draftjs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

BUG - wrong order for inlineStyleRanges when serializing the object

junrezapico opened this issue · comments

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