@portabletext/editor 1.12.3 → 1.14.0

package/src/editor/editor-event-listener.tsx

@@ -1,7 +1,7 @@
 import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
 import type {EditorEmittedEvent} from './editor-machine'
-import {useEditorContext} from './editor-provider'
+import {useEditor} from './editor-provider'
 
 /**
  * @alpha
@@ -9,7 +9,7 @@ import {useEditorContext} from './editor-provider'
 export function EditorEventListener(props: {
   on: (event: EditorEmittedEvent) => void
 }) {
-  const editor = useEditorContext()
+  const editor = useEditor()
   const on = useEffectEvent(props.on)
 
   useEffect(() => {

package/src/editor/editor-machine.ts

@@ -16,6 +16,7 @@ import type {
   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'
@@ -25,11 +26,11 @@ import type {
   Behavior,
   BehaviorAction,
   BehaviorActionIntend,
-  BehaviorContext,
   BehaviorEvent,
   OmitFromUnion,
   PickFromUnion,
 } from './behavior/behavior.types'
+import type {EditorContext} from './editor-snapshot'
 
 export * from 'xstate/guards'
 
@@ -71,6 +72,7 @@ export type InternalEditorEvent =
       type: 'behavior event'
       behaviorEvent: BehaviorEvent
       editor: PortableTextSlateEditor
+      nativeEvent?: {preventDefault: () => void}
     }
   | {
       type: 'behavior action intends'
@@ -146,7 +148,7 @@ export type InternalEditorEmittedEvent =
       data: unknown
     }
   | {type: 'selection'; selection: EditorSelection}
-  | {type: 'blur'; event: FocusEvent<HTMLDivElement, Element>}
+  | {type: 'blurred'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'loading'}
   | {type: 'done loading'}
@@ -154,7 +156,18 @@ export type InternalEditorEmittedEvent =
   | PickFromUnion<
       BehaviorEvent,
       'type',
-      'annotation.add' | 'annotation.remove' | 'annotation.toggle' | 'focus'
+      | 'annotation.add'
+      | 'annotation.remove'
+      | 'annotation.toggle'
+      | 'blur'
+      | 'decorator.add'
+      | 'decorator.remove'
+      | 'decorator.toggle'
+      | 'insert.block object'
+      | 'insert.inline object'
+      | 'list item.toggle'
+      | 'focus'
+      | 'style.toggle'
     >
 
 /**
@@ -169,6 +182,7 @@ export const editorMachine = setup({
       schema: PortableTextMemberSchemaTypes
       readOnly: boolean
       maxBlocks: number | undefined
+      selection: NonNullable<EditorSelection> | undefined
       value: Array<PortableTextBlock> | undefined
     },
     events: {} as InternalEditorEvent,
@@ -220,6 +234,8 @@ export const editorMachine = setup({
     'handle behavior event': enqueueActions(({context, event, enqueue}) => {
       assertEvent(event, ['behavior event'])
 
+      debug('Behavior event', event)
+
       const defaultAction = {
         ...event.behaviorEvent,
         editor: event.editor,
@@ -261,30 +277,29 @@ export const editorMachine = setup({
         return
       }
 
-      const behaviorContext = {
+      const editorContext = {
+        keyGenerator: context.keyGenerator,
         schema: context.schema,
-        value,
         selection,
-      } satisfies BehaviorContext
+        value,
+      } satisfies EditorContext
 
       let behaviorOverwritten = false
 
       for (const eventBehavior of eventBehaviors) {
         const shouldRun =
-          eventBehavior.guard?.({
-            context: behaviorContext,
+          eventBehavior.guard === undefined ||
+          eventBehavior.guard({
+            context: editorContext,
             event: event.behaviorEvent,
-          }) ?? true
+          })
 
         if (!shouldRun) {
           continue
         }
 
         const actionIntendSets = eventBehavior.actions.map((actionSet) =>
-          actionSet(
-            {context: behaviorContext, event: event.behaviorEvent},
-            shouldRun,
-          ),
+          actionSet(shouldRun),
         )
 
         for (const actionIntends of actionIntendSets) {
@@ -303,6 +318,7 @@ export const editorMachine = setup({
         }
 
         if (behaviorOverwritten) {
+          event.nativeEvent?.preventDefault()
           break
         }
       }
@@ -323,6 +339,7 @@ export const editorMachine = setup({
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
+    selection: undefined,
     readOnly: input.readOnly ?? false,
     maxBlocks: input.maxBlocks,
     value: input.value,
@@ -340,17 +357,42 @@ export const editorMachine = setup({
       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: emit(({event}) => event)},
-    'blur': {actions: emit(({event}) => event)},
+    'selection': {
+      actions: [
+        assign({selection: ({event}) => event.selection ?? undefined}),
+        emit(({event}) => event),
+      ],
+    },
+    'blurred': {actions: emit(({event}) => event)},
     'focused': {actions: emit(({event}) => event)},
     'loading': {actions: emit({type: 'loading'})},
     'patches': {actions: emit(({event}) => event)},

package/src/editor/editor-provider.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react'
 import {Slate} from 'slate-react'
 import {Synchronizer} from './components/Synchronizer'
+import {useCreateEditor, type Editor, type EditorConfig} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
@@ -9,7 +10,6 @@ import {
   RouteEventsToChanges,
   type PortableTextEditorProps,
 } from './PortableTextEditor'
-import {useEditor, type Editor, type EditorConfig} from './use-editor'
 
 const EditorContext = React.createContext<Editor | undefined>(undefined)
 
@@ -17,7 +17,7 @@ const EditorContext = React.createContext<Editor | undefined>(undefined)
  * @alpha
  */
 export type EditorProviderProps = {
-  config: EditorConfig
+  initialConfig: EditorConfig
   children?: React.ReactNode
 }
 
@@ -25,10 +25,10 @@ export type EditorProviderProps = {
  * @alpha
  */
 export function EditorProvider(props: EditorProviderProps) {
-  const editor = useEditor(props.config)
+  const editor = useCreateEditor(props.initialConfig)
   const editorActor = editor._internal.editorActor
   const slateEditor = editor._internal.slateEditor
-  const editable = editor.editable
+  const editable = editor._internal.editable
   const portableTextEditor = useMemo(
     () =>
       new PortableTextEditor({
@@ -70,7 +70,7 @@ export function EditorProvider(props: EditorProviderProps) {
 /**
  * @alpha
  */
-export function useEditorContext() {
+export function useEditor() {
   const editor = React.useContext(EditorContext)
 
   if (!editor) {

package/src/editor/editor-selector.ts

@@ -0,0 +1,49 @@
+import {useSelector} from '@xstate/react'
+import type {EditorSelection} from '../types/editor'
+import type {Editor} from './create-editor'
+import type {EditorSnapshot} from './editor-snapshot'
+import {getValue} from './get-value'
+
+function defaultCompare<T>(a: T, b: T) {
+  return a === b
+}
+
+/**
+ * @alpha
+ */
+export type EditorSelectorSnapshot = {
+  context: Omit<EditorSnapshot['context'], 'selection'> & {
+    selection?: NonNullable<EditorSelection>
+  }
+}
+
+/**
+ * @alpha
+ */
+export type EditorSelector<TSelected> = (
+  snapshot: EditorSelectorSnapshot,
+) => TSelected
+
+/**
+ * @alpha
+ */
+export function useEditorSelector<TSelected>(
+  editor: Editor,
+  selector: EditorSelector<TSelected>,
+  compare: (a: TSelected, b: TSelected) => boolean = defaultCompare,
+) {
+  return useSelector(
+    editor._internal.editorActor,
+    (snapshot) => {
+      const context = {
+        keyGenerator: snapshot.context.keyGenerator,
+        schema: snapshot.context.schema,
+        selection: snapshot.context.selection,
+        value: getValue(editor),
+      }
+
+      return selector({context})
+    },
+    compare,
+  )
+}

package/src/editor/editor-snapshot.ts

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

package/src/editor/get-value.ts

@@ -0,0 +1,11 @@
+import {fromSlateValue} from '../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
+import type {Editor} from './create-editor'
+
+export function getValue(editor: Editor) {
+  return fromSlateValue(
+    editor._internal.slateEditor.instance.children,
+    editor._internal.editorActor.getSnapshot().context.schema.block.name,
+    KEY_TO_VALUE_ELEMENT.get(editor._internal.slateEditor.instance),
+  )
+}

package/src/editor/plugins/create-with-event-listeners.ts

@@ -46,6 +46,49 @@ export function createWithEventListeners(
             })
             break
           }
+          case 'blur': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'blur',
+              },
+              editor,
+            })
+            break
+          }
+          case 'decorator.add': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'decorator.add',
+                decorator: event.decorator,
+              },
+              editor,
+            })
+            break
+          }
+          case 'decorator.remove': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'decorator.remove',
+                decorator: event.decorator,
+              },
+              editor,
+            })
+            break
+          }
+          case 'decorator.toggle': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'decorator.toggle',
+                decorator: event.decorator,
+              },
+              editor,
+            })
+            break
+          }
           case 'focus': {
             editorActor.send({
               type: 'behavior event',
@@ -56,6 +99,51 @@ export function createWithEventListeners(
             })
             break
           }
+          case 'insert.block object': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'insert.block object',
+                placement: event.placement,
+                blockObject: event.blockObject,
+              },
+              editor,
+            })
+            break
+          }
+          case 'insert.inline object': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'insert.inline object',
+                inlineObject: event.inlineObject,
+              },
+              editor,
+            })
+            break
+          }
+          case 'list item.toggle': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'list item.toggle',
+                listItem: event.listItem,
+              },
+              editor,
+            })
+            break
+          }
+          case 'style.toggle': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'style.toggle',
+                style: event.style,
+              },
+              editor,
+            })
+            break
+          }
         }
       })
 
@@ -92,7 +180,7 @@ export function createWithEventListeners(
       editorActor.send({
         type: 'behavior event',
         behaviorEvent: {
-          type: 'delete backward',
+          type: 'delete.backward',
           unit,
         },
         editor,
@@ -104,7 +192,7 @@ export function createWithEventListeners(
       editorActor.send({
         type: 'behavior event',
         behaviorEvent: {
-          type: 'delete forward',
+          type: 'delete.forward',
           unit,
         },
         editor,
@@ -116,7 +204,7 @@ export function createWithEventListeners(
       editorActor.send({
         type: 'behavior event',
         behaviorEvent: {
-          type: 'insert break',
+          type: 'insert.break',
         },
         editor,
       })
@@ -127,7 +215,7 @@ export function createWithEventListeners(
       editorActor.send({
         type: 'behavior event',
         behaviorEvent: {
-          type: 'insert soft break',
+          type: 'insert.soft break',
         },
         editor,
       })
@@ -138,7 +226,7 @@ export function createWithEventListeners(
       editorActor.send({
         type: 'behavior event',
         behaviorEvent: {
-          type: 'insert text',
+          type: 'insert.text',
           text,
           options,
         },

package/src/editor/plugins/createWithEditableAPI.ts

@@ -31,7 +31,8 @@ import {
   KEY_TO_VALUE_ELEMENT,
   SLATE_TO_PORTABLE_TEXT_RANGE,
 } from '../../utils/weakMaps'
-import {insertBlockObjectActionImplementation} from '../behavior/behavior.action.insert-block-object'
+import {isListItemActive} from '../behavior/behavior.action.list-item'
+import {isStyleActive} from '../behavior/behavior.action.style'
 import type {BehaviorActionImplementation} from '../behavior/behavior.actions'
 import type {EditorActor} from '../editor-machine'
 import {isDecoratorActive} from './createWithPortableTextMarkModel'
@@ -46,10 +47,22 @@ export function createEditableAPI(
 
   const editableApi: EditableAPI = {
     focus: (): void => {
-      ReactEditor.focus(editor)
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'focus',
+        },
+        editor,
+      })
     },
     blur: (): void => {
-      ReactEditor.blur(editor)
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'blur',
+        },
+        editor,
+      })
     },
     toggleMark: (mark: string): void => {
       editorActor.send({
@@ -61,11 +74,25 @@ export function createEditableAPI(
         editor,
       })
     },
-    toggleList: (listStyle: string): void => {
-      editor.pteToggleListItem(listStyle)
+    toggleList: (listItem: string): void => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'list item.toggle',
+          listItem,
+        },
+        editor,
+      })
     },
-    toggleBlockStyle: (blockStyle: string): void => {
-      editor.pteToggleBlockStyle(blockStyle)
+    toggleBlockStyle: (style: string): void => {
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'style.toggle',
+          style,
+        },
+        editor,
+      })
     },
     isMarkActive: (mark: string): boolean => {
       // Try/catch this, as Slate may error because the selection is currently wrong
@@ -132,6 +159,32 @@ export function createEditableAPI(
       type: TSchemaType,
       value?: {[prop: string]: any},
     ): Path => {
+      if (type.name !== types.span.name) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'insert.inline object',
+            inlineObject: {
+              name: type.name,
+              value,
+            },
+          },
+          editor,
+        })
+
+        return (
+          toPortableTextRange(
+            fromSlateValue(
+              editor.children,
+              types.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            ),
+            editor.selection,
+            types,
+          )?.focus.path ?? []
+        )
+      }
+
       if (!editor.selection) {
         throw new Error('The editor has no selection')
       }
@@ -187,6 +240,7 @@ export function createEditableAPI(
         at: editor.selection,
       })
       editor.onChange()
+
       return (
         toPortableTextRange(
           fromSlateValue(
@@ -203,24 +257,19 @@ export function createEditableAPI(
       type: TSchemaType,
       value?: {[prop: string]: any},
     ): Path => {
-      insertBlockObjectActionImplementation({
-        context: {
-          keyGenerator: editorActor.getSnapshot().context.keyGenerator,
-          schema: types,
-        },
-        action: {
-          type: 'insert block object',
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert.block object',
           blockObject: {
             name: type.name,
             value,
           },
           placement: 'auto',
-          editor,
         },
+        editor,
       })
 
-      editor.onChange()
-
       return (
         toPortableTextRange(
           fromSlateValue(
@@ -235,15 +284,15 @@ export function createEditableAPI(
     },
     hasBlockStyle: (style: string): boolean => {
       try {
-        return editor.pteHasBlockStyle(style)
+        return isStyleActive({editor, style})
       } catch {
         // This is fine.
         return false
       }
     },
-    hasListStyle: (listStyle: string): boolean => {
+    hasListStyle: (listItem: string): boolean => {
       try {
-        return editor.pteHasListStyle(listStyle)
+        return isListItemActive({editor, listItem})
       } catch {
         // This is fine.
         return false