diff --git a/packages/lexical-website/docs/react/create_plugin.md b/packages/lexical-website/docs/react/create_plugin.md index 310d964672c..6ebf19263fe 100644 --- a/packages/lexical-website/docs/react/create_plugin.md +++ b/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], }; ``` diff --git a/packages/lexical-website/docs/react/faq.md b/packages/lexical-website/docs/react/faq.md index c98dce9be91..b63a2295e5a 100644 --- a/packages/lexical-website/docs/react/faq.md +++ b/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 diff --git a/packages/lexical-website/docs/react/index.md b/packages/lexical-website/docs/react/index.md index b0150b10116..1b811e5b517 100644 --- a/packages/lexical-website/docs/react/index.md +++ b/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 - {`Getting Started Guide`} +{`Getting Started Guide`} ## Supported Versions diff --git a/packages/lexical-website/docs/react/plugins.md b/packages/lexical-website/docs/react/plugins.md index c40f8c22251..3f6d24cc9d5 100644 --- a/packages/lexical-website/docs/react/plugins.md +++ b/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 `` context: @@ -29,7 +25,7 @@ const initialConfig = { ... - +; ``` > 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 {(tableOfContentsArray) => { - return ; + return ( + + ); }} ``` @@ -195,8 +193,8 @@ 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); - +const editorRef = useRef(null); +; ``` ### `LexicalSelectionAlwaysOnDisplay` @@ -204,5 +202,5 @@ from a separate part of your application. By default, browser text selection becomes invisible when clicking away from the editor. This plugin ensures the selection remains visible. ```jsx - -``` \ No newline at end of file + +``` diff --git a/packages/lexical-website/sidebars.js b/packages/lexical-website/sidebars.js index d1f61b1374a..523933de4c2 100644 --- a/packages/lexical-website/sidebars.js +++ b/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', }, {