cvnert-editor 0.1.0

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

@@ -0,0 +1,64 @@
+import { type Editor } from "@tiptap/react";
+export declare const IMAGE_DOWNLOAD_SHORTCUT_KEY = "mod+shift+d";
+/**
+ * Configuration for the image download functionality
+ */
+export interface UseImageDownloadConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when download is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful image download.
+     */
+    onDownloaded?: (filename?: string) => void;
+    /**
+     * Optional function to resolve file URLs before downloading.
+     * Useful for handling relative paths or custom URL schemes.
+     */
+    resolveFileUrl?: (url: string) => Promise<string>;
+    /**
+     * Download behavior: 'download' forces download, 'open' opens in new tab, 'auto' tries download with fallback
+     * @default 'auto'
+     */
+    downloadMethod?: "download" | "open" | "auto";
+}
+/**
+ * Checks if image can be downloaded in the current editor state
+ */
+export declare function canDownloadImage(editor: Editor | null): boolean;
+/**
+ * Gets the currently selected image data
+ */
+export declare function getSelectedImageData(editor: Editor | null): {
+    src?: string;
+    alt?: string;
+    title?: string;
+} | null;
+/**
+ * Downloads the currently selected image
+ */
+export declare function downloadSelectedImage(editor: Editor | null, filename?: string, resolveFileUrl?: (url: string) => Promise<string>, downloadMethod?: "download" | "open" | "auto"): Promise<boolean>;
+/**
+ * Determines if the download button should be shown
+ */
+export declare function shouldShowDownloadButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides image download functionality for Tiptap editor
+ */
+export declare function useImageDownload(config?: UseImageDownloadConfig): {
+    isVisible: boolean;
+    canDownload: boolean;
+    handleDownload: () => Promise<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/image-upload-button/image-upload-button.d.ts

@@ -0,0 +1,29 @@
+import type { UseImageUploadConfig } from "@/components/tiptap-ui/image-upload-button";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+type IconProps = React.SVGProps<SVGSVGElement>;
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement;
+export interface ImageUploadButtonProps extends Omit<ButtonProps, "type">, UseImageUploadConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+    /**
+     * Optional custom icon component to render instead of the default.
+     */
+    icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>;
+}
+export declare function ImageShortcutBadge({ shortcutKeys, }: {
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for uploading/inserting images in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useImage` hook instead.
+ */
+export declare const ImageUploadButton: import("react").ForwardRefExoticComponent<ImageUploadButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

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

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

@@ -0,0 +1,84 @@
+import { type Editor } from "@tiptap/react";
+export declare const IMAGE_UPLOAD_SHORTCUT_KEY = "mod+shift+i";
+/**
+ * Configuration for the image upload functionality
+ */
+export interface UseImageUploadConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when insertion is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful image insertion.
+     */
+    onInserted?: () => void;
+}
+/**
+ * Checks if image can be inserted in the current editor state
+ */
+export declare function canInsertImage(editor: Editor | null): boolean;
+/**
+ * Checks if image is currently active
+ */
+export declare function isImageActive(editor: Editor | null): boolean;
+/**
+ * Inserts an image in the editor
+ */
+export declare function insertImage(editor: Editor | null): boolean;
+/**
+ * Determines if the image button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides image functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleImageButton() {
+ *   const { isVisible, handleImage } = useImage()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleImage}>Add Image</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedImageButton() {
+ *   const { isVisible, handleImage, label, isActive } = useImage({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onInserted: () => console.log('Image inserted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleImage}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Add Image
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useImageUpload(config?: UseImageUploadConfig): {
+    isVisible: boolean;
+    isActive: boolean;
+    handleImage: () => boolean;
+    canInsert: 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/indent-button/indent-button.d.ts

@@ -0,0 +1,30 @@
+import type { IndentAction, UseIndentConfig } from "@/components/tiptap-ui/indent-button";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+type IconProps = React.SVGProps<SVGSVGElement>;
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement;
+export interface IndentButtonProps extends Omit<ButtonProps, "type">, UseIndentConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+    /**
+     * Optional custom icon component to render instead of the default.
+     */
+    icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>;
+}
+export declare function IndentShortcutBadge({ action, shortcutKeys, }: {
+    action: IndentAction;
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for controlling indentation in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useIndent` hook instead.
+ */
+export declare const IndentButton: import("react").ForwardRefExoticComponent<IndentButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

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

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

@@ -0,0 +1,91 @@
+import { type Editor } from "@tiptap/react";
+export type IndentAction = "indent" | "outdent";
+/**
+ * Configuration for the indent functionality
+ */
+export interface UseIndentConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The indent action to perform.
+     */
+    action: IndentAction;
+    /**
+     * Whether the button should hide when indent is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful indent change.
+     */
+    onIndented?: () => void;
+}
+export declare const INDENT_SHORTCUT_KEYS: Record<IndentAction, string>;
+export declare const indentIcons: {
+    indent: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    outdent: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};
+export declare const indentLabels: Record<IndentAction, string>;
+/**
+ * Checks if indent action can be performed in the current editor state
+ */
+export declare function canPerformIndent(editor: Editor | null, action: IndentAction): boolean;
+/**
+ * Performs the indent action in the editor
+ */
+export declare function performIndent(editor: Editor | null, action: IndentAction): boolean;
+/**
+ * Determines if the indent button should be shown
+ */
+export declare function shouldShowIndentButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+    action: IndentAction;
+}): boolean;
+/**
+ * Custom hook that provides indent functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyIndentButton() {
+ *   const { isVisible, handleIndent } = useIndent({ action: "indent" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleIndent}>Indent</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyOutdentButton() {
+ *   const { isVisible, handleIndent, label, canIndent } = useIndent({
+ *     editor: myEditor,
+ *     action: "outdent",
+ *     hideWhenUnavailable: true,
+ *     onIndented: () => console.log('Outdented!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleIndent}
+ *       disabled={!canIndent}
+ *       aria-label={label}
+ *     >
+ *       Outdent
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useIndent(config: UseIndentConfig): {
+    isVisible: boolean;
+    canIndent: boolean;
+    handleIndent: () => 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>;
+};

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

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

package/dist/components/tiptap-ui/link-popover/link-popover.d.ts

@@ -0,0 +1,58 @@
+import type { Editor } from "@tiptap/react";
+import type { UseLinkPopoverConfig } from "@/components/tiptap-ui/link-popover";
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+import "./link-popover.css";
+export interface LinkMainProps {
+    /**
+     * The URL to set for the link.
+     */
+    url: string;
+    /**
+     * Function to update the URL state.
+     */
+    setUrl: React.Dispatch<React.SetStateAction<string | null>>;
+    /**
+     * Function to set the link in the editor.
+     */
+    setLink: () => void;
+    /**
+     * Function to remove the link from the editor.
+     */
+    removeLink: () => void;
+    /**
+     * Function to open the link.
+     */
+    openLink: () => void;
+    /**
+     * Whether the link is currently active in the editor.
+     */
+    isActive: boolean;
+}
+export interface LinkPopoverProps extends Omit<ButtonProps, "type">, UseLinkPopoverConfig {
+    /**
+     * Callback for when the popover opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether to automatically open the popover when a link is active.
+     * @default true
+     */
+    autoOpenOnLinkActive?: boolean;
+}
+/**
+ * Link button component for triggering the link popover
+ */
+export declare const LinkButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Link content component for standalone use
+ */
+export declare const LinkContent: React.FC<{
+    editor?: Editor | null;
+}>;
+/**
+ * Link popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useLinkPopover` hook instead.
+ */
+export declare const LinkPopover: import("react").ForwardRefExoticComponent<LinkPopoverProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default LinkPopover;

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

@@ -0,0 +1,117 @@
+import type { Editor } from "@tiptap/react";
+/**
+ * Configuration for the link popover functionality
+ */
+export interface UseLinkPopoverConfig {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether to hide the link popover when not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called when the link is set.
+     */
+    onSetLink?: () => void;
+}
+/**
+ * Configuration for the link handler functionality
+ */
+export interface LinkHandlerProps {
+    /**
+     * The Tiptap editor instance.
+     */
+    editor: Editor | null;
+    /**
+     * Callback function called when the link is set.
+     */
+    onSetLink?: () => void;
+}
+/**
+ * Checks if a link can be set in the current editor state
+ */
+export declare function canSetLink(editor: Editor | null): boolean;
+/**
+ * Checks if a link is currently active in the editor
+ */
+export declare function isLinkActive(editor: Editor | null): boolean;
+/**
+ * Determines if the link button should be shown
+ */
+export declare function shouldShowLinkButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook for handling link operations in a Tiptap editor
+ */
+export declare function useLinkHandler(props: LinkHandlerProps): {
+    url: string;
+    setUrl: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setLink: () => void;
+    removeLink: () => void;
+    openLink: (target?: string, features?: string) => void;
+};
+/**
+ * Custom hook for link popover state management
+ */
+export declare function useLinkState(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): {
+    isVisible: boolean;
+    canSet: boolean;
+    isActive: boolean;
+};
+/**
+ * Main hook that provides link popover functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button disabled={!canSet}>Link</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onSetLink: () => console.log('Link set!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       disabled={!canSet}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       {label}
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useLinkPopover(config?: UseLinkPopoverConfig): {
+    url: string;
+    setUrl: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setLink: () => void;
+    removeLink: () => void;
+    openLink: (target?: string, features?: string) => void;
+    isVisible: boolean;
+    canSet: boolean;
+    isActive: boolean;
+    label: string;
+    Icon: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

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

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

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

@@ -0,0 +1,23 @@
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button";
+import type { ListType, UseListConfig } from "@/components/tiptap-ui/list-button";
+export interface ListButtonProps extends Omit<ButtonProps, "type">, UseListConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function ListShortcutBadge({ type, shortcutKeys, }: {
+    type: ListType;
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for toggling lists in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useList` hook instead.
+ */
+export declare const ListButton: import("react").ForwardRefExoticComponent<ListButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,97 @@
+import { type 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 }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    orderedList: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    taskList: import("react").MemoExoticComponent<({ className, ...props }: Omit<import("react").SVGProps<SVGSVGElement>, "ref">) => import("react").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 }: 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/mark-button/index.d.ts

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

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

@@ -0,0 +1,23 @@
+import type { Mark, UseMarkConfig } from "@/components/tiptap-ui/mark-button";
+import type { ButtonProps } from "@/components/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.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>>;