@portabletext/toolbar 4.0.23 → 4.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/toolbar",
-  "version": "4.0.23",
+  "version": "4.0.24",
   "description": "Utilities for building a toolbar for the Portable Text Editor",
   "keywords": [
     "portabletext",
@@ -29,14 +29,13 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "src",
     "dist"
   ],
   "dependencies": {
     "@xstate/react": "^6.0.0",
     "react-compiler-runtime": "^1.0.0",
     "xstate": "^5.24.0",
-    "@portabletext/keyboard-shortcuts": "^2.1.0"
+    "@portabletext/keyboard-shortcuts": "^2.1.1"
   },
   "devDependencies": {
     "@sanity/pkg-utils": "^10.1.1",
@@ -49,10 +48,10 @@
     "react": "^19.2.1",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.48.0",
-    "@portabletext/editor": "3.3.3"
+    "@portabletext/editor": "3.3.4"
   },
   "peerDependencies": {
-    "@portabletext/editor": "^3.3.3",
+    "@portabletext/editor": "^3.3.4",
     "react": "^18.3 || ^19"
   },
   "engines": {

package/src/disable-listener.ts

@@ -1,25 +0,0 @@
-import type {Editor} from '@portabletext/editor'
-import {fromCallback, type AnyEventObject} from 'xstate'
-
-export type DisableListenerEvent = {type: 'enable'} | {type: 'disable'}
-
-export const disableListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor},
-  DisableListenerEvent
->(({input, sendBack}) => {
-  // Send back the initial state
-  if (input.editor.getSnapshot().context.readOnly) {
-    sendBack({type: 'disable'})
-  } else {
-    sendBack({type: 'enable'})
-  }
-
-  return input.editor.on('*', () => {
-    if (input.editor.getSnapshot().context.readOnly) {
-      sendBack({type: 'disable'})
-    } else {
-      sendBack({type: 'enable'})
-    }
-  }).unsubscribe
-})

package/src/index.ts

@@ -1,11 +0,0 @@
-export * from './use-toolbar-schema'
-export * from './use-annotation-button'
-export * from './use-annotation-popover'
-export * from './use-block-object-button'
-export * from './use-block-object-popover'
-export * from './use-decorator-button'
-export * from './use-history-buttons'
-export * from './use-inline-object-button'
-export * from './use-inline-object-popover'
-export * from './use-list-button'
-export * from './use-style-selector'

package/src/use-annotation-button.ts

@@ -1,316 +0,0 @@
-import {useEditor, type Editor} from '@portabletext/editor'
-import {defineBehavior, effect, raise} from '@portabletext/editor/behaviors'
-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 {useMutuallyExclusiveAnnotation} from './use-mutually-exclusive-annotation'
-import type {ToolbarAnnotationSchemaType} from './use-toolbar-schema'
-
-const activeListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaType: ToolbarAnnotationSchemaType},
-  {type: 'set active'} | {type: 'set inactive'}
->(({input, sendBack}) => {
-  // Send back the initial state
-  if (
-    selectors.isActiveAnnotation(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.isActiveAnnotation(input.schemaType.name)(snapshot)) {
-      sendBack({type: 'set active'})
-    } else {
-      sendBack({type: 'set inactive'})
-    }
-  }).unsubscribe
-})
-
-const keyboardShortcutRemove = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaType: ToolbarAnnotationSchemaType}
->(({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: 'annotation.remove',
-            annotation: {
-              name: input.schemaType.name,
-            },
-          }),
-          effect(() => {
-            input.editor.send({type: 'focus'})
-          }),
-        ],
-      ],
-    }),
-  })
-})
-
-const keyboardShortcutShowInsertDialog = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaType: ToolbarAnnotationSchemaType},
-  {type: 'open dialog'}
->(({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 annotationButtonMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaType: ToolbarAnnotationSchemaType
-    },
-    input: {} as {
-      editor: Editor
-      schemaType: ToolbarAnnotationSchemaType
-    },
-    events: {} as
-      | AnnotationButtonEvent
-      | DisableListenerEvent
-      | {type: 'set active'}
-      | {type: 'set inactive'},
-  },
-  actions: {
-    'add annotation': ({context, event}) => {
-      if (event.type !== 'add') {
-        return
-      }
-
-      context.editor.send({
-        type: 'annotation.add',
-        annotation: {
-          name: context.schemaType.name,
-          value: event.annotation.value,
-        },
-      })
-      context.editor.send({type: 'focus'})
-    },
-    'remove annotation': ({context}) => {
-      context.editor.send({
-        type: 'annotation.remove',
-        annotation: {
-          name: context.schemaType.name,
-        },
-      })
-      context.editor.send({type: 'focus'})
-    },
-  },
-  actors: {
-    'active listener': activeListener,
-    'disable listener': disableListener,
-    'keyboard shortcut.remove': keyboardShortcutRemove,
-    'keyboard shortcut.show insert dialog': keyboardShortcutShowInsertDialog,
-  },
-}).createMachine({
-  id: 'annotation button',
-  context: ({input}) => ({
-    editor: input.editor,
-    schemaType: input.schemaType,
-  }),
-  invoke: [
-    {
-      src: 'active listener',
-      input: ({context}) => ({
-        editor: context.editor,
-        schemaType: context.schemaType,
-      }),
-    },
-    {
-      src: 'disable listener',
-      input: ({context}) => ({
-        editor: context.editor,
-        schemaType: context.schemaType,
-      }),
-    },
-  ],
-  initial: 'disabled',
-  states: {
-    disabled: {
-      initial: 'inactive',
-      states: {
-        inactive: {
-          on: {
-            'enable': {
-              target: '#annotation button.enabled.inactive',
-            },
-            'set active': {
-              target: 'active',
-            },
-          },
-        },
-        active: {
-          on: {
-            'enable': {
-              target: '#annotation button.enabled.active',
-            },
-            'set inactive': {
-              target: 'inactive',
-            },
-          },
-        },
-      },
-    },
-    enabled: {
-      initial: 'inactive',
-      states: {
-        inactive: {
-          initial: 'idle',
-          on: {
-            'disable': {
-              target: '#annotation button.disabled.inactive',
-            },
-            'set active': {
-              target: '#annotation button.enabled.active',
-            },
-            'add': {
-              actions: 'add annotation',
-            },
-          },
-          states: {
-            'idle': {
-              invoke: {
-                src: 'keyboard shortcut.show insert dialog',
-                input: ({context}) => ({
-                  editor: context.editor,
-                  schemaType: context.schemaType,
-                }),
-              },
-              on: {
-                'open dialog': {
-                  target: 'showing dialog',
-                },
-              },
-            },
-            'showing dialog': {
-              on: {
-                'close dialog': {
-                  target: 'idle',
-                },
-              },
-            },
-          },
-        },
-        active: {
-          invoke: {
-            src: 'keyboard shortcut.remove',
-            input: ({context}) => ({
-              editor: context.editor,
-              schemaType: context.schemaType,
-            }),
-          },
-          on: {
-            'set inactive': {
-              target: '#annotation button.enabled.inactive',
-            },
-            'disable': {
-              target: '#annotation button.disabled.active',
-            },
-            'remove': {
-              actions: 'remove annotation',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-/**
- * @beta
- */
-export type AnnotationButtonEvent =
-  | {type: 'close dialog'}
-  | {type: 'open dialog'}
-  | {
-      type: 'add'
-      annotation: {
-        value: Record<string, unknown>
-      }
-    }
-  | {type: 'remove'}
-
-/**
- * @beta
- */
-export type AnnotationButton = {
-  snapshot: {
-    matches: (
-      state:
-        | 'disabled'
-        | 'enabled'
-        | {disabled: 'inactive'}
-        | {disabled: 'active'}
-        | {enabled: 'inactive'}
-        | {enabled: {inactive: 'idle'}}
-        | {enabled: {inactive: 'showing dialog'}}
-        | {enabled: 'active'},
-    ) => boolean
-  }
-  send: (event: AnnotationButtonEvent) => void
-}
-
-/**
- * @beta
- * Manages the state, keyboard shortcut and available events for an annotation
- * button.
- *
- * Note: This hook assumes that the button triggers a dialog for inputting
- * the annotation value.
- */
-export function useAnnotationButton(props: {
-  schemaType: ToolbarAnnotationSchemaType
-}): AnnotationButton {
-  const editor = useEditor()
-  const [snapshot, send] = useActor(annotationButtonMachine, {
-    input: {
-      editor,
-      schemaType: props.schemaType,
-    },
-  })
-
-  useMutuallyExclusiveAnnotation(props)
-
-  return {
-    snapshot: {
-      matches: (state) => snapshot.matches(state),
-    },
-    send,
-  }
-}

package/src/use-annotation-popover.ts

@@ -1,301 +0,0 @@
-import {
-  useEditor,
-  type AnnotationPath,
-  type AnnotationSchemaType,
-  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 {ToolbarAnnotationSchemaType} from './use-toolbar-schema'
-
-type ActiveContext = {
-  annotations: Array<{
-    value: PortableTextObject
-    schemaType: ToolbarAnnotationSchemaType
-    at: AnnotationPath
-  }>
-  elementRef: RefObject<Element | null>
-}
-
-type ActiveListenerEvent =
-  | ({
-      type: 'set active'
-    } & ActiveContext)
-  | {
-      type: 'set inactive'
-    }
-
-const activeListener = fromCallback<
-  AnyEventObject,
-  {editor: Editor; schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>},
-  ActiveListenerEvent
->(({input, sendBack}) => {
-  return input.editor.on('*', () => {
-    const snapshot = input.editor.getSnapshot()
-    const activeAnnotations = selectors.getActiveAnnotations(snapshot)
-    const focusBlock = selectors.getFocusBlock(snapshot)
-
-    if (activeAnnotations.length === 0 || !focusBlock) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const selectedChildren = input.editor.dom.getChildNodes(snapshot)
-    const firstSelectedChild = selectedChildren.at(0)
-
-    if (!firstSelectedChild || !(firstSelectedChild instanceof Element)) {
-      sendBack({type: 'set inactive'})
-      return
-    }
-
-    const elementRef = React.createRef<Element>()
-    elementRef.current = firstSelectedChild
-
-    sendBack({
-      type: 'set active',
-      annotations: activeAnnotations.flatMap((annotation) => {
-        const schemaType = input.schemaTypes.find(
-          (schemaType) => schemaType.name === annotation._type,
-        )
-
-        if (!schemaType) {
-          return []
-        }
-
-        return {
-          value: annotation,
-          schemaType,
-          at: [
-            {_key: focusBlock.node._key},
-            'markDefs',
-            {_key: annotation._key},
-          ],
-        }
-      }),
-      elementRef,
-    })
-  }).unsubscribe
-})
-
-const annotationPopoverMachine = setup({
-  types: {
-    context: {} as {
-      editor: Editor
-      schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>
-    } & ActiveContext,
-    input: {} as {
-      editor: Editor
-      schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>
-    },
-    events: {} as
-      | DisableListenerEvent
-      | ActiveListenerEvent
-      | AnnotationPopoverEvent,
-  },
-  actions: {
-    reset: assign({
-      annotations: [],
-      elementRef: React.createRef<Element>(),
-    }),
-    remove: ({context, event}) => {
-      if (event.type !== 'remove') {
-        return
-      }
-
-      context.editor.send({
-        type: 'annotation.remove',
-        annotation: {
-          name: event.schemaType.name,
-        },
-      })
-      context.editor.send({type: 'focus'})
-    },
-  },
-  actors: {
-    'disable listener': disableListener,
-    'active listener': activeListener,
-  },
-}).createMachine({
-  id: 'annotation popover',
-  context: ({input}) => ({
-    editor: input.editor,
-    schemaTypes: input.schemaTypes,
-    annotations: [],
-    elementRef: React.createRef<Element>(),
-  }),
-  invoke: [
-    {src: 'disable listener', input: ({context}) => ({editor: context.editor})},
-  ],
-  initial: 'disabled',
-  states: {
-    disabled: {
-      initial: 'inactive',
-      states: {
-        inactive: {
-          entry: ['reset'],
-          on: {
-            'set active': {
-              actions: assign({
-                annotations: ({event}) => event.annotations,
-                elementRef: ({event}) => event.elementRef,
-              }),
-              target: 'active',
-            },
-            'enable': {
-              target: '#annotation popover.enabled.inactive',
-            },
-          },
-        },
-        active: {
-          on: {
-            'set inactive': {
-              target: 'inactive',
-            },
-            'enable': {
-              target: '#annotation popover.enabled.active',
-            },
-          },
-        },
-      },
-    },
-    enabled: {
-      invoke: [
-        {
-          src: 'active listener',
-          input: ({context}) => ({
-            editor: context.editor,
-            schemaTypes: context.schemaTypes,
-          }),
-        },
-      ],
-      initial: 'inactive',
-      states: {
-        inactive: {
-          entry: ['reset'],
-          on: {
-            'set active': {
-              target: 'active',
-              actions: assign({
-                annotations: ({event}) => event.annotations,
-                elementRef: ({event}) => event.elementRef,
-              }),
-            },
-            'disable': {
-              target: '#annotation popover.disabled.inactive',
-            },
-          },
-        },
-        active: {
-          on: {
-            'set inactive': {
-              target: 'inactive',
-            },
-            'disable': {
-              target: '#annotation popover.disabled.active',
-            },
-            'set active': {
-              actions: assign({
-                annotations: ({event}) => event.annotations,
-                elementRef: ({event}) => event.elementRef,
-              }),
-            },
-            'edit': {
-              actions: ({context, event}) => {
-                context.editor.send({
-                  type: 'annotation.set',
-                  at: event.at,
-                  props: event.props,
-                })
-                context.editor.send({type: 'focus'})
-              },
-            },
-            'remove': {
-              actions: ({context, event}) => {
-                context.editor.send({
-                  type: 'annotation.remove',
-                  annotation: {
-                    name: event.schemaType.name,
-                  },
-                })
-                context.editor.send({type: 'focus'})
-              },
-            },
-            'close': {
-              actions: ({context}) => {
-                context.editor.send({type: 'focus'})
-              },
-              target: 'inactive',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-/**
- * @beta
- */
-export type AnnotationPopoverEvent =
-  | {
-      type: 'remove'
-      schemaType: AnnotationSchemaType
-    }
-  | {
-      type: 'edit'
-      at: AnnotationPath
-      props: {[key: string]: unknown}
-    }
-  | {
-      type: 'close'
-    }
-
-/**
- * @beta
- */
-export type AnnotationPopover = {
-  snapshot: {
-    context: ActiveContext
-    matches: (
-      state:
-        | 'disabled'
-        | 'enabled'
-        | {
-            enabled: 'inactive' | 'active'
-          },
-    ) => boolean
-  }
-  send: (event: AnnotationPopoverEvent) => void
-}
-
-/**
- * @beta
- * Manages the state and available events for an annotation popover.
- */
-export function useAnnotationPopover(props: {
-  schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>
-}): AnnotationPopover {
-  const editor = useEditor()
-  const [actorSnapshot, send] = useActor(annotationPopoverMachine, {
-    input: {
-      editor,
-      schemaTypes: props.schemaTypes,
-    },
-  })
-
-  return {
-    snapshot: {
-      context: {
-        annotations: actorSnapshot.context.annotations,
-        elementRef: actorSnapshot.context.elementRef,
-      },
-      matches: (state) => actorSnapshot.matches(state),
-    },
-    send,
-  }
-}