@portabletext/editor 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -47,66 +47,54 @@
     "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/eslint-config-i18n": "^1.1.0",
-    "@sanity/eslint-config-studio": "^4.0.0",
-    "@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",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/ws": "~8.5.12",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-sanity": "^7.1.2",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-eeb1b2a-20240818",
-    "eslint-plugin-tsdoc": "^0.3.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-unused-imports": "^4.1.3",
     "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",
@@ -114,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"
@@ -125,15 +113,14 @@
   },
   "scripts": {
     "build": "pkg-utils build --strict --check --clean",
-    "check:lint": "eslint .",
+    "check:lint": "biome lint .",
     "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": "eslint . --fix",
-    "test": "jest",
+    "lint:fix": "biome lint --write .",
+    "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

@@ -1,4 +1,4 @@
-import {type PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import {isEqual, noop} from 'lodash'
 import {
   forwardRef,
@@ -35,23 +35,23 @@ import {
   type RenderElementProps,
   type RenderLeafProps,
 } from 'slate-react'
-import {
-  type EditorChange,
-  type EditorSelection,
-  type OnCopyFn,
-  type OnPasteFn,
-  type RangeDecoration,
-  type RenderAnnotationFunction,
-  type RenderBlockFunction,
-  type RenderChildFunction,
-  type RenderDecoratorFunction,
-  type RenderListItemFunction,
-  type RenderPlaceholderFunction,
-  type RenderStyleFunction,
-  type ScrollSelectionIntoViewFunction,
+import type {
+  EditorChange,
+  EditorSelection,
+  OnCopyFn,
+  OnPasteFn,
+  RangeDecoration,
+  RenderAnnotationFunction,
+  RenderBlockFunction,
+  RenderChildFunction,
+  RenderDecoratorFunction,
+  RenderListItemFunction,
+  RenderPlaceholderFunction,
+  RenderStyleFunction,
+  ScrollSelectionIntoViewFunction,
 } from '../types/editor'
-import {type HotkeyOptions} from '../types/options'
-import {type SlateTextBlock, type VoidElement} from '../types/slate'
+import type {HotkeyOptions} from '../types/options'
+import type {SlateTextBlock, VoidElement} from '../types/slate'
 import {debugWithName} from '../utils/debug'
 import {
   moveRangeByOperation,
@@ -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) => {
@@ -341,33 +344,31 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
           return
         }
       }
-      setRangeDecorationsState([])
+      if (rangeDecorationState.length > 0) {
+        setRangeDecorationsState([])
+      }
     },
     [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(() => {
@@ -449,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)
@@ -470,15 +471,15 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
             }
           })
           .catch((error) => {
-            console.error(error) // eslint-disable-line no-console
+            console.error(error)
             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(
@@ -493,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(
@@ -540,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

@@ -1,30 +1,33 @@
-import {
-  type ArrayDefinition,
-  type ArraySchemaType,
-  type BlockSchemaType,
-  type ObjectSchemaType,
-  type Path,
-  type PortableTextBlock,
-  type PortableTextChild,
-  type PortableTextObject,
-  type SpanSchemaType,
+import type {
+  ArrayDefinition,
+  ArraySchemaType,
+  BlockSchemaType,
+  ObjectSchemaType,
+  Path,
+  PortableTextBlock,
+  PortableTextChild,
+  PortableTextObject,
+  SpanSchemaType,
 } from '@sanity/types'
 import {Component, type MutableRefObject, type PropsWithChildren} from 'react'
 import {Subject} from 'rxjs'
-import {
-  type EditableAPI,
-  type EditableAPIDeleteOptions,
-  type EditorChange,
-  type EditorChanges,
-  type EditorSelection,
-  type PatchObservable,
-  type PortableTextMemberSchemaTypes,
+import {createActor, type Subscription} from 'xstate'
+import type {
+  EditableAPI,
+  EditableAPIDeleteOptions,
+  EditorChange,
+  EditorChanges,
+  EditorSelection,
+  MutationChange,
+  PatchObservable,
+  PortableTextMemberSchemaTypes,
 } from '../types/editor'
 import {debugWithName} from '../utils/debug'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 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,14 +163,13 @@ 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 =
       typeof this.props.maxBlocks === 'undefined'
         ? undefined
-        : parseInt(this.props.maxBlocks.toString(), 10) || undefined
+        : Number.parseInt(this.props.maxBlocks.toString(), 10) || undefined
 
     const readOnly = Boolean(this.props.readOnly)
     const keyGenerator = this.props.keyGenerator || defaultKeyGenerator
@@ -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}
@@ -239,7 +256,6 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     editor: PortableTextEditor,
     element: PortableTextBlock | PortableTextChild,
   ) => {
-    // eslint-disable-next-line react/no-find-dom-node
     return editor.editable?.findDOMNode(element)
   }
   static findByPath = (editor: PortableTextEditor, path: Path) => {

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

@@ -1,9 +1,8 @@
-import {describe, expect, it, jest} from '@jest/globals'
-/* eslint-disable no-irregular-whitespace */
-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 EditorSelection} from '../..'
+import {describe, expect, it, vi} from 'vitest'
+import type {EditorSelection} from '../..'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -19,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}
@@ -89,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
@@ -121,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}
@@ -165,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}
@@ -224,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}
@@ -267,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(
@@ -301,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}
@@ -353,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,10 +1,9 @@
-import {describe, expect, it, jest} from '@jest/globals'
-/* eslint-disable no-irregular-whitespace */
-import {type PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type ReactNode, type RefObject} from 'react'
-import {type RangeDecoration} from '../..'
-import {type PortableTextEditor} from '../PortableTextEditor'
+import {describe, expect, it, vi} from 'vitest'
+import type {RangeDecoration} from '../..'
+import type {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
 const helloBlock: PortableTextBlock = {
@@ -22,9 +21,9 @@ const RangeDecorationTestComponent = ({children}: {children?: ReactNode}) => {
 }
 
 describe('RangeDecorations', () => {
-  it.only('only render range decorations as necessary', async () => {
+  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}