Skip to content

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.

Released under the MIT License.