@portabletext/editor 1.44.11 → 1.44.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.11",
+  "version": "1.44.13",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -89,14 +89,14 @@
     "@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",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-istanbul": "^3.1.1",
@@ -109,7 +109,7 @@
     "react-dom": "^19.1.0",
     "rxjs": "^7.8.2",
     "typescript": "5.8.2",
-    "vite": "^6.2.0",
+    "vite": "^6.2.5",
     "vitest": "^3.1.1",
     "vitest-browser-react": "^0.1.1",
     "racejar": "1.2.3"

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/define-schema.ts

@@ -3,6 +3,7 @@ import {defineField, defineType, type ObjectSchemaType} from '@sanity/types'
 import startCase from 'lodash.startcase'
 import type {PortableTextMemberSchemaTypes} from '../types/editor'
 import {createEditorSchema} from './create-editor-schema'
+import {defaultKeyGenerator} from './key-generator'
 
 /**
  * @public
@@ -55,6 +56,24 @@ export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
   return definition
 }
 
+const temporaryImageName = `tmp-${defaultKeyGenerator()}-image`
+const temporaryUrlName = `tmp-${defaultKeyGenerator()}-url`
+
+const temporaryObjectNames: Record<string, string> = {
+  image: temporaryImageName,
+  url: temporaryUrlName,
+}
+
+const objectNames: Record<string, string> = {
+  [temporaryImageName]: 'image',
+  [temporaryUrlName]: 'url',
+}
+
+const defaultObjectTitles: Record<string, string> = {
+  image: 'Image',
+  url: 'URL',
+}
+
 /**
  * @public
  */
@@ -68,21 +87,30 @@ export function compileSchemaDefinition<
       defineType({
         type: 'object',
         // Very naive way to work around `SanitySchema.compile` adding default
-        // fields to objects with the name `image`
-        name: blockObject.name === 'image' ? 'tmp-image' : blockObject.name,
+        // fields to objects with certain names.
+        name: temporaryObjectNames[blockObject.name] ?? blockObject.name,
         title:
-          blockObject.name === 'image' && blockObject.title === undefined
-            ? 'Image'
+          blockObject.title === undefined
+            ? // This avoids the default title which is a title case of the object name
+              defaultObjectTitles[blockObject.name]
             : blockObject.title,
         fields: [],
       }),
     ) ?? []
+
   const inlineObjects =
     definition?.inlineObjects?.map((inlineObject) =>
       defineType({
         type: 'object',
-        name: inlineObject.name,
-        title: inlineObject.title,
+        // Very naive way to work around `SanitySchema.compile` adding default
+        // fields to objects with certain names.
+        name: temporaryObjectNames[inlineObject.name] ?? inlineObject.name,
+
+        title:
+          inlineObject.title === undefined
+            ? // This avoids the default title which is a title case of the object name
+              defaultObjectTitles[inlineObject.name]
+            : inlineObject.title,
         fields: [],
       }),
     ) ?? []
@@ -132,16 +160,24 @@ export function compileSchemaDefinition<
   return {
     ...pteSchema,
     blockObjects: pteSchema.blockObjects.map((blockObject) =>
-      blockObject.name === 'tmp-image'
+      objectNames[blockObject.name] !== undefined
         ? ({
             ...blockObject,
-            name: 'image',
+            name: objectNames[blockObject.name],
             type: {
               ...blockObject.type,
-              name: 'image',
+              name: objectNames[blockObject.name],
             },
           } as ObjectSchemaType)
         : blockObject,
     ),
+    inlineObjects: pteSchema.inlineObjects.map((inlineObject) =>
+      objectNames[inlineObject.name] !== undefined
+        ? ({
+            ...inlineObject,
+            name: objectNames[inlineObject.name],
+          } as ObjectSchemaType)
+        : inlineObject,
+    ),
   } satisfies EditorSchema
 }

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/internal-utils/event-position.ts

@@ -1,6 +1,7 @@
 import {Editor, type BaseRange, type Node} from 'slate'
 import {DOMEditor, isDOMNode} from 'slate-dom'
 import type {EditorSchema, EditorSelection} from '..'
+import type {EditorActor} from '../editor/editor-machine'
 import type {PortableTextSlateEditor} from '../types/editor'
 import * as utils from '../utils'
 import {
@@ -21,14 +22,18 @@ export type EventPosition = {
 export type EventPositionBlock = EventPosition['block']
 
 export function getEventPosition({
-  schema,
+  editorActor,
   slateEditor,
   event,
 }: {
-  schema: EditorSchema
+  editorActor: EditorActor
   slateEditor: PortableTextSlateEditor
   event: DragEvent | MouseEvent
 }): EventPosition | undefined {
+  if (editorActor.getSnapshot().matches({setup: 'setting up'})) {
+    return undefined
+  }
+
   const node = getEventNode({slateEditor, event})
 
   if (!node) {
@@ -37,13 +42,13 @@ export function getEventPosition({
 
   const block = getNodeBlock({
     editor: slateEditor,
-    schema,
+    schema: editorActor.getSnapshot().context.schema,
     node,
   })
 
   const positionBlock = getEventPositionBlock({node, slateEditor, event})
   const selection = getEventSelection({
-    schema,
+    schema: editorActor.getSnapshot().context.schema,
     slateEditor,
     event,
   })