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

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

@@ -0,0 +1,76 @@
+import { useState as b, useEffect as I, useCallback as g } from "react";
+import { f as U } from "../../../index-Bqw9S4qP.js";
+import "@tiptap/react";
+import { useTiptapEditor as h } from "../../../hooks/use-tiptap-editor.js";
+import { useIsMobile as E } from "../../../hooks/use-mobile.js";
+import { isExtensionAvailable as c } from "../../../lib/tiptap-utils.js";
+import { ImagePlusIcon as v } from "../../tiptap-icons/image-plus-icon.js";
+const u = "mod+shift+i";
+function a(e) {
+  return !e || !e.isEditable || !c(e, "imageUpload") ? !1 : e.can().insertContent({ type: "imageUpload" });
+}
+function A(e) {
+  return !e || !e.isEditable ? !1 : e.isActive("imageUpload");
+}
+function C(e) {
+  if (!e || !e.isEditable || !a(e)) return !1;
+  try {
+    return e.chain().focus().insertContent({
+      type: "imageUpload"
+    }).run();
+  } catch {
+    return !1;
+  }
+}
+function y(e) {
+  const { editor: i, hideWhenUnavailable: s } = e;
+  return !i || !i.isEditable || !c(i, "imageUpload") ? !1 : s && !i.isActive("code") ? a(i) : !0;
+}
+function K(e) {
+  const {
+    editor: i,
+    hideWhenUnavailable: s = !1,
+    onInserted: r
+  } = e || {}, { editor: t } = h(i), m = E(), [o, d] = b(!0), l = a(t), p = A(t);
+  I(() => {
+    if (!t) return;
+    const n = () => {
+      d(y({ editor: t, hideWhenUnavailable: s }));
+    };
+    return n(), t.on("selectionUpdate", n), () => {
+      t.off("selectionUpdate", n);
+    };
+  }, [t, s]);
+  const f = g(() => {
+    if (!t) return !1;
+    const n = C(t);
+    return n && r?.(), n;
+  }, [t, r]);
+  return U(
+    u,
+    (n) => {
+      n.preventDefault(), f();
+    },
+    {
+      enabled: o && l,
+      enableOnContentEditable: !m,
+      enableOnFormTags: !0
+    }
+  ), {
+    isVisible: o,
+    isActive: p,
+    handleImage: f,
+    canInsert: l,
+    label: "Add image",
+    shortcutKeys: u,
+    Icon: v
+  };
+}
+export {
+  u as IMAGE_UPLOAD_SHORTCUT_KEY,
+  a as canInsertImage,
+  C as insertImage,
+  A as isImageActive,
+  y as shouldShowButton,
+  K as useImageUpload
+};

package/dist/components/tiptap-ui/insert-table-button/insert-table-button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+type InsertTableButtonProps = Omit<ButtonProps, "type">;
+export declare const InsertTableButton: import('react').ForwardRefExoticComponent<InsertTableButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/tiptap-ui/insert-table-button/insert-table-button.js

@@ -0,0 +1,41 @@
+import { jsx as n } from "react/jsx-runtime";
+import { TableIcon as p } from "../../tiptap-icons/table-icon.js";
+import { useTiptapEditor as f } from "../../../hooks/use-tiptap-editor.js";
+import { forwardRef as d, useState as c, useEffect as m } from "react";
+import { getTableNodeAndPos as b } from "../table-actions-toolbar/get-table-node-and-pos.js";
+import { Button as u } from "../../tiptap-ui-primitive/button/button.js";
+const h = d(({ ...e }, r) => {
+  const { editor: t } = f(), [a, o] = c(!1);
+  return m(() => {
+    if (!t) return;
+    const s = () => {
+      const i = t.isActive("table"), l = b(t);
+      o(!!(i && l));
+    };
+    return t.on("selectionUpdate", s), () => {
+      t.off("selectionUpdate", s);
+    };
+  }, [t]), /* @__PURE__ */ n(
+    u,
+    {
+      type: "button",
+      "data-style": "ghost",
+      role: "button",
+      tabIndex: -1,
+      disabled: a,
+      tooltip: "Insert Table",
+      ...e,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        ...e.style
+      },
+      ref: r,
+      children: /* @__PURE__ */ n(p, { className: "tiptap-button-icon" })
+    }
+  );
+});
+export {
+  h as InsertTableButton
+};

package/dist/components/tiptap-ui/link-popover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './link-popover';
+export * from './use-link-popover';

package/dist/components/tiptap-ui/link-popover/index.js

@@ -0,0 +1,13 @@
+import { LinkButton as e, LinkContent as t, LinkPopover as i } from "./link-popover.js";
+import { canSetLink as L, isLinkActive as r, shouldShowLinkButton as u, useLinkHandler as s, useLinkPopover as p, useLinkState as a } from "./use-link-popover.js";
+export {
+  e as LinkButton,
+  t as LinkContent,
+  i as LinkPopover,
+  L as canSetLink,
+  r as isLinkActive,
+  u as shouldShowLinkButton,
+  s as useLinkHandler,
+  p as useLinkPopover,
+  a as useLinkState
+};

package/dist/components/tiptap-ui/link-popover/link-popover.d.ts

@@ -0,0 +1,57 @@
+import { Editor } from '@tiptap/react';
+import { UseLinkPopoverConfig } from '.';
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+export interface LinkMainProps {
+    /**
+     * The URL to set for the link.
+     */
+    url: string;
+    /**
+     * Function to update the URL state.
+     */
+    setUrl: React.Dispatch<React.SetStateAction<string | null>>;
+    /**
+     * Function to set the link in the editor.
+     */
+    setLink: () => void;
+    /**
+     * Function to remove the link from the editor.
+     */
+    removeLink: () => void;
+    /**
+     * Function to open the link.
+     */
+    openLink: () => void;
+    /**
+     * Whether the link is currently active in the editor.
+     */
+    isActive: boolean;
+}
+export interface LinkPopoverProps extends Omit<ButtonProps, "type">, UseLinkPopoverConfig {
+    /**
+     * Callback for when the popover opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether to automatically open the popover when a link is active.
+     * @default true
+     */
+    autoOpenOnLinkActive?: boolean;
+}
+/**
+ * Link button component for triggering the link popover
+ */
+export declare const LinkButton: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Link content component for standalone use
+ */
+export declare const LinkContent: React.FC<{
+    editor?: Editor | null;
+}>;
+/**
+ * Link popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useLinkPopover` hook instead.
+ */
+export declare const LinkPopover: import('react').ForwardRefExoticComponent<LinkPopoverProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default LinkPopover;

package/dist/components/tiptap-ui/link-popover/link-popover.js

@@ -0,0 +1,193 @@
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as L, useState as T, useCallback as h, useEffect as j } from "react";
+import { useIsMobile as K } from "../../../hooks/use-mobile.js";
+import { useTiptapEditor as O } from "../../../hooks/use-tiptap-editor.js";
+import { CornerDownLeftIcon as R } from "../../tiptap-icons/corner-down-left-icon.js";
+import { ExternalLinkIcon as F } from "../../tiptap-icons/external-link-icon.js";
+import { LinkIcon as U } from "../../tiptap-icons/link-icon.js";
+import { TrashIcon as V } from "../../tiptap-icons/trash-icon.js";
+import { useLinkPopover as g } from "./use-link-popover.js";
+import { InputGroup as q, Input as H } from "../../tiptap-ui-primitive/input/input.js";
+import { Button as u, ButtonGroup as C } from "../../tiptap-ui-primitive/button/button.js";
+import { Popover as J, PopoverTrigger as Q, PopoverContent as W } from "../../tiptap-ui-primitive/popover/popover.js";
+import { Card as X, CardBody as Y, CardItemGroup as Z } from "../../tiptap-ui-primitive/card/card.js";
+import { Separator as _ } from "../../tiptap-ui-primitive/separator/separator.js";
+const v = L(
+  ({ className: o, children: e, ...n }, r) => /* @__PURE__ */ t(
+    u,
+    {
+      type: "button",
+      className: o,
+      "data-style": "ghost",
+      role: "button",
+      tabIndex: -1,
+      "aria-label": "Link",
+      tooltip: "Link",
+      ref: r,
+      ...n,
+      children: e || /* @__PURE__ */ t(U, { className: "tiptap-button-icon" })
+    }
+  )
+);
+v.displayName = "LinkButton";
+const I = ({
+  url: o,
+  setUrl: e,
+  setLink: n,
+  removeLink: r,
+  openLink: p,
+  isActive: i
+}) => {
+  const d = K(), m = (a) => {
+    a.key === "Enter" && (a.preventDefault(), n());
+  };
+  return /* @__PURE__ */ t(
+    X,
+    {
+      style: {
+        ...d ? { boxShadow: "none", border: 0 } : {}
+      },
+      children: /* @__PURE__ */ t(
+        Y,
+        {
+          style: {
+            ...d ? { padding: 0 } : {}
+          },
+          children: /* @__PURE__ */ b(Z, { orientation: "horizontal", children: [
+            /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(
+              H,
+              {
+                type: "url",
+                placeholder: "Paste a link...",
+                value: o,
+                onChange: (a) => e(a.target.value),
+                onKeyDown: m,
+                autoFocus: !0,
+                autoComplete: "off",
+                autoCorrect: "off",
+                autoCapitalize: "off"
+              }
+            ) }),
+            /* @__PURE__ */ t(C, { orientation: "horizontal", children: /* @__PURE__ */ t(
+              u,
+              {
+                type: "button",
+                onClick: n,
+                title: "Apply link",
+                disabled: !o && !i,
+                "data-style": "ghost",
+                children: /* @__PURE__ */ t(R, { className: "tiptap-button-icon" })
+              }
+            ) }),
+            /* @__PURE__ */ t(_, {}),
+            /* @__PURE__ */ b(C, { orientation: "horizontal", children: [
+              /* @__PURE__ */ t(
+                u,
+                {
+                  type: "button",
+                  onClick: p,
+                  title: "Open in new window",
+                  disabled: !o && !i,
+                  "data-style": "ghost",
+                  children: /* @__PURE__ */ t(F, { className: "tiptap-button-icon" })
+                }
+              ),
+              /* @__PURE__ */ t(
+                u,
+                {
+                  type: "button",
+                  onClick: r,
+                  title: "Remove link",
+                  disabled: !o && !i,
+                  "data-style": "ghost",
+                  children: /* @__PURE__ */ t(V, { className: "tiptap-button-icon" })
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}, mt = ({ editor: o }) => {
+  const e = g({
+    editor: o
+  });
+  return /* @__PURE__ */ t(I, { ...e });
+}, $ = L(
+  ({
+    editor: o,
+    hideWhenUnavailable: e = !1,
+    onSetLink: n,
+    onOpenChange: r,
+    autoOpenOnLinkActive: p = !0,
+    onClick: i,
+    children: d,
+    ...m
+  }, a) => {
+    const { editor: P } = O(o), [f, c] = T(!1), {
+      isVisible: w,
+      canSet: k,
+      isActive: l,
+      url: N,
+      setUrl: x,
+      setLink: y,
+      removeLink: B,
+      openLink: S,
+      label: z,
+      Icon: D
+    } = g({
+      editor: P,
+      hideWhenUnavailable: e,
+      onSetLink: n
+    }), E = h(
+      (s) => {
+        c(s), r?.(s);
+      },
+      [r]
+    ), G = h(() => {
+      y(), c(!1);
+    }, [y]), M = h(
+      (s) => {
+        i?.(s), !s.defaultPrevented && c(!f);
+      },
+      [i, f]
+    );
+    return j(() => {
+      p && l && c(!0);
+    }, [p, l]), w ? /* @__PURE__ */ b(J, { open: f, onOpenChange: E, children: [
+      /* @__PURE__ */ t(Q, { asChild: !0, children: /* @__PURE__ */ t(
+        v,
+        {
+          disabled: !k,
+          "data-active-state": l ? "on" : "off",
+          "data-disabled": !k,
+          "aria-label": z,
+          "aria-pressed": l,
+          onClick: M,
+          ...m,
+          ref: a,
+          children: d ?? /* @__PURE__ */ t(D, { className: "tiptap-button-icon" })
+        }
+      ) }),
+      /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(
+        I,
+        {
+          url: N,
+          setUrl: x,
+          setLink: G,
+          removeLink: B,
+          openLink: S,
+          isActive: l
+        }
+      ) })
+    ] }) : null;
+  }
+);
+$.displayName = "LinkPopover";
+export {
+  v as LinkButton,
+  mt as LinkContent,
+  $ as LinkPopover,
+  $ as default
+};

package/dist/components/tiptap-ui/link-popover/use-link-popover.d.ts

@@ -0,0 +1,117 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Configuration for the link popover functionality
+ */
+export interface UseLinkPopoverConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether to hide the link popover when not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called when the link is set.
+     */
+    onSetLink?: () => void;
+}
+/**
+ * Configuration for the link handler functionality
+ */
+export interface LinkHandlerProps {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor: Editor | null;
+    /**
+     * Callback function called when the link is set.
+     */
+    onSetLink?: () => void;
+}
+/**
+ * Checks if a link can be set in the current editor state
+ */
+export declare function canSetLink(editor: Editor | null): boolean;
+/**
+ * Checks if a link is currently active in the editor
+ */
+export declare function isLinkActive(editor: Editor | null): boolean;
+/**
+ * Determines if the link button should be shown
+ */
+export declare function shouldShowLinkButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook for handling link operations in a Tiptap editor
+ */
+export declare function useLinkHandler(props: LinkHandlerProps): {
+    url: string;
+    setUrl: import('react').Dispatch<import('react').SetStateAction<string | null>>;
+    setLink: () => void;
+    removeLink: () => void;
+    openLink: (target?: string, features?: string) => void;
+};
+/**
+ * Custom hook for link popover state management
+ */
+export declare function useLinkState(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): {
+    isVisible: boolean;
+    canSet: boolean;
+    isActive: boolean;
+};
+/**
+ * Main hook that provides link popover functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button disabled={!canSet}>Link</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onSetLink: () => console.log('Link set!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       disabled={!canSet}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       {label}
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useLinkPopover(config?: UseLinkPopoverConfig): {
+    url: string;
+    setUrl: import('react').Dispatch<import('react').SetStateAction<string | null>>;
+    setLink: () => void;
+    removeLink: () => void;
+    openLink: (target?: string, features?: string) => void;
+    isVisible: boolean;
+    canSet: boolean;
+    isActive: boolean;
+    label: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};

package/dist/components/tiptap-ui/link-popover/use-link-popover.js

@@ -0,0 +1,103 @@
+import { useState as d, useEffect as k, useCallback as f } from "react";
+import { useTiptapEditor as L } from "../../../hooks/use-tiptap-editor.js";
+import { LinkIcon as m } from "../../tiptap-icons/link-icon.js";
+import { sanitizeUrl as S, isNodeTypeSelected as b, isMarkInSchema as v } from "../../../lib/tiptap-utils.js";
+function p(n) {
+  return !n || !n.isEditable || b(n, ["image"], !0) ? !1 : n.can().setMark("link");
+}
+function h(n) {
+  return !n || !n.isEditable ? !1 : n.isActive("link");
+}
+function U(n) {
+  const { editor: e, hideWhenUnavailable: o } = n;
+  return !v("link", e) || !e ? !1 : o && !e.isActive("code") ? p(e) : !0;
+}
+function A(n) {
+  const { editor: e, onSetLink: o } = n, [t, i] = d(null);
+  k(() => {
+    if (!e) return;
+    const { href: r } = e.getAttributes("link");
+    h(e) && t === null && i(r || "");
+  }, [e, t]), k(() => {
+    if (!e) return;
+    const r = () => {
+      const { href: u } = e.getAttributes("link");
+      i(u || "");
+    };
+    return e.on("selectionUpdate", r), () => {
+      e.off("selectionUpdate", r);
+    };
+  }, [e]);
+  const l = f(() => {
+    if (!t || !e) return;
+    const { selection: r } = e.state, u = r.empty;
+    let s = e.chain().focus();
+    s = s.extendMarkRange("link").setLink({ href: t }), u && (s = s.insertContent({ type: "text", text: t })), s.run(), i(null), o?.();
+  }, [e, o, t]), a = f(() => {
+    e && (e.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", !0).run(), i(""));
+  }, [e]), c = f(
+    (r = "_blank", u = "noopener,noreferrer") => {
+      if (!t) return;
+      const s = S(t, window.location.href);
+      s !== "#" && window.open(s, r, u);
+    },
+    [t]
+  );
+  return {
+    url: t || "",
+    setUrl: i,
+    setLink: l,
+    removeLink: a,
+    openLink: c
+  };
+}
+function E(n) {
+  const { editor: e, hideWhenUnavailable: o = !1 } = n, t = p(e), i = h(e), [l, a] = d(!1);
+  return k(() => {
+    if (!e) return;
+    const c = () => {
+      a(
+        U({
+          editor: e,
+          hideWhenUnavailable: o
+        })
+      );
+    };
+    return c(), e.on("selectionUpdate", c), () => {
+      e.off("selectionUpdate", c);
+    };
+  }, [e, o]), {
+    isVisible: l,
+    canSet: t,
+    isActive: i
+  };
+}
+function M(n) {
+  const {
+    editor: e,
+    hideWhenUnavailable: o = !1,
+    onSetLink: t
+  } = n || {}, { editor: i } = L(e), { isVisible: l, canSet: a, isActive: c } = E({
+    editor: i,
+    hideWhenUnavailable: o
+  }), r = A({
+    editor: i,
+    onSetLink: t
+  });
+  return {
+    isVisible: l,
+    canSet: a,
+    isActive: c,
+    label: "Link",
+    Icon: m,
+    ...r
+  };
+}
+export {
+  p as canSetLink,
+  h as isLinkActive,
+  U as shouldShowLinkButton,
+  A as useLinkHandler,
+  M as useLinkPopover,
+  E as useLinkState
+};

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

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

package/dist/components/tiptap-ui/list-button/index.js

@@ -0,0 +1,14 @@
+import { ListButton as o, ListShortcutBadge as i } from "./list-button.js";
+import { LIST_SHORTCUT_KEYS as L, canToggleList as l, isListActive as g, listIcons as r, listLabels as u, shouldShowButton as S, toggleList as c, useList as n } from "./use-list.js";
+export {
+  L as LIST_SHORTCUT_KEYS,
+  o as ListButton,
+  i as ListShortcutBadge,
+  l as canToggleList,
+  g as isListActive,
+  r as listIcons,
+  u as listLabels,
+  S as shouldShowButton,
+  c as toggleList,
+  n as useList
+};

package/dist/components/tiptap-ui/list-button/list-button.d.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+import { ListType, UseListConfig } from '.';
+export interface ListButtonProps extends Omit<ButtonProps, "type">, UseListConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function ListShortcutBadge({ type, shortcutKeys, }: {
+    type: ListType;
+    shortcutKeys?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Button component for toggling lists in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useList` hook instead.
+ */
+export declare const ListButton: import('react').ForwardRefExoticComponent<ListButtonProps & import('react').RefAttributes<HTMLButtonElement>>;