43 lines
1.0 KiB
Plaintext
43 lines
1.0 KiB
Plaintext
|
---
|
||
|
|
title: Arrange actions
|
||
|
|
description: Replace the preset with explicit actions and place controls in the correct editing surfaces.
|
||
|
|
order: 11
|
||
|
|
toc:
|
||
|
|
- id: explicit-actions
|
||
|
|
title: Explicit actions
|
||
|
|
- id: placement
|
||
|
|
title: Placement
|
||
|
|
- id: action-groups
|
||
|
|
title: Action groups
|
||
|
|
---
|
||
|
|
|
||
|
|
## Explicit actions {#explicit-actions}
|
||
|
|
|
||
|
|
Switch from a preset to children when the product needs exact feature and ordering control:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<LexicalActions>
|
||
|
|
<Undo />
|
||
|
|
<Redo />
|
||
|
|
<Bold />
|
||
|
|
<Italic />
|
||
|
|
<Link />
|
||
|
|
</LexicalActions>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Placement {#placement}
|
||
|
|
|
||
|
|
Actions default to the fixed toolbar. The `in` prop accepts one area or several:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<Bold in={["toolbar", "bubble"]} />
|
||
|
|
<Date in="bubble" />
|
||
|
|
<ClearFormatting in="footer" />
|
||
|
|
```
|
||
|
|
|
||
|
|
Hidden actions provide editor behavior without rendering a control. `DraggableBlocks` uses this pattern.
|
||
|
|
|
||
|
|
## Action groups {#action-groups}
|
||
|
|
|
||
|
|
`ActionGroup` can be a logical group or a visible menu. Use a menu for mutually related choices such as normal text, headings, quotes, and list styles.
|