[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

examples/website-chat/src/plugins/EmojiPlugin.tsx

+        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

examples/website-chat/src/plugins/SubmitOnEnterPlugin.tsx

+          .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

examples/website-chat/src/ChatMessage.tsx

+        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

examples/website-rich-input/src/Editor.tsx

+  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

examples/website-toolbar/src/plugins/LandingHeroToolbarPlugin.tsx

+      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

examples/website-chat/src/plugins/SubmitOnEnterPlugin.tsx

+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

examples/website-chat/src/plugins/SendButtonPlugin.tsx

+      .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

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

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

m-santanna commented Mar 26, 2026

Uh oh!

vercel bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

etrepum commented Mar 26, 2026

Uh oh!

etrepum Mar 27, 2026

Uh oh!

etrepum Mar 27, 2026

Uh oh!

etrepum Mar 27, 2026

Uh oh!

etrepum Mar 27, 2026

Uh oh!

etrepum Mar 27, 2026

Uh oh!

etrepum left a comment

Uh oh!

etrepum Mar 28, 2026

Uh oh!

etrepum Mar 28, 2026

Uh oh!

etrepum Mar 28, 2026

Uh oh!

etrepum commented Mar 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

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

Conversation

m-santanna commented Mar 26, 2026

Description

Test plan

Notion

Toolbar

Chatapp

Rich Input

Uh oh!

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

Uh oh!

Uh oh!

etrepum commented Mar 26, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etrepum commented Mar 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 26, 2026 •

edited

Loading