From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
UNPUBLISHED
  • Overview
  • Why This Fork
  • Examples
Walkthroughs
  • Installing Plite
  • Adding Event Handlers
  • Defining Custom Elements
  • Applying Custom Formatting
  • Executing Commands
  • Saving to a Database
  • Canonical Change Substrate
  • Improving Performance
Concepts
  • Interfaces
  • Nodes
  • Locations
  • Transforms
  • Document Changes
  • Commands
  • Editor
  • Extensions
  • Rendering
  • Serializing
  • Normalizing
  • Using TypeScript
  • Roots
  • Document State
  • Editing Behavior
  • Selection And DOM
  • Clipboard And Paste
  • Projection And Overlays
  • Schema
API
  • 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
Libraries
  • Plite DOM
  • History Editor API
  • History Extension Setup
  • History
  • Plite History
  • Plite Hyperscript
  • Plite Layout
  • Annotations
  • DOM Coverage Boundaries
  • Editable Component
  • Plite React Event Handling
  • Virtualized Rendering
  • Plite React Hooks
  • React Editor Setup
  • React Editor
  • Plite React
  • Plite Component
  • Plite Yjs
  • Plite
General
  • Migration
  • Contributing
  • Docs Proof Map
  • FAQ
  • Resources

Range API

PreviousNext

Range helpers for selections and document spans.

Range objects are a set of points that refer to a specific span of a Plite document. They can define a span inside a single node or they can span across multiple nodes. The editor's selection is stored as a range.

Shape

interface Range {
  anchor: Point;
  focus: Point;
}
interface Range {
Point APILocation Types APIs

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
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.