@dooherceg/tiptap-controlled-editor-with-table 0.0.1

package/dist/components/tiptap-ui/heading-button/use-heading.d.ts

@@ -0,0 +1,108 @@
+import { Editor } from '@tiptap/react';
+export type Level = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Configuration for the heading functionality
+ */
+export interface UseHeadingConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The heading level.
+     */
+    level: Level;
+    /**
+     * Whether the button should hide when heading is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful heading toggle.
+     */
+    onToggled?: () => void;
+}
+export declare const headingIcons: {
+    1: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    2: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    3: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    4: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    5: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    6: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};
+export declare const HEADING_SHORTCUT_KEYS: Record<Level, string>;
+/**
+ * Checks if heading can be toggled in the current editor state
+ */
+export declare function canToggle(editor: Editor | null, level?: Level, turnInto?: boolean): boolean;
+/**
+ * Checks if heading is currently active
+ */
+export declare function isHeadingActive(editor: Editor | null, level?: Level | Level[]): boolean;
+/**
+ * Toggles heading in the editor
+ */
+export declare function toggleHeading(editor: Editor | null, level: Level | Level[]): boolean;
+/**
+ * Determines if the heading button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    level?: Level | Level[];
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides heading functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleHeadingButton() {
+ *   const { isVisible, isActive, handleToggle, Icon } = useHeading({ level: 1 })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleToggle}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       Heading 1
+ *     </button>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedHeadingButton() {
+ *   const { isVisible, isActive, handleToggle, label, Icon } = useHeading({
+ *     level: 2,
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: (isActive) => console.log('Heading toggled:', isActive)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       Toggle Heading 2
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useHeading(config: UseHeadingConfig): {
+    isVisible: boolean;
+    isActive: boolean;
+    handleToggle: () => boolean;
+    canToggle: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};

package/dist/components/tiptap-ui/heading-button/use-heading.js

@@ -0,0 +1,112 @@
+import { useState as S, useEffect as N, useCallback as H } from "react";
+import "@tiptap/react";
+import { TextSelection as h, NodeSelection as m } from "prosemirror-state";
+import { useTiptapEditor as y } from "../../../hooks/use-tiptap-editor.js";
+import { isNodeInSchema as p, isNodeTypeSelected as I, selectionWithinConvertibleTypes as E, findNodePosition as C, isValidPosition as U } from "../../../lib/tiptap-utils.js";
+import { HeadingOneIcon as k } from "../../tiptap-icons/heading-one-icon.js";
+import { HeadingTwoIcon as w } from "../../tiptap-icons/heading-two-icon.js";
+import { HeadingThreeIcon as x } from "../../tiptap-icons/heading-three-icon.js";
+import { HeadingFourIcon as L } from "../../tiptap-icons/heading-four-icon.js";
+import { HeadingFiveIcon as F } from "../../tiptap-icons/heading-five-icon.js";
+import { HeadingSixIcon as V } from "../../tiptap-icons/heading-six-icon.js";
+const W = {
+  1: k,
+  2: w,
+  3: x,
+  4: L,
+  5: F,
+  6: V
+}, z = {
+  1: "ctrl+alt+1",
+  2: "ctrl+alt+2",
+  3: "ctrl+alt+3",
+  4: "ctrl+alt+4",
+  5: "ctrl+alt+5",
+  6: "ctrl+alt+6"
+};
+function d(e, t, n = !0) {
+  return !e || !e.isEditable || !p("heading", e) || I(e, ["image"]) ? !1 : n ? E(e, [
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "blockquote",
+    "codeBlock"
+  ]) ? t ? e.can().setNode("heading", { level: t }) || e.can().clearNodes() : e.can().setNode("heading") || e.can().clearNodes() : !1 : t ? e.can().setNode("heading", { level: t }) : e.can().setNode("heading");
+}
+function B(e, t) {
+  return !e || !e.isEditable ? !1 : Array.isArray(t) ? t.some((n) => e.isActive("heading", { level: n })) : t ? e.isActive("heading", { level: t }) : e.isActive("heading");
+}
+function K(e, t) {
+  if (!e || !e.isEditable) return !1;
+  const n = Array.isArray(t) ? t : [t], a = n.find((s) => d(e, s));
+  if (!a) return !1;
+  try {
+    const s = e.view;
+    let i = s.state, l = i.tr;
+    if (i.selection.empty || i.selection instanceof h) {
+      const o = C({
+        editor: e,
+        node: i.selection.$anchor.node(1)
+      })?.pos;
+      if (!U(o)) return !1;
+      l = l.setSelection(m.create(i.doc, o)), s.dispatch(l), i = s.state;
+    }
+    const r = i.selection;
+    let c = e.chain().focus();
+    if (r instanceof m) {
+      const o = r.node.firstChild?.firstChild, g = r.node.lastChild?.lastChild, v = o ? r.from + o.nodeSize : r.from + 1, A = g ? r.to - g.nodeSize : r.to - 1, T = i.doc.resolve(v), b = i.doc.resolve(A);
+      c = c.setTextSelection(h.between(T, b)).clearNodes();
+    }
+    return (n.some(
+      (o) => e.isActive("heading", { level: o })
+    ) ? c.setNode("paragraph") : c.setNode("heading", { level: a })).run(), e.chain().focus().selectTextblockEnd().run(), !0;
+  } catch {
+    return !1;
+  }
+}
+function O(e) {
+  const { editor: t, level: n, hideWhenUnavailable: a } = e;
+  return !t || !t.isEditable || !p("heading", t) ? !1 : a && !t.isActive("code") ? Array.isArray(n) ? n.some((s) => d(t, s)) : d(t, n) : !0;
+}
+function Q(e) {
+  const {
+    editor: t,
+    level: n,
+    hideWhenUnavailable: a = !1,
+    onToggled: s
+  } = e, { editor: i } = y(t), [l, r] = S(!0), c = d(i, n), f = B(i, n);
+  N(() => {
+    if (!i) return;
+    const o = () => {
+      r(O({ editor: i, level: n, hideWhenUnavailable: a }));
+    };
+    return o(), i.on("selectionUpdate", o), () => {
+      i.off("selectionUpdate", o);
+    };
+  }, [i, n, a]);
+  const u = H(() => {
+    if (!i) return !1;
+    const o = K(i, n);
+    return o && s?.(), o;
+  }, [i, n, s]);
+  return {
+    isVisible: l,
+    isActive: f,
+    handleToggle: u,
+    canToggle: c,
+    label: `Heading ${n}`,
+    shortcutKeys: z[n],
+    Icon: W[n]
+  };
+}
+export {
+  z as HEADING_SHORTCUT_KEYS,
+  d as canToggle,
+  W as headingIcons,
+  B as isHeadingActive,
+  O as shouldShowButton,
+  K as toggleHeading,
+  Q as useHeading
+};

package/dist/components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.d.ts

@@ -0,0 +1,20 @@
+import { UseHeadingDropdownMenuConfig } from '.';
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+export interface HeadingDropdownMenuProps extends Omit<ButtonProps, "type">, UseHeadingDropdownMenuConfig {
+    /**
+     * Whether to render the dropdown menu in a portal
+     * @default false
+     */
+    portal?: boolean;
+    /**
+     * Callback for when the dropdown opens or closes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Dropdown menu component for selecting heading levels in a Tiptap editor.
+ *
+ * For custom dropdown implementations, use the `useHeadingDropdownMenu` hook instead.
+ */
+export declare const HeadingDropdownMenu: import('react').ForwardRefExoticComponent<HeadingDropdownMenuProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default HeadingDropdownMenu;

package/dist/components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.js

@@ -0,0 +1,67 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as b, useState as C, useCallback as D } from "react";
+import { ChevronDownIcon as M } from "../../tiptap-icons/chevron-down-icon.js";
+import { useTiptapEditor as x } from "../../../hooks/use-tiptap-editor.js";
+import { useHeadingDropdownMenu as H } from "./use-heading-dropdown-menu.js";
+import { DropdownMenu as I, DropdownMenuTrigger as y, DropdownMenuContent as B, DropdownMenuItem as T } from "../../tiptap-ui-primitive/dropdown-menu/dropdown-menu.js";
+import { HeadingButton as N } from "../heading-button/heading-button.js";
+import { Button as O, ButtonGroup as j } from "../../tiptap-ui-primitive/button/button.js";
+import { Card as $, CardBody as k } from "../../tiptap-ui-primitive/card/card.js";
+const A = b(
+  ({
+    editor: s,
+    levels: r = [1, 2, 3, 4, 5, 6],
+    hideWhenUnavailable: p = !1,
+    portal: l = !1,
+    onOpenChange: a,
+    ...u
+  }, m) => {
+    const { editor: e } = x(s), [c, f] = C(!1), { isVisible: h, isActive: i, canToggle: n, Icon: g } = H({
+      editor: e,
+      levels: r,
+      hideWhenUnavailable: p
+    }), w = D(
+      (t) => {
+        !e || !n || (f(t), a?.(t));
+      },
+      [n, e, a]
+    );
+    return h ? /* @__PURE__ */ d(I, { modal: !0, open: c, onOpenChange: w, children: [
+      /* @__PURE__ */ o(y, { asChild: !0, children: /* @__PURE__ */ d(
+        O,
+        {
+          type: "button",
+          "data-style": "ghost",
+          "data-active-state": i ? "on" : "off",
+          role: "button",
+          tabIndex: -1,
+          disabled: !n,
+          "data-disabled": !n,
+          "aria-label": "Format text as heading",
+          "aria-pressed": i,
+          tooltip: "Heading",
+          ...u,
+          ref: m,
+          children: [
+            /* @__PURE__ */ o(g, { className: "tiptap-button-icon" }),
+            /* @__PURE__ */ o(M, { className: "tiptap-button-dropdown-small" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ o(B, { align: "start", portal: l, children: /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(j, { children: r.map((t) => /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ o(
+        N,
+        {
+          editor: e,
+          level: t,
+          text: `Heading ${t}`,
+          showTooltip: !1
+        }
+      ) }, `heading-${t}`)) }) }) }) })
+    ] }) : null;
+  }
+);
+A.displayName = "HeadingDropdownMenu";
+export {
+  A as HeadingDropdownMenu,
+  A as default
+};

package/dist/components/tiptap-ui/heading-dropdown-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './heading-dropdown-menu';
+export * from './use-heading-dropdown-menu';

package/dist/components/tiptap-ui/heading-dropdown-menu/index.js

@@ -0,0 +1,7 @@
+import { HeadingDropdownMenu as n } from "./heading-dropdown-menu.js";
+import { getActiveHeadingLevel as d, useHeadingDropdownMenu as g } from "./use-heading-dropdown-menu.js";
+export {
+  n as HeadingDropdownMenu,
+  d as getActiveHeadingLevel,
+  g as useHeadingDropdownMenu
+};

package/dist/components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.d.ts

@@ -0,0 +1,73 @@
+import { Editor } from '@tiptap/react';
+import { Level } from '../heading-button';
+/**
+ * Configuration for the heading dropdown menu functionality
+ */
+export interface UseHeadingDropdownMenuConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Available heading levels to show in the dropdown
+     * @default [1, 2, 3, 4, 5, 6]
+     */
+    levels?: Level[];
+    /**
+     * Whether the dropdown should hide when headings are not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+}
+/**
+ * Gets the currently active heading level from the available levels
+ */
+export declare function getActiveHeadingLevel(editor: Editor | null, levels?: Level[]): Level | undefined;
+/**
+ * Custom hook that provides heading dropdown menu functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyHeadingDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeLevel,
+ *     isAnyHeadingActive,
+ *     canToggle,
+ *     levels,
+ *   } = useHeadingDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedHeadingDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeLevel,
+ *   } = useHeadingDropdownMenu({
+ *     editor: myEditor,
+ *     levels: [1, 2, 3],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export declare function useHeadingDropdownMenu(config?: UseHeadingDropdownMenuConfig): {
+    isVisible: boolean;
+    activeLevel: Level | undefined;
+    isActive: boolean;
+    canToggle: boolean;
+    levels: Level[];
+    label: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};

package/dist/components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.js

@@ -0,0 +1,38 @@
+import { useState as f, useEffect as g } from "react";
+import { useTiptapEditor as p } from "../../../hooks/use-tiptap-editor.js";
+import { HeadingIcon as v } from "../../tiptap-icons/heading-icon.js";
+import { isHeadingActive as a, canToggle as m, headingIcons as h, shouldShowButton as b } from "../heading-button/use-heading.js";
+function H(n, i = [1, 2, 3, 4, 5, 6]) {
+  if (!(!n || !n.isEditable))
+    return i.find((t) => a(n, t));
+}
+function U(n) {
+  const {
+    editor: i,
+    levels: t = [1, 2, 3, 4, 5, 6],
+    hideWhenUnavailable: r = !1
+  } = n || {}, { editor: e } = p(i), [c, l] = f(!0), o = H(e, t), d = a(e), u = m(e);
+  return g(() => {
+    if (!e) return;
+    const s = () => {
+      l(
+        b({ editor: e, hideWhenUnavailable: r, level: t })
+      );
+    };
+    return s(), e.on("selectionUpdate", s), () => {
+      e.off("selectionUpdate", s);
+    };
+  }, [e, r, t]), {
+    isVisible: c,
+    activeLevel: o,
+    isActive: d,
+    canToggle: u,
+    levels: t,
+    label: "Heading",
+    Icon: o ? h[o] : v
+  };
+}
+export {
+  H as getActiveHeadingLevel,
+  U as useHeadingDropdownMenu
+};

package/dist/components/tiptap-ui/image-upload-button/image-upload-button.d.ts

@@ -0,0 +1,29 @@
+import { UseImageUploadConfig } from '.';
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type IconProps = React.SVGProps<SVGSVGElement>;
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement;
+export interface ImageUploadButtonProps extends Omit<ButtonProps, "type">, UseImageUploadConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+    /**
+     * Optional custom icon component to render instead of the default.
+     */
+    icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>;
+}
+export declare function ImageShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Button component for uploading/inserting images in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useImage` hook instead.
+ */
+export declare const ImageUploadButton: import('react').ForwardRefExoticComponent<ImageUploadButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/tiptap-ui/image-upload-button/image-upload-button.js

@@ -0,0 +1,72 @@
+import { jsx as t, jsxs as U, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as R, useCallback as A } from "react";
+import { parseShortcutKeys as C } from "../../../lib/tiptap-utils.js";
+import { useTiptapEditor as E } from "../../../hooks/use-tiptap-editor.js";
+import { useImageUpload as K, IMAGE_UPLOAD_SHORTCUT_KEY as N } from "./use-image-upload.js";
+import { Button as S } from "../../tiptap-ui-primitive/button/button.js";
+import { Badge as T } from "../../tiptap-ui-primitive/badge/badge.js";
+function _({
+  shortcutKeys: e = N
+}) {
+  return /* @__PURE__ */ t(T, { children: C({ shortcutKeys: e }) });
+}
+const j = R(
+  ({
+    editor: e,
+    text: o,
+    hideWhenUnavailable: d = !1,
+    onInserted: c,
+    showShortcut: m = !1,
+    onClick: a,
+    icon: p,
+    children: u,
+    ...f
+  }, b) => {
+    const { editor: I } = E(e), {
+      isVisible: h,
+      canInsert: r,
+      handleImage: n,
+      label: i,
+      isActive: s,
+      shortcutKeys: g,
+      Icon: y
+    } = K({
+      editor: I,
+      hideWhenUnavailable: d,
+      onInserted: c
+    }), B = A(
+      (l) => {
+        a?.(l), !l.defaultPrevented && n();
+      },
+      [n, a]
+    );
+    return h ? /* @__PURE__ */ t(
+      S,
+      {
+        type: "button",
+        "data-style": "ghost",
+        "data-active-state": s ? "on" : "off",
+        role: "button",
+        tabIndex: -1,
+        disabled: !r,
+        "data-disabled": !r,
+        "aria-label": i,
+        "aria-pressed": s,
+        tooltip: i,
+        onClick: B,
+        ...f,
+        ref: b,
+        children: u ?? /* @__PURE__ */ U(x, { children: [
+          /* @__PURE__ */ t(p ?? y, { className: "tiptap-button-icon" }),
+          o && /* @__PURE__ */ t("span", { className: "tiptap-button-text", children: o }),
+          m && /* @__PURE__ */ t(_, { shortcutKeys: g })
+        ] })
+      }
+    ) : null;
+  }
+);
+j.displayName = "ImageUploadButton";
+export {
+  _ as ImageShortcutBadge,
+  j as ImageUploadButton
+};

package/dist/components/tiptap-ui/image-upload-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './image-upload-button';
+export * from './use-image-upload';

package/dist/components/tiptap-ui/image-upload-button/index.js

@@ -0,0 +1,12 @@
+import { ImageShortcutBadge as t, ImageUploadButton as a } from "./image-upload-button.js";
+import { IMAGE_UPLOAD_SHORTCUT_KEY as I, canInsertImage as g, insertImage as r, isImageActive as n, shouldShowButton as s, useImageUpload as u } from "./use-image-upload.js";
+export {
+  I as IMAGE_UPLOAD_SHORTCUT_KEY,
+  t as ImageShortcutBadge,
+  a as ImageUploadButton,
+  g as canInsertImage,
+  r as insertImage,
+  n as isImageActive,
+  s as shouldShowButton,
+  u as useImageUpload
+};

package/dist/components/tiptap-ui/image-upload-button/use-image-upload.d.ts

@@ -0,0 +1,84 @@
+import { Editor } from '@tiptap/react';
+export declare const IMAGE_UPLOAD_SHORTCUT_KEY = "mod+shift+i";
+/**
+ * Configuration for the image upload functionality
+ */
+export interface UseImageUploadConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when insertion is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful image insertion.
+     */
+    onInserted?: () => void;
+}
+/**
+ * Checks if image can be inserted in the current editor state
+ */
+export declare function canInsertImage(editor: Editor | null): boolean;
+/**
+ * Checks if image is currently active
+ */
+export declare function isImageActive(editor: Editor | null): boolean;
+/**
+ * Inserts an image in the editor
+ */
+export declare function insertImage(editor: Editor | null): boolean;
+/**
+ * Determines if the image button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides image functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleImageButton() {
+ *   const { isVisible, handleImage } = useImage()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleImage}>Add Image</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedImageButton() {
+ *   const { isVisible, handleImage, label, isActive } = useImage({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onInserted: () => console.log('Image inserted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleImage}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Add Image
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useImageUpload(config?: UseImageUploadConfig): {
+    isVisible: boolean;
+    isActive: boolean;
+    handleImage: () => boolean;
+    canInsert: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};