@portabletext/editor 1.1.0 → 1.1.2

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/usePortableTextEditor.ts

@@ -1,5 +1,5 @@
 import {createContext, useContext} from 'react'
-import {type PortableTextEditor} from '../PortableTextEditor'
+import type {PortableTextEditor} from '../PortableTextEditor'
 
 /**
  * A React context for sharing the editor object.

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -5,8 +5,9 @@ import {
   useEffect,
   useState,
 } from 'react'
-import {type EditorChanges, type EditorSelection} from '../../types/editor'
+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}>

package/src/editor/hooks/useSyncValue.test.tsx

@@ -1,6 +1,6 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {
   PortableTextEditorTester,
   schemaType,
@@ -27,7 +27,7 @@ const initialValue = [
 describe('useSyncValue', () => {
   it('updates span text', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const syncedValue = [
       {
         _key: '77071c3af231',
@@ -70,7 +70,7 @@ describe('useSyncValue', () => {
   })
   it('replaces span nodes with different keys inside the same children array', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const syncedValue = [
       {
         _key: '77071c3af231',
@@ -107,19 +107,19 @@ describe('useSyncValue', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current))
           .toMatchInlineSnapshot(`
-          Array [
-            Object {
+          [
+            {
               "_key": "77071c3af231",
               "_type": "myTestBlockType",
-              "children": Array [
-                Object {
+              "children": [
+                {
                   "_key": "c001f0e92c1f0__NEW_KEY_YA!",
                   "_type": "span",
-                  "marks": Array [],
+                  "marks": [],
                   "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
                 },
               ],
-              "markDefs": Array [],
+              "markDefs": [],
               "style": "normal",
             },
           ]

package/src/editor/hooks/useSyncValue.ts

@@ -1,13 +1,9 @@
-/* eslint-disable max-nested-callbacks */
-import {type PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import {debounce, isEqual} from 'lodash'
 import {useCallback, useMemo, useRef} from 'react'
 import {Editor, Text, Transforms, type Descendant, type Node} from 'slate'
 import {useSlate} from 'slate-react'
-import {
-  type EditorChange,
-  type PortableTextSlateEditor,
-} from '../../types/editor'
+import type {PortableTextSlateEditor} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {validateValue} from '../../utils/validateValue'
 import {toSlateValue, VOID_CHILD_KEY} from '../../utils/values'
@@ -17,8 +13,9 @@ import {
   withRemoteChanges,
 } from '../../utils/withChanges'
 import {withoutPatching} from '../../utils/withoutPatching'
+import type {EditorActor} from '../editor-machine'
 import {withoutSaving} from '../plugins/createWithUndoRedo'
-import {type PortableTextEditor} from '../PortableTextEditor'
+import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('hook:useSyncValue')
 
@@ -26,8 +23,8 @@ const debug = debugWithName('hook:useSyncValue')
  * @internal
  */
 export interface UseSyncValueProps {
+  editorActor: EditorActor
   keyGenerator: () => string
-  onChange: (change: EditorChange) => void
   portableTextEditor: PortableTextEditor
   readOnly: boolean
 }
@@ -55,8 +52,8 @@ export function useSyncValue(
   value: PortableTextBlock[] | undefined,
   userCallbackFn?: () => void,
 ) => void {
-  const {portableTextEditor, readOnly, keyGenerator} = props
-  const {change$, schemaTypes} = portableTextEditor
+  const {editorActor, portableTextEditor, readOnly, keyGenerator} = props
+  const {schemaTypes} = portableTextEditor
   const previousValue = useRef<PortableTextBlock[] | undefined>()
   const slateEditor = useSlate()
   const updateValueFunctionRef =
@@ -184,7 +181,7 @@ export function useSyncValue(
                             `${validation.resolution.action} for block with _key '${validationValue[0]._key}'. ${validation.resolution?.description}`,
                           )
                           validation.resolution.patches.forEach((patch) => {
-                            change$.next({type: 'patch', patch})
+                            editorActor.send({type: 'patch', patch})
                           })
                         }
                       }
@@ -212,8 +209,8 @@ export function useSyncValue(
                         }
                         isChanged = true
                       } else {
-                        change$.next({
-                          type: 'invalidValue',
+                        editorActor.send({
+                          type: 'invalid value',
                           resolution: validation.resolution,
                           value,
                         })
@@ -241,8 +238,8 @@ export function useSyncValue(
                         })
                       } else {
                         debug('Invalid', validation)
-                        change$.next({
-                          type: 'invalidValue',
+                        editorActor.send({
+                          type: 'invalid value',
                           resolution: validation.resolution,
                           value,
                         })
@@ -267,8 +264,8 @@ export function useSyncValue(
           slateEditor.onChange()
         } catch (err) {
           console.error(err)
-          change$.next({
-            type: 'invalidValue',
+          editorActor.send({
+            type: 'invalid value',
             resolution: null,
             value,
           })
@@ -281,7 +278,7 @@ export function useSyncValue(
           })
           slateEditor.onChange()
         }
-        change$.next({type: 'value', value})
+        editorActor.send({type: 'value changed', value})
       } else {
         debug('Server value and editor value is equal, no need to sync.')
       }
@@ -290,7 +287,7 @@ export function useSyncValue(
     updateValueFunctionRef.current = updateFunction
     return updateFunction
   }, [
-    change$,
+    editorActor,
     keyGenerator,
     portableTextEditor,
     readOnly,

package/src/editor/nodes/DefaultAnnotation.tsx

@@ -1,4 +1,4 @@
-import {type PortableTextObject} from '@sanity/types'
+import type {PortableTextObject} from '@sanity/types'
 import {useCallback, type ReactNode} from 'react'
 
 type Props = {
@@ -7,7 +7,6 @@ type Props = {
 }
 export function DefaultAnnotation(props: Props) {
   const handleClick = useCallback(
-    // eslint-disable-next-line no-alert
     () => alert(JSON.stringify(props.annotation)),
     [props.annotation],
   )

package/src/editor/nodes/DefaultObject.tsx

@@ -1,4 +1,4 @@
-import {type PortableTextBlock, type PortableTextChild} from '@sanity/types'
+import type {PortableTextBlock, PortableTextChild} from '@sanity/types'
 
 type Props = {
   value: PortableTextBlock | PortableTextChild

package/src/editor/plugins/__tests__/createWithInsertData.test.tsx

@@ -1,6 +1,6 @@
-import {describe, expect, it} from '@jest/globals'
 import {isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
-import {type Descendant} from 'slate'
+import type {Descendant} from 'slate'
+import {describe, expect, it} from 'vitest'
 import {exportedForTesting} from '../createWithInsertData'
 
 const initialValue = [
@@ -60,14 +60,12 @@ describe('plugin: createWithInsertData _regenerateKeys', () => {
             name: 'color',
             jsonType: 'object',
             fields: [],
-            // eslint-disable-next-line camelcase
             __experimental_search: [],
           },
           {
             name: 'link',
             jsonType: 'object',
             fields: [],
-            // eslint-disable-next-line camelcase
             __experimental_search: [],
           },
         ],
@@ -155,7 +153,6 @@ describe('plugin: createWithInsertData _regenerateKeys', () => {
             name: 'color',
             jsonType: 'object',
             fields: [],
-            // eslint-disable-next-line camelcase
             __experimental_search: [],
           },
         ],

package/src/editor/plugins/__tests__/withEditableAPIDelete.test.tsx

@@ -1,6 +1,6 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {
   PortableTextEditorTester,
   schemaType,
@@ -46,7 +46,7 @@ const initialSelection = {
 describe('plugin:withEditableAPI: .delete()', () => {
   it('deletes block', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -77,19 +77,19 @@ describe('plugin:withEditableAPI: .delete()', () => {
         )
         expect(PortableTextEditor.getValue(editorRef.current))
           .toMatchInlineSnapshot(`
-          Array [
-            Object {
+          [
+            {
               "_key": "a",
               "_type": "myTestBlockType",
-              "children": Array [
-                Object {
+              "children": [
+                {
                   "_key": "a1",
                   "_type": "span",
-                  "marks": Array [],
+                  "marks": [],
                   "text": "Block A",
                 },
               ],
-              "markDefs": Array [],
+              "markDefs": [],
               "style": "normal",
             },
           ]
@@ -100,7 +100,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
 
   it('deletes all the blocks, but leaves a placeholder block', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -135,19 +135,19 @@ describe('plugin:withEditableAPI: .delete()', () => {
         // New keys here confirms that a placeholder block has been created
         expect(PortableTextEditor.getValue(editorRef.current))
           .toMatchInlineSnapshot(`
-          Array [
-            Object {
+          [
+            {
               "_key": "1",
               "_type": "myTestBlockType",
-              "children": Array [
-                Object {
+              "children": [
+                {
                   "_key": "2",
                   "_type": "span",
-                  "marks": Array [],
+                  "marks": [],
                   "text": "",
                 },
               ],
-              "markDefs": Array [],
+              "markDefs": [],
               "style": "normal",
             },
           ]
@@ -158,7 +158,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
 
   it('deletes children', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     render(
       <PortableTextEditorTester
@@ -202,33 +202,33 @@ describe('plugin:withEditableAPI: .delete()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current))
           .toMatchInlineSnapshot(`
-                  Array [
-                    Object {
+                  [
+                    {
                       "_key": "a",
                       "_type": "myTestBlockType",
-                      "children": Array [
-                        Object {
+                      "children": [
+                        {
                           "_key": "a1",
                           "_type": "span",
-                          "marks": Array [],
+                          "marks": [],
                           "text": "Block A",
                         },
                       ],
-                      "markDefs": Array [],
+                      "markDefs": [],
                       "style": "normal",
                     },
-                    Object {
+                    {
                       "_key": "b",
                       "_type": "myTestBlockType",
-                      "children": Array [
-                        Object {
+                      "children": [
+                        {
                           "_key": "1",
                           "_type": "span",
-                          "marks": Array [],
+                          "marks": [],
                           "text": "",
                         },
                       ],
-                      "markDefs": Array [],
+                      "markDefs": [],
                       "style": "normal",
                     },
                   ]
@@ -239,7 +239,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
 
   it('deletes selected', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
 
     render(
       <PortableTextEditorTester