Slate
ExamplesGitHubSlack
main
main
  • Introduction
  • Walkthroughs
    • Installing Slate
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Enabling Collaborative Editing
    • Using the Bundled Source
  • Concepts
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Operations
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • TypeScript
    • Migrating
  • API
    • Transforms
    • Node Types
      • Editor
      • Element
      • Node
      • NodeEntry
      • Text
    • Location Types
      • Location
      • Path
      • PathRef
      • Point
      • PointEntry
      • PointRef
      • Range
      • RangeRef
      • Span
    • Operation Types
      • Operation
    • Scrubber
  • Libraries
    • Slate React
      • withReact
      • ReactEditor
      • Hooks
      • Slate Component
      • Editable Component
      • Event Handling
    • Slate History
      • withHistory
      • HistoryEditor
      • History
    • Slate Hyperscript
  • General
    • Resources
    • Contributing
    • Changelog
    • FAQ
Powered by GitBook
On this page
  • Instance methods
  • Static methods
  • Transform methods
  1. API
  2. Location Types

RangeRef

PreviousRangeNextSpan

Last updated 1 month ago

RangeRef objects keep a specific range in a document synced over time as new operations are applied to the editor. It is created using the Editor.rangeRef method. You can access their property current at any time for the up-to-date Range value. When you no longer need to track this location, call unref() to free the resources. The affinity refers to the direction the RangeRef will go when a user inserts content at the edges of the Range. inward means that the Range tends to stay the same size when content is inserted at its edges, and outward means that the Range tends to grow when content is inserted at its edges.

interface RangeRef {
  current: Range | null
  affinity: 'forward' | 'backward' | 'outward' | 'inward' | null
  unref(): Range | null
}

For example:

const selectionRef = Editor.rangeRef(editor, editor.selection, {
  affinity: 'inward',
})
// Allow the user to do stuff which might change the selection
Transforms.unwrapNodes(editor)
Transforms.select(editor, selectionRef.unref())

Instance methods

unref() => Range | null

Call this when you no longer need to sync this range. It also returns the current value.

Static methods

Transform methods

RangeRef.transform(ref: RangeRef, op: Operation)

Transform the range refs current value by an op. The editor calls this as needed, so normally you won't need to.

Instance methods
Static methods
Transform methods