@portabletext/editor 1.22.0 → 1.24.0

package/lib/selectors/index.d.cts

@@ -15,11 +15,61 @@ import {
   PortableTextTextBlock,
 } from '@sanity/types'
 
+declare type Converter<TMIMEType extends MIMEType = MIMEType> = {
+  mimeType: TMIMEType
+  serialize: Serializer<TMIMEType>
+  deserialize: Deserializer<TMIMEType>
+}
+
+declare type ConverterEvent<TMIMEType extends MIMEType = MIMEType> =
+  | {
+      type: 'serialize'
+      originEvent: 'copy' | 'cut' | 'unknown'
+    }
+  | {
+      type: 'serialization.failure'
+      mimeType: TMIMEType
+      reason: string
+    }
+  | {
+      type: 'serialization.success'
+      data: string
+      mimeType: TMIMEType
+      originEvent: 'copy' | 'cut' | 'unknown'
+    }
+  | {
+      type: 'deserialize'
+      data: string
+    }
+  | {
+      type: 'deserialization.failure'
+      mimeType: TMIMEType
+      reason: string
+    }
+  | {
+      type: 'deserialization.success'
+      data: Array<PortableTextBlock>
+      mimeType: TMIMEType
+    }
+
+declare type Deserializer<TMIMEType extends MIMEType> = ({
+  context,
+  event,
+}: {
+  context: EditorContext
+  event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'deserialize'>
+}) => PickFromUnion<
+  ConverterEvent<TMIMEType>,
+  'type',
+  'deserialization.success' | 'deserialization.failure'
+>
+
 /**
  * @public
  */
 export declare type EditorContext = {
   activeDecorators: Array<string>
+  converters: Array<Converter>
   keyGenerator: () => string
   schema: EditorSchema
   selection: EditorSelection
@@ -289,6 +339,17 @@ export declare const isSelectionCollapsed: EditorSelector<boolean>
  */
 export declare const isSelectionExpanded: EditorSelector<boolean>
 
+declare type MIMEType = `${string}/${string}`
+
+/**
+ * @alpha
+ */
+declare type PickFromUnion<
+  TUnion,
+  TTagKey extends keyof TUnion,
+  TPickedTags extends TUnion[TTagKey],
+> = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never
+
 /** @internal */
 export declare type PortableTextMemberSchemaTypes = {
   annotations: (ObjectSchemaType & {
@@ -304,4 +365,16 @@ export declare type PortableTextMemberSchemaTypes = {
   lists: BlockListDefinition[]
 }
 
+declare type Serializer<TMIMEType extends MIMEType> = ({
+  context,
+  event,
+}: {
+  context: EditorContext
+  event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'serialize'>
+}) => PickFromUnion<
+  ConverterEvent<TMIMEType>,
+  'type',
+  'serialization.success' | 'serialization.failure'
+>
+
 export {}

package/lib/selectors/index.d.ts

@@ -15,11 +15,61 @@ import {
   PortableTextTextBlock,
 } from '@sanity/types'
 
+declare type Converter<TMIMEType extends MIMEType = MIMEType> = {
+  mimeType: TMIMEType
+  serialize: Serializer<TMIMEType>
+  deserialize: Deserializer<TMIMEType>
+}
+
+declare type ConverterEvent<TMIMEType extends MIMEType = MIMEType> =
+  | {
+      type: 'serialize'
+      originEvent: 'copy' | 'cut' | 'unknown'
+    }
+  | {
+      type: 'serialization.failure'
+      mimeType: TMIMEType
+      reason: string
+    }
+  | {
+      type: 'serialization.success'
+      data: string
+      mimeType: TMIMEType
+      originEvent: 'copy' | 'cut' | 'unknown'
+    }
+  | {
+      type: 'deserialize'
+      data: string
+    }
+  | {
+      type: 'deserialization.failure'
+      mimeType: TMIMEType
+      reason: string
+    }
+  | {
+      type: 'deserialization.success'
+      data: Array<PortableTextBlock>
+      mimeType: TMIMEType
+    }
+
+declare type Deserializer<TMIMEType extends MIMEType> = ({
+  context,
+  event,
+}: {
+  context: EditorContext
+  event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'deserialize'>
+}) => PickFromUnion<
+  ConverterEvent<TMIMEType>,
+  'type',
+  'deserialization.success' | 'deserialization.failure'
+>
+
 /**
  * @public
  */
 export declare type EditorContext = {
   activeDecorators: Array<string>
+  converters: Array<Converter>
   keyGenerator: () => string
   schema: EditorSchema
   selection: EditorSelection
@@ -289,6 +339,17 @@ export declare const isSelectionCollapsed: EditorSelector<boolean>
  */
 export declare const isSelectionExpanded: EditorSelector<boolean>
 
+declare type MIMEType = `${string}/${string}`
+
+/**
+ * @alpha
+ */
+declare type PickFromUnion<
+  TUnion,
+  TTagKey extends keyof TUnion,
+  TPickedTags extends TUnion[TTagKey],
+> = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never
+
 /** @internal */
 export declare type PortableTextMemberSchemaTypes = {
   annotations: (ObjectSchemaType & {
@@ -304,4 +365,16 @@ export declare type PortableTextMemberSchemaTypes = {
   lists: BlockListDefinition[]
 }
 
+declare type Serializer<TMIMEType extends MIMEType> = ({
+  context,
+  event,
+}: {
+  context: EditorContext
+  event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'serialize'>
+}) => PickFromUnion<
+  ConverterEvent<TMIMEType>,
+  'type',
+  'serialization.success' | 'serialization.failure'
+>
+
 export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -61,26 +61,27 @@
     "src"
   ],
   "dependencies": {
+    "@portabletext/to-html": "^2.0.13",
     "@xstate/react": "^5.0.2",
     "debug": "^4.4.0",
     "get-random-values-esm": "^1.0.2",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
+    "react-compiler-runtime": "19.0.0-beta-decd7b8-20250118",
     "slate": "0.112.0",
     "slate-dom": "^0.111.0",
-    "slate-react": "0.112.0",
+    "slate-react": "0.112.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.0",
-    "@portabletext/patches": "1.1.1"
+    "@portabletext/block-tools": "1.1.1",
+    "@portabletext/patches": "1.1.2"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
-    "@sanity/diff-match-patch": "^3.1.2",
-    "@sanity/pkg-utils": "^7.0.1",
-    "@sanity/schema": "^3.70.0",
-    "@sanity/types": "^3.70.0",
+    "@sanity/diff-match-patch": "^3.2.0",
+    "@sanity/pkg-utils": "^7.0.2",
+    "@sanity/schema": "^3.71.0",
+    "@sanity/types": "^3.71.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -91,11 +92,11 @@
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^2.1.8",
-    "@vitest/coverage-istanbul": "^2.1.8",
-    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "@vitest/browser": "^3.0.2",
+    "@vitest/coverage-istanbul": "^3.0.2",
+    "babel-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",
     "eslint": "8.57.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "eslint-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",
     "eslint-plugin-react-hooks": "^5.1.0",
     "jsdom": "^26.0.0",
     "react": "^19.0.0",
@@ -103,13 +104,13 @@
     "rxjs": "^7.8.1",
     "typescript": "5.7.3",
     "vite": "^6.0.4",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.2",
     "vitest-browser-react": "^0.0.4",
     "racejar": "1.1.1"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.70.0",
-    "@sanity/types": "^3.70.0",
+    "@sanity/schema": "^3.71.0",
+    "@sanity/types": "^3.71.0",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.1"
   },
@@ -129,8 +130,12 @@
     "lint:fix": "biome lint --write .",
     "test": "vitest --run",
     "test:watch": "vitest",
-    "test:chromium": "vitest --run --project chromium",
-    "test:chromium:watch": "vitest --project chromium",
+    "test:chromium": "vitest --run --project \"browser (chromium)\"",
+    "test:chromium:watch": "vitest --project \"browser (chromium)\"",
+    "test:firefox": "vitest --run --project \"browser (firefox)\"",
+    "test:firefox:watch": "vitest --project \"browser (firefox)\"",
+    "test:webkit": "vitest --run --project \"browser (webkit)\"",
+    "test:webkit:watch": "vitest --project \"browser (webkit)\"",
     "test:unit": "vitest --run --project unit",
     "test:unit:watch": "vitest --project unit"
   }

package/src/behavior-actions/behavior.action.data-transfer-set.ts

@@ -0,0 +1,7 @@
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const dataTransferSetActionImplementation: BehaviorActionImplementation<
+  'data transfer.set'
+> = ({action}) => {
+  action.dataTransfer.setData(action.mimeType, action.data)
+}

package/src/behavior-actions/behavior.action.insert-blocks.ts

@@ -0,0 +1,61 @@
+import {isEqual, uniq} from 'lodash'
+import {Editor, Transforms} from 'slate'
+import {isEqualToEmptyEditor, toSlateValue} from '../internal-utils/values'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const insertBlocksActionImplementation: BehaviorActionImplementation<
+  'insert.blocks'
+> = ({context, action}) => {
+  const fragment = toSlateValue(action.blocks, {schemaTypes: context.schema})
+
+  if (!action.editor.selection) {
+    return
+  }
+  // Ensure that markDefs for any annotations inside this fragment are copied over to the focused text block.
+  const [focusBlock, focusPath] = Editor.node(
+    action.editor,
+    action.editor.selection,
+    {
+      depth: 1,
+    },
+  )
+
+  if (
+    action.editor.isTextBlock(focusBlock) &&
+    action.editor.isTextBlock(fragment[0])
+  ) {
+    const {markDefs} = focusBlock
+    if (!isEqual(markDefs, fragment[0].markDefs)) {
+      Transforms.setNodes(
+        action.editor,
+        {
+          markDefs: uniq([
+            ...(fragment[0].markDefs || []),
+            ...(markDefs || []),
+          ]),
+        },
+        {at: focusPath, mode: 'lowest', voids: false},
+      )
+    }
+  }
+
+  const isPasteToEmptyEditor = isEqualToEmptyEditor(
+    action.editor.children,
+    context.schema,
+  )
+
+  if (isPasteToEmptyEditor) {
+    // Special case for pasting directly into an empty editor (a placeholder block).
+    // When pasting content starting with multiple empty blocks,
+    // `editor.insertFragment` can potentially duplicate the keys of
+    // the placeholder block because of operations that happen
+    // inside `editor.insertFragment` (involves an `insert_node` operation).
+    // However by splitting the placeholder block first in this situation we are good.
+    Transforms.splitNodes(action.editor, {at: [0, 0]})
+    action.editor.insertFragment(fragment)
+    Transforms.removeNodes(action.editor, {at: [0]})
+  } else {
+    // All other inserts
+    action.editor.insertFragment(fragment)
+  }
+}

package/src/behavior-actions/behavior.actions.ts

@@ -28,7 +28,9 @@ import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
 import type {PickFromUnion} from '../type-utils'
 import {blockOffsetToSpanSelectionPoint} from '../utils/util.block-offset'
 import {insertBlock} from './behavior.action-utils.insert-block'
+import {dataTransferSetActionImplementation} from './behavior.action.data-transfer-set'
 import {insertBlockObjectActionImplementation} from './behavior.action.insert-block-object'
+import {insertBlocksActionImplementation} from './behavior.action.insert-blocks'
 import {
   insertBreakActionImplementation,
   insertSoftBreakActionImplementation,
@@ -75,6 +77,7 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'blur': ({action}) => {
     ReactEditor.blur(action.editor)
   },
+  'data transfer.set': dataTransferSetActionImplementation,
   'decorator.add': addDecoratorActionImplementation,
   'decorator.remove': removeDecoratorActionImplementation,
   'decorator.toggle': toggleDecoratorActionImplementation,
@@ -143,6 +146,22 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
       at: range,
     })
   },
+  'deserialization.failure': ({action}) => {
+    console.error(
+      `Deserialization of ${action.mimeType} failed with reason ${action.reason}`,
+    )
+  },
+  'deserialization.success': ({context, action}) => {
+    insertBlocksActionImplementation({
+      context,
+      action: {
+        type: 'insert.blocks',
+        blocks: action.data,
+        editor: action.editor,
+      },
+    })
+  },
+  'insert.blocks': insertBlocksActionImplementation,
   'insert.block object': insertBlockObjectActionImplementation,
   'insert.break': insertBreakActionImplementation,
   'insert.inline object': insertInlineObjectActionImplementation,
@@ -260,6 +279,20 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
 
     Transforms.select(action.editor, nextBlockPath)
   },
+  'serialization.failure': ({action}) => {
+    console.error(
+      `Serialization of ${action.mimeType} failed with reason ${action.reason}`,
+    )
+  },
+  'serialization.success': ({context, action}) => {
+    dataTransferSetActionImplementation({
+      context,
+      action: {
+        ...action,
+        type: 'data transfer.set',
+      },
+    })
+  },
   'style.toggle': toggleStyleActionImplementation,
   'style.add': addStyleActionImplementation,
   'style.remove': removeStyleActionImplementation,
@@ -457,6 +490,13 @@ function performDefaultAction({
       })
       break
     }
+    case 'data transfer.set': {
+      behaviorActionImplementations['data transfer.set']({
+        context,
+        action,
+      })
+      break
+    }
     case 'decorator.toggle': {
       behaviorActionImplementations['decorator.toggle']({
         context,
@@ -478,6 +518,20 @@ function performDefaultAction({
       })
       break
     }
+    case 'deserialization.failure': {
+      behaviorActionImplementations['deserialization.failure']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'deserialization.success': {
+      behaviorActionImplementations['deserialization.success']({
+        context,
+        action,
+      })
+      break
+    }
     case 'focus': {
       behaviorActionImplementations.focus({
         context,
@@ -485,6 +539,13 @@ function performDefaultAction({
       })
       break
     }
+    case 'insert.blocks': {
+      behaviorActionImplementations['insert.blocks']({
+        context,
+        action,
+      })
+      break
+    }
     case 'insert.block object': {
       behaviorActionImplementations['insert.block object']({
         context,
@@ -534,6 +595,20 @@ function performDefaultAction({
       })
       break
     }
+    case 'serialization.failure': {
+      behaviorActionImplementations['serialization.failure']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'serialization.success': {
+      behaviorActionImplementations['serialization.success']({
+        context,
+        action,
+      })
+      break
+    }
     default: {
       behaviorActionImplementations['style.toggle']({
         context,

package/src/behaviors/behavior.core.deserialize.ts

@@ -0,0 +1,46 @@
+import {defineBehavior, raise} from './behavior.types'
+
+export const coreDeserializeBehavior = defineBehavior({
+  on: 'deserialize',
+  guard: ({context, event}) => {
+    const deserializeEvents = context.converters.flatMap((converter) => {
+      const data = event.dataTransfer.getData(converter.mimeType)
+
+      if (!data) {
+        return []
+      }
+
+      return [
+        converter.deserialize({context, event: {type: 'deserialize', data}}),
+      ]
+    })
+
+    const firstSuccess = deserializeEvents.find(
+      (deserializeEvent) => deserializeEvent.type === 'deserialization.success',
+    )
+
+    if (!firstSuccess) {
+      return {
+        type: 'deserialization.failure',
+        mimeType: '*/*',
+        reason: deserializeEvents
+          .map((deserializeEvent) =>
+            deserializeEvent.type === 'deserialization.failure'
+              ? deserializeEvent.reason
+              : '',
+          )
+          .join(', '),
+      } as const
+    }
+
+    return firstSuccess
+  },
+  actions: [
+    ({event}, deserializeEvent) => [
+      raise({
+        ...deserializeEvent,
+        dataTransfer: event.dataTransfer,
+      }),
+    ],
+  ],
+})

package/src/behaviors/behavior.core.serialize.ts

@@ -0,0 +1,44 @@
+import {defineBehavior, raise} from './behavior.types'
+
+export const coreSerializeBehaviors = {
+  'serialize': defineBehavior({
+    on: 'serialize',
+    guard: ({context, event}) => {
+      if (context.converters.length === 0) {
+        return false
+      }
+
+      const serializeEvents = context.converters.map((converter) =>
+        converter.serialize({context, event}),
+      )
+
+      if (serializeEvents.length === 0) {
+        return false
+      }
+
+      return serializeEvents
+    },
+    actions: [
+      ({event}, serializeEvents) =>
+        serializeEvents.map((serializeEvent) =>
+          raise({
+            ...serializeEvent,
+            dataTransfer: event.dataTransfer,
+          }),
+        ),
+    ],
+  }),
+  'serialization.success': defineBehavior({
+    on: 'serialization.success',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'data transfer.set',
+          data: event.data,
+          dataTransfer: event.dataTransfer,
+          mimeType: event.mimeType,
+        }),
+      ],
+    ],
+  }),
+}

package/src/behaviors/behavior.core.ts

@@ -1,6 +1,8 @@
 import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
 import {coreDecoratorBehaviors} from './behavior.core.decorators'
+import {coreDeserializeBehavior} from './behavior.core.deserialize'
 import {coreListBehaviors} from './behavior.core.lists'
+import {coreSerializeBehaviors} from './behavior.core.serialize'
 import {defineBehavior} from './behavior.types'
 
 const softReturn = defineBehavior({
@@ -17,6 +19,7 @@ export const coreBehaviors = [
   coreDecoratorBehaviors.emShortcut,
   coreDecoratorBehaviors.underlineShortcut,
   coreDecoratorBehaviors.codeShortcut,
+  coreDeserializeBehavior,
   coreBlockObjectBehaviors.arrowDownOnLonelyBlockObject,
   coreBlockObjectBehaviors.arrowUpOnLonelyBlockObject,
   coreBlockObjectBehaviors.breakingBlockObject,
@@ -27,6 +30,8 @@ export const coreBehaviors = [
   coreListBehaviors.clearListOnEnter,
   coreListBehaviors.indentListOnTab,
   coreListBehaviors.unindentListOnShiftTab,
+  coreSerializeBehaviors.serialize,
+  coreSerializeBehaviors['serialization.success'],
 ]
 
 /**
@@ -35,6 +40,8 @@ export const coreBehaviors = [
 export const coreBehavior = {
   softReturn,
   decorators: coreDecoratorBehaviors,
+  deserialize: coreDeserializeBehavior,
   blockObjects: coreBlockObjectBehaviors,
   lists: coreListBehaviors,
+  ...coreSerializeBehaviors,
 }

package/src/behaviors/behavior.types.ts

@@ -1,7 +1,13 @@
-import type {KeyedSegment, PortableTextTextBlock} from '@sanity/types'
+import type {
+  KeyedSegment,
+  PortableTextBlock,
+  PortableTextTextBlock,
+} from '@sanity/types'
 import type {TextUnit} from 'slate'
 import type {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
+import type {ConverterEvent} from '../converters/converter'
 import type {EditorContext} from '../editor/editor-snapshot'
+import type {MIMEType} from '../internal-utils/mime-type'
 import type {OmitFromUnion, PickFromUnion} from '../type-utils'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 
@@ -25,6 +31,12 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'blur'
     }
+  | {
+      type: 'data transfer.set'
+      data: string
+      dataTransfer: DataTransfer
+      mimeType: MIMEType
+    }
   | {
       type: 'decorator.toggle'
       decorator: string
@@ -40,6 +52,10 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'focus'
     }
+  | {
+      type: 'insert.blocks'
+      blocks: Array<PortableTextBlock>
+    }
   | {
       type: 'insert.block object'
       placement: 'auto' | 'after' | 'before'
@@ -78,6 +94,14 @@ export type SyntheticBehaviorEvent =
       type: 'style.toggle'
       style: string
     }
+  | (PickFromUnion<
+      ConverterEvent,
+      'type',
+      | 'deserialization.failure'
+      | 'deserialization.success'
+      | 'serialization.failure'
+      | 'serialization.success'
+    > & {dataTransfer: DataTransfer})
 
 /**
  * @beta
@@ -87,6 +111,10 @@ export type NativeBehaviorEvent =
       type: 'copy'
       data: DataTransfer
     }
+  | {
+      type: 'deserialize'
+      dataTransfer: DataTransfer
+    }
   | {
       type: 'key.down'
       keyboardEvent: Pick<
@@ -105,6 +133,11 @@ export type NativeBehaviorEvent =
       type: 'paste'
       data: DataTransfer
     }
+  | {
+      type: 'serialize'
+      originEvent: 'copy' | 'cut' | 'unknown'
+      dataTransfer: DataTransfer
+    }
 
 /**
  * @beta
@@ -261,7 +294,11 @@ export type BehaviorEvent =
 export type Behavior<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
   TGuardResponse = true,
-  TBehaviorEvent extends BehaviorEvent = BehaviorEvent,
+  TBehaviorEvent extends BehaviorEvent = PickFromUnion<
+    BehaviorEvent,
+    'type',
+    TBehaviorEventType
+  >,
 > = {
   /**
    * The internal editor event that triggers this behavior.