91 lines
2.5 KiB
Markdown
91 lines
2.5 KiB
Markdown
# `@lexical/react`
|
|
|
|
This package provides a set of components and hooks for Lexical that allow for text editing in React applications.
|
|
|
|
## Getting started
|
|
|
|
Install `lexical` and `@lexical/react`:
|
|
|
|
```
|
|
npm install --save lexical @lexical/react
|
|
```
|
|
|
|
Below is an example of a basic plain text editor using `lexical` and `@lexical/react` ([try it yourself](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)).
|
|
|
|
```jsx
|
|
import {$getRoot, $getSelection} from 'lexical';
|
|
import {useEffect} from 'react';
|
|
|
|
import {LexicalComposer} from '@lexical/react/LexicalComposer';
|
|
import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
|
|
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
|
|
import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
|
|
import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
|
|
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
|
|
|
|
const theme = {
|
|
// Theme styling goes here
|
|
...
|
|
}
|
|
|
|
// When the editor changes, you can get notified via the
|
|
// LexicalOnChangePlugin!
|
|
function onChange(editorState) {
|
|
editorState.read(() => {
|
|
// Read the contents of the EditorState here.
|
|
const root = $getRoot();
|
|
const selection = $getSelection();
|
|
|
|
console.log(root, selection);
|
|
});
|
|
}
|
|
|
|
// Lexical React plugins are React components, which makes them
|
|
// highly composable. Furthermore, you can lazy load plugins if
|
|
// desired, so you don't pay the cost for plugins until you
|
|
// actually use them.
|
|
function MyCustomAutoFocusPlugin() {
|
|
const [editor] = useLexicalComposerContext();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
// Focus the editor when the effect fires!
|
|
editor.focus();
|
|
}, [editor]);
|
|
|
|
return null;
|
|
}
|
|
|
|
// Catch any errors that occur during Lexical updates and log them
|
|
// or throw them as needed. If you don't throw them, Lexical will
|
|
// try to recover gracefully without losing user data.
|
|
function onError(error) {
|
|
throw error;
|
|
}
|
|
|
|
function Editor() {
|
|
const initialConfig = {
|
|
namespace: 'MyEditor',
|
|
theme,
|
|
onError,
|
|
};
|
|
|
|
return (
|
|
<LexicalComposer initialConfig={initialConfig}>
|
|
<PlainTextPlugin
|
|
contentEditable={
|
|
<ContentEditable
|
|
aria-placeholder={'Enter some text...'}
|
|
placeholder={<div>Enter some text...</div>}
|
|
/>
|
|
}
|
|
/>
|
|
<OnChangePlugin onChange={onChange} />
|
|
<HistoryPlugin />
|
|
<MyCustomAutoFocusPlugin />
|
|
</LexicalComposer>
|
|
);
|
|
}
|
|
```
|