Skip to main content

​
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()

Build docs developers (and LLMs) love

Get started for freeTalk to us