@portabletext/editor 3.0.6 → 3.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -65,7 +65,7 @@
     "@portabletext/to-html": "^4.0.1",
     "@xstate/react": "^6.0.0",
     "debug": "^4.4.3",
-    "immer": "^10.2.0",
+    "immer": "^11.0.0",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "1.0.0",
@@ -73,7 +73,7 @@
     "slate-dom": "^0.119.0",
     "slate-react": "0.119.0",
     "xstate": "^5.24.0",
-    "@portabletext/block-tools": "^4.1.1",
+    "@portabletext/block-tools": "^4.1.3",
     "@portabletext/keyboard-shortcuts": "^2.1.0",
     "@portabletext/patches": "^2.0.0",
     "@portabletext/schema": "^2.0.0"
@@ -81,8 +81,8 @@
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^9.0.3",
-    "@sanity/schema": "^4.17.0",
-    "@sanity/types": "^4.17.0",
+    "@sanity/schema": "^4.19.0",
+    "@sanity/types": "^4.19.0",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.20",
     "@types/lodash.startcase": "^4.4.9",
@@ -106,14 +106,14 @@
     "vite": "^7.1.12",
     "vitest": "^4.0.9",
     "vitest-browser-react": "^2.0.2",
-    "@portabletext/sanity-bridge": "1.2.4",
+    "@portabletext/sanity-bridge": "1.2.6",
     "@portabletext/test": "^1.0.0",
     "racejar": "2.0.0"
   },
   "peerDependencies": {
-    "@portabletext/sanity-bridge": "^1.2.4",
-    "@sanity/schema": "^4.17.0",
-    "@sanity/types": "^4.17.0",
+    "@portabletext/sanity-bridge": "^1.2.6",
+    "@sanity/schema": "^4.19.0",
+    "@sanity/types": "^4.19.0",
     "react": "^18.3 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/converters/converter.portable-text.deserialize.test.ts

@@ -81,7 +81,6 @@ describe(converterPortableText.deserialize, () => {
               marks: [],
             },
           ],
-          markDefs: [],
         },
       ],
     })
@@ -117,7 +116,6 @@ describe(converterPortableText.deserialize, () => {
               marks: [],
             },
           ],
-          markDefs: [],
         },
       ],
     })
@@ -263,8 +261,6 @@ describe(converterPortableText.deserialize, () => {
             marks: [],
           },
         ],
-        markDefs: [],
-        style: 'normal',
       },
     ])
   })
@@ -299,8 +295,6 @@ describe(converterPortableText.deserialize, () => {
             marks: [],
           },
         ],
-        markDefs: [],
-        style: 'normal',
       },
     ])
   })
@@ -336,8 +330,6 @@ describe(converterPortableText.deserialize, () => {
             marks: [],
           },
         ],
-        markDefs: [],
-        style: 'normal',
       },
     ])
   })
@@ -377,7 +369,6 @@ describe(converterPortableText.deserialize, () => {
             marks: [],
           },
         ],
-        markDefs: [],
         style: 'h1',
       },
     ])
@@ -415,9 +406,7 @@ describe(converterPortableText.deserialize, () => {
             marks: [],
           },
         ],
-        markDefs: [],
         level: 1,
-        style: 'normal',
       },
     ])
   })
@@ -458,10 +447,8 @@ describe(converterPortableText.deserialize, () => {
             marks: [],
           },
         ],
-        markDefs: [],
         listItem: 'bullet',
         level: 1,
-        style: 'normal',
       },
     ])
   })

package/src/editor/Editable.tsx

@@ -25,7 +25,7 @@ import {getEventPosition} from '../internal-utils/event-position'
 import {normalizeSelection} from '../internal-utils/selection'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
-import {fromSlateValue, isEqualToEmptyEditor} from '../internal-utils/values'
+import {isEqualToEmptyEditor} from '../internal-utils/values'
 import type {
   EditorSelection,
   OnCopyFn,
@@ -51,7 +51,6 @@ import {createWithHotkeys} from './plugins/createWithHotKeys'
 import {rangeDecorationsMachine} from './range-decorations-machine'
 import {RelayActorContext} from './relay-actor-context'
 import {validateSelectionMachine} from './validate-selection-machine'
-import {KEY_TO_VALUE_ELEMENT} from './weakMaps'
 
 const debug = debugWithName('component:Editable')
 
@@ -250,10 +249,7 @@ export const PortableTextEditable = forwardRef<
       debug(`Selection from props ${JSON.stringify(propsSelection)}`)
       const normalizedSelection = normalizeSelection(
         propsSelection,
-        fromSlateValue(
-          slateEditor.children,
-          editorActor.getSnapshot().context.schema.block.name,
-        ),
+        slateEditor.value,
       )
       if (normalizedSelection !== null) {
         debug(
@@ -401,11 +397,7 @@ export const PortableTextEditable = forwardRef<
   // Handle incoming pasting events in the editor
   const handlePaste = useCallback(
     (event: ClipboardEvent<HTMLDivElement>): Promise<void> | void => {
-      const value = fromSlateValue(
-        slateEditor.children,
-        editorActor.getSnapshot().context.schema.block.name,
-        KEY_TO_VALUE_ELEMENT.get(slateEditor),
-      )
+      const value = slateEditor.value
       const ptRange = slateEditor.selection
         ? slateRangeToSelection({
             schema: editorActor.getSnapshot().context.schema,

package/src/editor/create-editor.ts

@@ -9,7 +9,6 @@ import {createCoreConverters} from '../converters/converters.core'
 import type {Editor, EditorConfig} from '../editor'
 import {debugWithName} from '../internal-utils/debug'
 import {compileType} from '../internal-utils/schema'
-import {fromSlateValue} from '../internal-utils/values'
 import {corePriority} from '../priority/priority.core'
 import {createEditorPriority} from '../priority/priority.types'
 import type {EditableAPI, PortableTextSlateEditor} from '../types/editor'
@@ -23,7 +22,6 @@ import {mutationMachine, type MutationActor} from './mutation-machine'
 import {createEditableAPI} from './plugins/createWithEditableAPI'
 import {relayMachine, type RelayActor} from './relay-machine'
 import {syncMachine, type SyncActor} from './sync-machine'
-import {KEY_TO_VALUE_ELEMENT} from './weakMaps'
 
 const debug = debugWithName('setup')
 
@@ -266,11 +264,7 @@ function createActors(config: {
           config.editorActor.send({
             ...event,
             type: 'internal.patch',
-            value: fromSlateValue(
-              config.slateEditor.children,
-              config.editorActor.getSnapshot().context.schema.block.name,
-              KEY_TO_VALUE_ELEMENT.get(config.slateEditor),
-            ),
+            value: config.slateEditor.value,
           })
           break
 

package/src/editor/create-slate-editor.tsx

@@ -8,7 +8,7 @@ import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorActor} from './editor-machine'
 import {withPlugins} from './plugins/with-plugins'
 import type {RelayActor} from './relay-machine'
-import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from './weakMaps'
+import {KEY_TO_SLATE_ELEMENT} from './weakMaps'
 
 const debug = debugWithName('setup')
 
@@ -26,25 +26,25 @@ export type SlateEditor = {
 export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
   debug('Creating new Slate editor instance')
 
-  const instance = withPlugins(withReact(createEditor()), {
+  const placeholderBlock = createPlaceholderBlock(
+    config.editorActor.getSnapshot().context,
+  )
+
+  const editor = createEditor()
+  editor.decoratedRanges = []
+  editor.decoratorState = {}
+  editor.value = [placeholderBlock]
+  editor.blockIndexMap = new Map<string, number>()
+  editor.listIndexMap = new Map<string, number>()
+
+  const instance = withPlugins(withReact(editor), {
     editorActor: config.editorActor,
     relayActor: config.relayActor,
     subscriptions: config.subscriptions,
   })
 
-  KEY_TO_VALUE_ELEMENT.set(instance, {})
   KEY_TO_SLATE_ELEMENT.set(instance, {})
 
-  instance.decoratedRanges = []
-  instance.decoratorState = {}
-
-  const placeholderBlock = createPlaceholderBlock(
-    config.editorActor.getSnapshot().context,
-  )
-  instance.value = [placeholderBlock]
-  instance.blockIndexMap = new Map<string, number>()
-  instance.listIndexMap = new Map<string, number>()
-
   buildIndexMaps(
     {
       schema: config.editorActor.getSnapshot().context.schema,

package/src/editor/plugins/createWithEditableAPI.ts

@@ -4,16 +4,8 @@ import type {
   PortableTextBlock,
   PortableTextChild,
   PortableTextObject,
-  PortableTextTextBlock,
 } from '@sanity/types'
-import {
-  Editor,
-  Node,
-  Range,
-  Element as SlateElement,
-  Text,
-  Transforms,
-} from 'slate'
+import {Editor, Range, Element as SlateElement, Text, Transforms} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import {ReactEditor} from 'slate-react'
 import {buildIndexMaps} from '../../internal-utils/build-index-maps'
@@ -25,7 +17,6 @@ import {
   slateRangeToSelection,
 } from '../../internal-utils/slate-utils'
 import {toSlateRange} from '../../internal-utils/to-slate-range'
-import {fromSlateBlock, fromSlateValue} from '../../internal-utils/values'
 import {getActiveAnnotationsMarks} from '../../selectors/selector.get-active-annotation-marks'
 import {getActiveDecorators} from '../../selectors/selector.get-active-decorators'
 import {getFocusBlock} from '../../selectors/selector.get-focus-block'
@@ -38,9 +29,13 @@ import type {
   EditorSelection,
   PortableTextSlateEditor,
 } from '../../types/editor'
+import {
+  getBlockKeyFromSelectionPoint,
+  getChildKeyFromSelectionPoint,
+} from '../../utils/util.selection-point'
 import type {EditorActor} from '../editor-machine'
 import {getEditorSnapshot} from '../editor-selector'
-import {KEY_TO_VALUE_ELEMENT, SLATE_TO_PORTABLE_TEXT_RANGE} from '../weakMaps'
+import {SLATE_TO_PORTABLE_TEXT_RANGE} from '../weakMaps'
 
 const debug = debugWithName('API:editable')
 
@@ -151,36 +146,43 @@ export function createEditableAPI(
       editor.onChange()
     },
     focusBlock: (): PortableTextBlock | undefined => {
-      if (editor.selection) {
-        const block = Node.descendant(
-          editor,
-          editor.selection.focus.path.slice(0, 1),
-        )
-        if (block) {
-          return fromSlateBlock(
-            block,
-            types.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          )
-        }
+      if (!editor.selection) {
+        return undefined
       }
-      return undefined
+
+      const focusBlockIndex = editor.selection.focus.path.at(0)
+
+      if (focusBlockIndex === undefined) {
+        return undefined
+      }
+
+      return editor.value.at(focusBlockIndex)
     },
     focusChild: (): PortableTextChild | undefined => {
-      if (editor.selection) {
-        const block = Node.descendant(
-          editor,
-          editor.selection.focus.path.slice(0, 1),
-        )
-        if (block && editor.isTextBlock(block)) {
-          const ptBlock = fromSlateBlock(
-            block,
-            types.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          ) as PortableTextTextBlock
-          return ptBlock.children[editor.selection.focus.path[1]]
+      if (!editor.selection) {
+        return undefined
+      }
+
+      const focusBlockIndex = editor.selection.focus.path.at(0)
+      const focusChildIndex = editor.selection.focus.path.at(1)
+
+      const block =
+        focusBlockIndex !== undefined
+          ? editor.value.at(focusBlockIndex)
+          : undefined
+
+      if (!block) {
+        return undefined
+      }
+
+      if (isTextBlock(editorActor.getSnapshot().context, block)) {
+        if (focusChildIndex === undefined) {
+          return undefined
         }
+
+        return block.children.at(focusChildIndex)
       }
+
       return undefined
     },
     insertChild: <TSchemaType extends {name: string}>(
@@ -257,43 +259,38 @@ export function createEditableAPI(
       PortableTextBlock | PortableTextChild | undefined,
       Path | undefined,
     ] => {
-      const slatePath = toSlateRange({
-        context: {
-          schema: editorActor.getSnapshot().context.schema,
-          value: editor.value,
-          selection: {focus: {path, offset: 0}, anchor: {path, offset: 0}},
-        },
-        blockIndexMap: editor.blockIndexMap,
-      })
+      const blockKey = getBlockKeyFromSelectionPoint({path, offset: 0})
 
-      if (slatePath) {
-        const [block, blockPath] = Editor.node(
-          editor,
-          slatePath.focus.path.slice(0, 1),
-        )
-        if (block && blockPath && typeof block._key === 'string') {
-          if (path.length === 1 && slatePath.focus.path.length === 1) {
-            return [
-              fromSlateBlock(block, types.block.name),
-              [{_key: block._key}],
-            ]
-          }
-          const ptBlock = fromSlateBlock(
-            block,
-            types.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          )
-          if (editor.isTextBlock(ptBlock)) {
-            const ptChild = ptBlock.children[slatePath.focus.path[1]]
-            if (ptChild) {
-              return [
-                ptChild,
-                [{_key: block._key}, 'children', {_key: ptChild._key}],
-              ]
-            }
-          }
+      if (!blockKey) {
+        return [undefined, undefined]
+      }
+
+      const blockIndex = editor.blockIndexMap.get(blockKey)
+
+      if (blockIndex === undefined) {
+        return [undefined, undefined]
+      }
+
+      const block = editor.value.at(blockIndex)
+
+      if (!block) {
+        return [undefined, undefined]
+      }
+
+      const childKey = getChildKeyFromSelectionPoint({path, offset: 0})
+
+      if (path.length === 1 && !childKey) {
+        return [block, [{_key: block._key}]]
+      }
+
+      if (isTextBlock(editorActor.getSnapshot().context, block) && childKey) {
+        const child = block.children.find((child) => child._key === childKey)
+
+        if (child) {
+          return [child, [{_key: block._key}, 'children', {_key: child._key}]]
         }
       }
+
       return [undefined, undefined]
     },
     findDOMNode: (
@@ -542,11 +539,7 @@ export function createEditableAPI(
       return ptRange
     },
     getValue: () => {
-      return fromSlateValue(
-        editor.children,
-        types.block.name,
-        KEY_TO_VALUE_ELEMENT.get(editor),
-      )
+      return editor.value
     },
     isCollapsedSelection: () => {
       return !!editor.selection && Range.isCollapsed(editor.selection)

package/src/editor/plugins/createWithPatches.ts

@@ -1,5 +1,6 @@
 import {insert, setIfMissing, unset, type Patch} from '@portabletext/patches'
-import {Editor, type Descendant, type Operation} from 'slate'
+import type {PortableTextBlock} from '@portabletext/schema'
+import {Editor, type Operation} from 'slate'
 import {pluginWithoutHistory} from '../../history/slate-plugin.without-history'
 import {getCurrentUndoStepId} from '../../history/undo-step'
 import {createApplyPatch} from '../../internal-utils/applyPatch'
@@ -14,11 +15,11 @@ import {
   setNodePatch,
   splitNodePatch,
 } from '../../internal-utils/operation-to-patches'
-import {fromSlateValue, isEqualToEmptyEditor} from '../../internal-utils/values'
+import {isEqualToEmptyEditor} from '../../internal-utils/values'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
 import type {RelayActor} from '../relay-machine'
-import {IS_PROCESSING_REMOTE_CHANGES, KEY_TO_VALUE_ELEMENT} from '../weakMaps'
+import {IS_PROCESSING_REMOTE_CHANGES} from '../weakMaps'
 import {withRemoteChanges} from '../withChanges'
 import {isPatching, PATCHING, withoutPatching} from '../withoutPatching'
 
@@ -36,16 +37,16 @@ export function createWithPatches({
   relayActor,
   subscriptions,
 }: Options): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  // The previous editor children are needed to figure out the _key of deleted nodes
-  // The editor.children would no longer contain that information if the node is already deleted.
-  let previousChildren: Descendant[]
+  // The previous editor value are needed to figure out the _key of deleted nodes
+  // The editor.value would no longer contain that information if the node is already deleted.
+  let previousValue: PortableTextBlock[]
 
   const applyPatch = createApplyPatch(editorActor.getSnapshot().context.schema)
 
   return function withPatches(editor: PortableTextSlateEditor) {
     IS_PROCESSING_REMOTE_CHANGES.set(editor, false)
     PATCHING.set(editor, true)
-    previousChildren = [...editor.children]
+    previousValue = [...editor.value]
 
     const {apply} = editor
     let bufferedPatches: Patch[] = []
@@ -106,10 +107,10 @@ export function createWithPatches({
       let patches: Patch[] = []
 
       // Update previous children here before we apply
-      previousChildren = editor.children
+      previousValue = editor.value
 
       const editorWasEmpty = isEqualToEmptyEditor(
-        previousChildren,
+        previousValue,
         editorActor.getSnapshot().context.schema,
       )
 
@@ -117,7 +118,7 @@ export function createWithPatches({
       apply(operation)
 
       const editorIsEmpty = isEqualToEmptyEditor(
-        editor.children,
+        editor.value,
         editorActor.getSnapshot().context.schema,
       )
 
@@ -136,7 +137,7 @@ export function createWithPatches({
         !editorIsEmpty &&
         operation.type !== 'set_selection'
       ) {
-        patches.push(insert(previousChildren, 'before', [0]))
+        patches.push(insert(previousValue, 'before', [0]))
       }
 
       switch (operation.type) {
@@ -147,7 +148,7 @@ export function createWithPatches({
               editorActor.getSnapshot().context.schema,
               editor.children,
               operation,
-              previousChildren,
+              previousValue,
             ),
           ]
           break
@@ -158,7 +159,7 @@ export function createWithPatches({
               editorActor.getSnapshot().context.schema,
               editor.children,
               operation,
-              previousChildren,
+              previousValue,
             ),
           ]
           break
@@ -167,7 +168,7 @@ export function createWithPatches({
             ...patches,
             ...removeNodePatch(
               editorActor.getSnapshot().context.schema,
-              previousChildren,
+              previousValue,
               operation,
             ),
           ]
@@ -179,7 +180,7 @@ export function createWithPatches({
               editorActor.getSnapshot().context.schema,
               editor.children,
               operation,
-              previousChildren,
+              previousValue,
             ),
           ]
           break
@@ -190,7 +191,7 @@ export function createWithPatches({
               editorActor.getSnapshot().context.schema,
               editor.children,
               operation,
-              previousChildren,
+              previousValue,
             ),
           ]
           break
@@ -211,7 +212,7 @@ export function createWithPatches({
               editorActor.getSnapshot().context.schema,
               editor.children,
               operation,
-              previousChildren,
+              previousValue,
             ),
           ]
           break
@@ -220,7 +221,7 @@ export function createWithPatches({
             ...patches,
             ...moveNodePatch(
               editorActor.getSnapshot().context.schema,
-              previousChildren,
+              previousValue,
               operation,
             ),
           ]
@@ -240,11 +241,7 @@ export function createWithPatches({
         patches = [...patches, unset([])]
         relayActor.send({
           type: 'unset',
-          previousValue: fromSlateValue(
-            previousChildren,
-            editorActor.getSnapshot().context.schema.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          ),
+          previousValue,
         })
       }
 

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -30,6 +30,9 @@ export function createWithPortableTextMarkModel(
     const decorators = editorActor
       .getSnapshot()
       .context.schema.decorators.map((t) => t.name)
+    const defaultStyle = editorActor
+      .getSnapshot()
+      .context.schema.styles.at(0)?.name
 
     // Extend Slate's default normalization. Merge spans with same set of .marks when doing merge_node operations, and clean up markDefs / marks
     editor.normalizeNode = (nodeEntry) => {
@@ -74,6 +77,22 @@ export function createWithPortableTextMarkModel(
         return
       }
 
+      /**
+       * Add missing .style to block nodes
+       */
+      if (
+        defaultStyle &&
+        editor.isTextBlock(node) &&
+        typeof node.style === 'undefined'
+      ) {
+        debug('Adding .style to block node')
+
+        withNormalizeNode(editor, () => {
+          Transforms.setNodes(editor, {style: defaultStyle}, {at: path})
+        })
+        return
+      }
+
       /**
        * Add missing .marks to span nodes
        */

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

@@ -357,7 +357,7 @@ function createDecorate(
   slateEditor: PortableTextSlateEditor,
 ) {
   return function decorate([node, path]: NodeEntry): Array<BaseRange> {
-    if (isEqualToEmptyEditor(slateEditor.children, schema)) {
+    if (isEqualToEmptyEditor(slateEditor.value, schema)) {
       return [
         {
           anchor: {

package/src/editor/weakMaps.ts

@@ -7,8 +7,6 @@ export const IS_PROCESSING_REMOTE_CHANGES: WeakMap<Editor, boolean> =
 
 export const KEY_TO_SLATE_ELEMENT: WeakMap<Editor, any | undefined> =
   new WeakMap()
-export const KEY_TO_VALUE_ELEMENT: WeakMap<Editor, any | undefined> =
-  new WeakMap()
 
 // Keep object relation to slate range in the portable-text-range
 export const SLATE_TO_PORTABLE_TEXT_RANGE = new WeakMap<

package/src/history/slate-plugin.history.ts

@@ -8,7 +8,6 @@ import type {Operation} from 'slate'
 import type {EditorActor} from '../editor/editor-machine'
 import {isChangingRemotely} from '../editor/withChanges'
 import {debugWithName} from '../internal-utils/debug'
-import {fromSlateValue} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {getRemotePatches} from './remote-patches'
 import {isRedoing} from './slate-plugin.redoing'
@@ -29,10 +28,7 @@ export function pluginHistory({
 }): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   return (editor: PortableTextSlateEditor) => {
     const remotePatches = getRemotePatches(editor)
-    let previousSnapshot: PortableTextBlock[] | undefined = fromSlateValue(
-      editor.children,
-      editorActor.getSnapshot().context.schema.block.name,
-    )
+    let previousSnapshot: Array<PortableTextBlock> | undefined = editor.value
     let previousUndoStepId = getCurrentUndoStepId(editor)
 
     subscriptions.push(() => {