@portabletext/editor 1.10.1 → 1.11.0

package/src/editor/editor-machine.ts

@@ -7,7 +7,6 @@ import {
   assign,
   emit,
   enqueueActions,
-  fromCallback,
   setup,
   type ActorRefFrom,
 } from 'xstate'
@@ -28,6 +27,7 @@ import type {
   BehaviorActionIntend,
   BehaviorContext,
   BehaviorEvent,
+  OmitFromUnion,
   PickFromUnion,
 } from './behavior/behavior.types'
 
@@ -38,27 +38,6 @@ export * from 'xstate/guards'
  */
 export type EditorActor = ActorRefFrom<typeof editorMachine>
 
-const networkLogic = fromCallback(({sendBack}) => {
-  const onlineHandler = () => {
-    sendBack({type: 'online'})
-  }
-  const offlineHandler = () => {
-    sendBack({type: 'offline'})
-  }
-
-  if (window) {
-    window.addEventListener('online', onlineHandler)
-    window.addEventListener('offline', offlineHandler)
-  }
-
-  return () => {
-    if (window) {
-      window.removeEventListener('online', onlineHandler)
-      window.removeEventListener('offline', offlineHandler)
-    }
-  }
-})
-
 /**
  * @internal
  */
@@ -117,7 +96,27 @@ export type InternalEditorEvent =
       type: 'update maxBlocks'
       maxBlocks: number | undefined
     }
-  | InternalEditorEmittedEvent
+  | OmitFromUnion<InternalEditorEmittedEvent, 'type', 'readOnly toggled'>
+
+/**
+ * @alpha
+ */
+export type EditorEmittedEvent = PickFromUnion<
+  InternalEditorEmittedEvent,
+  'type',
+  | 'blur'
+  | 'done loading'
+  | 'error'
+  | 'focus'
+  | 'invalid value'
+  | 'loading'
+  | 'mutation'
+  | 'patch'
+  | 'readOnly toggled'
+  | 'ready'
+  | 'selection'
+  | 'value changed'
+>
 
 /**
  * @internal
@@ -149,10 +148,9 @@ export type InternalEditorEmittedEvent =
   | {type: 'selection'; selection: EditorSelection}
   | {type: 'blur'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
-  | {type: 'online'}
-  | {type: 'offline'}
   | {type: 'loading'}
   | {type: 'done loading'}
+  | {type: 'readOnly toggled'; readOnly: boolean}
   | PickFromUnion<
       BehaviorEvent,
       'type',
@@ -178,6 +176,8 @@ export const editorMachine = setup({
     input: {} as {
       behaviors?: Array<Behavior>
       keyGenerator: () => string
+      maxBlocks?: number
+      readOnly?: boolean
       schema: PortableTextMemberSchemaTypes
       value?: Array<PortableTextBlock>
     },
@@ -313,9 +313,6 @@ export const editorMachine = setup({
       }
     }),
   },
-  actors: {
-    networkLogic,
-  },
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
@@ -323,14 +320,10 @@ export const editorMachine = setup({
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
-    readOnly: false,
-    maxBlocks: undefined,
+    readOnly: input.readOnly ?? false,
+    maxBlocks: input.maxBlocks,
     value: input.value,
   }),
-  invoke: {
-    id: 'networkLogic',
-    src: 'networkLogic',
-  },
   on: {
     'annotation.add': {
       actions: emit(({event}) => event),
@@ -356,8 +349,6 @@ export const editorMachine = setup({
     'selection': {actions: emit(({event}) => event)},
     'blur': {actions: emit(({event}) => event)},
     'focused': {actions: emit(({event}) => event)},
-    'online': {actions: emit({type: 'online'})},
-    'offline': {actions: emit({type: 'offline'})},
     'loading': {actions: emit({type: 'loading'})},
     'patches': {actions: emit(({event}) => event)},
     'done loading': {actions: emit({type: 'done loading'})},
@@ -365,7 +356,13 @@ export const editorMachine = setup({
     'update schema': {actions: 'assign schema'},
     'update value': {actions: assign({value: ({event}) => event.value})},
     'toggle readOnly': {
-      actions: assign({readOnly: ({context}) => !context.readOnly}),
+      actions: [
+        assign({readOnly: ({context}) => !context.readOnly}),
+        emit(({context}) => ({
+          type: 'readOnly toggled',
+          readOnly: context.readOnly,
+        })),
+      ],
     },
     'update maxBlocks': {
       actions: assign({maxBlocks: ({event}) => event.maxBlocks}),

package/src/editor/editor-provider.tsx

@@ -0,0 +1,81 @@
+import React, {useMemo} from 'react'
+import {Slate} from 'slate-react'
+import {Synchronizer} from './components/Synchronizer'
+import {EditorActorContext} from './editor-actor-context'
+import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
+import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
+import {
+  PortableTextEditor,
+  RouteEventsToChanges,
+  type PortableTextEditorProps,
+} from './PortableTextEditor'
+import {useEditor, type Editor, type EditorConfig} from './use-editor'
+
+const EditorContext = React.createContext<Editor | undefined>(undefined)
+
+/**
+ * @alpha
+ */
+export type EditorProviderProps = {
+  config: EditorConfig
+  children?: React.ReactNode
+}
+
+/**
+ * @alpha
+ */
+export function EditorProvider(props: EditorProviderProps) {
+  const editor = useEditor(props.config)
+  const editorActor = editor._internal.editorActor
+  const slateEditor = editor._internal.slateEditor
+  const editable = editor.editable
+  const portableTextEditor = useMemo(
+    () =>
+      new PortableTextEditor({
+        editor,
+      } as unknown as PortableTextEditorProps),
+    [editor],
+  )
+
+  return (
+    <EditorContext.Provider value={editor}>
+      <RouteEventsToChanges
+        editorActor={editorActor}
+        onChange={(change) => {
+          portableTextEditor.change$.next(change)
+        }}
+      />
+      <Synchronizer
+        editorActor={editorActor}
+        getValue={editable.getValue}
+        portableTextEditor={portableTextEditor}
+        slateEditor={slateEditor.instance}
+      />
+      <EditorActorContext.Provider value={editorActor}>
+        <Slate
+          editor={slateEditor.instance}
+          initialValue={slateEditor.initialValue}
+        >
+          <PortableTextEditorContext.Provider value={portableTextEditor}>
+            <PortableTextEditorSelectionProvider editorActor={editorActor}>
+              {props.children}
+            </PortableTextEditorSelectionProvider>
+          </PortableTextEditorContext.Provider>
+        </Slate>
+      </EditorActorContext.Provider>
+    </EditorContext.Provider>
+  )
+}
+
+/**
+ * @alpha
+ */
+export function useEditorContext() {
+  const editor = React.useContext(EditorContext)
+
+  if (!editor) {
+    throw new Error('No Editor set. Use EditorProvider to set one.')
+  }
+
+  return editor
+}

package/src/editor/hooks/useSyncValue.ts

@@ -2,7 +2,6 @@ import type {PortableTextBlock} from '@sanity/types'
 import {debounce, isEqual} from 'lodash'
 import {useCallback, useMemo, useRef} from 'react'
 import {Editor, Text, Transforms, type Descendant, type Node} from 'slate'
-import {useSlate} from 'slate-react'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {validateValue} from '../../utils/validateValue'
@@ -26,6 +25,7 @@ export interface UseSyncValueProps {
   editorActor: EditorActor
   portableTextEditor: PortableTextEditor
   readOnly: boolean
+  slateEditor: PortableTextSlateEditor
 }
 
 const CURRENT_VALUE = new WeakMap<
@@ -51,10 +51,9 @@ export function useSyncValue(
   value: PortableTextBlock[] | undefined,
   userCallbackFn?: () => void,
 ) => void {
-  const {editorActor, portableTextEditor, readOnly} = props
+  const {editorActor, portableTextEditor, readOnly, slateEditor} = props
   const schemaTypes = editorActor.getSnapshot().context.schema
   const previousValue = useRef<PortableTextBlock[] | undefined>()
-  const slateEditor = useSlate()
   const updateValueFunctionRef =
     useRef<(value: PortableTextBlock[] | undefined) => void>()
 

package/src/editor/plugins/with-plugins.ts

@@ -21,11 +21,6 @@ export interface OriginalEditorFunctions {
   normalizeNode: (entry: NodeEntry<Node>) => void
 }
 
-const originalFnMap = new WeakMap<
-  PortableTextSlateEditor,
-  OriginalEditorFunctions
->()
-
 type PluginsOptions = {
   editorActor: EditorActor
   subscriptions: Array<() => () => void>
@@ -38,17 +33,6 @@ export const withPlugins = <T extends Editor>(
   const e = editor as T & PortableTextSlateEditor
   const {editorActor} = options
   const schemaTypes = editorActor.getSnapshot().context.schema
-  if (e.destroy) {
-    e.destroy()
-  } else {
-    // Save a copy of the original editor functions here before they were changed by plugins.
-    // We will put them back when .destroy is called (see below).
-    originalFnMap.set(e, {
-      apply: e.apply,
-      onChange: e.onChange,
-      normalizeNode: e.normalizeNode,
-    })
-  }
   const operationToPatches = createOperationToPatches(schemaTypes)
   const withObjectKeys = createWithObjectKeys(editorActor, schemaTypes)
   const withSchemaTypes = createWithSchemaTypes({
@@ -92,17 +76,6 @@ export const withPlugins = <T extends Editor>(
     options.subscriptions,
   )
 
-  e.destroy = () => {
-    const originalFunctions = originalFnMap.get(e)
-    if (!originalFunctions) {
-      throw new Error('Could not find pristine versions of editor functions')
-    }
-    e.apply = originalFunctions.apply
-    e.history = {undos: [], redos: []}
-    e.normalizeNode = originalFunctions.normalizeNode
-    e.onChange = originalFunctions.onChange
-  }
-
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
   return withEventListeners(
     withSchemaTypes(

package/src/editor/use-editor.ts

@@ -3,7 +3,15 @@ import type {
   ArraySchemaType,
   PortableTextBlock,
 } from '@sanity/types'
-import {useActorRef, useSelector} from '@xstate/react'
+import {useActorRef} from '@xstate/react'
+import {useCallback, useMemo} from 'react'
+import {
+  createActor,
+  type ActorRef,
+  type EventObject,
+  type Snapshot,
+} from 'xstate'
+import type {EditableAPI} from '../types/editor'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
 import type {Behavior, PickFromUnion} from './behavior/behavior.types'
@@ -12,9 +20,11 @@ import {compileSchemaDefinition, type SchemaDefinition} from './define-schema'
 import {
   editorMachine,
   type EditorActor,
+  type EditorEmittedEvent,
   type InternalEditorEvent,
 } from './editor-machine'
 import {defaultKeyGenerator} from './key-generator'
+import {createEditableAPI} from './plugins/createWithEditableAPI'
 
 /**
  * @alpha
@@ -22,6 +32,8 @@ import {defaultKeyGenerator} from './key-generator'
 export type EditorConfig = {
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
+  maxBlocks?: number
+  readOnly?: boolean
   initialValue?: Array<PortableTextBlock>
 } & (
   | {
@@ -53,8 +65,8 @@ export type EditorEvent = PickFromUnion<
  */
 export type Editor = {
   send: (event: EditorEvent) => void
-  on: EditorActor['on']
-  readOnly: boolean
+  on: ActorRef<Snapshot<unknown>, EventObject, EditorEmittedEvent>['on']
+  editable: EditableAPI
   _internal: {
     editorActor: EditorActor
     slateEditor: SlateEditor
@@ -64,33 +76,90 @@ export type Editor = {
 /**
  * @alpha
  */
-export function useEditor(config: EditorConfig): Editor {
-  const editorActor = useActorRef(editorMachine, {
-    input: {
-      behaviors: config.behaviors,
-      keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
-      schema: config.schemaDefinition
-        ? compileSchemaDefinition(config.schemaDefinition)
-        : getPortableTextMemberSchemaTypes(
-            config.schema.hasOwnProperty('jsonType')
-              ? config.schema
-              : compileType(config.schema),
-          ),
-      value: config.initialValue,
-    },
+export function createEditor(config: EditorConfig): Editor {
+  const editorActor = createActor(editorMachine, {
+    input: editorConfigToMachineInput(config),
   })
+
+  editorActor.start()
+
   const slateEditor = createSlateEditor({editorActor})
-  const readOnly = useSelector(editorActor, (s) => s.context.readOnly)
+  const editable = createEditableAPI(slateEditor.instance, editorActor)
 
   return {
     send: (event) => {
       editorActor.send(event)
     },
-    on: (event, listener) => editorActor.on(event, listener),
-    readOnly,
+    on: (event, listener) =>
+      editorActor.on(
+        event,
+        // @ts-ignore
+        listener,
+      ),
+    editable,
     _internal: {
       editorActor,
       slateEditor,
     },
   }
 }
+
+/**
+ * @alpha
+ */
+export function useEditor(config: EditorConfig): Editor {
+  const editorActor = useActorRef(editorMachine, {
+    input: editorConfigToMachineInput(config),
+  })
+  const slateEditor = createSlateEditor({editorActor})
+  const editable = useMemo(
+    () => createEditableAPI(slateEditor.instance, editorActor),
+    [slateEditor.instance, editorActor],
+  )
+  const send = useCallback(
+    (event: EditorEvent) => {
+      editorActor.send(event)
+    },
+    [editorActor],
+  )
+  const on = useCallback<Editor['on']>(
+    (event, listener) =>
+      editorActor.on(
+        event,
+        // @ts-ignore
+        listener,
+      ),
+    [editorActor],
+  )
+  const editor: Editor = useMemo(
+    () => ({
+      send,
+      on,
+      editable,
+      _internal: {
+        editorActor,
+        slateEditor,
+      },
+    }),
+    [send, on, editable, editorActor, slateEditor],
+  )
+
+  return editor
+}
+
+function editorConfigToMachineInput(config: EditorConfig) {
+  return {
+    behaviors: config.behaviors,
+    keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
+    maxBlocks: config.maxBlocks,
+    readOnly: config.readOnly,
+    schema: config.schemaDefinition
+      ? compileSchemaDefinition(config.schemaDefinition)
+      : getPortableTextMemberSchemaTypes(
+          config.schema.hasOwnProperty('jsonType')
+            ? config.schema
+            : compileType(config.schema),
+        ),
+    value: config.initialValue,
+  } as const
+}

package/src/index.ts

@@ -1,14 +1,14 @@
 export type {Patch} from '@portabletext/patches'
 export type {PortableTextBlock, PortableTextChild} from '@sanity/types'
 export {coreBehavior, coreBehaviors} from './editor/behavior/behavior.core'
-export {
-  createMarkdownBehaviors,
-  type MarkdownBehaviorsConfig,
-} from './editor/behavior/behavior.markdown'
 export {
   createLinkBehaviors,
   type LinkBehaviorsConfig,
 } from './editor/behavior/behavior.links'
+export {
+  createMarkdownBehaviors,
+  type MarkdownBehaviorsConfig,
+} from './editor/behavior/behavior.markdown'
 export {
   defineBehavior,
   type Behavior,
@@ -17,6 +17,7 @@ export {
   type BehaviorContext,
   type BehaviorEvent,
   type BehaviorGuard,
+  type OmitFromUnion,
   type PickFromUnion,
 } from './editor/behavior/behavior.types'
 export type {SlateEditor} from './editor/create-slate-editor'
@@ -27,15 +28,22 @@ export {
 } from './editor/define-schema'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
+export {EditorEventListener} from './editor/editor-event-listener'
 export {
   editorMachine,
   type EditorActor,
+  type EditorEmittedEvent,
   type InternalEditorEmittedEvent,
   type InternalEditorEvent,
   type MutationEvent,
   type PatchEvent,
   type PatchesEvent,
 } from './editor/editor-machine'
+export {
+  EditorProvider,
+  useEditorContext,
+  type EditorProviderProps,
+} from './editor/editor-provider'
 export {usePortableTextEditor} from './editor/hooks/usePortableTextEditor'
 export {usePortableTextEditorSelection} from './editor/hooks/usePortableTextEditorSelection'
 export {defaultKeyGenerator as keyGenerator} from './editor/key-generator'

package/src/types/editor.ts

@@ -124,7 +124,6 @@ export type EditorSelection = {
 export interface PortableTextSlateEditor extends ReactEditor {
   _key: 'editor'
   _type: 'editor'
-  destroy: () => void
   createPlaceholderBlock: () => Descendant
   editable: EditableAPI
   history: History