@portabletext/editor 3.3.2 → 3.3.4

package/src/editor/create-editor.ts

@@ -1,323 +0,0 @@
-import {
-  compileSchemaDefinitionToPortableTextMemberSchemaTypes,
-  createPortableTextMemberSchemaTypes,
-  portableTextMemberSchemaTypesToSchema,
-} from '@portabletext/sanity-bridge'
-import {compileSchema} from '@portabletext/schema'
-import {createActor} from 'xstate'
-import {createCoreConverters} from '../converters/converters.core'
-import type {Editor, EditorConfig} from '../editor'
-import {debugWithName} from '../internal-utils/debug'
-import {compileType} from '../internal-utils/schema'
-import {corePriority} from '../priority/priority.core'
-import {createEditorPriority} from '../priority/priority.types'
-import type {EditableAPI} from '../types/editor'
-import type {PortableTextSlateEditor} from '../types/slate-editor'
-import {defaultKeyGenerator} from '../utils/key-generator'
-import {createSlateEditor, type SlateEditor} from './create-slate-editor'
-import {createEditorDom} from './editor-dom'
-import type {EditorActor} from './editor-machine'
-import {editorMachine, rerouteExternalBehaviorEvent} from './editor-machine'
-import {getEditorSnapshot} from './editor-selector'
-import {mutationMachine, type MutationActor} from './mutation-machine'
-import {createEditableAPI} from './plugins/createWithEditableAPI'
-import {relayMachine, type RelayActor} from './relay-machine'
-import {syncMachine, type SyncActor} from './sync-machine'
-
-const debug = debugWithName('setup')
-
-export type InternalEditor = Editor & {
-  _internal: {
-    editable: EditableAPI
-    editorActor: EditorActor
-    slateEditor: SlateEditor
-  }
-}
-
-export function createInternalEditor(config: EditorConfig): {
-  actors: {
-    editorActor: EditorActor
-    mutationActor: MutationActor
-    relayActor: RelayActor
-    syncActor: SyncActor
-  }
-  editor: InternalEditor
-  subscriptions: Array<() => () => void>
-} {
-  debug('Creating new Editor instance')
-
-  const subscriptions: Array<() => () => void> = []
-  const editorActor = createActor(editorMachine, {
-    input: editorConfigToMachineInput(config),
-  })
-  const relayActor = createActor(relayMachine)
-  const slateEditor = createSlateEditor({
-    editorActor,
-    relayActor,
-    subscriptions,
-  })
-  const editable = createEditableAPI(slateEditor.instance, editorActor)
-  const {mutationActor, syncActor} = createActors({
-    editorActor,
-    relayActor,
-    slateEditor: slateEditor.instance,
-    subscriptions,
-  })
-
-  const editor = {
-    dom: createEditorDom(
-      (event) => editorActor.send(event),
-      slateEditor.instance,
-    ),
-    getSnapshot: () =>
-      getEditorSnapshot({
-        editorActorSnapshot: editorActor.getSnapshot(),
-        slateEditorInstance: slateEditor.instance,
-      }),
-    registerBehavior: (behaviorConfig) => {
-      const priority = createEditorPriority({
-        name: 'custom',
-        reference: {
-          priority: corePriority,
-          importance: 'higher',
-        },
-      })
-      const behaviorConfigWithPriority = {
-        ...behaviorConfig,
-        priority,
-      }
-
-      editorActor.send({
-        type: 'add behavior',
-        behaviorConfig: behaviorConfigWithPriority,
-      })
-
-      return () => {
-        editorActor.send({
-          type: 'remove behavior',
-          behaviorConfig: behaviorConfigWithPriority,
-        })
-      }
-    },
-    send: (event) => {
-      switch (event.type) {
-        case 'update value':
-          syncActor.send(event)
-          break
-
-        case 'update readOnly':
-        case 'patches':
-          editorActor.send(event)
-          break
-
-        default:
-          editorActor.send(
-            rerouteExternalBehaviorEvent({
-              event,
-              slateEditor: slateEditor.instance,
-            }),
-          )
-      }
-    },
-    on: (event, listener) => {
-      const subscription = relayActor.on(event, (event) => {
-        switch (event.type) {
-          case 'blurred':
-          case 'done loading':
-          case 'editable':
-          case 'focused':
-          case 'invalid value':
-          case 'loading':
-          case 'mutation':
-          case 'patch':
-          case 'read only':
-          case 'ready':
-          case 'selection':
-          case 'value changed':
-            listener(event)
-            break
-        }
-      })
-
-      return subscription
-    },
-    _internal: {
-      editable,
-      editorActor,
-      slateEditor,
-    },
-  } satisfies InternalEditor
-
-  return {
-    actors: {
-      editorActor,
-      mutationActor,
-      relayActor,
-      syncActor,
-    },
-    editor,
-    subscriptions,
-  }
-}
-
-function editorConfigToMachineInput(config: EditorConfig) {
-  const {legacySchema, schema} = compileSchemasFromEditorConfig(config)
-
-  return {
-    converters: createCoreConverters(legacySchema),
-    getLegacySchema: () => legacySchema,
-    keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
-    readOnly: config.readOnly,
-    schema,
-    initialValue: config.initialValue,
-  } as const
-}
-
-function compileSchemasFromEditorConfig(config: EditorConfig) {
-  const legacySchema = config.schemaDefinition
-    ? compileSchemaDefinitionToPortableTextMemberSchemaTypes(
-        config.schemaDefinition,
-      )
-    : createPortableTextMemberSchemaTypes(
-        config.schema.hasOwnProperty('jsonType')
-          ? config.schema
-          : compileType(config.schema),
-      )
-  const schema = config.schemaDefinition
-    ? compileSchema(config.schemaDefinition)
-    : portableTextMemberSchemaTypesToSchema(legacySchema)
-
-  return {
-    legacySchema,
-    schema,
-  }
-}
-
-function createActors(config: {
-  editorActor: EditorActor
-  relayActor: RelayActor
-  slateEditor: PortableTextSlateEditor
-  subscriptions: Array<() => () => void>
-}): {
-  mutationActor: MutationActor
-  syncActor: SyncActor
-} {
-  debug('Creating new Actors')
-
-  const mutationActor = createActor(mutationMachine, {
-    input: {
-      readOnly: config.editorActor
-        .getSnapshot()
-        .matches({'edit mode': 'read only'}),
-      schema: config.editorActor.getSnapshot().context.schema,
-      slateEditor: config.slateEditor,
-    },
-  })
-
-  const syncActor = createActor(syncMachine, {
-    input: {
-      initialValue: config.editorActor.getSnapshot().context.initialValue,
-      keyGenerator: config.editorActor.getSnapshot().context.keyGenerator,
-      readOnly: config.editorActor
-        .getSnapshot()
-        .matches({'edit mode': 'read only'}),
-      schema: config.editorActor.getSnapshot().context.schema,
-      slateEditor: config.slateEditor,
-    },
-  })
-
-  config.subscriptions.push(() => {
-    const subscription = mutationActor.on('*', (event) => {
-      if (event.type === 'has pending mutations') {
-        syncActor.send({type: 'has pending mutations'})
-      }
-      if (event.type === 'mutation') {
-        syncActor.send({type: 'mutation'})
-        config.editorActor.send({
-          type: 'mutation',
-          patches: event.patches,
-          value: event.snapshot,
-        })
-      }
-      if (event.type === 'patch') {
-        config.relayActor.send(event)
-      }
-    })
-
-    return () => {
-      // Flushing pending patches and mutations before unmounting
-      mutationActor.send({type: 'emit changes'})
-
-      subscription.unsubscribe()
-    }
-  })
-
-  config.subscriptions.push(() => {
-    const subscription = syncActor.on('*', (event) => {
-      switch (event.type) {
-        case 'invalid value':
-          config.relayActor.send(event)
-          break
-        case 'value changed':
-          config.relayActor.send(event)
-          break
-        case 'patch':
-          config.editorActor.send({
-            ...event,
-            type: 'internal.patch',
-            value: config.slateEditor.value,
-          })
-          break
-
-        default:
-          config.editorActor.send(event)
-      }
-    })
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  })
-
-  config.subscriptions.push(() => {
-    const subscription = config.editorActor.subscribe((snapshot) => {
-      if (snapshot.matches({'edit mode': 'read only'})) {
-        mutationActor.send({type: 'update readOnly', readOnly: true})
-        syncActor.send({type: 'update readOnly', readOnly: true})
-      } else {
-        mutationActor.send({type: 'update readOnly', readOnly: false})
-        syncActor.send({type: 'update readOnly', readOnly: false})
-      }
-    })
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  })
-
-  config.subscriptions.push(() => {
-    const subscription = config.editorActor.on('*', (event) => {
-      switch (event.type) {
-        case 'editable':
-        case 'mutation':
-        case 'ready':
-        case 'read only':
-        case 'selection':
-          config.relayActor.send(event)
-          break
-        case 'internal.patch':
-          mutationActor.send({...event, type: 'patch'})
-          break
-      }
-    })
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  })
-
-  return {
-    mutationActor,
-    syncActor,
-  }
-}

package/src/editor/create-slate-editor.tsx

@@ -1,64 +0,0 @@
-import {createEditor, type Descendant} from 'slate'
-import {withReact} from 'slate-react'
-import {buildIndexMaps} from '../internal-utils/build-index-maps'
-import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
-import {debugWithName} from '../internal-utils/debug'
-import type {PortableTextSlateEditor} from '../types/slate-editor'
-import type {EditorActor} from './editor-machine'
-import {withPlugins} from './plugins/with-plugins'
-import type {RelayActor} from './relay-machine'
-import {KEY_TO_SLATE_ELEMENT} from './weakMaps'
-
-const debug = debugWithName('setup')
-
-type SlateEditorConfig = {
-  editorActor: EditorActor
-  relayActor: RelayActor
-  subscriptions: Array<() => () => void>
-}
-
-export type SlateEditor = {
-  instance: PortableTextSlateEditor
-  initialValue: Array<Descendant>
-}
-
-export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
-  debug('Creating new Slate editor instance')
-
-  const placeholderBlock = createPlaceholderBlock(
-    config.editorActor.getSnapshot().context,
-  )
-
-  const editor = createEditor()
-  editor.decoratedRanges = []
-  editor.decoratorState = {}
-  editor.value = [placeholderBlock]
-  editor.blockIndexMap = new Map<string, number>()
-  editor.listIndexMap = new Map<string, number>()
-
-  const instance = withPlugins(withReact(editor), {
-    editorActor: config.editorActor,
-    relayActor: config.relayActor,
-    subscriptions: config.subscriptions,
-  })
-
-  KEY_TO_SLATE_ELEMENT.set(instance, {})
-
-  buildIndexMaps(
-    {
-      schema: config.editorActor.getSnapshot().context.schema,
-      value: instance.value,
-    },
-    {
-      blockIndexMap: instance.blockIndexMap,
-      listIndexMap: instance.listIndexMap,
-    },
-  )
-
-  const slateEditor: SlateEditor = {
-    instance,
-    initialValue: [placeholderBlock],
-  }
-
-  return slateEditor
-}

package/src/editor/editor-actor-context.ts

@@ -1,4 +0,0 @@
-import {createContext} from 'react'
-import type {EditorActor} from './editor-machine'
-
-export const EditorActorContext = createContext<EditorActor>({} as EditorActor)

package/src/editor/editor-context.tsx

@@ -1,7 +0,0 @@
-import type {Editor} from '../editor'
-import {createGloballyScopedContext} from '../internal-utils/globally-scoped-context'
-
-export const EditorContext = createGloballyScopedContext<Editor | null>(
-  '@portabletext/editor/context/editor',
-  null,
-)

package/src/editor/editor-dom.ts

@@ -1,220 +0,0 @@
-import {Editor} from 'slate'
-import {DOMEditor} from 'slate-dom'
-import type {BehaviorEvent} from '../behaviors/behavior.types.event'
-import {toSlateRange} from '../internal-utils/to-slate-range'
-import {getSelectionEndBlock, getSelectionStartBlock} from '../selectors'
-import type {PickFromUnion} from '../type-utils'
-import type {PortableTextSlateEditor} from '../types/slate-editor'
-import type {EditorSnapshot} from './editor-snapshot'
-
-export type EditorDom = {
-  getBlockNodes: (snapshot: EditorSnapshot) => Array<Node>
-  getChildNodes: (snapshot: EditorSnapshot) => Array<Node>
-  getEditorElement: () => Element | undefined
-  getSelectionRect: (snapshot: EditorSnapshot) => DOMRect | null
-  getStartBlockElement: (snapshot: EditorSnapshot) => Element | null
-  getEndBlockElement: (snapshot: EditorSnapshot) => Element | null
-  /**
-   * Let the Editor set the drag ghost. This is to be sure that it will get
-   * properly removed again when the drag ends.
-   */
-  setDragGhost: ({
-    event,
-    ghost,
-  }: {
-    event: PickFromUnion<BehaviorEvent, 'type', 'drag.dragstart'>
-    ghost: {
-      element: HTMLElement
-      x: number
-      y: number
-    }
-  }) => void
-}
-
-export function createEditorDom(
-  sendBack: (event: {type: 'set drag ghost'; ghost: HTMLElement}) => void,
-  slateEditor: PortableTextSlateEditor,
-): EditorDom {
-  return {
-    getBlockNodes: (snapshot) => getBlockNodes(slateEditor, snapshot),
-    getChildNodes: (snapshot) => getChildNodes(slateEditor, snapshot),
-    getEditorElement: () => getEditorElement(slateEditor),
-    getSelectionRect: (snapshot) => getSelectionRect(snapshot),
-    getStartBlockElement: (snapshot) =>
-      getStartBlockElement(slateEditor, snapshot),
-    getEndBlockElement: (snapshot) => getEndBlockElement(slateEditor, snapshot),
-    setDragGhost: ({event, ghost}) => setDragGhost({sendBack, event, ghost}),
-  }
-}
-
-function getBlockNodes(
-  slateEditor: PortableTextSlateEditor,
-  snapshot: EditorSnapshot,
-) {
-  if (!snapshot.context.selection) {
-    return []
-  }
-
-  const range = toSlateRange(snapshot)
-
-  if (!range) {
-    return []
-  }
-
-  try {
-    const blockEntries = Array.from(
-      Editor.nodes(slateEditor, {
-        at: range,
-        mode: 'highest',
-        match: (n) => !Editor.isEditor(n),
-      }),
-    )
-
-    return blockEntries.map(([blockNode]) =>
-      DOMEditor.toDOMNode(slateEditor, blockNode),
-    )
-  } catch {
-    return []
-  }
-}
-
-function getChildNodes(
-  slateEditor: PortableTextSlateEditor,
-  snapshot: EditorSnapshot,
-) {
-  if (!snapshot.context.selection) {
-    return []
-  }
-
-  const range = toSlateRange(snapshot)
-
-  if (!range) {
-    return []
-  }
-
-  try {
-    const childEntries = Array.from(
-      Editor.nodes(slateEditor, {
-        at: range,
-        mode: 'lowest',
-        match: (n) => !Editor.isEditor(n),
-      }),
-    )
-
-    return childEntries.map(([childNode]) =>
-      DOMEditor.toDOMNode(slateEditor, childNode),
-    )
-  } catch {
-    return []
-  }
-}
-
-function getEditorElement(slateEditor: PortableTextSlateEditor) {
-  try {
-    return DOMEditor.toDOMNode(slateEditor, slateEditor)
-  } catch {
-    return undefined
-  }
-}
-
-function getSelectionRect(snapshot: EditorSnapshot) {
-  if (!snapshot.context.selection) {
-    return null
-  }
-
-  try {
-    const selection = window.getSelection()
-
-    if (!selection) {
-      return null
-    }
-
-    const range = selection.getRangeAt(0)
-    return range.getBoundingClientRect()
-  } catch {
-    return null
-  }
-}
-
-function getStartBlockElement(
-  slateEditor: PortableTextSlateEditor,
-  snapshot: EditorSnapshot,
-) {
-  const startBlock = getSelectionStartBlock(snapshot)
-
-  if (!startBlock) {
-    return null
-  }
-
-  const startBlockNode = getBlockNodes(slateEditor, {
-    ...snapshot,
-    context: {
-      ...snapshot.context,
-      selection: {
-        anchor: {
-          path: startBlock.path,
-          offset: 0,
-        },
-        focus: {
-          path: startBlock.path,
-          offset: 0,
-        },
-      },
-    },
-  })?.at(0)
-
-  return startBlockNode && startBlockNode instanceof Element
-    ? startBlockNode
-    : null
-}
-
-function getEndBlockElement(
-  slateEditor: PortableTextSlateEditor,
-  snapshot: EditorSnapshot,
-) {
-  const endBlock = getSelectionEndBlock(snapshot)
-
-  if (!endBlock) {
-    return null
-  }
-
-  const endBlockNode = getBlockNodes(slateEditor, {
-    ...snapshot,
-    context: {
-      ...snapshot.context,
-      selection: {
-        anchor: {
-          path: endBlock.path,
-          offset: 0,
-        },
-        focus: {
-          path: endBlock.path,
-          offset: 0,
-        },
-      },
-    },
-  })?.at(0)
-
-  return endBlockNode && endBlockNode instanceof Element ? endBlockNode : null
-}
-
-function setDragGhost({
-  sendBack,
-  event,
-  ghost,
-}: {
-  sendBack: (event: {type: 'set drag ghost'; ghost: HTMLElement}) => void
-  event: PickFromUnion<BehaviorEvent, 'type', 'drag.dragstart'>
-  ghost: {
-    element: HTMLElement
-    x: number
-    y: number
-  }
-}) {
-  event.originEvent.dataTransfer.setDragImage(ghost.element, ghost.x, ghost.y)
-
-  sendBack({
-    type: 'set drag ghost',
-    ghost: ghost.element,
-  })
-}