Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Plate
  • Editor API
  • Editor Transforms
  • Node
  • Element
  • Text
  • Path
  • Point
  • Range
  • Location
  • Anchor
  • Selection
  • Document Change
  • DOM API
  • React Hooks
  • Plate Core
    • Plate Components
    • Plate Editor
    • Plate Plugin
    • Editor Context
    • Plate Controller
  • Plate Utils
  • Resizable

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 {
  anchor: Point;
  focus: Point;
}
interface
PointLocation

On This Page

ShapeStatic methodsRetrieval methodsRangeApi.edges(range: Range, options?) => [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, another: Range) => 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
Range
{
anchor: Point;
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?) => [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, another: Range) => boolean

Check if a range is exactly equal to another.

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

Check if a range includes a path, a point, or part of another range.

For clarity, includes can mean partial inclusion. Another way to describe this is that one range intersects the other 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.