openpencil/packages/docs/programmable/sdk/api/composables/use-text-edit.md
2026-03-24 23:24:08 +03:00

1.1 KiB
Raw Blame History

title description
useTextEdit Manage DOM text editing, composition, formatting, and syncing for canvas text nodes.

useTextEdit

useTextEdit() bridges DOM text input and the editors 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

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.