@portabletext/editor 1.23.0 → 1.25.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'
@@ -64,14 +65,37 @@ export type EditorEvent =
       'type',
       | 'annotation.add'
       | 'annotation.remove'
+      | 'annotation.toggle'
       | 'blur'
+      | 'data transfer.set'
+      | 'decorator.add'
+      | 'decorator.remove'
       | 'decorator.toggle'
+      | 'delete.block'
+      | 'delete.text'
+      | 'deserialization.failure'
+      | 'deserialization.success'
       | 'focus'
       | 'insert.block object'
       | 'insert.inline object'
+      | 'insert.span'
+      | 'insert.text block'
+      | 'list item.add'
+      | 'list item.remove'
       | 'list item.toggle'
+      | 'move.block'
+      | 'move.block down'
+      | 'move.block up'
       | 'select'
+      | 'select.next block'
+      | 'select.previous block'
+      | 'serialization.failure'
+      | 'serialization.success'
+      | 'style.add'
+      | 'style.remove'
       | 'style.toggle'
+      | 'text block.set'
+      | 'text block.unset'
       | 'patches'
       | 'update behaviors'
       | 'update key generator'
@@ -118,6 +142,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,
@@ -158,12 +183,29 @@ function createEditorFromActor(editorActor: EditorActor): Editor {
     send: (event) => {
       editorActor.send(event)
     },
-    on: (event, listener) =>
-      editorActor.on(
-        event,
-        // @ts-expect-error
-        listener,
-      ),
+    on: (event, listener) => {
+      const subscription = editorActor.on(event, (event) => {
+        switch (event.type) {
+          case 'blurred':
+          case 'done loading':
+          case 'editable':
+          case 'error':
+          case 'focused':
+          case 'invalid value':
+          case 'loading':
+          case 'mutation':
+          case 'patch':
+          case 'read only':
+          case 'ready':
+          case 'selection':
+          case 'value changed':
+            listener(event)
+            break
+        }
+      })
+
+      return subscription
+    },
     _internal: {
       editable,
       editorActor,

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,
@@ -184,13 +185,38 @@ export type InternalEditorEmittedEvent =
       'type',
       | 'annotation.add'
       | 'annotation.remove'
+      | 'annotation.toggle'
       | 'blur'
+      | 'data transfer.set'
+      | 'decorator.add'
+      | 'decorator.remove'
       | 'decorator.toggle'
+      | 'delete.backward'
+      | 'delete.block'
+      | 'delete.forward'
+      | 'delete.text'
+      | 'deserialization.failure'
+      | 'deserialization.success'
+      | 'focus'
       | 'insert.block object'
       | 'insert.inline object'
+      | 'insert.span'
+      | 'insert.text block'
+      | 'list item.add'
+      | 'list item.remove'
       | 'list item.toggle'
-      | 'focus'
+      | 'move.block'
+      | 'move.block down'
+      | 'move.block up'
+      | 'select.next block'
+      | 'select.previous block'
+      | 'serialization.failure'
+      | 'serialization.success'
+      | 'style.add'
+      | 'style.remove'
       | 'style.toggle'
+      | 'text block.set'
+      | 'text block.unset'
     >
   | {
       type: 'custom.*'
@@ -204,6 +230,7 @@ export const editorMachine = setup({
   types: {
     context: {} as {
       behaviors: Set<Behavior>
+      converters: Set<Converter>
       keyGenerator: () => string
       pendingEvents: Array<PatchEvent | MutationEvent>
       schema: EditorSchema
@@ -216,6 +243,7 @@ export const editorMachine = setup({
     emitted: {} as InternalEditorEmittedEvent,
     input: {} as {
       behaviors?: Array<Behavior>
+      converters?: Array<Converter>
       keyGenerator: () => string
       maxBlocks?: number
       readOnly?: boolean
@@ -283,9 +311,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,
@@ -343,6 +373,7 @@ export const editorMachine = setup({
       }
 
       const editorSnapshot = createEditorSnapshot({
+        converters: [...context.converters],
         editor: event.editor,
         keyGenerator: context.keyGenerator,
         schema: context.schema,
@@ -470,6 +501,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,
@@ -529,6 +561,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',
@@ -563,6 +605,9 @@ export const editorMachine = setup({
             'decorator.*': {
               actions: emit(({event}) => event),
             },
+            'delete.*': {
+              actions: emit(({event}) => event),
+            },
             'focus': {
               actions: emit(({event}) => event),
             },
@@ -572,12 +617,21 @@ export const editorMachine = setup({
             'list item.*': {
               actions: emit(({event}) => event),
             },
+            'move.*': {
+              actions: emit(({event}) => event),
+            },
             'select': {
               actions: emit(({event}) => event),
             },
+            'select.*': {
+              actions: emit(({event}) => event),
+            },
             'style.*': {
               actions: emit(({event}) => event),
             },
+            'text block.*': {
+              actions: emit(({event}) => event),
+            },
           },
         },
       },

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,