feat

Author: zbeyens

docs/api/nodes/text.md

@@ -26,10 +26,16 @@ If a `props.text` property is passed in, it will be ignored.
 
 If there are properties in `text` that are not in `props`, those will be ignored when it comes to testing for a match.
 
-#### `Text.decorations(node: Text, decorations: DecoratedRange[]) => Text[]`
+#### `Text.decorations(node: Text, decorations: DecoratedRange[]) => Leaf[]`
 
 Get the leaves for a text node, given `decorations`.
 
+Each `Leaf` object includes all properties of the original `Text` node, plus `start` and `end` properties indicating the offset range within the original `node.text` that the leaf represents.
+
+```typescript
+type Leaf = Text & { start: number; end: number }
+```
+
 ### Check methods
 
 #### `Text.equals(text: Text, another: Text, options?) => boolean`

docs/libraries/slate-react/editable.md

@@ -117,7 +117,7 @@ The `renderLeaf` function receives an object of type `RenderLeafProps` as its ar
 ```typescript
 export interface RenderLeafProps {
   children: any
-  leaf: Text
+  leaf: Leaf
   text: Text
   attributes: {
     'data-slate-leaf': true

packages/slate-react/src/components/editable.tsx

@@ -23,6 +23,7 @@ import {
   Text,
   Transforms,
   DecoratedRange,
+  Leaf,
 } from 'slate'
 import { useAndroidInputManager } from '../hooks/android-input-manager/use-android-input-manager'
 import useChildren from '../hooks/use-children'
@@ -105,8 +106,9 @@ export interface RenderElementProps {
 
 export interface RenderLeafProps {
   children: any
-  leaf: Text
+  leaf: Leaf
   text: Text
+  isLast: boolean
   attributes: {
     'data-slate-leaf': true
   }
@@ -1828,6 +1830,7 @@ export const Editable = forwardRef(
                 <Children
                   decorations={decorations}
                   node={editor}
+                  path={[]}
                   renderElement={renderElement}
                   renderPlaceholder={renderPlaceholder}
                   renderLeaf={renderLeaf}

packages/slate-react/src/components/leaf.tsx

@@ -6,7 +6,7 @@ import React, {
   useEffect,
 } from 'react'
 import { JSX } from 'react'
-import { Element, Text } from 'slate'
+import { Element, Leaf as LeafType, Text } from 'slate'
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer'
 import String from './string'
 import {
@@ -48,7 +48,7 @@ function clearTimeoutRef(timeoutRef: MutableRefObject<TimerId>) {
  */
 const Leaf = (props: {
   isLast: boolean
-  leaf: Text
+  leaf: LeafType
   parent: Element
   renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element
   renderLeaf?: (props: RenderLeafProps) => JSX.Element
@@ -157,7 +157,7 @@ const Leaf = (props: {
     'data-slate-leaf': true,
   }
 
-  return renderLeaf({ attributes, children, leaf, text })
+  return renderLeaf({ attributes, children, leaf, text, isLast })
 }
 
 const MemoizedLeaf = React.memo(Leaf, (prev, next) => {

packages/slate-react/src/components/string.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, memo, useRef, useState } from 'react'
-import { Editor, Text, Path, Element, Node } from 'slate'
+import { Editor, Text, Path, Element, Node, Leaf } from 'slate'
 
 import { ReactEditor, useSlateStatic } from '..'
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect'
@@ -12,7 +12,7 @@ import { MARK_PLACEHOLDER_SYMBOL } from 'slate-dom'
 
 const String = (props: {
   isLast: boolean
-  leaf: Text
+  leaf: Leaf
   parent: Element
   text: Text
 }) => {

packages/slate/src/interfaces/text.ts

@@ -1,5 +1,5 @@
 import { isPlainObject } from 'is-plain-object'
-import { Range } from '..'
+import { Path, Range } from '..'
 import { ExtendedType } from '../types/custom-types'
 import { isDeepEqual } from '../utils/deep-equal'
 
@@ -15,6 +15,8 @@ export interface BaseText {
 
 export type Text = ExtendedType<'Text', BaseText>
 
+export type Leaf = Text & { start: number; end: number }
+
 export interface TextEqualsOptions {
   loose?: boolean
 }
@@ -62,7 +64,7 @@ export interface TextInterface {
   /**
    * Get the leaves for a text node given decorations.
    */
-  decorations: (node: Text, decorations: DecoratedRange[]) => Text[]
+  decorations: (node: Text, decorations: DecoratedRange[]) => Leaf[]
 }
 
 // eslint-disable-next-line no-redeclare
@@ -111,8 +113,14 @@ export const Text: TextInterface = {
     return true
   },
 
-  decorations(node: Text, decorations: DecoratedRange[]): Text[] {
-    let leaves: Text[] = [{ ...node }]
+  decorations(node: Text, decorations: DecoratedRange[]): Leaf[] {
+    let leaves: Leaf[] = [
+      {
+        ...node,
+        start: 0,
+        end: node.text.length,
+      },
+    ]
 
     for (const dec of decorations) {
       const { anchor, focus, merge: mergeDecoration, ...rest } = dec
@@ -182,6 +190,16 @@ export const Text: TextInterface = {
       leaves = next
     }
 
+    let currentOffset = 0
+    for (const leaf of leaves) {
+      const start = currentOffset
+      const end = start + leaf.text.length
+
+      leaf.start = start
+      leaf.end = end
+      currentOffset = end
+    }
+
     return leaves
   },
 }