47 lines
1.9 KiB
Markdown
47 lines
1.9 KiB
Markdown
|
---
|
|||
|
|
title: useTextEdit
|
|||
|
|
description: Управление DOM-редактированием текста, композицией, форматированием и синхронизацией для текстовых узлов холста.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# useTextEdit
|
|||
|
|
|
|||
|
|
`useTextEdit()` связывает DOM-ввод текста с моделью редактирования текста на холсте редактора.
|
|||
|
|
|
|||
|
|
Координирует:
|
|||
|
|
|
|||
|
|
- ввод текста через textarea
|
|||
|
|
- IME-композицию
|
|||
|
|
- мигание каретки
|
|||
|
|
- поведение Delete/Backspace
|
|||
|
|
- команды форматирования: жирный, курсив, подчёркивание
|
|||
|
|
- синхронизацию изменений текста обратно в граф
|
|||
|
|
|
|||
|
|
## Использование
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
useTextEdit(canvasRef, editor)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Базовый пример
|
|||
|
|
|
|||
|
|
Используйте в компоненте-владельце холста вместе с `useCanvas()` и `useCanvasInput()`.
|
|||
|
|
|
|||
|
|
## Практические примеры
|
|||
|
|
|
|||
|
|
### Поддержка горячих клавиш форматирования
|
|||
|
|
|
|||
|
|
`useTextEdit()` уже обрабатывает клавиатурные действия форматирования — жирный, курсив, подчёркивание — пока активно редактирование текста.
|
|||
|
|
|
|||
|
|
### Синхронизация холста и редактора текста
|
|||
|
|
|
|||
|
|
Обновляет граф-текст и прогоны стилей по мере набора или редактирования форматированных диапазонов.
|
|||
|
|
|
|||
|
|
## Примечания
|
|||
|
|
|
|||
|
|
Это компосабл для интеграции холста и редактора, а не универсальный компосабл текстового поля.
|
|||
|
|
|
|||
|
|
## Связанные API
|
|||
|
|
|
|||
|
|
- [useCanvas](./use-canvas)
|
|||
|
|
- [useCanvasInput](./use-canvas-input)
|