[docs] Update rich text example

README.md

@@ -23,7 +23,7 @@ Here are some examples of what you can do with Lexical:
 
 - [Lexical Playground](https://playground.lexical.dev)
 - [Plain text sandbox](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-plain-text?embed=1&file=src%2FApp.tsx&terminalHeight=0&ctl=1&showSidebar=0&devtoolsheight=0&view=preview)
-- [Rich text sandbox](https://codesandbox.io/s/lexical-rich-text-example-5tncvy)
+- [Rich text sandbox](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-rich?embed=1&file=src%2FApp.tsx&terminalHeight=0&ctl=1&showSidebar=0&devtoolsheight=0&view=preview)
 
 
 ---

examples/react-rich/README.md

@@ -1,4 +1,4 @@
-# React Reach Rich Text example
+# React Rich Text example
 
 Here we have simplest Lexical setup in rich text configuration (`@lexical/rich-text`) with history (`@lexical/history`) and accessibility (`@lexical/dragon`) features enabled.
 

examples/react-rich/public/emoji/LICENSE.md

@@ -0,0 +1,3 @@
+OpenMoji https://openmoji.org
+
+Licensed under Attribution-ShareAlike 4.0 International https://creativecommons.org/licenses/by-sa/4.0/

examples/react-rich/src/App.tsx

@@ -5,14 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import {CodeHighlightNode, CodeNode} from '@lexical/code';
+import {AutoLinkNode, LinkNode} from '@lexical/link';
+import {ListItemNode, ListNode} from '@lexical/list';
+import {TRANSFORMERS} from '@lexical/markdown';
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
+import {LinkPlugin} from '@lexical/react/LexicalLinkPlugin';
+import {ListPlugin} from '@lexical/react/LexicalListPlugin';
+import {MarkdownShortcutPlugin} from '@lexical/react/LexicalMarkdownShortcutPlugin';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import {HeadingNode, QuoteNode} from '@lexical/rich-text';
+import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
+import {useState} from 'react';
 
 import ExampleTheme from './ExampleTheme';
+import AutoLinkPlugin from './plugins/AutoLinkPlugin';
+import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
+import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
+import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import TreeViewPlugin from './plugins/TreeViewPlugin';
 
@@ -22,7 +36,19 @@ function Placeholder() {
 
 const editorConfig = {
   namespace: 'React.js Demo',
-  nodes: [],
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+  ],
   // Handling of errors during update
   onError(error: Error) {
     throw error;
@@ -32,19 +58,45 @@ const editorConfig = {
 };
 
 export default function App() {
+  const [floatingAnchorElem, setFloatingAnchorElem] =
+    useState<HTMLDivElement | null>(null);
+  const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
+
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem);
+    }
+  };
   return (
     <LexicalComposer initialConfig={editorConfig}>
       <div className="editor-container">
-        <ToolbarPlugin />
+        <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
         <div className="editor-inner">
           <RichTextPlugin
-            contentEditable={<ContentEditable className="editor-input" />}
+            contentEditable={
+              <div className="editor" ref={onRef}>
+                <ContentEditable className="editor-input" />
+              </div>
+            }
             placeholder={<Placeholder />}
             ErrorBoundary={LexicalErrorBoundary}
           />
+          <AutoLinkPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <CodeHighlightPlugin />
           <HistoryPlugin />
           <AutoFocusPlugin />
           <TreeViewPlugin />
+          <ListMaxIndentLevelPlugin maxDepth={7} />
+          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          {floatingAnchorElem && (
+            <FloatingLinkEditorPlugin
+              anchorElem={floatingAnchorElem}
+              isLinkEditMode={isLinkEditMode}
+              setIsLinkEditMode={setIsLinkEditMode}
+            />
+          )}
         </div>
       </div>
     </LexicalComposer>

examples/react-rich/src/plugins/AutoLinkPlugin.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {AutoLinkPlugin} from '@lexical/react/LexicalAutoLinkPlugin';
+
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const EMAIL_MATCHER =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  (text: string) => {
+    const match = URL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: match[0],
+      }
+    );
+  },
+  (text: string) => {
+    const match = EMAIL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: `mailto:${match[0]}`,
+      }
+    );
+  },
+];
+
+export default function PlaygroundAutoLinkPlugin() {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}

examples/react-rich/src/plugins/CodeHighlightPlugin.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {registerCodeHighlighting} from '@lexical/code';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useEffect} from 'react';
+
+export default function CodeHighlightPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+}