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

package/dist/components/tiptap-templates/simple/theme-toggle.d.ts

@@ -0,0 +1 @@
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/components/tiptap-templates/simple/theme-toggle.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { MoonStarIcon as c } from "../../tiptap-icons/moon-star-icon.js";
+import { SunIcon as s } from "../../tiptap-icons/sun-icon.js";
+import { useState as m, useEffect as a } from "react";
+import { Button as i } from "../../tiptap-ui-primitive/button/button.js";
+function f() {
+  const [t, o] = m(!1);
+  return a(() => {
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), n = () => o(e.matches);
+    return e.addEventListener("change", n), () => e.removeEventListener("change", n);
+  }, []), a(() => {
+    const e = !!document.querySelector('meta[name="color-scheme"][content="dark"]') || window.matchMedia("(prefers-color-scheme: dark)").matches;
+    o(e);
+  }, []), a(() => {
+    document.documentElement.classList.toggle("dark", t);
+  }, [t]), /* @__PURE__ */ r(
+    i,
+    {
+      onClick: () => o((e) => !e),
+      "aria-label": `Switch to ${t ? "light" : "dark"} mode`,
+      "data-style": "ghost",
+      children: t ? /* @__PURE__ */ r(c, { className: "tiptap-button-icon" }) : /* @__PURE__ */ r(s, { className: "tiptap-button-icon" })
+    }
+  );
+}
+export {
+  f as ThemeToggle
+};

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { BlockquoteButton as e, BlockquoteShortcutBadge as u } from "./blockquote-button.js";
+import { BLOCKQUOTE_SHORTCUT_KEY as l, canToggleBlockquote as c, shouldShowButton as g, toggleBlockquote as k, useBlockquote as q } from "./use-blockquote.js";
+export {
+  l as BLOCKQUOTE_SHORTCUT_KEY,
+  e as BlockquoteButton,
+  u as BlockquoteShortcutBadge,
+  c as canToggleBlockquote,
+  g as shouldShowButton,
+  k as toggleBlockquote,
+  q as useBlockquote
+};

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

@@ -0,0 +1,80 @@
+import { Editor } from '@tiptap/react';
+export declare const BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
+/**
+ * Configuration for the blockquote functionality
+ */
+export interface UseBlockquoteConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when blockquote is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful toggle.
+     */
+    onToggled?: () => void;
+}
+/**
+ * Checks if blockquote can be toggled in the current editor state
+ */
+export declare function canToggleBlockquote(editor: Editor | null, turnInto?: boolean): boolean;
+/**
+ * Toggles blockquote formatting for a specific node or the current selection
+ */
+export declare function toggleBlockquote(editor: Editor | null): boolean;
+/**
+ * Determines if the blockquote button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides blockquote functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleBlockquoteButton() {
+ *   const { isVisible, handleToggle, isActive } = useBlockquote()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Blockquote</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedBlockquoteButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useBlockquote({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Blockquote toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Blockquote
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useBlockquote(config?: UseBlockquoteConfig): {
+    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>;
+};

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

@@ -0,0 +1,82 @@
+import { useState as k, useEffect as m, useCallback as q } from "react";
+import { TextSelection as d, NodeSelection as h } from "prosemirror-state";
+import { useTiptapEditor as v } from "../../../hooks/use-tiptap-editor.js";
+import { BlockquoteIcon as T } from "../../tiptap-icons/blockquote-icon.js";
+import { isNodeInSchema as b, isNodeTypeSelected as S, selectionWithinConvertibleTypes as C, findNodePosition as E, isValidPosition as B } from "../../../lib/tiptap-utils.js";
+const U = "mod+shift+b";
+function u(e, n = !0) {
+  return !e || !e.isEditable || !b("blockquote", e) || S(e, ["image"]) ? !1 : n ? C(e, [
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "blockquote",
+    "codeBlock"
+  ]) ? e.can().toggleWrap("blockquote") || e.can().clearNodes() : !1 : e.can().toggleWrap("blockquote");
+}
+function N(e) {
+  if (!e || !e.isEditable || !u(e)) return !1;
+  try {
+    const n = e.view;
+    let o = n.state, i = o.tr;
+    if (o.selection.empty || o.selection instanceof d) {
+      const c = E({
+        editor: e,
+        node: o.selection.$anchor.node(1)
+      })?.pos;
+      if (!B(c)) return !1;
+      i = i.setSelection(h.create(o.doc, c)), n.dispatch(i), o = n.state;
+    }
+    const t = o.selection;
+    let l = e.chain().focus();
+    if (t instanceof h) {
+      const c = t.node.firstChild?.firstChild, r = t.node.lastChild?.lastChild, a = c ? t.from + c.nodeSize : t.from + 1, s = r ? t.to - r.nodeSize : t.to - 1, p = o.doc.resolve(a), g = o.doc.resolve(s);
+      l = l.setTextSelection(d.between(p, g)).clearNodes();
+    }
+    return (e.isActive("blockquote") ? l.lift("blockquote") : l.wrapIn("blockquote")).run(), e.chain().focus().selectTextblockEnd().run(), !0;
+  } catch {
+    return !1;
+  }
+}
+function w(e) {
+  const { editor: n, hideWhenUnavailable: o } = e;
+  return !n || !n.isEditable || !b("blockquote", n) ? !1 : o && !n.isActive("code") ? u(n) : !0;
+}
+function L(e) {
+  const {
+    editor: n,
+    hideWhenUnavailable: o = !1,
+    onToggled: i
+  } = e || {}, { editor: t } = v(n), [l, f] = k(!0), c = u(t), r = t?.isActive("blockquote") || !1;
+  m(() => {
+    if (!t) return;
+    const s = () => {
+      f(w({ editor: t, hideWhenUnavailable: o }));
+    };
+    return s(), t.on("selectionUpdate", s), () => {
+      t.off("selectionUpdate", s);
+    };
+  }, [t, o]);
+  const a = q(() => {
+    if (!t) return !1;
+    const s = N(t);
+    return s && i?.(), s;
+  }, [t, i]);
+  return {
+    isVisible: l,
+    isActive: r,
+    handleToggle: a,
+    canToggle: c,
+    label: "Blockquote",
+    shortcutKeys: U,
+    Icon: T
+  };
+}
+export {
+  U as BLOCKQUOTE_SHORTCUT_KEY,
+  u as canToggleBlockquote,
+  w as shouldShowButton,
+  N as toggleBlockquote,
+  L as useBlockquote
+};

package/dist/components/tiptap-ui/code-block-button/code-block-button.d.ts

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

package/dist/components/tiptap-ui/code-block-button/code-block-button.js

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

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

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

package/dist/components/tiptap-ui/code-block-button/index.js

@@ -0,0 +1,11 @@
+import { CodeBlockButton as t, CodeBlockShortcutBadge as B } from "./code-block-button.js";
+import { CODE_BLOCK_SHORTCUT_KEY as C, canToggle as c, shouldShowButton as d, toggleCodeBlock as g, useCodeBlock as r } from "./use-code-block.js";
+export {
+  C as CODE_BLOCK_SHORTCUT_KEY,
+  t as CodeBlockButton,
+  B as CodeBlockShortcutBadge,
+  c as canToggle,
+  d as shouldShowButton,
+  g as toggleCodeBlock,
+  r as useCodeBlock
+};

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

@@ -0,0 +1,87 @@
+import { Editor } from '@tiptap/react';
+export declare const CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
+/**
+ * Configuration for the code block functionality
+ */
+export interface UseCodeBlockConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when code block is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful code block toggle.
+     */
+    onToggled?: () => void;
+}
+/**
+ * Checks if code block can be toggled in the current editor state
+ */
+export declare function canToggle(editor: Editor | null, turnInto?: boolean): boolean;
+/**
+ * Toggles code block in the editor
+ */
+export declare function toggleCodeBlock(editor: Editor | null): boolean;
+/**
+ * Determines if the code block button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides code block functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle } = useCodeBlock()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleToggle}
+ *       aria-pressed={isActive}
+ *     >
+ *       Code Block
+ *     </button>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle, label } = useCodeBlock({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: (isActive) => console.log('Code block toggled:', isActive)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Code Block
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useCodeBlock(config?: UseCodeBlockConfig): {
+    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>;
+};

package/dist/components/tiptap-ui/code-block-button/use-code-block.js

@@ -0,0 +1,83 @@
+import { useState as k, useEffect as C, useCallback as b } from "react";
+import "@tiptap/react";
+import { TextSelection as u, NodeSelection as g } from "prosemirror-state";
+import { useTiptapEditor as v } from "../../../hooks/use-tiptap-editor.js";
+import { isNodeInSchema as h, isNodeTypeSelected as B, selectionWithinConvertibleTypes as T, findNodePosition as S, isValidPosition as N } from "../../../lib/tiptap-utils.js";
+import { CodeBlockIcon as E } from "../../tiptap-icons/code-block-icon.js";
+const U = "mod+alt+c";
+function d(e, n = !0) {
+  return !e || !e.isEditable || !h("codeBlock", e) || B(e, ["image"]) ? !1 : n ? T(e, [
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "blockquote",
+    "codeBlock"
+  ]) ? e.can().toggleNode("codeBlock", "paragraph") || e.can().clearNodes() : !1 : e.can().toggleNode("codeBlock", "paragraph");
+}
+function y(e) {
+  if (!e || !e.isEditable || !d(e)) return !1;
+  try {
+    const n = e.view;
+    let t = n.state, l = t.tr;
+    if (t.selection.empty || t.selection instanceof u) {
+      const c = S({
+        editor: e,
+        node: t.selection.$anchor.node(1)
+      })?.pos;
+      if (!N(c)) return !1;
+      l = l.setSelection(g.create(t.doc, c)), n.dispatch(l), t = n.state;
+    }
+    const o = t.selection;
+    let i = e.chain().focus();
+    if (o instanceof g) {
+      const c = o.node.firstChild?.firstChild, r = o.node.lastChild?.lastChild, a = c ? o.from + c.nodeSize : o.from + 1, s = r ? o.to - r.nodeSize : o.to - 1, p = t.doc.resolve(a), m = t.doc.resolve(s);
+      i = i.setTextSelection(u.between(p, m)).clearNodes();
+    }
+    return (e.isActive("codeBlock") ? i.setNode("paragraph") : i.toggleNode("codeBlock", "paragraph")).run(), e.chain().focus().selectTextblockEnd().run(), !0;
+  } catch {
+    return !1;
+  }
+}
+function w(e) {
+  const { editor: n, hideWhenUnavailable: t } = e;
+  return !n || !n.isEditable || !h("codeBlock", n) ? !1 : t && !n.isActive("code") ? d(n) : !0;
+}
+function V(e) {
+  const {
+    editor: n,
+    hideWhenUnavailable: t = !1,
+    onToggled: l
+  } = e || {}, { editor: o } = v(n), [i, f] = k(!0), c = d(o), r = o?.isActive("codeBlock") || !1;
+  C(() => {
+    if (!o) return;
+    const s = () => {
+      f(w({ editor: o, hideWhenUnavailable: t }));
+    };
+    return s(), o.on("selectionUpdate", s), () => {
+      o.off("selectionUpdate", s);
+    };
+  }, [o, t]);
+  const a = b(() => {
+    if (!o) return !1;
+    const s = y(o);
+    return s && l?.(), s;
+  }, [o, l]);
+  return {
+    isVisible: i,
+    isActive: r,
+    handleToggle: a,
+    canToggle: c,
+    label: "Code Block",
+    shortcutKeys: U,
+    Icon: E
+  };
+}
+export {
+  U as CODE_BLOCK_SHORTCUT_KEY,
+  d as canToggle,
+  w as shouldShowButton,
+  y as toggleCodeBlock,
+  V as useCodeBlock
+};

package/dist/components/tiptap-ui/color-highlight-button/color-highlight-button.d.ts

@@ -0,0 +1,45 @@
+import { UseColorHighlightConfig } from '.';
+import { ButtonProps } from '../../tiptap-ui-primitive/button';
+export interface ColorHighlightButtonProps extends Omit<ButtonProps, "type">, UseColorHighlightConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function ColorHighlightShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Button component for applying color highlights in a Tiptap editor.
+ *
+ * Supports two highlighting modes:
+ * - "mark": Uses the highlight mark extension (default)
+ * - "node": Uses the node background extension
+ *
+ * For custom button implementations, use the `useColorHighlight` hook instead.
+ *
+ * @example
+ * ```tsx
+ * // Mark-based highlighting (default)
+ * <ColorHighlightButton highlightColor="yellow" />
+ *
+ * // Node-based background coloring
+ * <ColorHighlightButton
+ *   highlightColor="var(--tt-color-highlight-blue)"
+ *   mode="node"
+ * />
+ *
+ * // With custom callback
+ * <ColorHighlightButton
+ *   highlightColor="red"
+ *   mode="mark"
+ *   onApplied={({ color, mode }) => console.log(`Applied ${color} in ${mode} mode`)}
+ * />
+ * ```
+ */
+export declare const ColorHighlightButton: import('react').ForwardRefExoticComponent<ColorHighlightButtonProps & import('react').RefAttributes<HTMLButtonElement>>;