@portabletext/editor 1.49.7 → 1.49.9

package/src/editor/route-events-to-changes.tsx

@@ -0,0 +1,81 @@
+import {useEffect} from 'react'
+import {useEffectEvent} from 'use-effect-event'
+import type {EditorChange} from '../types/editor'
+import type {EditorActor, InternalEditorEmittedEvent} from './editor-machine'
+
+export function RouteEventsToChanges(props: {
+  editorActor: EditorActor
+  onChange: (change: EditorChange) => void
+}) {
+  // We want to ensure that _when_ `props.onChange` is called, it uses the current value.
+  // But we don't want to have the `useEffect` run setup + teardown + setup every time the prop might change, as that's unnecessary.
+  // So we use our own polyfill that lets us use an upcoming React hook that solves this exact problem.
+  // https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+  const handleChange = useEffectEvent((change: EditorChange) =>
+    props.onChange(change),
+  )
+
+  useEffect(() => {
+    const sub = props.editorActor.on('*', (event) => {
+      const change = eventToChange(event)
+
+      if (change) {
+        handleChange(change)
+      }
+    })
+    return () => {
+      sub.unsubscribe()
+    }
+  }, [props.editorActor])
+
+  return null
+}
+
+export function eventToChange(
+  event: InternalEditorEmittedEvent,
+): EditorChange | undefined {
+  switch (event.type) {
+    case 'blurred': {
+      return {type: 'blur', event: event.event}
+    }
+    case 'patch':
+      return event
+    case 'loading': {
+      return {type: 'loading', isLoading: true}
+    }
+    case 'done loading': {
+      return {type: 'loading', isLoading: false}
+    }
+    case 'focused': {
+      return {type: 'focus', event: event.event}
+    }
+    case 'value changed': {
+      return {type: 'value', value: event.value}
+    }
+    case 'invalid value': {
+      return {
+        type: 'invalidValue',
+        resolution: event.resolution,
+        value: event.value,
+      }
+    }
+    case 'error': {
+      return {
+        ...event,
+        level: 'warning',
+      }
+    }
+    case 'mutation': {
+      return event
+    }
+    case 'ready': {
+      return event
+    }
+    case 'selection': {
+      return event
+    }
+    case 'unset': {
+      return event
+    }
+  }
+}

package/src/editor/sync-machine.ts

@@ -9,10 +9,12 @@ import {
   emit,
   fromCallback,
   not,
+  raise,
   setup,
   type AnyEventObject,
   type CallbackLogicFunction,
 } from 'xstate'
+import type {ActorRefFrom} from 'xstate'
 import {debugWithName} from '../internal-utils/debug'
 import {validateValue} from '../internal-utils/validateValue'
 import {toSlateValue, VOID_CHILD_KEY} from '../internal-utils/values'
@@ -76,6 +78,8 @@ const syncValueCallback: CallbackLogicFunction<
 
 const syncValueLogic = fromCallback(syncValueCallback)
 
+export type SyncActor = ActorRefFrom<typeof syncMachine>
+
 /**
  * Sync value with the editor state
  *
@@ -91,6 +95,7 @@ const syncValueLogic = fromCallback(syncValueCallback)
 export const syncMachine = setup({
   types: {
     context: {} as {
+      initialValue: Array<PortableTextBlock> | undefined
       initialValueSynced: boolean
       isProcessingLocalChanges: boolean
       keyGenerator: () => string
@@ -101,6 +106,7 @@ export const syncMachine = setup({
       previousValue: Array<PortableTextBlock> | undefined
     },
     input: {} as {
+      initialValue: Array<PortableTextBlock> | undefined
       keyGenerator: () => string
       schema: EditorSchema
       readOnly: boolean
@@ -175,6 +181,16 @@ export const syncMachine = setup({
 
       return isBusy
     },
+    'is empty value': ({event}) => {
+      return event.type === 'update value' && event.value === undefined
+    },
+    'is empty array': ({event}) => {
+      return (
+        event.type === 'update value' &&
+        Array.isArray(event.value) &&
+        event.value.length === 0
+      )
+    },
     'is new value': ({context, event}) => {
       return (
         event.type === 'update value' && context.previousValue !== event.value
@@ -194,6 +210,7 @@ export const syncMachine = setup({
 }).createMachine({
   id: 'sync',
   context: ({input}) => ({
+    initialValue: input.initialValue,
     initialValueSynced: false,
     isProcessingLocalChanges: false,
     keyGenerator: input.keyGenerator,
@@ -203,6 +220,11 @@ export const syncMachine = setup({
     pendingValue: undefined,
     previousValue: undefined,
   }),
+  entry: [
+    raise(({context}) => {
+      return {type: 'update value', value: context.initialValue}
+    }),
+  ],
   on: {
     'has pending patches': {
       actions: assign({
@@ -233,6 +255,18 @@ export const syncMachine = setup({
       ],
       on: {
         'update value': [
+          {
+            guard: and(['is empty value', not('initial value synced')]),
+            actions: ['assign initial value synced', 'emit done syncing value'],
+          },
+          {
+            guard: and(['is empty array', not('initial value synced')]),
+            actions: [
+              'assign initial value synced',
+              emit({type: 'value changed', value: []}),
+              'emit done syncing value',
+            ],
+          },
           {
             guard: and(['is busy', 'is new value']),
             target: 'busy',

package/src/editor.ts

@@ -41,7 +41,13 @@ export type EditorConfig = {
 /**
  * @public
  */
-export type EditorEvent = ExternalEditorEvent | ExternalBehaviorEvent
+export type EditorEvent =
+  | ExternalEditorEvent
+  | ExternalBehaviorEvent
+  | {
+      type: 'update value'
+      value: Array<PortableTextBlock> | undefined
+    }
 
 /**
  * @public

package/src/internal-utils/applyPatch.ts

@@ -24,16 +24,16 @@ import type {
 } from '@sanity/types'
 import {
   Element,
+  Node,
   Text,
   Transforms,
   type Descendant,
-  type Node,
   type Path as SlatePath,
 } from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {debugWithName} from './debug'
-import {toSlateValue} from './values'
+import {isEqualToEmptyEditor, toSlateValue} from './values'
 import {KEY_TO_SLATE_ELEMENT} from './weakMaps'
 
 const debug = debugWithName('applyPatches')
@@ -173,9 +173,20 @@ function insertPatch(
     const targetBlockIndex = targetBlockPath[0]
     const normalizedIdx =
       position === 'after' ? targetBlockIndex + 1 : targetBlockIndex
+
     debug(`Inserting blocks at path [${normalizedIdx}]`)
     debugState(editor, 'before')
+
+    const editorWasEmptyBefore = isEqualToEmptyEditor(editor.children, schema)
+
     Transforms.insertNodes(editor, blocksToInsert, {at: [normalizedIdx]})
+
+    if (editorWasEmptyBefore) {
+      Transforms.removeNodes(editor, {
+        at: [position === 'after' ? targetBlockIndex + 1 : targetBlockIndex],
+      })
+    }
+
     debugState(editor, 'after')
     return true
   }
@@ -319,9 +330,15 @@ function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
     debugState(editor, 'before')
     const previousSelection = editor.selection
     Transforms.deselect(editor)
-    editor.children.forEach((_child, i) => {
-      Transforms.removeNodes(editor, {at: [i]})
+
+    const children = Node.children(editor, [], {
+      reverse: true,
     })
+
+    for (const [_, path] of children) {
+      Transforms.removeNodes(editor, {at: path})
+    }
+
     Transforms.insertNodes(editor, editor.pteCreateTextBlock({decorators: []}))
     if (previousSelection) {
       Transforms.select(editor, {

package/src/internal-utils/stop-actor.ts

@@ -0,0 +1,43 @@
+/**
+ * Copy/pasted from https://github.com/statelyai/xstate/blob/main/packages/xstate-react/src/stopRootWithRehydration.ts
+ * and renamed to `stopActor`
+ */
+
+import type {AnyActorRef, Snapshot} from 'xstate'
+
+const forEachActor = (
+  actorRef: AnyActorRef,
+  callback: (ref: AnyActorRef) => void,
+) => {
+  callback(actorRef)
+  const children = actorRef.getSnapshot().children
+  if (children) {
+    Object.values(children).forEach((child) => {
+      forEachActor(child as AnyActorRef, callback)
+    })
+  }
+}
+
+export function stopActor(actorRef: AnyActorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots: Array<[AnyActorRef, Snapshot<unknown>]> = []
+  forEachActor(actorRef, (ref) => {
+    persistedSnapshots.push([ref, ref.getSnapshot()])
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ;(ref as any).observers = new Set()
+  })
+  const systemSnapshot = actorRef.system.getSnapshot?.()
+
+  actorRef.stop()
+  ;(actorRef.system as any)._snapshot = systemSnapshot
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ;(ref as any)._processingStatus = 0
+    ;(ref as any)._snapshot = snapshot
+  })
+}

package/src/internal-utils/text-selection.ts

@@ -98,7 +98,9 @@ export function getTextSelection(
   }
 
   if (!anchor || !focus) {
-    throw new Error(`Unable to find selection for text "${text}"`)
+    throw new Error(
+      `Unable to find selection for text "${text}" in value "${JSON.stringify(value)}"`,
+    )
   }
 
   return {

package/src/internal-utils/use-constant.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+
+type ConstantRef<TConstant> = {constant: TConstant}
+
+export default function useConstant<TConstant>(
+  factory: () => TConstant,
+): TConstant {
+  const ref = React.useRef<ConstantRef<TConstant>>(null)
+
+  if (!ref.current) {
+    ref.current = {constant: factory()}
+  }
+
+  return ref.current.constant
+}

package/src/editor/__tests__/pteWarningsSelfSolving.test.tsx

@@ -1,364 +0,0 @@
-import type {PortableTextBlock} from '@sanity/types'
-import {render, waitFor} from '@testing-library/react'
-import {createRef, type RefObject} from 'react'
-import {describe, expect, it, vi} from 'vitest'
-import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
-import {PortableTextEditor} from '../PortableTextEditor'
-import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
-
-describe('when PTE would display warnings, instead it self solves', () => {
-  it('when child at index is missing required _key in block with _key', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const initialValue = [
-      {
-        _key: 'abc',
-        _type: 'myTestBlockType',
-        children: [
-          {
-            _type: 'span',
-            marks: [],
-            text: 'Hello with a new key',
-          },
-        ],
-        markDefs: [],
-        style: 'normal',
-      },
-    ]
-
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({
-        type: 'value',
-        value: initialValue,
-      })
-      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-    })
-    await waitFor(() => {
-      if (editorRef.current) {
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {
-            _key: 'abc',
-            _type: 'myTestBlockType',
-            children: [
-              {
-                _key: 'k3',
-                _type: 'span',
-                text: 'Hello with a new key',
-                marks: [],
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-  })
-
-  it('self-solves missing .markDefs', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const initialValue = [
-      {
-        _key: 'abc',
-        _type: 'myTestBlockType',
-        children: [
-          {
-            _key: 'def',
-            _type: 'span',
-            marks: [],
-            text: 'No markDefs',
-          },
-        ],
-        style: 'normal',
-      },
-    ]
-
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({
-        type: 'value',
-        value: initialValue,
-      })
-      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-    })
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.focus(editorRef.current)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {
-            _key: 'abc',
-            _type: 'myTestBlockType',
-            children: [
-              {
-                _key: 'def',
-                _type: 'span',
-                text: 'No markDefs',
-                marks: [],
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-  })
-
-  it('adds missing .children', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const initialValue = [
-      {
-        _key: 'abc',
-        _type: 'myTestBlockType',
-        style: 'normal',
-        markDefs: [],
-      },
-      {
-        _key: 'def',
-        _type: 'myTestBlockType',
-        style: 'normal',
-        children: [],
-        markDefs: [],
-      },
-    ]
-
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({
-        type: 'value',
-        value: initialValue,
-      })
-      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-    })
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.focus(editorRef.current)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {
-            _key: 'abc',
-            _type: 'myTestBlockType',
-            children: [
-              {
-                _key: 'k3',
-                _type: 'span',
-                text: '',
-                marks: [],
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-          {
-            _key: 'def',
-            _type: 'myTestBlockType',
-            children: [
-              {
-                _key: 'k5',
-                _type: 'span',
-                text: '',
-                marks: [],
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-  })
-
-  it('removes orphaned marks', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const initialValue = [
-      {
-        _key: 'abc',
-        _type: 'myTestBlockType',
-        style: 'normal',
-        markDefs: [],
-        children: [
-          {
-            _key: 'def',
-            _type: 'span',
-            marks: ['ghi'],
-            text: 'Hello',
-          },
-        ],
-      },
-    ]
-
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({
-        type: 'value',
-        value: initialValue,
-      })
-      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-    })
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.focus(editorRef.current)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {
-            _key: 'abc',
-            _type: 'myTestBlockType',
-            children: [
-              {
-                _key: 'def',
-                _type: 'span',
-                text: 'Hello',
-                marks: [],
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-  })
-
-  it('removes orphaned marksDefs', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const initialValue = [
-      {
-        _key: 'abc',
-        _type: 'myTestBlockType',
-        style: 'normal',
-        markDefs: [
-          {
-            _key: 'ghi',
-            _type: 'link',
-            href: 'https://sanity.io',
-          },
-        ],
-        children: [
-          {
-            _key: 'def',
-            _type: 'span',
-            marks: [],
-            text: 'Hello',
-          },
-        ],
-      },
-    ]
-
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({
-        type: 'value',
-        value: initialValue,
-      })
-      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-    })
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.focus(editorRef.current)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {
-            _key: 'abc',
-            _type: 'myTestBlockType',
-            children: [
-              {
-                _key: 'def',
-                _type: 'span',
-                text: 'Hello',
-                marks: [],
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-  })
-
-  it('allows empty array of blocks', async () => {
-    const editorRef: RefObject<PortableTextEditor | null> = createRef()
-    const initialValue = [] as PortableTextBlock[]
-
-    const onChange = vi.fn()
-    render(
-      <PortableTextEditorTester
-        keyGenerator={createTestKeyGenerator()}
-        onChange={onChange}
-        ref={editorRef}
-        schemaType={schemaType}
-        value={initialValue}
-      />,
-    )
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({
-        type: 'value',
-        value: initialValue,
-      })
-      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-    })
-    await waitFor(() => {
-      if (editorRef.current) {
-        PortableTextEditor.focus(editorRef.current)
-        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {
-            _key: 'k2',
-            _type: 'myTestBlockType',
-            children: [{_key: 'k3', _type: 'span', marks: [], text: ''}],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      }
-    })
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith({
-        type: 'value',
-        value: initialValue,
-      })
-      expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-    })
-  })
-})