@portabletext/editor 2.3.7 → 2.4.0

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react22 from "react";
+import * as react12 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react12.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react22.JSX.Element;
+declare function OneLinePlugin(): react12.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.js";
-import * as _sanity_types9 from "@sanity/types";
+import * as _sanity_types8 from "@sanity/types";
 import { KeyedSegment, PortableTextBlock, PortableTextChild, PortableTextSpan, PortableTextTextBlock } from "@sanity/types";
 /**
  * @public
@@ -150,7 +150,7 @@ declare function mergeTextBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>;
   targetBlock: PortableTextTextBlock;
   incomingBlock: PortableTextTextBlock;
-}): PortableTextTextBlock<_sanity_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.3.7",
+  "version": "2.4.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,16 +79,16 @@
     "slate-dom": "^0.117.4",
     "slate-react": "0.117.4",
     "xstate": "^5.20.2",
-    "@portabletext/block-tools": "3.2.0",
-    "@portabletext/keyboard-shortcuts": "1.1.1",
-    "@portabletext/patches": "1.1.6",
-    "@portabletext/schema": "1.0.0"
+    "@portabletext/block-tools": "^3.3.0",
+    "@portabletext/keyboard-shortcuts": "^1.1.1",
+    "@portabletext/schema": "^1.0.0",
+    "@portabletext/patches": "^1.1.6"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.11.1",
-    "@sanity/schema": "^4.4.1",
-    "@sanity/types": "^4.4.1",
+    "@sanity/schema": "^4.5.0",
+    "@sanity/types": "^4.5.0",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.16",
@@ -111,18 +111,18 @@
     "vite": "^7.0.6",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
-    "@portabletext/sanity-bridge": "1.1.1",
-    "racejar": "1.2.12"
+    "racejar": "1.2.12",
+    "@portabletext/sanity-bridge": "1.1.2"
   },
   "peerDependencies": {
-    "@sanity/schema": "^4.4.1",
-    "@sanity/types": "^4.4.1",
+    "@sanity/schema": "^4.5.0",
+    "@sanity/types": "^4.5.0",
     "react": "^18.3 || ^19",
     "rxjs": "^7.8.2",
-    "@portabletext/sanity-bridge": "1.1.1"
+    "@portabletext/sanity-bridge": "^1.1.2"
   },
   "engines": {
-    "node": ">=20.19"
+    "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,247 @@
+import {isTextBlock} from '../internal-utils/parse-blocks'
+import * as selectors from '../selectors'
+import {getActiveDecorators} from '../selectors/selector.get-active-decorators'
+import {getTextBlockText} from '../utils/util.get-text-block-text'
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const abstractDeserializeBehaviors = [
+  defineBehavior({
+    on: 'deserialize',
+    guard: ({event}) => {
+      const portableText = event.originEvent.originEvent.dataTransfer.getData(
+        'application/x-portable-text',
+      )
+
+      if (portableText) {
+        return {
+          type: 'deserialize.data',
+          mimeType: 'application/x-portable-text',
+          data: portableText,
+          originEvent: event.originEvent,
+        } as const
+      }
+
+      const json =
+        event.originEvent.originEvent.dataTransfer.getData('application/json')
+
+      if (json) {
+        return {
+          type: 'deserialize.data',
+          mimeType: 'application/json',
+          data: json,
+          originEvent: event.originEvent,
+        } as const
+      }
+
+      const html =
+        event.originEvent.originEvent.dataTransfer.getData('text/html')
+
+      if (html) {
+        return {
+          type: 'deserialize.data',
+          mimeType: 'text/html',
+          data: html,
+          originEvent: event.originEvent,
+        } as const
+      }
+
+      const text =
+        event.originEvent.originEvent.dataTransfer.getData('text/plain')
+
+      if (text) {
+        return {
+          type: 'deserialize.data',
+          mimeType: 'text/plain',
+          data: text,
+          originEvent: event.originEvent,
+        } as const
+      }
+
+      return false
+    },
+    actions: [(_, deserializeEvent) => [raise(deserializeEvent)]],
+  }),
+  defineBehavior({
+    on: 'deserialize',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'deserialization.failure',
+          mimeType: '*/*',
+          reason: 'No Behavior was able to handle the incoming data',
+          originEvent: event.originEvent,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'deserialize.data',
+    guard: ({snapshot, event}) => {
+      const converter = snapshot.context.converters.find(
+        (converter) => converter.mimeType === event.mimeType,
+      )
+
+      if (!converter) {
+        return false
+      }
+
+      return converter.deserialize({
+        snapshot,
+        event: {
+          type: 'deserialize',
+          data: event.data,
+        },
+      })
+    },
+    actions: [
+      ({event}, deserializeEvent) => [
+        raise({
+          ...deserializeEvent,
+          originEvent: event.originEvent,
+        }),
+      ],
+    ],
+  }),
+  /**
+   * If we are pasting text/plain into a text block then we can probably
+   * assume that the intended behavior is that the pasted text inherits
+   * formatting from the text it's pasted into.
+   */
+  defineBehavior({
+    on: 'deserialization.success',
+    guard: ({snapshot, event}) => {
+      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
+
+      if (
+        focusTextBlock &&
+        event.mimeType === 'text/plain' &&
+        event.originEvent.type === 'clipboard.paste'
+      ) {
+        const activeDecorators = getActiveDecorators(snapshot)
+        const activeAnnotations = selectors.getActiveAnnotations(snapshot)
+
+        return {
+          activeAnnotations,
+          activeDecorators,
+          textRuns: event.data.flatMap((block) =>
+            isTextBlock(snapshot.context, block)
+              ? [getTextBlockText(block)]
+              : [],
+          ),
+        }
+      }
+
+      return false
+    },
+    actions: [
+      (_, {activeAnnotations, activeDecorators, textRuns}) =>
+        textRuns.flatMap((textRun, index) =>
+          index !== textRuns.length - 1
+            ? [
+                raise({
+                  type: 'insert.span',
+                  text: textRun,
+                  decorators: activeDecorators,
+                  annotations: activeAnnotations.map(
+                    ({_key, _type, ...value}) => ({
+                      name: _type,
+                      value,
+                    }),
+                  ),
+                }),
+                raise({type: 'insert.break'}),
+              ]
+            : [
+                raise({
+                  type: 'insert.span',
+                  text: textRun,
+                  decorators: activeDecorators,
+                  annotations: activeAnnotations.map(
+                    ({_key, _type, ...value}) => ({
+                      name: _type,
+                      value,
+                    }),
+                  ),
+                }),
+              ],
+        ),
+    ],
+  }),
+  defineBehavior({
+    on: 'deserialization.success',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'insert.blocks',
+          blocks: event.data,
+          placement: 'auto',
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'deserialization.failure',
+    guard: ({event}) => {
+      if (event.mimeType === 'application/x-portable-text') {
+        const json =
+          event.originEvent.originEvent.dataTransfer.getData('application/json')
+
+        if (json) {
+          return {
+            type: 'deserialize.data',
+            mimeType: 'application/json',
+            data: json,
+            originEvent: event.originEvent,
+          } as const
+        }
+      }
+
+      if (event.mimeType === 'application/json') {
+        const html =
+          event.originEvent.originEvent.dataTransfer.getData('text/html')
+
+        if (html) {
+          return {
+            type: 'deserialize.data',
+            mimeType: 'text/html',
+            data: html,
+            originEvent: event.originEvent,
+          } as const
+        }
+      }
+
+      if (event.mimeType === 'text/html') {
+        const text =
+          event.originEvent.originEvent.dataTransfer.getData('text/plain')
+
+        if (text) {
+          return {
+            type: 'deserialize.data',
+            mimeType: 'text/plain',
+            data: text,
+            originEvent: event.originEvent,
+          } as const
+        }
+      }
+
+      return false
+    },
+    actions: [(_, deserializeDataEvent) => [raise(deserializeDataEvent)]],
+  }),
+  defineBehavior({
+    on: 'deserialization.failure',
+    actions: [
+      ({event}) => [
+        {
+          type: 'effect',
+          effect: () => {
+            console.warn(
+              `Deserialization of ${event.mimeType} failed with reason "${event.reason}"`,
+            )
+          },
+        },
+      ],
+    ],
+  }),
+]

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

@@ -0,0 +1,91 @@
+import {raise} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export const abstractSerializeBehaviors = [
+  defineBehavior({
+    on: 'serialize',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'serialize.data',
+          mimeType: 'application/x-portable-text',
+          originEvent: event.originEvent,
+        }),
+        raise({
+          type: 'serialize.data',
+          mimeType: 'application/json',
+          originEvent: event.originEvent,
+        }),
+        raise({
+          type: 'serialize.data',
+          mimeType: 'text/html',
+          originEvent: event.originEvent,
+        }),
+        raise({
+          type: 'serialize.data',
+          mimeType: 'text/plain',
+          originEvent: event.originEvent,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'serialize.data',
+    guard: ({snapshot, event}) => {
+      const converter = snapshot.context.converters.find(
+        (converter) => converter.mimeType === event.mimeType,
+      )
+
+      if (!converter) {
+        return false
+      }
+
+      return converter.serialize({
+        snapshot,
+        event: {
+          type: 'serialize',
+          originEvent: event.originEvent.type,
+        },
+      })
+    },
+    actions: [
+      ({event}, serializeEvent) => [
+        raise({
+          ...serializeEvent,
+          originEvent: event.originEvent,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'serialization.success',
+    actions: [
+      ({event}) => [
+        {
+          type: 'effect',
+          effect: () => {
+            event.originEvent.originEvent.dataTransfer.setData(
+              event.mimeType,
+              event.data,
+            )
+          },
+        },
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'serialization.failure',
+    actions: [
+      ({event}) => [
+        {
+          type: 'effect',
+          effect: () => {
+            console.warn(
+              `Serialization of ${event.mimeType} failed with reason "${event.reason}"`,
+            )
+          },
+        },
+      ],
+    ],
+  }),
+]

package/src/behaviors/behavior.abstract.ts

@@ -1,108 +1,19 @@
-import type {ConverterEvent} from '../converters/converter.types'
-import {isTextBlock} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
-import {getActiveDecorators} from '../selectors/selector.get-active-decorators'
-import type {PickFromUnion} from '../type-utils'
-import {getTextBlockText} from '../utils'
 import {abstractAnnotationBehaviors} from './behavior.abstract.annotation'
 import {abstractDecoratorBehaviors} from './behavior.abstract.decorator'
 import {abstractDeleteBehaviors} from './behavior.abstract.delete'
+import {abstractDeserializeBehaviors} from './behavior.abstract.deserialize'
 import {abstractInsertBehaviors} from './behavior.abstract.insert'
 import {abstractKeyboardBehaviors} from './behavior.abstract.keyboard'
 import {abstractListItemBehaviors} from './behavior.abstract.list-item'
 import {abstractMoveBehaviors} from './behavior.abstract.move'
 import {abstractSelectBehaviors} from './behavior.abstract.select'
+import {abstractSerializeBehaviors} from './behavior.abstract.serialize'
 import {abstractSplitBehaviors} from './behavior.abstract.split'
 import {abstractStyleBehaviors} from './behavior.abstract.style'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
-const raiseDeserializationSuccessOrFailure = defineBehavior({
-  on: 'deserialize',
-  guard: ({snapshot, event}) => {
-    let success:
-      | PickFromUnion<ConverterEvent, 'type', 'deserialization.success'>
-      | undefined
-    const failures: Array<
-      PickFromUnion<ConverterEvent, 'type', 'deserialization.failure'>
-    > = []
-
-    for (const converter of snapshot.context.converters) {
-      const data = event.originEvent.originEvent.dataTransfer.getData(
-        converter.mimeType,
-      )
-
-      if (!data) {
-        continue
-      }
-
-      const deserializeEvent = converter.deserialize({
-        snapshot,
-        event: {type: 'deserialize', data},
-      })
-
-      if (deserializeEvent.type === 'deserialization.success') {
-        success = deserializeEvent
-        break
-      } else {
-        failures.push(deserializeEvent)
-      }
-    }
-
-    if (!success) {
-      return {
-        type: 'deserialization.failure',
-        mimeType: '*/*',
-        reason: failures.map((failure) => failure.reason).join(', '),
-      } as const
-    }
-
-    return success
-  },
-  actions: [
-    ({event}, deserializeEvent) => [
-      raise({
-        ...deserializeEvent,
-        originEvent: event.originEvent,
-      }),
-    ],
-  ],
-})
-
-const raiseSerializationSuccessOrFailure = defineBehavior({
-  on: 'serialize',
-  guard: ({snapshot, event}) => {
-    if (snapshot.context.converters.length === 0) {
-      return false
-    }
-
-    const serializeEvents = snapshot.context.converters.map((converter) =>
-      converter.serialize({
-        snapshot,
-        event: {
-          ...event,
-          originEvent: event.originEvent.type,
-        },
-      }),
-    )
-
-    if (serializeEvents.length === 0) {
-      return false
-    }
-
-    return serializeEvents
-  },
-  actions: [
-    ({event}, serializeEvents) =>
-      serializeEvents.map((serializeEvent) => {
-        return raise({
-          ...serializeEvent,
-          originEvent: event.originEvent,
-        })
-      }),
-  ],
-})
-
 export const abstractBehaviors = [
   defineBehavior({
     on: 'clipboard.copy',
@@ -168,130 +79,7 @@ export const abstractBehaviors = [
       ],
     ],
   }),
-  defineBehavior({
-    on: 'serialization.success',
-    actions: [
-      ({event}) => [
-        {
-          type: 'effect',
-          effect: () => {
-            event.originEvent.originEvent.dataTransfer.setData(
-              event.mimeType,
-              event.data,
-            )
-          },
-        },
-      ],
-    ],
-  }),
-  defineBehavior({
-    on: 'serialization.failure',
-    actions: [
-      ({event}) => [
-        {
-          type: 'effect',
-          effect: () => {
-            console.warn(
-              `Serialization of ${event.mimeType} failed with reason "${event.reason}"`,
-            )
-          },
-        },
-      ],
-    ],
-  }),
-
-  /**
-   * If we are pasting text/plain into a text block then we can probably
-   * assume that the intended behavior is that the pasted text inherits
-   * formatting from the text it's pasted into.
-   */
-  defineBehavior({
-    on: 'deserialization.success',
-    guard: ({snapshot, event}) => {
-      const focusTextBlock = selectors.getFocusTextBlock(snapshot)
 
-      if (
-        focusTextBlock &&
-        event.mimeType === 'text/plain' &&
-        event.originEvent.type === 'clipboard.paste'
-      ) {
-        const activeDecorators = getActiveDecorators(snapshot)
-        const activeAnnotations = selectors.getActiveAnnotations(snapshot)
-
-        return {
-          activeAnnotations,
-          activeDecorators,
-          textRuns: event.data.flatMap((block) =>
-            isTextBlock(snapshot.context, block)
-              ? [getTextBlockText(block)]
-              : [],
-          ),
-        }
-      }
-
-      return false
-    },
-    actions: [
-      (_, {activeAnnotations, activeDecorators, textRuns}) =>
-        textRuns.flatMap((textRun, index) =>
-          index !== textRuns.length - 1
-            ? [
-                raise({
-                  type: 'insert.span',
-                  text: textRun,
-                  decorators: activeDecorators,
-                  annotations: activeAnnotations.map(
-                    ({_key, _type, ...value}) => ({
-                      name: _type,
-                      value,
-                    }),
-                  ),
-                }),
-                raise({type: 'insert.break'}),
-              ]
-            : [
-                raise({
-                  type: 'insert.span',
-                  text: textRun,
-                  decorators: activeDecorators,
-                  annotations: activeAnnotations.map(
-                    ({_key, _type, ...value}) => ({
-                      name: _type,
-                      value,
-                    }),
-                  ),
-                }),
-              ],
-        ),
-    ],
-  }),
-  defineBehavior({
-    on: 'deserialization.success',
-    actions: [
-      ({event}) => [
-        raise({
-          type: 'insert.blocks',
-          blocks: event.data,
-          placement: 'auto',
-        }),
-      ],
-    ],
-  }),
-  defineBehavior({
-    on: 'deserialization.failure',
-    actions: [
-      ({event}) => [
-        {
-          type: 'effect',
-          effect: () => {
-            console.warn(
-              `Deserialization of ${event.mimeType} failed with reason "${event.reason}"`,
-            )
-          },
-        },
-      ],
-    ],
-  }),
   defineBehavior({
     on: 'clipboard.paste',
     guard: ({snapshot}) => {
@@ -338,13 +126,13 @@ export const abstractBehaviors = [
   ...abstractAnnotationBehaviors,
   ...abstractDecoratorBehaviors,
   ...abstractDeleteBehaviors,
+  ...abstractDeserializeBehaviors,
   ...abstractInsertBehaviors,
   ...abstractKeyboardBehaviors,
   ...abstractListItemBehaviors,
   ...abstractMoveBehaviors,
   ...abstractStyleBehaviors,
   ...abstractSelectBehaviors,
+  ...abstractSerializeBehaviors,
   ...abstractSplitBehaviors,
-  raiseDeserializationSuccessOrFailure,
-  raiseSerializationSuccessOrFailure,
 ]