fix: use keyed paths in the rendering pipeline

Author: christianhg

.changeset/render-keyed-paths.md

@@ -0,0 +1,5 @@
+---
+'@portabletext/editor': patch
+---
+
+fix: use keyed paths in the rendering pipeline

packages/editor/src/editor/render.inline-object.tsx

@@ -1,10 +1,8 @@
 import type {PortableTextChild, PortableTextObject} from '@portabletext/schema'
 import {useContext, useRef, type ReactElement} from 'react'
-import {getNode} from '../node-traversal/get-node'
 import {serializePath} from '../paths/serialize-path'
 import type {Path} from '../slate/interfaces/path'
 import type {RenderElementProps} from '../slate/react/components/editable'
-import {useSlateStatic} from '../slate/react/hooks/use-slate-static'
 import type {BlockChildRenderProps, RenderChildFunction} from '../types/editor'
 import type {EditorSchema} from './editor-schema'
 import {RenderDefaultInlineObject} from './render.default-object'
@@ -20,7 +18,6 @@ export function RenderInlineObject(props: {
   schema: EditorSchema
 }) {
   const inlineObjectRef = useRef<HTMLElement>(null)
-  const slateEditor = useSlateStatic()
 
   const inlineObjectSchemaType = props.schema.inlineObjects.find(
     (schemaType) => schemaType.name === props.element._type,
@@ -32,27 +29,10 @@ export function RenderInlineObject(props: {
     )
   }
 
-  const blockEntry = getNode(slateEditor, props.path.slice(0, 1))
-  const block = blockEntry?.node
-
-  if (!block) {
-    console.error(
-      `Unable to find parent block of inline object ${props.element._key}`,
-    )
-  }
-
-  const path = block
-    ? [{_key: block._key}, 'children', {_key: props.element._key}]
-    : undefined
-
   const selectionState = useContext(SelectionStateContext)
-  const serializedPath = path ? serializePath(path) : undefined
-  const selected = serializedPath
-    ? selectionState.selectedChildPaths.has(serializedPath)
-    : false
-  const focused = serializedPath
-    ? selectionState.focusedChildPath === serializedPath
-    : false
+  const serializedPath = serializePath(props.path)
+  const selected = selectionState.selectedChildPaths.has(serializedPath)
+  const focused = selectionState.focusedChildPath === serializedPath
 
   const inlineObject = props.element as unknown as PortableTextChild
 
@@ -70,14 +50,14 @@ export function RenderInlineObject(props: {
         style={{display: 'inline-block'}}
         draggable={!props.readOnly}
       >
-        {props.renderChild && path && inlineObjectSchemaType ? (
+        {props.renderChild && inlineObjectSchemaType ? (
           <RenderChild
             renderChild={props.renderChild}
             annotations={[]}
             editorElementRef={inlineObjectRef}
             selected={selected}
             focused={focused}
-            path={path}
+            path={props.path}
             schemaType={inlineObjectSchemaType}
             value={inlineObject}
           >

packages/editor/src/editor/render.span.tsx

@@ -1,7 +1,7 @@
 import type {InlineObjectSchemaType} from '@portabletext/schema'
 import {isTextBlock} from '@portabletext/schema'
 import {useSelector} from '@xstate/react'
-import {useContext, useMemo, useRef, type ReactElement} from 'react'
+import {useContext, useRef, type ReactElement} from 'react'
 import {serializePath} from '../paths/serialize-path'
 import type {RenderLeafProps} from '../slate/react/components/editable'
 import {useSlateStatic} from '../slate/react/hooks/use-slate-static'
@@ -40,22 +40,10 @@ export function RenderSpan(props: RenderSpanProps) {
       ? parent
       : undefined
 
-  const path = useMemo(
-    () =>
-      block
-        ? [{_key: block._key}, 'children', {_key: props.leaf._key}]
-        : undefined,
-    [block, props.leaf._key],
-  )
-
   const selectionState = useContext(SelectionStateContext)
-  const serializedPath = path ? serializePath(path) : undefined
-  const focused = serializedPath
-    ? selectionState.focusedChildPath === serializedPath
-    : false
-  const selected = serializedPath
-    ? selectionState.selectedChildPaths.has(serializedPath)
-    : false
+  const serializedPath = serializePath(props.path)
+  const focused = selectionState.focusedChildPath === serializedPath
+  const selected = selectionState.selectedChildPaths.has(serializedPath)
 
   const decoratorSchemaTypes = editorActor
     .getSnapshot()
@@ -95,13 +83,13 @@ export function RenderSpan(props: RenderSpanProps) {
       (dec) => dec.name === mark,
     )
 
-    if (path && decoratorSchemaType && props.renderDecorator) {
+    if (decoratorSchemaType && props.renderDecorator) {
       children = (
         <RenderDecorator
           renderDecorator={props.renderDecorator}
           editorElementRef={spanRef}
           focused={focused}
-          path={path}
+          path={props.path}
           selected={selected}
           schemaType={decoratorSchemaType}
           value={mark}
@@ -120,15 +108,15 @@ export function RenderSpan(props: RenderSpanProps) {
       (t) => t.name === annotationMarkDef._type,
     )
     if (annotationSchemaType) {
-      if (block && path && props.renderAnnotation) {
+      if (block && props.renderAnnotation) {
         children = (
           <span ref={spanRef}>
             <RenderAnnotation
               renderAnnotation={props.renderAnnotation}
               block={block}
               editorElementRef={spanRef}
               focused={focused}
-              path={path}
+              path={props.path}
               selected={selected}
               schemaType={annotationSchemaType}
               value={annotationMarkDef}
@@ -146,7 +134,7 @@ export function RenderSpan(props: RenderSpanProps) {
   /**
    * Support `renderChild` render function for the Span itself
    */
-  if (block && path && props.renderChild) {
+  if (block && props.renderChild) {
     const child = block.children.find(
       (_child) => _child._key === props.leaf._key,
     ) // Ensure object equality
@@ -158,7 +146,7 @@ export function RenderSpan(props: RenderSpanProps) {
           annotations={annotationMarkDefs}
           editorElementRef={spanRef}
           focused={focused}
-          path={path}
+          path={props.path}
           schemaType={schemaType}
           selected={selected}
           value={child}

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

@@ -126,6 +126,7 @@ export interface RenderLeafProps {
    */
   leaf: PortableTextSpan
   text: PortableTextSpan
+  path: Path
   attributes: {
     'data-slate-leaf': true
   }
@@ -1944,7 +1945,6 @@ export const Editable = forwardRef(
                 )}
               >
                 <Children
-                  parentDataPath=""
                   decorations={decorations}
                   node={editor}
                   path={[]}

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

@@ -5,6 +5,7 @@ import type {
 import React, {type JSX} from 'react'
 import {getText} from '../../../node-traversal/get-text'
 import {isInline as isInlinePath} from '../../../node-traversal/is-inline'
+import {serializePath} from '../../../paths/serialize-path'
 import {isElementDecorationsEqual} from '../../dom/utils/range-list'
 import type {Path} from '../../interfaces/path'
 import type {DecoratedRange} from '../../interfaces/text'
@@ -30,7 +31,6 @@ const defaultRenderElement = (props: RenderElementProps) => (
  */
 
 const Element = (props: {
-  dataPath: string
   decorations: DecoratedRange[]
   element: PortableTextTextBlock | PortableTextObject
   path: Path
@@ -40,19 +40,18 @@ const Element = (props: {
   renderLeaf?: (props: RenderLeafProps) => JSX.Element
 }) => {
   const {
-    dataPath,
     decorations: parentDecorations,
     element,
     renderElement = defaultRenderElement,
     renderPlaceholder,
     renderLeaf,
     renderText,
   } = props
+  const dataPath = serializePath(props.path)
   const editor = useSlateStatic()
   const isInline = isInlinePath(editor, props.path)
   const decorations = useDecorations(element, props.path, parentDecorations)
   const children = useChildren({
-    parentDataPath: dataPath,
     decorations,
     node: element,
     path: props.path,
@@ -101,7 +100,6 @@ const Element = (props: {
 
 const MemoizedElement = React.memo(Element, (prev, next) => {
   return (
-    prev.dataPath === next.dataPath &&
     prev.element === next.element &&
     pathEquals(prev.path, next.path) &&
     prev.renderElement === next.renderElement &&

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

@@ -174,6 +174,7 @@ const Leaf = (props: {
     children,
     leaf,
     text,
+    path,
     leafPosition,
   })
 }

packages/editor/src/slate/react/components/object-node.tsx

@@ -1,5 +1,6 @@
 import type {PortableTextObject} from '@portabletext/schema'
 import React, {type JSX} from 'react'
+import {serializePath} from '../../../paths/serialize-path'
 import {IS_ANDROID} from '../../dom/utils/environment'
 import {isElementDecorationsEqual} from '../../dom/utils/range-list'
 import type {Path} from '../../interfaces/path'
@@ -25,20 +26,19 @@ const defaultRenderElement = (props: RenderElementProps) => {
  * contain a hidden spacer with a zero-width text node for selection anchoring.
  */
 const ObjectNodeComponent = (props: {
-  dataPath: string
   decorations: DecoratedRange[]
   objectNode: PortableTextObject
   isInline: boolean
   path: Path
   renderElement?: (props: RenderElementProps) => JSX.Element
 }) => {
   const {
-    dataPath,
     objectNode,
     isInline,
     path,
     renderElement = defaultRenderElement,
   } = props
+  const dataPath = serializePath(path)
   const readOnly = useReadOnly()
 
   const attributes: RenderElementProps['attributes'] = {
@@ -85,7 +85,6 @@ const ObjectNodeComponent = (props: {
 
 const MemoizedObjectNode = React.memo(ObjectNodeComponent, (prev, next) => {
   return (
-    prev.dataPath === next.dataPath &&
     prev.objectNode === next.objectNode &&
     pathEquals(prev.path, next.path) &&
     prev.renderElement === next.renderElement &&

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

@@ -3,6 +3,7 @@ import type {
   PortableTextTextBlock,
 } from '@portabletext/schema'
 import React, {type JSX} from 'react'
+import {serializePath} from '../../../paths/serialize-path'
 import {isTextDecorationsEqual} from '../../dom/utils/range-list'
 import type {Path} from '../../interfaces/path'
 import type {DecoratedRange} from '../../interfaces/text'
@@ -23,7 +24,6 @@ const defaultRenderText = (props: RenderTextProps) => <DefaultText {...props} />
  */
 
 const Text = (props: {
-  dataPath: string
   decorations: DecoratedRange[]
   isLast: boolean
   parent: PortableTextTextBlock
@@ -34,7 +34,6 @@ const Text = (props: {
   text: PortableTextSpan
 }) => {
   const {
-    dataPath,
     decorations: parentDecorations,
     isLast,
     parent,
@@ -67,6 +66,8 @@ const Text = (props: {
     )
   }
 
+  const dataPath = serializePath(path)
+
   const attributes: {
     'data-slate-node': 'text'
     'data-pt-path': string

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

@@ -38,7 +38,6 @@ import {useSlateStatic} from './use-slate-static'
  */
 
 const useChildren = (props: {
-  parentDataPath: string
   decorations: DecoratedRange[]
   node: Editor | Node
   path: Path
@@ -48,7 +47,6 @@ const useChildren = (props: {
   renderLeaf?: (props: RenderLeafProps) => JSX.Element
 }): React.ReactNode => {
   const {
-    parentDataPath,
     decorations,
     node,
     path: parentPath,
@@ -97,19 +95,18 @@ const useChildren = (props: {
 
   const renderElementComponent = useCallback(
     (node: PortableTextTextBlock | PortableTextObject, i: number) => {
-      const nodeDataPath =
-        parentDataPath === ''
-          ? `[_key=="${node._key}"]`
-          : `${parentDataPath}.${childFieldName}[_key=="${node._key}"]`
+      const nodePath: Path =
+        parentPath.length === 0
+          ? [{_key: node._key}]
+          : [...parentPath, childFieldName, {_key: node._key}]
 
       return (
         <ElementContext key={`provider-${node._key}`} value={node}>
           <ElementComponent
-            dataPath={nodeDataPath}
             decorations={decorationsByChild[i] ?? []}
             element={node}
             key={node._key}
-            path={parentPath.concat(i)}
+            path={nodePath}
             renderElement={renderElement}
             renderPlaceholder={renderPlaceholder}
             renderLeaf={renderLeaf}
@@ -120,7 +117,6 @@ const useChildren = (props: {
     },
     [
       childFieldName,
-      parentDataPath,
       decorationsByChild,
       parentPath,
       renderElement,
@@ -141,19 +137,18 @@ const useChildren = (props: {
       )
     }
 
-    const nodeDataPath =
-      parentDataPath !== ''
-        ? `${parentDataPath}.children[_key=="${node._key}"]`
-        : ''
+    const nodePath: Path =
+      parentPath.length === 0
+        ? [{_key: node._key}]
+        : [...parentPath, 'children', {_key: node._key}]
 
     return (
       <TextComponent
-        dataPath={nodeDataPath}
         decorations={decorationsByChild[index] ?? []}
         key={node._key}
         isLast={index === children.length - 1}
         parent={textBlockParent}
-        path={parentPath.concat(index)}
+        path={nodePath}
         renderPlaceholder={renderPlaceholder}
         renderLeaf={renderLeaf}
         renderText={renderText}
@@ -166,19 +161,18 @@ const useChildren = (props: {
     node: PortableTextObject,
     index: number,
   ) => {
-    const nodeDataPath =
-      parentDataPath === ''
-        ? `[_key=="${node._key}"]`
-        : `${parentDataPath}.${childFieldName}[_key=="${node._key}"]`
+    const nodePath: Path =
+      parentPath.length === 0
+        ? [{_key: node._key}]
+        : [...parentPath, childFieldName, {_key: node._key}]
 
     return (
       <ObjectNodeComponent
-        dataPath={nodeDataPath}
         decorations={decorationsByChild[index] ?? []}
         isInline={textBlockParent !== undefined}
         key={node._key}
         objectNode={node}
-        path={parentPath.concat(index)}
+        path={nodePath}
         renderElement={renderElement}
       />
     )