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

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

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

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

@@ -0,0 +1,97 @@
+import { Editor } from '@tiptap/react';
+export type ListType = "bulletList" | "orderedList" | "taskList";
+/**
+ * Configuration for the list functionality
+ */
+export interface UseListConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The type of list to toggle.
+     */
+    type: ListType;
+    /**
+     * Whether the button should hide when list is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful toggle.
+     */
+    onToggled?: () => void;
+}
+export declare const listIcons: {
+    bulletList: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    orderedList: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+    taskList: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};
+export declare const listLabels: Record<ListType, string>;
+export declare const LIST_SHORTCUT_KEYS: Record<ListType, string>;
+/**
+ * Checks if a list can be toggled in the current editor state
+ */
+export declare function canToggleList(editor: Editor | null, type: ListType, turnInto?: boolean): boolean;
+/**
+ * Checks if list is currently active
+ */
+export declare function isListActive(editor: Editor | null, type: ListType): boolean;
+/**
+ * Toggles list in the editor
+ */
+export declare function toggleList(editor: Editor | null, type: ListType): boolean;
+/**
+ * Determines if the list button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    type: ListType;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides list functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleListButton() {
+ *   const { isVisible, handleToggle, isActive } = useList({ type: "bulletList" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Bullet List</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useList({
+ *     type: "orderedList",
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('List toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle List
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useList(config: UseListConfig): {
+    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>;
+};

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

@@ -0,0 +1,149 @@
+import { useState as b, useEffect as p, useCallback as k } from "react";
+import "@tiptap/react";
+import { TextSelection as L, NodeSelection as g } from "prosemirror-state";
+import { useTiptapEditor as v } from "../../../hooks/use-tiptap-editor.js";
+import { ListIcon as T } from "../../tiptap-icons/list-icon.js";
+import { ListOrderedIcon as S } from "../../tiptap-icons/list-ordered-icon.js";
+import { ListTodoIcon as I } from "../../tiptap-icons/list-todo-icon.js";
+import { isNodeInSchema as h, isNodeTypeSelected as C, selectionWithinConvertibleTypes as E, findNodePosition as N, isValidPosition as w } from "../../../lib/tiptap-utils.js";
+const A = {
+  bulletList: T,
+  orderedList: S,
+  taskList: I
+}, B = {
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List"
+}, O = {
+  bulletList: "mod+shift+8",
+  orderedList: "mod+shift+7",
+  taskList: "mod+shift+9"
+};
+function d(t, i, e = !0) {
+  if (!t || !t.isEditable || !h(i, t) || C(t, ["image"]))
+    return !1;
+  if (!e)
+    switch (i) {
+      case "bulletList":
+        return t.can().toggleBulletList();
+      case "orderedList":
+        return t.can().toggleOrderedList();
+      case "taskList":
+        return t.can().toggleList("taskList", "taskItem");
+      default:
+        return !1;
+    }
+  if (!E(t, [
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "blockquote",
+    "codeBlock"
+  ]))
+    return !1;
+  switch (i) {
+    case "bulletList":
+      return t.can().toggleBulletList() || t.can().clearNodes();
+    case "orderedList":
+      return t.can().toggleOrderedList() || t.can().clearNodes();
+    case "taskList":
+      return t.can().toggleList("taskList", "taskItem") || t.can().clearNodes();
+    default:
+      return !1;
+  }
+}
+function U(t, i) {
+  if (!t || !t.isEditable) return !1;
+  switch (i) {
+    case "bulletList":
+      return t.isActive("bulletList");
+    case "orderedList":
+      return t.isActive("orderedList");
+    case "taskList":
+      return t.isActive("taskList");
+    default:
+      return !1;
+  }
+}
+function x(t, i) {
+  if (!t || !t.isEditable || !d(t, i)) return !1;
+  try {
+    const e = t.view;
+    let l = e.state, a = l.tr;
+    if (l.selection.empty || l.selection instanceof L) {
+      const n = N({
+        editor: t,
+        node: l.selection.$anchor.node(1)
+      })?.pos;
+      if (!w(n)) return !1;
+      a = a.setSelection(g.create(l.doc, n)), e.dispatch(a), l = e.state;
+    }
+    const s = l.selection;
+    let o = t.chain().focus();
+    if (s instanceof g) {
+      const n = s.node.firstChild?.firstChild, c = s.node.lastChild?.lastChild, u = n ? s.from + n.nodeSize : s.from + 1, f = c ? s.to - c.nodeSize : s.to - 1, r = l.doc.resolve(u), m = l.doc.resolve(f);
+      o = o.setTextSelection(L.between(r, m)).clearNodes();
+    }
+    if (t.isActive(i))
+      o.liftListItem("listItem").lift("bulletList").lift("orderedList").lift("taskList").run();
+    else {
+      const c = {
+        bulletList: () => o.toggleBulletList(),
+        orderedList: () => o.toggleOrderedList(),
+        taskList: () => o.toggleList("taskList", "taskItem")
+      }[i];
+      if (!c) return !1;
+      c().run();
+    }
+    return t.chain().focus().selectTextblockEnd().run(), !0;
+  } catch {
+    return !1;
+  }
+}
+function y(t) {
+  const { editor: i, type: e, hideWhenUnavailable: l } = t;
+  return !i || !i.isEditable || !h(e, i) ? !1 : l && !i.isActive("code") ? d(i, e) : !0;
+}
+function F(t) {
+  const {
+    editor: i,
+    type: e,
+    hideWhenUnavailable: l = !1,
+    onToggled: a
+  } = t, { editor: s } = v(i), [o, n] = b(!0), c = d(s, e), u = U(s, e);
+  p(() => {
+    if (!s) return;
+    const r = () => {
+      n(y({ editor: s, type: e, hideWhenUnavailable: l }));
+    };
+    return r(), s.on("selectionUpdate", r), () => {
+      s.off("selectionUpdate", r);
+    };
+  }, [s, e, l]);
+  const f = k(() => {
+    if (!s) return !1;
+    const r = x(s, e);
+    return r && a?.(), r;
+  }, [s, e, a]);
+  return {
+    isVisible: o,
+    isActive: u,
+    handleToggle: f,
+    canToggle: c,
+    label: B[e],
+    shortcutKeys: O[e],
+    Icon: A[e]
+  };
+}
+export {
+  O as LIST_SHORTCUT_KEYS,
+  d as canToggleList,
+  U as isListActive,
+  A as listIcons,
+  B as listLabels,
+  y as shouldShowButton,
+  x as toggleList,
+  F as useList
+};

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

@@ -0,0 +1 @@
+export * from './list-dropdown-menu';

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

@@ -0,0 +1,4 @@
+import { ListDropdownMenu as e } from "./list-dropdown-menu.js";
+export {
+  e as ListDropdownMenu
+};

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

@@ -0,0 +1,29 @@
+import { Editor } from '@tiptap/react';
+import { ListType } from '../list-button';
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+export interface ListDropdownMenuProps extends Omit<ButtonProps, "type"> {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor;
+    /**
+     * The list types to display in the dropdown.
+     */
+    types?: ListType[];
+    /**
+     * Whether the dropdown should be hidden when no list types are available
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback for when the dropdown opens or closes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether to render the dropdown menu in a portal
+     * @default false
+     */
+    portal?: boolean;
+}
+export declare function ListDropdownMenu({ editor: providedEditor, types, hideWhenUnavailable, onOpenChange, portal, ...props }: ListDropdownMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default ListDropdownMenu;

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

@@ -0,0 +1,63 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { useState as L, useCallback as C } from "react";
+import "@tiptap/react";
+import { useTiptapEditor as g } from "../../../hooks/use-tiptap-editor.js";
+import { ChevronDownIcon as D } from "../../tiptap-icons/chevron-down-icon.js";
+import { useListDropdownMenu as y } from "./use-list-dropdown-menu.js";
+import { ListButton as M } from "../list-button/list-button.js";
+import { DropdownMenu as x, DropdownMenuTrigger as I, DropdownMenuContent as B, DropdownMenuItem as O } from "../../tiptap-ui-primitive/dropdown-menu/dropdown-menu.js";
+import { Button as T, ButtonGroup as v } from "../../tiptap-ui-primitive/button/button.js";
+import { Card as j, CardBody as k } from "../../tiptap-ui-primitive/card/card.js";
+function J({
+  editor: s,
+  types: a = ["bulletList", "orderedList", "taskList"],
+  hideWhenUnavailable: l = !1,
+  onOpenChange: r,
+  portal: d = !1,
+  ...p
+}) {
+  const { editor: o } = g(s), [u, m] = L(!1), { filteredLists: c, canToggle: i, isActive: f, isVisible: h, Icon: b } = y({
+    editor: o,
+    types: a,
+    hideWhenUnavailable: l
+  }), w = C(
+    (e) => {
+      m(e), r?.(e);
+    },
+    [r]
+  );
+  return !h || !o || !o.isEditable ? null : /* @__PURE__ */ n(x, { open: u, onOpenChange: w, children: [
+    /* @__PURE__ */ t(I, { asChild: !0, children: /* @__PURE__ */ n(
+      T,
+      {
+        type: "button",
+        "data-style": "ghost",
+        "data-active-state": f ? "on" : "off",
+        role: "button",
+        tabIndex: -1,
+        disabled: !i,
+        "data-disabled": !i,
+        "aria-label": "List options",
+        tooltip: "List",
+        ...p,
+        children: [
+          /* @__PURE__ */ t(b, { className: "tiptap-button-icon" }),
+          /* @__PURE__ */ t(D, { className: "tiptap-button-dropdown-small" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(B, { align: "start", portal: d, children: /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(v, { children: c.map((e) => /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ t(
+      M,
+      {
+        editor: o,
+        type: e.type,
+        text: e.label,
+        showTooltip: !1
+      }
+    ) }, e.type)) }) }) }) })
+  ] });
+}
+export {
+  J as ListDropdownMenu,
+  J as default
+};

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

@@ -0,0 +1,90 @@
+import { Editor } from '@tiptap/react';
+import { ListType } from '../list-button';
+/**
+ * Configuration for the list dropdown menu functionality
+ */
+export interface UseListDropdownMenuConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The list types to display in the dropdown.
+     * @default ["bulletList", "orderedList", "taskList"]
+     */
+    types?: ListType[];
+    /**
+     * Whether the dropdown should be hidden when no list types are available
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+}
+export interface ListOption {
+    label: string;
+    type: ListType;
+    icon: React.ElementType;
+}
+export declare const listOptions: ListOption[];
+export declare function canToggleAnyList(editor: Editor | null, listTypes: ListType[]): boolean;
+export declare function isAnyListActive(editor: Editor | null, listTypes: ListType[]): boolean;
+export declare function getFilteredListOptions(availableTypes: ListType[]): typeof listOptions;
+export declare function shouldShowListDropdown(params: {
+    editor: Editor | null;
+    listTypes: ListType[];
+    hideWhenUnavailable: boolean;
+    listInSchema: boolean;
+    canToggleAny: boolean;
+}): boolean;
+/**
+ * Gets the currently active list type from the available types
+ */
+export declare function getActiveListType(editor: Editor | null, availableTypes: ListType[]): ListType | undefined;
+/**
+ * Custom hook that provides list dropdown menu functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *     isAnyActive,
+ *     canToggleAny,
+ *     filteredLists,
+ *   } = useListDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *   } = useListDropdownMenu({
+ *     editor: myEditor,
+ *     types: ["bulletList", "orderedList"],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export declare function useListDropdownMenu(config?: UseListDropdownMenuConfig): {
+    isVisible: boolean;
+    activeType: ListType | undefined;
+    isActive: boolean;
+    canToggle: boolean;
+    types: ListType[];
+    filteredLists: ListOption[];
+    label: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element>;
+};

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

@@ -0,0 +1,84 @@
+import { useState as y, useMemo as b, useEffect as g } from "react";
+import { useTiptapEditor as v } from "../../../hooks/use-tiptap-editor.js";
+import { ListIcon as u } from "../../tiptap-icons/list-icon.js";
+import { ListOrderedIcon as A } from "../../tiptap-icons/list-ordered-icon.js";
+import { ListTodoIcon as h } from "../../tiptap-icons/list-todo-icon.js";
+import { isNodeInSchema as T } from "../../../lib/tiptap-utils.js";
+import { canToggleList as I, isListActive as d, listIcons as E } from "../list-button/use-list.js";
+const S = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: u
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: A
+  },
+  {
+    label: "Task List",
+    type: "taskList",
+    icon: h
+  }
+];
+function U(t, i) {
+  return !t || !t.isEditable ? !1 : i.some((e) => I(t, e));
+}
+function O(t, i) {
+  return !t || !t.isEditable ? !1 : i.some((e) => d(t, e));
+}
+function k(t) {
+  return S.filter(
+    (i) => !i.type || t.includes(i.type)
+  );
+}
+function w(t) {
+  const { editor: i, hideWhenUnavailable: e, listInSchema: o, canToggleAny: s } = t;
+  return !o || !i ? !1 : e && !i.isActive("code") ? s : !0;
+}
+function D(t, i) {
+  if (!(!t || !t.isEditable))
+    return i.find((e) => d(t, e));
+}
+function j(t) {
+  const {
+    editor: i,
+    types: e = ["bulletList", "orderedList", "taskList"],
+    hideWhenUnavailable: o = !1
+  } = t || {}, { editor: s } = v(i), [p, L] = y(!1), c = e.some((n) => T(n, s)), l = b(() => k(e), [e]), r = U(s, e), m = O(s, e), a = D(s, e), f = l.find((n) => n.type === a);
+  return g(() => {
+    if (!s) return;
+    const n = () => {
+      L(
+        w({
+          editor: s,
+          hideWhenUnavailable: o,
+          listInSchema: c,
+          canToggleAny: r
+        })
+      );
+    };
+    return n(), s.on("selectionUpdate", n), () => {
+      s.off("selectionUpdate", n);
+    };
+  }, [r, s, o, c, e]), {
+    isVisible: p,
+    activeType: a,
+    isActive: m,
+    canToggle: r,
+    types: e,
+    filteredLists: l,
+    label: "List",
+    Icon: f ? E[f.type] : u
+  };
+}
+export {
+  U as canToggleAnyList,
+  D as getActiveListType,
+  k as getFilteredListOptions,
+  O as isAnyListActive,
+  S as listOptions,
+  w as shouldShowListDropdown,
+  j as useListDropdownMenu
+};

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

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

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

@@ -0,0 +1,14 @@
+import { MarkButton as t, MarkShortcutBadge as a } from "./mark-button.js";
+import { MARK_SHORTCUT_KEYS as k, canToggleMark as M, getFormattedMarkName as g, isMarkActive as m, markIcons as u, shouldShowButton as c, toggleMark as n, useMark as s } from "./use-mark.js";
+export {
+  k as MARK_SHORTCUT_KEYS,
+  t as MarkButton,
+  a as MarkShortcutBadge,
+  M as canToggleMark,
+  g as getFormattedMarkName,
+  m as isMarkActive,
+  u as markIcons,
+  c as shouldShowButton,
+  n as toggleMark,
+  s as useMark
+};

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

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