@portabletext/toolbar 0.0.0

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

@@ -0,0 +1,189 @@
+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

@@ -0,0 +1,285 @@
+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

@@ -0,0 +1,185 @@
+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}) => {
+  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,
+  }
+}