cvnert-editor 0.1.0

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

@@ -0,0 +1,104 @@
+import type { Editor } from "@tiptap/react";
+export type Mark = "bold" | "italic" | "strike" | "code" | "underline" | "superscript" | "subscript";
+/**
+ * Configuration for the mark functionality
+ */
+export interface UseMarkConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The type of mark to toggle
+     */
+    type: Mark;
+    /**
+     * Whether the button should hide when mark is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful mark toggle.
+     */
+    onToggled?: () => void;
+}
+export declare const markIcons: {
+    bold: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    italic: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    underline: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    strike: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    code: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    superscript: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    subscript: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};
+export declare const MARK_SHORTCUT_KEYS: Record<Mark, string>;
+/**
+ * Checks if a mark can be toggled in the current editor state
+ */
+export declare function canToggleMark(editor: Editor | null, type: Mark): boolean;
+/**
+ * Checks if a mark is currently active
+ */
+export declare function isMarkActive(editor: Editor | null, type: Mark): boolean;
+/**
+ * Toggles a mark in the editor
+ */
+export declare function toggleMark(editor: Editor | null, type: Mark): boolean;
+/**
+ * Determines if the mark button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    type: Mark;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Gets the formatted mark name
+ */
+export declare function getFormattedMarkName(type: Mark): string;
+/**
+ * Custom hook that provides mark functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleBoldButton() {
+ *   const { isVisible, handleMark } = useMark({ type: "bold" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMark}>Bold</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedItalicButton() {
+ *   const { isVisible, handleMark, label, isActive } = useMark({
+ *     editor: myEditor,
+ *     type: "italic",
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Mark toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleMark}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Italic
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useMark(config: UseMarkConfig): {
+    isVisible: boolean;
+    isActive: boolean;
+    handleMark: () => boolean;
+    canToggle: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

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

@@ -0,0 +1 @@
+export * from "./mention-dropdown-menu";

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

@@ -0,0 +1,4 @@
+import type { SuggestionMenuProps } from "@/components/tiptap-ui-utils/suggestion-menu";
+type MentionDropdownMenuProps = Omit<SuggestionMenuProps, "items" | "children">;
+export declare const MentionDropdownMenu: (props: MentionDropdownMenuProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./mention-trigger-button";
+export * from "./use-mention-trigger";

package/dist/components/tiptap-ui/mention-trigger-button/mention-trigger-button.d.ts

@@ -0,0 +1,22 @@
+import type { UseMentionTriggerConfig } from "@/components/tiptap-ui/mention-trigger-button";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+export interface MentionTriggerButtonProps extends Omit<ButtonProps, "type">, UseMentionTriggerConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function MentionShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for inserting mention triggers in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useMention` hook instead.
+ */
+export declare const MentionTriggerButton: import("react").ForwardRefExoticComponent<MentionTriggerButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,96 @@
+import { type Editor } from "@tiptap/react";
+import type { Node } from "@tiptap/pm/model";
+export declare const MENTION_TRIGGER_SHORTCUT_KEY = "mod+shift+2";
+/**
+ * Configuration for the mention functionality
+ */
+export interface UseMentionTriggerConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The node to apply trigger to
+     */
+    node?: Node | null;
+    /**
+     * The position of the node in the document
+     */
+    nodePos?: number | null;
+    /**
+     * The trigger text to insert
+     * @default "@"
+     */
+    trigger?: string;
+    /**
+     * Whether the button should hide when insertion is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful trigger insertion.
+     */
+    onTriggered?: (trigger: string) => void;
+}
+/**
+ * Checks if a mention can be inserted in the current editor state
+ */
+export declare function canInsertMention(editor: Editor | null, node?: Node | null, nodePos?: number | null): boolean;
+/**
+ * Adds a mention trigger at the current selection or specified node position
+ */
+export declare function addMentionTrigger(editor: Editor | null, trigger?: string, node?: Node | null, nodePos?: number | null): boolean;
+/**
+ * Determines if the mention button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+    node?: Node | null;
+    nodePos?: number | null;
+}): boolean;
+/**
+ * Custom hook that provides mention functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleMentionButton() {
+ *   const { isVisible, handleMention } = useMentionTrigger()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMention}>Add Mention</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedMentionButton() {
+ *   const { isVisible, handleMention, label } = useMentionTrigger({
+ *     editor: myEditor,
+ *     trigger: "@",
+ *     hideWhenUnavailable: true,
+ *     onTriggered: (trigger) => console.log('Inserted:', trigger)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleMention}
+ *       aria-label={label}
+ *     >
+ *       Add Mention
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useMentionTrigger(config?: UseMentionTriggerConfig): {
+    isVisible: boolean;
+    handleMention: () => boolean;
+    canInsert: boolean;
+    label: string;
+    shortcutKeys: string;
+    trigger: string;
+    Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

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

@@ -0,0 +1,2 @@
+export * from "./move-node-button";
+export * from "./use-move-node";

package/dist/components/tiptap-ui/move-node-button/move-node-button.d.ts

@@ -0,0 +1,20 @@
+import type { UseMoveNodeConfig } from "@/components/tiptap-ui/move-node-button";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+export interface MoveNodeButtonProps extends Omit<ButtonProps, "type">, UseMoveNodeConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function MoveNodeShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for moving a node up or down in a Tiptap editor.
+ */
+export declare const MoveNodeButton: import("react").ForwardRefExoticComponent<MoveNodeButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,52 @@
+import { type Editor } from "@tiptap/react";
+export declare const MOVE_UP_SHORTCUT_KEY = "mod+shift+ArrowUp";
+export declare const MOVE_DOWN_SHORTCUT_KEY = "mod+shift+ArrowDown";
+/**
+ * Configuration for the move node functionality
+ */
+export interface UseMoveNodeConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when moving is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * The direction to move the node.
+     */
+    direction: "up" | "down";
+    /**
+     * Callback function called after a successful move.
+     */
+    onMoved?: (direction: "up" | "down") => void;
+}
+/**
+ * Checks if a node can be moved in the specified direction
+ */
+export declare function canMoveNode(editor: Editor | null, direction: "up" | "down"): boolean;
+/**
+ * Moves a node in the editor
+ */
+export declare function moveNode(editor: Editor | null, direction: "up" | "down"): boolean;
+/**
+ * Determines if the move button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    direction: "up" | "down";
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides move node functionality for Tiptap editor
+ */
+export declare function useMoveNode(config: UseMoveNodeConfig): {
+    isVisible: boolean;
+    handleMoveNode: () => boolean;
+    canMoveNode: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

package/dist/components/tiptap-ui/reset-all-formatting-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./reset-all-formatting-button";
+export * from "./use-reset-all-formatting";

package/dist/components/tiptap-ui/reset-all-formatting-button/reset-all-formatting-button.d.ts

@@ -0,0 +1,24 @@
+import type { UseResetAllFormattingConfig } from "@/components/tiptap-ui/reset-all-formatting-button";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+export interface ResetAllFormattingButtonProps extends Omit<ButtonProps, "type">, UseResetAllFormattingConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function ResetAllFormattingShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for resetting formatting in a Tiptap editor.
+ * Removes all marks from the current selection (optionally preserving some
+ * via `preserveMarks`).
+ *
+ * For custom button implementations, use the `useResetAllFormatting` hook instead.
+ */
+export declare const ResetAllFormattingButton: import("react").ForwardRefExoticComponent<ResetAllFormattingButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/tiptap-ui/reset-all-formatting-button/use-reset-all-formatting.d.ts

@@ -0,0 +1,106 @@
+import { type Editor } from "@tiptap/react";
+import type { Transaction } from "@tiptap/pm/state";
+export declare const RESET_ALL_FORMATTING_SHORTCUT_KEY = "mod+r";
+/**
+ * Marks preserved by default so a formatting reset never destroys comment
+ * thread anchors (`inlineThread`). Defined at module scope so the hook's
+ * default keeps a stable identity and doesn't re-fire its `selectionUpdate`
+ * effect every render.
+ */
+export declare const DEFAULT_RESET_PRESERVE_MARKS: string[];
+/**
+ * Configuration for the reset formatting functionality
+ */
+export interface UseResetAllFormattingConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when resetting is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Marks to preserve when resetting formatting.
+     * @default ["inlineThread"]
+     */
+    preserveMarks?: string[];
+    /**
+     * Callback function called after formatting is successfully reset.
+     */
+    onResetAllFormatting?: () => void;
+}
+/**
+ * Removes all marks from the transaction except those specified in the skip array
+ * @param tr The Tiptap transaction to modify
+ * @param skip Array of mark names to skip when removing marks
+ * @returns The modified transaction with specified marks removed
+ */
+export declare function removeAllMarksExcept(tr: Transaction, skip?: string[]): Transaction;
+/**
+ * Checks whether the current selection has marks that can be reset (removed)
+ * @param tr The Tiptap transaction to check
+ * @param skip Array of mark names to skip when checking for removable marks
+ * @returns True if there are marks that can be removed, false otherwise
+ */
+export declare function canResetMarks(tr: Transaction, skip?: string[]): boolean;
+/**
+ * Checks if formatting can be reset for a node
+ */
+export declare function canResetFormatting(editor: Editor | null, preserveMarks?: string[]): boolean;
+/**
+ * Resets formatting for a node or selection
+ */
+export declare function resetFormatting(editor: Editor | null, preserveMarks?: string[]): boolean;
+/**
+ * Determines if the reset formatting button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+    preserveMarks?: string[];
+}): boolean;
+/**
+ * Custom hook that provides reset formatting functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleResetButton() {
+ *   const { isVisible, handleResetFormatting } = useResetAllFormatting()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleResetFormatting}>Reset</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedResetButton() {
+ *   const { isVisible, handleResetFormatting, label } = useResetAllFormatting({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onResetAllFormatting: () => console.log('Formatting reset!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleResetFormatting}
+ *       aria-label={label}
+ *     >
+ *       Reset Formatting
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useResetAllFormatting(config?: UseResetAllFormattingConfig): {
+    isVisible: boolean;
+    handleResetFormatting: () => boolean;
+    canReset: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

package/dist/components/tiptap-ui/slash-command-trigger-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./slash-command-trigger-button";
+export * from "./use-slash-command-trigger";

package/dist/components/tiptap-ui/slash-command-trigger-button/slash-command-trigger-button.d.ts

@@ -0,0 +1,22 @@
+import type { UseSlashCommandTriggerConfig } from "@/components/tiptap-ui/slash-command-trigger-button";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+export interface SlashCommandTriggerButtonProps extends Omit<ButtonProps, "type">, UseSlashCommandTriggerConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function SlashCommandShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for inserting slash commands in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useSlashCommand` hook instead.
+ */
+export declare const SlashCommandTriggerButton: import("react").ForwardRefExoticComponent<SlashCommandTriggerButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/tiptap-ui/slash-command-trigger-button/use-slash-command-trigger.d.ts

@@ -0,0 +1,96 @@
+import { type Editor } from "@tiptap/react";
+import type { Node } from "@tiptap/pm/model";
+export declare const SLASH_COMMAND_TRIGGER_SHORTCUT_KEY = "mod+/";
+/**
+ * Configuration for the slash command functionality
+ */
+export interface UseSlashCommandTriggerConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The node to apply trigger to
+     */
+    node?: Node | null;
+    /**
+     * The position of the node in the document
+     */
+    nodePos?: number | null;
+    /**
+     * The trigger text to insert
+     * @default "/"
+     */
+    trigger?: string;
+    /**
+     * Whether the button should hide when insertion is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful trigger insertion.
+     */
+    onTriggered?: (trigger: string) => void;
+}
+/**
+ * Checks if a slash command can be inserted in the current editor state
+ */
+export declare function canInsertSlashCommand(editor: Editor | null, node?: Node | null, nodePos?: number | null): boolean;
+/**
+ * Inserts a slash command at a specified node position or after the current selection
+ */
+export declare function insertSlashCommand(editor: Editor | null, trigger?: string, node?: Node | null, nodePos?: number | null): boolean;
+/**
+ * Determines if the slash command button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+    node?: Node | null;
+    nodePos?: number | null;
+}): boolean;
+/**
+ * Custom hook that provides slash command functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleSlashButton() {
+ *   const { isVisible, handleSlashCommand } = useSlashCommandTrigger()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleSlashCommand}>Insert Block</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedSlashButton() {
+ *   const { isVisible, handleSlashCommand, label } = useSlashCommandTrigger({
+ *     editor: myEditor,
+ *     trigger: "/",
+ *     hideWhenUnavailable: true,
+ *     onTriggered: (trigger) => console.log('Inserted:', trigger)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleSlashCommand}
+ *       aria-label={label}
+ *     >
+ *       Insert Block
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useSlashCommandTrigger(config?: UseSlashCommandTriggerConfig): {
+    isVisible: boolean;
+    handleSlashCommand: () => boolean;
+    canInsert: boolean;
+    label: string;
+    shortcutKeys: string;
+    trigger: string;
+    Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

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

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

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

@@ -0,0 +1,8 @@
+import type { SuggestionMenuProps } from "@/components/tiptap-ui-utils/suggestion-menu";
+import type { SlashMenuConfig } from "@/components/tiptap-ui/slash-dropdown-menu/use-slash-dropdown-menu";
+import "@/components/tiptap-ui/slash-dropdown-menu/slash-dropdown-menu.css";
+type SlashDropdownMenuProps = Omit<SuggestionMenuProps, "items" | "children"> & {
+    config?: SlashMenuConfig;
+};
+export declare const SlashDropdownMenu: (props: SlashDropdownMenuProps) => import("react").JSX.Element;
+export {};