@portabletext/editor 1.44.10 → 1.44.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.10",
+  "version": "1.44.12",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -89,7 +89,7 @@
     "@sanity/schema": "^3.82.0",
     "@sanity/types": "^3.82.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.13",
     "@types/lodash.startcase": "^4.4.9",

package/src/behaviors/behavior.core.block-objects.ts

@@ -95,12 +95,31 @@ const breakingBlockObject = defineBehavior({
 const clickingAboveLonelyBlockObject = defineBehavior({
   on: 'mouse.click',
   guard: ({snapshot, event}) => {
-    if (!selectors.isSelectionCollapsed(snapshot)) {
+    if (snapshot.context.readOnly) {
       return false
     }
 
-    const focusBlockObject = selectors.getFocusBlockObject(snapshot)
-    const previousBlock = selectors.getPreviousBlock(snapshot)
+    if (
+      snapshot.context.selection &&
+      !selectors.isSelectionCollapsed(snapshot)
+    ) {
+      return false
+    }
+
+    const focusBlockObject = selectors.getFocusBlockObject({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.position.selection,
+      },
+    })
+    const previousBlock = selectors.getPreviousBlock({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.position.selection,
+      },
+    })
 
     return (
       event.position.isEditor &&
@@ -110,13 +129,18 @@ const clickingAboveLonelyBlockObject = defineBehavior({
     )
   },
   actions: [
-    ({snapshot}) => [
+    ({snapshot, event}) => [
+      raise({
+        type: 'select',
+        selection: event.position.selection,
+      }),
       raise({
         type: 'insert.block',
         block: {
           _type: snapshot.context.schema.block.name,
         },
         placement: 'before',
+        select: 'start',
       }),
     ],
   ],
@@ -125,12 +149,31 @@ const clickingAboveLonelyBlockObject = defineBehavior({
 const clickingBelowLonelyBlockObject = defineBehavior({
   on: 'mouse.click',
   guard: ({snapshot, event}) => {
-    if (!selectors.isSelectionCollapsed(snapshot)) {
+    if (snapshot.context.readOnly) {
       return false
     }
 
-    const focusBlockObject = selectors.getFocusBlockObject(snapshot)
-    const nextBlock = selectors.getNextBlock(snapshot)
+    if (
+      snapshot.context.selection &&
+      !selectors.isSelectionCollapsed(snapshot)
+    ) {
+      return false
+    }
+
+    const focusBlockObject = selectors.getFocusBlockObject({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.position.selection,
+      },
+    })
+    const nextBlock = selectors.getNextBlock({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.position.selection,
+      },
+    })
 
     return (
       event.position.isEditor &&
@@ -140,13 +183,18 @@ const clickingBelowLonelyBlockObject = defineBehavior({
     )
   },
   actions: [
-    ({snapshot}) => [
+    ({snapshot, event}) => [
+      raise({
+        type: 'select',
+        selection: event.position.selection,
+      }),
       raise({
         type: 'insert.block',
         block: {
           _type: snapshot.context.schema.block.name,
         },
         placement: 'after',
+        select: 'start',
       }),
     ],
   ],

package/src/editor/Editable.tsx

@@ -372,7 +372,13 @@ export const PortableTextEditable = forwardRef<
         event.stopPropagation()
         event.preventDefault()
 
-        const selection = editorActor.getSnapshot().context.selection
+        const selection = slateEditor.selection
+          ? slateRangeToSelection({
+              schema: editorActor.getSnapshot().context.schema,
+              editor: slateEditor,
+              range: slateEditor.selection,
+            })
+          : undefined
         const position = selection ? {selection} : undefined
 
         if (!position) {
@@ -586,25 +592,22 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
+        editorActor,
         slateEditor,
         event: event.nativeEvent,
       })
 
-      if (!position) {
-        console.warn('Could not find EventPosition for MouseEvent')
-        return
+      if (position) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'mouse.click',
+            position,
+          },
+          editor: slateEditor,
+          nativeEvent: event,
+        })
       }
-
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'mouse.click',
-          position,
-        },
-        editor: slateEditor,
-        nativeEvent: event,
-      })
     },
     [onClick, editorActor, slateEditor],
   )
@@ -819,7 +822,7 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
+        editorActor,
         slateEditor,
         event: event.nativeEvent,
       })
@@ -985,7 +988,7 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
+        editorActor,
         slateEditor,
         event: event.nativeEvent,
       })
@@ -1045,7 +1048,7 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
+        editorActor,
         slateEditor,
         event: event.nativeEvent,
       })
@@ -1081,7 +1084,7 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
+        editorActor,
         slateEditor,
         event: event.nativeEvent,
       })
@@ -1118,7 +1121,7 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
+        editorActor,
         slateEditor,
         event: event.nativeEvent,
       })
@@ -1156,7 +1159,7 @@ export const PortableTextEditable = forwardRef<
       }
 
       const position = getEventPosition({
-        schema: editorActor.getSnapshot().context.schema,
+        editorActor,
         slateEditor,
         event: event.nativeEvent,
       })

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

@@ -3,6 +3,7 @@ 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 {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -21,6 +22,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     const {container} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         renderPlaceholder={renderPlaceholder}
         ref={editorRef}
@@ -87,6 +89,7 @@ describe('initialization', () => {
     const editorRef = createRef<PortableTextEditor>()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         ref={editorRef}
         onChange={onChange}
         schemaType={schemaType}
@@ -118,6 +121,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
@@ -162,6 +166,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     const {rerender} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
@@ -195,6 +200,7 @@ describe('initialization', () => {
     })
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={newSelection}
@@ -221,6 +227,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
@@ -266,6 +273,7 @@ describe('initialization', () => {
     await waitFor(() => {
       render(
         <PortableTextEditorTester
+          keyGenerator={createTestKeyGenerator()}
           onChange={onChange}
           ref={editorRef}
           selection={initialSelection}
@@ -298,6 +306,7 @@ describe('initialization', () => {
     const newOnChange = vi.fn()
     _rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={newOnChange}
         ref={editorRef}
         selection={initialSelection}
@@ -350,6 +359,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}

package/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -1,12 +1,6 @@
 import {Schema} from '@sanity/schema'
 import {defineArrayMember, defineField} from '@sanity/types'
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  type ForwardedRef,
-} from 'react'
+import {forwardRef, useMemo, type ForwardedRef} from 'react'
 import {vi} from 'vitest'
 import {
   PortableTextEditable,
@@ -77,8 +71,6 @@ const schema = Schema.compile({
   types: [portableTextType, colorAndLink],
 })
 
-let key = 0
-
 export const PortableTextEditorTester = forwardRef(
   function PortableTextEditorTester(
     props: Partial<
@@ -90,23 +82,17 @@ export const PortableTextEditorTester = forwardRef(
       schemaType: PortableTextEditorProps['schemaType']
       selection?: PortableTextEditableProps['selection']
       value?: PortableTextEditorProps['value']
+      keyGenerator: PortableTextEditorProps['keyGenerator']
     },
     ref: ForwardedRef<PortableTextEditor>,
   ) {
-    useEffect(() => {
-      key = 0
-    }, [])
-    const _keyGenerator = useCallback(() => {
-      key++
-      return `${key}`
-    }, [])
     const onChange = useMemo(() => props.onChange || vi.fn(), [props.onChange])
     return (
       <PortableTextEditor
         schemaType={props.schemaType}
         onChange={onChange}
         value={props.value || undefined}
-        keyGenerator={_keyGenerator}
+        keyGenerator={props.keyGenerator}
         ref={ref}
       >
         <PortableTextEditable

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

@@ -3,6 +3,7 @@ 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 {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import type {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -38,6 +39,7 @@ describe('RangeDecorations', () => {
     const {rerender} = await waitFor(() =>
       render(
         <PortableTextEditorTester
+          keyGenerator={createTestKeyGenerator()}
           onChange={onChange}
           rangeDecorations={rangeDecorations}
           ref={editorRef}
@@ -64,6 +66,7 @@ describe('RangeDecorations', () => {
     // Re-render with the same range decorations
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
@@ -86,6 +89,7 @@ describe('RangeDecorations', () => {
     ]
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
@@ -111,6 +115,7 @@ describe('RangeDecorations', () => {
     ]
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
@@ -137,6 +142,7 @@ describe('RangeDecorations', () => {
     ]
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}

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

@@ -2,6 +2,7 @@ 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 {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -27,6 +28,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -48,7 +50,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '2',
+                _key: 'k3',
                 _type: 'span',
                 text: 'Hello with a new key',
                 marks: [],
@@ -83,6 +85,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -140,6 +143,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -162,7 +166,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '2',
+                _key: 'k3',
                 _type: 'span',
                 text: '',
                 marks: [],
@@ -176,7 +180,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '4',
+                _key: 'k5',
                 _type: 'span',
                 text: '',
                 marks: [],
@@ -212,6 +216,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -276,6 +281,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -319,6 +325,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -337,9 +344,9 @@ describe('when PTE would display warnings, instead it self solves', () => {
         PortableTextEditor.focus(editorRef.current)
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           {
-            _key: '3',
+            _key: 'k2',
             _type: 'myTestBlockType',
-            children: [{_key: '4', _type: 'span', marks: [], text: ''}],
+            children: [{_key: 'k3', _type: 'span', marks: [], text: ''}],
             markDefs: [],
             style: 'normal',
           },

package/src/editor/__tests__/sync-value.test.tsx

@@ -1,6 +1,7 @@
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
+import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -43,6 +44,7 @@ describe('useSyncValue', () => {
     ]
     const {rerender} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -62,6 +64,7 @@ describe('useSyncValue', () => {
 
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -99,6 +102,7 @@ describe('useSyncValue', () => {
     ]
     const {rerender} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -118,6 +122,7 @@ describe('useSyncValue', () => {
 
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}

package/src/editor/editor-machine.ts

@@ -382,6 +382,7 @@ export const editorMachine = setup({
               actions: 'handle behavior event',
               guard: ({event}) =>
                 event.behaviorEvent.type === 'clipboard.copy' ||
+                event.behaviorEvent.type === 'mouse.click' ||
                 event.behaviorEvent.type === 'serialize' ||
                 event.behaviorEvent.type === 'serialization.failure' ||
                 event.behaviorEvent.type === 'serialization.success' ||

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

@@ -5,6 +5,7 @@ import {
   PortableTextEditorTester,
   schemaType,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 const initialValue = [
@@ -53,6 +54,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
         ref={editorRef}
         schemaType={schemaType}
         value={initialValue}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -103,6 +105,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -137,11 +140,11 @@ describe('plugin:withEditableAPI: .delete()', () => {
           .toMatchInlineSnapshot(`
           [
             {
-              "_key": "1",
+              "_key": "k2",
               "_type": "myTestBlockType",
               "children": [
                 {
-                  "_key": "2",
+                  "_key": "k3",
                   "_type": "span",
                   "marks": [],
                   "text": "",
@@ -162,6 +165,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -222,7 +226,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
                       "_type": "myTestBlockType",
                       "children": [
                         {
-                          "_key": "1",
+                          "_key": "k2",
                           "_type": "span",
                           "marks": [],
                           "text": "",
@@ -247,6 +251,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
         ref={editorRef}
         schemaType={schemaType}
         value={initialValue}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 

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

@@ -6,6 +6,7 @@ import {
   PortableTextEditorTester,
   schemaType,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 const initialValue = [
@@ -56,6 +57,7 @@ describe('plugin:withEditableAPI: .getFragment()', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -97,6 +99,7 @@ describe('plugin:withEditableAPI: .getFragment()', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}