✳flâneur — a map of the web's best reading

Editor State | Lexical

lexical.dev · 1,654 words · saved by 1 readers

With Lexical, the source of truth is not the DOM, but rather an underlying state model that Lexical maintains and associates with an editor instance. While HTML is great for storing rich text content it's often "way too flexible" when it comes to text editing. For example the following lines of content will produce equal outcome: Of course, there are ways to normalize all these variants to a single canonical form, however this would require DOM manipulation and so re-rendering of the content. And to overcome this we can use Virtual DOM, or State. On top of that it allows to decouple content structure from content formatting. Let's look at this example stored in HTML: In contrast, Lexical decouples structure from formatting by offsetting this information to attributes. This allows us to have canonical document structure regardless of the order in which different styles were applied. You can get the latest editor state from an editor by calling editor.getEditorState(). Editor states have

Copy page On this page Why is it necessary? ​ With Lexical, the source of truth is not the DOM, but rather an underlying state model that Lexical maintains and associates with an editor instance. While HTML is great for storing rich text content it's often "way too flexible" when it comes to text editing. For example the following lines of content will produce equal outcome: < i > < b > Lexical </ b > </ i > < i > < b > Lex < b > < b > ical </ b > </ i > < b > < i > Lexical </ i > </ b > See rendered version! Lexical Lex ical Lexical Of course, there are ways to normalize all these variants to

Explore this link on the map →

related reading