@portabletext/editor 1.47.5 → 1.47.7

package/src/editor/create-editor.ts

@@ -3,32 +3,23 @@ import type {
   ArraySchemaType,
   PortableTextBlock,
 } from '@sanity/types'
-import {useActorRef} from '@xstate/react'
-import {useMemo} from 'react'
-import {
-  createActor,
-  type ActorRef,
-  type EventObject,
-  type Snapshot,
-} from 'xstate'
+import type {ActorRef, EventObject, Snapshot} from 'xstate'
 import type {Behavior} from '../behaviors/behavior.types.behavior'
 import type {ExternalBehaviorEvent} from '../behaviors/behavior.types.event'
 import {createCoreConverters} from '../converters/converters.core'
 import {compileType} from '../internal-utils/schema'
-import type {EditableAPI, PortableTextMemberSchemaTypes} from '../types/editor'
+import type {EditableAPI} from '../types/editor'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
-import {
-  editorMachine,
-  type EditorActor,
-  type EditorEmittedEvent,
-  type ExternalEditorEvent,
+import type {
+  EditorActor,
+  EditorEmittedEvent,
+  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'
@@ -84,11 +75,10 @@ export type InternalEditor = Editor & {
     editable: EditableAPI
     editorActor: EditorActor
     slateEditor: SlateEditor
-    legacySchema: PortableTextMemberSchemaTypes
   }
 }
 
-export function createInternalEditor(config: EditorConfig): InternalEditor {
+function compileSchemasFromEditorConfig(config: EditorConfig) {
   const legacySchema = config.schemaDefinition
     ? compileSchemaDefinitionToLegacySchema(config.schemaDefinition)
     : createLegacySchema(
@@ -96,65 +86,30 @@ export function createInternalEditor(config: EditorConfig): InternalEditor {
           ? config.schema
           : compileType(config.schema),
       )
-  const editorSchema = legacySchemaToEditorSchema(legacySchema)
-
-  const editorActor = createActor(editorMachine, {
-    input: editorConfigToMachineInput({
-      ...config,
-      schema: editorSchema,
-      legacySchema,
-    }),
-  })
-  editorActor.start()
+  const schema = legacySchemaToEditorSchema(legacySchema)
 
-  return createInternalEditorFromActor(editorActor, legacySchema)
+  return {
+    legacySchema,
+    schema,
+  }
 }
 
-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,
-      schema: editorSchema,
-      legacySchema,
-    }),
-  })
-
-  return useMemo(
-    () => createInternalEditorFromActor(editorActor, legacySchema),
-    [editorActor, legacySchema],
-  )
-}
+export function editorConfigToMachineInput(config: EditorConfig) {
+  const {legacySchema, schema} = compileSchemasFromEditorConfig(config)
 
-function editorConfigToMachineInput(
-  config: Omit<EditorConfig, 'schema'> & {
-    schema: EditorSchema
-    legacySchema: PortableTextMemberSchemaTypes
-  },
-) {
   return {
     behaviors: config.behaviors,
-    converters: createCoreConverters(config.legacySchema),
+    converters: createCoreConverters(legacySchema),
+    getLegacySchema: () => legacySchema,
     keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
     maxBlocks: config.maxBlocks,
     readOnly: config.readOnly,
-    schema: config.schema,
+    schema,
     initialValue: config.initialValue,
   } as const
 }
 
-function createInternalEditorFromActor(
-  editorActor: EditorActor,
-  legacySchema: PortableTextMemberSchemaTypes,
-): InternalEditor {
+export function createInternalEditor(editorActor: EditorActor): InternalEditor {
   const slateEditor = createSlateEditor({editorActor})
   const editable = createEditableAPI(slateEditor.instance, editorActor)
 
@@ -254,7 +209,6 @@ function createInternalEditorFromActor(
     _internal: {
       editable,
       editorActor,
-      legacySchema,
       slateEditor,
     },
   }

package/src/editor/editor-machine.ts

@@ -21,6 +21,7 @@ import type {NamespaceEvent} from '../type-utils'
 import type {
   EditorSelection,
   InvalidValueResolution,
+  PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
 } from '../types/editor'
 import type {EditorSchema} from './editor-schema'
@@ -215,6 +216,7 @@ export const editorMachine = setup({
     context: {} as {
       behaviors: Set<Behavior>
       converters: Set<Converter>
+      getLegacySchema: () => PortableTextMemberSchemaTypes
       keyGenerator: () => string
       pendingEvents: Array<InternalPatchEvent | MutationEvent>
       schema: EditorSchema
@@ -233,6 +235,7 @@ export const editorMachine = setup({
     input: {} as {
       behaviors?: Array<Behavior>
       converters?: Array<Converter>
+      getLegacySchema: () => PortableTextMemberSchemaTypes
       keyGenerator: () => string
       maxBlocks?: number
       readOnly?: boolean
@@ -365,6 +368,7 @@ export const editorMachine = setup({
   context: ({input}) => ({
     behaviors: new Set([...(input.behaviors ?? coreBehaviors)]),
     converters: new Set(input.converters ?? []),
+    getLegacySchema: input.getLegacySchema,
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,

package/src/editor/editor-provider.tsx

@@ -1,12 +1,15 @@
+import {useActorRef} from '@xstate/react'
 import React, {useMemo} from 'react'
 import {Slate} from 'slate-react'
 import {Synchronizer} from './components/Synchronizer'
 import {
-  useCreateInternalEditor,
+  createInternalEditor,
+  editorConfigToMachineInput,
   type Editor,
   type EditorConfig,
 } from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
+import {editorMachine} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {
@@ -44,9 +47,13 @@ export type EditorProviderProps = {
  * @group Components
  */
 export function EditorProvider(props: EditorProviderProps) {
-  const internalEditor = useCreateInternalEditor(props.initialConfig)
-  const editorActor = internalEditor._internal.editorActor
-  const slateEditor = internalEditor._internal.slateEditor
+  const editorActor = useActorRef(editorMachine, {
+    input: editorConfigToMachineInput(props.initialConfig),
+  })
+  const internalEditor = useMemo(
+    () => createInternalEditor(editorActor),
+    [editorActor],
+  )
   const portableTextEditor = useMemo(
     () =>
       new PortableTextEditor({
@@ -65,12 +72,12 @@ export function EditorProvider(props: EditorProviderProps) {
       />
       <Synchronizer
         editorActor={editorActor}
-        slateEditor={slateEditor.instance}
+        slateEditor={internalEditor._internal.slateEditor.instance}
       />
       <EditorActorContext.Provider value={editorActor}>
         <Slate
-          editor={slateEditor.instance}
-          initialValue={slateEditor.initialValue}
+          editor={internalEditor._internal.slateEditor.instance}
+          initialValue={internalEditor._internal.slateEditor.initialValue}
         >
           <PortableTextEditorContext.Provider value={portableTextEditor}>
             <PortableTextEditorSelectionProvider editorActor={editorActor}>

package/src/internal-utils/__tests__/operationToPatches.test.ts

@@ -11,12 +11,14 @@ import {createLegacySchema} from '../../editor/legacy-schema'
 import {withPlugins} from '../../editor/plugins/with-plugins'
 import {createOperationToPatches} from '../operationToPatches'
 
-const schemaTypes = legacySchemaToEditorSchema(createLegacySchema(schemaType))
+const legacySchema = createLegacySchema(schemaType)
+const schemaTypes = legacySchemaToEditorSchema(legacySchema)
 const editorActor = createActor(editorMachine, {
   input: {
     behaviors: coreBehaviors,
     schema: schemaTypes,
     keyGenerator: defaultKeyGenerator,
+    getLegacySchema: () => legacySchema,
   },
 })
 

package/src/internal-utils/__tests__/patchToOperations.test.ts

@@ -12,7 +12,8 @@ import {withPlugins} from '../../editor/plugins/with-plugins'
 import {createApplyPatch} from '../applyPatch'
 import {VOID_CHILD_KEY} from '../values'
 
-const schemaTypes = legacySchemaToEditorSchema(createLegacySchema(schemaType))
+const legacySchema = createLegacySchema(schemaType)
+const schemaTypes = legacySchemaToEditorSchema(legacySchema)
 
 const patchToOperations = createApplyPatch(schemaTypes)
 
@@ -22,6 +23,7 @@ const editor = withPlugins(createEditor(), {
       behaviors: coreBehaviors,
       schema: schemaTypes,
       keyGenerator: defaultKeyGenerator,
+      getLegacySchema: () => legacySchema,
     },
   }),
   subscriptions: [],

package/src/internal-utils/parse-blocks.test.ts

@@ -379,7 +379,6 @@ describe(parseSpan.name, () => {
       _type: 'span',
       text: '',
       marks: [],
-      foo: 'bar',
     })
   })
 

package/src/internal-utils/parse-blocks.ts

@@ -169,8 +169,7 @@ function parseTextBlock({
     .filter((child) => child !== undefined)
 
   const parsedBlock: PortableTextTextBlock = {
-    // Spread the entire block to allow custom properties on it
-    ...block,
+    _type: context.schema.block.name,
     _key,
     children:
       children.length > 0
@@ -186,37 +185,30 @@ function parseTextBlock({
     markDefs,
   }
 
-  /**
-   * Reset text block .style if it's somehow set to an invalid type
-   */
   if (
-    typeof parsedBlock.style !== 'string' ||
-    !context.schema.styles.find((style) => style.name === block.style)
+    typeof block.style === 'string' &&
+    context.schema.styles.find((style) => style.name === block.style)
   ) {
+    parsedBlock.style = block.style
+  } else {
     const defaultStyle = context.schema.styles.at(0)?.name
 
     if (defaultStyle !== undefined) {
       parsedBlock.style = defaultStyle
     } else {
-      delete parsedBlock.style
+      console.error('Expected default style')
     }
   }
 
-  /**
-   * Reset text block .listItem if it's somehow set to an invalid type
-   */
   if (
-    typeof parsedBlock.listItem !== 'string' ||
-    !context.schema.lists.find((list) => list.name === block.listItem)
+    typeof block.listItem === 'string' &&
+    context.schema.lists.find((list) => list.name === block.listItem)
   ) {
-    delete parsedBlock.listItem
+    parsedBlock.listItem = block.listItem
   }
 
-  /**
-   * Reset text block .level if it's somehow set to an invalid type
-   */
-  if (typeof parsedBlock.level !== 'number') {
-    delete parsedBlock.level
+  if (typeof block.level === 'number') {
+    parsedBlock.level = block.level
   }
 
   return parsedBlock
@@ -280,8 +272,6 @@ export function parseSpan({
   })
 
   return {
-    // Spread the entire span to allow custom properties on it
-    ...span,
     _type: 'span',
     _key: options.refreshKeys
       ? context.keyGenerator()