45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
|
---
|
||
|
|
title: Define an action
|
||
|
|
description: Add product-specific behavior while preserving automatic dependency collection.
|
||
|
|
order: 20
|
||
|
|
toc:
|
||
|
|
- id: declare-the-action
|
||
|
|
title: Declare the action
|
||
|
|
- id: custom-control
|
||
|
|
title: Custom control
|
||
|
|
- id: typed-values
|
||
|
|
title: Typed values
|
||
|
|
---
|
||
|
|
|
||
|
|
## Declare the action {#declare-the-action}
|
||
|
|
|
||
|
|
Keep the command and its editor dependencies in one definition:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
const Mention = defineLexicalAction({
|
||
|
|
name: "mention",
|
||
|
|
label: "Insert mention",
|
||
|
|
nodes: [MentionNode],
|
||
|
|
plugins: [MentionPopoverPlugin],
|
||
|
|
execute: ({ editor }) => openMentionPicker(editor),
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
The node and plugin are enabled whenever `<Mention />` appears inside `LexicalActions`.
|
||
|
|
|
||
|
|
## Custom control {#custom-control}
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<Mention>
|
||
|
|
{({ disabled, execute }) => (
|
||
|
|
<MentionButton disabled={disabled} onSelect={execute} />
|
||
|
|
)}
|
||
|
|
</Mention>
|
||
|
|
```
|
||
|
|
|
||
|
|
Replacing the visible control does not change dependency collection.
|
||
|
|
|
||
|
|
## Typed values {#typed-values}
|
||
|
|
|
||
|
|
The render context exposes `execute(value?)` with the action's value type. `onClick` is the no-argument shortcut for ordinary buttons.
|