@portabletext/toolbar 0.0.0

package/dist/index.d.ts

@@ -0,0 +1,614 @@
+import {
+  AnnotationPath,
+  AnnotationSchemaType,
+  BlockObjectSchemaType,
+  BlockPath,
+  ChildPath,
+  DecoratorDefinition,
+  DecoratorSchemaType,
+  InlineObjectSchemaType,
+  ListSchemaType,
+  PortableTextObject,
+  StyleSchemaType,
+} from '@portabletext/editor'
+import {InsertPlacement} from '@portabletext/editor/behaviors'
+import type {KeyboardShortcut} from '@portabletext/keyboard-shortcuts'
+import type {RefObject} from 'react'
+
+declare type ActiveContext = {
+  annotations: Array<{
+    value: PortableTextObject
+    schemaType: ToolbarAnnotationSchemaType
+    at: AnnotationPath
+  }>
+  elementRef: RefObject<Element | null>
+}
+
+declare type ActiveContext_2 = {
+  blockObjects: Array<{
+    value: PortableTextObject
+    schemaType: ToolbarBlockObjectSchemaType
+    at: BlockPath
+  }>
+  elementRef: RefObject<Element | null>
+}
+
+declare type ActiveContext_3 = {
+  inlineObjects: Array<{
+    value: PortableTextObject
+    schemaType: ToolbarInlineObjectSchemaType
+    at: ChildPath
+  }>
+  elementRef: RefObject<Element | null>
+}
+
+/**
+ * @beta
+ */
+export declare 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
+ */
+export declare type AnnotationButtonEvent =
+  | {
+      type: 'close dialog'
+    }
+  | {
+      type: 'open dialog'
+    }
+  | {
+      type: 'add'
+      annotation: {
+        value: Record<string, unknown>
+      }
+    }
+  | {
+      type: 'remove'
+    }
+
+/**
+ * @beta
+ */
+export declare type AnnotationPopover = {
+  snapshot: {
+    context: ActiveContext
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            enabled: 'inactive' | 'active'
+          },
+    ) => boolean
+  }
+  send: (event: AnnotationPopoverEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type AnnotationPopoverEvent =
+  | {
+      type: 'remove'
+      schemaType: AnnotationSchemaType
+    }
+  | {
+      type: 'edit'
+      at: AnnotationPath
+      props: {
+        [key: string]: unknown
+      }
+    }
+  | {
+      type: 'close'
+    }
+
+/**
+ * @beta
+ */
+export declare type BlockObjectButton = {
+  snapshot: {
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            enabled: 'idle'
+          }
+        | {
+            enabled: 'showing dialog'
+          },
+    ) => boolean
+  }
+  send: (event: BlockObjectButtonEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type BlockObjectButtonEvent =
+  | {
+      type: 'close dialog'
+    }
+  | {
+      type: 'open dialog'
+    }
+  | {
+      type: 'insert'
+      value: {
+        [key: string]: unknown
+      }
+      placement: InsertPlacement | undefined
+    }
+
+/**
+ * @beta
+ */
+export declare type BlockObjectPopover = {
+  snapshot: {
+    context: ActiveContext_2
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            enabled: 'inactive' | 'active'
+          },
+    ) => boolean
+  }
+  send: (event: BlockObjectPopoverEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type BlockObjectPopoverEvent =
+  | {
+      type: 'remove'
+      at: BlockPath
+    }
+  | {
+      type: 'edit'
+      at: BlockPath
+      props: {
+        [key: string]: unknown
+      }
+    }
+  | {
+      type: 'close'
+    }
+
+/**
+ * @beta
+ */
+export declare type DecoratorButton = {
+  snapshot: {
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            disabled: 'inactive'
+          }
+        | {
+            disabled: 'active'
+          }
+        | {
+            enabled: 'inactive'
+          }
+        | {
+            enabled: 'active'
+          },
+    ) => boolean
+  }
+  send: (event: DecoratorButtonEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type DecoratorButtonEvent = {
+  type: 'toggle'
+}
+
+/**
+ * @beta
+ */
+export declare type ExtendAnnotationSchemaType = (
+  annotation: AnnotationSchemaType,
+) => ToolbarAnnotationSchemaType
+
+/**
+ * @beta
+ */
+export declare type ExtendBlockObjectSchemaType = (
+  blockObject: BlockObjectSchemaType,
+) => ToolbarBlockObjectSchemaType
+
+/**
+ * @beta
+ */
+export declare type ExtendDecoratorSchemaType = (
+  decorator: DecoratorSchemaType,
+) => ToolbarDecoratorSchemaType
+
+/**
+ * @beta
+ */
+export declare type ExtendInlineObjectSchemaType = (
+  inlineObject: InlineObjectSchemaType,
+) => ToolbarInlineObjectSchemaType
+
+/**
+ * @beta
+ */
+export declare type ExtendListSchemaType = (
+  list: ListSchemaType,
+) => ToolbarListSchemaType
+
+/**
+ * @beta
+ */
+export declare type ExtendStyleSchemaType = (
+  style: StyleSchemaType,
+) => ToolbarStyleSchemaType
+
+/**
+ * @beta
+ */
+export declare type HistoryButtons = {
+  snapshot: {
+    matches: (state: 'disabled' | 'enabled') => boolean
+  }
+  send: (event: HistoryButtonsEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type HistoryButtonsEvent =
+  | {
+      type: 'history.undo'
+    }
+  | {
+      type: 'history.redo'
+    }
+
+/**
+ * @beta
+ */
+export declare type InlineObjectButton = {
+  snapshot: {
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            enabled: 'idle'
+          }
+        | {
+            enabled: 'showing dialog'
+          },
+    ) => boolean
+  }
+  send: (event: InlineObjectButtonEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type InlineObjectButtonEvent =
+  | {
+      type: 'close dialog'
+    }
+  | {
+      type: 'open dialog'
+    }
+  | {
+      type: 'insert'
+      value: {
+        [key: string]: unknown
+      }
+    }
+
+/**
+ * @beta
+ */
+export declare type InlineObjectPopover = {
+  snapshot: {
+    context: ActiveContext_3
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            enabled: 'inactive' | 'active'
+          },
+    ) => boolean
+  }
+  send: (event: InlineObjectPopoverEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type InlineObjectPopoverEvent =
+  | {
+      type: 'remove'
+      at: ChildPath
+    }
+  | {
+      type: 'edit'
+      at: ChildPath
+      props: {
+        [key: string]: unknown
+      }
+    }
+  | {
+      type: 'close'
+    }
+
+/**
+ * @beta
+ */
+export declare type ListButton = {
+  snapshot: {
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            disabled: 'inactive'
+          }
+        | {
+            disabled: 'active'
+          }
+        | {
+            enabled: 'inactive'
+          }
+        | {
+            enabled: 'active'
+          },
+    ) => boolean
+  }
+  send: (event: ListButtonEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type ListButtonEvent = {
+  type: 'toggle'
+}
+
+/**
+ * @beta
+ */
+export declare type StyleSelector = {
+  snapshot: {
+    matches: (state: 'disabled' | 'enabled') => boolean
+    context: {
+      activeStyle: StyleSchemaType['name'] | undefined
+    }
+  }
+  send: (event: StyleSelectorEvent) => void
+}
+
+/**
+ * @beta
+ */
+export declare type StyleSelectorEvent = {
+  type: 'toggle'
+  style: StyleSchemaType['name']
+}
+
+/**
+ * @beta
+ */
+export declare type ToolbarAnnotationSchemaType = AnnotationSchemaType & {
+  icon?: React.ComponentType
+  defaultValues?: Record<string, unknown>
+  shortcut?: KeyboardShortcut
+}
+
+/**
+ * @beta
+ */
+export declare type ToolbarBlockObjectSchemaType = BlockObjectSchemaType & {
+  icon?: React.ComponentType
+  defaultValues?: Record<string, unknown>
+  shortcut?: KeyboardShortcut
+}
+
+/**
+ * @beta
+ */
+export declare type ToolbarDecoratorSchemaType = DecoratorSchemaType & {
+  icon?: React.ComponentType
+  shortcut?: KeyboardShortcut
+  mutuallyExclusive?: ReadonlyArray<DecoratorDefinition['name']>
+}
+
+/**
+ * @beta
+ */
+export declare type ToolbarInlineObjectSchemaType = InlineObjectSchemaType & {
+  icon?: React.ComponentType
+  defaultValues?: Record<string, unknown>
+  shortcut?: KeyboardShortcut
+}
+
+/**
+ * @beta
+ */
+export declare type ToolbarListSchemaType = ListSchemaType & {
+  icon?: React.ComponentType
+}
+
+/**
+ * @beta
+ */
+export declare type ToolbarSchema = {
+  decorators?: ReadonlyArray<ToolbarDecoratorSchemaType>
+  annotations?: ReadonlyArray<ToolbarAnnotationSchemaType>
+  lists?: ReadonlyArray<ToolbarListSchemaType>
+  blockObjects?: ReadonlyArray<ToolbarBlockObjectSchemaType>
+  inlineObjects?: ReadonlyArray<ToolbarInlineObjectSchemaType>
+  styles?: ReadonlyArray<ToolbarStyleSchemaType>
+}
+
+/**
+ * @beta
+ */
+export declare type ToolbarStyleSchemaType = StyleSchemaType & {
+  icon?: React.ComponentType
+  shortcut?: KeyboardShortcut
+}
+
+/**
+ * @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 declare function useAnnotationButton(props: {
+  schemaType: ToolbarAnnotationSchemaType
+}): AnnotationButton
+
+/**
+ * @beta
+ * Manages the state and available events for an annotation popover.
+ */
+export declare function useAnnotationPopover(props: {
+  schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>
+}): AnnotationPopover
+
+/**
+ * @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 declare function useBlockObjectButton(props: {
+  schemaType: ToolbarBlockObjectSchemaType
+}): BlockObjectButton
+
+/**
+ * @beta
+ * Manages the state and available events for a block object popover.
+ */
+export declare function useBlockObjectPopover(props: {
+  schemaTypes: ReadonlyArray<ToolbarBlockObjectSchemaType>
+}): BlockObjectPopover
+
+/**
+ * @beta
+ * Manages the state, keyboard shortcuts and available events for a decorator
+ * button and sets up mutually exclusive decorator behaviors.
+ */
+export declare function useDecoratorButton(props: {
+  schemaType: ToolbarDecoratorSchemaType
+}): DecoratorButton
+
+/**
+ * @beta
+ */
+export declare function useHistoryButtons(): HistoryButtons
+
+/**
+ * @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 declare function useInlineObjectButton(props: {
+  schemaType: ToolbarInlineObjectSchemaType
+}): InlineObjectButton
+
+/**
+ * @beta
+ * Manages the state and available events for an inline object popover.
+ */
+export declare function useInlineObjectPopover(props: {
+  schemaTypes: ReadonlyArray<ToolbarInlineObjectSchemaType>
+}): InlineObjectPopover
+
+/**
+ * @beta
+ * Manages the state, keyboard shortcuts and available events for a list button.
+ */
+export declare function useListButton(props: {
+  schemaType: ToolbarListSchemaType
+}): ListButton
+
+/**
+ * @beta
+ * Manages the state, keyboard shortcuts and available events for a style
+ * selector.
+ */
+export declare function useStyleSelector(props: {
+  schemaTypes: ReadonlyArray<ToolbarStyleSchemaType>
+}): StyleSelector
+
+/**
+ * @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 declare 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
+
+export {}