@portabletext/editor 1.34.1 → 1.35.1

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

@@ -4,19 +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 createContext(schema: SchemaDefinition) {
-  return {
-    converters: coreConverters,
-    activeDecorators: [],
-    keyGenerator: createTestKeyGenerator(),
-    schema: compileSchemaDefinition(schema),
-    selection: null,
-    value: [],
-  }
+function createSnapshot(schema: SchemaDefinition) {
+  return createTestSnapshot({
+    context: {
+      converters: coreConverters,
+      schema: compileSchemaDefinition(schema),
+    },
+  })
 }
 
 const decoratedParagraph =
@@ -31,7 +29,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('paragraph with unknown decorators', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(defineSchema({})),
+        snapshot: createSnapshot(defineSchema({})),
         event: {
           type: 'deserialize',
           data: decoratedParagraph,
@@ -60,7 +58,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('paragraph with known decorators', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(
+        snapshot: createSnapshot(
           defineSchema({
             decorators: [{name: 'strong'}, {name: 'em'}, {name: 'code'}],
           }),
@@ -105,7 +103,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('image', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(
+        snapshot: createSnapshot(
           defineSchema({
             blockObjects: [{name: 'image'}],
           }),
@@ -123,7 +121,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('paragraph with unknown link', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(defineSchema({})),
+        snapshot: createSnapshot(defineSchema({})),
         event: {
           type: 'deserialize',
           data: paragraphWithLink,
@@ -152,7 +150,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('paragraph with known link', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(
+        snapshot: createSnapshot(
           defineSchema({
             annotations: [{name: 'link'}],
           }),
@@ -197,7 +195,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('unordered list', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(
+        snapshot: createSnapshot(
           defineSchema({
             lists: [{name: 'bullet'}],
           }),
@@ -248,7 +246,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('ordered list', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(
+        snapshot: createSnapshot(
           defineSchema({
             lists: [{name: 'number'}],
           }),
@@ -299,7 +297,7 @@ describe(converterTextHtml.deserialize.name, () => {
   test('nested list', () => {
     expect(
       converterTextHtml.deserialize({
-        context: createContext(
+        snapshot: createSnapshot(
           defineSchema({
             lists: [{name: 'bullet'}, {name: 'number'}],
           }),

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'
@@ -75,22 +75,22 @@ const paragraphWithInlineBlock: PortableTextTextBlock = {
   ],
 }
 
-function createContext(schema: SchemaDefinition, selection: EditorSelection) {
-  return {
-    converters: coreConverters,
-    activeDecorators: [],
-    keyGenerator: createTestKeyGenerator(),
-    schema: compileSchemaDefinition(schema),
-    selection,
-    value: [decoratedParagraph, image, b2, paragraphWithInlineBlock],
-  }
+function createSnapshot(schema: SchemaDefinition, selection: EditorSelection) {
+  return createTestSnapshot({
+    context: {
+      converters: coreConverters,
+      schema: compileSchemaDefinition(schema),
+      selection,
+      value: [decoratedParagraph, image, b2, paragraphWithInlineBlock],
+    },
+  })
 }
 
 describe(converterTextHtml.serialize.name, () => {
   test('paragraph with decorators', () => {
     expect(
       converterTextHtml.serialize({
-        context: createContext(defineSchema({}), {
+        snapshot: createSnapshot(defineSchema({}), {
           anchor: {
             path: [
               {_key: decoratedParagraph._key},
@@ -121,7 +121,7 @@ describe(converterTextHtml.serialize.name, () => {
   test('image', () => {
     expect(
       converterTextHtml.serialize({
-        context: createContext(defineSchema({}), {
+        snapshot: createSnapshot(defineSchema({}), {
           anchor: {
             path: [{_key: image._key}],
             offset: 0,
@@ -144,7 +144,7 @@ describe(converterTextHtml.serialize.name, () => {
   test('inline object', () => {
     expect(
       converterTextHtml.serialize({
-        context: createContext(defineSchema({}), {
+        snapshot: createSnapshot(defineSchema({}), {
           anchor: {
             path: [
               {_key: paragraphWithInlineBlock._key},
@@ -175,52 +175,51 @@ describe(converterTextHtml.serialize.name, () => {
   test('lists', () => {
     expect(
       converterTextHtml.serialize({
-        context: {
-          converters: coreConverters,
-          activeDecorators: [],
-          keyGenerator: createTestKeyGenerator(),
-          schema: compileSchemaDefinition(defineSchema({})),
-          value: [
-            {
-              _key: 'k0',
-              _type: 'block',
-              children: [
-                {
-                  _key: 'k1',
-                  _type: 'span',
-                  marks: [],
-                  text: 'foo',
-                },
-              ],
-              level: 1,
-              listItem: 'number',
-            },
-            {
-              _key: 'k2',
-              _type: 'block',
-              children: [
-                {
-                  _key: 'k3',
-                  _type: 'span',
-                  marks: [],
-                  text: 'bar',
-                },
-              ],
-              level: 2,
-              listItem: 'bullet',
-            },
-          ],
-          selection: {
-            anchor: {
-              path: [{_key: 'k0'}, 'children', {_key: 'k1'}],
-              offset: 0,
-            },
-            focus: {
-              path: [{_key: 'k2'}, 'children', {_key: 'k3'}],
-              offset: 3,
+        snapshot: createTestSnapshot({
+          context: {
+            converters: coreConverters,
+            value: [
+              {
+                _key: 'k0',
+                _type: 'block',
+                children: [
+                  {
+                    _key: 'k1',
+                    _type: 'span',
+                    marks: [],
+                    text: 'foo',
+                  },
+                ],
+                level: 1,
+                listItem: 'number',
+              },
+              {
+                _key: 'k2',
+                _type: 'block',
+                children: [
+                  {
+                    _key: 'k3',
+                    _type: 'span',
+                    marks: [],
+                    text: 'bar',
+                  },
+                ],
+                level: 2,
+                listItem: 'bullet',
+              },
+            ],
+            selection: {
+              anchor: {
+                path: [{_key: 'k0'}, 'children', {_key: 'k1'}],
+                offset: 0,
+              },
+              focus: {
+                path: [{_key: 'k2'}, 'children', {_key: 'k3'}],
+                offset: 3,
+              },
             },
           },
-        },
+        }),
         event: {
           type: 'serialize',
           originEvent: 'unknown',

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

@@ -6,8 +6,8 @@ import {defineConverter} from './converter.types'
 
 export const converterTextHtml = defineConverter({
   mimeType: 'text/html',
-  serialize: ({context, event}) => {
-    if (!context.selection) {
+  serialize: ({snapshot, event}) => {
+    if (!snapshot.context.selection) {
       return {
         type: 'serialization.failure',
         mimeType: 'text/html',
@@ -17,8 +17,8 @@ export const converterTextHtml = defineConverter({
     }
 
     const blocks = sliceBlocks({
-      blocks: context.value,
-      selection: context.selection,
+      blocks: snapshot.context.value,
+      selection: snapshot.context.selection,
     })
 
     const html = toHTML(blocks, {
@@ -45,12 +45,16 @@ export const converterTextHtml = defineConverter({
       originEvent: event.originEvent,
     }
   },
-  deserialize: ({context, event}) => {
-    const blocks = htmlToBlocks(event.data, context.schema.portableText, {
-      keyGenerator: context.keyGenerator,
-      unstable_whitespaceOnPasteMode:
-        context.schema.block.options.unstable_whitespaceOnPasteMode,
-    }) as Array<PortableTextBlock>
+  deserialize: ({snapshot, event}) => {
+    const blocks = htmlToBlocks(
+      event.data,
+      snapshot.context.schema.portableText,
+      {
+        keyGenerator: snapshot.context.keyGenerator,
+        unstable_whitespaceOnPasteMode:
+          snapshot.context.schema.block.options.unstable_whitespaceOnPasteMode,
+      },
+    ) as Array<PortableTextBlock>
 
     return {
       type: 'deserialization.success',

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

@@ -5,7 +5,7 @@ import {
   defineSchema,
   type SchemaDefinition,
 } from '../editor/define-schema'
-import type {EditorContext} 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'
@@ -65,27 +65,27 @@ const b4: PortableTextTextBlock = {
   ],
 }
 
-function createContext({
+function createSnapshot({
   schema,
   selection,
 }: {
   schema: SchemaDefinition
   selection: EditorSelection
-}): EditorContext {
-  return {
-    converters: coreConverters,
-    activeDecorators: [],
-    keyGenerator: () => '',
-    schema: compileSchemaDefinition(schema),
-    selection,
-    value: [b1, b2, b3, b4],
-  }
+}) {
+  return createTestSnapshot({
+    context: {
+      converters: coreConverters,
+      schema: compileSchemaDefinition(schema),
+      selection,
+      value: [b1, b2, b3, b4],
+    },
+  })
 }
 
 test(converterTextPlain.serialize.name, () => {
   expect(
     converterTextPlain.serialize({
-      context: createContext({
+      snapshot: createSnapshot({
         schema: defineSchema({}),
         selection: {
           anchor: {
@@ -109,7 +109,7 @@ test(converterTextPlain.serialize.name, () => {
 
   expect(
     converterTextPlain.serialize({
-      context: createContext({
+      snapshot: createSnapshot({
         schema: defineSchema({}),
         selection: {
           anchor: {
@@ -133,7 +133,7 @@ test(converterTextPlain.serialize.name, () => {
 
   expect(
     converterTextPlain.serialize({
-      context: createContext({
+      snapshot: createSnapshot({
         schema: defineSchema({}),
         selection: {
           anchor: {
@@ -157,7 +157,7 @@ test(converterTextPlain.serialize.name, () => {
 
   expect(
     converterTextPlain.serialize({
-      context: createContext({
+      snapshot: createSnapshot({
         schema: defineSchema({
           blockObjects: [
             {
@@ -187,7 +187,7 @@ test(converterTextPlain.serialize.name, () => {
 
   expect(
     converterTextPlain.serialize({
-      context: createContext({
+      snapshot: createSnapshot({
         schema: defineSchema({}),
         selection: {
           anchor: {
@@ -211,7 +211,7 @@ test(converterTextPlain.serialize.name, () => {
 
   expect(
     converterTextPlain.serialize({
-      context: createContext({
+      snapshot: createSnapshot({
         schema: defineSchema({
           inlineObjects: [
             {

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

@@ -5,8 +5,8 @@ import {defineConverter} from './converter.types'
 
 export const converterTextPlain = defineConverter({
   mimeType: 'text/plain',
-  serialize: ({context, event}) => {
-    if (!context.selection) {
+  serialize: ({snapshot, event}) => {
+    if (!snapshot.context.selection) {
       return {
         type: 'serialization.failure',
         mimeType: 'text/plain',
@@ -16,8 +16,8 @@ export const converterTextPlain = defineConverter({
     }
 
     const blocks = sliceBlocks({
-      blocks: context.value,
-      selection: context.selection,
+      blocks: snapshot.context.value,
+      selection: snapshot.context.selection,
     })
 
     const data = blocks
@@ -25,12 +25,12 @@ export const converterTextPlain = defineConverter({
         if (isPortableTextTextBlock(block)) {
           return block.children
             .map((child) => {
-              if (child._type === context.schema.span.name) {
+              if (child._type === snapshot.context.schema.span.name) {
                 return child.text
               }
 
               return `[${
-                context.schema.inlineObjects.find(
+                snapshot.context.schema.inlineObjects.find(
                   (inlineObjectType) => inlineObjectType.name === child._type,
                 )?.title ?? 'Object'
               }]`
@@ -39,7 +39,7 @@ export const converterTextPlain = defineConverter({
         }
 
         return `[${
-          context.schema.blockObjects.find(
+          snapshot.context.schema.blockObjects.find(
             (blockObjectType) => blockObjectType.name === block._type,
           )?.title ?? 'Object'
         }]`
@@ -53,7 +53,7 @@ export const converterTextPlain = defineConverter({
       originEvent: event.originEvent,
     }
   },
-  deserialize: ({context, event}) => {
+  deserialize: ({snapshot, event}) => {
     const html = escapeHtml(event.data)
       .split(/\n{2,}/)
       .map((line) =>
@@ -63,9 +63,13 @@ export const converterTextPlain = defineConverter({
 
     const textToHtml = `<html><body>${html}</body></html>`
 
-    const blocks = htmlToBlocks(textToHtml, context.schema.portableText, {
-      keyGenerator: context.keyGenerator,
-    }) as Array<PortableTextBlock>
+    const blocks = htmlToBlocks(
+      textToHtml,
+      snapshot.context.schema.portableText,
+      {
+        keyGenerator: snapshot.context.keyGenerator,
+      },
+    ) as Array<PortableTextBlock>
 
     return {
       type: 'deserialization.success',

package/src/converters/converter.types.ts

@@ -1,5 +1,5 @@
 import type {PortableTextBlock} from '@sanity/types'
-import type {EditorContext} from '../editor/editor-snapshot'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
 import type {MIMEType} from '../internal-utils/mime-type'
 import type {PickFromUnion} from '../type-utils'
 
@@ -48,10 +48,10 @@ export type ConverterEvent<TMIMEType extends MIMEType = MIMEType> =
     }
 
 export type Serializer<TMIMEType extends MIMEType> = ({
-  context,
+  snapshot,
   event,
 }: {
-  context: EditorContext
+  snapshot: EditorSnapshot
   event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'serialize'>
 }) => PickFromUnion<
   ConverterEvent<TMIMEType>,
@@ -60,10 +60,10 @@ export type Serializer<TMIMEType extends MIMEType> = ({
 >
 
 export type Deserializer<TMIMEType extends MIMEType> = ({
-  context,
+  snapshot,
   event,
 }: {
-  context: EditorContext
+  snapshot: EditorSnapshot
   event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'deserialize'>
 }) => PickFromUnion<
   ConverterEvent<TMIMEType>,

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}