[examples] Feature: Added examples (for the website) by m-santanna · Pull Request #8258 · facebook/lexical

m-santanna · 2026-03-26T02:41:53Z

Description

Added 4 examples to the /examples directory:

Notion like editor
Chatapp like textbox
Toolbar Editor
Rich input

These examples will be useful for the website, since we will be importing the editors. Also, we will link the editors to stackblitz from the site.

Test plan

I tested them on my personal branch in stackblitz. Here are the links:

vercel · 2026-03-26T02:41:58Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Mar 28, 2026 6:41pm
lexical-playground	Ready	Preview, Comment	Mar 28, 2026 6:41pm

etrepum · 2026-03-26T19:55:52Z

The chat input example would be a great place to demonstrate using multiple editors on the page (a readonly editor per chat message, and a writable editor for the chat input). This way it would be trivial to add support for rich text. The chat messages should also scroll to the bottom after submit.

(this is just based on using the examples, not a close reading of the code)

etrepum · 2026-03-27T03:32:57Z

+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          selection.insertNodes([$createTextNode(emoji)]);
+        } else {
+          // fallback: append to end
+          const root = $getRoot();
+          const lastChild = root.getLastChild();
+          if (lastChild) {
+            lastChild.selectEnd();
+            const sel = $getSelection();
+            if (sel !== null) {
+              sel.insertNodes([$createTextNode(emoji)]);
+            }
+          }
+        }


Suggested change

const selection = $getSelection();

if ($isRangeSelection(selection)) {

selection.insertNodes([$createTextNode(emoji)]);

} else {

// fallback: append to end

const root = $getRoot();

const lastChild = root.getLastChild();

if (lastChild) {

lastChild.selectEnd();

const sel = $getSelection();

if (sel !== null) {

sel.insertNodes([$createTextNode(emoji)]);

}

}

}

$insertNodes([$createTextNode(emoji)]);

etrepum · 2026-03-27T03:37:03Z

+          .read(() => $getRoot().getTextContent().trim() !== '');
+        if (hasContent) {
+          onSubmit(editor.getEditorState());
+          clearEditor(editor);


With ClearEditorExtension as a dependency:

Suggested change

clearEditor(editor);

editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);

etrepum · 2026-03-27T03:39:00Z

+        namespace: '@lexical/website/chat-message',
+        theme: chatMessageTheme,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps


This exception isn't needed, initialState is a dependency. Both the EditorState and the function references are stable.

etrepum · 2026-03-27T03:47:45Z

+  useEffect(() => {
+    return editor.registerUpdateListener(({editorState}) => {
+      editorState.read(() => {
+        setCount($getRoot().getTextContent().length);


Suggested change

setCount($getRoot().getTextContent().length);

setCount($getRoot().getTextContentSize());

etrepum · 2026-03-27T20:19:49Z

+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, _newEditor) => {
+          $updateToolbar();
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),


This is redundant, the update listener is called when the selection changes

Suggested change

editor.registerCommand(

SELECTION_CHANGE_COMMAND,

(_payload, _newEditor) => {

$updateToolbar();

return false;

},

COMMAND_PRIORITY_LOW,

),

etrepum

The clearEditor function is still there

etrepum · 2026-03-28T15:23:30Z

+export function clearEditor(editor: LexicalEditor) {
+  editor.update(() => {
+    const root = $getRoot();
+    root.clear();
+    const paragraph = $createParagraphNode();
+    paragraph.append($createTextNode(''));
+    root.append(paragraph);
+    if ($isParagraphNode(paragraph)) {
+      paragraph.selectEnd();
+    }
+  });
+}
+


Should be unused now

Suggested change

export function clearEditor(editor: LexicalEditor) {

editor.update(() => {

const root = $getRoot();

root.clear();

const paragraph = $createParagraphNode();

paragraph.append($createTextNode(''));

root.append(paragraph);

if ($isParagraphNode(paragraph)) {

paragraph.selectEnd();

}

});

}

etrepum · 2026-03-28T15:24:34Z

+      .read(() => $getRoot().getTextContent().trim() !== '');
+    if (hasContent) {
+      onSubmit(editor.getEditorState());
+      clearEditor(editor);


Suggested change

clearEditor(editor);

editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);

(this change will also need changes to the imports)

etrepum · 2026-03-28T15:52:14Z

These nits are the last things I noticed here, so once these are cleaned up it looks good to go!

m-santanna added 4 commits March 26, 2026 00:08

added website chat example

7426295

added website notion example

ab84c16

added website toolbar example

763be73

added website rich input example

d10c85a

m-santanna requested review from acywatson, etrepum, fantactuka, ivailop7, potatowagon, takuyakanbr and zurfyx as code owners March 26, 2026 02:41

meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 26, 2026

vercel Bot deployed to Preview – lexical March 26, 2026 02:42 View deployment

vercel Bot deployed to Preview – lexical-playground March 26, 2026 02:44 View deployment

etrepum added the extended-tests Run extended e2e tests on a PR label Mar 26, 2026

vercel Bot deployed to Preview – lexical March 27, 2026 01:44 View deployment

vercel Bot deployed to Preview – lexical-playground March 27, 2026 01:45 View deployment

etrepum reviewed Mar 27, 2026

View reviewed changes

m-santanna force-pushed the examples branch from 0e4e4ea to 4841a17 Compare March 28, 2026 01:52

vercel Bot deployed to Preview – lexical March 28, 2026 01:53 View deployment

vercel Bot deployed to Preview – lexical-playground March 28, 2026 01:54 View deployment

etrepum reviewed Mar 28, 2026

View reviewed changes

latest review changes

455a409

m-santanna force-pushed the examples branch from 4841a17 to 455a409 Compare March 28, 2026 18:39

vercel Bot deployed to Preview – lexical March 28, 2026 18:40 View deployment

vercel Bot deployed to Preview – lexical-playground March 28, 2026 18:41 View deployment

etrepum approved these changes Mar 28, 2026

View reviewed changes

etrepum added this pull request to the merge queue Mar 28, 2026

Merged via the queue into facebook:main with commit cdfd31a Mar 28, 2026
37 checks passed

etrepum mentioned this pull request Apr 9, 2026

v0.43.0 #8319

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[examples] Feature: Added examples (for the website) #8258

[examples] Feature: Added examples (for the website) #8258
etrepum merged 5 commits into
facebook:mainfrom
m-santanna:examples

m-santanna commented Mar 26, 2026

vercel Bot commented Mar 26, 2026 •

edited

Loading

etrepum commented Mar 26, 2026

etrepum Mar 27, 2026

etrepum Mar 27, 2026

etrepum Mar 27, 2026

etrepum Mar 27, 2026

etrepum Mar 27, 2026

etrepum left a comment

etrepum Mar 28, 2026

etrepum Mar 28, 2026

etrepum Mar 28, 2026

etrepum commented Mar 28, 2026

Uh oh!

Labels

2 participants

	clearEditor(editor);
	editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);

	setCount($getRoot().getTextContent().length);
	setCount($getRoot().getTextContentSize());

Uh oh!

Conversation

m-santanna commented Mar 26, 2026

Description

Test plan

Notion

Toolbar

Chatapp

Rich Input

vercel Bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

etrepum commented Mar 26, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etrepum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etrepum commented Mar 28, 2026

Uh oh!

Labels

2 participants

vercel Bot commented Mar 26, 2026 •

edited

Loading