EditContextDisplay

Pure rendering component for multi-line text display with scrolling and cursor highlighting. Unlike TextArea, this component has no input handling -- the command system handles all input. This is the rendering half of the edit context pattern.

Import

import { EditContextDisplay } from "silvery"

Props

Prop	Type	Default	Description
value	string	required	Current text value
cursor	number	required	Cursor position as character offset
height	number	--	Visible height in rows (renders all lines if omitted)
wrapWidth	number	--	Width for word wrapping (no wrapping if omitted)
cursorStyle	"block" | "underline"	"block"	Cursor style
placeholder	string	""	Placeholder text when value is empty
showCursor	boolean	true	Whether to show the cursor
onCursorClick	(offset: number) => void	--	Called when clicked, provides character offset

Usage

const { value, cursor } = useEditContext({ ... })
const { width } = useContentRect()

<EditContextDisplay
  value={value}
  cursor={cursor}
  height={10}
  wrapWidth={width}
/>

Behavior

• Word wrapping uses the provided wrapWidth
• Scroll offset is tracked internally via ref (no useState needed)
• Cursor is kept visible by auto-scrolling the viewport
• Click-to-position maps mouse coordinates to character offsets

See Also

• TextArea -- multi-line input with built-in editing
• CursorLine -- single-line cursor rendering