@portabletext/editor 1.46.0 → 1.47.1

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,
     },
   }

package/src/editor/editor-machine.ts

@@ -21,7 +21,7 @@ import type {
   InvalidValueResolution,
   PortableTextSlateEditor,
 } from '../types/editor'
-import type {EditorSchema} from './define-schema'
+import type {EditorSchema} from './editor-schema'
 import {createEditorSnapshot} from './editor-snapshot'
 
 export * from 'xstate/guards'

package/src/editor/{define-schema.ts → editor-schema.ts}

@@ -2,8 +2,8 @@ import {Schema as SanitySchema} from '@sanity/schema'
 import {defineField, defineType, type ObjectSchemaType} from '@sanity/types'
 import startCase from 'lodash.startcase'
 import type {PortableTextMemberSchemaTypes} from '../types/editor'
-import {createEditorSchema} from './create-editor-schema'
 import {defaultKeyGenerator} from './key-generator'
+import {createLegacySchema} from './legacy-schema'
 
 /**
  * @public
@@ -88,11 +88,120 @@ const defaultObjectTitles: Record<string, string> = {
 /**
  * @public
  */
-export type EditorSchema = PortableTextMemberSchemaTypes
+export type EditorSchema = {
+  annotations: ReadonlyArray<
+    BaseDefinition & {
+      fields: ReadonlyArray<{name: string; type: string}>
+    }
+  >
+  block: {
+    name: string
+  }
+  blockObjects: ReadonlyArray<
+    BaseDefinition & {
+      fields: ReadonlyArray<{name: string; type: string}>
+    }
+  >
+  decorators: ReadonlyArray<
+    BaseDefinition & {
+      /**
+       * @deprecated
+       * Use `name` instead
+       */
+      value: string
+    }
+  >
+  inlineObjects: ReadonlyArray<
+    BaseDefinition & {
+      fields: ReadonlyArray<{name: string; type: string}>
+    }
+  >
+  span: {
+    name: string
+  }
+  styles: ReadonlyArray<
+    BaseDefinition & {
+      /**
+       * @deprecated
+       * Use `name` instead
+       */
+      value: string
+    }
+  >
+  lists: ReadonlyArray<
+    BaseDefinition & {
+      /**
+       * @deprecated
+       * Use `name` instead
+       */
+      value: string
+    }
+  >
+}
+
+export function legacySchemaToEditorSchema(
+  schema: PortableTextMemberSchemaTypes,
+): EditorSchema {
+  return {
+    annotations: schema.annotations.map((annotation) => ({
+      name: annotation.name,
+      fields: annotation.fields.map((field) => ({
+        name: field.name,
+        type: field.type.jsonType,
+      })),
+      title: annotation.title,
+    })),
+    block: {
+      name: schema.block.name,
+    },
+    blockObjects: schema.blockObjects.map((blockObject) => ({
+      name: blockObject.name,
+      fields: blockObject.fields.map((field) => ({
+        name: field.name,
+        type: field.type.jsonType,
+      })),
+      title: blockObject.title,
+    })),
+    decorators: schema.decorators.map((decorator) => ({
+      name: decorator.value,
+      title: decorator.title,
+      value: decorator.value,
+    })),
+    inlineObjects: schema.inlineObjects.map((inlineObject) => ({
+      name: inlineObject.name,
+      fields: inlineObject.fields.map((field) => ({
+        name: field.name,
+        type: field.type.jsonType,
+      })),
+      title: inlineObject.title,
+    })),
+    span: {
+      name: schema.span.name,
+    },
+    styles: schema.styles.map((style) => ({
+      name: style.value,
+      title: style.title,
+      value: style.value,
+    })),
+    lists: schema.lists.map((list) => ({
+      name: list.value,
+      title: list.title,
+      value: list.value,
+    })),
+  }
+}
 
 export function compileSchemaDefinition<
   TSchemaDefinition extends SchemaDefinition,
->(definition?: TSchemaDefinition) {
+>(definition: TSchemaDefinition): EditorSchema {
+  return legacySchemaToEditorSchema(
+    compileSchemaDefinitionToLegacySchema(definition),
+  )
+}
+
+export function compileSchemaDefinitionToLegacySchema<
+  TSchemaDefinition extends SchemaDefinition,
+>(definition?: TSchemaDefinition): PortableTextMemberSchemaTypes {
   const blockObjects =
     definition?.blockObjects?.map((blockObject) =>
       defineType({
@@ -179,7 +288,7 @@ export function compileSchemaDefinition<
     types: [portableTextSchema, ...blockObjects, ...inlineObjects],
   }).get('portable-text')
 
-  const pteSchema = createEditorSchema(schema)
+  const pteSchema = createLegacySchema(schema)
 
   return {
     ...pteSchema,
@@ -203,5 +312,5 @@ export function compileSchemaDefinition<
           } as ObjectSchemaType)
         : inlineObject,
     ),
-  } satisfies EditorSchema
+  } satisfies PortableTextMemberSchemaTypes
 }

package/src/editor/editor-snapshot.ts

@@ -4,8 +4,8 @@ import type {EventPosition} from '../internal-utils/event-position'
 import {slateChildrenToBlocks} from '../internal-utils/slate-children-to-blocks'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
-import type {EditorSchema} from './define-schema'
 import type {HasTag} from './editor-machine'
+import type {EditorSchema} from './editor-schema'
 import {getActiveDecorators} from './get-active-decorators'
 
 /**

package/src/editor/get-active-decorators.ts

@@ -1,6 +1,6 @@
 import {Editor} from 'slate'
 import type {PortableTextSlateEditor} from '../types/editor'
-import type {EditorSchema} from './define-schema'
+import type {EditorSchema} from './editor-schema'
 
 export function getActiveDecorators({
   schema,
@@ -9,7 +9,7 @@ export function getActiveDecorators({
   schema: EditorSchema
   slateEditorInstance: PortableTextSlateEditor
 }) {
-  const decorators = schema.decorators.map((decorator) => decorator.value)
+  const decorators = schema.decorators.map((decorator) => decorator.name)
 
   const marks =
     {

package/src/editor/{create-editor-schema.ts → legacy-schema.ts}

@@ -6,11 +6,11 @@ import type {
   SchemaType,
   SpanSchemaType,
 } from '@sanity/types'
-import type {EditorSchema} from './define-schema'
+import type {PortableTextMemberSchemaTypes} from '../types/editor'
 
-export function createEditorSchema(
+export function createLegacySchema(
   portableTextType: ArraySchemaType<PortableTextBlock>,
-): EditorSchema {
+): PortableTextMemberSchemaTypes {
   if (!portableTextType) {
     throw new Error("Parameter 'portabletextType' missing (required)")
   }

package/src/editor/mutation-machine.ts

@@ -14,7 +14,7 @@ import {
   type AnyEventObject,
 } from 'xstate'
 import type {PortableTextSlateEditor} from '../types/editor'
-import type {EditorSchema} from './define-schema'
+import type {EditorSchema} from './editor-schema'
 
 /**
  * Makes sure editor mutation events are debounced

package/src/editor/plugins/createWithObjectKeys.ts

@@ -1,20 +1,14 @@
 import {Editor, Element, Node, Transforms} from 'slate'
 import {isChangingRemotely} from '../../internal-utils/withChanges'
 import {isRedoing, isUndoing} from '../../internal-utils/withUndoRedo'
-import type {
-  PortableTextMemberSchemaTypes,
-  PortableTextSlateEditor,
-} from '../../types/editor'
+import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
 
 /**
  * This plugin makes sure that every new node in the editor get a new _key prop when created
  *
  */
-export function createWithObjectKeys(
-  editorActor: EditorActor,
-  schemaTypes: PortableTextMemberSchemaTypes,
-) {
+export function createWithObjectKeys(editorActor: EditorActor) {
   return function withKeys(
     editor: PortableTextSlateEditor,
   ): PortableTextSlateEditor {
@@ -89,7 +83,10 @@ export function createWithObjectKeys(
 
     editor.normalizeNode = (entry) => {
       const [node, path] = entry
-      if (Element.isElement(node) && node._type === schemaTypes.block.name) {
+      if (
+        Element.isElement(node) &&
+        node._type === editorActor.getSnapshot().context.schema.block.name
+      ) {
         // Set key on block itself
         if (!node._key) {
           editorActor.send({type: 'normalizing'})

package/src/editor/plugins/createWithPatches.ts

@@ -25,10 +25,7 @@ import {
   PATCHING,
   withoutPatching,
 } from '../../internal-utils/withoutPatching'
-import type {
-  PortableTextMemberSchemaTypes,
-  PortableTextSlateEditor,
-} from '../../types/editor'
+import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
 import {getCurrentActionId} from '../with-applying-behavior-actions'
 import {withoutSaving} from './createWithUndoRedo'
@@ -82,21 +79,19 @@ export interface PatchFunctions {
 interface Options {
   editorActor: EditorActor
   patchFunctions: PatchFunctions
-  schemaTypes: PortableTextMemberSchemaTypes
   subscriptions: Array<() => () => void>
 }
 
 export function createWithPatches({
   editorActor,
   patchFunctions,
-  schemaTypes,
   subscriptions,
 }: Options): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   // The previous editor children are needed to figure out the _key of deleted nodes
   // The editor.children would no longer contain that information if the node is already deleted.
   let previousChildren: Descendant[]
 
-  const applyPatch = createApplyPatch(schemaTypes)
+  const applyPatch = createApplyPatch(editorActor.getSnapshot().context.schema)
 
   return function withPatches(editor: PortableTextSlateEditor) {
     IS_PROCESSING_REMOTE_CHANGES.set(editor, false)
@@ -156,12 +151,18 @@ export function createWithPatches({
       // Update previous children here before we apply
       previousChildren = editor.children
 
-      const editorWasEmpty = isEqualToEmptyEditor(previousChildren, schemaTypes)
+      const editorWasEmpty = isEqualToEmptyEditor(
+        previousChildren,
+        editorActor.getSnapshot().context.schema,
+      )
 
       // Apply the operation
       apply(operation)
 
-      const editorIsEmpty = isEqualToEmptyEditor(editor.children, schemaTypes)
+      const editorIsEmpty = isEqualToEmptyEditor(
+        editor.children,
+        editorActor.getSnapshot().context.schema,
+      )
 
       if (!isPatching(editor)) {
         if (debugVerbose && debug.enabled)
@@ -275,7 +276,7 @@ export function createWithPatches({
           type: 'notify.unset',
           previousValue: fromSlateValue(
             previousChildren,
-            schemaTypes.block.name,
+            editorActor.getSnapshot().context.schema.block.name,
             KEY_TO_VALUE_ELEMENT.get(editor),
           ),
         })
@@ -295,7 +296,7 @@ export function createWithPatches({
             actionId: getCurrentActionId(editor),
             value: fromSlateValue(
               editor.children,
-              schemaTypes.block.name,
+              editorActor.getSnapshot().context.schema.block.name,
               KEY_TO_VALUE_ELEMENT.get(editor),
             ),
           })

package/src/editor/plugins/createWithPortableTextBlockStyle.ts

@@ -1,18 +1,14 @@
 import {Editor, Path, Text as SlateText, Transforms} from 'slate'
 import {debugWithName} from '../../internal-utils/debug'
-import type {
-  PortableTextMemberSchemaTypes,
-  PortableTextSlateEditor,
-} from '../../types/editor'
+import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withPortableTextBlockStyle')
 
 export function createWithPortableTextBlockStyle(
   editorActor: EditorActor,
-  types: PortableTextMemberSchemaTypes,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  const defaultStyle = types.styles[0].value
+  const defaultStyle = editorActor.getSnapshot().context.schema.styles[0].name
   return function withPortableTextBlockStyle(
     editor: PortableTextSlateEditor,
   ): PortableTextSlateEditor {