47 lines
1.1 KiB
Markdown
47 lines
1.1 KiB
Markdown
---
|
||
title: useTextEdit
|
||
description: Manage DOM text editing, composition, formatting, and syncing for canvas text nodes.
|
||
---
|
||
|
||
# useTextEdit
|
||
|
||
`useTextEdit()` bridges DOM text input and the editor’s canvas text editing model.
|
||
|
||
It coordinates:
|
||
|
||
- textarea-backed text input
|
||
- IME composition
|
||
- caret blinking
|
||
- delete/backspace behavior
|
||
- formatting commands like bold/italic/underline
|
||
- syncing text changes back into the graph
|
||
|
||
## Usage
|
||
|
||
```ts
|
||
useTextEdit(canvasRef, editor)
|
||
```
|
||
|
||
## Basic example
|
||
|
||
Use this in the canvas owner component together with `useCanvas()` and `useCanvasInput()`.
|
||
|
||
## Practical examples
|
||
|
||
### Support formatting shortcuts
|
||
|
||
`useTextEdit()` already handles keyboard formatting actions like bold, italic, and underline while text editing is active.
|
||
|
||
### Keep canvas and text editor in sync
|
||
|
||
It updates graph text and style runs as the user types or edits formatted ranges.
|
||
|
||
## Notes
|
||
|
||
This is a canvas/editor integration composable, not a generic text-field composable.
|
||
|
||
## Related APIs
|
||
|
||
- [useCanvas](./use-canvas)
|
||
- [useCanvasInput](./use-canvas-input)
|