@portabletext/editor 1.35.0 → 1.35.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.35.0",
+  "version": "1.35.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -107,7 +107,7 @@
     "jsdom": "^26.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "rxjs": "^7.8.1",
+    "rxjs": "^7.8.2",
     "typescript": "5.7.3",
     "vite": "^6.0.11",
     "vitest": "^3.0.5",
@@ -118,7 +118,7 @@
     "@sanity/schema": "^3.76.3",
     "@sanity/types": "^3.76.3",
     "react": "^16.9 || ^17 || ^18 || ^19",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.2"
   },
   "engines": {
     "node": ">=18"

package/src/behavior-actions/behavior.action.decorator.add.ts

@@ -88,6 +88,7 @@ export const decoratorAddActionImplementation: BehaviorActionImplementation<
     })
 
     const trimmedSelection = selectors.getTrimmedSelection({
+      beta: {hasTag: () => false},
       context: {
         activeDecorators: [],
         converters: [],

package/src/behavior-actions/behavior.action.delete.text.ts

@@ -28,6 +28,7 @@ export const deleteTextActionImplementation: BehaviorActionImplementation<
   }
 
   const trimmedSelection = selectors.getTrimmedSelection({
+    beta: {hasTag: () => false},
     context: {
       converters: [],
       schema: context.schema,

package/src/behaviors/behavior.decorator-pair.ts

@@ -93,6 +93,7 @@ export function createDecoratorPairBehavior(config: {
         })
         const inlineObjectBeforePrefixFocus = selectors.getPreviousInlineObject(
           {
+            ...snapshot,
             context: {
               ...snapshot.context,
               selection: prefixSelection

package/src/converters/converter.portable-text.deserialize.test.ts

@@ -4,21 +4,17 @@ import {
   defineSchema,
   type SchemaDefinition,
 } from '../editor/define-schema'
-import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {converterPortableText} from './converter.portable-text'
 import {coreConverters} from './converters.core'
 
 function createSnapshot(schema: SchemaDefinition) {
-  return {
+  return createTestSnapshot({
     context: {
       converters: coreConverters,
-      activeDecorators: [],
-      keyGenerator: createTestKeyGenerator(),
       schema: compileSchemaDefinition(schema),
-      value: [],
-      selection: null,
     },
-  }
+  })
 }
 
 describe(converterPortableText.deserialize, () => {

package/src/converters/converter.portable-text.ts

@@ -41,7 +41,13 @@ export const converterPortableText = defineConverter({
       const parsedBlock = parseBlock({
         context: snapshot.context,
         block,
-        options: {refreshKeys: true},
+        options: {
+          /**
+           * If we are dragging internally then we would like to keep the
+           * dropped portable text as is.
+           */
+          refreshKeys: !snapshot.beta.hasTag?.('dragging internally'),
+        },
       })
       return parsedBlock ? [parsedBlock] : []
     })

package/src/converters/converter.text-html.deserialize.test.ts

@@ -4,21 +4,17 @@ import {
   defineSchema,
   type SchemaDefinition,
 } from '../editor/define-schema'
-import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {converterTextHtml} from './converter.text-html'
 import {coreConverters} from './converters.core'
 
 function createSnapshot(schema: SchemaDefinition) {
-  return {
+  return createTestSnapshot({
     context: {
       converters: coreConverters,
-      activeDecorators: [],
-      keyGenerator: createTestKeyGenerator(),
       schema: compileSchemaDefinition(schema),
-      selection: null,
-      value: [],
     },
-  }
+  })
 }
 
 const decoratedParagraph =

package/src/converters/converter.text-html.serialize.test.ts

@@ -5,7 +5,7 @@ import {
   defineSchema,
   type SchemaDefinition,
 } from '../editor/define-schema'
-import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import type {EditorSelection} from '../utils'
 import {converterTextHtml} from './converter.text-html'
 import {coreConverters} from './converters.core'
@@ -76,16 +76,14 @@ const paragraphWithInlineBlock: PortableTextTextBlock = {
 }
 
 function createSnapshot(schema: SchemaDefinition, selection: EditorSelection) {
-  return {
+  return createTestSnapshot({
     context: {
       converters: coreConverters,
-      activeDecorators: [],
-      keyGenerator: createTestKeyGenerator(),
       schema: compileSchemaDefinition(schema),
       selection,
       value: [decoratedParagraph, image, b2, paragraphWithInlineBlock],
     },
-  }
+  })
 }
 
 describe(converterTextHtml.serialize.name, () => {
@@ -177,12 +175,9 @@ describe(converterTextHtml.serialize.name, () => {
   test('lists', () => {
     expect(
       converterTextHtml.serialize({
-        snapshot: {
+        snapshot: createTestSnapshot({
           context: {
             converters: coreConverters,
-            activeDecorators: [],
-            keyGenerator: createTestKeyGenerator(),
-            schema: compileSchemaDefinition(defineSchema({})),
             value: [
               {
                 _key: 'k0',
@@ -224,7 +219,7 @@ describe(converterTextHtml.serialize.name, () => {
               },
             },
           },
-        },
+        }),
         event: {
           type: 'serialize',
           originEvent: 'unknown',

package/src/converters/converter.text-plain.test.ts

@@ -5,7 +5,7 @@ import {
   defineSchema,
   type SchemaDefinition,
 } from '../editor/define-schema'
-import type {EditorSnapshot} from '../editor/editor-snapshot'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import type {EditorSelection} from '../utils'
 import {converterTextPlain} from './converter.text-plain'
 import {coreConverters} from './converters.core'
@@ -71,17 +71,15 @@ function createSnapshot({
 }: {
   schema: SchemaDefinition
   selection: EditorSelection
-}): EditorSnapshot {
-  return {
+}) {
+  return createTestSnapshot({
     context: {
       converters: coreConverters,
-      activeDecorators: [],
-      keyGenerator: () => '',
       schema: compileSchemaDefinition(schema),
       selection,
       value: [b1, b2, b3, b4],
     },
-  }
+  })
 }
 
 test(converterTextPlain.serialize.name, () => {

package/src/editor/Editable.tsx

@@ -806,6 +806,25 @@ export const PortableTextEditable = forwardRef<
     setEditableElement(ref.current)
   }, [slateEditor, ref])
 
+  useEffect(() => {
+    const window = ReactEditor.getWindow(slateEditor)
+
+    const onDragEnd = () => {
+      editorActor.send({type: 'dragend'})
+    }
+    const onDrop = () => {
+      editorActor.send({type: 'drop'})
+    }
+
+    window.document.addEventListener('dragend', onDragEnd)
+    window.document.addEventListener('drop', onDrop)
+
+    return () => {
+      window.document.removeEventListener('dragend', onDragEnd)
+      window.document.removeEventListener('drop', onDrop)
+    }
+  }, [slateEditor, editorActor])
+
   if (!portableTextEditor) {
     return null
   }
@@ -819,6 +838,13 @@ export const PortableTextEditable = forwardRef<
       onCopy={handleCopy}
       onClick={handleClick}
       onDOMBeforeInput={handleOnBeforeInput}
+      onDragStart={(event) => {
+        props.onDragStart?.(event)
+
+        if (!event.isDefaultPrevented() && !event.isPropagationStopped()) {
+          editorActor.send({type: 'dragstart'})
+        }
+      }}
       onFocus={handleOnFocus}
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}

package/src/editor/editor-machine.ts

@@ -160,6 +160,7 @@ type UnsetEvent = {
  * @internal
  */
 export type EditorActor = ActorRefFrom<typeof editorMachine>
+export type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
 
 /**
  * @internal
@@ -194,6 +195,9 @@ export type InternalEditorEvent =
   | NamespaceEvent<UnsetEvent, 'notify'>
   | PatchEvent
   | SyntheticBehaviorEvent
+  | {type: 'dragstart'}
+  | {type: 'dragend'}
+  | {type: 'drop'}
 
 /**
  * @internal
@@ -235,6 +239,7 @@ export const editorMachine = setup({
       schema: EditorSchema
       value?: Array<PortableTextBlock>
     },
+    tags: {} as 'dragging internally',
   },
   actions: {
     'add behavior to context': assign({
@@ -290,194 +295,197 @@ export const editorMachine = setup({
     'clear pending events': assign({
       pendingEvents: [],
     }),
-    'handle behavior event': enqueueActions(({context, event, enqueue}) => {
-      assertEvent(event, ['behavior event', 'custom behavior event'])
-
-      const defaultAction =
-        event.type === 'custom behavior event' ||
-        event.behaviorEvent.type === 'copy' ||
-        event.behaviorEvent.type === 'deserialize' ||
-        event.behaviorEvent.type === 'key.down' ||
-        event.behaviorEvent.type === 'key.up' ||
-        event.behaviorEvent.type === 'paste' ||
-        event.behaviorEvent.type === 'serialize'
-          ? undefined
-          : ({
-              ...event.behaviorEvent,
-              editor: event.editor,
-            } satisfies BehaviorAction)
-      const defaultActionCallback =
-        event.type === 'behavior event'
-          ? event.defaultActionCallback
-          : undefined
-
-      const eventBehaviors = [
-        ...foundationalBehaviors,
-        ...context.behaviors.values(),
-        ...defaultBehaviors,
-      ].filter((behavior) => behavior.on === event.behaviorEvent.type)
-
-      if (eventBehaviors.length === 0) {
-        if (defaultActionCallback) {
+    'handle behavior event': enqueueActions(
+      ({context, event, enqueue, self}) => {
+        assertEvent(event, ['behavior event', 'custom behavior event'])
+
+        const defaultAction =
+          event.type === 'custom behavior event' ||
+          event.behaviorEvent.type === 'copy' ||
+          event.behaviorEvent.type === 'deserialize' ||
+          event.behaviorEvent.type === 'key.down' ||
+          event.behaviorEvent.type === 'key.up' ||
+          event.behaviorEvent.type === 'paste' ||
+          event.behaviorEvent.type === 'serialize'
+            ? undefined
+            : ({
+                ...event.behaviorEvent,
+                editor: event.editor,
+              } satisfies BehaviorAction)
+        const defaultActionCallback =
+          event.type === 'behavior event'
+            ? event.defaultActionCallback
+            : undefined
+
+        const eventBehaviors = [
+          ...foundationalBehaviors,
+          ...context.behaviors.values(),
+          ...defaultBehaviors,
+        ].filter((behavior) => behavior.on === event.behaviorEvent.type)
+
+        if (eventBehaviors.length === 0) {
+          if (defaultActionCallback) {
+            withApplyingBehaviorActions(event.editor, () => {
+              try {
+                defaultActionCallback()
+              } catch (error) {
+                console.error(
+                  new Error(
+                    `Performing action "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                  ),
+                )
+              }
+            })
+            return
+          }
+
+          if (!defaultAction) {
+            return
+          }
+
           withApplyingBehaviorActions(event.editor, () => {
             try {
-              defaultActionCallback()
+              performAction({
+                context,
+                action: defaultAction,
+              })
             } catch (error) {
               console.error(
                 new Error(
-                  `Performing action "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
                 ),
               )
             }
           })
+          event.editor.onChange()
           return
         }
 
-        if (!defaultAction) {
-          return
-        }
-
-        withApplyingBehaviorActions(event.editor, () => {
-          try {
-            performAction({
-              context,
-              action: defaultAction,
-            })
-          } catch (error) {
-            console.error(
-              new Error(
-                `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-              ),
-            )
-          }
+        const editorSnapshot = createEditorSnapshot({
+          converters: [...context.converters],
+          editor: event.editor,
+          keyGenerator: context.keyGenerator,
+          schema: context.schema,
+          hasTag: (tag) => self.getSnapshot().hasTag(tag),
         })
-        event.editor.onChange()
-        return
-      }
 
-      const editorSnapshot = createEditorSnapshot({
-        converters: [...context.converters],
-        editor: event.editor,
-        keyGenerator: context.keyGenerator,
-        schema: context.schema,
-      })
-
-      let behaviorOverwritten = false
-
-      for (const eventBehavior of eventBehaviors) {
-        const shouldRun =
-          eventBehavior.guard === undefined ||
-          eventBehavior.guard({
-            context: editorSnapshot.context,
-            snapshot: editorSnapshot,
-            event: event.behaviorEvent,
-          })
-
-        if (!shouldRun) {
-          continue
-        }
+        let behaviorOverwritten = false
 
-        const actionIntendSets = eventBehavior.actions.map((actionSet) =>
-          actionSet(
-            {
+        for (const eventBehavior of eventBehaviors) {
+          const shouldRun =
+            eventBehavior.guard === undefined ||
+            eventBehavior.guard({
               context: editorSnapshot.context,
               snapshot: editorSnapshot,
               event: event.behaviorEvent,
-            },
-            shouldRun,
-          ),
-        )
-
-        for (const actionIntends of actionIntendSets) {
-          behaviorOverwritten =
-            behaviorOverwritten ||
-            (actionIntends.length > 0 &&
-              actionIntends.some(
-                (actionIntend) => actionIntend.type !== 'effect',
-              ))
-
-          withApplyingBehaviorActionIntendSet(event.editor, () => {
-            for (const actionIntend of actionIntends) {
-              if (actionIntend.type === 'raise') {
-                if (isCustomBehaviorEvent(actionIntend.event)) {
-                  enqueue.raise({
-                    type: 'custom behavior event',
-                    behaviorEvent: actionIntend.event as CustomBehaviorEvent,
-                    editor: event.editor,
-                  })
-                } else {
-                  enqueue.raise({
-                    type: 'behavior event',
-                    behaviorEvent: actionIntend.event,
-                    editor: event.editor,
-                  })
+            })
+
+          if (!shouldRun) {
+            continue
+          }
+
+          const actionIntendSets = eventBehavior.actions.map((actionSet) =>
+            actionSet(
+              {
+                context: editorSnapshot.context,
+                snapshot: editorSnapshot,
+                event: event.behaviorEvent,
+              },
+              shouldRun,
+            ),
+          )
+
+          for (const actionIntends of actionIntendSets) {
+            behaviorOverwritten =
+              behaviorOverwritten ||
+              (actionIntends.length > 0 &&
+                actionIntends.some(
+                  (actionIntend) => actionIntend.type !== 'effect',
+                ))
+
+            withApplyingBehaviorActionIntendSet(event.editor, () => {
+              for (const actionIntend of actionIntends) {
+                if (actionIntend.type === 'raise') {
+                  if (isCustomBehaviorEvent(actionIntend.event)) {
+                    enqueue.raise({
+                      type: 'custom behavior event',
+                      behaviorEvent: actionIntend.event as CustomBehaviorEvent,
+                      editor: event.editor,
+                    })
+                  } else {
+                    enqueue.raise({
+                      type: 'behavior event',
+                      behaviorEvent: actionIntend.event,
+                      editor: event.editor,
+                    })
+                  }
+                  continue
                 }
-                continue
-              }
 
-              const action = {
-                ...actionIntend,
-                editor: event.editor,
+                const action = {
+                  ...actionIntend,
+                  editor: event.editor,
+                }
+
+                try {
+                  performAction({context, action})
+                } catch (error) {
+                  console.error(
+                    new Error(
+                      `Performing action "${action.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                    ),
+                  )
+                  break
+                }
               }
+            })
+            event.editor.onChange()
+          }
 
+          if (behaviorOverwritten) {
+            event.nativeEvent?.preventDefault()
+            break
+          }
+        }
+
+        if (!behaviorOverwritten) {
+          if (defaultActionCallback) {
+            withApplyingBehaviorActions(event.editor, () => {
               try {
-                performAction({context, action})
+                defaultActionCallback()
               } catch (error) {
                 console.error(
                   new Error(
-                    `Performing action "${action.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                    `Performing "${event.behaviorEvent.type}" failed due to: ${error.message}`,
                   ),
                 )
-                break
               }
-            }
-          })
-          event.editor.onChange()
-        }
+            })
+            return
+          }
 
-        if (behaviorOverwritten) {
-          event.nativeEvent?.preventDefault()
-          break
-        }
-      }
+          if (!defaultAction) {
+            return
+          }
 
-      if (!behaviorOverwritten) {
-        if (defaultActionCallback) {
           withApplyingBehaviorActions(event.editor, () => {
             try {
-              defaultActionCallback()
+              performAction({
+                context,
+                action: defaultAction,
+              })
             } catch (error) {
               console.error(
                 new Error(
-                  `Performing "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
                 ),
               )
             }
           })
-          return
-        }
-
-        if (!defaultAction) {
-          return
+          event.editor.onChange()
         }
-
-        withApplyingBehaviorActions(event.editor, () => {
-          try {
-            performAction({
-              context,
-              action: defaultAction,
-            })
-          } catch (error) {
-            console.error(
-              new Error(
-                `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-              ),
-            )
-          }
-        })
-        event.editor.onChange()
-      }
-    }),
+      },
+    ),
   },
 }).createMachine({
   id: 'editor',
@@ -632,6 +640,21 @@ export const editorMachine = setup({
               actions: emit(({event}) => event),
             },
           },
+          initial: 'idle',
+          states: {
+            'idle': {
+              on: {
+                dragstart: {target: 'dragging internally'},
+              },
+            },
+            'dragging internally': {
+              tags: ['dragging internally'],
+              on: {
+                dragend: {target: 'idle'},
+                drop: {target: 'idle'},
+              },
+            },
+          },
         },
       },
     },

package/src/editor/editor-selector.ts

@@ -77,5 +77,8 @@ export function getEditorSnapshot({
       selection: editorActorSnapshot.context.selection,
       value: getValue({editorActorSnapshot, slateEditorInstance}),
     },
+    beta: {
+      hasTag: (tag) => editorActorSnapshot.hasTag(tag),
+    },
   }
 }