feat: add optional method to decoration object (#5776)

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

@@ -22,6 +22,7 @@ import {
   Range,
   Text,
   Transforms,
+  DecoratedRange,
 } from 'slate'
 import { useAndroidInputManager } from '../hooks/android-input-manager/use-android-input-manager'
 import useChildren from '../hooks/use-children'
@@ -116,7 +117,7 @@ export interface RenderLeafProps {
  */
 
 export type EditableProps = {
-  decorate?: (entry: NodeEntry) => Range[]
+  decorate?: (entry: NodeEntry) => DecoratedRange[]
   onDOMBeforeInput?: (event: InputEvent) => void
   placeholder?: string
   readOnly?: boolean
@@ -1876,7 +1877,7 @@ export const DefaultPlaceholder = ({
  * A default memoized decorate function.
  */
 
-export const defaultDecorate: (entry: NodeEntry) => Range[] = () => []
+export const defaultDecorate: (entry: NodeEntry) => DecoratedRange[] = () => []
 
 /**
  * A default implement to scroll dom range into view.

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

@@ -1,7 +1,13 @@
 import getDirection from 'direction'
 import React, { useCallback } from 'react'
 import { JSX } from 'react'
-import { Editor, Element as SlateElement, Node, Range } from 'slate'
+import {
+  Editor,
+  Element as SlateElement,
+  Node,
+  Range,
+  DecoratedRange,
+} from 'slate'
 import { ReactEditor, useReadOnly, useSlateStatic } from '..'
 import useChildren from '../hooks/use-children'
 import { isElementDecorationsEqual } from 'slate-dom'
@@ -25,7 +31,7 @@ import Text from './text'
  */
 
 const Element = (props: {
-  decorations: Range[]
+  decorations: DecoratedRange[]
   element: SlateElement
   renderElement?: (props: RenderElementProps) => JSX.Element
   renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react'
-import { Element, Range, Text as SlateText } from 'slate'
+import { Element, DecoratedRange, Text as SlateText } from 'slate'
 import { ReactEditor, useSlateStatic } from '..'
 import { isTextDecorationsEqual } from 'slate-dom'
 import {
@@ -15,7 +15,7 @@ import Leaf from './leaf'
  */
 
 const Text = (props: {
-  decorations: Range[]
+  decorations: DecoratedRange[]
   isLast: boolean
   parent: Element
   renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element

packages/slate-react/src/hooks/use-children.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
-import { Ancestor, Descendant, Editor, Element, Range } from 'slate'
+import {
+  Ancestor,
+  Descendant,
+  Editor,
+  Element,
+  Range,
+  DecoratedRange,
+} from 'slate'
 import {
   RenderElementProps,
   RenderLeafProps,
@@ -19,7 +26,7 @@ import { useSlateStatic } from './use-slate-static'
  */
 
 const useChildren = (props: {
-  decorations: Range[]
+  decorations: DecoratedRange[]
   node: Ancestor
   renderElement?: (props: RenderElementProps) => JSX.Element
   renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element

packages/slate-react/src/hooks/use-decorate.ts

@@ -1,18 +1,18 @@
 import { createContext, useContext } from 'react'
-import { Range, NodeEntry } from 'slate'
+import { DecoratedRange, NodeEntry } from 'slate'
 
 /**
  * A React context for sharing the `decorate` prop of the editable.
  */
 
-export const DecorateContext = createContext<(entry: NodeEntry) => Range[]>(
-  () => []
-)
+export const DecorateContext = createContext<
+  (entry: NodeEntry) => DecoratedRange[]
+>(() => [])
 
 /**
  * Get the current `decorate` prop of the editable.
  */
 
-export const useDecorate = (): ((entry: NodeEntry) => Range[]) => {
+export const useDecorate = (): ((entry: NodeEntry) => DecoratedRange[]) => {
   return useContext(DecorateContext)
 }