@portabletext/toolbar 4.0.22 → 4.0.24

package/src/use-list-button.ts

@@ -1,186 +0,0 @@
-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}) => {
-  // Send back the initial state
-  if (
-    selectors.isActiveListItem(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.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-annotation.ts

@@ -1,48 +0,0 @@
-import {useEditor} from '@portabletext/editor'
-import {defineBehavior, execute, raise} from '@portabletext/editor/behaviors'
-import {isActiveAnnotation} from '@portabletext/editor/selectors'
-import {useEffect} from 'react'
-import type {ToolbarAnnotationSchemaType} from './use-toolbar-schema'
-
-export function useMutuallyExclusiveAnnotation(props: {
-  schemaType: ToolbarAnnotationSchemaType
-}) {
-  const editor = useEditor()
-
-  useEffect(() => {
-    const mutuallyExclusive = props.schemaType.mutuallyExclusive
-
-    if (!mutuallyExclusive) {
-      return
-    }
-
-    return editor.registerBehavior({
-      behavior: defineBehavior({
-        on: 'annotation.add',
-        guard: ({snapshot, event}) => {
-          if (event.annotation.name !== props.schemaType.name) {
-            return false
-          }
-
-          const activeMutuallyExclusive = mutuallyExclusive.filter(
-            (annotation) =>
-              isActiveAnnotation(annotation, {mode: 'partial'})(snapshot),
-          )
-
-          return {activeMutuallyExclusive}
-        },
-        actions: [
-          ({event}, {activeMutuallyExclusive}) => [
-            ...activeMutuallyExclusive.map((annotation) =>
-              raise({
-                type: 'annotation.remove',
-                annotation: {name: annotation},
-              }),
-            ),
-            execute(event),
-          ],
-        ],
-      }),
-    })
-  }, [editor, props.schemaType.name, props.schemaType.mutuallyExclusive])
-}

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

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

@@ -1,105 +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 {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

@@ -1,154 +0,0 @@
-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}) => {
-  // Send back the initial state
-  const activeStyle = selectors.getActiveStyle(input.editor.getSnapshot())
-  sendBack({type: 'set active style', style: activeStyle})
-
-  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': {
-      guard: ({context, event}) => context.activeStyle !== event.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

@@ -1,166 +0,0 @@
-import {
-  useEditor,
-  useEditorSelector,
-  type AnnotationDefinition,
-  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
-  mutuallyExclusive?: ReadonlyArray<AnnotationDefinition['name']>
-}
-
-/**
- * @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
-}