@portabletext/editor 1.22.0 → 1.24.0

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

@@ -0,0 +1,241 @@
+import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
+import {expect, test} from 'vitest'
+import {
+  compileSchemaDefinition,
+  defineSchema,
+  type SchemaDefinition,
+} from '../editor/define-schema'
+import type {EditorContext} from '../editor/editor-snapshot'
+import type {EditorSelection} from '../utils'
+import {converterTextPlain} from './converter.text-plain'
+import {coreConverters} from './converters'
+
+const b1: PortableTextTextBlock = {
+  _type: 'block',
+  _key: 'b1',
+  children: [
+    {
+      _type: 'span',
+      _key: 'b1c1',
+      text: 'foo',
+    },
+    {
+      _type: 'span',
+      _key: 'b1c2',
+      text: 'bar',
+    },
+  ],
+}
+const b2: PortableTextBlock = {
+  _type: 'image',
+  _key: 'b2',
+  src: 'https://example.com/image.jpg',
+  alt: 'Example',
+}
+const b3: PortableTextTextBlock = {
+  _type: 'block',
+  _key: 'b3',
+  children: [
+    {
+      _type: 'span',
+      _key: 'b3c1',
+      text: 'baz',
+    },
+  ],
+}
+const b4: PortableTextTextBlock = {
+  _type: 'block',
+  _key: 'b4',
+  children: [
+    {
+      _type: 'span',
+      _key: 'b4c1',
+      text: 'fizz',
+    },
+    {
+      _type: 'stock-ticker',
+      _key: 'b4c2',
+      symbol: 'AAPL',
+    },
+    {
+      _type: 'span',
+      _key: 'b4c3',
+      text: 'buzz',
+    },
+  ],
+}
+
+function createContext({
+  schema,
+  selection,
+}: {
+  schema: SchemaDefinition
+  selection: EditorSelection
+}): EditorContext {
+  return {
+    converters: coreConverters,
+    activeDecorators: [],
+    keyGenerator: () => '',
+    schema: compileSchemaDefinition(schema),
+    selection,
+    value: [b1, b2, b3, b4],
+  }
+}
+
+test(converterTextPlain.serialize.name, () => {
+  expect(
+    converterTextPlain.serialize({
+      context: createContext({
+        schema: defineSchema({}),
+        selection: {
+          anchor: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 4,
+          },
+        },
+      }),
+      event: {
+        type: 'serialize',
+        originEvent: 'unknown',
+      },
+    }),
+  ).toMatchObject({
+    data: 'baz\n\nfizz',
+  })
+
+  expect(
+    converterTextPlain.serialize({
+      context: createContext({
+        schema: defineSchema({}),
+        selection: {
+          anchor: {
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 3,
+          },
+        },
+      }),
+      event: {
+        type: 'serialize',
+        originEvent: 'unknown',
+      },
+    }),
+  ).toMatchObject({
+    data: 'foobar\n\n[Object]\n\nbaz',
+  })
+
+  expect(
+    converterTextPlain.serialize({
+      context: createContext({
+        schema: defineSchema({}),
+        selection: {
+          anchor: {
+            path: [{_key: b2._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b2._key}],
+            offset: 0,
+          },
+        },
+      }),
+      event: {
+        type: 'serialize',
+        originEvent: 'unknown',
+      },
+    }),
+  ).toMatchObject({
+    data: '[Object]',
+  })
+
+  expect(
+    converterTextPlain.serialize({
+      context: createContext({
+        schema: defineSchema({
+          blockObjects: [
+            {
+              name: 'image',
+            },
+          ],
+        }),
+        selection: {
+          anchor: {
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 3,
+          },
+        },
+      }),
+      event: {
+        type: 'serialize',
+        originEvent: 'unknown',
+      },
+    }),
+  ).toMatchObject({
+    data: 'foobar\n\n[Image]\n\nbaz',
+  })
+
+  expect(
+    converterTextPlain.serialize({
+      context: createContext({
+        schema: defineSchema({}),
+        selection: {
+          anchor: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[2]._key}],
+            offset: 4,
+          },
+        },
+      }),
+      event: {
+        type: 'serialize',
+        originEvent: 'unknown',
+      },
+    }),
+  ).toMatchObject({
+    data: 'fizz[Object]buzz',
+  })
+
+  expect(
+    converterTextPlain.serialize({
+      context: createContext({
+        schema: defineSchema({
+          inlineObjects: [
+            {
+              name: 'stock-ticker',
+            },
+          ],
+        }),
+        selection: {
+          anchor: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[2]._key}],
+            offset: 4,
+          },
+        },
+      }),
+      event: {
+        type: 'serialize',
+        originEvent: 'unknown',
+      },
+    }),
+  ).toMatchObject({
+    data: 'fizz[Stock Ticker]buzz',
+  })
+})

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

@@ -0,0 +1,91 @@
+import {htmlToBlocks} from '@portabletext/block-tools'
+import {isPortableTextTextBlock, type PortableTextBlock} from '@sanity/types'
+import {sliceBlocks} from '../utils'
+import type {Converter} from './converter'
+
+export const converterTextPlain: Converter<'text/plain'> = {
+  mimeType: 'text/plain',
+  serialize: ({context, event}) => {
+    if (!context.selection) {
+      return {
+        type: 'serialization.failure',
+        mimeType: 'text/plain',
+        originEvent: event.originEvent,
+        reason: 'No selection',
+      }
+    }
+
+    const blocks = sliceBlocks({
+      blocks: context.value,
+      selection: context.selection,
+    })
+
+    const data = blocks
+      .map((block) => {
+        if (isPortableTextTextBlock(block)) {
+          return block.children
+            .map((child) => {
+              if (child._type === context.schema.span.name) {
+                return child.text
+              }
+
+              return `[${
+                context.schema.inlineObjects.find(
+                  (inlineObjectType) => inlineObjectType.name === child._type,
+                )?.title ?? 'Object'
+              }]`
+            })
+            .join('')
+        }
+
+        return `[${
+          context.schema.blockObjects.find(
+            (blockObjectType) => blockObjectType.name === block._type,
+          )?.title ?? 'Object'
+        }]`
+      })
+      .join('\n\n')
+
+    return {
+      type: 'serialization.success',
+      data,
+      mimeType: 'text/plain',
+      originEvent: event.originEvent,
+    }
+  },
+  deserialize: ({context, event}) => {
+    const html = escapeHtml(event.data)
+      .split(/\n{2,}/)
+      .map((line) =>
+        line ? `<p>${line.replace(/(?:\r\n|\r|\n)/g, '<br/>')}</p>` : '<p></p>',
+      )
+      .join('')
+
+    const textToHtml = `<html><body>${html}</body></html>`
+
+    const blocks = htmlToBlocks(textToHtml, context.schema.portableText, {
+      keyGenerator: context.keyGenerator,
+    }) as Array<PortableTextBlock>
+
+    return {
+      type: 'deserialization.success',
+      data: blocks,
+      mimeType: 'text/plain',
+    }
+  },
+}
+
+const entityMap: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+  '/': '&#x2F;',
+  '`': '&#x60;',
+  '=': '&#x3D;',
+}
+
+function escapeHtml(str: string) {
+  return String(str).replace(/[&<>"'`=/]/g, (s: string) => entityMap[s])
+}

package/src/converters/converter.ts

@@ -0,0 +1,65 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {EditorContext} from '../editor/editor-snapshot'
+import type {MIMEType} from '../internal-utils/mime-type'
+import type {PickFromUnion} from '../type-utils'
+
+export type Converter<TMIMEType extends MIMEType = MIMEType> = {
+  mimeType: TMIMEType
+  serialize: Serializer<TMIMEType>
+  deserialize: Deserializer<TMIMEType>
+}
+
+export 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
+    }
+
+export type Serializer<TMIMEType extends MIMEType> = ({
+  context,
+  event,
+}: {
+  context: EditorContext
+  event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'serialize'>
+}) => PickFromUnion<
+  ConverterEvent<TMIMEType>,
+  'type',
+  'serialization.success' | 'serialization.failure'
+>
+
+export type Deserializer<TMIMEType extends MIMEType> = ({
+  context,
+  event,
+}: {
+  context: EditorContext
+  event: PickFromUnion<ConverterEvent<TMIMEType>, 'type', 'deserialize'>
+}) => PickFromUnion<
+  ConverterEvent<TMIMEType>,
+  'type',
+  'deserialization.success' | 'deserialization.failure'
+>

package/src/converters/converters.ts

@@ -0,0 +1,11 @@
+import {converterJson} from './converter.json'
+import {converterPortableText} from './converter.portable-text'
+import {converterTextHtml} from './converter.text-html'
+import {converterTextPlain} from './converter.text-plain'
+
+export const coreConverters = [
+  converterJson,
+  converterPortableText,
+  converterTextHtml,
+  converterTextPlain,
+]

package/src/editor/Editable.tsx

@@ -68,7 +68,6 @@ import {Leaf} from './components/Leaf'
 import {EditorActorContext} from './editor-actor-context'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {createWithHotkeys} from './plugins/createWithHotKeys'
-import {createWithInsertData} from './plugins/createWithInsertData'
 import {PortableTextEditor} from './PortableTextEditor'
 import {withSyncRangeDecorations} from './withSyncRangeDecorations'
 
@@ -189,11 +188,9 @@ export const PortableTextEditable = forwardRef<
   // There will be a problem if they redefine editor methods and then calling the original method within themselves.
   useMemo(() => {
     // React/UI-specific plugins
-    const withInsertData = createWithInsertData(editorActor, schemaTypes)
-
     if (readOnly) {
       debug('Editable is in read only mode')
-      return withInsertData(slateEditor)
+      return slateEditor
     }
     const withHotKeys = createWithHotkeys(
       editorActor,
@@ -202,15 +199,8 @@ export const PortableTextEditable = forwardRef<
     )
 
     debug('Editable is in edit mode')
-    return withInsertData(withHotKeys(slateEditor))
-  }, [
-    editorActor,
-    hotkeys,
-    portableTextEditor,
-    readOnly,
-    schemaTypes,
-    slateEditor,
-  ])
+    return withHotKeys(slateEditor)
+  }, [editorActor, hotkeys, portableTextEditor, readOnly, slateEditor])
 
   const renderElement = useCallback(
     (eProps: RenderElementProps) => (

package/src/editor/create-editor.ts

@@ -12,6 +12,7 @@ import {
   type Snapshot,
 } from 'xstate'
 import type {Behavior, CustomBehaviorEvent} from '../behaviors/behavior.types'
+import {coreConverters} from '../converters/converters'
 import {compileType} from '../internal-utils/schema'
 import type {PickFromUnion} from '../type-utils'
 import type {EditableAPI} from '../types/editor'
@@ -74,6 +75,7 @@ export type EditorEvent =
       | 'style.toggle'
       | 'patches'
       | 'update behaviors'
+      | 'update key generator'
       | 'update readOnly'
       | 'update value'
     >
@@ -117,6 +119,7 @@ export function useCreateEditor(config: EditorConfig): Editor {
 function editorConfigToMachineInput(config: EditorConfig) {
   return {
     behaviors: config.behaviors,
+    converters: coreConverters,
     keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
     maxBlocks: config.maxBlocks,
     readOnly: config.readOnly,

package/src/editor/editor-machine.ts

@@ -20,6 +20,7 @@ import {
   type NativeBehaviorEvent,
   type SyntheticBehaviorEvent,
 } from '../behaviors/behavior.types'
+import type {Converter} from '../converters/converter'
 import type {OmitFromUnion, PickFromUnion} from '../type-utils'
 import type {
   EditorSelection,
@@ -105,6 +106,10 @@ export type InternalEditorEvent =
       type: 'update behaviors'
       behaviors: Array<Behavior>
     }
+  | {
+      type: 'update key generator'
+      keyGenerator: () => string
+    }
   | {
       type: 'update value'
       value: Array<PortableTextBlock> | undefined
@@ -200,6 +205,7 @@ export const editorMachine = setup({
   types: {
     context: {} as {
       behaviors: Set<Behavior>
+      converters: Set<Converter>
       keyGenerator: () => string
       pendingEvents: Array<PatchEvent | MutationEvent>
       schema: EditorSchema
@@ -212,6 +218,7 @@ export const editorMachine = setup({
     emitted: {} as InternalEditorEmittedEvent,
     input: {} as {
       behaviors?: Array<Behavior>
+      converters?: Array<Converter>
       keyGenerator: () => string
       maxBlocks?: number
       readOnly?: boolean
@@ -279,9 +286,11 @@ export const editorMachine = setup({
       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 === 'paste' ||
+        event.behaviorEvent.type === 'serialize'
           ? undefined
           : ({
               ...event.behaviorEvent,
@@ -339,6 +348,7 @@ export const editorMachine = setup({
       }
 
       const editorSnapshot = createEditorSnapshot({
+        converters: [...context.converters],
         editor: event.editor,
         keyGenerator: context.keyGenerator,
         schema: context.schema,
@@ -466,6 +476,7 @@ export const editorMachine = setup({
   id: 'editor',
   context: ({input}) => ({
     behaviors: new Set(input.behaviors ?? coreBehaviors),
+    converters: new Set(input.converters ?? []),
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
@@ -493,6 +504,9 @@ export const editorMachine = setup({
     'patches': {actions: emit(({event}) => event)},
     'done loading': {actions: emit({type: 'done loading'})},
     'update behaviors': {actions: 'assign behaviors'},
+    'update key generator': {
+      actions: assign({keyGenerator: ({event}) => event.keyGenerator}),
+    },
     'update schema': {actions: 'assign schema'},
     'update value': {actions: assign({value: ({event}) => event.value})},
     'update maxBlocks': {
@@ -522,6 +536,16 @@ export const editorMachine = setup({
             },
             'read only': {
               on: {
+                'behavior event': {
+                  actions: 'handle behavior event',
+                  guard: ({event}) =>
+                    event.behaviorEvent.type === 'copy' ||
+                    event.behaviorEvent.type === 'data transfer.set' ||
+                    event.behaviorEvent.type === 'serialize' ||
+                    event.behaviorEvent.type === 'serialization.failure' ||
+                    event.behaviorEvent.type === 'serialization.success' ||
+                    event.behaviorEvent.type === 'select',
+                },
                 'update readOnly': {
                   guard: ({event}) => !event.readOnly,
                   target: '#editor.edit mode.editable',

package/src/editor/editor-selector.ts

@@ -67,6 +67,7 @@ export function getEditorSnapshot({
 }): EditorSnapshot {
   return {
     context: {
+      converters: [...editorActorSnapshot.context.converters],
       activeDecorators: getActiveDecorators({
         schema: editorActorSnapshot.context.schema,
         slateEditorInstance,

package/src/editor/editor-snapshot.ts

@@ -1,4 +1,5 @@
 import type {PortableTextBlock} from '@sanity/types'
+import type {Converter} from '../converters/converter'
 import {toPortableTextRange} from '../internal-utils/ranges'
 import {fromSlateValue} from '../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
@@ -11,6 +12,7 @@ import {getActiveDecorators} from './get-active-decorators'
  */
 export type EditorContext = {
   activeDecorators: Array<string>
+  converters: Array<Converter>
   keyGenerator: () => string
   schema: EditorSchema
   selection: EditorSelection
@@ -25,10 +27,12 @@ export type EditorSnapshot = {
 }
 
 export function createEditorSnapshot({
+  converters,
   editor,
   keyGenerator,
   schema,
 }: {
+  converters: Array<Converter>
   editor: PortableTextSlateEditor
   keyGenerator: () => string
   schema: EditorSchema
@@ -45,6 +49,7 @@ export function createEditorSnapshot({
       schema,
       slateEditorInstance: editor,
     }),
+    converters,
     keyGenerator,
     schema,
     selection,

package/src/editor/plugins/create-with-event-listeners.ts

@@ -146,9 +146,11 @@ export function createWithEventListeners(
       deleteBackward,
       deleteForward,
       insertBreak,
+      insertData,
       insertSoftBreak,
       insertText,
       select,
+      setFragmentData,
     } = editor
 
     editor.deleteBackward = (unit) => {
@@ -201,6 +203,23 @@ export function createWithEventListeners(
       return
     }
 
+    editor.insertData = (dataTransfer) => {
+      if (isApplyingBehaviorActions(editor)) {
+        insertData(dataTransfer)
+        return
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'deserialize',
+          dataTransfer,
+        },
+        editor,
+      })
+      return
+    }
+
     editor.insertSoftBreak = () => {
       if (isApplyingBehaviorActions(editor)) {
         insertSoftBreak()
@@ -268,6 +287,31 @@ export function createWithEventListeners(
       return
     }
 
+    editor.setFragmentData = (dataTransfer, originEvent) => {
+      if (originEvent === 'drag') {
+        setFragmentData(dataTransfer)
+        return
+      }
+
+      if (isApplyingBehaviorActions(editor)) {
+        setFragmentData(dataTransfer)
+        return
+      }
+
+      dataTransfer.clearData()
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'serialize',
+          dataTransfer,
+          originEvent: originEvent ?? 'unknown',
+        },
+        editor,
+      })
+      return
+    }
+
     return editor
   }
 }

package/src/internal-utils/asserters.ts

@@ -0,0 +1,9 @@
+import type {TypedObject} from '@sanity/types'
+
+export function isTypedObject(object: unknown): object is TypedObject {
+  return isRecord(object) && typeof object._type === 'string'
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && (typeof value === 'object' || typeof value === 'function')
+}

package/src/internal-utils/mime-type.ts

@@ -0,0 +1 @@
+export type MIMEType = `${string}/${string}`