cvnert-editor 0.1.0

package/dist/components/tiptap-ui/color-text-popover/color-text-popover.d.ts

@@ -0,0 +1,46 @@
+import type { Editor } from "@tiptap/react";
+import type { ColorType, ColorItem, ColorValueResolver, RecentColor, UseColorTextPopoverConfig } from "@/components/tiptap-ui/color-text-popover";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+import { Button } from "@/components/tiptap-ui-primitive/button";
+import "@/components/tiptap-ui/color-text-popover/color-text-popover.css";
+type ColorChangePayload = {
+    type: ColorType;
+    label: string;
+    value: string;
+};
+export interface RecentColorButtonProps extends ButtonProps {
+    colorObj: RecentColor;
+    withLabel?: boolean;
+    onColorChanged?: (payload: ColorChangePayload) => void;
+    editor?: Editor | null;
+    resolveColorValue?: ColorValueResolver;
+}
+export declare function RecentColorButton({ colorObj, withLabel, onColorChanged, editor, resolveColorValue, ...props }: RecentColorButtonProps): import("react").JSX.Element;
+export interface ColorGroupProps {
+    type: ColorType;
+    colors: ColorItem[][];
+    onColorSelected: (payload: ColorChangePayload) => void;
+    selectedIndex?: number;
+    startIndexOffset: number;
+    editor?: Editor | null;
+    resolveColorValue?: ColorValueResolver;
+}
+export declare function ColorGroup({ type, colors, onColorSelected, selectedIndex, startIndexOffset, editor, resolveColorValue, }: ColorGroupProps): import("react").JSX.Element[];
+export interface TextStyleColorPanelProps {
+    maxColorsPerGroup?: number;
+    maxRecentColors?: number;
+    onColorChanged?: (payload: ColorChangePayload) => void;
+    editor?: Editor | null;
+    resolveColorValue?: ColorValueResolver;
+}
+export declare function TextStyleColorPanel({ maxColorsPerGroup, maxRecentColors, onColorChanged, editor, resolveColorValue, }: TextStyleColorPanelProps): import("react").JSX.Element;
+export interface ColorTextPopoverProps extends Omit<React.ComponentProps<typeof Button>, "type">, UseColorTextPopoverConfig {
+    resolveColorValue?: ColorValueResolver;
+}
+/**
+ * Color text popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useColorTextPopover` hook instead.
+ */
+export declare function ColorTextPopover({ editor: providedEditor, hideWhenUnavailable, onColorChanged, onClick, children, ref, resolveColorValue, ...buttonProps }: ColorTextPopoverProps): import("react").JSX.Element | null;
+export default ColorTextPopover;

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

@@ -0,0 +1,2 @@
+export * from "./color-text-popover";
+export * from "./use-color-text-popover";

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

@@ -0,0 +1,132 @@
+import type { Editor } from "@tiptap/react";
+export type ColorType = "text" | "highlight";
+export interface ColorItem {
+    value: string;
+    label: string;
+}
+export interface RecentColor {
+    type: ColorType;
+    label: string;
+    value: string;
+}
+export type ColorValueResolver = ({ type, label, value, }: {
+    type: ColorType;
+    label: string;
+    value: string;
+}) => string;
+/**
+ * Configuration for the color text popover functionality
+ */
+export interface UseColorTextPopoverConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the popover should hide when color text is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a color is applied.
+     */
+    onColorChanged?: ({ type, label, value, }: {
+        type: ColorType;
+        label: string;
+        value: string;
+    }) => void;
+}
+/**
+ * Get a color object by its value
+ */
+export declare function getColorByValue(value: string, colorArray: ColorItem[]): ColorItem;
+/**
+ * Checks if color text popover should be shown
+ */
+export declare function shouldShowColorTextPopover(params: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Hook to manage recently used colors
+ */
+export declare function useRecentColors(maxColors?: number): {
+    recentColors: RecentColor[];
+    addRecentColor: ({ type, label, value, }: {
+        type: ColorType;
+        label: string;
+        value: string;
+    }) => void;
+    isInitialized: boolean;
+};
+/**
+ * Custom hook that provides color text popover functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleColorTextPopover() {
+ *   const { isVisible, handleColorChanged } = useColorTextPopover()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <Popover>
+ *       <PopoverTrigger asChild>
+ *         <button>Color Text</button>
+ *       </PopoverTrigger>
+ *       <PopoverContent>
+ *         <TextStyleColorPanel onColorChanged={handleColorChanged} />
+ *       </PopoverContent>
+ *     </Popover>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedColorTextPopover() {
+ *   const {
+ *     isVisible,
+ *     activeTextStyle,
+ *     activeHighlight,
+ *     handleColorChanged,
+ *     label,
+ *     Icon,
+ *   } = useColorTextPopover({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onColorChanged: ({ type, label, value }) => console.log('Color changed!', { type, label, value })
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <Popover>
+ *       <PopoverTrigger asChild>
+ *         <Button
+ *           disabled={isDisabled}
+ *           aria-label={label}
+ *         >
+ *           <Icon style={{ color: activeTextStyle.color }} />
+ *         </Button>
+ *       </PopoverTrigger>
+ *       <PopoverContent>
+ *         <TextStyleColorPanel onColorChanged={handleColorChanged} />
+ *       </PopoverContent>
+ *     </Popover>
+ *   )
+ * }
+ * ```
+ */
+export declare function useColorTextPopover(config?: UseColorTextPopoverConfig): {
+    isVisible: boolean;
+    canToggle: boolean;
+    activeTextStyle: import("@tiptap/pm/model").Attrs;
+    activeHighlight: import("@tiptap/pm/model").Attrs;
+    handleColorChanged: ({ type, label, value, }: {
+        type: ColorType;
+        label: string;
+        value: string;
+    }) => void;
+    label: string;
+    Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

package/dist/components/tiptap-ui/copy-anchor-link-button/copy-anchor-link-button.d.ts

@@ -0,0 +1,22 @@
+import type { UseCopyAnchorLinkConfig } from "@/components/tiptap-ui/copy-anchor-link-button";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+export interface CopyAnchorLinkButtonProps extends Omit<ButtonProps, "type">, UseCopyAnchorLinkConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function CopyAnchorLinkShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for copying anchor links in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useCopyAnchorLink` hook instead.
+ */
+export declare const CopyAnchorLinkButton: import("react").ForwardRefExoticComponent<CopyAnchorLinkButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/tiptap-ui/copy-anchor-link-button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./copy-anchor-link-button";
+export * from "./use-copy-anchor-link";
+export * from "./use-scroll-to-hash";

package/dist/components/tiptap-ui/copy-anchor-link-button/use-copy-anchor-link.d.ts

@@ -0,0 +1,93 @@
+import { type Editor } from "@tiptap/react";
+import type { Node } from "@tiptap/pm/model";
+export declare const COPY_ANCHOR_LINK_SHORTCUT_KEY = "mod+ctrl+l";
+/**
+ * Configuration for the copy anchor link functionality
+ */
+export interface UseCopyAnchorLinkConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when no node ID is available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Called when the copy operation finishes.
+     * Provides a boolean indicating whether a node ID was found.
+     */
+    onNodeIdNotFound?: (found: boolean) => void;
+    /**
+     * Called after the node ID is extracted.
+     * Provides the extracted node ID, or null if none found.
+     */
+    onExtractedNodeId?: (nodeId: string | null) => void;
+    /**
+     * Callback function called after a successful copy operation.
+     */
+    onCopied?: () => void;
+}
+/**
+ * Extracts the data-id from a node
+ */
+export declare function extractNodeId(node: Node | null, attributeName: string): string | null;
+/**
+ * Checks if a node has a data-id that can be copied
+ */
+export declare function canCopyAnchorLink(editor: Editor | null): boolean;
+/**
+ * Extracts and copies the node ID to clipboard with full URL like Omnibox
+ */
+export declare function copyNodeId(editor: Editor | null, onExtractedNodeId?: (nodeId: string | null) => void, onNodeIdNotFound?: (found: boolean) => void): Promise<boolean>;
+/**
+ * Determines if the copy anchor link button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides copy anchor link functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MyCopyAnchorLinkButton() {
+ *   const { isVisible, handleCopyAnchorLink } = useCopyAnchorLink()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleCopyAnchorLink}>Copy Link</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCopyAnchorLinkButton() {
+ *   const { isVisible, handleCopyAnchorLink, label } = useCopyAnchorLink({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onCopied: () => console.log('Link copied!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleCopyAnchorLink}
+ *       aria-label={label}
+ *     >
+ *       Copy Anchor Link
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useCopyAnchorLink(config?: UseCopyAnchorLinkConfig): {
+    isVisible: boolean;
+    handleCopyAnchorLink: () => Promise<boolean>;
+    canCopyAnchorLink: 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/copy-anchor-link-button/use-scroll-to-hash.d.ts

@@ -0,0 +1,27 @@
+import { type Editor } from "@tiptap/react";
+export interface UseScrollToHashConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Callback called when the target node is found.
+     * @param nodeId The ID of the found node
+     */
+    onTargetFound?: (nodeId: string) => void;
+    /**
+     * Callback called when the target node is not found.
+     * @param hash The hash that was attempted to be scrolled to
+     */
+    onTargetNotFound?: (hash: string) => void;
+}
+/**
+ * Hook to scroll to a specific hash in the Tiptap editor.
+ * It finds the node with the given ID and scrolls it into view.
+ *
+ * @param config Configuration for the scroll behavior
+ * @returns Function to scroll to a specific hash
+ */
+export declare function useScrollToHash(config?: UseScrollToHashConfig): {
+    scrollToHash: (id: string) => boolean;
+};

package/dist/components/tiptap-ui/copy-to-clipboard-button/copy-to-clipboard-button.d.ts

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

package/dist/components/tiptap-ui/copy-to-clipboard-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./copy-to-clipboard-button";
+export * from "./use-copy-to-clipboard";

package/dist/components/tiptap-ui/copy-to-clipboard-button/use-copy-to-clipboard.d.ts

@@ -0,0 +1,103 @@
+import type { Editor } from "@tiptap/react";
+import type { Transaction } from "@tiptap/pm/state";
+export declare const COPY_TO_CLIPBOARD_SHORTCUT_KEY = "mod+c";
+/**
+ * Configuration for the copy to clipboard functionality
+ */
+export interface UseCopyToClipboardConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether to copy the text with formatting (default: true)
+     * When true, attempts to copy HTML format to clipboard
+     */
+    copyWithFormatting?: boolean;
+    /**
+     * Whether the button should hide when copying is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful copy operation.
+     */
+    onCopied?: () => void;
+}
+/**
+ * Writes text and optional HTML content to the clipboard
+ * @param textContent The plain text content to write
+ * @param htmlContent Optional HTML content to write
+ * @returns Promise that resolves when the content is successfully written
+ */
+export declare function writeToClipboard(textContent: string, htmlContent?: string): Promise<void>;
+/**
+ * Checks if content can be copied in the current editor state
+ */
+export declare function canCopyContent(tr: Transaction): boolean;
+/**
+ * Checks if formatting can be reset for a node
+ */
+export declare function canCopyToClipboard(editor: Editor | null): boolean;
+/**
+ * Helper function to extract content from selection or document
+ */
+export declare function extractContent(editor: Editor, copyWithFormatting?: boolean): {
+    textContent: string;
+    htmlContent?: string;
+};
+/**
+ * Copies content to clipboard
+ */
+export declare function copyToClipboard(editor: Editor | null, copyWithFormatting?: boolean): Promise<boolean>;
+/**
+ * Determines if the copy to clipboard button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides copy to clipboard functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleCopyButton() {
+ *   const { isVisible, handleCopyToClipboard } = useCopyToClipboard()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleCopyToClipboard}>Copy</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCopyButton() {
+ *   const { isVisible, handleCopyToClipboard, label } = useCopyToClipboard({
+ *     editor: myEditor,
+ *     copyWithFormatting: false,
+ *     hideWhenUnavailable: true,
+ *     onCopied: () => console.log('Content copied!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleCopyToClipboard}
+ *       aria-label={label}
+ *     >
+ *       Copy Content
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useCopyToClipboard(config?: UseCopyToClipboardConfig): {
+    isVisible: boolean;
+    handleCopyToClipboard: () => Promise<boolean>;
+    canCopyToClipboard: 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/delete-node-button/delete-node-button.d.ts

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

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

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

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

@@ -0,0 +1,82 @@
+import { type Editor } from "@tiptap/react";
+export declare const DELETE_NODE_SHORTCUT_KEY = "backspace";
+/**
+ * Configuration for the delete node functionality
+ */
+export interface UseDeleteNodeConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when node deletion is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful deletion.
+     */
+    onDeleted?: () => void;
+}
+/**
+ * Checks if a node can be deleted based on the current selection
+ */
+export declare function canDeleteNode(editor: Editor | null): boolean;
+/**
+ * Helper function to delete a node with fallback strategy
+ */
+export declare function deleteNodeAtPosition(editor: Editor, pos: number, nodeSize: number): boolean;
+/**
+ * Deletes the selected node in the editor using current selection
+ */
+export declare function deleteNode(editor: Editor | null): boolean;
+/**
+ * Determines if the delete node button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides delete node functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleDeleteButton() {
+ *   const { isVisible, handleDeleteNode } = useDeleteNode()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleDeleteNode}>Delete</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedDeleteButton() {
+ *   const { isVisible, handleDeleteNode, label } = useDeleteNode({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onDeleted: () => console.log('Node deleted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleDeleteNode}
+ *       aria-label={label}
+ *     >
+ *       Delete Node
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useDeleteNode(config?: UseDeleteNodeConfig): {
+    isVisible: boolean;
+    handleDeleteNode: () => boolean;
+    canDeleteNode: 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/drag-context-menu/drag-context-menu-types.d.ts

@@ -0,0 +1,30 @@
+import type { DragHandleProps } from "@tiptap/extension-drag-handle-react";
+import type { Node } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/react";
+export interface DragContextMenuProps extends Omit<DragHandleProps, "editor" | "children"> {
+    editor?: Editor | null;
+    withSlashCommandTrigger?: boolean;
+    mobileBreakpoint?: number;
+}
+export interface NodeChangeData {
+    node: Node | null;
+    editor: Editor;
+    pos: number;
+}
+export interface MenuItemProps {
+    icon: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    isActive?: boolean;
+    shortcutBadge?: React.ReactNode;
+}
+export interface ColorMenuItemProps {
+    color: {
+        value: string;
+        label: string;
+    };
+}

package/dist/components/tiptap-ui/drag-context-menu/drag-context-menu.d.ts

@@ -0,0 +1,3 @@
+import type { DragContextMenuProps } from "@/components/tiptap-ui/drag-context-menu/drag-context-menu-types";
+import "./drag-context-menu.css";
+export declare const DragContextMenu: React.FC<DragContextMenuProps>;

package/dist/components/tiptap-ui/drag-context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./drag-context-menu";
+export * from "./drag-context-menu-types";

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

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

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

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