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

package/dist/hooks/use-composed-ref.d.ts

@@ -0,0 +1,3 @@
+type UserRef<T> = ((instance: T | null) => void) | React.RefObject<T | null> | null | undefined;
+export declare const useComposedRef: <T extends HTMLElement>(libRef: React.RefObject<T | null>, userRef: UserRef<T>) => (instance: T | null) => void;
+export default useComposedRef;

package/dist/hooks/use-composed-ref.js

@@ -0,0 +1,16 @@
+import { useRef as u, useCallback as e } from "react";
+const o = (t, n) => {
+  typeof t == "function" ? t(n) : t && typeof t == "object" && "current" in t && (t.current = n);
+}, s = (t, n) => {
+  const r = u(null);
+  return e(
+    (c) => {
+      t && "current" in t && (t.current = c), r.current && o(r.current, null), r.current = n, n && o(n, c);
+    },
+    [t, n]
+  );
+};
+export {
+  s as default,
+  s as useComposedRef
+};

package/dist/hooks/use-cursor-visibility.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from '@tiptap/react';
+export interface CursorVisibilityOptions {
+    /**
+     * The Tiptap editor instance
+     */
+    editor?: Editor | null;
+    /**
+     * Reference to the toolbar element that may obscure the cursor
+     */
+    overlayHeight?: number;
+}
+/**
+ * Custom hook that ensures the cursor remains visible when typing in a Tiptap editor.
+ * Automatically scrolls the window when the cursor would be hidden by the toolbar.
+ *
+ * @param options.editor The Tiptap editor instance
+ * @param options.overlayHeight Toolbar height to account for
+ * @returns The bounding rect of the body
+ */
+export declare function useCursorVisibility({ editor, overlayHeight, }: CursorVisibilityOptions): import('./use-element-rect').RectState;

package/dist/hooks/use-cursor-visibility.js

@@ -0,0 +1,31 @@
+import { useWindowSize as f } from "./use-window-size.js";
+import { useBodyRect as h } from "./use-element-rect.js";
+import { useEffect as b } from "react";
+function S({
+  editor: t,
+  overlayHeight: s = 0
+}) {
+  const { height: o } = f(), r = h({
+    enabled: !0,
+    throttleMs: 100,
+    useResizeObserver: !0
+  });
+  return b(() => {
+    (() => {
+      if (!t) return;
+      const { state: c, view: i } = t;
+      if (!i.hasFocus()) return;
+      const { from: n } = c.selection, e = i.coordsAtPos(n);
+      if (o < r.height && e && o - e.top < s) {
+        const u = Math.max(o / 2, s), l = window.scrollY, a = e.top + l - u;
+        window.scrollTo({
+          top: Math.max(0, a),
+          behavior: "smooth"
+        });
+      }
+    })();
+  }, [t, s, o, r.height]), r;
+}
+export {
+  S as useCursorVisibility
+};

package/dist/hooks/use-element-rect.d.ts

@@ -0,0 +1,35 @@
+export type RectState = Omit<DOMRect, "toJSON">;
+export interface ElementRectOptions {
+    /**
+     * The element to track. Can be an Element, ref, or selector string.
+     * Defaults to document.body if not provided.
+     */
+    element?: Element | React.RefObject<Element> | string | null;
+    /**
+     * Whether to enable rect tracking
+     */
+    enabled?: boolean;
+    /**
+     * Throttle delay in milliseconds for rect updates
+     */
+    throttleMs?: number;
+    /**
+     * Whether to use ResizeObserver for more accurate tracking
+     */
+    useResizeObserver?: boolean;
+}
+/**
+ * Custom hook that tracks an element's bounding rectangle and updates on resize, scroll, etc.
+ *
+ * @param options Configuration options for element rect tracking
+ * @returns The current bounding rectangle of the element
+ */
+export declare function useElementRect({ element, enabled, throttleMs, useResizeObserver, }?: ElementRectOptions): RectState;
+/**
+ * Convenience hook for tracking document.body rect
+ */
+export declare function useBodyRect(options?: Omit<ElementRectOptions, "element">): RectState;
+/**
+ * Convenience hook for tracking a ref element's rect
+ */
+export declare function useRefRect<T extends Element>(ref: React.RefObject<T>, options?: Omit<ElementRectOptions, "element">): RectState;

package/dist/hooks/use-element-rect.js

@@ -0,0 +1,79 @@
+import { useState as g, useCallback as m, useEffect as v } from "react";
+import { useThrottledCallback as R } from "./use-throttled-callback.js";
+const d = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+}, a = typeof window > "u", y = !a && typeof ResizeObserver < "u", f = () => !a;
+function h({
+  element: e,
+  enabled: r = !0,
+  throttleMs: w = 100,
+  useResizeObserver: l = !0
+} = {}) {
+  const [p, i] = g(d), o = m(() => !r || !f() ? null : e ? typeof e == "string" ? document.querySelector(e) : "current" in e ? e.current : e : document.body, [e, r]), s = R(
+    () => {
+      if (!r || !f()) return;
+      const n = o();
+      if (!n) {
+        i(d);
+        return;
+      }
+      const t = n.getBoundingClientRect();
+      i({
+        x: t.x,
+        y: t.y,
+        width: t.width,
+        height: t.height,
+        top: t.top,
+        right: t.right,
+        bottom: t.bottom,
+        left: t.left
+      });
+    },
+    w,
+    [r, o],
+    { leading: !0, trailing: !0 }
+  );
+  return v(() => {
+    if (!r || !f()) {
+      i(d);
+      return;
+    }
+    const n = o();
+    if (!n) return;
+    s();
+    const t = [];
+    if (l && y) {
+      const c = new ResizeObserver(() => {
+        window.requestAnimationFrame(s);
+      });
+      c.observe(n), t.push(() => c.disconnect());
+    }
+    const u = () => s();
+    return window.addEventListener("scroll", u, { passive: !0 }), window.addEventListener("resize", u, { passive: !0 }), t.push(() => {
+      window.removeEventListener("scroll", u), window.removeEventListener("resize", u);
+    }), () => {
+      t.forEach((c) => c()), i(d);
+    };
+  }, [r, o, s, l]), p;
+}
+function z(e = {}) {
+  return h({
+    ...e,
+    element: f() ? document.body : null
+  });
+}
+function S(e, r = {}) {
+  return h({ ...r, element: e });
+}
+export {
+  z as useBodyRect,
+  h as useElementRect,
+  S as useRefRect
+};

package/dist/hooks/use-menu-navigation.d.ts

@@ -0,0 +1,52 @@
+import { Editor } from '@tiptap/react';
+type Orientation = "horizontal" | "vertical" | "both";
+interface MenuNavigationOptions<T> {
+    /**
+     * The Tiptap editor instance, if using with a Tiptap editor.
+     */
+    editor?: Editor | null;
+    /**
+     * Reference to the container element for handling keyboard events.
+     */
+    containerRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * Search query that affects the selected item.
+     */
+    query?: string;
+    /**
+     * Array of items to navigate through.
+     */
+    items: T[];
+    /**
+     * Callback fired when an item is selected.
+     */
+    onSelect?: (item: T) => void;
+    /**
+     * Callback fired when the menu should close.
+     */
+    onClose?: () => void;
+    /**
+     * The navigation orientation of the menu.
+     * @default "vertical"
+     */
+    orientation?: Orientation;
+    /**
+     * Whether to automatically select the first item when the menu opens.
+     * @default true
+     */
+    autoSelectFirstItem?: boolean;
+}
+/**
+ * Hook that implements keyboard navigation for dropdown menus and command palettes.
+ *
+ * Handles arrow keys, tab, home/end, enter for selection, and escape to close.
+ * Works with both Tiptap editors and regular DOM elements.
+ *
+ * @param options - Configuration options for the menu navigation
+ * @returns Object containing the selected index and a setter function
+ */
+export declare function useMenuNavigation<T>({ editor, containerRef, query, items, onSelect, onClose, orientation, autoSelectFirstItem, }: MenuNavigationOptions<T>): {
+    selectedIndex: number | undefined;
+    setSelectedIndex: import('react').Dispatch<import('react').SetStateAction<number>>;
+};
+export {};

package/dist/hooks/use-menu-navigation.js

@@ -0,0 +1,68 @@
+import { useState as D, useEffect as v } from "react";
+function E({
+  editor: a,
+  containerRef: s,
+  query: d,
+  items: r,
+  onSelect: h,
+  onClose: g,
+  orientation: u = "vertical",
+  autoSelectFirstItem: c = !0
+}) {
+  const [n, t] = D(
+    c ? 0 : -1
+  );
+  return v(() => {
+    const i = (e) => {
+      if (!r.length) return !1;
+      const o = () => t((l) => l === -1 ? 0 : (l + 1) % r.length), p = () => t((l) => l === -1 ? r.length - 1 : (l - 1 + r.length) % r.length);
+      switch (e.key) {
+        case "ArrowUp":
+          return u === "horizontal" ? !1 : (e.preventDefault(), p(), !0);
+        case "ArrowDown":
+          return u === "horizontal" ? !1 : (e.preventDefault(), o(), !0);
+        case "ArrowLeft":
+          return u === "vertical" ? !1 : (e.preventDefault(), p(), !0);
+        case "ArrowRight":
+          return u === "vertical" ? !1 : (e.preventDefault(), o(), !0);
+        case "Tab":
+          return e.preventDefault(), e.shiftKey ? p() : o(), !0;
+        case "Home":
+          return e.preventDefault(), t(0), !0;
+        case "End":
+          return e.preventDefault(), t(r.length - 1), !0;
+        case "Enter":
+          return e.isComposing ? !1 : (e.preventDefault(), n !== -1 && r[n] && h?.(r[n]), !0);
+        case "Escape":
+          return e.preventDefault(), g?.(), !0;
+        default:
+          return !1;
+      }
+    };
+    let f = null;
+    if (a ? f = a.view.dom : s?.current && (f = s.current), f)
+      return f.addEventListener("keydown", i, !0), () => {
+        f?.removeEventListener(
+          "keydown",
+          i,
+          !0
+        );
+      };
+  }, [
+    a,
+    s,
+    r,
+    n,
+    h,
+    g,
+    u
+  ]), v(() => {
+    d && t(c ? 0 : -1);
+  }, [d, c]), {
+    selectedIndex: r.length ? n : void 0,
+    setSelectedIndex: t
+  };
+}
+export {
+  E as useMenuNavigation
+};

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(breakpoint?: number): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,13 @@
+import { useState as s, useEffect as d } from "react";
+function c(e = 768) {
+  const [o, n] = s(void 0);
+  return d(() => {
+    const t = window.matchMedia(`(max-width: ${e - 1}px)`), i = () => {
+      n(window.innerWidth < e);
+    };
+    return t.addEventListener("change", i), n(window.innerWidth < e), () => t.removeEventListener("change", i);
+  }, [e]), !!o;
+}
+export {
+  c as useIsMobile
+};

package/dist/hooks/use-scrolling.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+type ScrollTarget = RefObject<HTMLElement> | Window | null | undefined;
+interface UseScrollingOptions {
+    debounce?: number;
+    fallbackToDocument?: boolean;
+}
+export declare function useScrolling(target?: ScrollTarget, options?: UseScrollingOptions): boolean;
+export {};

package/dist/hooks/use-scrolling.js

@@ -0,0 +1,17 @@
+import { useState as v, useEffect as E } from "react";
+function b(e, S = {}) {
+  const { debounce: u = 150, fallbackToDocument: f = !0 } = S, [o, t] = v(!1);
+  return E(() => {
+    const l = e && typeof Window < "u" && e instanceof Window ? e : e?.current ?? window, n = f && l === window && typeof document < "u" ? document : l, m = (i, r, d) => i.addEventListener(r, d, { passive: !0 }), a = (i, r, d) => i.removeEventListener(r, d);
+    let c;
+    const s = l === window && "onscrollend" in window, w = () => {
+      o || t(!0), s || (clearTimeout(c), c = setTimeout(() => t(!1), u));
+    }, p = () => t(!1);
+    return m(n, "scroll", w), s && m(n, "scrollend", p), () => {
+      a(n, "scroll", w), s && a(n, "scrollend", p), clearTimeout(c);
+    };
+  }, [e, u, f, o]), o;
+}
+export {
+  b as useScrolling
+};

package/dist/hooks/use-throttled-callback.d.ts

@@ -0,0 +1,18 @@
+interface ThrottleSettings {
+    leading?: boolean | undefined;
+    trailing?: boolean | undefined;
+}
+/**
+ * A hook that returns a throttled callback function.
+ *
+ * @param fn The function to throttle
+ * @param wait The time in ms to wait before calling the function
+ * @param dependencies The dependencies to watch for changes
+ * @param options The throttle options
+ */
+export declare function useThrottledCallback<T extends (...args: any[]) => any>(fn: T, wait?: number, dependencies?: React.DependencyList, options?: ThrottleSettings): {
+    (this: ThisParameterType<T>, ...args: Parameters<T>): ReturnType<T>;
+    cancel: () => void;
+    flush: () => void;
+};
+export default useThrottledCallback;

package/dist/hooks/use-throttled-callback.js

@@ -0,0 +1,116 @@
+import { useMemo as V } from "react";
+import { useUnmount as Y } from "./use-unmount.js";
+var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Z(o) {
+  return o && o.__esModule && Object.prototype.hasOwnProperty.call(o, "default") ? o.default : o;
+}
+var S, W;
+function ee() {
+  if (W) return S;
+  W = 1;
+  var o = "Expected a function", g = NaN, j = "[object Symbol]", v = /^\s+|\s+$/g, b = /^[-+]0x[0-9a-f]+$/i, F = /^0b[01]+$/i, N = /^0o[0-7]+$/i, R = parseInt, $ = typeof T == "object" && T && T.Object === Object && T, w = typeof self == "object" && self && self.Object === Object && self, A = $ || w || Function("return this")(), B = Object.prototype, P = B.toString, q = Math.max, D = Math.min, O = function() {
+    return A.Date.now();
+  };
+  function G(e, n, r) {
+    var a, f, h, c, i, l, s = 0, _ = !1, d = !1, I = !0;
+    if (typeof e != "function")
+      throw new TypeError(o);
+    n = k(n) || 0, y(r) && (_ = !!r.leading, d = "maxWait" in r, h = d ? q(k(r.maxWait) || 0, n) : h, I = "trailing" in r ? !!r.trailing : I);
+    function x(t) {
+      var u = a, m = f;
+      return a = f = void 0, s = t, c = e.apply(m, u), c;
+    }
+    function z(t) {
+      return s = t, i = setTimeout(p, n), _ ? x(t) : c;
+    }
+    function J(t) {
+      var u = t - l, m = t - s, M = n - u;
+      return d ? D(M, h - m) : M;
+    }
+    function L(t) {
+      var u = t - l, m = t - s;
+      return l === void 0 || u >= n || u < 0 || d && m >= h;
+    }
+    function p() {
+      var t = O();
+      if (L(t))
+        return C(t);
+      i = setTimeout(p, J(t));
+    }
+    function C(t) {
+      return i = void 0, I && a ? x(t) : (a = f = void 0, c);
+    }
+    function K() {
+      i !== void 0 && clearTimeout(i), s = 0, a = l = f = i = void 0;
+    }
+    function Q() {
+      return i === void 0 ? c : C(O());
+    }
+    function E() {
+      var t = O(), u = L(t);
+      if (a = arguments, f = this, l = t, u) {
+        if (i === void 0)
+          return z(l);
+        if (d)
+          return i = setTimeout(p, n), x(l);
+      }
+      return i === void 0 && (i = setTimeout(p, n)), c;
+    }
+    return E.cancel = K, E.flush = Q, E;
+  }
+  function U(e, n, r) {
+    var a = !0, f = !0;
+    if (typeof e != "function")
+      throw new TypeError(o);
+    return y(r) && (a = "leading" in r ? !!r.leading : a, f = "trailing" in r ? !!r.trailing : f), G(e, n, {
+      leading: a,
+      maxWait: n,
+      trailing: f
+    });
+  }
+  function y(e) {
+    var n = typeof e;
+    return !!e && (n == "object" || n == "function");
+  }
+  function H(e) {
+    return !!e && typeof e == "object";
+  }
+  function X(e) {
+    return typeof e == "symbol" || H(e) && P.call(e) == j;
+  }
+  function k(e) {
+    if (typeof e == "number")
+      return e;
+    if (X(e))
+      return g;
+    if (y(e)) {
+      var n = typeof e.valueOf == "function" ? e.valueOf() : e;
+      e = y(n) ? n + "" : n;
+    }
+    if (typeof e != "string")
+      return e === 0 ? e : +e;
+    e = e.replace(v, "");
+    var r = F.test(e);
+    return r || N.test(e) ? R(e.slice(2), r ? 2 : 8) : b.test(e) ? g : +e;
+  }
+  return S = U, S;
+}
+var te = ee();
+const ne = /* @__PURE__ */ Z(te), re = {
+  leading: !1,
+  trailing: !0
+};
+function ae(o, g = 250, j = [], v = re) {
+  const b = V(
+    () => ne(o, g, v),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    j
+  );
+  return Y(() => {
+    b.cancel();
+  }), b;
+}
+export {
+  ae as default,
+  ae as useThrottledCallback
+};

package/dist/hooks/use-tiptap-editor.d.ts

@@ -0,0 +1,17 @@
+import { Editor } from '@tiptap/react';
+/**
+ * Hook that provides access to a Tiptap editor instance.
+ *
+ * Accepts an optional editor instance directly, or falls back to retrieving
+ * the editor from the Tiptap context if available. This allows components
+ * to work both when given an editor directly and when used within a Tiptap
+ * editor context.
+ *
+ * @param providedEditor - Optional editor instance to use instead of the context editor
+ * @returns The provided editor or the editor from context, whichever is available
+ */
+export declare function useTiptapEditor(providedEditor?: Editor | null): {
+    editor: Editor | null;
+    editorState?: Editor["state"];
+    canCommand?: Editor["can"];
+};

package/dist/hooks/use-tiptap-editor.js

@@ -0,0 +1,25 @@
+import { useCurrentEditor as i, useEditorState as d } from "@tiptap/react";
+import { useMemo as n } from "react";
+function s(r) {
+  const { editor: o } = i(), e = n(
+    () => r || o,
+    [r, o]
+  );
+  return d({
+    editor: e,
+    selector(t) {
+      return t.editor ? {
+        editor: t.editor,
+        editorState: t.editor.state,
+        canCommand: t.editor.can
+      } : {
+        editor: null,
+        editorState: void 0,
+        canCommand: void 0
+      };
+    }
+  }) || { editor: null };
+}
+export {
+  s as useTiptapEditor
+};

package/dist/hooks/use-unmount.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook that executes a callback when the component unmounts.
+ *
+ * @param callback Function to be called on component unmount
+ */
+export declare const useUnmount: (callback: (...args: Array<any>) => any) => void;
+export default useUnmount;

package/dist/hooks/use-unmount.js

@@ -0,0 +1,14 @@
+import { useRef as r, useEffect as u } from "react";
+const n = (e) => {
+  const t = r(e);
+  t.current = e, u(
+    () => () => {
+      t.current();
+    },
+    []
+  );
+};
+export {
+  n as default,
+  n as useUnmount
+};

package/dist/hooks/use-window-size.d.ts

@@ -0,0 +1,35 @@
+export interface WindowSizeState {
+    /**
+     * The width of the window's visual viewport in pixels.
+     */
+    width: number;
+    /**
+     * The height of the window's visual viewport in pixels.
+     */
+    height: number;
+    /**
+     * The distance from the top of the visual viewport to the top of the layout viewport.
+     * Particularly useful for handling mobile keyboard appearance.
+     */
+    offsetTop: number;
+    /**
+     * The distance from the left of the visual viewport to the left of the layout viewport.
+     */
+    offsetLeft: number;
+    /**
+     * The scale factor of the visual viewport.
+     * This is useful for scaling elements based on the current zoom level.
+     */
+    scale: number;
+}
+/**
+ * Hook that tracks the window's visual viewport dimensions, position, and provides
+ * a CSS transform for positioning elements.
+ *
+ * Uses the Visual Viewport API to get accurate measurements, especially important
+ * for mobile devices where virtual keyboards can change the visible area.
+ * Only updates state when values actually change to optimize performance.
+ *
+ * @returns An object containing viewport properties and a CSS transform string
+ */
+export declare function useWindowSize(): WindowSizeState;

package/dist/hooks/use-window-size.js

@@ -0,0 +1,33 @@
+import { useState as d, useEffect as h } from "react";
+import { useThrottledCallback as c } from "./use-throttled-callback.js";
+function p() {
+  const [w, u] = d({
+    width: 0,
+    height: 0,
+    offsetTop: 0,
+    offsetLeft: 0,
+    scale: 0
+  }), i = c(() => {
+    if (typeof window > "u") return;
+    const e = window.visualViewport;
+    if (!e) return;
+    const {
+      width: o = 0,
+      height: n = 0,
+      offsetTop: f = 0,
+      offsetLeft: s = 0,
+      scale: r = 0
+    } = e;
+    u((t) => o === t.width && n === t.height && f === t.offsetTop && s === t.offsetLeft && r === t.scale ? t : { width: o, height: n, offsetTop: f, offsetLeft: s, scale: r });
+  }, 200);
+  return h(() => {
+    const e = window.visualViewport;
+    if (e)
+      return e.addEventListener("resize", i), i(), () => {
+        e.removeEventListener("resize", i);
+      };
+  }, [i]), w;
+}
+export {
+  p as useWindowSize
+};