@portabletext/editor 1.47.0 → 1.47.2

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

@@ -1,14 +1,15 @@
 import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
 import type {EditorSelection} from '..'
+import {schemaType} from '../editor/__tests__/PortableTextEditorTester'
 import {
   compileSchemaDefinition,
   defineSchema,
   type SchemaDefinition,
-} from '../editor/define-schema'
+} from '../editor/editor-schema'
+import {createLegacySchema} from '../editor/legacy-schema'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
-import {converterTextPlain} from './converter.text-plain'
-import {coreConverters} from './converters.core'
+import {createConverterTextPlain} from './converter.text-plain'
 
 const b1: PortableTextTextBlock = {
   _type: 'block',
@@ -74,7 +75,7 @@ function createSnapshot({
 }) {
   return createTestSnapshot({
     context: {
-      converters: coreConverters,
+      converters: [],
       schema: compileSchemaDefinition(schema),
       selection,
       value: [b1, b2, b3, b4],
@@ -82,6 +83,10 @@ function createSnapshot({
   })
 }
 
+const converterTextPlain = createConverterTextPlain(
+  createLegacySchema(schemaType),
+)
+
 test(converterTextPlain.serialize.name, () => {
   expect(
     converterTextPlain.serialize({

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

@@ -1,112 +1,116 @@
 import {htmlToBlocks} from '@portabletext/block-tools'
 import {isPortableTextTextBlock, type PortableTextBlock} from '@sanity/types'
 import {parseBlock} from '../internal-utils/parse-blocks'
+import type {PortableTextMemberSchemaTypes} from '../types/editor'
 import {sliceBlocks} from '../utils'
 import {defineConverter} from './converter.types'
 
-export const converterTextPlain = defineConverter({
-  mimeType: 'text/plain',
-  serialize: ({snapshot, event}) => {
-    const selection =
-      snapshot.beta.internalDrag?.origin.selection ?? snapshot.context.selection
+export function createConverterTextPlain(
+  legacySchema: PortableTextMemberSchemaTypes,
+) {
+  return defineConverter({
+    mimeType: 'text/plain',
+    serialize: ({snapshot, event}) => {
+      const selection =
+        snapshot.beta.internalDrag?.origin.selection ??
+        snapshot.context.selection
 
-    if (!selection) {
-      return {
-        type: 'serialization.failure',
-        mimeType: 'text/plain',
-        originEvent: event.originEvent,
-        reason: 'No selection',
+      if (!selection) {
+        return {
+          type: 'serialization.failure',
+          mimeType: 'text/plain',
+          originEvent: event.originEvent,
+          reason: 'No selection',
+        }
       }
-    }
 
-    const blocks = sliceBlocks({
-      blocks: snapshot.context.value,
-      selection,
-    })
+      const blocks = sliceBlocks({
+        blocks: snapshot.context.value,
+        selection,
+      })
 
-    const data = blocks
-      .map((block) => {
-        if (isPortableTextTextBlock(block)) {
-          return block.children
-            .map((child) => {
-              if (child._type === snapshot.context.schema.span.name) {
-                return child.text
-              }
+      const data = blocks
+        .map((block) => {
+          if (isPortableTextTextBlock(block)) {
+            return block.children
+              .map((child) => {
+                if (child._type === snapshot.context.schema.span.name) {
+                  return child.text
+                }
 
-              return snapshot.beta.hasTag('dragging internally')
-                ? `[${
-                    snapshot.context.schema.inlineObjects.find(
-                      (inlineObjectType) =>
-                        inlineObjectType.name === child._type,
-                    )?.title ?? 'Object'
-                  }]`
-                : ''
-            })
-            .join('')
-        }
+                return snapshot.beta.hasTag('dragging internally')
+                  ? `[${
+                      snapshot.context.schema.inlineObjects.find(
+                        (inlineObjectType) =>
+                          inlineObjectType.name === child._type,
+                      )?.title ?? 'Object'
+                    }]`
+                  : ''
+              })
+              .join('')
+          }
 
-        return snapshot.beta.hasTag('dragging internally')
-          ? `[${
-              snapshot.context.schema.blockObjects.find(
-                (blockObjectType) => blockObjectType.name === block._type,
-              )?.title ?? 'Object'
-            }]`
-          : ''
-      })
-      .filter((block) => block !== '')
-      .join('\n\n')
+          return snapshot.beta.hasTag('dragging internally')
+            ? `[${
+                snapshot.context.schema.blockObjects.find(
+                  (blockObjectType) => blockObjectType.name === block._type,
+                )?.title ?? 'Object'
+              }]`
+            : ''
+        })
+        .filter((block) => block !== '')
+        .join('\n\n')
 
-    return {
-      type: 'serialization.success',
-      data,
-      mimeType: 'text/plain',
-      originEvent: event.originEvent,
-    }
-  },
-  deserialize: ({snapshot, 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('')
+      return {
+        type: 'serialization.success',
+        data,
+        mimeType: 'text/plain',
+        originEvent: event.originEvent,
+      }
+    },
+    deserialize: ({snapshot, 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 textToHtml = `<html><body>${html}</body></html>`
 
-    const blocks = htmlToBlocks(
-      textToHtml,
-      snapshot.context.schema.portableText,
-      {
+      const blocks = htmlToBlocks(textToHtml, legacySchema.portableText, {
         keyGenerator: snapshot.context.keyGenerator,
-      },
-    ) as Array<PortableTextBlock>
+      }) as Array<PortableTextBlock>
 
-    const parsedBlocks = blocks.flatMap((block) => {
-      const parsedBlock = parseBlock({
-        context: snapshot.context,
-        block,
-        options: {
-          refreshKeys: false,
-        },
+      const parsedBlocks = blocks.flatMap((block) => {
+        const parsedBlock = parseBlock({
+          context: snapshot.context,
+          block,
+          options: {
+            refreshKeys: false,
+          },
+        })
+        return parsedBlock ? [parsedBlock] : []
       })
-      return parsedBlock ? [parsedBlock] : []
-    })
 
-    if (parsedBlocks.length === 0) {
+      if (parsedBlocks.length === 0) {
+        return {
+          type: 'deserialization.failure',
+          mimeType: 'text/plain',
+          reason: 'No blocks deserialized',
+        }
+      }
+
       return {
-        type: 'deserialization.failure',
+        type: 'deserialization.success',
+        data: parsedBlocks,
         mimeType: 'text/plain',
-        reason: 'No blocks deserialized',
       }
-    }
-
-    return {
-      type: 'deserialization.success',
-      data: parsedBlocks,
-      mimeType: 'text/plain',
-    }
-  },
-})
+    },
+  })
+}
 
 const entityMap: Record<string, string> = {
   '&': '&amp;',

package/src/converters/converters.core.ts

@@ -1,11 +1,16 @@
+import type {PortableTextMemberSchemaTypes} from '../types/editor'
 import {converterJson} from './converter.json'
 import {converterPortableText} from './converter.portable-text'
-import {converterTextHtml} from './converter.text-html'
-import {converterTextPlain} from './converter.text-plain'
+import {createConverterTextHtml} from './converter.text-html'
+import {createConverterTextPlain} from './converter.text-plain'
 
-export const coreConverters = [
-  converterJson,
-  converterPortableText,
-  converterTextHtml,
-  converterTextPlain,
-]
+export function createCoreConverters(
+  legacySchema: PortableTextMemberSchemaTypes,
+) {
+  return [
+    converterJson,
+    converterPortableText,
+    createConverterTextHtml(legacySchema),
+    createConverterTextPlain(legacySchema),
+  ]
+}

package/src/editor/Editable.tsx

@@ -170,14 +170,13 @@ export const PortableTextEditable = forwardRef<
   const readOnly = useSelector(editorActor, (s) =>
     s.matches({'edit mode': 'read only'}),
   )
-  const schemaTypes = useSelector(editorActor, (s) => s.context.schema)
   const slateEditor = useSlate()
 
   const rangeDecorationsActor = useActorRef(rangeDecorationsMachine, {
     input: {
       rangeDecorations: rangeDecorations ?? [],
       readOnly,
-      schema: schemaTypes,
+      schema: editorActor.getSnapshot().context.schema,
       slateEditor,
       skipSetup: !editorActor.getSnapshot().matches({setup: 'setting up'}),
     },
@@ -202,8 +201,6 @@ export const PortableTextEditable = forwardRef<
     })
   }, [rangeDecorationsActor, rangeDecorations])
 
-  const blockTypeName = schemaTypes.block.name
-
   // Output a minimal React editor inside Editable when in readOnly mode.
   // NOTE: make sure all the plugins used here can be safely run over again at any point.
   // There will be a problem if they redefine editor methods and then calling the original method within themselves.
@@ -232,12 +229,12 @@ export const PortableTextEditable = forwardRef<
         renderChild={renderChild}
         renderListItem={renderListItem}
         renderStyle={renderStyle}
-        schemaTypes={schemaTypes}
+        schemaTypes={portableTextEditor.schemaTypes}
         spellCheck={spellCheck}
       />
     ),
     [
-      schemaTypes,
+      portableTextEditor,
       spellCheck,
       readOnly,
       renderBlock,
@@ -258,7 +255,7 @@ export const PortableTextEditable = forwardRef<
           <Leaf
             {...lProps}
             editorActor={editorActor}
-            schemaTypes={schemaTypes}
+            schemaTypes={portableTextEditor.schemaTypes}
             renderAnnotation={renderAnnotation}
             renderChild={renderChild}
             renderDecorator={renderDecorator}
@@ -289,12 +286,12 @@ export const PortableTextEditable = forwardRef<
     },
     [
       editorActor,
+      portableTextEditor,
       readOnly,
       renderAnnotation,
       renderChild,
       renderDecorator,
       renderPlaceholder,
-      schemaTypes,
     ],
   )
 
@@ -303,7 +300,10 @@ export const PortableTextEditable = forwardRef<
       debug(`Selection from props ${JSON.stringify(propsSelection)}`)
       const normalizedSelection = normalizeSelection(
         propsSelection,
-        fromSlateValue(slateEditor.children, blockTypeName),
+        fromSlateValue(
+          slateEditor.children,
+          editorActor.getSnapshot().context.schema.block.name,
+        ),
       )
       if (normalizedSelection !== null) {
         debug(
@@ -324,7 +324,7 @@ export const PortableTextEditable = forwardRef<
         }
       }
     }
-  }, [blockTypeName, editorActor, propsSelection, slateEditor])
+  }, [editorActor, propsSelection, slateEditor])
 
   // Restore selection from props when the editor has been initialized properly with it's value
   useEffect(() => {
@@ -447,13 +447,18 @@ export const PortableTextEditable = forwardRef<
       const value = PortableTextEditor.getValue(portableTextEditor)
       const ptRange = slateEditor.selection
         ? slateRangeToSelection({
-            schema: schemaTypes,
+            schema: editorActor.getSnapshot().context.schema,
             editor: slateEditor,
             range: slateEditor.selection,
           })
         : null
       const path = ptRange?.focus.path || []
-      const onPasteResult = onPaste?.({event, value, path, schemaTypes})
+      const onPasteResult = onPaste?.({
+        event,
+        value,
+        path,
+        schemaTypes: portableTextEditor.schemaTypes,
+      })
 
       if (onPasteResult || !slateEditor.selection) {
         event.preventDefault()
@@ -552,7 +557,7 @@ export const PortableTextEditable = forwardRef<
 
       debug('No result from custom paste handler, pasting normally')
     },
-    [editorActor, onPaste, portableTextEditor, schemaTypes, slateEditor],
+    [editorActor, onPaste, portableTextEditor, slateEditor],
   )
 
   const handleOnFocus: FocusEventHandler<HTMLDivElement> = useCallback(

package/src/editor/PortableTextEditor.tsx

@@ -29,12 +29,13 @@ import type {
 } from '../types/editor'
 import {Synchronizer} from './components/Synchronizer'
 import {createInternalEditor, type InternalEditor} from './create-editor'
-import {createEditorSchema} from './create-editor-schema'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
+import {legacySchemaToEditorSchema} from './editor-schema'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {defaultKeyGenerator} from './key-generator'
+import {createLegacySchema} from './legacy-schema'
 
 const debug = debugWithName('component:PortableTextEditor')
 
@@ -148,8 +149,7 @@ export class PortableTextEditor extends Component<
       })
     }
 
-    this.schemaTypes =
-      this.editor._internal.editorActor.getSnapshot().context.schema
+    this.schemaTypes = this.editor._internal.legacySchema
     this.editable = this.editor._internal.editable
   }
 
@@ -160,7 +160,7 @@ export class PortableTextEditor extends Component<
       !prevProps.editor &&
       this.props.schemaType !== prevProps.schemaType
     ) {
-      this.schemaTypes = createEditorSchema(
+      this.schemaTypes = createLegacySchema(
         this.props.schemaType.hasOwnProperty('jsonType')
           ? this.props.schemaType
           : compileType(this.props.schemaType),
@@ -168,7 +168,7 @@ export class PortableTextEditor extends Component<
 
       this.editor._internal.editorActor.send({
         type: 'update schema',
-        schema: this.schemaTypes,
+        schema: legacySchemaToEditorSchema(this.schemaTypes),
       })
     }
 

package/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -10,8 +10,9 @@ import {
 } from '../../index'
 
 const imageType = defineField({
-  type: 'image',
-  name: 'blockImage',
+  name: 'custom image',
+  type: 'object',
+  fields: [],
 })
 
 const someObject = defineField({
@@ -68,7 +69,7 @@ const colorAndLink = defineArrayMember({
 
 const schema = Schema.compile({
   name: 'test',
-  types: [portableTextType, colorAndLink],
+  types: [portableTextType, colorAndLink, imageType],
 })
 
 export const PortableTextEditorTester = forwardRef(

package/src/editor/__tests__/insert-block.test.tsx

@@ -12,9 +12,9 @@ const schema = Schema.compile({
     {
       name: 'portable-text',
       type: 'array',
-      of: [{type: 'block'}, {type: 'image'}],
+      of: [{type: 'block'}, {type: 'custom image'}],
     },
-    {name: 'image', type: 'object'},
+    {name: 'custom image', type: 'object'},
   ],
 }).get('portable-text')
 
@@ -71,7 +71,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
     await waitFor(() => {
       if (editorRef.current) {
         const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
-          (object) => object.name === 'image',
+          (object) => object.name === 'custom image',
         )!
         PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
       }
@@ -81,7 +81,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: 'bb', _type: 'image'},
+          {_key: 'bb', _type: 'custom image'},
         ])
       }
     })
@@ -140,7 +140,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
     await waitFor(() => {
       if (editorRef.current) {
         const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
-          (object) => object.name === 'image',
+          (object) => object.name === 'custom image',
         )!
         PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
       }
@@ -151,7 +151,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           nonEmptyTextBlock,
-          {_key: 'bb', _type: 'image'},
+          {_key: 'bb', _type: 'custom image'},
         ])
       }
     })
@@ -174,7 +174,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
     }
     const imageBlock: PortableTextBlock = {
       _key: 'bb',
-      _type: 'image',
+      _type: 'custom image',
     }
     const initialValue: Array<PortableTextBlock> = [emptyTextBlock, imageBlock]
     const onChange: (change: EditorChange) => void = vi.fn()
@@ -226,7 +226,7 @@ describe(PortableTextEditor.insertBlock.name, () => {
     await waitFor(() => {
       if (editorRef.current) {
         const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
-          (object) => object.name === 'image',
+          (object) => object.name === 'custom image',
         )!
         PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
       }
@@ -236,8 +236,8 @@ describe(PortableTextEditor.insertBlock.name, () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: 'bc', _type: 'image'},
-          {_key: 'bb', _type: 'image'},
+          {_key: 'bc', _type: 'custom image'},
+          {_key: 'bb', _type: 'custom image'},
         ])
       }
     })

package/src/editor/__tests__/self-solving.test.tsx

@@ -13,9 +13,9 @@ const schema = Schema.compile({
     {
       name: 'portable-text',
       type: 'array',
-      of: [{type: 'block'}, {type: 'image'}],
+      of: [{type: 'block'}, {type: 'custom image'}],
     },
-    {name: 'image', type: 'object'},
+    {name: 'custom image', type: 'object'},
   ],
 }).get('portable-text')
 type OnChange = ComponentProps<typeof PortableTextEditor>['onChange']

package/src/editor/components/Synchronizer.tsx

@@ -44,7 +44,7 @@ export function Synchronizer(props: SynchronizerProps) {
   })
   const mutationActorRef = useActorRef(mutationMachine, {
     input: {
-      schema: editorActor.getSnapshot().context.schema,
+      schema: props.editorActor.getSnapshot().context.schema,
       slateEditor,
     },
   })

package/src/editor/create-editor.ts

@@ -13,21 +13,26 @@ import {
 } from 'xstate'
 import type {Behavior} from '../behaviors/behavior.types.behavior'
 import type {ExternalBehaviorEvent} from '../behaviors/behavior.types.event'
-import {coreConverters} from '../converters/converters.core'
+import {createCoreConverters} from '../converters/converters.core'
 import {compileType} from '../internal-utils/schema'
-import type {EditableAPI} from '../types/editor'
-import {createEditorSchema} from './create-editor-schema'
+import type {EditableAPI, PortableTextMemberSchemaTypes} from '../types/editor'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
-import {compileSchemaDefinition, type SchemaDefinition} from './define-schema'
 import {
   editorMachine,
   type EditorActor,
   type EditorEmittedEvent,
   type ExternalEditorEvent,
 } from './editor-machine'
+import {
+  compileSchemaDefinitionToLegacySchema,
+  legacySchemaToEditorSchema,
+  type SchemaDefinition,
+} from './editor-schema'
+import type {EditorSchema} from './editor-schema'
 import {getEditorSnapshot} from './editor-selector'
 import type {EditorSnapshot} from './editor-snapshot'
 import {defaultKeyGenerator} from './key-generator'
+import {createLegacySchema} from './legacy-schema'
 import {createEditableAPI} from './plugins/createWithEditableAPI'
 
 /**
@@ -79,49 +84,76 @@ export type InternalEditor = Editor & {
     editable: EditableAPI
     editorActor: EditorActor
     slateEditor: SlateEditor
+    legacySchema: PortableTextMemberSchemaTypes
   }
 }
 
 export function createInternalEditor(config: EditorConfig): InternalEditor {
+  const legacySchema = config.schemaDefinition
+    ? compileSchemaDefinitionToLegacySchema(config.schemaDefinition)
+    : createLegacySchema(
+        config.schema.hasOwnProperty('jsonType')
+          ? config.schema
+          : compileType(config.schema),
+      )
+  const editorSchema = legacySchemaToEditorSchema(legacySchema)
+
   const editorActor = createActor(editorMachine, {
-    input: editorConfigToMachineInput(config),
+    input: editorConfigToMachineInput({
+      ...config,
+      schema: editorSchema,
+      legacySchema,
+    }),
   })
   editorActor.start()
 
-  return createInternalEditorFromActor(editorActor)
+  return createInternalEditorFromActor(editorActor, legacySchema)
 }
 
 export function useCreateInternalEditor(config: EditorConfig): InternalEditor {
+  const legacySchema = config.schemaDefinition
+    ? compileSchemaDefinitionToLegacySchema(config.schemaDefinition)
+    : createLegacySchema(
+        config.schema.hasOwnProperty('jsonType')
+          ? config.schema
+          : compileType(config.schema),
+      )
+  const editorSchema = legacySchemaToEditorSchema(legacySchema)
+
   const editorActor = useActorRef(editorMachine, {
-    input: editorConfigToMachineInput(config),
+    input: editorConfigToMachineInput({
+      ...config,
+      schema: editorSchema,
+      legacySchema,
+    }),
   })
 
   return useMemo(
-    () => createInternalEditorFromActor(editorActor),
-    [editorActor],
+    () => createInternalEditorFromActor(editorActor, legacySchema),
+    [editorActor, legacySchema],
   )
 }
 
-function editorConfigToMachineInput(config: EditorConfig) {
+function editorConfigToMachineInput(
+  config: Omit<EditorConfig, 'schema'> & {
+    schema: EditorSchema
+    legacySchema: PortableTextMemberSchemaTypes
+  },
+) {
   return {
     behaviors: config.behaviors,
-    converters: coreConverters,
+    converters: createCoreConverters(config.legacySchema),
     keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
     maxBlocks: config.maxBlocks,
     readOnly: config.readOnly,
-    schema: config.schemaDefinition
-      ? compileSchemaDefinition(config.schemaDefinition)
-      : createEditorSchema(
-          config.schema.hasOwnProperty('jsonType')
-            ? config.schema
-            : compileType(config.schema),
-        ),
+    schema: config.schema,
     initialValue: config.initialValue,
   } as const
 }
 
 function createInternalEditorFromActor(
   editorActor: EditorActor,
+  legacySchema: PortableTextMemberSchemaTypes,
 ): InternalEditor {
   const slateEditor = createSlateEditor({editorActor})
   const editable = createEditableAPI(slateEditor.instance, editorActor)
@@ -208,6 +240,7 @@ function createInternalEditorFromActor(
     _internal: {
       editable,
       editorActor,
+      legacySchema,
       slateEditor,
     },
   }