EditorView

A viewport and rendering layer for text editing with selection, scrolling, and visual cursor management.

Overview

The EditorView class provides a complete text editing UI component with viewport management, text selection, visual cursor control, and text wrapping. It works with an EditBuffer to provide the visual rendering layer for text editing.

Constructor

lib · RenderLib · required

The render library instance.

ptr · Pointer · required

Pointer to the native view.

editBuffer · EditBuffer · required

The EditBuffer instance to render.

Static Methods

create

Creates a new EditorView instance.

static create(
  editBuffer: EditBuffer,
  viewportWidth: number,
  viewportHeight: number
): EditorView

editBuffer · EditBuffer · required

The EditBuffer to render.

viewportWidth · number · required

The width of the viewport in characters.

viewportHeight · number · required

The height of the viewport in lines.

return · EditorView

A new EditorView instance.

Properties

ptr

get ptr(): Pointer

ptr · Pointer

The native pointer to the view.

extmarks

get extmarks(): any

extmarks · any

The extmarks controller for managing editor marks.

Viewport Management

setViewportSize

Sets the viewport dimensions.

setViewportSize(width: number, height: number): void

width · number · required

The viewport width in characters.

height · number · required

The viewport height in lines.

setViewport

Sets the complete viewport configuration.

setViewport(
  x: number,
  y: number,
  width: number,
  height: number,
  moveCursor?: boolean
): void

x · number · required

The horizontal offset.

y · number · required

The vertical offset (line number).

width · number · required

The viewport width in characters.

height · number · required

The viewport height in lines.

moveCursor · boolean · default: "true"

Whether to move the cursor into view.

getViewport

Gets the current viewport configuration.

getViewport(): Viewport

return · Viewport

Object containing offsetX, offsetY, width, and height.

setScrollMargin

Sets the scroll margin for cursor visibility.

setScrollMargin(margin: number): void

margin · number · required

The scroll margin in lines.

Text Wrapping

setWrapMode

Sets the text wrapping mode.

setWrapMode(mode: "none" | "char" | "word"): void

mode · 'none' | 'char' | 'word' · required

The wrapping mode: “none” (no wrap), “char” (wrap at character), or “word” (wrap at word boundary).

Line Information

getVirtualLineCount

Gets the number of virtual lines visible in the viewport.

getVirtualLineCount(): number

return · number

The number of visible virtual lines.

getTotalVirtualLineCount

Gets the total number of virtual lines (including wrapping).

getTotalVirtualLineCount(): number

return · number

The total number of virtual lines.

getLineInfo

Gets line information for the current viewport.

getLineInfo(): LineInfo

return · LineInfo

Line information including offsets and positions.

getLogicalLineInfo

Gets logical line information (without wrapping).

getLogicalLineInfo(): LineInfo

return · LineInfo

Logical line information.

Selection

setSelection

Sets the text selection by character offsets.

setSelection(
  start: number,
  end: number,
  bgColor?: RGBA,
  fgColor?: RGBA
): void

start · number · required

The start character offset.

end · number · required

The end character offset.

bgColor · RGBA

Background color for the selection.

fgColor · RGBA

Foreground color for the selection.

updateSelection

Updates the end position of the current selection.

updateSelection(end: number, bgColor?: RGBA, fgColor?: RGBA): void

end · number · required

The new end character offset.

bgColor · RGBA

Background color for the selection.

fgColor · RGBA

Foreground color for the selection.

resetSelection

Clears the current selection.

resetSelection(): void

getSelection

Gets the current selection range.

getSelection(): { start: number; end: number } | null

return · { start: number; end: number } | null

The selection range or null if no selection.

hasSelection

Checks if there is an active selection.

hasSelection(): boolean

return · boolean

True if there is an active selection.

setLocalSelection

Sets selection using viewport-relative coordinates.

setLocalSelection(
  anchorX: number,
  anchorY: number,
  focusX: number,
  focusY: number,
  bgColor?: RGBA,
  fgColor?: RGBA,
  updateCursor?: boolean,
  followCursor?: boolean
): boolean

anchorX · number · required

The anchor X position in viewport.

anchorY · number · required

The anchor Y position in viewport.

focusX · number · required

The focus X position in viewport.

focusY · number · required

The focus Y position in viewport.

bgColor · RGBA

Background color for the selection.

fgColor · RGBA

Foreground color for the selection.

updateCursor · boolean · default: "false"

Whether to update the cursor position.

followCursor · boolean · default: "false"

Whether to follow the cursor.

return · boolean

True if the selection was set successfully.

updateLocalSelection

Updates selection using viewport-relative coordinates.

updateLocalSelection(
  anchorX: number,
  anchorY: number,
  focusX: number,
  focusY: number,
  bgColor?: RGBA,
  fgColor?: RGBA,
  updateCursor?: boolean,
  followCursor?: boolean
): boolean

anchorX · number · required

The anchor X position in viewport.

anchorY · number · required

The anchor Y position in viewport.

focusX · number · required

The focus X position in viewport.

focusY · number · required

The focus Y position in viewport.

bgColor · RGBA

Background color for the selection.

fgColor · RGBA

Foreground color for the selection.

updateCursor · boolean · default: "false"

Whether to update the cursor position.

followCursor · boolean · default: "false"

Whether to follow the cursor.

return · boolean

True if the selection was updated successfully.

resetLocalSelection

Clears the local selection.

resetLocalSelection(): void

getSelectedText

Gets the currently selected text.

getSelectedText(): string

return · string

The selected text or empty string if no selection.

deleteSelectedText

Deletes the currently selected text.

deleteSelectedText(): void

Cursor Operations

getCursor

Gets the current cursor position.

getCursor(): { row: number; col: number }

return · { row: number; col: number }

The cursor position.

getVisualCursor

Gets the visual cursor position (accounting for wrapping).

getVisualCursor(): VisualCursor

return · VisualCursor

The visual cursor position with row, col, and offset.

setCursorByOffset

Sets the cursor by character offset.

setCursorByOffset(offset: number): void

offset · number · required

The character offset (0-based).

moveUpVisual

Moves the cursor up one visual line.

moveUpVisual(): void

moveDownVisual

Moves the cursor down one visual line.

moveDownVisual(): void

getNextWordBoundary

Finds the next word boundary from the cursor.

getNextWordBoundary(): VisualCursor

return · VisualCursor

The position of the next word boundary.

getPrevWordBoundary

Finds the previous word boundary from the cursor.

getPrevWordBoundary(): VisualCursor

return · VisualCursor

The position of the previous word boundary.

getEOL

Gets the end-of-line position for the current line.

getEOL(): VisualCursor

return · VisualCursor

The end-of-line position.

getVisualSOL

Gets the visual start-of-line position.

getVisualSOL(): VisualCursor

return · VisualCursor

The visual start-of-line position.

getVisualEOL

Gets the visual end-of-line position.

getVisualEOL(): VisualCursor

return · VisualCursor

The visual end-of-line position.

Text Retrieval

getText

Gets the text content visible in the view.

getText(): string

return · string

The visible text content.

Placeholder Text

setPlaceholderStyledText

Sets placeholder text with styling.

setPlaceholderStyledText(
  chunks: { text: string; fg?: RGBA; bg?: RGBA; attributes?: number }[]
): void

chunks · Array<{ text: string; fg?: RGBA; bg?: RGBA; attributes?: number }> · required

Array of styled text chunks for the placeholder.

Tab Indicators

setTabIndicator

Sets the character to display for tab characters.

setTabIndicator(indicator: string | number): void

indicator · string | number · required

The character or Unicode code point to display for tabs.

setTabIndicatorColor

Sets the color for tab indicator characters.

setTabIndicatorColor(color: RGBA): void

color · RGBA · required

The color for tab indicators.

Measurement

measureForDimensions

Measures the text for given dimensions.

measureForDimensions(
  width: number,
  height: number
): { lineCount: number; maxWidth: number } | null

width · number · required

The width to measure for.

height · number · required

The height to measure for.

return · { lineCount: number; maxWidth: number } | null

Measurement result with line count and max width, or null on error.

Memory Management

destroy

Destroys the view and frees native resources.

destroy(): void

Types

Viewport

interface Viewport {
  offsetY: number
  offsetX: number
  height: number
  width: number
}

offsetY · number · required

The vertical offset (line number).

offsetX · number · required

The horizontal offset (column).

height · number · required

The viewport height in lines.

width · number · required

The viewport width in characters.

VisualCursor

interface VisualCursor {
  row: number
  col: number
  offset: number
}

row · number · required

The visual row position.

col · number · required

The visual column position.

offset · number · required

The character offset from start of buffer.

Example

import { EditBuffer, EditorView, RGBA } from "@opentui/core"

// Create an edit buffer and view
const buffer = EditBuffer.create("wcwidth")
const view = EditorView.create(buffer, 80, 24)

// Set text
buffer.setText("Hello, World!\nWelcome to OpenTUI.")

// Configure viewport
view.setViewport(0, 0, 80, 24)
view.setWrapMode("word")

// Set text selection
const selectionBg = new RGBA(100, 100, 200, 255)
view.setSelection(0, 5, selectionBg)

// Get selected text
const selectedText = view.getSelectedText()
console.log(selectedText) // "Hello"

// Move cursor visually
view.moveDownVisual()

// Get cursor position
const cursor = view.getVisualCursor()
console.log(`Cursor at ${cursor.row}:${cursor.col}`)

// Clean up
view.destroy()
buffer.destroy()