Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Overview
    • Why This Fork
    • Examples
    • Installing Plite
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Canonical Change Substrate
    • Improving Performance
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Document Changes
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • Using TypeScript
    • Roots
    • Document State
    • Editing Behavior
    • Selection And DOM
    • Clipboard And Paste
    • Decorations, annotations, and widgets
    • Schema
    • Anchor API
    • Location API
    • Path API
    • PointEntry API
    • Point API
    • Range API
    • Selection API
    • Location Types APIs
    • Span API
    • Editor
    • Element API
    • NodeEntry API
    • Node API
    • Node Types APIs
    • Text API
    • Debug Value Scrubbing
    • Transforms API
    • Plite DOM
    • History Editor API
    • History Plugin Setup
    • History
    • Plite History
    • Plite Hyperscript
    • Plite PaginationExperimental
    • Annotations
    • DOM Coverage Boundaries
    • Editable Component
    • External Text Views
    • Plite React Event Handling
    • Virtualized Rendering
    • Plite React Hooks
    • React Editor Setup
    • React Editor
    • Plite React
    • Plite Component
    • Plite Yjs
    • Plite
    • Migration
    • Contributing
    • FAQ
    • Resources

Range API

PreviousNext

Range helpers for selections and document spans.

Range objects contain anchor and focus points within one node or across multiple nodes. Text selections use a range; the editor also supports node selections.

Shape

interface Range {
  readonly anchor: Point;
  readonly focus: Point;
}
Point APISelection API

On This Page

ShapeStatic methodsRetrieval methodsRangeApi.edges(range: Range, options?) => readonly [Point, Point]RangeApi.end(range: Range) => PointRangeApi.intersection(range: Range, another: Range) => Range | nullRangeApi.points(range: Range) => Generator<PointEntry>RangeApi.start(range: Range) => PointCheck methodsRangeApi.equals(range: Range | null, another: Range | null) => booleanRangeApi.includes(range: Range, target: Path | Point | Range) => booleanRangeApi.surrounds(range: Range, target: Range) => booleanRangeApi.isBackward(range: Range) => booleanRangeApi.isCollapsed(range: Range) => booleanRangeApi.isExpanded(range: Range) => booleanRangeApi.isForward(range: Range) => booleanRangeApi.isRange(value: unknown) => value is Range
Build your editor
Production-ready AI template and reusable components.
Get all-access
interface Range {
readonly anchor: Point;
readonly focus: Point;
}

Both points must resolve inside the same root. The primary document is implicit; extra roots are stored on each point with root.

  • Static methods
    • Retrieval methods
    • Check methods

Static methods

Retrieval methods

RangeApi.edges(range: Range, options?) => readonly [Point, Point]

Get the start and end points of a range, in the order in which they appear in the document.

Options: {reverse?: boolean}

RangeApi.end(range: Range) => Point

Get the end point of a range according to the order in which it appears in the document.

RangeApi.intersection(range: Range, another: Range) => Range | null

Get the intersection of one range with another. If the two ranges do not overlap, return null.

RangeApi.points(range: Range) => Generator<PointEntry>

Iterate through the two point entries in a Range. First it will yield a PointEntry representing the anchor, then it will yield a PointEntry representing the focus.

RangeApi.start(range: Range) => Point

Get the start point of a range according to the order in which it appears in the document.

Check methods

Check some attribute of a Range. Always returns a boolean.

RangeApi.equals(range: Range | null, another: Range | null) => boolean

Check if a range is exactly equal to another.

RangeApi.includes(range: Range, target: Path | Point | Range) => boolean

Check whether a path or point falls within the range, including its edges. For a range target, return true when at least one target endpoint falls within the range. Use RangeApi.intersection to detect any overlap, including a target that surrounds the range.

RangeApi.surrounds(range: Range, target: Range) => boolean

Check if a range includes another range.

RangeApi.isBackward(range: Range) => boolean

Check if a range is backward, meaning that its anchor point appears after its focus point in the document.

RangeApi.isCollapsed(range: Range) => boolean

Check if a range is collapsed, meaning that both its anchor and focus points refer to the exact same position in the document.

RangeApi.isExpanded(range: Range) => boolean

Check if a range is expanded. This is the opposite of RangeApi.isCollapsed and is provided for legibility.

RangeApi.isForward(range: Range) => boolean

Check if a range is forward. This is the opposite of RangeApi.isBackward and is provided for legibility.

RangeApi.isRange(value: unknown) => value is Range

Check if a value implements the Range interface.