refactor: replace blockIndexMap with json-match getIndexForKey

packages/editor/package.json

@@ -91,6 +91,7 @@
     "@portabletext/patches": "workspace:^",
     "@portabletext/schema": "workspace:^",
     "@portabletext/to-html": "^5.0.2",
+    "@sanity/json-match": "^1.0.5",
     "@xstate/react": "^6.1.0",
     "debug": "^4.4.3",
     "scroll-into-view-if-needed": "^3.1.0",

packages/editor/src/behaviors/behavior.abstract.insert.ts

@@ -1,4 +1,5 @@
 import {isTextBlock} from '@portabletext/schema'
+import {getIndexForKey} from '@sanity/json-match'
 import type {EditorSelector} from '../editor/editor-selector'
 import {isSelectionExpanded} from '../selectors'
 import {getFocusInlineObject} from '../selectors/selector.get-focus-inline-object'
@@ -21,7 +22,7 @@ function getUniqueBlockKey(
       return snapshot.context.keyGenerator()
     }
 
-    if (snapshot.blockIndexMap.has(blockKey)) {
+    if (getIndexForKey(snapshot.context.value, blockKey) !== undefined) {
       return snapshot.context.keyGenerator()
     }
 

packages/editor/src/editor/Editable.tsx

@@ -247,7 +247,6 @@ export const PortableTextEditable = forwardRef<
             value: slateEditor.children as Array<PortableTextBlock>,
             selection: normalizedSelection,
           },
-          blockIndexMap: slateEditor.blockIndexMap,
         })
         if (slateRange) {
           slateEditor.select(slateRange)

packages/editor/src/editor/create-editable-api.ts

@@ -4,6 +4,7 @@ import {
   type PortableTextChild,
   type PortableTextObject,
 } from '@portabletext/schema'
+import {getIndexForKey} from '@sanity/json-match'
 import {
   isListItemActive,
   isStyleActive,
@@ -249,7 +250,7 @@ export function createEditableAPI(
         return [undefined, undefined]
       }
 
-      const blockIndex = editor.blockIndexMap.get(blockKey)
+      const blockIndex = getIndexForKey(editor.children as Array<PortableTextBlock>, blockKey)
 
       if (blockIndex === undefined) {
         return [undefined, undefined]
@@ -502,15 +503,13 @@ export function createEditableAPI(
           value: editor.children as Array<PortableTextBlock>,
           selection: selectionA,
         },
-        blockIndexMap: editor.blockIndexMap,
       })
       const rangeB = toSlateRange({
         context: {
           schema: editorActor.getSnapshot().context.schema,
           value: editor.children as Array<PortableTextBlock>,
           selection: selectionB,
         },
-        blockIndexMap: editor.blockIndexMap,
       })
 
       // Make sure the ranges are valid

packages/editor/src/editor/editor-selector.ts

@@ -76,7 +76,6 @@ export function getEditorSnapshot({
     : null
 
   return {
-    blockIndexMap: slateEditorInstance.blockIndexMap,
     context: {
       converters: [...editorActorSnapshot.context.converters],
       keyGenerator: editorActorSnapshot.context.keyGenerator,

packages/editor/src/editor/editor-snapshot.ts

@@ -22,7 +22,6 @@ export type EditorContext = {
  */
 export type EditorSnapshot = {
   context: EditorContext
-  blockIndexMap: Map<string, number>
   /**
    * @beta
    * Subject to change
@@ -61,7 +60,6 @@ export function createEditorSnapshot({
   } satisfies EditorContext
 
   return {
-    blockIndexMap: editor.blockIndexMap,
     context,
     decoratorState: editor.decoratorState,
   } satisfies EditorSnapshot

packages/editor/src/editor/range-decorations-machine.ts

@@ -100,7 +100,6 @@ export const rangeDecorationsMachine = setup({
             value: context.slateEditor.children as Array<PortableTextBlock>,
             selection: rangeDecoration.selection,
           },
-          blockIndexMap: context.slateEditor.blockIndexMap,
         })
 
         if (!Range.isRange(slateRange)) {
@@ -134,7 +133,6 @@ export const rangeDecorationsMachine = setup({
             value: context.slateEditor.children as Array<PortableTextBlock>,
             selection: rangeDecoration.selection,
           },
-          blockIndexMap: context.slateEditor.blockIndexMap,
         })
 
         if (!Range.isRange(slateRange)) {
@@ -169,7 +167,6 @@ export const rangeDecorationsMachine = setup({
             value: context.slateEditor.children as Array<PortableTextBlock>,
             selection: decoratedRange.rangeDecoration.selection,
           },
-          blockIndexMap: context.slateEditor.blockIndexMap,
         })
 
         if (!Range.isRange(slateRange)) {

packages/editor/src/editor/render.element.tsx

@@ -1,5 +1,6 @@
 import type {PortableTextBlock} from '@portabletext/schema'
 import {isTextBlock} from '@portabletext/schema'
+import {getIndexForKey} from '@sanity/json-match'
 import {useSelector} from '@xstate/react'
 import {useContext, type ReactElement} from 'react'
 import type {DropPosition} from '../behaviors/behavior.core.drop-position'
@@ -48,7 +49,7 @@ export function RenderElement(props: {
     )
   }
 
-  const blockIndex = slateStatic.blockIndexMap.get(props.element._key)
+  const blockIndex = getIndexForKey(slateStatic.children as Array<PortableTextBlock>, props.element._key)
   const block =
     blockIndex !== undefined
       ? (slateStatic.children as Array<PortableTextBlock>).at(blockIndex)

packages/editor/src/editor/selection-state-context.tsx

@@ -1,3 +1,4 @@
+import {getIndexForKey} from '@sanity/json-match'
 import {useSelector} from '@xstate/react'
 import {createContext, useContext} from 'react'
 import {getFocusChild} from '../selectors'
@@ -111,17 +112,18 @@ export function SelectionStateProvider({
       let selectedBlockKeys: Set<string> = emptySet
 
       if (startBlockKey && endBlockKey) {
-        const startBlockIndex = snapshot.blockIndexMap.get(startBlockKey)
-        const endBlockIndex = snapshot.blockIndexMap.get(endBlockKey)
+        const startBlockIndex = getIndexForKey(snapshot.context.value, startBlockKey)
+        const endBlockIndex = getIndexForKey(snapshot.context.value, endBlockKey)
 
         if (startBlockIndex !== undefined && endBlockIndex !== undefined) {
           const minIndex = Math.min(startBlockIndex, endBlockIndex)
           const maxIndex = Math.max(startBlockIndex, endBlockIndex)
           selectedBlockKeys = new Set<string>()
 
-          for (const [key, index] of snapshot.blockIndexMap) {
-            if (index >= minIndex && index <= maxIndex) {
-              selectedBlockKeys.add(key)
+          for (const block of snapshot.context.value) {
+            const index = getIndexForKey(snapshot.context.value, block._key)
+            if (index !== undefined && index >= minIndex && index <= maxIndex) {
+              selectedBlockKeys.add(block._key)
             }
           }
         }

packages/editor/src/internal-utils/create-test-snapshot.ts

@@ -14,14 +14,8 @@ export function createTestSnapshot(snapshot: {
     value: snapshot.context?.value ?? [],
     selection: snapshot.context?.selection ?? null,
   }
-  const blockIndexMap = new Map<string, number>()
-
-  snapshot.context?.value?.forEach((block, index) => {
-    blockIndexMap.set(block._key, index)
-  })
 
   return {
-    blockIndexMap,
     context,
     decoratorState: snapshot?.decoratorState ?? {},
   }

packages/editor/src/internal-utils/to-slate-range.test.ts

@@ -55,7 +55,6 @@ describe(toSlateRange.name, () => {
           },
         },
       },
-      blockIndexMap: new Map([[blockKey, 0]]),
     })
 
     expect(range).toEqual({
@@ -104,7 +103,6 @@ describe(toSlateRange.name, () => {
           },
         },
       },
-      blockIndexMap: new Map([[blockKey, 0]]),
     })
 
     expect(range).toEqual({
@@ -137,7 +135,6 @@ describe(toSlateRange.name, () => {
           },
         },
       },
-      blockIndexMap: new Map([[blockObjectKey, 0]]),
     })
 
     expect(range).toEqual({
@@ -179,7 +176,6 @@ describe(toSlateRange.name, () => {
           },
         },
       },
-      blockIndexMap: new Map([[blockKey, 0]]),
     })
 
     expect(range).toEqual({
@@ -220,7 +216,6 @@ describe(toSlateRange.name, () => {
           },
         },
       },
-      blockIndexMap: new Map([[blockKey, 0]]),
     })
 
     expect(range).toEqual({
@@ -267,7 +262,6 @@ describe(toSlateRange.name, () => {
           },
         },
       },
-      blockIndexMap: new Map([[blockKey, 0]]),
     })
 
     expect(range).toEqual({

packages/editor/src/internal-utils/to-slate-range.ts

@@ -4,7 +4,8 @@ import {
   type PortableTextObject,
   type PortableTextSpan,
 } from '@portabletext/schema'
-import type {EditorContext, EditorSnapshot} from '../editor/editor-snapshot'
+import {getIndexForKey} from '@sanity/json-match'
+import type {EditorContext} from '../editor/editor-snapshot'
 import type {Path, Range} from '../slate'
 import type {EditorSelectionPoint} from '../types/editor'
 import {blockOffsetToSpanSelectionPoint} from '../utils/util.block-offset'
@@ -14,11 +15,9 @@ import {
   getChildKeyFromSelectionPoint,
 } from '../utils/util.selection-point'
 
-export function toSlateRange(
-  snapshot: {
-    context: Pick<EditorContext, 'schema' | 'value' | 'selection'>
-  } & Pick<EditorSnapshot, 'blockIndexMap'>,
-): Range | null {
+export function toSlateRange(snapshot: {
+  context: Pick<EditorContext, 'schema' | 'value' | 'selection'>
+}): Range | null {
   if (!snapshot.context.selection) {
     return null
   }
@@ -69,7 +68,7 @@ export function toSlateRange(
 export function toSlateSelectionPoint(
   snapshot: {
     context: Pick<EditorContext, 'schema' | 'value'>
-  } & Pick<EditorSnapshot, 'blockIndexMap'>,
+  },
   selectionPoint: EditorSelectionPoint,
   direction: 'forward' | 'backward',
 ):
@@ -84,7 +83,7 @@ export function toSlateSelectionPoint(
     return undefined
   }
 
-  const blockIndex = snapshot.blockIndexMap.get(blockKey)
+  const blockIndex = getIndexForKey(snapshot.context.value, blockKey)
 
   if (blockIndex === undefined) {
     return undefined

packages/editor/src/operations/operation.annotation.add.ts

@@ -35,7 +35,6 @@ export const addAnnotationOperationImplementation: OperationImplementation<
           value: operation.editor.children as Array<PortableTextBlock>,
           selection: operation.at,
         },
-        blockIndexMap: operation.editor.blockIndexMap,
       })
     : null
 

packages/editor/src/operations/operation.annotation.remove.ts

@@ -18,7 +18,6 @@ export const removeAnnotationOperationImplementation: OperationImplementation<
           value: operation.editor.children as Array<PortableTextBlock>,
           selection: operation.at,
         },
-        blockIndexMap: operation.editor.blockIndexMap,
       })
     : null
 

packages/editor/src/operations/operation.block.set.ts

@@ -1,13 +1,14 @@
 import {applyAll, set} from '@portabletext/patches'
-import {isTextBlock} from '@portabletext/schema'
+import {isTextBlock, type PortableTextBlock} from '@portabletext/schema'
+import {getIndexForKey} from '@sanity/json-match'
 import {applySetNode} from '../internal-utils/apply-set-node'
 import {parseMarkDefs} from '../utils/parse-blocks'
 import type {OperationImplementation} from './operation.types'
 
 export const blockSetOperationImplementation: OperationImplementation<
   'block.set'
 > = ({context, operation}) => {
-  const blockIndex = operation.editor.blockIndexMap.get(operation.at[0]._key)
+  const blockIndex = getIndexForKey(operation.editor.children as Array<PortableTextBlock>, operation.at[0]._key)
 
   if (blockIndex === undefined) {
     throw new Error(

packages/editor/src/operations/operation.block.unset.ts

@@ -1,12 +1,13 @@
-import {isTextBlock} from '@portabletext/schema'
+import {isTextBlock, type PortableTextBlock} from '@portabletext/schema'
+import {getIndexForKey} from '@sanity/json-match'
 import {applySetNode} from '../internal-utils/apply-set-node'
 import type {OperationImplementation} from './operation.types'
 
 export const blockUnsetOperationImplementation: OperationImplementation<
   'block.unset'
 > = ({context, operation}) => {
   const blockKey = operation.at[0]._key
-  const blockIndex = operation.editor.blockIndexMap.get(blockKey)
+  const blockIndex = getIndexForKey(operation.editor.children as Array<PortableTextBlock>, blockKey)
 
   if (blockIndex === undefined) {
     throw new Error(`Unable to find block index for block key ${blockKey}`)

packages/editor/src/operations/operation.child.set.ts

@@ -16,7 +16,6 @@ export const childSetOperationImplementation: OperationImplementation<
         focus: {path: operation.at, offset: 0},
       },
     },
-    blockIndexMap: operation.editor.blockIndexMap,
   })
 
   if (!location) {

packages/editor/src/operations/operation.child.unset.ts

@@ -1,5 +1,6 @@
 import type {PortableTextBlock} from '@portabletext/schema'
 import {isTextBlock} from '@portabletext/schema'
+import {getIndexForKey} from '@sanity/json-match'
 import {applySetNode} from '../internal-utils/apply-set-node'
 import {Editor} from '../slate'
 import type {OperationImplementation} from './operation.types'
@@ -8,7 +9,7 @@ export const childUnsetOperationImplementation: OperationImplementation<
   'child.unset'
 > = ({context, operation}) => {
   const blockKey = operation.at[0]._key
-  const blockIndex = operation.editor.blockIndexMap.get(blockKey)
+  const blockIndex = getIndexForKey(operation.editor.children as Array<PortableTextBlock>, blockKey)
 
   if (blockIndex === undefined) {
     throw new Error(`Unable to find block index for block key ${blockKey}`)

packages/editor/src/operations/operation.decorator.add.ts

@@ -19,7 +19,6 @@ export const decoratorAddOperationImplementation: OperationImplementation<
           value: operation.editor.children as Array<PortableTextBlock>,
           selection: operation.at,
         },
-        blockIndexMap: operation.editor.blockIndexMap,
       })
     : operation.editor.selection
 

packages/editor/src/operations/operation.decorator.remove.ts

@@ -17,7 +17,6 @@ export const decoratorRemoveOperationImplementation: OperationImplementation<
           value: operation.editor.children as Array<PortableTextBlock>,
           selection: operation.at,
         },
-        blockIndexMap: operation.editor.blockIndexMap,
       })
     : editor.selection
 

packages/editor/src/operations/operation.delete.ts

@@ -26,7 +26,6 @@ export const deleteOperationImplementation: OperationImplementation<
           value: operation.editor.children as Array<PortableTextBlock>,
           selection: operation.at,
         },
-        blockIndexMap: operation.editor.blockIndexMap,
       })
     : operation.editor.selection
 

packages/editor/src/operations/operation.insert.block.ts

@@ -68,7 +68,6 @@ export function insertBlock(options: {
           value: editor.children as Array<PortableTextBlock>,
           selection: options.at,
         },
-        blockIndexMap: editor.blockIndexMap,
       })
     : editor.selection
 

packages/editor/src/operations/operation.move.block.ts

@@ -1,3 +1,5 @@
+import type {PortableTextBlock} from '@portabletext/schema'
+import {getIndexForKey} from '@sanity/json-match'
 import {applyMoveNode} from '../internal-utils/apply-move-node'
 import {getBlockKeyFromSelectionPoint} from '../utils/util.selection-point'
 import type {OperationImplementation} from './operation.types'
@@ -14,7 +16,7 @@ export const moveBlockOperationImplementation: OperationImplementation<
     throw new Error('Failed to get block key from selection point')
   }
 
-  const originBlockIndex = operation.editor.blockIndexMap.get(originKey)
+  const originBlockIndex = getIndexForKey(operation.editor.children as Array<PortableTextBlock>, originKey)
 
   if (originBlockIndex === undefined) {
     throw new Error('Failed to get block index from block key')
@@ -29,8 +31,10 @@ export const moveBlockOperationImplementation: OperationImplementation<
     throw new Error('Failed to get block key from selection point')
   }
 
-  const destinationBlockIndex =
-    operation.editor.blockIndexMap.get(destinationKey)
+  const destinationBlockIndex = getIndexForKey(
+    operation.editor.children as Array<PortableTextBlock>,
+    destinationKey,
+  )
 
   if (destinationBlockIndex === undefined) {
     throw new Error('Failed to get block index from block key')