diff --git a/.changeset/slate-react.md b/.changeset/slate-react.md new file mode 100644 index 000000000..543bd2ec9 --- /dev/null +++ b/.changeset/slate-react.md @@ -0,0 +1,6 @@ +--- +'slate-react': minor +--- + +- Update `RenderLeafProps` interface to add `leafPosition` property containing `start`, `end`, `isFirst`, and `isLast` when a text node is split by decorations. +- Add optional `renderText` prop to `` component for customizing text node rendering. diff --git a/.changeset/slate.md b/.changeset/slate.md new file mode 100644 index 000000000..afd4fdf34 --- /dev/null +++ b/.changeset/slate.md @@ -0,0 +1,5 @@ +--- +'slate': minor +--- + +- Update `Text.decorations` to return the positions in addition to the leaf nodes: `{ leaf: Text, position?: { start: number, end: number, isFirst: boolean, isLast: boolean } }[]`. diff --git a/docs/api/nodes/text.md b/docs/api/nodes/text.md index 1c732c3fa..653bcb796 100644 --- a/docs/api/nodes/text.md +++ b/docs/api/nodes/text.md @@ -26,9 +26,9 @@ 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: Text; position?: LeafPosition }[]` -Get the leaves for a text node, given `decorations`. +Get the leaves and positions for a text node, given `decorations`. ### Check methods diff --git a/docs/concepts/09-rendering.md b/docs/concepts/09-rendering.md index 61f3b5e64..15c790fbc 100644 --- a/docs/concepts/09-rendering.md +++ b/docs/concepts/09-rendering.md @@ -80,6 +80,8 @@ Notice though how we've handled it slightly differently than `renderElement`. Si > đŸ¤– As with the Element renderer, be sure to mix in `props.attributes` and render `props.children` in your leaf renderer! The attributes must be added to the top-level DOM element inside the component, as they are required for Slate's DOM helper functions to work. And the children are the actual text content of your document which Slate manages for you automatically. +When decorations split a single text node, the `renderLeaf` function will receive an additional `leafPosition` property. This object contains the `start` and `end` offsets of the leaf within the original text node, along with optional `isFirst` and `isLast` booleans. This `leafPosition` property is only added when a text node is actually split by decorations. + One disadvantage of text-level formatting is that you cannot guarantee that any given format is "contiguous"—meaning that it stays as a single leaf. This limitation with respect to leaves is similar to the DOM, where this is invalid: ```markup @@ -99,6 +101,37 @@ Of course, this leaf stuff sounds pretty complex. But, you do not have to think - Text properties are for **non-contiguous**, character-level formatting. - Element properties are for **contiguous**, semantic elements in the document. +## Texts + +While `renderLeaf` allows you to customize the rendering of individual leaves based on their formatting (marks and decorations), sometimes you need to customize the rendering for an entire text node, regardless of how decorations might split it into multiple leaves. + +This is where the `renderText` prop comes in. It allows you to render a component that wraps all the leaves generated for a single `Text` node. + +```jsx +const renderText = useCallback(({ attributes, children, text }) => { + return ( + + {children} + {/* Render anything you want here */} + + ) +}, []) + +// In your editor component: + +``` + +**When to use `renderLeaf` vs `renderText`:** + +- **`renderLeaf`**: Use this when you need to apply styles or rendering logic based on the specific properties of each individual leaf (e.g., applying bold style if `leaf.bold` is true, or highlighting based on a decoration). This function might be called multiple times for a single text node if decorations split it. You can use the optional `leafPosition` prop (available when a text node is split) to conditionally render something based on the position of the leaf within the text node. + +- **`renderText`**: Use this when you need to render something exactly once for a given text node, regardless of how many leaves it's split into. It's ideal for wrapping the entire text node's content or adding elements associated with the text node as a whole without worrying about duplication caused by decorations. + +You can use both `renderText` and `renderLeaf` together. `renderLeaf` renders the individual marks and decorations within a text node (leaves), and `renderText` renders the container of those leaves. + ## Decorations Decorations are another type of text-level formatting. They are similar to regular old custom properties, except each one applies to a `Range` of the document instead of being associated with a given text node. diff --git a/docs/libraries/slate-react/editable.md b/docs/libraries/slate-react/editable.md index 514c964fd..f6d200a8c 100644 --- a/docs/libraries/slate-react/editable.md +++ b/docs/libraries/slate-react/editable.md @@ -122,6 +122,15 @@ export interface RenderLeafProps { attributes: { 'data-slate-leaf': true } + /** + * The position of the leaf within the Text node, only present when the text node is split by decorations. + */ + leafPosition?: { + start: number + end: number + isFirst?: true + isLast?: true + } } ``` @@ -142,6 +151,38 @@ Example usage: /> ``` +#### `renderText?: (props: RenderTextProps) => JSX.Element` + +The `renderText` prop allows you to customize the rendering of the container element for a Text node in the Slate editor. This is useful when you need to wrap the entire text node content or add elements associated with the text node as a whole, regardless of how decorations might split the text into multiple leaves. + +The `renderText` function receives an object of type `RenderTextProps` as its argument: + +```typescript +export interface RenderTextProps { + text: Text + children: any + attributes: { + 'data-slate-node': 'text' + ref: any + } +} +``` + +Example usage: + +```jsx + { + return ( + + {children} + {text.tooltipContent && } + + ) + }} +/> +``` + #### `renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element` The `renderPlaceholder` prop allows you to customize how the placeholder of the Slate.js `Editable` component is rendered when the editor is empty. The placeholder will only be shown when the editor's content is empty. diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 6a821f597..c11a9a932 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -23,6 +23,7 @@ import { Text, Transforms, DecoratedRange, + LeafPosition, } from 'slate' import { useAndroidInputManager } from '../hooks/android-input-manager/use-android-input-manager' import useChildren from '../hooks/use-children' @@ -105,11 +106,31 @@ export interface RenderElementProps { export interface RenderLeafProps { children: any + /** + * The leaf node with any applied decorations. + * If no decorations are applied, it will be identical to the `text` property. + */ leaf: Text text: Text attributes: { 'data-slate-leaf': true } + /** + * The position of the leaf within the Text node, only present when the text node is split by decorations. + */ + leafPosition?: LeafPosition +} + +/** + * `RenderTextProps` are passed to the `renderText` handler. + */ +export interface RenderTextProps { + text: Text + children: any + attributes: { + 'data-slate-node': 'text' + ref: any + } } /** @@ -125,6 +146,7 @@ export type EditableProps = { style?: React.CSSProperties renderElement?: (props: RenderElementProps) => JSX.Element renderLeaf?: (props: RenderLeafProps) => JSX.Element + renderText?: (props: RenderTextProps) => JSX.Element renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void as?: React.ElementType @@ -149,6 +171,7 @@ export const Editable = forwardRef( readOnly = false, renderElement, renderLeaf, + renderText, renderPlaceholder = defaultRenderPlaceholder, scrollSelectionIntoView = defaultScrollSelectionIntoView, style: userStyle = {}, @@ -1831,6 +1854,7 @@ export const Editable = forwardRef( renderElement={renderElement} renderPlaceholder={renderPlaceholder} renderLeaf={renderLeaf} + renderText={renderText} selection={editor.selection} /> diff --git a/packages/slate-react/src/components/element.tsx b/packages/slate-react/src/components/element.tsx index 04b81100b..37a4b83cc 100644 --- a/packages/slate-react/src/components/element.tsx +++ b/packages/slate-react/src/components/element.tsx @@ -22,6 +22,7 @@ import { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, + RenderTextProps, } from './editable' import Text from './text' @@ -35,6 +36,7 @@ const Element = (props: { element: SlateElement renderElement?: (props: RenderElementProps) => JSX.Element renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element + renderText?: (props: RenderTextProps) => JSX.Element renderLeaf?: (props: RenderLeafProps) => JSX.Element selection: Range | null }) => { @@ -44,6 +46,7 @@ const Element = (props: { renderElement = (p: RenderElementProps) => , renderPlaceholder, renderLeaf, + renderText, selection, } = props const editor = useSlateStatic() @@ -71,6 +74,7 @@ const Element = (props: { renderElement, renderPlaceholder, renderLeaf, + renderText, selection, }) @@ -145,6 +149,7 @@ const MemoizedElement = React.memo(Element, (prev, next) => { return ( prev.element === next.element && prev.renderElement === next.renderElement && + prev.renderText === next.renderText && prev.renderLeaf === next.renderLeaf && prev.renderPlaceholder === next.renderPlaceholder && isElementDecorationsEqual(prev.decorations, next.decorations) && diff --git a/packages/slate-react/src/components/leaf.tsx b/packages/slate-react/src/components/leaf.tsx index 562aeb51b..2d79cfe47 100644 --- a/packages/slate-react/src/components/leaf.tsx +++ b/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, LeafPosition, Text } from 'slate' import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer' import String from './string' import { @@ -53,6 +53,7 @@ const Leaf = (props: { renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element renderLeaf?: (props: RenderLeafProps) => JSX.Element text: Text + leafPosition?: LeafPosition }) => { const { leaf, @@ -61,6 +62,7 @@ const Leaf = (props: { parent, renderPlaceholder, renderLeaf = (props: RenderLeafProps) => , + leafPosition, } = props const editor = useSlateStatic() @@ -157,7 +159,13 @@ const Leaf = (props: { 'data-slate-leaf': true, } - return renderLeaf({ attributes, children, leaf, text }) + return renderLeaf({ + attributes, + children, + leaf, + text, + leafPosition, + }) } const MemoizedLeaf = React.memo(Leaf, (prev, next) => { diff --git a/packages/slate-react/src/components/text.tsx b/packages/slate-react/src/components/text.tsx index e0bdd52ae..e592faf81 100644 --- a/packages/slate-react/src/components/text.tsx +++ b/packages/slate-react/src/components/text.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useRef } from 'react' -import { Element, DecoratedRange, Text as SlateText } from 'slate' +import { Element, Text as SlateText, DecoratedRange } from 'slate' import { ReactEditor, useSlateStatic } from '..' import { isTextDecorationsEqual } from 'slate-dom' import { @@ -7,7 +7,11 @@ import { ELEMENT_TO_NODE, NODE_TO_ELEMENT, } from 'slate-dom' -import { RenderLeafProps, RenderPlaceholderProps } from './editable' +import { + RenderLeafProps, + RenderPlaceholderProps, + RenderTextProps, +} from './editable' import Leaf from './leaf' /** @@ -20,25 +24,34 @@ const Text = (props: { parent: Element renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element renderLeaf?: (props: RenderLeafProps) => JSX.Element + renderText?: (props: RenderTextProps) => JSX.Element text: SlateText }) => { - const { decorations, isLast, parent, renderPlaceholder, renderLeaf, text } = - props + const { + decorations, + isLast, + parent, + renderPlaceholder, + renderLeaf, + renderText = (props: RenderTextProps) => , + text, + } = props const editor = useSlateStatic() const ref = useRef(null) - const leaves = SlateText.decorations(text, decorations) + const decoratedLeaves = SlateText.decorations(text, decorations) const key = ReactEditor.findKey(editor, text) const children = [] - for (let i = 0; i < leaves.length; i++) { - const leaf = leaves[i] + for (let i = 0; i < decoratedLeaves.length; i++) { + const { leaf, position } = decoratedLeaves[i] children.push( - {children} - - ) + + const attributes: { + 'data-slate-node': 'text' + ref: any + } = { + 'data-slate-node': 'text', + ref: callbackRef, + } + + return renderText({ + text, + children, + attributes, + }) } const MemoizedText = React.memo(Text, (prev, next) => { return ( next.parent === prev.parent && next.isLast === prev.isLast && + next.renderText === prev.renderText && next.renderLeaf === prev.renderLeaf && next.renderPlaceholder === prev.renderPlaceholder && next.text === prev.text && @@ -83,4 +106,9 @@ const MemoizedText = React.memo(Text, (prev, next) => { ) }) +export const DefaultText = (props: RenderTextProps) => { + const { attributes, children } = props + return {children} +} + export default MemoizedText diff --git a/packages/slate-react/src/hooks/use-children.tsx b/packages/slate-react/src/hooks/use-children.tsx index 322c7ad60..436d2d442 100644 --- a/packages/slate-react/src/hooks/use-children.tsx +++ b/packages/slate-react/src/hooks/use-children.tsx @@ -11,6 +11,7 @@ import { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, + RenderTextProps, } from '../components/editable' import ElementComponent from '../components/element' @@ -30,6 +31,7 @@ const useChildren = (props: { node: Ancestor renderElement?: (props: RenderElementProps) => JSX.Element renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element + renderText?: (props: RenderTextProps) => JSX.Element renderLeaf?: (props: RenderLeafProps) => JSX.Element selection: Range | null }) => { diff --git a/packages/slate-react/src/index.ts b/packages/slate-react/src/index.ts index 2a9d7a032..fee79b000 100644 --- a/packages/slate-react/src/index.ts +++ b/packages/slate-react/src/index.ts @@ -8,6 +8,7 @@ export { } from './components/editable' export { DefaultElement } from './components/element' +export { DefaultText } from './components/text' export { DefaultLeaf } from './components/leaf' export { Slate } from './components/slate' diff --git a/packages/slate/src/interfaces/text.ts b/packages/slate/src/interfaces/text.ts index 29dc0a5ff..e8178ae65 100644 --- a/packages/slate/src/interfaces/text.ts +++ b/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,13 @@ export interface BaseText { export type Text = ExtendedType<'Text', BaseText> +export interface LeafPosition { + start: number + end: number + isFirst?: true + isLast?: true +} + export interface TextEqualsOptions { loose?: boolean } @@ -62,7 +69,10 @@ export interface TextInterface { /** * Get the leaves for a text node given decorations. */ - decorations: (node: Text, decorations: DecoratedRange[]) => Text[] + decorations: ( + node: Text, + decorations: DecoratedRange[] + ) => { leaf: Text; position?: LeafPosition }[] } // eslint-disable-next-line no-redeclare @@ -111,8 +121,13 @@ export const Text: TextInterface = { return true }, - decorations(node: Text, decorations: DecoratedRange[]): Text[] { - let leaves: Text[] = [{ ...node }] + decorations( + node: Text, + decorations: DecoratedRange[] + ): { leaf: Text; position?: LeafPosition }[] { + let leaves: { leaf: Text; position?: LeafPosition }[] = [ + { leaf: { ...node } }, + ] for (const dec of decorations) { const { anchor, focus, merge: mergeDecoration, ...rest } = dec @@ -123,7 +138,7 @@ export const Text: TextInterface = { const decorationEnd = end.offset const merge = mergeDecoration ?? Object.assign - for (const leaf of leaves) { + for (const { leaf } of leaves) { const { length } = leaf.text const leafStart = leafEnd leafEnd += length @@ -131,7 +146,7 @@ export const Text: TextInterface = { // If the range encompasses the entire leaf, add the range. if (decorationStart <= leafStart && leafEnd <= decorationEnd) { merge(leaf, rest) - next.push(leaf) + next.push({ leaf }) continue } @@ -143,7 +158,7 @@ export const Text: TextInterface = { decorationEnd < leafStart || (decorationEnd === leafStart && leafStart !== 0) ) { - next.push(leaf) + next.push({ leaf }) continue } @@ -156,13 +171,13 @@ export const Text: TextInterface = { if (decorationEnd < leafEnd) { const off = decorationEnd - leafStart - after = { ...middle, text: middle.text.slice(off) } + after = { leaf: { ...middle, text: middle.text.slice(off) } } middle = { ...middle, text: middle.text.slice(0, off) } } if (decorationStart > leafStart) { const off = decorationStart - leafStart - before = { ...middle, text: middle.text.slice(0, off) } + before = { leaf: { ...middle, text: middle.text.slice(0, off) } } middle = { ...middle, text: middle.text.slice(off) } } @@ -172,7 +187,7 @@ export const Text: TextInterface = { next.push(before) } - next.push(middle) + next.push({ leaf: middle }) if (after) { next.push(after) @@ -182,6 +197,21 @@ export const Text: TextInterface = { leaves = next } + if (leaves.length > 1) { + let currentOffset = 0 + for (const [index, item] of leaves.entries()) { + const start = currentOffset + const end = start + item.leaf.text.length + const position: LeafPosition = { start, end } + + if (index === 0) position.isFirst = true + if (index === leaves.length - 1) position.isLast = true + + item.position = position + currentOffset = end + } + } + return leaves }, } diff --git a/packages/slate/test/interfaces/Text/decorations/adjacent.js b/packages/slate/test/interfaces/Text/decorations/adjacent.js index afd4fe815..95780bace 100644 --- a/packages/slate/test/interfaces/Text/decorations/adjacent.js +++ b/packages/slate/test/interfaces/Text/decorations/adjacent.js @@ -31,21 +31,33 @@ export const test = decorations => { export const output = [ { - text: 'a', - mark: 'mark', + leaf: { + text: 'a', + mark: 'mark', + }, + position: { start: 0, end: 1, isFirst: true }, }, { - text: 'b', - mark: 'mark', - decoration1: 'decoration1', + leaf: { + text: 'b', + mark: 'mark', + decoration1: 'decoration1', + }, + position: { start: 1, end: 2 }, }, { - text: 'c', - mark: 'mark', - decoration2: 'decoration2', + leaf: { + text: 'c', + mark: 'mark', + decoration2: 'decoration2', + }, + position: { start: 2, end: 3 }, }, { - text: 'd', - mark: 'mark', + leaf: { + text: 'd', + mark: 'mark', + }, + position: { start: 3, end: 4, isLast: true }, }, ] diff --git a/packages/slate/test/interfaces/Text/decorations/collapse.js b/packages/slate/test/interfaces/Text/decorations/collapse.js index 55772d641..352a6044d 100644 --- a/packages/slate/test/interfaces/Text/decorations/collapse.js +++ b/packages/slate/test/interfaces/Text/decorations/collapse.js @@ -53,33 +53,51 @@ export const test = decorations => { export const output = [ { - text: 'a', - mark: 'mark', + leaf: { + text: 'a', + mark: 'mark', + }, + position: { start: 0, end: 1, isFirst: true }, }, { - text: 'b', - mark: 'mark', - decoration1: 'decoration1', + leaf: { + text: 'b', + mark: 'mark', + decoration1: 'decoration1', + }, + position: { start: 1, end: 2 }, }, { - text: '', - mark: 'mark', - decoration1: 'decoration1', - decoration2: 'decoration2', - decoration3: 'decoration3', + leaf: { + text: '', + mark: 'mark', + decoration1: 'decoration1', + decoration2: 'decoration2', + decoration3: 'decoration3', + }, + position: { start: 2, end: 2 }, }, { - text: 'c', - mark: 'mark', - decoration3: 'decoration3', + leaf: { + text: 'c', + mark: 'mark', + decoration3: 'decoration3', + }, + position: { start: 2, end: 3 }, }, { - text: 'd', - mark: 'mark', + leaf: { + text: 'd', + mark: 'mark', + }, + position: { start: 3, end: 4 }, }, { - text: '', - mark: 'mark', - decoration4: 'decoration4', + leaf: { + text: '', + mark: 'mark', + decoration4: 'decoration4', + }, + position: { start: 4, end: 4, isLast: true }, }, ] diff --git a/packages/slate/test/interfaces/Text/decorations/end.tsx b/packages/slate/test/interfaces/Text/decorations/end.tsx index 7d2b48a7e..8211f5225 100644 --- a/packages/slate/test/interfaces/Text/decorations/end.tsx +++ b/packages/slate/test/interfaces/Text/decorations/end.tsx @@ -18,12 +18,18 @@ export const test = decorations => { } export const output = [ { - text: 'ab', - mark: 'mark', + leaf: { + text: 'ab', + mark: 'mark', + }, + position: { start: 0, end: 2, isFirst: true }, }, { - text: 'c', - mark: 'mark', - decoration: 'decoration', + leaf: { + text: 'c', + mark: 'mark', + decoration: 'decoration', + }, + position: { start: 2, end: 3, isLast: true }, }, ] diff --git a/packages/slate/test/interfaces/Text/decorations/intersect.js b/packages/slate/test/interfaces/Text/decorations/intersect.js index 439a6bf70..7dbb543f3 100644 --- a/packages/slate/test/interfaces/Text/decorations/intersect.js +++ b/packages/slate/test/interfaces/Text/decorations/intersect.js @@ -53,43 +53,64 @@ export const test = decorations => { export const output = [ { - text: 'a', - mark: 'mark', + leaf: { + text: 'a', + mark: 'mark', + }, + position: { start: 0, end: 1, isFirst: true }, }, { - text: 'b', - mark: 'mark', - decoration1: 'decoration1', - decoration2: 'decoration2', + leaf: { + text: 'b', + mark: 'mark', + decoration1: 'decoration1', + decoration2: 'decoration2', + }, + position: { start: 1, end: 2 }, }, { - text: '', - mark: 'mark', - decoration1: 'decoration1', - decoration2: 'decoration2', - decoration3: 'decoration3', - decoration4: 'decoration4', + leaf: { + text: '', + mark: 'mark', + decoration1: 'decoration1', + decoration2: 'decoration2', + decoration3: 'decoration3', + decoration4: 'decoration4', + }, + position: { start: 2, end: 2 }, }, { - text: 'c', - mark: 'mark', - decoration1: 'decoration1', - decoration2: 'decoration2', - decoration4: 'decoration4', + leaf: { + text: 'c', + mark: 'mark', + decoration1: 'decoration1', + decoration2: 'decoration2', + decoration4: 'decoration4', + }, + position: { start: 2, end: 3 }, }, { - text: 'd', - mark: 'mark', - decoration1: 'decoration1', - decoration4: 'decoration4', + leaf: { + text: 'd', + mark: 'mark', + decoration1: 'decoration1', + decoration4: 'decoration4', + }, + position: { start: 3, end: 4 }, }, { - text: 'e', - mark: 'mark', - decoration1: 'decoration1', + leaf: { + text: 'e', + mark: 'mark', + decoration1: 'decoration1', + }, + position: { start: 4, end: 5 }, }, { - text: 'f', - mark: 'mark', + leaf: { + text: 'f', + mark: 'mark', + }, + position: { start: 5, end: 6, isLast: true }, }, ] diff --git a/packages/slate/test/interfaces/Text/decorations/merge.ts b/packages/slate/test/interfaces/Text/decorations/merge.ts index ee6f9bd79..796c193cb 100644 --- a/packages/slate/test/interfaces/Text/decorations/merge.ts +++ b/packages/slate/test/interfaces/Text/decorations/merge.ts @@ -37,18 +37,27 @@ export const test = decorations => { } export const output = [ { - text: 'a', - mark: 'mark', - decoration: [1, 2, 3], + leaf: { + text: 'a', + mark: 'mark', + decoration: [1, 2, 3], + }, + position: { start: 0, end: 1, isFirst: true }, }, { - text: 'b', - mark: 'mark', - decoration: [1, 2, 3, 4, 5, 6], + leaf: { + text: 'b', + mark: 'mark', + decoration: [1, 2, 3, 4, 5, 6], + }, + position: { start: 1, end: 2 }, }, { - text: 'c', - mark: 'mark', - decoration: [4, 5, 6], + leaf: { + text: 'c', + mark: 'mark', + decoration: [4, 5, 6], + }, + position: { start: 2, end: 3, isLast: true }, }, ] diff --git a/packages/slate/test/interfaces/Text/decorations/middle.tsx b/packages/slate/test/interfaces/Text/decorations/middle.tsx index 601ac90ed..0c2a5d562 100644 --- a/packages/slate/test/interfaces/Text/decorations/middle.tsx +++ b/packages/slate/test/interfaces/Text/decorations/middle.tsx @@ -18,16 +18,25 @@ export const test = decorations => { } export const output = [ { - text: 'a', - mark: 'mark', + leaf: { + text: 'a', + mark: 'mark', + }, + position: { start: 0, end: 1, isFirst: true }, }, { - text: 'b', - mark: 'mark', - decoration: 'decoration', + leaf: { + text: 'b', + mark: 'mark', + decoration: 'decoration', + }, + position: { start: 1, end: 2 }, }, { - text: 'c', - mark: 'mark', + leaf: { + text: 'c', + mark: 'mark', + }, + position: { start: 2, end: 3, isLast: true }, }, ] diff --git a/packages/slate/test/interfaces/Text/decorations/overlapping.tsx b/packages/slate/test/interfaces/Text/decorations/overlapping.tsx index e54bf25b9..a42bfe93b 100644 --- a/packages/slate/test/interfaces/Text/decorations/overlapping.tsx +++ b/packages/slate/test/interfaces/Text/decorations/overlapping.tsx @@ -29,19 +29,28 @@ export const test = decorations => { } export const output = [ { - text: 'a', - mark: 'mark', - decoration2: 'decoration2', + leaf: { + text: 'a', + mark: 'mark', + decoration2: 'decoration2', + }, + position: { start: 0, end: 1, isFirst: true }, }, { - text: 'b', - mark: 'mark', - decoration1: 'decoration1', - decoration2: 'decoration2', + leaf: { + text: 'b', + mark: 'mark', + decoration1: 'decoration1', + decoration2: 'decoration2', + }, + position: { start: 1, end: 2 }, }, { - text: 'c', - mark: 'mark', - decoration2: 'decoration2', + leaf: { + text: 'c', + mark: 'mark', + decoration2: 'decoration2', + }, + position: { start: 2, end: 3, isLast: true }, }, ] diff --git a/packages/slate/test/interfaces/Text/decorations/start.tsx b/packages/slate/test/interfaces/Text/decorations/start.tsx index 20094968f..739ae51e2 100644 --- a/packages/slate/test/interfaces/Text/decorations/start.tsx +++ b/packages/slate/test/interfaces/Text/decorations/start.tsx @@ -18,12 +18,18 @@ export const test = decorations => { } export const output = [ { - text: 'a', - mark: 'mark', - decoration: 'decoration', + leaf: { + text: 'a', + mark: 'mark', + decoration: 'decoration', + }, + position: { start: 0, end: 1, isFirst: true }, }, { - text: 'bc', - mark: 'mark', + leaf: { + text: 'bc', + mark: 'mark', + }, + position: { start: 1, end: 3, isLast: true }, }, ]