@portabletext/editor 1.1.1 → 1.1.2

package/src/editor/__tests__/self-solving.test.tsx

@@ -0,0 +1,176 @@
+import type {JSONValue, Patch} from '@portabletext/patches'
+import {Schema} from '@sanity/schema'
+import type {PortableTextBlock, PortableTextSpan} from '@sanity/types'
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type ComponentProps, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
+import {getTextSelection} from '../../../e2e-tests/__tests__/gherkin-step-helpers'
+import {PortableTextEditable} from '../Editable'
+import {PortableTextEditor} from '../PortableTextEditor'
+
+const schema = Schema.compile({
+  types: [
+    {
+      name: 'portable-text',
+      type: 'array',
+      of: [{type: 'block'}, {type: 'image'}],
+    },
+    {name: 'image', type: 'object'},
+  ],
+}).get('portable-text')
+type OnChange = ComponentProps<typeof PortableTextEditor>['onChange']
+
+function block(
+  props?: Partial<Omit<PortableTextBlock, '_type'>>,
+): PortableTextBlock {
+  return {
+    _type: 'block',
+    ...(props ?? {}),
+  } as PortableTextBlock
+}
+
+function span(
+  props?: Partial<Omit<PortableTextSpan, '_type'>>,
+): PortableTextSpan {
+  return {
+    _type: 'span',
+    ...(props ?? {}),
+  } as PortableTextSpan
+}
+
+describe('Feature: Self-solving', () => {
+  it('Scenario: Missing .markDefs and .marks are added after the editor is made dirty', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const onChange = vi.fn<OnChange>()
+    const initialValue = [
+      block({
+        _key: 'b1',
+        children: [
+          span({
+            _key: 's1',
+            text: 'foo',
+          }),
+        ],
+        style: 'normal',
+      }),
+    ]
+    const spanPatch: Patch = {
+      type: 'set',
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}, 'marks'],
+      value: [],
+      origin: 'local',
+    }
+    const blockPatch: Patch = {
+      type: 'set',
+      path: [{_key: 'b1'}],
+      value: block({
+        _key: 'b1',
+        children: [
+          span({
+            _key: 's1',
+            text: 'foo',
+            marks: [],
+          }),
+        ],
+        style: 'normal',
+        markDefs: [],
+      }) as JSONValue,
+      origin: 'local',
+    }
+    const strongPatch: Patch = {
+      type: 'set',
+      path: [{_key: 'b1'}, 'children', {_key: 's1'}, 'marks'],
+      value: ['strong'],
+      origin: 'local',
+    }
+
+    render(
+      <PortableTextEditor
+        ref={editorRef}
+        schemaType={schema}
+        value={initialValue}
+        onChange={onChange}
+      >
+        <PortableTextEditable />
+      </PortableTextEditor>,
+    )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenNthCalledWith(1, {
+          type: 'value',
+          value: initialValue,
+        })
+        expect(onChange).toHaveBeenNthCalledWith(2, {
+          type: 'ready',
+        })
+      }
+    })
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.select(
+          editorRef.current,
+          getTextSelection(initialValue, 'foo'),
+        )
+        PortableTextEditor.toggleMark(editorRef.current, 'strong')
+      }
+    })
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenNthCalledWith(3, {
+          type: 'selection',
+          selection: {
+            ...getTextSelection(initialValue, 'foo'),
+            backward: false,
+          },
+        })
+        expect(onChange).toHaveBeenNthCalledWith(4, {
+          type: 'patch',
+          patch: spanPatch,
+        })
+        expect(onChange).toHaveBeenNthCalledWith(5, {
+          type: 'patch',
+          patch: blockPatch,
+        })
+        expect(onChange).toHaveBeenNthCalledWith(6, {
+          type: 'patch',
+          patch: strongPatch,
+        })
+        expect(onChange).toHaveBeenNthCalledWith(7, {
+          type: 'selection',
+          selection: {
+            ...getTextSelection(initialValue, 'foo'),
+            backward: false,
+          },
+        })
+        expect(onChange).toHaveBeenNthCalledWith(8, {
+          type: 'selection',
+          selection: {
+            ...getTextSelection(initialValue, 'foo'),
+            backward: false,
+          },
+        })
+        expect(onChange).toHaveBeenNthCalledWith(9, {
+          type: 'mutation',
+          patches: [spanPatch, blockPatch, strongPatch],
+          snapshot: [
+            block({
+              _key: 'b1',
+              children: [
+                span({
+                  _key: 's1',
+                  text: 'foo',
+                  marks: ['strong'],
+                }),
+              ],
+              style: 'normal',
+              markDefs: [],
+            }),
+          ],
+        })
+      }
+    })
+  })
+})

package/src/editor/components/Leaf.tsx

@@ -141,28 +141,30 @@ export const Leaf = (props: LeafProps) => {
     if (!shouldTrackSelectionAndFocus) {
       return undefined
     }
-    const sub = portableTextEditor.change$.subscribe((next) => {
-      if (next.type === 'blur') {
-        setFocused(false)
-        setSelected(false)
-        return
-      }
-      if (next.type === 'focus') {
-        const sel = PortableTextEditor.getSelection(portableTextEditor)
-        if (
-          sel &&
-          isEqual(sel.focus.path, path) &&
-          PortableTextEditor.isCollapsedSelection(portableTextEditor)
-        ) {
-          setFocused(true)
-        }
-        setSelectedFromRange()
-        return
+
+    const onBlur = portableTextEditor.editorActor.on('blur', () => {
+      setFocused(false)
+      setSelected(false)
+    })
+
+    const onFocus = portableTextEditor.editorActor.on('focus', () => {
+      const sel = PortableTextEditor.getSelection(portableTextEditor)
+      if (
+        sel &&
+        isEqual(sel.focus.path, path) &&
+        PortableTextEditor.isCollapsedSelection(portableTextEditor)
+      ) {
+        setFocused(true)
       }
-      if (next.type === 'selection') {
+      setSelectedFromRange()
+    })
+
+    const onSelection = portableTextEditor.editorActor.on(
+      'selection',
+      (event) => {
         if (
-          next.selection &&
-          isEqual(next.selection.focus.path, path) &&
+          event.selection &&
+          isEqual(event.selection.focus.path, path) &&
           PortableTextEditor.isCollapsedSelection(portableTextEditor)
         ) {
           setFocused(true)
@@ -170,10 +172,13 @@ export const Leaf = (props: LeafProps) => {
           setFocused(false)
         }
         setSelectedFromRange()
-      }
-    })
+      },
+    )
+
     return () => {
-      sub.unsubscribe()
+      onBlur.unsubscribe()
+      onFocus.unsubscribe()
+      onSelection.unsubscribe()
     }
   }, [
     path,

package/src/editor/components/Synchronizer.tsx

@@ -4,9 +4,10 @@ import {throttle} from 'lodash'
 import {useCallback, useEffect, useMemo, useRef} from 'react'
 import {Editor} from 'slate'
 import {useSlate} from 'slate-react'
-import type {EditorChange, EditorChanges} from '../../types/editor'
+import type {EditorChange} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {IS_PROCESSING_LOCAL_CHANGES} from '../../utils/weakMaps'
+import type {EditorActor} from '../editor-machine'
 import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
 import {usePortableTextEditorKeyGenerator} from '../hooks/usePortableTextEditorKeyGenerator'
 import {usePortableTextEditorReadOnlyStatus} from '../hooks/usePortableTextReadOnly'
@@ -23,7 +24,7 @@ const FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === 'test' ? 500 : 1000
  * @internal
  */
 export interface SynchronizerProps {
-  change$: EditorChanges
+  editorActor: EditorActor
   getValue: () => Array<PortableTextBlock> | undefined
   onChange: (change: EditorChange) => void
   value: Array<PortableTextBlock> | undefined
@@ -37,12 +38,12 @@ export function Synchronizer(props: SynchronizerProps) {
   const portableTextEditor = usePortableTextEditor()
   const keyGenerator = usePortableTextEditorKeyGenerator()
   const readOnly = usePortableTextEditorReadOnlyStatus()
-  const {change$, getValue, onChange, value} = props
+  const {editorActor, getValue, onChange, value} = props
   const pendingPatches = useRef<Patch[]>([])
 
   const syncValue = useSyncValue({
+    editorActor,
     keyGenerator,
-    onChange,
     portableTextEditor,
     readOnly,
   })
@@ -60,7 +61,7 @@ export function Synchronizer(props: SynchronizerProps) {
         debug(`Patches:\n${JSON.stringify(pendingPatches.current, null, 2)}`)
       }
       const snapshot = getValue()
-      change$.next({
+      editorActor.send({
         type: 'mutation',
         patches: pendingPatches.current,
         snapshot,
@@ -68,7 +69,7 @@ export function Synchronizer(props: SynchronizerProps) {
       pendingPatches.current = []
     }
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, false)
-  }, [slateEditor, getValue, change$])
+  }, [editorActor, slateEditor, getValue])
 
   const onFlushPendingPatchesThrottled = useMemo(() => {
     return throttle(
@@ -99,50 +100,78 @@ export function Synchronizer(props: SynchronizerProps) {
 
   // Subscribe to, and handle changes from the editor
   useEffect(() => {
-    debug('Subscribing to editor changes$')
-    const sub = change$.subscribe((next: EditorChange): void => {
-      switch (next.type) {
+    debug('Subscribing to editor changes')
+    const sub = editorActor.on('*', (event) => {
+      switch (event.type) {
         case 'patch':
           IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, true)
-          pendingPatches.current.push(next.patch)
+          pendingPatches.current.push(event.patch)
           onFlushPendingPatchesThrottled()
-          onChange(next)
+          onChange(event)
           break
+        case 'loading': {
+          onChange({type: 'loading', isLoading: true})
+          break
+        }
+        case 'done loading': {
+          onChange({type: 'loading', isLoading: false})
+          break
+        }
+        case 'offline': {
+          onChange({type: 'connection', value: 'offline'})
+          break
+        }
+        case 'online': {
+          onChange({type: 'connection', value: 'online'})
+          break
+        }
+        case 'value changed': {
+          onChange({type: 'value', value: event.value})
+          break
+        }
+        case 'invalid value': {
+          onChange({
+            type: 'invalidValue',
+            resolution: event.resolution,
+            value: event.value,
+          })
+          break
+        }
+        case 'error': {
+          onChange({
+            ...event,
+            level: 'warning',
+          })
+          break
+        }
         default:
-          onChange(next)
+          onChange(event)
       }
     })
     return () => {
-      debug('Unsubscribing to changes$')
+      debug('Unsubscribing to changes')
       sub.unsubscribe()
     }
-  }, [change$, onChange, onFlushPendingPatchesThrottled, slateEditor])
+  }, [editorActor, onFlushPendingPatchesThrottled, slateEditor])
 
   // Sync the value when going online
   const handleOnline = useCallback(() => {
     debug('Editor is online, syncing from props.value')
-    change$.next({type: 'connection', value: 'online'})
     syncValue(value)
-  }, [change$, syncValue, value])
-
-  const handleOffline = useCallback(() => {
-    debug('Editor is offline')
-    change$.next({type: 'connection', value: 'offline'})
-  }, [change$])
+  }, [syncValue, value])
 
   // Notify about window online and offline status changes
   useEffect(() => {
-    if (portableTextEditor.props.patches$) {
-      window.addEventListener('online', handleOnline)
-      window.addEventListener('offline', handleOffline)
-    }
-    return () => {
+    const subscription = editorActor.on('online', () => {
       if (portableTextEditor.props.patches$) {
-        window.removeEventListener('online', handleOnline)
-        window.removeEventListener('offline', handleOffline)
+        handleOnline()
       }
+    })
+
+    return () => {
+      subscription.unsubscribe()
     }
-  })
+  }, [editorActor])
 
   // This hook must be set up after setting up the subscription above, or it will not pick up validation errors from the useSyncValue hook.
   // This will cause the editor to not be able to signal a validation error and offer invalid value resolution of the initial value.
@@ -152,11 +181,10 @@ export function Synchronizer(props: SynchronizerProps) {
     syncValue(value)
     // Signal that we have our first value, and are ready to roll.
     if (isInitialValueFromProps.current) {
-      change$.next({type: 'loading', isLoading: false})
-      change$.next({type: 'ready'})
+      editorActor.send({type: 'ready'})
       isInitialValueFromProps.current = false
     }
-  }, [change$, syncValue, value])
+  }, [editorActor, syncValue, value])
 
   return null
 }

package/src/editor/editor-machine.ts

@@ -0,0 +1,195 @@
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@sanity/types'
+import type {FocusEvent} from 'react'
+import {
+  assertEvent,
+  assign,
+  emit,
+  enqueueActions,
+  fromCallback,
+  setup,
+  type ActorRefFrom,
+} from 'xstate'
+import type {EditorSelection, InvalidValueResolution} from '../types/editor'
+
+/**
+ * @internal
+ */
+export type EditorActor = ActorRefFrom<typeof editorMachine>
+
+const networkLogic = fromCallback(({sendBack}) => {
+  const onlineHandler = () => {
+    sendBack({type: 'online'})
+  }
+  const offlineHandler = () => {
+    sendBack({type: 'offline'})
+  }
+
+  window.addEventListener('online', onlineHandler)
+  window.addEventListener('offline', offlineHandler)
+
+  return () => {
+    window.removeEventListener('online', onlineHandler)
+    window.removeEventListener('offline', offlineHandler)
+  }
+})
+
+/**
+ * @internal
+ */
+export type PatchEvent = {type: 'patch'; patch: Patch}
+
+/**
+ * @internal
+ */
+export type MutationEvent = {
+  type: 'mutation'
+  patches: Array<Patch>
+  snapshot: Array<PortableTextBlock> | undefined
+}
+
+type EditorEvent =
+  | {type: 'normalizing'}
+  | {type: 'done normalizing'}
+  | EditorEmittedEvent
+
+type EditorEmittedEvent =
+  | {type: 'ready'}
+  | PatchEvent
+  | MutationEvent
+  | {
+      type: 'unset'
+      previousValue: Array<PortableTextBlock>
+    }
+  | {
+      type: 'value changed'
+      value: Array<PortableTextBlock> | undefined
+    }
+  | {
+      type: 'invalid value'
+      resolution: InvalidValueResolution | null
+      value: Array<PortableTextBlock> | undefined
+    }
+  | {
+      type: 'error'
+      name: string
+      description: string
+      data: unknown
+    }
+  | {type: 'selection'; selection: EditorSelection}
+  | {type: 'blur'; event: FocusEvent<HTMLDivElement, Element>}
+  | {type: 'focus'; event: FocusEvent<HTMLDivElement, Element>}
+  | {type: 'online'}
+  | {type: 'offline'}
+  | {type: 'loading'}
+  | {type: 'done loading'}
+
+/**
+ * @internal
+ */
+export const editorMachine = setup({
+  types: {
+    context: {} as {
+      pendingEvents: Array<PatchEvent | MutationEvent>
+    },
+    events: {} as EditorEvent,
+    emitted: {} as EditorEmittedEvent,
+  },
+  actions: {
+    'emit patch event': emit(({event}) => {
+      assertEvent(event, 'patch')
+      return event
+    }),
+    'emit mutation event': emit(({event}) => {
+      assertEvent(event, 'mutation')
+      return event
+    }),
+    'defer event': assign({
+      pendingEvents: ({context, event}) => {
+        assertEvent(event, ['patch', 'mutation'])
+        return [...context.pendingEvents, event]
+      },
+    }),
+    'emit pending events': enqueueActions(({context, enqueue}) => {
+      for (const event of context.pendingEvents) {
+        enqueue(emit(event))
+      }
+    }),
+    'clear pending events': assign({
+      pendingEvents: [],
+    }),
+  },
+  actors: {
+    networkLogic,
+  },
+}).createMachine({
+  id: 'editor',
+  context: {
+    pendingEvents: [],
+  },
+  invoke: {
+    id: 'networkLogic',
+    src: 'networkLogic',
+  },
+  on: {
+    'ready': {actions: emit(({event}) => event)},
+    'unset': {actions: emit(({event}) => event)},
+    'value changed': {actions: emit(({event}) => event)},
+    'invalid value': {actions: emit(({event}) => event)},
+    'error': {actions: emit(({event}) => event)},
+    'selection': {actions: emit(({event}) => event)},
+    'blur': {actions: emit(({event}) => event)},
+    'focus': {actions: emit(({event}) => event)},
+    'online': {actions: emit({type: 'online'})},
+    'offline': {actions: emit({type: 'offline'})},
+    'loading': {actions: emit({type: 'loading'})},
+    'done loading': {actions: emit({type: 'done loading'})},
+  },
+  initial: 'pristine',
+  states: {
+    pristine: {
+      initial: 'idle',
+      states: {
+        idle: {
+          on: {
+            normalizing: {
+              target: 'normalizing',
+            },
+            patch: {
+              actions: 'defer event',
+              target: '#editor.dirty',
+            },
+            mutation: {
+              actions: 'defer event',
+              target: '#editor.dirty',
+            },
+          },
+        },
+        normalizing: {
+          on: {
+            'done normalizing': {
+              target: 'idle',
+            },
+            'patch': {
+              actions: 'defer event',
+            },
+            'mutation': {
+              actions: 'defer event',
+            },
+          },
+        },
+      },
+    },
+    dirty: {
+      entry: ['emit pending events', 'clear pending events'],
+      on: {
+        patch: {
+          actions: 'emit patch event',
+        },
+        mutation: {
+          actions: 'emit mutation event',
+        },
+      },
+    },
+  },
+})

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react'
 import type {EditorChanges, EditorSelection} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
+import type {EditorActor} from '../editor-machine'
 
 /**
  * A React context for sharing the editor selection.
@@ -36,30 +37,27 @@ const debugVerbose = debug.enabled && false
  */
 export function PortableTextEditorSelectionProvider(
   props: React.PropsWithChildren<{
-    change$: EditorChanges
+    editorActor: EditorActor
   }>,
 ) {
-  const {change$} = props
   const [selection, setSelection] = useState<EditorSelection>(null)
 
   // Subscribe to, and handle changes from the editor
   useEffect(() => {
-    debug('Subscribing to selection changes$')
-    const subscription = change$.subscribe((next): void => {
-      if (next.type === 'selection') {
-        // Set the selection state in a transition, we don't need the state immediately.
-        startTransition(() => {
-          if (debugVerbose) debug('Setting selection')
-          setSelection(next.selection)
-        })
-      }
+    debug('Subscribing to selection changes')
+    const subscription = props.editorActor.on('selection', (event) => {
+      // Set the selection state in a transition, we don't need the state immediately.
+      startTransition(() => {
+        if (debugVerbose) debug('Setting selection')
+        setSelection(event.selection)
+      })
     })
 
     return () => {
-      debug('Unsubscribing to selection changes$')
+      debug('Unsubscribing to selection changes')
       subscription.unsubscribe()
     }
-  }, [change$])
+  }, [props.editorActor])
 
   return (
     <PortableTextEditorSelectionContext.Provider value={selection}>