@portabletext/editor 1.1.0 → 1.1.2

package/src/editor/__tests__/insert-block.test.tsx

@@ -1,9 +1,9 @@
-import {describe, expect, jest, test} from '@jest/globals'
 import {Schema} from '@sanity/schema'
-import {type PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
-import {type EditorChange, type EditorSelection} from '../../types/editor'
+import {describe, expect, test, vi} from 'vitest'
+import type {EditorChange, EditorSelection} from '../../types/editor'
 import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
 
@@ -35,7 +35,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
       style: 'normal',
     }
     const initialValue: Array<PortableTextBlock> = [emptyTextBlock]
-    const onChange: (change: EditorChange) => void = jest.fn()
+    const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
       <PortableTextEditor
@@ -104,7 +104,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
       style: 'normal',
     }
     const initialValue: Array<PortableTextBlock> = [nonEmptyTextBlock]
-    const onChange: (change: EditorChange) => void = jest.fn()
+    const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
       <PortableTextEditor
@@ -177,7 +177,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
       _type: 'image',
     }
     const initialValue: Array<PortableTextBlock> = [emptyTextBlock, imageBlock]
-    const onChange: (change: EditorChange) => void = jest.fn()
+    const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
       <PortableTextEditor

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

@@ -1,7 +1,7 @@
-import {describe, expect, it, jest} from '@jest/globals'
-import {type PortableTextBlock} from '@sanity/types'
+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 {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -24,7 +24,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -80,7 +80,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -137,7 +137,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -209,7 +209,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -273,7 +273,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
       },
     ]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -316,7 +316,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
     const initialValue = [] as PortableTextBlock[]
 
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}

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/Element.tsx

@@ -1,10 +1,8 @@
-/* eslint-disable complexity */
-/* eslint-disable max-statements */
-import {
-  type Path,
-  type PortableTextChild,
-  type PortableTextObject,
-  type PortableTextTextBlock,
+import type {
+  Path,
+  PortableTextChild,
+  PortableTextObject,
+  PortableTextTextBlock,
 } from '@sanity/types'
 import {useMemo, useRef, type FunctionComponent, type ReactElement} from 'react'
 import {Editor, Range, Element as SlateElement} from 'slate'
@@ -14,13 +12,13 @@ import {
   useSlateStatic,
   type RenderElementProps,
 } from 'slate-react'
-import {
-  type BlockRenderProps,
-  type PortableTextMemberSchemaTypes,
-  type RenderBlockFunction,
-  type RenderChildFunction,
-  type RenderListItemFunction,
-  type RenderStyleFunction,
+import type {
+  BlockRenderProps,
+  PortableTextMemberSchemaTypes,
+  RenderBlockFunction,
+  RenderChildFunction,
+  RenderListItemFunction,
+  RenderStyleFunction,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {fromSlateValue} from '../../utils/values'
@@ -91,7 +89,7 @@ export const Element: FunctionComponent<ElementProps> = ({
 
   let renderedBlock = children
 
-  let className
+  let className: string | undefined
 
   const blockPath: Path = useMemo(() => [{_key: element._key}], [element])
 
@@ -180,7 +178,7 @@ export const Element: FunctionComponent<ElementProps> = ({
         editorElementRef: blockRef,
       })
     }
-    let level
+    let level: number | undefined
     if (isListItem) {
       if (typeof element.level === 'number') {
         level = element.level
@@ -276,7 +274,7 @@ export const Element: FunctionComponent<ElementProps> = ({
     schemaTypes.block.name,
     KEY_TO_VALUE_ELEMENT.get(editor),
   )[0]
-  let renderedBlockFromProps
+  let renderedBlockFromProps: JSX.Element | undefined
   if (renderBlock) {
     const _props: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
       {

package/src/editor/components/Leaf.tsx

@@ -1,7 +1,7 @@
-import {
-  type Path,
-  type PortableTextObject,
-  type PortableTextTextBlock,
+import type {
+  Path,
+  PortableTextObject,
+  PortableTextTextBlock,
 } from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {
@@ -15,14 +15,14 @@ import {
 } from 'react'
 import {Text} from 'slate'
 import {useSelected, type RenderLeafProps} from 'slate-react'
-import {
-  type BlockAnnotationRenderProps,
-  type BlockChildRenderProps,
-  type BlockDecoratorRenderProps,
-  type PortableTextMemberSchemaTypes,
-  type RenderAnnotationFunction,
-  type RenderChildFunction,
-  type RenderDecoratorFunction,
+import type {
+  BlockAnnotationRenderProps,
+  BlockChildRenderProps,
+  BlockDecoratorRenderProps,
+  PortableTextMemberSchemaTypes,
+  RenderAnnotationFunction,
+  RenderChildFunction,
+  RenderDecoratorFunction,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
@@ -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/SlateContainer.tsx

@@ -1,11 +1,11 @@
 import {useEffect, useMemo, useState, type PropsWithChildren} from 'react'
 import {createEditor} from 'slate'
 import {Slate, withReact} from 'slate-react'
-import {type PatchObservable} from '../../types/editor'
+import type {PatchObservable} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import {withPlugins} from '../plugins'
-import {type PortableTextEditor} from '../PortableTextEditor'
+import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('component:PortableTextEditor:SlateContainer')
 

package/src/editor/components/Synchronizer.tsx

@@ -1,12 +1,13 @@
-import {type Patch} from '@portabletext/patches'
-import {type PortableTextBlock} from '@sanity/types'
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@sanity/types'
 import {throttle} from 'lodash'
 import {useCallback, useEffect, useMemo, useRef} from 'react'
 import {Editor} from 'slate'
 import {useSlate} from 'slate-react'
-import {type EditorChange, type 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
 }