<h1 style="text-align: start" id="7b11e4c1-8944-415c-853e-ce17c7d4a5d9" data-toc-id="7b11e4c1-8944-415c-853e-ce17c7d4a5d9">Introduction</h1><p style="text-align: start">Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.</p><p style="text-align: start">Lexical works by attaching itself to a <code>contentEditable</code> element and from there you can work with Lexical's declarative APIs to make things happen without needing to worry about specific edge-cases around the DOM. In fact, you rarely need to interact with the DOM at all in most cases (unless you build your own custom nodes).</p><p style="text-align: start">The core package of Lexical is only 22kb in file size (min+gzip) and you only ever pay the cost for what you need. So Lexical can grow with your surface and the requirements. Furthermore, in frameworks that support lazy-loading, you can defer Lexical plugins until the user actually interacts with the editor itself – which can greatly help improve performance.</p><h2 style="text-align: start" id="01fb697c-e3a7-47c4-a5ff-5ebdd169098e" data-toc-id="01fb697c-e3a7-47c4-a5ff-5ebdd169098e">What can be built with Lexical?<a target="_blank" rel="noopener noreferrer nofollow" class="hash-link" href="https://lexical.dev/docs/intro#what-can-be-built-with-lexical">​</a></h2><p style="text-align: start">Lexical makes it possible to easily create complex text editing experiences that otherwise would be very complex with the built-in browser tooling. We built Lexical to enable developers to move-fast and create different types of text experiences that scale to specific requirements. Here are some (but not all) examples of what you can do with Lexical:</p><ul><li><p>Simple plain-text editors that have more requirements than a <code>&lt;textarea&gt;</code>, such as requiring features like mentions, custom emojis, links and hashtags.</p></li><li><p>More complex rich-text editors that can be used to post content on blogs, social media, messaging applications.</p></li><li><p>A full-blown WYSIWYG editor that can be used in a CMS or rich content editor.</p></li><li><p>Real-time collaborative text editing experiences that combine many of the above points.</p></li></ul><p style="text-align: start">You can think of Lexical as a text editor UI framework. Whilst Lexical is currently only usable on the web, the team is also experimenting with building native versions of Lexical for other platforms. At Meta, Lexical powers web text editing experiences for hundreds of millions of users everyday across Facebook, Workplace, Messenger, WhatsApp and Instagram.</p><h2 style="text-align: start" id="a3c70a53-ab7f-4aa4-9fea-707c058d3f5f" data-toc-id="a3c70a53-ab7f-4aa4-9fea-707c058d3f5f">Lexical's Design<a target="_blank" rel="noopener noreferrer nofollow" class="hash-link" href="https://lexical.dev/docs/intro#lexicals-design">​</a></h2><p style="text-align: start">The core of Lexical is a dependency-free text editor framework that allows developers to build powerful, simple and complex, editor surfaces. Lexical has a few concepts that are worth exploring:</p><h3 style="text-align: start" id="f5dfd289-ff02-479e-92eb-9dac501b5b1b" data-toc-id="f5dfd289-ff02-479e-92eb-9dac501b5b1b">Editor instances<a target="_blank" rel="noopener noreferrer nofollow" class="hash-link" href="https://lexical.dev/docs/intro#editor-instances">​</a></h3><p style="text-align: start">Editor instances are the core thing that wires everything together. You can attach a contenteditable DOM element to editor instances, and also register listeners and commands. Most importantly, the editor allows for updates to its <code>EditorState</code>. You can create an editor instance using the <code>createEditor()</code> API, however you normally don't have to worry when using framework bindings such as <code>@lexical/react</code> as this is handled for you.</p><h3 style="text-align: start" id="1459e810-e677-428f-ad6a-85dbf659ca4c" data-toc-id="1459e810-e677-428f-ad6a-85dbf659ca4c">Editor States<a target="_blank" rel="noopener noreferrer nofollow" class="hash-link" href="https://lexical.dev/docs/intro#editor-states">​</a></h3><p style="text-align: start">An Editor State is the underlying data model that represents what you want to show on the DOM. Editor States contain two parts:</p><ul><li><p>a Lexical node tree</p></li><li><p>a Lexical selection object</p></li></ul><p style="text-align: start">Editor States are immutable once created, and in order to update one, you must do so via <code>editor.update(() =&gt; {...})</code>. However, you can also "hook" into an existing update using node transforms or command handlers – which are invoked as part of an existing update workflow to prevent cascading/water-falling of updates. You can retrieve the current editor state using <code>editor.getEditorState()</code>.</p><p style="text-align: start">Editor States are also fully serializable to JSON and can easily be serialized back into the editor using <code>editor.parseEditorState()</code>.</p><h3 style="text-align: start" id="72b2db37-1b47-4fe8-ab30-e4d7d08343f5" data-toc-id="72b2db37-1b47-4fe8-ab30-e4d7d08343f5">Editor Updates<a target="_blank" rel="noopener noreferrer nofollow" class="hash-link" href="https://lexical.dev/docs/intro#editor-updates">​</a></h3><p style="text-align: start">When you want to change something in an Editor State, you must do it via an update, <code>editor.update(() =&gt; {...})</code>. The closure passed to the update call is important. It's a place where you have full "lexical" context of the active editor state, and it exposes access to the underlying Editor State's node tree. We promote using <code>$</code> prefixed functions in this context, as it signifies a place where they can be used exclusively. Attempting to use them outside of an update will trigger a runtime error with an appropriate error. For those familiar with React Hooks, you can think of these as having a similar functionality (except <code>$</code> functions can be used in any order).</p><h3 style="text-align: start" id="7fbc924f-4d14-49cf-9187-446897a7801b" data-toc-id="7fbc924f-4d14-49cf-9187-446897a7801b">DOM Reconciler<a target="_blank" rel="noopener noreferrer nofollow" class="hash-link" href="https://lexical.dev/docs/intro#dom-reconciler">​</a></h3><p style="text-align: start">Lexical has its own DOM reconciler that takes a set of Editor States (always the "current" and the "pending") and applies a "diff" on them. It then uses this diff to update only the parts of the DOM that need changing. You can think of this as a kind-of virtual DOM, except Lexical is able to skip doing much of the diffing work, as it knows what was mutated in a given update. The DOM reconciler adopts performance optimizations that benefit the typical heuristics of a content editable – and is able to ensure consistency for LTR and RTL languages automatically.</p><h3 style="text-align: start" id="3e38cd2a-5d92-431a-b41e-093cd0bca0c4" data-toc-id="3e38cd2a-5d92-431a-b41e-093cd0bca0c4">Listeners, Node Transforms and Commands<a target="_blank" rel="noopener noreferrer nofollow" class="hash-link" href="https://lexical.dev/docs/intro#listeners-node-transforms-and-commands">​</a></h3><p style="text-align: start">Outside of invoking updates, the bulk of work done with Lexical is via listeners, node transforms and commands. These all stem from the editor and are prefixed with <code>register</code>. Another important feature is that all the register methods return a function to easily unsubscribe them. For example here is how you listen to an update to a Lexical editor:</p><pre><code>const unregisterListener = editor.registerUpdateListener(({editorState}) =&gt; {
  // An update has occurred!
  console.log(editorState);
});

// Ensure we remove the listener later!
unregisterListener();
</code></pre><p style="text-align: start">Commands are the communication system used to wire everything together in Lexical. Custom commands can be created using <code>createCommand()</code> and dispatched to an editor using <code>editor.dispatchCommand(command, payload)</code>. Lexical dispatches commands internally when key presses are triggered and when other important signals occur. Commands can also be handled using <code>editor.registerCommand(handler, priority)</code>, and incoming commands are propagated through all handlers by priority until a handler stops the propagation (in a similar way to event propagation in the browser).</p>

New blog with toc

Listeners, Node Transforms and Commands​

Learn how to grow and scale your online course business using our online course platform. EzyCourse blog is designed to teach you how to create and sell online courses.

New blog with toc

New blog with toc

Related Posts

premium blog

dsfdsfds

Teaser Test

Blog

My test blog 101