@portabletext/editor 3.3.2 → 3.3.4

package/src/editor/editor-provider.tsx

@@ -1,111 +0,0 @@
-import type React from 'react'
-import {useEffect, useState} from 'react'
-import {Slate} from 'slate-react'
-import type {EditorConfig} from '../editor'
-import {stopActor} from '../internal-utils/stop-actor'
-import {createInternalEditor} from './create-editor'
-import {EditorActorContext} from './editor-actor-context'
-import {EditorContext} from './editor-context'
-import {eventToChange} from './event-to-change'
-import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
-import {
-  PortableTextEditor,
-  type PortableTextEditorProps,
-} from './PortableTextEditor'
-import {RelayActorContext} from './relay-actor-context'
-
-/**
- * @public
- */
-export type EditorProviderProps = {
-  initialConfig: EditorConfig
-  children?: React.ReactNode
-}
-
-/**
- * @public
- * The EditorProvider component is used to set up the editor context and configure the Portable Text Editor.
- * @example
- * ```tsx
- * import {EditorProvider} from '@portabletext/editor'
- *
- * function App() {
- *  return (
- *    <EditorProvider initialConfig={{ ... }} >
- *      ...
- *    </EditorProvider>
- *  )
- * }
- *
- * ```
- * @group Components
- */
-export function EditorProvider(props: EditorProviderProps) {
-  const [{internalEditor, portableTextEditor}] = useState(() => {
-    const internalEditor = createInternalEditor(props.initialConfig)
-    const portableTextEditor = new PortableTextEditor({
-      editor: internalEditor.editor,
-    } as unknown as PortableTextEditorProps)
-
-    return {internalEditor, portableTextEditor}
-  })
-
-  useEffect(() => {
-    const unsubscribers: Array<() => void> = []
-
-    for (const subscription of internalEditor.subscriptions) {
-      unsubscribers.push(subscription())
-    }
-
-    const relayActorSubscription = internalEditor.actors.relayActor.on(
-      '*',
-      (event) => {
-        const change = eventToChange(event)
-
-        if (change) {
-          portableTextEditor.change$.next(change)
-        }
-      },
-    )
-    unsubscribers.push(relayActorSubscription.unsubscribe)
-
-    internalEditor.actors.editorActor.start()
-    internalEditor.actors.editorActor.send({
-      type: 'add slate editor',
-      editor: internalEditor.editor._internal.slateEditor.instance,
-    })
-    internalEditor.actors.mutationActor.start()
-    internalEditor.actors.relayActor.start()
-    internalEditor.actors.syncActor.start()
-
-    return () => {
-      for (const unsubscribe of unsubscribers) {
-        unsubscribe()
-      }
-
-      stopActor(internalEditor.actors.editorActor)
-      stopActor(internalEditor.actors.mutationActor)
-      stopActor(internalEditor.actors.relayActor)
-      stopActor(internalEditor.actors.syncActor)
-    }
-  }, [internalEditor, portableTextEditor])
-
-  return (
-    <EditorContext.Provider value={internalEditor.editor}>
-      <EditorActorContext.Provider value={internalEditor.actors.editorActor}>
-        <RelayActorContext.Provider value={internalEditor.actors.relayActor}>
-          <Slate
-            editor={internalEditor.editor._internal.slateEditor.instance}
-            initialValue={
-              internalEditor.editor._internal.slateEditor.initialValue
-            }
-          >
-            <PortableTextEditorContext.Provider value={portableTextEditor}>
-              {props.children}
-            </PortableTextEditorContext.Provider>
-          </Slate>
-        </RelayActorContext.Provider>
-      </EditorActorContext.Provider>
-    </EditorContext.Provider>
-  )
-}

package/src/editor/editor-schema.ts

@@ -1,6 +0,0 @@
-import type {Schema} from '@portabletext/schema'
-
-/**
- * @public
- */
-export type EditorSchema = Schema

package/src/editor/editor-selector.ts

@@ -1,89 +0,0 @@
-import {useSelector} from '@xstate/react'
-import type {Editor} from '../editor'
-import {slateRangeToSelection} from '../internal-utils/slate-utils'
-import type {PortableTextSlateEditor} from '../types/slate-editor'
-import type {InternalEditor} from './create-editor'
-import type {EditorActor} from './editor-machine'
-import type {EditorSnapshot} from './editor-snapshot'
-
-function defaultCompare<T>(a: T, b: T) {
-  return a === b
-}
-
-/**
- * @public
- */
-export type EditorSelector<TSelected> = (snapshot: EditorSnapshot) => TSelected
-
-/**
- * @public
- * Hook to select a value from the editor state.
- * @example
- * Pass a selector as the second argument
- * ```tsx
- * import { useEditorSelector } from '@portabletext/editor'
- *
- * function MyComponent(editor) {
- *  const value = useEditorSelector(editor, selector)
- * }
- * ```
- * @example
- * Pass an inline selector as the second argument.
- * In this case, use the editor context to obtain the schema.
- * ```tsx
- * import { useEditorSelector } from '@portabletext/editor'
- *
- * function MyComponent(editor) {
- *  const schema = useEditorSelector(editor, (snapshot) => snapshot.context.schema)
- * }
- * ```
- * @group Hooks
- */
-export function useEditorSelector<TSelected>(
-  editor: Editor,
-  selector: EditorSelector<TSelected>,
-  compare: (a: TSelected, b: TSelected) => boolean = defaultCompare,
-) {
-  return useSelector(
-    (editor as InternalEditor)._internal.editorActor,
-    (editorActorSnapshot) => {
-      const snapshot = getEditorSnapshot({
-        editorActorSnapshot,
-        slateEditorInstance: (editor as InternalEditor)._internal.slateEditor
-          .instance,
-      })
-
-      return selector(snapshot)
-    },
-    compare,
-  )
-}
-
-export function getEditorSnapshot({
-  editorActorSnapshot,
-  slateEditorInstance,
-}: {
-  editorActorSnapshot: ReturnType<EditorActor['getSnapshot']>
-  slateEditorInstance: PortableTextSlateEditor
-}): EditorSnapshot {
-  const selection = slateEditorInstance.selection
-    ? slateRangeToSelection({
-        schema: editorActorSnapshot.context.schema,
-        editor: slateEditorInstance,
-        range: slateEditorInstance.selection,
-      })
-    : null
-
-  return {
-    blockIndexMap: slateEditorInstance.blockIndexMap,
-    context: {
-      converters: [...editorActorSnapshot.context.converters],
-      keyGenerator: editorActorSnapshot.context.keyGenerator,
-      readOnly: editorActorSnapshot.matches({'edit mode': 'read only'}),
-      schema: editorActorSnapshot.context.schema,
-      selection,
-      value: slateEditorInstance.value,
-    },
-    decoratorState: slateEditorInstance.decoratorState,
-  }
-}

package/src/editor/editor-snapshot.ts

@@ -1,68 +0,0 @@
-import type {PortableTextBlock} from '@sanity/types'
-import type {Converter} from '../converters/converter.types'
-import {slateRangeToSelection} from '../internal-utils/slate-utils'
-import type {EditorSelection} from '../types/editor'
-import type {PortableTextSlateEditor} from '../types/slate-editor'
-import type {EditorSchema} from './editor-schema'
-
-/**
- * @public
- */
-export type EditorContext = {
-  converters: Array<Converter>
-  keyGenerator: () => string
-  readOnly: boolean
-  schema: EditorSchema
-  selection: EditorSelection
-  value: Array<PortableTextBlock>
-}
-
-/**
- * @public
- */
-export type EditorSnapshot = {
-  context: EditorContext
-  blockIndexMap: Map<string, number>
-  /**
-   * @beta
-   * Subject to change
-   */
-  decoratorState: Record<string, boolean | undefined>
-}
-
-export function createEditorSnapshot({
-  converters,
-  editor,
-  keyGenerator,
-  readOnly,
-  schema,
-}: {
-  converters: Array<Converter>
-  editor: PortableTextSlateEditor
-  keyGenerator: () => string
-  readOnly: boolean
-  schema: EditorSchema
-}) {
-  const selection = editor.selection
-    ? slateRangeToSelection({
-        schema,
-        editor,
-        range: editor.selection,
-      })
-    : null
-
-  const context = {
-    converters,
-    keyGenerator,
-    readOnly,
-    schema,
-    selection,
-    value: editor.value,
-  } satisfies EditorContext
-
-  return {
-    blockIndexMap: editor.blockIndexMap,
-    context,
-    decoratorState: editor.decoratorState,
-  } satisfies EditorSnapshot
-}

package/src/editor/event-to-change.tsx

@@ -1,49 +0,0 @@
-import type {EditorChange} from '../types/editor'
-import type {InternalEditorEmittedEvent} from './relay-machine'
-
-export function eventToChange(
-  event: InternalEditorEmittedEvent,
-): EditorChange | undefined {
-  switch (event.type) {
-    case 'blurred': {
-      return {type: 'blur', event: event.event}
-    }
-    case 'patch':
-      return event
-    case 'loading': {
-      return {type: 'loading', isLoading: true}
-    }
-    case 'done loading': {
-      return {type: 'loading', isLoading: false}
-    }
-    case 'focused': {
-      return {type: 'focus', event: event.event}
-    }
-    case 'value changed': {
-      return {type: 'value', value: event.value}
-    }
-    case 'invalid value': {
-      return {
-        type: 'invalidValue',
-        resolution: event.resolution,
-        value: event.value,
-      }
-    }
-    case 'mutation': {
-      return {
-        type: 'mutation',
-        patches: event.patches,
-        snapshot: event.value,
-      }
-    }
-    case 'ready': {
-      return event
-    }
-    case 'selection': {
-      return event
-    }
-    case 'unset': {
-      return event
-    }
-  }
-}

package/src/editor/hooks/usePortableTextEditor.ts

@@ -1,25 +0,0 @@
-import {createContext, useContext} from 'react'
-import type {PortableTextEditor} from '../PortableTextEditor'
-
-/**
- * A React context for sharing the editor object.
- */
-export const PortableTextEditorContext =
-  createContext<PortableTextEditor | null>(null)
-
-/**
- * @deprecated Use `useEditor` to get the current editor instance.
- * @public
- * Get the current editor object from the React context.
- */
-export const usePortableTextEditor = (): PortableTextEditor => {
-  const editor = useContext(PortableTextEditorContext)
-
-  if (!editor) {
-    throw new Error(
-      `The \`usePortableTextEditor\` hook must be used inside the <PortableTextEditor> component's context.`,
-    )
-  }
-
-  return editor
-}

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -1,28 +0,0 @@
-import {startTransition, useContext, useEffect, useState} from 'react'
-import type {EditorSelection} from '../../types/editor'
-import {EditorActorContext} from '../editor-actor-context'
-
-/**
- * @deprecated Use `useEditorSelector` to get the current editor selection.
- * @public
- * Get the current editor selection from the React context.
- */
-export const usePortableTextEditorSelection = (): EditorSelection => {
-  const editorActor = useContext(EditorActorContext)
-  const [selection, setSelection] = useState<EditorSelection>(null)
-
-  useEffect(() => {
-    const subscription = editorActor.on('selection', (event) => {
-      // Set the selection state in a transition, we don't need the state immediately.
-      startTransition(() => {
-        setSelection(event.selection)
-      })
-    })
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [editorActor])
-
-  return selection
-}

package/src/editor/mutation-machine.ts

@@ -1,322 +0,0 @@
-import type {Patch} from '@portabletext/patches'
-import type {PortableTextBlock} from '@sanity/types'
-import {Editor} from 'slate'
-import type {ActorRefFrom} from 'xstate'
-import {
-  and,
-  assertEvent,
-  assign,
-  emit,
-  enqueueActions,
-  fromCallback,
-  not,
-  raise,
-  setup,
-  type AnyEventObject,
-} from 'xstate'
-import {debugWithName} from '../internal-utils/debug'
-import type {PortableTextSlateEditor} from '../types/slate-editor'
-import type {EditorSchema} from './editor-schema'
-import type {PatchEvent} from './relay-machine'
-
-const debug = debugWithName('mutation-machine')
-
-export type MutationActor = ActorRefFrom<typeof mutationMachine>
-
-/**
- * Makes sure editor mutation events are debounced
- */
-export const mutationMachine = setup({
-  types: {
-    context: {} as {
-      pendingMutations: Array<{
-        operationId?: string
-        value: Array<PortableTextBlock> | undefined
-        patches: Array<Patch>
-      }>
-      pendingPatchEvents: Array<PatchEvent>
-      readOnly: boolean
-      schema: EditorSchema
-      slateEditor: PortableTextSlateEditor
-    },
-    events: {} as
-      | {
-          type: 'emit changes'
-        }
-      | {
-          type: 'patch'
-          patch: Patch
-          operationId?: string
-          value: Array<PortableTextBlock>
-        }
-      | {
-          type: 'typing'
-        }
-      | {
-          type: 'not typing'
-        }
-      | {
-          type: 'update readOnly'
-          readOnly: boolean
-        },
-    input: {} as {
-      readOnly: boolean
-      schema: EditorSchema
-      slateEditor: PortableTextSlateEditor
-    },
-    emitted: {} as
-      | {
-          type: 'has pending mutations'
-        }
-      | {
-          type: 'mutation'
-          patches: Array<Patch>
-          snapshot: Array<PortableTextBlock> | undefined
-        }
-      | PatchEvent,
-  },
-  actions: {
-    'assign readOnly': assign({
-      readOnly: ({context, event}) =>
-        event.type === 'update readOnly' ? event.readOnly : context.readOnly,
-    }),
-    'emit patch': emit(({event}) => {
-      assertEvent(event, 'patch')
-      return {type: 'patch' as const, patch: event.patch}
-    }),
-    'emit has pending mutations': emit({type: 'has pending mutations'}),
-    'emit mutations': enqueueActions(({context, enqueue}) => {
-      for (const bulk of context.pendingMutations) {
-        enqueue.emit({
-          type: 'mutation',
-          patches: bulk.patches,
-          snapshot: bulk.value,
-        })
-      }
-    }),
-    'clear pending mutations': assign({
-      pendingMutations: [],
-    }),
-    'defer mutation': assign({
-      pendingMutations: ({context, event}) => {
-        assertEvent(event, 'patch')
-
-        if (context.pendingMutations.length === 0) {
-          return [
-            {
-              operationId: event.operationId,
-              value: event.value,
-              patches: [event.patch],
-            },
-          ]
-        }
-
-        const lastBulk = context.pendingMutations.at(-1)
-
-        if (lastBulk && lastBulk.operationId === event.operationId) {
-          return context.pendingMutations.slice(0, -1).concat({
-            value: event.value,
-            operationId: lastBulk.operationId,
-            patches: [...lastBulk.patches, event.patch],
-          })
-        }
-
-        return context.pendingMutations.concat({
-          value: event.value,
-          operationId: event.operationId,
-          patches: [event.patch],
-        })
-      },
-    }),
-    'clear pending patch events': assign({
-      pendingPatchEvents: [],
-    }),
-    'defer patch': assign({
-      pendingPatchEvents: ({context, event}) =>
-        event.type === 'patch'
-          ? [...context.pendingPatchEvents, event]
-          : context.pendingPatchEvents,
-    }),
-    'emit pending patch events': enqueueActions(({context, enqueue}) => {
-      for (const event of context.pendingPatchEvents) {
-        enqueue.emit(event)
-      }
-    }),
-  },
-  actors: {
-    'type listener': fromCallback<
-      AnyEventObject,
-      {slateEditor: PortableTextSlateEditor},
-      {type: 'typing'} | {type: 'not typing'}
-    >(({input, sendBack}) => {
-      const originalApply = input.slateEditor.apply
-
-      input.slateEditor.apply = (op) => {
-        if (op.type === 'insert_text' || op.type === 'remove_text') {
-          sendBack({type: 'typing'})
-        } else {
-          sendBack({type: 'not typing'})
-        }
-        originalApply(op)
-      }
-
-      return () => {
-        input.slateEditor.apply = originalApply
-      }
-    }),
-    'mutation interval': fromCallback(({sendBack}) => {
-      const interval = setInterval(
-        () => {
-          sendBack({type: 'emit changes'})
-        },
-        process.env.NODE_ENV === 'test' ? 250 : 1000,
-      )
-
-      return () => {
-        clearInterval(interval)
-      }
-    }),
-  },
-  guards: {
-    'is read-only': ({context}) => context.readOnly,
-    'slate is normalizing': ({context}) =>
-      Editor.isNormalizing(context.slateEditor),
-  },
-  delays: {
-    'type debounce': 250,
-  },
-}).createMachine({
-  id: 'mutation',
-  context: ({input}) => ({
-    pendingMutations: [],
-    pendingPatchEvents: [],
-    readOnly: input.readOnly,
-    schema: input.schema,
-    slateEditor: input.slateEditor,
-  }),
-  on: {
-    'update readOnly': {
-      actions: ['assign readOnly'],
-    },
-  },
-  type: 'parallel',
-  states: {
-    typing: {
-      initial: 'idle',
-      invoke: {
-        src: 'type listener',
-        input: ({context}) => ({slateEditor: context.slateEditor}),
-      },
-      states: {
-        idle: {
-          entry: [
-            () => {
-              debug('entry: typing->idle')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: typing->idle')
-              debug('entry: typing->typing')
-            },
-          ],
-          on: {
-            typing: {
-              target: 'typing',
-            },
-          },
-        },
-        typing: {
-          after: {
-            'type debounce': {
-              target: 'idle',
-              actions: [
-                raise({type: 'emit changes'}),
-                () => {
-                  debug('exit: typing->typing')
-                },
-              ],
-            },
-          },
-          on: {
-            'not typing': {
-              target: 'idle',
-              actions: [raise({type: 'emit changes'})],
-            },
-            'typing': {
-              target: 'typing',
-              reenter: true,
-            },
-          },
-        },
-      },
-    },
-    mutations: {
-      initial: 'idle',
-      states: {
-        'idle': {
-          entry: [
-            () => {
-              debug('entry: mutations->idle')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: mutations->idle')
-            },
-          ],
-          on: {
-            patch: [
-              {
-                guard: 'is read-only',
-                actions: ['defer patch', 'defer mutation'],
-                target: 'has pending mutations',
-              },
-              {
-                actions: ['emit patch', 'defer mutation'],
-                target: 'has pending mutations',
-              },
-            ],
-          },
-        },
-        'has pending mutations': {
-          entry: [
-            () => {
-              debug('entry: mutations->has pending mutations')
-            },
-            'emit has pending mutations',
-          ],
-          exit: [
-            () => {
-              debug('exit: mutations->has pending mutations')
-            },
-          ],
-          invoke: {
-            src: 'mutation interval',
-          },
-          on: {
-            'emit changes': {
-              guard: and([not('is read-only'), 'slate is normalizing']),
-              target: 'idle',
-              actions: [
-                'emit pending patch events',
-                'clear pending patch events',
-                'emit mutations',
-                'clear pending mutations',
-              ],
-            },
-            'patch': [
-              {
-                guard: 'is read-only',
-                actions: ['defer patch', 'defer mutation'],
-              },
-              {
-                actions: ['emit patch', 'defer mutation'],
-              },
-            ],
-          },
-        },
-      },
-    },
-  },
-})