@portabletext/toolbar 4.0.23 → 4.0.24

package/src/use-block-object-button.ts

@@ -1,189 +0,0 @@
-import {useEditor, type Editor} from '@portabletext/editor'
-import {
-  defineBehavior,
-  effect,
-  type InsertPlacement,
-} from '@portabletext/editor/behaviors'
-import {useActor} from '@xstate/react'
-import {fromCallback, setup, type AnyEventObject} from 'xstate'
-import {disableListener, type DisableListenerEvent} from './disable-listener'
-import type {ToolbarBlockObjectSchemaType} from './use-toolbar-schema'
-
-const keyboardShortcutListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaType: ToolbarBlockObjectSchemaType},
-  BlockObjectButtonEvent
->(({input, sendBack}) => {
-  const shortcut = input.schemaType.shortcut
-
-  if (!shortcut) {
-    return
-  }
-
-  return input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: 'keyboard.keydown',
-      guard: ({event}) => shortcut.guard(event.originEvent),
-      actions: [
-        () => [
-          effect(() => {
-            sendBack({type: 'open dialog'})
-          }),
-        ],
-      ],
-    }),
-  })
-})
-
-const blockObjectButtonMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaType: ToolbarBlockObjectSchemaType
-    },
-    input: {} as {
-      editor: Editor
-      schemaType: ToolbarBlockObjectSchemaType
-    },
-    events: {} as DisableListenerEvent | BlockObjectButtonEvent,
-  },
-  actions: {
-    insert: ({context, event}) => {
-      if (event.type !== 'insert') {
-        return
-      }
-
-      context.editor.send({
-        type: 'insert.block object',
-        blockObject: {
-          name: context.schemaType.name,
-          value: event.value,
-        },
-        placement: event.placement ?? 'auto',
-      })
-      context.editor.send({type: 'focus'})
-    },
-  },
-  actors: {
-    'disable listener': disableListener,
-    'keyboard shortcut listener': keyboardShortcutListener,
-  },
-}).createMachine({
-  id: 'block object button',
-  context: ({input}) => ({
-    editor: input.editor,
-    schemaType: input.schemaType,
-  }),
-  invoke: [
-    {
-      src: 'disable listener',
-      input: ({context}) => ({editor: context.editor}),
-    },
-  ],
-  initial: 'disabled',
-  states: {
-    disabled: {
-      on: {
-        enable: {
-          target: 'enabled',
-        },
-      },
-    },
-    enabled: {
-      on: {
-        disable: {
-          target: 'disabled',
-        },
-      },
-      initial: 'idle',
-      states: {
-        'idle': {
-          invoke: [
-            {
-              src: 'keyboard shortcut listener',
-              input: ({context}) => ({
-                editor: context.editor,
-                schemaType: context.schemaType,
-              }),
-            },
-          ],
-          on: {
-            'open dialog': {
-              target: 'showing dialog',
-            },
-          },
-        },
-        'showing dialog': {
-          on: {
-            'close dialog': {
-              target: 'idle',
-            },
-            'insert': {
-              actions: ['insert'],
-              target: 'idle',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-/**
- * @beta
- */
-export type BlockObjectButtonEvent =
-  | {
-      type: 'close dialog'
-    }
-  | {
-      type: 'open dialog'
-    }
-  | {
-      type: 'insert'
-      value: {[key: string]: unknown}
-      placement: InsertPlacement | undefined
-    }
-
-/**
- * @beta
- */
-export type BlockObjectButton = {
-  snapshot: {
-    matches: (
-      state:
-        | 'disabled'
-        | 'enabled'
-        | {enabled: 'idle'}
-        | {enabled: 'showing dialog'},
-    ) => boolean
-  }
-  send: (event: BlockObjectButtonEvent) => void
-}
-
-/**
- * @beta
- * Manages the state, keyboard shortcut and available events for a block
- * object button.
- *
- * Note: This hook assumes that the button triggers a dialog for inputting
- * the block object value.
- */
-export function useBlockObjectButton(props: {
-  schemaType: ToolbarBlockObjectSchemaType
-}): BlockObjectButton {
-  const editor = useEditor()
-  const [actorSnapshot, send] = useActor(blockObjectButtonMachine, {
-    input: {
-      editor,
-      schemaType: props.schemaType,
-    },
-  })
-
-  return {
-    snapshot: {
-      matches: (state) => actorSnapshot.matches(state),
-    },
-    send,
-  }
-}

package/src/use-block-object-popover.ts

@@ -1,285 +0,0 @@
-import {
-  useEditor,
-  type BlockPath,
-  type Editor,
-  type PortableTextObject,
-} from '@portabletext/editor'
-import * as selectors from '@portabletext/editor/selectors'
-import {useActor} from '@xstate/react'
-import * as React from 'react'
-import type {RefObject} from 'react'
-import {assign, fromCallback, setup, type AnyEventObject} from 'xstate'
-import {disableListener, type DisableListenerEvent} from './disable-listener'
-import type {ToolbarBlockObjectSchemaType} from './use-toolbar-schema'
-
-type ActiveContext = {
-  blockObjects: Array<{
-    value: PortableTextObject
-    schemaType: ToolbarBlockObjectSchemaType
-    at: BlockPath
-  }>
-  elementRef: RefObject<Element | null>
-}
-
-type ActiveListenerEvent =
-  | ({
-      type: 'set active'
-    } & ActiveContext)
-  | {
-      type: 'set inactive'
-    }
-
-const activeListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaTypes: ReadonlyArray<ToolbarBlockObjectSchemaType>},
-  ActiveListenerEvent
->(({input, sendBack}) => {
-  return input.editor.on('selection', () => {
-    const snapshot = input.editor.getSnapshot()
-
-    if (!selectors.isSelectionCollapsed(snapshot)) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const focusBlockObject = selectors.getFocusBlockObject(snapshot)
-
-    if (!focusBlockObject) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const schemaType = input.schemaTypes.find(
-      (schemaType) => schemaType.name === focusBlockObject.node._type,
-    )
-
-    if (!schemaType) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const selectedNodes = input.editor.dom.getBlockNodes(snapshot)
-    const firstSelectedNode = selectedNodes.at(0)
-
-    if (!firstSelectedNode || !(firstSelectedNode instanceof Element)) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const elementRef = React.createRef<Element>()
-    elementRef.current = firstSelectedNode
-
-    sendBack({
-      type: 'set active',
-      blockObjects: [
-        {
-          value: focusBlockObject.node,
-          schemaType,
-          at: focusBlockObject.path,
-        },
-      ],
-      elementRef,
-    })
-  }).unsubscribe
-})
-
-const blockObjectPopoverMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaTypes: ReadonlyArray<ToolbarBlockObjectSchemaType>
-    } & ActiveContext,
-    input: {} as {
-      editor: Editor
-      schemaTypes: ReadonlyArray<ToolbarBlockObjectSchemaType>
-    },
-    events: {} as
-      | DisableListenerEvent
-      | ActiveListenerEvent
-      | BlockObjectPopoverEvent,
-  },
-  actions: {
-    reset: assign({
-      blockObjects: [],
-      elementRef: React.createRef<Element>(),
-    }),
-  },
-  actors: {
-    'disable listener': disableListener,
-    'active listener': activeListener,
-  },
-}).createMachine({
-  id: 'block object popover',
-  context: ({input}) => ({
-    editor: input.editor,
-    schemaTypes: input.schemaTypes,
-    blockObjects: [],
-    elementRef: React.createRef<Element>(),
-  }),
-  invoke: [
-    {src: 'disable listener', input: ({context}) => ({editor: context.editor})},
-    {
-      src: 'active listener',
-      input: ({context}) => ({
-        editor: context.editor,
-        schemaTypes: context.schemaTypes,
-      }),
-    },
-  ],
-  initial: 'disabled',
-  states: {
-    disabled: {
-      initial: 'inactive',
-      states: {
-        inactive: {
-          entry: ['reset'],
-          on: {
-            'set active': {
-              actions: assign({
-                blockObjects: ({event}) => event.blockObjects,
-                elementRef: ({event}) => event.elementRef,
-              }),
-              target: 'active',
-            },
-            'enable': {
-              target: '#block object popover.enabled.inactive',
-            },
-          },
-        },
-        active: {
-          on: {
-            'set inactive': {
-              target: 'inactive',
-            },
-            'enable': {
-              target: '#block object popover.enabled.active',
-            },
-          },
-        },
-      },
-    },
-    enabled: {
-      initial: 'inactive',
-      states: {
-        inactive: {
-          entry: ['reset'],
-          on: {
-            'set active': {
-              target: 'active',
-              actions: assign({
-                blockObjects: ({event}) => event.blockObjects,
-                elementRef: ({event}) => event.elementRef,
-              }),
-            },
-            'disable': {
-              target: '#block object popover.disabled.inactive',
-            },
-          },
-        },
-        active: {
-          on: {
-            'set inactive': {
-              target: 'inactive',
-            },
-            'disable': {
-              target: '#block object popover.disabled.active',
-            },
-            'set active': {
-              actions: assign({
-                blockObjects: ({event}) => event.blockObjects,
-                elementRef: ({event}) => event.elementRef,
-              }),
-            },
-            'edit': {
-              actions: ({context, event}) => {
-                context.editor.send({
-                  type: 'block.set',
-                  at: event.at,
-                  props: event.props,
-                })
-                context.editor.send({type: 'focus'})
-              },
-            },
-            'remove': {
-              actions: ({context, event}) => {
-                context.editor.send({
-                  type: 'delete.block',
-                  at: event.at,
-                })
-                context.editor.send({type: 'focus'})
-              },
-            },
-            'close': {
-              actions: ({context}) => {
-                context.editor.send({type: 'focus'})
-              },
-              target: 'inactive',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-/**
- * @beta
- */
-export type BlockObjectPopoverEvent =
-  | {
-      type: 'remove'
-      at: BlockPath
-    }
-  | {
-      type: 'edit'
-      at: BlockPath
-      props: {[key: string]: unknown}
-    }
-  | {
-      type: 'close'
-    }
-
-/**
- * @beta
- */
-export type BlockObjectPopover = {
-  snapshot: {
-    context: ActiveContext
-    matches: (
-      state:
-        | 'disabled'
-        | 'enabled'
-        | {
-            enabled: 'inactive' | 'active'
-          },
-    ) => boolean
-  }
-  send: (event: BlockObjectPopoverEvent) => void
-}
-
-/**
- * @beta
- * Manages the state and available events for a block object popover.
- */
-export function useBlockObjectPopover(props: {
-  schemaTypes: ReadonlyArray<ToolbarBlockObjectSchemaType>
-}): BlockObjectPopover {
-  const editor = useEditor()
-  const [actorSnapshot, send] = useActor(blockObjectPopoverMachine, {
-    input: {
-      editor,
-      schemaTypes: props.schemaTypes,
-    },
-  })
-
-  return {
-    snapshot: {
-      context: {
-        blockObjects: actorSnapshot.context.blockObjects,
-        elementRef: actorSnapshot.context.elementRef,
-      },
-      matches: (state) => actorSnapshot.matches(state),
-    },
-    send,
-  }
-}

package/src/use-decorator-button.ts

@@ -1,196 +0,0 @@
-import {
-  useEditor,
-  type DecoratorSchemaType,
-  type Editor,
-} from '@portabletext/editor'
-import * as selectors from '@portabletext/editor/selectors'
-import {useActor} from '@xstate/react'
-import {fromCallback, setup, type AnyEventObject} from 'xstate'
-import {disableListener, type DisableListenerEvent} from './disable-listener'
-import {useDecoratorKeyboardShortcut} from './use-decorator-keyboard-shortcut'
-import {useMutuallyExclusiveDecorator} from './use-mutually-exclusive-decorator'
-import type {ToolbarDecoratorSchemaType} from './use-toolbar-schema'
-
-const activeListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaType: DecoratorSchemaType},
-  {type: 'set active'} | {type: 'set inactive'}
->(({input, sendBack}) => {
-  // Send back the initial state
-  if (
-    selectors.isActiveDecorator(input.schemaType.name)(
-      input.editor.getSnapshot(),
-    )
-  ) {
-    sendBack({type: 'set active'})
-  } else {
-    sendBack({type: 'set inactive'})
-  }
-
-  return input.editor.on('*', () => {
-    const snapshot = input.editor.getSnapshot()
-
-    if (selectors.isActiveDecorator(input.schemaType.name)(snapshot)) {
-      sendBack({type: 'set active'})
-    } else {
-      sendBack({type: 'set inactive'})
-    }
-  }).unsubscribe
-})
-
-const decoratorButtonMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaType: DecoratorSchemaType
-    },
-    input: {} as {
-      editor: Editor
-      schemaType: DecoratorSchemaType
-    },
-    events: {} as DisableListenerEvent | DecoratorButtonEvent,
-  },
-  actions: {
-    toggle: ({context, event}) => {
-      if (event.type !== 'toggle') {
-        return
-      }
-
-      context.editor.send({
-        type: 'decorator.toggle',
-        decorator: context.schemaType.name,
-      })
-      context.editor.send({type: 'focus'})
-    },
-  },
-  actors: {
-    'disable listener': disableListener,
-    'active listener': activeListener,
-  },
-}).createMachine({
-  id: 'decorator button',
-  context: ({input}) => ({
-    editor: input.editor,
-    schemaType: input.schemaType,
-  }),
-  invoke: [
-    {src: 'disable listener', input: ({context}) => ({editor: context.editor})},
-    {
-      src: 'active listener',
-      input: ({context}) => ({
-        editor: context.editor,
-        schemaType: context.schemaType,
-      }),
-    },
-  ],
-  initial: 'disabled',
-  states: {
-    disabled: {
-      initial: 'inactive',
-      states: {
-        inactive: {
-          on: {
-            'enable': {
-              target: '#decorator button.enabled.inactive',
-            },
-            'set active': {
-              target: 'active',
-            },
-          },
-        },
-        active: {
-          on: {
-            'enable': {
-              target: '#decorator button.enabled.active',
-            },
-            'set inactive': {
-              target: 'inactive',
-            },
-          },
-        },
-      },
-    },
-    enabled: {
-      on: {
-        toggle: {
-          actions: ['toggle'],
-        },
-      },
-      initial: 'inactive',
-      states: {
-        inactive: {
-          on: {
-            'disable': {
-              target: '#decorator button.disabled.inactive',
-            },
-            'set active': {
-              target: 'active',
-            },
-          },
-        },
-        active: {
-          on: {
-            'disable': {
-              target: '#decorator button.disabled.active',
-            },
-            'set inactive': {
-              target: 'inactive',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-/**
- * @beta
- */
-export type DecoratorButtonEvent = {
-  type: 'toggle'
-}
-
-/**
- * @beta
- */
-export type DecoratorButton = {
-  snapshot: {
-    matches: (
-      state:
-        | 'disabled'
-        | 'enabled'
-        | {disabled: 'inactive'}
-        | {disabled: 'active'}
-        | {enabled: 'inactive'}
-        | {enabled: 'active'},
-    ) => boolean
-  }
-  send: (event: DecoratorButtonEvent) => void
-}
-
-/**
- * @beta
- * Manages the state, keyboard shortcuts and available events for a decorator
- * button and sets up mutually exclusive decorator behaviors.
- */
-export function useDecoratorButton(props: {
-  schemaType: ToolbarDecoratorSchemaType
-}): DecoratorButton {
-  const editor = useEditor()
-  const [actorSnapshot, send] = useActor(decoratorButtonMachine, {
-    input: {
-      editor,
-      schemaType: props.schemaType,
-    },
-  })
-
-  useDecoratorKeyboardShortcut(props)
-  useMutuallyExclusiveDecorator(props)
-
-  return {
-    snapshot: {
-      matches: (state) => actorSnapshot.matches(state),
-    },
-    send,
-  }
-}