@portabletext/editor 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -47,29 +47,30 @@
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
     "slate": "0.103.0",
-    "slate-react": "0.108.0"
+    "slate-react": "0.110.1",
+    "xstate": "^5.18.2"
   },
   "devDependencies": {
-    "@cucumber/cucumber-expressions": "^17.1.0",
-    "@cucumber/gherkin": "^29.0.0",
-    "@cucumber/messages": "^26.0.0",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@playwright/test": "1.46.1",
+    "@playwright/test": "1.47.2",
     "@portabletext/toolkit": "^2.0.15",
     "@sanity/block-tools": "^3.55.0",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.10.10",
+    "@sanity/pkg-utils": "^6.11.2",
     "@sanity/schema": "^3.55.0",
     "@sanity/test": "0.0.1-alpha.1",
     "@sanity/types": "^3.55.0",
-    "@sanity/ui": "^2.8.8",
+    "@sanity/ui": "^2.8.9",
     "@sanity/util": "^3.55.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
-    "@types/express-ws": "^3.0.4",
+    "@types/express-ws": "^3.0.5",
     "@types/lodash": "^4.17.7",
     "@types/node": "^18.19.8",
     "@types/node-ipc": "^9.2.3",
@@ -81,18 +82,19 @@
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
-    "jest-dev-server": "^10.1.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest-dev-server": "^10.1.1",
     "jest-environment-node": "^29.7.0",
+    "jsdom": "^25.0.1",
     "node-ipc": "npm:@node-ipc/compat@9.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
-    "styled-components": "^6.1.12",
+    "styled-components": "^6.1.13",
     "ts-node": "^10.9.2",
-    "tsx": "^4.17.0",
-    "typescript": "5.5.4",
-    "vite": "^5.4.2"
+    "typescript": "5.6.2",
+    "vite": "^5.4.2",
+    "vitest": "^2.1.1",
+    "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
     "@sanity/block-tools": "^3.47.1",
@@ -100,8 +102,8 @@
     "@sanity/types": "^3.47.1",
     "@sanity/util": "^3.47.1",
     "react": "^16.9 || ^17 || ^18",
-    "rxjs": "^7",
-    "styled-components": "^6.1"
+    "rxjs": "^7.8.1",
+    "styled-components": "^6.1.13"
   },
   "engines": {
     "node": ">=18"
@@ -115,11 +117,10 @@
     "check:types": "tsc",
     "clean": "del .turbo && del lib && del node_modules",
     "dev": "pkg-utils watch",
-    "dev:e2e-server": "cd ./e2e-tests/ && tsx serve",
     "lint:fix": "biome lint --write .",
-    "test": "jest",
+    "test": "vitest --run",
+    "test:watch": "vitest",
     "test:e2e": "jest --config=e2e-tests/e2e.config.ts",
-    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch",
-    "test:watch": "jest --watch"
+    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch"
   }
 }

package/src/editor/Editable.tsx

@@ -161,15 +161,15 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
 
   const rangeDecorationsRef = useRef(rangeDecorations)
 
-  const {change$, schemaTypes} = portableTextEditor
+  const {editorActor, schemaTypes} = portableTextEditor
   const slateEditor = useSlate()
 
   const blockTypeName = schemaTypes.block.name
 
   // React/UI-specific plugins
   const withInsertData = useMemo(
-    () => createWithInsertData(change$, schemaTypes, keyGenerator),
-    [change$, keyGenerator, schemaTypes],
+    () => createWithInsertData(editorActor, schemaTypes, keyGenerator),
+    [editorActor, keyGenerator, schemaTypes],
   )
   const withHotKeys = useMemo(
     () => createWithHotkeys(schemaTypes, portableTextEditor, hotkeys),
@@ -278,13 +278,16 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           // Output selection here in those cases where the editor selection was the same, and there are no set_selection operations made.
           // The selection is usually automatically emitted to change$ by the withPortableTextSelections plugin whenever there is a set_selection operation applied.
           if (!slateEditor.operations.some((o) => o.type === 'set_selection')) {
-            change$.next({type: 'selection', selection: normalizedSelection})
+            editorActor.send({
+              type: 'selection',
+              selection: normalizedSelection,
+            })
           }
           slateEditor.onChange()
         }
       }
     }
-  }, [propsSelection, slateEditor, blockTypeName, change$])
+  }, [editorActor, propsSelection, slateEditor])
 
   const syncRangeDecorations = useCallback(
     (operation?: Operation) => {
@@ -348,28 +351,24 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
     [portableTextEditor, rangeDecorations, schemaTypes, slateEditor],
   )
 
-  // Subscribe to change$ and restore selection from props when the editor has been initialized properly with it's value
+  // Restore selection from props when the editor has been initialized properly with it's value
   useEffect(() => {
-    // debug('Subscribing to editor changes$')
-    const sub = change$.subscribe((next: EditorChange): void => {
-      switch (next.type) {
-        case 'ready':
-          restoreSelectionFromProps()
-          break
-        case 'invalidValue':
-          setHasInvalidValue(true)
-          break
-        case 'value':
-          setHasInvalidValue(false)
-          break
-        default:
-      }
+    const onReady = editorActor.on('ready', () => {
+      restoreSelectionFromProps()
     })
+    const onInvalidValue = editorActor.on('invalid value', () => {
+      setHasInvalidValue(true)
+    })
+    const onValueChanged = editorActor.on('value changed', () => {
+      setHasInvalidValue(false)
+    })
+
     return () => {
-      // debug('Unsubscribing to changes$')
-      sub.unsubscribe()
+      onReady.unsubscribe()
+      onInvalidValue.unsubscribe()
+      onValueChanged.unsubscribe()
     }
-  }, [change$, restoreSelectionFromProps])
+  }, [editorActor, restoreSelectionFromProps])
 
   // Restore selection from props when it changes
   useEffect(() => {
@@ -451,7 +450,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         slateEditor.insertData(event.clipboardData)
       } else {
         // Resolve it as promise (can be either async promise or sync return value)
-        change$.next({type: 'loading', isLoading: true})
+        editorActor.send({type: 'loading'})
         Promise.resolve(onPasteResult)
           .then((result) => {
             debug('Custom paste function from client resolved', result)
@@ -476,11 +475,11 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
             return error
           })
           .finally(() => {
-            change$.next({type: 'loading', isLoading: false})
+            editorActor.send({type: 'done loading'})
           })
       }
     },
-    [change$, onPaste, portableTextEditor, schemaTypes, slateEditor],
+    [onPaste, portableTextEditor, schemaTypes, slateEditor],
   )
 
   const handleOnFocus: FocusEventHandler<HTMLDivElement> = useCallback(
@@ -495,18 +494,18 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           Transforms.select(slateEditor, Editor.start(slateEditor, []))
           slateEditor.onChange()
         }
-        change$.next({type: 'focus', event})
+        editorActor.send({type: 'focus', event})
         const newSelection = PortableTextEditor.getSelection(portableTextEditor)
         // If the selection is the same, emit it explicitly here as there is no actual onChange event triggered.
         if (selection === newSelection) {
-          change$.next({
+          editorActor.send({
             type: 'selection',
             selection,
           })
         }
       }
     },
-    [onFocus, portableTextEditor, change$, slateEditor],
+    [editorActor, onFocus, portableTextEditor, slateEditor],
   )
 
   const handleClick = useCallback(
@@ -542,10 +541,10 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         onBlur(event)
       }
       if (!event.isPropagationStopped()) {
-        change$.next({type: 'blur', event})
+        editorActor.send({type: 'blur', event})
       }
     },
-    [change$, onBlur],
+    [editorActor, onBlur],
   )
 
   const handleOnBeforeInput = useCallback(

package/src/editor/PortableTextEditor.tsx

@@ -11,12 +11,14 @@ import type {
 } from '@sanity/types'
 import {Component, type MutableRefObject, type PropsWithChildren} from 'react'
 import {Subject} from 'rxjs'
+import {createActor, type Subscription} from 'xstate'
 import type {
   EditableAPI,
   EditableAPIDeleteOptions,
   EditorChange,
   EditorChanges,
   EditorSelection,
+  MutationChange,
   PatchObservable,
   PortableTextMemberSchemaTypes,
 } from '../types/editor'
@@ -25,6 +27,7 @@ import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSc
 import {compileType} from '../utils/schema'
 import {SlateContainer} from './components/SlateContainer'
 import {Synchronizer} from './components/Synchronizer'
+import {editorMachine, type EditorActor} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {
   defaultKeyGenerator,
@@ -92,6 +95,11 @@ export type PortableTextEditorProps = PropsWithChildren<{
  * @public
  */
 export class PortableTextEditor extends Component<PortableTextEditorProps> {
+  /**
+   * @internal
+   * Don't use this API directly. It's subject to change.
+   */
+  public editorActor: EditorActor
   /**
    * An observable of all the editor changes.
    */
@@ -118,7 +126,8 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
       )
     }
 
-    this.change$.next({type: 'loading', isLoading: true})
+    this.editorActor = createActor(editorMachine)
+    this.editorActor.start()
 
     this.schemaTypes = getPortableTextMemberSchemaTypes(
       props.schemaType.hasOwnProperty('jsonType')
@@ -154,8 +163,7 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   }
 
   render() {
-    const {onChange, value, children, patches$, incomingPatches$} = this.props
-    const {change$} = this
+    const {value, children, patches$, incomingPatches$} = this.props
     const _patches$ = incomingPatches$ || patches$ // Backward compatibility
 
     const maxBlocks =
@@ -176,11 +184,20 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
         <PortableTextEditorKeyGeneratorContext.Provider value={keyGenerator}>
           <PortableTextEditorContext.Provider value={this}>
             <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
-              <PortableTextEditorSelectionProvider change$={change$}>
+              <PortableTextEditorSelectionProvider
+                editorActor={this.editorActor}
+              >
                 <Synchronizer
-                  change$={change$}
+                  editorActor={this.editorActor}
                   getValue={this.getValue}
-                  onChange={onChange}
+                  onChange={(change) => {
+                    this.props.onChange(change)
+                    /**
+                     * For backwards compatibility, we relay all changes to the
+                     * `change$` Subject as well.
+                     */
+                    this.change$.next(change)
+                  }}
                   value={value}
                 />
                 {children}

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

@@ -1,7 +1,7 @@
-import {describe, expect, it, jest} from '@jest/globals'
 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 type {EditorSelection} from '../..'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
@@ -18,7 +18,7 @@ const renderPlaceholder = () => 'Jot something down here'
 describe('initialization', () => {
   it('receives initial onChange events and has custom placeholder', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const {container} = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -88,7 +88,7 @@ describe('initialization', () => {
   })
   it('takes value from props and confirms it by emitting value change event', async () => {
     const initialValue = [helloBlock]
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const editorRef = createRef<PortableTextEditor>()
     render(
       <PortableTextEditorTester
@@ -120,7 +120,7 @@ describe('initialization', () => {
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       backward: false,
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -164,7 +164,7 @@ describe('initialization', () => {
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 3},
       backward: false,
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const {rerender} = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -223,7 +223,7 @@ describe('initialization', () => {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -266,7 +266,7 @@ describe('initialization', () => {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     let _rerender: any
     await waitFor(() => {
       render(
@@ -300,7 +300,7 @@ describe('initialization', () => {
       expect(onChange).toHaveBeenCalledWith({type: 'value', value})
     })
     value = [{_type: 'banana', _key: '123'}]
-    const newOnChange = jest.fn()
+    const newOnChange = vi.fn()
     _rerender(
       <PortableTextEditorTester
         onChange={newOnChange}
@@ -352,7 +352,7 @@ describe('initialization', () => {
       anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
       focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
     }
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(
       <PortableTextEditorTester
         onChange={onChange}

package/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -1,4 +1,3 @@
-import {jest} from '@jest/globals'
 import {Schema} from '@sanity/schema'
 import {defineArrayMember, defineField} from '@sanity/types'
 import {
@@ -8,6 +7,7 @@ import {
   useMemo,
   type ForwardedRef,
 } from 'react'
+import {vi} from 'vitest'
 import {
   PortableTextEditable,
   PortableTextEditor,
@@ -100,10 +100,7 @@ export const PortableTextEditorTester = forwardRef(
       key++
       return `${key}`
     }, [])
-    const onChange = useMemo(
-      () => props.onChange || jest.fn(),
-      [props.onChange],
-    )
+    const onChange = useMemo(() => props.onChange || vi.fn(), [props.onChange])
     return (
       <PortableTextEditor
         schemaType={props.schemaType}

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

@@ -1,7 +1,7 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type ReactNode, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import type {RangeDecoration} from '../..'
 import type {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
@@ -23,7 +23,7 @@ const RangeDecorationTestComponent = ({children}: {children?: ReactNode}) => {
 describe('RangeDecorations', () => {
   it('only render range decorations as necessary', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const value = [helloBlock]
     let rangeDecorations: RangeDecoration[] = [
       {

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

@@ -1,9 +1,29 @@
-import {describe, expect, it, jest} from '@jest/globals'
 import {fireEvent, render, waitFor} from '@testing-library/react'
-import {createRef, type RefObject} from 'react'
+import {act, createRef, type RefObject} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
-import {getEditableElement} from './utils'
+
+async function getEditableElement(
+  component: ReturnType<typeof render>,
+): Promise<Element> {
+  await act(async () => component)
+  const element = component.container.querySelector(
+    '[data-slate-editor="true"]',
+  )
+  if (!element) {
+    throw new Error('Could not find element')
+  }
+  /**
+   * Manually add this because JSDom doesn't implement this and Slate checks for it
+   * internally before doing stuff.
+   *
+   * https://github.com/jsdom/jsdom/issues/1670
+   */
+  // @ts-ignore
+  element.isContentEditable = true
+  return element
+}
 
 describe('adds empty text block if its needed', () => {
   const newBlock = {
@@ -34,7 +54,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -96,7 +116,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -151,7 +171,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -217,7 +237,7 @@ describe('adds empty text block if its needed', () => {
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     const component = render(
       <PortableTextEditorTester
         onChange={onChange}

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

@@ -1,8 +1,8 @@
-import {describe, expect, jest, test} from '@jest/globals'
 import {Schema} from '@sanity/schema'
 import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
+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 {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}