Skip to content

Commit

Permalink
remove-sidebar-position
Browse files Browse the repository at this point in the history
  • Loading branch information
vantage-ola committed Dec 4, 2024
1 parent 6105cec commit 3af7375
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 30 deletions.
6 changes: 1 addition & 5 deletions packages/lexical-website/docs/react/create_plugin.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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],
};
```
Expand Down
15 changes: 6 additions & 9 deletions packages/lexical-website/docs/react/faq.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
---
---

# React FAQ

## My app does not work in dev when using StrictMode, help!?
Expand All @@ -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
Expand All @@ -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
Expand Down
8 changes: 2 additions & 6 deletions packages/lexical-website/docs/react/index.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
---
id: "index"
title: "Lexical API"
sidebar_label: "Introduction"
sidebar_position: 0
custom_edit_url: null
sidebar_label: 'Introduction'
---

# Lexical + React
Expand All @@ -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
Expand Down
18 changes: 8 additions & 10 deletions packages/lexical-website/docs/react/plugins.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
---
sidebar_position: 1
---

# Lexical Plugins

React-based plugins are using Lexical editor instance from `<LexicalComposer>` context:
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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>
```
Expand All @@ -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 />
```

0 comments on commit 3af7375

Please sign in to comment.