Merge branch 'main' into new-branch

packages/lexical-website/docs/react/create_plugin.md

@@ -1,7 +1,3 @@
----
-sidebar_position: 2
----
-
 # Creating a React Plugin
 
 In addition to using the Lexical React plugins offered by the core library, you can make your own plugins to extend or alter Lexical's functionality to suit your own use cases.
@@ -18,7 +14,7 @@ If the Plugin introduces new nodes, they have to be registered in `initialConfig
 
 ```js
 const initialConfig = {
-  namespace: "MyEditor",
+  namespace: 'MyEditor',
   nodes: [MyLexicalNode],
 };
 ```

packages/lexical-website/docs/react/faq.md

@@ -1,6 +1,3 @@
----
----
-
 # React FAQ
 
 ## My app does not work in dev when using StrictMode, help!?
@@ -14,18 +11,18 @@ conventions and guidelines. This is a great place to start:
 Some Lexical-specific concerns (which are consequences of React's
 concurrent and StrictMode semantics, not due to anything unusual in Lexical):
 
-* In React 19, `useMemo` calls are cached across StrictMode re-renders, so
+- In React 19, `useMemo` calls are cached across StrictMode re-renders, so
   only one editor will be used for both renders. If you have a `useEffect`
   call with side-effects (such as updating the document when a plug-in
   initializes), then you should first check to make sure that this effect
   has not already occurred (e.g. by checking the state of the document or
   undoing the change as a cleanup function returned by the effect)
-* `LexicalComposer`'s initialConfig prop is only considered once during
+- `LexicalComposer`'s initialConfig prop is only considered once during
   the first render (`useMemo` is used to create the `LexicalComposerContext`
   which includes the editor and theme)
-* If you are using an `editorState` argument in the config when creating the
+- If you are using an `editorState` argument in the config when creating the
   editor, it will only be called once when the editor is created.
-* You should generally prefer to use hooks that return state such as
+- You should generally prefer to use hooks that return state such as
   `useLexicalEditable` (`useLexicalSubscription` is a generalization of this
   style) rather than manually registering the listeners and expecting a
   particular sequence of triggers to be called, especially
@@ -45,10 +42,10 @@ build of Lexical that the hook was imported from.
 
 The most common root causes of this issue are:
 
-* You are trying to use `useLexicalComposerContext()` in a component that is
+- You are trying to use `useLexicalComposerContext()` in a component that is
   not a child of the `LexicalComposer`. If you need to do that, you need to
   pass the context or editor up the tree with something like `EditorRefPlugin`.
-* You have multiple builds of Lexical in your project. This could be because
+- You have multiple builds of Lexical in your project. This could be because
   you have a dependency that has a direct dependency on some other version
   of Lexical (these packages should have Lexical as `peerDependencies`, but
   not all do), or because your project mixes import and require statements

packages/lexical-website/docs/react/index.md

@@ -1,9 +1,5 @@
 ---
-id: "index"
-title: "Lexical API"
-sidebar_label: "Introduction"
-sidebar_position: 0
-custom_edit_url: null
+sidebar_label: 'Introduction'
 ---
 
 # Lexical + React
@@ -13,7 +9,7 @@ To make it easier for React users to implement rich-text editors, Lexical expose
 <a
     class="whitespace-nowrap rounded-md bg-blue-500 px-6 py-2 text-sm font-bold text-white transition-opacity hover:text-white hover:no-underline hover:opacity-90"
     href="/docs/getting-started/react">
-    {`Getting Started Guide`}
+{`Getting Started Guide`}
 </a>
 
 ## Supported Versions

packages/lexical-website/docs/react/plugins.md

@@ -1,7 +1,3 @@
----
-sidebar_position: 1
----
-
 # Lexical Plugins
 
 React-based plugins are using Lexical editor instance from `<LexicalComposer>` context:
@@ -29,7 +25,7 @@ const initialConfig = {
   <HistoryPlugin />
   <OnChangePlugin onChange={onChange} />
   ...
-</LexicalComposer>
+</LexicalComposer>;
 ```
 
 > Note: Many plugins might require you to register the one or many Lexical nodes in order for the plugin to work. You can do this by passing a reference to the node to the `nodes` array in your initial editor configuration.
@@ -184,7 +180,9 @@ In order to use `TableOfContentsPlugin`, you need to pass a callback function in
 ```jsx
 <TableOfContentsPlugin>
   {(tableOfContentsArray) => {
-    return <MyCustomTableOfContentsPlugin tableOfContents={tableOfContentsArray} />;
+    return (
+      <MyCustomTableOfContentsPlugin tableOfContents={tableOfContentsArray} />
+    );
   }}
 </TableOfContentsPlugin>
 ```
@@ -195,14 +193,14 @@ Allows you to get a ref to the underlying editor instance outside of LexicalComp
 from a separate part of your application.
 
 ```jsx
-  const editorRef = useRef(null);
-  <EditorRefPlugin editorRef={editorRef} />
+const editorRef = useRef(null);
+<EditorRefPlugin editorRef={editorRef} />;
 ```
 
 ### `LexicalSelectionAlwaysOnDisplay`
 
 By default, browser text selection becomes invisible when clicking away from the editor. This plugin ensures the selection remains visible.
 
 ```jsx
-  <SelectionAlwaysOnDisplay />
-```
+<SelectionAlwaysOnDisplay />
+```

packages/lexical-website/sidebars.js

@@ -71,12 +71,13 @@ const sidebars = {
           type: 'category',
         },
     {
-      items: [{dirName: 'react', type: 'autogenerated'}],
+      items: [
+        'react/index',
+        'react/plugins',
+        'react/create_plugin',
+        'react/faq',
+      ],
       label: 'React',
-      link: {
-        id: 'react/index',
-        type: 'doc',
-      },
       type: 'category',
     },
     {