@portabletext/editor 1.15.2 → 1.16.0

package/src/editor/editor-machine.ts

@@ -23,14 +23,15 @@ import type {OmitFromUnion, PickFromUnion} from '../type-utils'
 import type {
   EditorSelection,
   InvalidValueResolution,
-  PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
 } from '../types/editor'
 import debug from '../utils/debug'
 import {toPortableTextRange} from '../utils/ranges'
 import {fromSlateValue} from '../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
+import type {EditorSchema} from './define-schema'
 import type {EditorContext} from './editor-snapshot'
+import {getActiveDecorators} from './get-active-decorators'
 
 export * from 'xstate/guards'
 
@@ -68,6 +69,7 @@ export type MutationEvent = {
 export type InternalEditorEvent =
   | {type: 'normalizing'}
   | {type: 'done normalizing'}
+  | {type: 'done syncing'}
   | {
       type: 'behavior event'
       behaviorEvent: SyntheticBehaviorEvent | NativeBehaviorEvent
@@ -81,7 +83,7 @@ export type InternalEditorEvent =
     }
   | {
       type: 'update schema'
-      schema: PortableTextMemberSchemaTypes
+      schema: EditorSchema
     }
   | {
       type: 'update behaviors'
@@ -98,7 +100,7 @@ export type InternalEditorEvent =
       type: 'update maxBlocks'
       maxBlocks: number | undefined
     }
-  | OmitFromUnion<InternalEditorEmittedEvent, 'type', 'readOnly toggled'>
+  | OmitFromUnion<InternalEditorEmittedEvent, 'type', 'read only' | 'editable'>
 
 /**
  * @alpha
@@ -108,13 +110,14 @@ export type EditorEmittedEvent = PickFromUnion<
   'type',
   | 'blurred'
   | 'done loading'
+  | 'editable'
   | 'error'
   | 'focused'
   | 'invalid value'
   | 'loading'
   | 'mutation'
   | 'patch'
-  | 'readOnly toggled'
+  | 'read only'
   | 'ready'
   | 'selection'
   | 'value changed'
@@ -152,7 +155,8 @@ export type InternalEditorEmittedEvent =
   | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'loading'}
   | {type: 'done loading'}
-  | {type: 'readOnly toggled'; readOnly: boolean}
+  | {type: 'read only'}
+  | {type: 'editable'}
   | PickFromUnion<
       SyntheticBehaviorEvent,
       'type',
@@ -179,10 +183,10 @@ export const editorMachine = setup({
       behaviors: Array<Behavior>
       keyGenerator: () => string
       pendingEvents: Array<PatchEvent | MutationEvent>
-      schema: PortableTextMemberSchemaTypes
-      readOnly: boolean
+      schema: EditorSchema
+      initialReadOnly: boolean
       maxBlocks: number | undefined
-      selection: NonNullable<EditorSelection> | undefined
+      selection: EditorSelection
       value: Array<PortableTextBlock> | undefined
     },
     events: {} as InternalEditorEvent,
@@ -192,7 +196,7 @@ export const editorMachine = setup({
       keyGenerator: () => string
       maxBlocks?: number
       readOnly?: boolean
-      schema: PortableTextMemberSchemaTypes
+      schema: EditorSchema
       value?: Array<PortableTextBlock>
     },
   },
@@ -217,6 +221,8 @@ export const editorMachine = setup({
       assertEvent(event, 'mutation')
       return event
     }),
+    'emit read only': emit({type: 'read only'}),
+    'emit editable': emit({type: 'editable'}),
     'defer event': assign({
       pendingEvents: ({context, event}) => {
         assertEvent(event, ['patch', 'mutation'])
@@ -228,6 +234,7 @@ export const editorMachine = setup({
         enqueue(emit(event))
       }
     }),
+    'emit ready': emit({type: 'ready'}),
     'clear pending events': assign({
       pendingEvents: [],
     }),
@@ -275,24 +282,11 @@ export const editorMachine = setup({
         context.schema,
       )
 
-      if (!selection) {
-        console.warn(
-          `Unable to handle event ${event.type} due to missing selection`,
-        )
-
-        if (!defaultAction) {
-          return
-        }
-
-        enqueue.raise({
-          type: 'behavior action intends',
-          editor: event.editor,
-          actionIntends: [defaultAction],
-        })
-        return
-      }
-
       const editorContext = {
+        activeDecorators: getActiveDecorators({
+          schema: context.schema,
+          slateEditorInstance: event.editor,
+        }),
         keyGenerator: context.keyGenerator,
         schema: context.schema,
         selection,
@@ -361,56 +355,19 @@ export const editorMachine = setup({
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
-    selection: undefined,
-    readOnly: input.readOnly ?? false,
+    selection: null,
+    initialReadOnly: input.readOnly ?? false,
     maxBlocks: input.maxBlocks,
     value: input.value,
   }),
   on: {
-    'annotation.add': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'annotation.remove': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'annotation.toggle': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'blur': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'decorator.*': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'focus': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'insert.*': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'list item.*': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'style.*': {
-      actions: emit(({event}) => event),
-      guard: ({context}) => !context.readOnly,
-    },
-    'ready': {actions: emit(({event}) => event)},
     'unset': {actions: emit(({event}) => event)},
     'value changed': {actions: emit(({event}) => event)},
     'invalid value': {actions: emit(({event}) => event)},
     'error': {actions: emit(({event}) => event)},
     'selection': {
       actions: [
-        assign({selection: ({event}) => event.selection ?? undefined}),
+        assign({selection: ({event}) => event.selection}),
         emit(({event}) => event),
       ],
     },
@@ -422,22 +379,9 @@ export const editorMachine = setup({
     'update behaviors': {actions: 'assign behaviors'},
     'update schema': {actions: 'assign schema'},
     'update value': {actions: assign({value: ({event}) => event.value})},
-    'toggle readOnly': {
-      actions: [
-        assign({readOnly: ({context}) => !context.readOnly}),
-        emit(({context}) => ({
-          type: 'readOnly toggled',
-          readOnly: context.readOnly,
-        })),
-      ],
-    },
     'update maxBlocks': {
       actions: assign({maxBlocks: ({event}) => event.maxBlocks}),
     },
-    'behavior event': {
-      actions: 'handle behavior event',
-      guard: ({context}) => !context.readOnly,
-    },
     'behavior action intends': {
       actions: [
         ({context, event}) => {
@@ -472,49 +416,137 @@ export const editorMachine = setup({
       ],
     },
   },
-  initial: 'pristine',
+  type: 'parallel',
   states: {
-    pristine: {
-      initial: 'idle',
+    'edit mode': {
+      initial: 'read only',
       states: {
-        idle: {
+        'read only': {
+          initial: 'determine initial edit mode',
+          states: {
+            'determine initial edit mode': {
+              on: {
+                'done syncing': [
+                  {
+                    target: '#editor.edit mode.read only.read only',
+                    guard: ({context}) => context.initialReadOnly,
+                  },
+                  {
+                    target: '#editor.edit mode.editable',
+                  },
+                ],
+              },
+            },
+            'read only': {
+              on: {
+                'toggle readOnly': {
+                  target: '#editor.edit mode.editable',
+                  actions: ['emit editable'],
+                },
+              },
+            },
+          },
+        },
+        'editable': {
           on: {
-            normalizing: {
-              target: 'normalizing',
+            'toggle readOnly': {
+              target: '#editor.edit mode.read only.read only',
+              actions: ['emit read only'],
             },
-            patch: {
-              actions: 'defer event',
-              target: '#editor.dirty',
+            'behavior event': {
+              actions: 'handle behavior event',
             },
-            mutation: {
-              actions: 'defer event',
-              target: '#editor.dirty',
+            'annotation.add': {
+              actions: emit(({event}) => event),
+            },
+            'annotation.remove': {
+              actions: emit(({event}) => event),
+            },
+            'annotation.toggle': {
+              actions: emit(({event}) => event),
+            },
+            'blur': {
+              actions: emit(({event}) => event),
+            },
+            'decorator.*': {
+              actions: emit(({event}) => event),
+            },
+            'focus': {
+              actions: emit(({event}) => event),
+            },
+            'insert.*': {
+              actions: emit(({event}) => event),
+            },
+            'list item.*': {
+              actions: emit(({event}) => event),
+            },
+            'style.*': {
+              actions: emit(({event}) => event),
             },
           },
         },
-        normalizing: {
+      },
+    },
+    'setup': {
+      initial: 'setting up',
+      states: {
+        'setting up': {
+          exit: ['emit ready'],
           on: {
-            'done normalizing': {
-              target: 'idle',
-            },
             'patch': {
               actions: 'defer event',
             },
             'mutation': {
               actions: 'defer event',
             },
+            'done syncing': {
+              target: 'pristine',
+            },
           },
         },
-      },
-    },
-    dirty: {
-      entry: ['emit pending events', 'clear pending events'],
-      on: {
-        patch: {
-          actions: 'emit patch event',
+        'pristine': {
+          initial: 'idle',
+          states: {
+            idle: {
+              on: {
+                normalizing: {
+                  target: 'normalizing',
+                },
+                patch: {
+                  actions: 'defer event',
+                  target: '#editor.setup.dirty',
+                },
+                mutation: {
+                  actions: 'defer event',
+                  target: '#editor.setup.dirty',
+                },
+              },
+            },
+            normalizing: {
+              on: {
+                'done normalizing': {
+                  target: 'idle',
+                },
+                'patch': {
+                  actions: 'defer event',
+                },
+                'mutation': {
+                  actions: 'defer event',
+                },
+              },
+            },
+          },
         },
-        mutation: {
-          actions: 'emit mutation event',
+        'dirty': {
+          entry: ['emit pending events', 'clear pending events'],
+          on: {
+            patch: {
+              actions: 'emit patch event',
+            },
+            mutation: {
+              actions: 'emit mutation event',
+            },
+          },
         },
       },
     },

package/src/editor/editor-provider.tsx

@@ -28,7 +28,6 @@ export function EditorProvider(props: EditorProviderProps) {
   const editor = useCreateEditor(props.initialConfig)
   const editorActor = editor._internal.editorActor
   const slateEditor = editor._internal.slateEditor
-  const editable = editor._internal.editable
   const portableTextEditor = useMemo(
     () =>
       new PortableTextEditor({
@@ -47,8 +46,6 @@ export function EditorProvider(props: EditorProviderProps) {
       />
       <Synchronizer
         editorActor={editorActor}
-        getValue={editable.getValue}
-        portableTextEditor={portableTextEditor}
         slateEditor={slateEditor.instance}
       />
       <EditorActorContext.Provider value={editorActor}>

package/src/editor/editor-selector.ts

@@ -1,7 +1,7 @@
 import {useSelector} from '@xstate/react'
-import type {EditorSelection} from '../types/editor'
 import type {Editor} from './create-editor'
 import type {EditorSnapshot} from './editor-snapshot'
+import {getActiveDecorators} from './get-active-decorators'
 import {getValue} from './get-value'
 
 function defaultCompare<T>(a: T, b: T) {
@@ -11,18 +11,7 @@ function defaultCompare<T>(a: T, b: T) {
 /**
  * @alpha
  */
-export type EditorSelectorSnapshot = {
-  context: Omit<EditorSnapshot['context'], 'selection'> & {
-    selection?: NonNullable<EditorSelection>
-  }
-}
-
-/**
- * @alpha
- */
-export type EditorSelector<TSelected> = (
-  snapshot: EditorSelectorSnapshot,
-) => TSelected
+export type EditorSelector<TSelected> = (snapshot: EditorSnapshot) => TSelected
 
 /**
  * @alpha
@@ -36,6 +25,10 @@ export function useEditorSelector<TSelected>(
     editor._internal.editorActor,
     (snapshot) => {
       const context = {
+        activeDecorators: getActiveDecorators({
+          schema: snapshot.context.schema,
+          slateEditorInstance: editor._internal.slateEditor.instance,
+        }),
         keyGenerator: snapshot.context.keyGenerator,
         schema: snapshot.context.schema,
         selection: snapshot.context.selection,

package/src/editor/editor-snapshot.ts

@@ -1,16 +1,15 @@
 import type {PortableTextBlock} from '@sanity/types'
-import type {
-  EditorSelection,
-  PortableTextMemberSchemaTypes,
-} from '../types/editor'
+import type {EditorSelection} from '../types/editor'
+import type {EditorSchema} from './define-schema'
 
 /**
  * @alpha
  */
 export type EditorContext = {
+  activeDecorators: Array<string>
   keyGenerator: () => string
-  schema: PortableTextMemberSchemaTypes
-  selection: NonNullable<EditorSelection>
+  schema: EditorSchema
+  selection: EditorSelection
   value: Array<PortableTextBlock>
 }
 

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

@@ -0,0 +1,20 @@
+import {Editor} from 'slate'
+import type {PortableTextSlateEditor} from '../types/editor'
+import type {EditorSchema} from './define-schema'
+
+export function getActiveDecorators({
+  schema,
+  slateEditorInstance,
+}: {
+  schema: EditorSchema
+  slateEditorInstance: PortableTextSlateEditor
+}) {
+  const decorators = schema.decorators.map((decorator) => decorator.value)
+
+  const marks =
+    {
+      ...(Editor.marks(slateEditorInstance) ?? {}),
+    }.marks ?? []
+
+  return marks.filter((mark) => decorators.includes(mark))
+}

package/src/editor/mutation-machine.ts

@@ -0,0 +1,100 @@
+import type {Patch} from '@portabletext/patches'
+import type {PortableTextBlock} from '@sanity/types'
+import {Editor} from 'slate'
+import {assign, emit, setup} from 'xstate'
+import type {PortableTextSlateEditor} from '../types/editor'
+import {fromSlateValue} from '../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
+import type {EditorSchema} from './define-schema'
+
+const FLUSH_PATCHES_THROTTLED_MS = process.env.NODE_ENV === 'test' ? 500 : 1000
+
+/**
+ * Makes sure editor mutation events are debounced
+ */
+export const mutationMachine = setup({
+  types: {
+    context: {} as {
+      pendingPatches: Array<Patch>
+      schema: EditorSchema
+      slateEditor: PortableTextSlateEditor
+    },
+    events: {} as {type: 'patch'; patch: Patch},
+    input: {} as {
+      schema: EditorSchema
+      slateEditor: PortableTextSlateEditor
+    },
+    emitted: {} as
+      | {
+          type: 'has pending patches'
+        }
+      | {
+          type: 'mutation'
+          patches: Array<Patch>
+          snapshot: Array<PortableTextBlock> | undefined
+        },
+  },
+  actions: {
+    'emit has pending patches': emit({type: 'has pending patches'}),
+    'emit mutation': emit(({context}) => ({
+      type: 'mutation' as const,
+      patches: context.pendingPatches,
+      snapshot: fromSlateValue(
+        context.slateEditor.children,
+        context.schema.block.name,
+        KEY_TO_VALUE_ELEMENT.get(context.slateEditor),
+      ),
+    })),
+    'clear pending patches': assign({
+      pendingPatches: [],
+    }),
+    'defer patch': assign({
+      pendingPatches: ({context, event}) => [
+        ...context.pendingPatches,
+        event.patch,
+      ],
+    }),
+  },
+  guards: {
+    'slate is normalizing': ({context}) =>
+      Editor.isNormalizing(context.slateEditor),
+  },
+}).createMachine({
+  id: 'mutation',
+  context: ({input}) => ({
+    pendingPatches: [],
+    schema: input.schema,
+    slateEditor: input.slateEditor,
+  }),
+  initial: 'idle',
+  states: {
+    'idle': {
+      on: {
+        patch: {
+          actions: ['defer patch', 'emit has pending patches'],
+          target: 'has pending patches',
+        },
+      },
+    },
+    'has pending patches': {
+      after: {
+        [FLUSH_PATCHES_THROTTLED_MS]: [
+          {
+            guard: 'slate is normalizing',
+            target: 'idle',
+            actions: ['emit mutation', 'clear pending patches'],
+          },
+          {
+            reenter: true,
+          },
+        ],
+      },
+      on: {
+        patch: {
+          actions: ['defer patch'],
+          reenter: true,
+        },
+      },
+    },
+  },
+})

package/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx

@@ -49,26 +49,22 @@ describe('plugin:withPortableTextMarksModel', () => {
           anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 4},
         })
         PortableTextEditor.toggleMark(editor, 'strong')
-        expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-        [
+        expect(PortableTextEditor.getValue(editor)).toEqual([
           {
-            "_key": "a",
-            "_type": "myTestBlockType",
-            "children": [
+            _key: 'a',
+            _type: 'myTestBlockType',
+            children: [
               {
-                "_key": "a1",
-                "_type": "span",
-                "marks": [
-                  "strong",
-                ],
-                "text": "1234",
+                _key: 'a1',
+                _type: 'span',
+                marks: ['strong'],
+                text: '1234',
               },
             ],
-            "markDefs": [],
-            "style": "normal",
+            markDefs: [],
+            style: 'normal',
           },
-        ]
-      `)
+        ])
       })
       await waitFor(() => {
         if (editorRef.current) {
@@ -871,6 +867,16 @@ describe('plugin:withPortableTextMarksModel', () => {
         )
       })
 
+      await waitFor(() => {
+        if (editorRef.current) {
+          expect(onChange).toHaveBeenCalledWith({
+            type: 'value',
+            value: initialValue,
+          })
+          expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+        }
+      })
+
       await waitFor(() => {
         if (editorRef.current) {
           PortableTextEditor.focus(editorRef.current)

package/src/editor/plugins/createWithMaxBlocks.ts

@@ -13,7 +13,7 @@ export function createWithMaxBlocks(editorActor: EditorActor) {
   ): PortableTextSlateEditor {
     const {apply} = editor
     editor.apply = (operation) => {
-      if (editorActor.getSnapshot().context.readOnly) {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
         apply(operation)
         return
       }

package/src/editor/plugins/createWithPatches.ts

@@ -150,10 +150,6 @@ export function createWithPatches({
     })
 
     editor.apply = (operation: Operation): void | Editor => {
-      if (editorActor.getSnapshot().context.readOnly) {
-        apply(operation)
-        return editor
-      }
       let patches: Patch[] = []
 
       // Update previous children here before we apply

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -21,7 +21,7 @@ export function createWithPlaceholderBlock(
     const {apply} = editor
 
     editor.apply = (op) => {
-      if (editorActor.getSnapshot().context.readOnly) {
+      if (editorActor.getSnapshot().matches({'edit mode': 'read only'})) {
         apply(op)
         return
       }

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -57,7 +57,10 @@ export function createWithPortableTextSelections(
     editor.onChange = () => {
       const hasChanges = editor.operations.length > 0
       onChange()
-      if (hasChanges) {
+      if (
+        hasChanges &&
+        !editorActor.getSnapshot().matches({setup: 'setting up'})
+      ) {
         emitPortableTextSelection()
       }
     }