@portabletext/toolbar 4.0.23 → 4.0.24

package/src/use-decorator-keyboard-shortcut.ts

@@ -1,96 +0,0 @@
-import {useEditor, type Editor} from '@portabletext/editor'
-import {defineBehavior, raise} from '@portabletext/editor/behaviors'
-import {useActorRef} from '@xstate/react'
-import {fromCallback, setup, type AnyEventObject} from 'xstate'
-import {disableListener, type DisableListenerEvent} from './disable-listener'
-import type {ToolbarDecoratorSchemaType} from './use-toolbar-schema'
-
-const keyboardShortcutListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaType: ToolbarDecoratorSchemaType}
->(({input}) => {
-  const shortcut = input.schemaType.shortcut
-
-  if (!shortcut) {
-    return
-  }
-
-  return input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: 'keyboard.keydown',
-      guard: ({event}) => shortcut.guard(event.originEvent),
-      actions: [
-        () => [
-          raise({
-            type: 'decorator.toggle',
-            decorator: input.schemaType.name,
-          }),
-        ],
-      ],
-    }),
-  })
-})
-
-const decoratorKeyboardShortcutMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaType: ToolbarDecoratorSchemaType
-    },
-    input: {} as {
-      editor: Editor
-      schemaType: ToolbarDecoratorSchemaType
-    },
-    events: {} as DisableListenerEvent | {type: 'decorator.toggle'},
-  },
-  actors: {
-    'disable listener': disableListener,
-    'keyboard shortcut listener': keyboardShortcutListener,
-  },
-}).createMachine({
-  id: 'decorator keyboard shortcut',
-  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: {
-      invoke: {
-        src: 'keyboard shortcut listener',
-        input: ({context}) => ({
-          editor: context.editor,
-          schemaType: context.schemaType,
-        }),
-      },
-      on: {
-        disable: {
-          target: 'disabled',
-        },
-      },
-    },
-  },
-})
-
-export function useDecoratorKeyboardShortcut(props: {
-  schemaType: ToolbarDecoratorSchemaType
-}) {
-  const editor = useEditor()
-  useActorRef(decoratorKeyboardShortcutMachine, {
-    input: {
-      editor,
-      schemaType: props.schemaType,
-    },
-  })
-}

package/src/use-history-buttons.ts

@@ -1,97 +0,0 @@
-import {useEditor, type Editor} from '@portabletext/editor'
-import {useActor} from '@xstate/react'
-import {setup} from 'xstate'
-import {disableListener, type DisableListenerEvent} from './disable-listener'
-
-const historyButtonsMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-    },
-    input: {} as {
-      editor: Editor
-    },
-    events: {} as DisableListenerEvent | HistoryButtonsEvent,
-  },
-  actors: {
-    'disable listener': disableListener,
-  },
-}).createMachine({
-  id: 'history buttons',
-  context: ({input}) => ({
-    editor: input.editor,
-  }),
-  invoke: {
-    src: 'disable listener',
-    input: ({context}) => ({editor: context.editor}),
-  },
-  initial: 'disabled',
-  states: {
-    disabled: {
-      on: {
-        enable: {
-          target: 'enabled',
-        },
-      },
-    },
-    enabled: {
-      on: {
-        'disable': {
-          target: 'disabled',
-        },
-        'history.undo': {
-          actions: ({context}) => {
-            context.editor.send({type: 'history.undo'})
-            context.editor.send({type: 'focus'})
-          },
-        },
-        'history.redo': {
-          actions: ({context}) => {
-            context.editor.send({type: 'history.redo'})
-            context.editor.send({type: 'focus'})
-          },
-        },
-      },
-    },
-  },
-})
-
-/**
- * @beta
- */
-export type HistoryButtonsEvent =
-  | {
-      type: 'history.undo'
-    }
-  | {
-      type: 'history.redo'
-    }
-
-/**
- * @beta
- */
-export type HistoryButtons = {
-  snapshot: {
-    matches: (state: 'disabled' | 'enabled') => boolean
-  }
-  send: (event: HistoryButtonsEvent) => void
-}
-
-/**
- * @beta
- */
-export function useHistoryButtons(): HistoryButtons {
-  const editor = useEditor()
-  const [actorSnapshot, send] = useActor(historyButtonsMachine, {
-    input: {
-      editor,
-    },
-  })
-
-  return {
-    snapshot: {
-      matches: (state) => actorSnapshot.matches(state),
-    },
-    send,
-  }
-}

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

@@ -1,183 +0,0 @@
-import {useEditor, type Editor} from '@portabletext/editor'
-import {defineBehavior, effect} 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 {ToolbarInlineObjectSchemaType} from './use-toolbar-schema'
-
-const keyboardShortcutListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaType: ToolbarInlineObjectSchemaType},
-  InlineObjectButtonEvent
->(({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 inlineObjectButtonMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaType: ToolbarInlineObjectSchemaType
-    },
-    input: {} as {
-      editor: Editor
-      schemaType: ToolbarInlineObjectSchemaType
-    },
-    events: {} as DisableListenerEvent | InlineObjectButtonEvent,
-  },
-  actions: {
-    insert: ({context, event}) => {
-      if (event.type !== 'insert') {
-        return
-      }
-
-      context.editor.send({
-        type: 'insert.inline object',
-        inlineObject: {
-          name: context.schemaType.name,
-          value: event.value,
-        },
-      })
-      context.editor.send({type: 'focus'})
-    },
-  },
-  actors: {
-    'disable listener': disableListener,
-    'keyboard shortcut listener': keyboardShortcutListener,
-  },
-}).createMachine({
-  id: 'inline 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 InlineObjectButtonEvent =
-  | {
-      type: 'close dialog'
-    }
-  | {
-      type: 'open dialog'
-    }
-  | {
-      type: 'insert'
-      value: {[key: string]: unknown}
-    }
-
-/**
- * @beta
- */
-export type InlineObjectButton = {
-  snapshot: {
-    matches: (
-      state:
-        | 'disabled'
-        | 'enabled'
-        | {enabled: 'idle'}
-        | {enabled: 'showing dialog'},
-    ) => boolean
-  }
-  send: (event: InlineObjectButtonEvent) => void
-}
-
-/**
- * @beta
- * Manages the state, keyboard shortcut and available events for an inline
- * object button.
- *
- * Note: This hook assumes that the button triggers a dialog for inputting
- * the inline object value.
- */
-export function useInlineObjectButton(props: {
-  schemaType: ToolbarInlineObjectSchemaType
-}): InlineObjectButton {
-  const editor = useEditor()
-  const [actorSnapshot, send] = useActor(inlineObjectButtonMachine, {
-    input: {
-      editor,
-      schemaType: props.schemaType,
-    },
-  })
-
-  return {
-    snapshot: {
-      matches: (state) => actorSnapshot.matches(state),
-    },
-    send,
-  }
-}

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

@@ -1,285 +0,0 @@
-import {
-  useEditor,
-  type ChildPath,
-  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 {ToolbarInlineObjectSchemaType} from './use-toolbar-schema'
-
-type ActiveContext = {
-  inlineObjects: Array<{
-    value: PortableTextObject
-    schemaType: ToolbarInlineObjectSchemaType
-    at: ChildPath
-  }>
-  elementRef: RefObject<Element | null>
-}
-
-type ActiveListenerEvent =
-  | ({
-      type: 'set active'
-    } & ActiveContext)
-  | {
-      type: 'set inactive'
-    }
-
-const activeListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaTypes: ReadonlyArray<ToolbarInlineObjectSchemaType>},
-  ActiveListenerEvent
->(({input, sendBack}) => {
-  return input.editor.on('selection', () => {
-    const snapshot = input.editor.getSnapshot()
-
-    if (!selectors.isSelectionCollapsed(snapshot)) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const focusInlineObject = selectors.getFocusInlineObject(snapshot)
-
-    if (!focusInlineObject) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const schemaType = input.schemaTypes.find(
-      (schemaType) => schemaType.name === focusInlineObject.node._type,
-    )
-
-    if (!schemaType) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const selectedNodes = input.editor.dom.getChildNodes(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',
-      inlineObjects: [
-        {
-          value: focusInlineObject.node,
-          schemaType,
-          at: focusInlineObject.path,
-        },
-      ],
-      elementRef,
-    })
-  }).unsubscribe
-})
-
-const inlineObjectPopoverMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaTypes: ReadonlyArray<ToolbarInlineObjectSchemaType>
-    } & ActiveContext,
-    input: {} as {
-      editor: Editor
-      schemaTypes: ReadonlyArray<ToolbarInlineObjectSchemaType>
-    },
-    events: {} as
-      | DisableListenerEvent
-      | ActiveListenerEvent
-      | InlineObjectPopoverEvent,
-  },
-  actions: {
-    reset: assign({
-      inlineObjects: [],
-      elementRef: React.createRef<Element>(),
-    }),
-  },
-  actors: {
-    'disable listener': disableListener,
-    'active listener': activeListener,
-  },
-}).createMachine({
-  id: 'inline object popover',
-  context: ({input}) => ({
-    editor: input.editor,
-    schemaTypes: input.schemaTypes,
-    inlineObjects: [],
-    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({
-                inlineObjects: ({event}) => event.inlineObjects,
-                elementRef: ({event}) => event.elementRef,
-              }),
-              target: 'active',
-            },
-            'enable': {
-              target: '#inline object popover.enabled.inactive',
-            },
-          },
-        },
-        active: {
-          on: {
-            'set inactive': {
-              target: 'inactive',
-            },
-            'enable': {
-              target: '#inline object popover.enabled.active',
-            },
-          },
-        },
-      },
-    },
-    enabled: {
-      initial: 'inactive',
-      states: {
-        inactive: {
-          entry: ['reset'],
-          on: {
-            'set active': {
-              target: 'active',
-              actions: assign({
-                inlineObjects: ({event}) => event.inlineObjects,
-                elementRef: ({event}) => event.elementRef,
-              }),
-            },
-            'disable': {
-              target: '#inline object popover.disabled.inactive',
-            },
-          },
-        },
-        active: {
-          on: {
-            'set inactive': {
-              target: 'inactive',
-            },
-            'disable': {
-              target: '#inline object popover.disabled.active',
-            },
-            'set active': {
-              actions: assign({
-                inlineObjects: ({event}) => event.inlineObjects,
-                elementRef: ({event}) => event.elementRef,
-              }),
-            },
-            'edit': {
-              actions: ({context, event}) => {
-                context.editor.send({
-                  type: 'child.set',
-                  at: event.at,
-                  props: event.props,
-                })
-                context.editor.send({type: 'focus'})
-              },
-            },
-            'remove': {
-              actions: ({context, event}) => {
-                context.editor.send({
-                  type: 'delete.child',
-                  at: event.at,
-                })
-                context.editor.send({type: 'focus'})
-              },
-            },
-            'close': {
-              actions: ({context}) => {
-                context.editor.send({type: 'focus'})
-              },
-              target: 'inactive',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-/**
- * @beta
- */
-export type InlineObjectPopoverEvent =
-  | {
-      type: 'remove'
-      at: ChildPath
-    }
-  | {
-      type: 'edit'
-      at: ChildPath
-      props: {[key: string]: unknown}
-    }
-  | {
-      type: 'close'
-    }
-
-/**
- * @beta
- */
-export type InlineObjectPopover = {
-  snapshot: {
-    context: ActiveContext
-    matches: (
-      state:
-        | 'disabled'
-        | 'enabled'
-        | {
-            enabled: 'inactive' | 'active'
-          },
-    ) => boolean
-  }
-  send: (event: InlineObjectPopoverEvent) => void
-}
-
-/**
- * @beta
- * Manages the state and available events for an inline object popover.
- */
-export function useInlineObjectPopover(props: {
-  schemaTypes: ReadonlyArray<ToolbarInlineObjectSchemaType>
-}): InlineObjectPopover {
-  const editor = useEditor()
-  const [actorSnapshot, send] = useActor(inlineObjectPopoverMachine, {
-    input: {
-      editor,
-      schemaTypes: props.schemaTypes,
-    },
-  })
-
-  return {
-    snapshot: {
-      context: {
-        inlineObjects: actorSnapshot.context.inlineObjects,
-        elementRef: actorSnapshot.context.elementRef,
-      },
-      matches: (state) => actorSnapshot.matches(state),
-    },
-    send,
-  }
-}