Skip to content

Commit

Permalink
add example for additional nodes in plugin (#2879)
Browse files Browse the repository at this point in the history
* add example for additional nodes in plugin

* fix typo in plugin documentation
  • Loading branch information
signalwerk authored Aug 24, 2022
1 parent a91fd63 commit 505eb92
Showing 1 changed file with 16 additions and 1 deletion.
17 changes: 16 additions & 1 deletion packages/lexical-website-new/docs/react/create_plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,21 @@ Lexical's React plugin interface is simple - just create a React component and a
</LexicalComposer>
```

If the Plugin introduces new nodes, they have to be registered in `initialConfig.nodes`:

```js
const initialConfig = {
namespace: "MyEditor",
nodes: [MyLexicalNode],
};
```

```jsx
<LexicalComposer initialConfig={initialConfig}>
<MyLexicalPlugin>
</LexicalComposer>
```

LexicalComposer provides access to the underlying LexicalEditor instance via React Context:

```jsx
Expand All @@ -35,7 +50,7 @@ export default function TwitterPlugin(): JSX.Element | null {

useEffect(() => {
if (!editor.hasNodes([TweetNode])) {
throw new Error('TwitterPlugin: TweetNode not registered on editor');
throw new Error('TwitterPlugin: TweetNode not registered on editor (initialConfig.nodes)');
}

return editor.registerCommand<string>(
Expand Down

2 comments on commit 505eb92

@vercel
Copy link

@vercel vercel bot commented on 505eb92 Aug 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lexical-playground – ./packages/lexical-playground

lexical-playground.vercel.app
playground.lexical.dev
lexical-playground-git-main-fbopensource.vercel.app
lexical-playground-fbopensource.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 505eb92 Aug 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lexical – ./packages/lexical-website-new

lexical-fbopensource.vercel.app
lexical.dev
lexical-git-main-fbopensource.vercel.app
lexicaljs.com
lexicaljs.org
www.lexical.dev

Please sign in to comment.