tiptap-extension-resizable-image/dist/index.d.ts

Resizable image extension for Tiptap

import { Range, Attribute, Editor, Node as Node$1 } from '@tiptap/core';
import { ParseOptions } from '@tiptap/pm/model';
import { NodeViewRendererProps } from '@tiptap/react';
import * as react_jsx_runtime from 'react/jsx-runtime';

/**
 * ResizableImage extension options.
 */
interface ResizableImageOptions {
    /** HTML attributes for the resizable image. */
    HTMLAttributes: Record<string, unknown>;
    /**
     * Allow base 64 as src.
     * @default true
     */
    allowBase64: boolean;
    /**
     * Default width of the image element.
     * @default 500
     */
    defaultWidth: number;
    /**
     * Default height of the image element.
     * @default 500
     */
    defaultHeight: number;
    /**
     * Min width that the image element can be resized to.
     * @default 100
     */
    minWidth: number;
    /**
     * Max width that the image element can be resized to.
     * @default 16384
     */
    maxWidth: number;
    /**
     * Min height that the image element can be resized to.
     * @default 100
     */
    minHeight: number;
    /**
     * Max height that the image element can be resized to.
     * @default Infinity
     */
    maxHeight: number;
    /**
     * Determines whether the caption should be displayed.
     * @default false
     */
    withCaption?: boolean;
    /** Optional caption input props. */
    captionProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    /** Optional function to handle uploading when pasting and dropping image into the editor. */
    onUpload?: (file: File) => Promise<ResizableImageHTMLAttributes>;
    /** Optional function to handle context menu events. */
    onContextMenu?: (
    /** The React mouse event. */
    event: React.MouseEvent<HTMLImageElement, MouseEvent>, 
    /** The payload for the context menu event. */
    payload: ResizableImageNodeViewRendererProps) => void;
}
/**
 * HTML attributes of the image element.
 */
interface ResizableImageHTMLAttributes {
    /** The source URL of the image. */
    src: string;
    /** Alternate text for the image. */
    alt?: string;
    /** The title of the image. */
    title?: string;
    /** The width of the image. */
    width?: number;
    /** The height of the image. */
    height?: number;
    /** Whether to keep the original aspect ratio of the image. */
    'data-keep-ratio'?: boolean;
    /** CSS class names for the image element. */
    className?: string;
    /** Caption of the image. */
    caption?: string;
}
type ResizableImageAttributes = Record<keyof ResizableImageHTMLAttributes, Attribute> | object;
type Node = NodeViewRendererProps['node'] & {
    attrs: ResizableImageHTMLAttributes;
};
type NodeViewRendererPropsExtension = NodeViewRendererProps['extension'];
interface Extension extends NodeViewRendererPropsExtension {
    options: ResizableImageOptions;
}
interface ResizableImageNodeViewRendererProps extends NodeViewRendererProps {
    updateAttributes(attrs: Partial<ResizableImageHTMLAttributes>): void;
    node: Node;
    extension: Extension;
}
interface InsertContentAtOptions {
    parseOptions?: ParseOptions;
    updateSelection?: boolean;
}
declare module '@tiptap/core' {
    interface Commands<ReturnType> {
        imageComponent: {
            setResizableImage(attrs: ResizableImageHTMLAttributes, position?: number | Range, options?: InsertContentAtOptions): ReturnType;
        };
    }
}

declare const ResizableImageComponent: (props: ResizableImageNodeViewRendererProps) => react_jsx_runtime.JSX.Element;

declare const ResizableImageNodeView: (props: ResizableImageNodeViewRendererProps) => react_jsx_runtime.JSX.Element;

declare const CaptionInput: (props: ResizableImageNodeViewRendererProps) => react_jsx_runtime.JSX.Element;

interface Props {
    editor: Editor;
    imageRef: {
        current: null | HTMLElement;
    };
    minWidth: number;
    maxWidth: number;
    minHeight: number;
    maxHeight: number;
    keepRatio?: boolean;
    onResizeEnd: (width: number, height: number) => void;
    onResizeStart?: () => void;
}
declare function ImageResizer({ editor, imageRef, minWidth, maxWidth, minHeight, maxHeight, keepRatio, onResizeEnd, onResizeStart, }: Props): react_jsx_runtime.JSX.Element;

declare const _default: Node$1<ResizableImageOptions, any>;

export { CaptionInput, ImageResizer, _default as ResizableImage, type ResizableImageAttributes, ResizableImageComponent, type ResizableImageHTMLAttributes, ResizableImageNodeView, type ResizableImageNodeViewRendererProps, type ResizableImageOptions };