@portabletext/toolbar 0.0.0

package/src/use-list-button.ts

@@ -0,0 +1,175 @@
+import {useEditor, type Editor, type ListSchemaType} 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 type {ToolbarListSchemaType} from './use-toolbar-schema'
+
+const activeListener = fromCallback<
+  AnyEventObject,
+  {editor: Editor; schemaType: ListSchemaType},
+  {type: 'set active'} | {type: 'set inactive'}
+>(({input, sendBack}) => {
+  return input.editor.on('*', () => {
+    const snapshot = input.editor.getSnapshot()
+
+    if (selectors.isActiveListItem(input.schemaType.name)(snapshot)) {
+      sendBack({type: 'set active'})
+    } else {
+      sendBack({type: 'set inactive'})
+    }
+  }).unsubscribe
+})
+
+const listButtonMachine = setup({
+  types: {
+    context: {} as {
+      editor: Editor
+      schemaType: ListSchemaType
+    },
+    input: {} as {
+      editor: Editor
+      schemaType: ListSchemaType
+    },
+    events: {} as DisableListenerEvent | ListButtonEvent,
+  },
+  actions: {
+    toggle: ({context, event}) => {
+      if (event.type !== 'toggle') {
+        return
+      }
+
+      context.editor.send({
+        type: 'list item.toggle',
+        listItem: context.schemaType.name,
+      })
+      context.editor.send({type: 'focus'})
+    },
+  },
+  actors: {
+    'disable listener': disableListener,
+    'active listener': activeListener,
+  },
+}).createMachine({
+  id: 'list 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: '#list button.enabled.inactive',
+            },
+            'set active': {
+              target: 'active',
+            },
+          },
+        },
+        active: {
+          on: {
+            'enable': {
+              target: '#list button.enabled.active',
+            },
+            'set inactive': {
+              target: 'inactive',
+            },
+          },
+        },
+      },
+    },
+    enabled: {
+      on: {
+        toggle: {
+          actions: ['toggle'],
+        },
+      },
+      initial: 'inactive',
+      states: {
+        inactive: {
+          on: {
+            'disable': {
+              target: '#list button.disabled.inactive',
+            },
+            'set active': {
+              target: 'active',
+            },
+          },
+        },
+        active: {
+          on: {
+            'disable': {
+              target: '#list button.disabled.active',
+            },
+            'set inactive': {
+              target: 'inactive',
+            },
+          },
+        },
+      },
+    },
+  },
+})
+
+/**
+ * @beta
+ */
+export type ListButtonEvent = {
+  type: 'toggle'
+}
+
+/**
+ * @beta
+ */
+export type ListButton = {
+  snapshot: {
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {disabled: 'inactive'}
+        | {disabled: 'active'}
+        | {enabled: 'inactive'}
+        | {enabled: 'active'},
+    ) => boolean
+  }
+  send: (event: ListButtonEvent) => void
+}
+
+/**
+ * @beta
+ * Manages the state, keyboard shortcuts and available events for a list button.
+ */
+export function useListButton(props: {
+  schemaType: ToolbarListSchemaType
+}): ListButton {
+  const editor = useEditor()
+  const [actorSnapshot, send] = useActor(listButtonMachine, {
+    input: {
+      editor,
+      schemaType: props.schemaType,
+    },
+  })
+
+  return {
+    snapshot: {
+      matches: (state) => actorSnapshot.matches(state),
+    },
+    send,
+  }
+}

package/src/use-mutually-exclusive-decorator.ts

@@ -0,0 +1,36 @@
+import {useEditor} from '@portabletext/editor'
+import {defineBehavior, forward, raise} from '@portabletext/editor/behaviors'
+import {useEffect} from 'react'
+import type {ToolbarDecoratorSchemaType} from './use-toolbar-schema'
+
+export function useMutuallyExclusiveDecorator(props: {
+  schemaType: ToolbarDecoratorSchemaType
+}) {
+  const editor = useEditor()
+
+  useEffect(() => {
+    const mutuallyExclusive = props.schemaType.mutuallyExclusive
+
+    if (!mutuallyExclusive) {
+      return
+    }
+
+    return editor.registerBehavior({
+      behavior: defineBehavior({
+        on: 'decorator.add',
+        guard: ({event}) => event.decorator === props.schemaType.name,
+        actions: [
+          ({event}) => [
+            forward(event),
+            ...mutuallyExclusive.map((decorator) =>
+              raise({
+                type: 'decorator.remove',
+                decorator,
+              }),
+            ),
+          ],
+        ],
+      }),
+    })
+  }, [editor, props.schemaType.name, props.schemaType.mutuallyExclusive])
+}

package/src/use-style-keyboard-shortcuts.ts

@@ -0,0 +1,105 @@
+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 {ToolbarStyleSchemaType} from './use-toolbar-schema'
+
+const styleKeyboardShortcutsListener = fromCallback<
+  AnyEventObject,
+  {editor: Editor; schemaTypes: ReadonlyArray<ToolbarStyleSchemaType>}
+>(({input}) => {
+  const unregisterBehaviors = input.schemaTypes.flatMap((schemaType) => {
+    const shortcut = schemaType.shortcut
+
+    if (!shortcut) {
+      return []
+    }
+
+    return [
+      input.editor.registerBehavior({
+        behavior: defineBehavior({
+          on: 'keyboard.keydown',
+          guard: ({event}) => shortcut.guard(event.originEvent),
+          actions: [
+            () => [raise({type: 'style.toggle', style: schemaType.name})],
+          ],
+        }),
+      }),
+    ]
+  })
+
+  return () => {
+    for (const unregisterBehavior of unregisterBehaviors) {
+      unregisterBehavior()
+    }
+  }
+})
+
+const styleKeyboardShortcutsMachine = setup({
+  types: {
+    context: {} as {
+      editor: Editor
+      schemaTypes: ReadonlyArray<ToolbarStyleSchemaType>
+    },
+    input: {} as {
+      editor: Editor
+      schemaTypes: ReadonlyArray<ToolbarStyleSchemaType>
+    },
+    events: {} as DisableListenerEvent | {type: 'style.toggle'},
+  },
+  actors: {
+    'disable listener': disableListener,
+    'style keyboard shortcuts listener': styleKeyboardShortcutsListener,
+  },
+}).createMachine({
+  id: 'style keyboard shortcuts',
+  context: ({input}) => ({
+    editor: input.editor,
+    schemaTypes: input.schemaTypes,
+  }),
+  invoke: {
+    src: 'disable listener',
+    input: ({context}) => ({editor: context.editor}),
+  },
+  initial: 'disabled',
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: 'enabled',
+        },
+      },
+    },
+    enabled: {
+      invoke: {
+        src: 'style keyboard shortcuts listener',
+        input: ({context}) => ({
+          editor: context.editor,
+          schemaTypes: context.schemaTypes,
+        }),
+      },
+      on: {
+        disable: {
+          target: 'disabled',
+        },
+      },
+    },
+  },
+})
+
+/**
+ * @beta
+ * Registers keyboard shortcuts for a set of style schema types.
+ */
+export function useStyleKeyboardShortcuts(props: {
+  schemaTypes: ReadonlyArray<ToolbarStyleSchemaType>
+}) {
+  const editor = useEditor()
+  useActorRef(styleKeyboardShortcutsMachine, {
+    input: {
+      editor,
+      schemaTypes: props.schemaTypes,
+    },
+  })
+}

package/src/use-style-selector.ts

@@ -0,0 +1,149 @@
+import {
+  useEditor,
+  type Editor,
+  type StyleSchemaType,
+} from '@portabletext/editor'
+import * as selectors from '@portabletext/editor/selectors'
+import {useActor} from '@xstate/react'
+import {assign, fromCallback, setup, type AnyEventObject} from 'xstate'
+import {disableListener, type DisableListenerEvent} from './disable-listener'
+import {useStyleKeyboardShortcuts} from './use-style-keyboard-shortcuts'
+import type {ToolbarStyleSchemaType} from './use-toolbar-schema'
+
+type ActiveStyleListenerEvent = {
+  type: 'set active style'
+  style: StyleSchemaType['name'] | undefined
+}
+
+const activeListener = fromCallback<
+  AnyEventObject,
+  {editor: Editor},
+  ActiveStyleListenerEvent
+>(({input, sendBack}) => {
+  return input.editor.on('*', () => {
+    const snapshot = input.editor.getSnapshot()
+    const activeStyle = selectors.getActiveStyle(snapshot)
+
+    sendBack({type: 'set active style', style: activeStyle})
+  }).unsubscribe
+})
+
+const styleSelectorMachine = setup({
+  types: {
+    context: {} as {
+      editor: Editor
+      activeStyle: StyleSchemaType['name'] | undefined
+    },
+    input: {} as {
+      editor: Editor
+    },
+    events: {} as
+      | StyleSelectorEvent
+      | DisableListenerEvent
+      | ActiveStyleListenerEvent,
+  },
+  actors: {
+    'disable listener': disableListener,
+    'active listener': activeListener,
+  },
+}).createMachine({
+  id: 'style selector',
+  context: ({input}) => ({
+    editor: input.editor,
+    activeStyle: undefined,
+  }),
+  invoke: [
+    {
+      src: 'disable listener',
+      input: ({context}) => ({
+        editor: context.editor,
+      }),
+    },
+    {
+      src: 'active listener',
+      input: ({context}) => ({
+        editor: context.editor,
+      }),
+    },
+  ],
+  on: {
+    'set active style': {
+      actions: assign({
+        activeStyle: ({event}) => event.style,
+      }),
+    },
+  },
+  initial: 'disabled',
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: 'enabled',
+        },
+      },
+    },
+    enabled: {
+      on: {
+        disable: {
+          target: 'disabled',
+        },
+        toggle: {
+          actions: [
+            ({context, event}) => {
+              context.editor.send({type: 'style.toggle', style: event.style})
+              context.editor.send({type: 'focus'})
+            },
+          ],
+        },
+      },
+    },
+  },
+})
+
+/**
+ * @beta
+ */
+export type StyleSelectorEvent = {
+  type: 'toggle'
+  style: StyleSchemaType['name']
+}
+
+/**
+ * @beta
+ */
+export type StyleSelector = {
+  snapshot: {
+    matches: (state: 'disabled' | 'enabled') => boolean
+    context: {
+      activeStyle: StyleSchemaType['name'] | undefined
+    }
+  }
+  send: (event: StyleSelectorEvent) => void
+}
+
+/**
+ * @beta
+ * Manages the state, keyboard shortcuts and available events for a style
+ * selector.
+ */
+export function useStyleSelector(props: {
+  schemaTypes: ReadonlyArray<ToolbarStyleSchemaType>
+}): StyleSelector {
+  const editor = useEditor()
+  const [actorSnapshot, send] = useActor(styleSelectorMachine, {
+    input: {
+      editor,
+    },
+  })
+  useStyleKeyboardShortcuts(props)
+
+  return {
+    snapshot: {
+      matches: (state) => actorSnapshot.matches(state),
+      context: {
+        activeStyle: actorSnapshot.context.activeStyle,
+      },
+    },
+    send,
+  }
+}

package/src/use-toolbar-schema.ts

@@ -0,0 +1,164 @@
+import {
+  useEditor,
+  useEditorSelector,
+  type AnnotationSchemaType,
+  type BlockObjectSchemaType,
+  type DecoratorDefinition,
+  type DecoratorSchemaType,
+  type InlineObjectSchemaType,
+  type ListSchemaType,
+  type StyleSchemaType,
+} from '@portabletext/editor'
+import type {KeyboardShortcut} from '@portabletext/keyboard-shortcuts'
+
+/**
+ * @beta
+ */
+export type ExtendDecoratorSchemaType = (
+  decorator: DecoratorSchemaType,
+) => ToolbarDecoratorSchemaType
+
+/**
+ * @beta
+ */
+export type ExtendAnnotationSchemaType = (
+  annotation: AnnotationSchemaType,
+) => ToolbarAnnotationSchemaType
+
+/**
+ * @beta
+ */
+export type ExtendListSchemaType = (
+  list: ListSchemaType,
+) => ToolbarListSchemaType
+
+/**
+ * @beta
+ */
+export type ExtendBlockObjectSchemaType = (
+  blockObject: BlockObjectSchemaType,
+) => ToolbarBlockObjectSchemaType
+
+/**
+ * @beta
+ */
+export type ExtendInlineObjectSchemaType = (
+  inlineObject: InlineObjectSchemaType,
+) => ToolbarInlineObjectSchemaType
+
+/**
+ * @beta
+ */
+export type ExtendStyleSchemaType = (
+  style: StyleSchemaType,
+) => ToolbarStyleSchemaType
+
+/**
+ * @beta
+ * Extend the editor's schema with default values, icons, shortcuts and more.
+ * This makes it easier to use the schema to render toolbars, forms and other
+ * UI components.
+ */
+export function useToolbarSchema(props: {
+  extendDecorator?: (
+    decorator: DecoratorSchemaType,
+  ) => ToolbarDecoratorSchemaType
+  extendAnnotation?: (
+    annotation: AnnotationSchemaType,
+  ) => ToolbarAnnotationSchemaType
+  extendList?: (list: ListSchemaType) => ToolbarListSchemaType
+  extendBlockObject?: (
+    blockObject: BlockObjectSchemaType,
+  ) => ToolbarBlockObjectSchemaType
+  extendInlineObject?: (
+    inlineObject: InlineObjectSchemaType,
+  ) => ToolbarInlineObjectSchemaType
+  extendStyle?: (style: StyleSchemaType) => ToolbarStyleSchemaType
+}): ToolbarSchema {
+  const editor = useEditor()
+  const schema = useEditorSelector(
+    editor,
+    (snapshot) => snapshot.context.schema,
+  )
+
+  return {
+    decorators: schema.decorators.map(
+      (decorator) => props.extendDecorator?.(decorator) ?? decorator,
+    ),
+    annotations: schema.annotations.map(
+      (annotation) => props.extendAnnotation?.(annotation) ?? annotation,
+    ),
+    lists: schema.lists.map((list) => props.extendList?.(list) ?? list),
+    blockObjects: schema.blockObjects.map(
+      (blockObject) => props.extendBlockObject?.(blockObject) ?? blockObject,
+    ),
+    inlineObjects: schema.inlineObjects.map(
+      (inlineObject) =>
+        props.extendInlineObject?.(inlineObject) ?? inlineObject,
+    ),
+    styles: schema.styles.map((style) => props.extendStyle?.(style) ?? style),
+  }
+}
+
+/**
+ * @beta
+ */
+export type ToolbarSchema = {
+  decorators?: ReadonlyArray<ToolbarDecoratorSchemaType>
+  annotations?: ReadonlyArray<ToolbarAnnotationSchemaType>
+  lists?: ReadonlyArray<ToolbarListSchemaType>
+  blockObjects?: ReadonlyArray<ToolbarBlockObjectSchemaType>
+  inlineObjects?: ReadonlyArray<ToolbarInlineObjectSchemaType>
+  styles?: ReadonlyArray<ToolbarStyleSchemaType>
+}
+
+/**
+ * @beta
+ */
+export type ToolbarDecoratorSchemaType = DecoratorSchemaType & {
+  icon?: React.ComponentType
+  shortcut?: KeyboardShortcut
+  mutuallyExclusive?: ReadonlyArray<DecoratorDefinition['name']>
+}
+
+/**
+ * @beta
+ */
+export type ToolbarAnnotationSchemaType = AnnotationSchemaType & {
+  icon?: React.ComponentType
+  defaultValues?: Record<string, unknown>
+  shortcut?: KeyboardShortcut
+}
+
+/**
+ * @beta
+ */
+export type ToolbarListSchemaType = ListSchemaType & {
+  icon?: React.ComponentType
+}
+
+/**
+ * @beta
+ */
+export type ToolbarBlockObjectSchemaType = BlockObjectSchemaType & {
+  icon?: React.ComponentType
+  defaultValues?: Record<string, unknown>
+  shortcut?: KeyboardShortcut
+}
+
+/**
+ * @beta
+ */
+export type ToolbarInlineObjectSchemaType = InlineObjectSchemaType & {
+  icon?: React.ComponentType
+  defaultValues?: Record<string, unknown>
+  shortcut?: KeyboardShortcut
+}
+
+/**
+ * @beta
+ */
+export type ToolbarStyleSchemaType = StyleSchemaType & {
+  icon?: React.ComponentType
+  shortcut?: KeyboardShortcut
+}