@enzedonline/quill-blot-formatter2/dist/index.d.ts

An update for quill-blot-formatter to make quilljs v2 compatible.

import { default as default_2 } from 'quill';

/**
 * Represents a base class for actions used within the BlotFormatter.
 *
 * This class provides a structure for actions that can be performed by the formatter,
 * including lifecycle hooks for creation, destruction, and updates. Subclasses should
 * override the lifecycle methods as needed.
 *
 * @remarks
 * - Each action holds a reference to the parent `BlotFormatter` instance.
 * - Actions can define their own toolbar buttons by populating the `toolbarButtons` array.
 * - Debug logging is available if the formatter's options enable it.
 *
 * @example
 * ```typescript
 * class CustomAction extends Action {
 *   onCreate = (): void => {
 *     // Custom initialization logic
 *   }
 *   onDestroy = (): void => {
 *     // Custom destruction logic
 *   }
 *   onUpdate = (): void => {
 *     // Custom update logic
 *   }
 * }
 * ```
 *
 * @public
 */
export declare class Action {
    formatter: BlotFormatter;
    toolbarButtons: ToolbarButton[];
    debug: boolean;
    constructor(formatter: BlotFormatter);
    /**
     * Called when the action is created.
     * Override this method to implement custom initialization logic.
     */
    onCreate: () => void;
    /**
     * Called when the action is being destroyed.
     * Override this method to implement custom cleanup logic.
     */
    onDestroy: () => void;
    /**
     * Called when the action should be updated.
     * Override this method to implement custom update logic.
     */
    onUpdate: () => void;
}

/**
 * Provides alignment actions for Quill editor blots, including creating, managing,
 * and handling alignment toolbar buttons. Integrates with a `DefaultAligner` to
 * apply, clear, and detect alignment on selected blots. Handles UI state for
 * alignment buttons and supports debug logging.
 *
 * @remarks
 * This class is intended to be used as part of a Quill blot formatter extension,
 * enabling users to align embedded content (such as images or videos) via a toolbar.
 *
 * @extends Action
 *
 * @example
 * ```typescript
 * const alignAction = new AlignAction(formatter);
 * alignAction.onCreate();
 * // ... user interacts with toolbar ...
 * alignAction.onDestroy();
 * ```
 */
export declare class AlignAction extends Action {
    aligner: DefaultAligner;
    alignButtons: Record<string, ToolbarButton>;
    constructor(formatter: BlotFormatter);
    /**
     * Creates alignment toolbar buttons for each available alignment option.
     *
     * Iterates over the alignments provided by the aligner and creates a `ToolbarButton`
     * for each alignment, storing them in the `alignButtons` map. If there is a currently
     * selected blot, it checks its alignment and preselects the corresponding button.
     * Optionally logs debug information about the created buttons and the current alignment.
     *
     * @private
     */
    private _createAlignmentButtons;
    /**
     * Clears the selection state of all alignment buttons.
     *
     * Iterates through all buttons in the `alignButtons` collection and sets their
     * `selected` property to `false`. If debugging is enabled, logs a message to the console.
     *
     * @private
     */
    private _clearButtons;
    /**
     * Handles click events on alignment toolbar buttons.
     *
     * This event handler determines which alignment action was triggered by the user,
     * retrieves the corresponding alignment configuration, and applies or clears the alignment
     * on the currently selected blot in the editor. It also updates the toolbar button states
     * and logs debug information if enabled.
     *
     * @param event - The click event triggered by the user on a toolbar button.
     */
    onClickHandler: EventListener;
    /**
     * Initializes the alignment action by creating alignment buttons and storing them in the toolbar.
     * If debug mode is enabled in the formatter options, logs the created alignment buttons to the console.
     *
     * @returns {void}
     */
    onCreate: () => void;
    /**
     * Cleans up resources used by the alignment action.
     *
     * This method resets the `alignButtons` object and clears the `toolbarButtons` array.
     * If debug mode is enabled in the formatter options, a debug message is logged to the console.
     *
     * @returns {void}
     */
    onDestroy: () => void;
}

/**
 * Interface for objects that handle alignment operations on blots.
 *
 * Implementations of this interface provide methods to retrieve available alignments,
 * check if a blot is aligned to a specific alignment, and clear alignment from a blot.
 */
declare interface Aligner {
    getAlignments(): Alignment[];
    isAligned(blot: Blot | null, alignment: Alignment): boolean;
    clear(blot: Blot | null): void;
}

/**
 * Represents an alignment action that can be applied to a Blot.
 *
 * @property name - The name of the alignment (e.g., "left", "center", "right").
 * @property apply - A function that applies the alignment to the given Blot instance.
 *                   If the provided Blot is null, the function should handle it gracefully.
 */
declare type Alignment = {
    name: string;
    apply: (blot: Blot | null) => void;
};

declare type AlignOptions = {
    allowAligning: boolean;
    alignments: string[];
};

declare interface AltTitleModal {
    element: HTMLDivElement;
    form: HTMLFormElement;
    altInput: HTMLTextAreaElement;
    titleInput: HTMLTextAreaElement;
    cancelButton: HTMLButtonElement;
}

declare type AltTitleModalOptions = {
    styles?: {
        modalBackground?: {
            [key: string]: any;
        } | null | undefined;
        modalContainer?: {
            [key: string]: any;
        } | null | undefined;
        label?: {
            [key: string]: any;
        } | null | undefined;
        textarea?: {
            [key: string]: any;
        } | null | undefined;
        submitButton?: {
            [key: string]: any;
        } | null | undefined;
        cancelButton?: {
            [key: string]: any;
        } | null | undefined;
    } | null | undefined;
    icons: {
        submitButton: string;
        cancelButton: string;
    };
    labels: {
        alt: string;
        title: string;
    };
};

export declare class AttributeAction extends Action {
    modal: AltTitleModal;
    targetElement: HTMLElement | null | undefined;
    currentBlot: Blot | null | undefined;
    constructor(formatter: BlotFormatter);
    /**
     * Initializes the target element and current blot for the action.
     * Retrieves the target element and blot from the current formatter specification.
     *
     * @remarks
     * This method should be called when the action is created to ensure
     * that the necessary references are set up for further processing.
     */
    onCreate: () => void;
    /**
     * Cleans up resources when the action is destroyed.
     * Sets the target element to null and removes the modal element from the DOM.
     */
    onDestroy: () => void;
    /**
     * Event handler for click events that triggers the display of the Alt Title modal.
     *
     * @private
     * @remarks
     * This handler is assigned to UI elements to allow users to edit or view the Alt Title attribute.
     */
    private _onClickHandler;
    /**
     * Displays the modal for editing the 'alt' and 'title' attributes of the target element.
     *
     * If a target element is present, this method sets the modal's input fields to the current
     * 'alt' and 'title' attribute values of the target element (or empty strings if not set),
     * and appends the modal element to the document body.
     *
     * @private
     */
    private _showAltTitleModal;
    /**
     * Hides and removes the alt/title modal from the DOM.
     *
     * This method removes the modal's element, effectively closing the modal UI.
     * It is typically called when the modal should no longer be visible to the user.
     *
     * @private
     */
    private _hideAltTitleModal;
    /**
     * Updates the `alt` and `title` attributes of the target image element based on user input.
     * If a title is provided, it sets the `title` attribute; otherwise, it removes it.
     * Additionally, if an image alignment format is applied, it updates the alignment format
     * to include the new title value.
     *
     * @private
     */
    private _setAltTitle;
    /**
     * Creates and configures a modal dialog for editing image `alt` and `title` attributes.
     *
     * The modal includes:
     * - A unique identifier for each instance.
     * - A form with labeled textareas for `alt` and `title` values.
     * - Submit and cancel buttons, with customizable icons and styles.
     * - Event listeners for submitting, cancelling, and closing the modal by clicking outside.
     *
     * Styles and labels are sourced from `this.formatter.options.image.altTitleModalOptions` and `this.formatter.options.overlay.labels`.
     *
     * @returns {AltTitleModal} An object containing references to the modal element, form, alt and title inputs, and the cancel button.
     */
    private _createModal;
    private _onSubmitHandler;
    private _onPointerDownHandler;
}

/**
 * Represents a class type for Attributors, which are used to define and manage
 * custom attributes in Quill editors. This type describes a constructor signature
 * for Attributor classes, including their prototype and the attribute name they handle.
 *
 * @template T The instance type created by the constructor.
 * @property {string} attrName - The name of the attribute managed by the Attributor.
 */
declare type AttributorClass = {
    new (...args: any[]): any;
    prototype: any;
    attrName: string;
};

declare interface Blot {
    domNode: HTMLElement;
    parent: Blot | null;
    next: Blot | null;
    prev: Blot | null;
    statics: any | null;
    format(name: string, value: any): void | undefined;
    formats(): {
        [key: string]: any;
    };
    length(): number;
}

/**
 * BlotFormatter is a Quill module that provides an interactive overlay for formatting embedded blots
 * (such as images, iframes, and videos) within the Quill rich text editor. It enables resizing, alignment,
 * and other custom actions on supported blots via a floating UI, and manages all related event handling,
 * DOM manipulation, and integration with Quill's API.
 *
 * Features:
 * - Displays an overlay with handles and a toolbar for formatting selected blots.
 * - Supports custom actions, alignment, and resizing (with both relative and absolute sizing).
 * - Integrates with Quill's keyboard bindings to fix known issues with embedded content.
 * - Handles touch and mouse interactions, including scrolling and context menu suppression.
 * - Registers and manages custom blots and attributors for advanced formatting.
 * - Provides robust cleanup and destruction of all event listeners and DOM elements.
 * - Exposes debugging hooks and logs when enabled via options.
 *
 * Usage:
 * Instantiate with a Quill editor instance and optional configuration options.
 * The formatter automatically attaches to the editor and manages its own lifecycle.
 *
 * Example:
 * ```typescript
 * const quill = new Quill('#editor', { ... });
 * const blotFormatter = new BlotFormatter(quill, { debug: true });
 * ```
 *
 * @template Options - The configuration options type for the formatter.
 * @template BlotSpec - The specification interface for supported blots.
 * @template Action - The interface for custom actions available in the overlay.
 *
 * @public
 */
declare class BlotFormatter {
    Quill: typeof default_2;
    quill: any;
    options: Options;
    currentSpec: BlotSpec | null;
    specs: BlotSpec[];
    overlay: HTMLElement;
    toolbar: Toolbar;
    sizeInfo: HTMLElement;
    actions: Action[];
    private _startX;
    private _startY;
    private _abortController?;
    private _resizeObserver?;
    private _tooltipContainPosition?;
    ImageAlign: AttributorClass;
    IframeAlign: AttributorClass;
    constructor(quill: any, options?: Partial<Options>);
    /**
     * Destroys the BlotFormatter instance, cleaning up event listeners, actions, toolbar,
     * and DOM references. Also removes any global references and clears internal state.
     * Logs a debug message if the `debug` option is enabled.
     * Catches and logs any errors that occur during the destruction process.
     */
    destroy: () => void;
    /**
     * Displays the blot formatter overlay for the specified blot.
     *
     * This method performs the following actions:
     * - Hides any open Quill tooltips (such as hyperlink dialogs).
     * - Optionally exposes the formatter instance for debugging.
     * - Clears any existing overlay if active on another blot.
     * - Sets the current blot specification and selection.
     * - Disables user selection to prevent unwanted interactions.
     * - Appends the overlay to the Quill editor container.
     * - Repositions the overlay to match the blot's position.
     * - Creates action buttons or controls for the current blot.
     * - Initializes the toolbar for the formatter.
     * - Adds a document-level pointerdown event listener to handle outside clicks.
     * - Logs debug information if enabled in options.
     *
     * @param spec - The specification of the blot (*BlotSpec*) to be formatted.
     * @returns void
     */
    show: (spec: BlotSpec) => void;
    /**
     * Hides the blot formatter overlay and performs necessary cleanup.
     *
     * If a pointer event is provided, determines the click position relative to the target blot
     * and places the caret before or after the blot accordingly. Calls the `onHide` method of the
     * current spec, removes the overlay from the DOM, removes event listeners, resets user selection,
     * destroys toolbar and actions, and emits a `TEXT_CHANGE` event to ensure the editor state is updated.
     *
     * @param event - Optional pointer event that triggered the hide action. Used to determine caret placement.
     */
    hide: (event?: PointerEvent | null) => void;
    /**
     * Updates the state of the BlotFormatter overlay and its associated actions.
     *
     * This method repositions the overlay to match the current selection or formatting context,
     * triggers the `onUpdate` method for each registered action, and logs a debug message if
     * debugging is enabled in the options.
     *
     * @returns {void}
     */
    update: () => void;
    /**
     * Initializes the actions for the given blot specification.
     *
     * This method retrieves the list of actions from the provided `spec` using `getActions()`,
     * calls the `onCreate()` lifecycle method on each action, and assigns the resulting array
     * to the `actions` property. If debugging is enabled in the options, it logs each created action.
     *
     * @param spec - The blot specification containing the actions to initialize.
     */
    private _createActions;
    /**
     * Destroys all registered actions by calling their `onDestroy` method and clearing the actions array.
     * If debugging is enabled in the options, logs a debug message to the console.
     *
     * @private
     */
    private _destroyActions;
    /**
     * Creates and configures the overlay and size info HTML elements used for formatting blots.
     *
     * The overlay element is styled and configured to be non-selectable, and the size info element
     * is appended to the overlay. Both elements can be customized via the `options.overlay` property.
     *
     * @returns A tuple containing the overlay HTMLElement and the size info HTMLElement.
     */
    private _createOverlay;
    /**
     * Ensures that the toolbar element is visible within the viewport of the Quill editor.
     * If the toolbar is positioned above the visible area of the editor, it scrolls the target element into view
     * with an offset equal to the toolbar's height, then recalculates the toolbar's position.
     * If the toolbar is still above the viewport, it scrolls the window to bring the toolbar into view smoothly.
     *
     * @param toolbarElement - The HTML element representing the toolbar to be scrolled into view.
     * @returns A promise that resolves when any necessary scrolling has completed.
     */
    private _scrollToolbarIntoView;
    /**
     * Scrolls the first scrollable ancestor of the given element into view with a specified offset.
     * If the element is outside the visible bounds of its scrollable ancestor, the ancestor is scrolled
     * so that the element is visible with the given offset from the top. Returns a promise that resolves
     * when scrolling has completed (or immediately if no scrolling was necessary).
     *
     * @param el - The target HTMLElement to scroll into view.
     * @param offset - The number of pixels to offset from the top of the scrollable ancestor (default: 10).
     * @returns A promise that resolves when scrolling is finished.
     */
    private _scrollIntoViewWithOffset;
    /**
     * Adds all necessary event listeners to the overlay and Quill root elements.
     *
     * - For the overlay:
     *   - Forwards mouse wheel and touch move events to allow scrolling.
     *   - Disables the context menu to prevent default browser actions.
     * - For the Quill root:
     *   - Repositions the overlay on scroll and resize events.
     *   - Dismisses the overlay when clicking on the Quill root.
     *
     * This method ensures proper interaction and synchronization between the overlay
     * and the Quill editor, handling user input and UI updates.
     *
     * @private
     */
    private _addEventListeners;
    /**
     * Removes event listeners and observers associated with the instance.
     *
     * Aborts any ongoing operations managed by the internal AbortController,
     * and disconnects the internal ResizeObserver to stop observing changes.
     *
     * @private
     */
    private _removeEventListeners;
    /**
     * Prevents the default context menu from appearing and stops the event from propagating further.
     *
     * @param event - The event object associated with the context menu action.
     */
    private _preventContextMenu;
    /**
     * Repositions the overlay element to align with the currently selected blot's overlay target.
     *
     * Calculates the position and size of the overlay based on the bounding rectangles of the
     * Quill container and the overlay target element. Updates the overlay's style to match
     * the target's position and dimensions, ensuring it is correctly displayed over the selected blot.
     * Optionally logs debug information if the `debug` option is enabled.
     *
     * @private
     */
    private _repositionOverlay;
    /**
     * Sets the CSS `user-select` property (and its vendor-prefixed variants) to the specified value
     * on both the Quill editor root element and the document's root element.
     *
     * This method is typically used to enable or disable text selection within the editor and the page,
     * which can be useful during formatting operations to prevent unwanted user interactions.
     *
     * @param value - The value to set for the `user-select` property (e.g., `'none'`, `'auto'`).
     */
    private _setUserSelect;
    /**
     * Handles the `pointerdown` event on the document to determine whether the blot formatter overlay should be dismissed.
     *
     * If the pointer event target is outside the Quill editor, not within a blot formatter modal,
     * and not a proxy image used by the blot formatter, the overlay is hidden.
     *
     * @param event - The pointer event triggered by user interaction.
     */
    private _onDocumentPointerDown;
    /**
     * Handles pointer click events on the editor.
     *
     * If debugging is enabled in the options, logs the click event to the console.
     * Then, hides the formatter UI in response to the click event.
     *
     * @param event - The pointer event triggered by the user's click.
     */
    private _onClick;
    /**
     * Handles the wheel event by scrolling the Quill editor's root element.
     * This method is intended to be used when the overlay or proxy receives a wheel event,
     * ensuring that the scroll action is passed through to the underlying Quill editor.
     *
     * @param event - The wheel event containing scroll delta values.
     *
     * @remarks
     * If the `debug` option is enabled, this method logs the scroll delta values to the console.
     */
    _passWheelEventThrough: (event: WheelEvent) => void;
    /**
     * Handles the touch start event for scrolling interactions.
     * Records the initial X and Y positions of the first touch point.
     * Optionally logs debug information if enabled in options.
     *
     * @param event - The touch event triggered when the user starts touching the screen.
     */
    _onTouchScrollStart: (event: TouchEvent) => void;
    /**
     * Handles touch move events to enable custom scrolling behavior within the Quill editor root element.
     *
     * This method allows for both vertical and horizontal scrolling using touch gestures,
     * and prevents default browser scrolling when appropriate to provide a smoother, controlled experience.
     * It updates the scroll position of the editor root based on the movement of the touch point,
     * and ensures scrolling does not exceed the bounds of the content.
     *
     * @param event - The touch event triggered by the user's finger movement.
     *
     * @remarks
     * - Only processes single-touch events.
     * - Prevents default scrolling if the editor can be scrolled further in the direction of the gesture.
     * - Updates the starting touch coordinates after each move to track incremental movement.
     * - Logs debug information if the `debug` option is enabled.
     */
    _onTouchScrollMove: (event: TouchEvent) => void;
    /**
     * Registers custom Quill blots based on the provided options.
     *
     * - If `options.image.registerImageTitleBlot` is enabled, registers a custom Image blot
     *   that supports a title attribute.
     * - If `options.video.registerCustomVideoBlot` is enabled, registers a custom Video blot
     *   with responsive behavior and sets its default aspect ratio from the options.
     *
     * Debug information is logged to the console if `options.debug` is true.
     *
     * @private
     */
    private _registerCustomBlots;
    /**
     * Registers custom keyboard bindings to address specific Quill editor issues and enhance user experience.
     *
     * - Adds a Backspace key binding to fix Quill bug #4364, ensuring proper deletion behavior for embedded videos (e.g., iframes).
     *   This is enabled if `options.video.registerBackspaceFix` is true.
     * - Adds an ArrowRight key binding to fix cursor navigation issues when moving past images,
     *   ensuring the cursor does not get stuck or hidden at the image location.
     *   This is enabled if `options.image.registerArrowRightFix` is true.
     *
     * Both bindings are conditionally registered based on the provided options.
     * Debug information is logged to the console if `options.debug` is enabled.
     *
     * @private
     */
    private _keyboardBindings;
    /**
     * Determines whether the resizing of the target element should use relative sizing (percentages)
     * or absolute sizing (pixels), based on the current configuration and the element's width attribute.
     *
     * @param targetElement - The HTML element whose sizing mode is being determined.
     * @returns `true` if relative sizing should be used, `false` otherwise.
     *
     * The method checks the `useRelativeSize` option and, if `allowResizeModeChange` is enabled,
     * inspects the element's `width` attribute to decide whether to use relative or absolute sizing.
     * If debugging is enabled, logs the decision to the console.
     */
    _useRelative: (targetElement: HTMLElement) => boolean;
    /**
     * Determines the relative position of a pointer event with respect to the overlay element.
     *
     * @param event - The pointer event to evaluate.
     * @returns The position of the pointer relative to the overlay, as a `PointerPosition` enum value.
     *
     * The possible return values are:
     * - `PointerPosition.ABOVE` if the pointer is above the overlay.
     * - `PointerPosition.BELOW` if the pointer is below the overlay.
     * - `PointerPosition.LEFT` if the pointer is to the left of the overlay.
     * - `PointerPosition.RIGHT` if the pointer is to the right of the overlay.
     * - `PointerPosition.INSIDE` if the pointer is inside the overlay.
     *
     * If the `debug` option is enabled, logs the determined position and event to the console.
     */
    private _getClickPosition;
}
export default BlotFormatter;

/**
 * Abstract base class representing a specification for a Quill blot.
 *
 * `BlotSpec` provides a framework for defining custom blot behaviors and actions
 * within the Quill editor. Subclasses can override methods to implement specific
 * initialization, action handling, and element targeting logic for different blot types.
 *
 * @remarks
 * - Designed to be extended by concrete blot specification classes.
 * - Manages formatter instance and provides utility methods for blot manipulation.
 *
 * @example
 * ```typescript
 * class ImageBlotSpec extends BlotSpec {
 *   // Custom implementation for image blots
 * }
 * ```
 *
 * @property formatter - The `BlotFormatter` instance associated with this spec.
 * @property isUnclickable - Indicates whether the blot is unclickable.
 *
 * @method init - Initializes the blot specification. Intended to be overridden.
 * @method getActions - Returns an array of enabled `Action` objects for the current formatter. Intended to be extended.
 * @method getTargetElement - Returns the target HTML element for the blot. Intended to be overridden.
 * @method getTargetBlot - Retrieves the target blot associated with the current selection.
 * @method getOverlayElement - Returns the overlay element associated with the blot.
 * @method setSelection - Clears the current selection in the Quill editor.
 * @method onHide - Callback invoked when the blot is hidden. Intended to be overridden.
 */
export declare class BlotSpec {
    formatter: BlotFormatter;
    isUnclickable: boolean;
    constructor(formatter: BlotFormatter);
    /**
     * Initializes the blot specification.
     *
     * This method is intended to perform any setup required for the blot spec.
     * It can be overridden by subclasses to provide specific initialization logic.
     *
     */
    init: () => void;
    /**
     * Returns an array of `Action` instances based on the formatter's configuration options.
     *
     * The returned actions may include:
     * - `AlignAction` if aligning is allowed (`options.align.allowAligning`)
     * - `ResizeAction` if resizing is allowed (`options.resize.allowResizing`)
     * - `DeleteAction` if keyboard deletion is allowed (`options.delete.allowKeyboardDelete`)
     * - Always includes `CaretAction`
     *
     * It can be overridden by subclasses to provide additional actions specific to the blot type.
     *
     * @returns {Array<Action>} An array of enabled `Action` objects for the current formatter.
     */
    getActions(): Array<Action>;
    /**
     * Returns the target HTML element associated with this blot.
     *
     * This method is intended to be overridden by subclasses to provide the specific target element
     * for the blot type.
     *
     * @returns {HTMLElement | null} The target element, or `null` if none exists.
     */
    getTargetElement: () => HTMLElement | null;
    /**
     * Retrieves the target blot associated with the current selection.
     *
     * This method first obtains the target DOM element using `getTargetElement()`.
     * If a target element exists, it uses the Quill instance to find and return the corresponding blot.
     * If no target element is found, it returns `null`.
     *
     * @remarks
     * This method uses the quill instance constructor to overcome issue encountered with `Quill.find()`
     * with certain environments where the `Quill` global differs from the one used in the quill instance.
     * In those cases, the `find()` method will always return `null`. These environments include: vite,
     * react and angular.
     *
     * @returns {Blot | null} The blot corresponding to the target element, or `null` if not found.
     */
    getTargetBlot: () => Blot | null;
    /**
     * Returns the overlay element associated with the blot.
     *
     * @returns {HTMLElement | null} The overlay element, or `null` if none exists.
     */
    getOverlayElement: () => HTMLElement | null;
    /**
     * Clears the current selection in the Quill editor by setting it to `null`.
     * This effectively removes any active text selection.
     *
     * @remarks
     * Useful for resetting the editor's selection state, such as after formatting actions.
     */
    setSelection: () => void;
    /**
     * Callback invoked when the blot is hidden.
     * Override this method to implement custom hide behavior.
     */
    onHide: () => void;
}

/**
 * Provides caret (text cursor) manipulation actions for the Quill editor, including moving the caret
 * backward, placing the caret before or after a specified blot, and handling keyboard navigation events.
 *
 * This class is designed to work with the Quill editor and the Blot Formatter overlay, enabling precise
 * caret placement and navigation around custom blots (such as images or embeds) within the editor.
 *
 * @remarks
 * - Integrates with the Quill editor instance and its formatting specifications.
 * - Handles keyboard events to facilitate intuitive caret movement for users.
 * - Ensures proper event listener management to prevent memory leaks.
 *
 * @public
 */
export declare class CaretAction extends Action {
    /**
     * Moves the caret (text cursor) backward by a specified number of characters within the current selection.
     *
     * If the caret is at the beginning of a text node, it attempts to move to the end of the previous sibling text node.
     * If there is no previous sibling or the selection is not valid, the caret position remains unchanged.
     *
     * @param n - The number of characters to move the caret back. Defaults to 1.
     */
    static sendCaretBack: (n?: number, debug?: boolean) => void;
    /**
     * Places the caret (text cursor) immediately before the specified blot in the Quill editor.
     *
     * @param quill - The Quill editor instance.
     * @param targetBlot - The blot before which the caret should be placed.
     */
    static placeCaretBeforeBlot: (quill: any, targetBlot: Blot, debug?: boolean) => void;
    /**
     * Places the caret (text cursor) immediately after the specified blot in the Quill editor.
     *
     * This method first clears any existing selection and ensures the editor is focused.
     * It then calculates the index of the target blot and determines whether it is the last blot in the document.
     * - If the target blot is the last one, the caret is placed at the very end of the document.
     * - Otherwise, the caret is positioned just after the target blot, using a combination of Quill's selection API
     *   and a native browser adjustment to avoid placing the caret inside a formatting span wrapper.
     *
     * @param quill - The Quill editor instance.
     * @param targetBlot - The blot after which the caret should be placed.
     */
    static placeCaretAfterBlot: (quill: any, targetBlot: Blot, debug?: boolean) => void;
    /**
     * Initializes event listeners for the CaretAction.
     *
     * Adds a 'keyup' event listener to the document and an 'input' event listener
     * to the Quill editor's root element. Both listeners trigger the `onKeyUp` handler.
     *
     * @remarks
     * This method should be called when the action is created to ensure proper
     * caret handling and formatting updates in response to user input.
     */
    onCreate: () => void;
    /**
     * Cleans up event listeners attached by this action.
     *
     * Removes the 'keyup' event listener from the document and the 'input' event listener
     * from the Quill editor's root element to prevent memory leaks and unintended behavior
     * after the action is destroyed.
     */
    onDestroy: () => void;
    /**
     * Handles the keyup event for caret navigation around a target blot in the editor.
     *
     * - If a modal is open or there is no current formatting specification, the handler exits early.
     * - If the left arrow key is pressed, places the caret before the target blot and hides the formatter UI.
     * - If the right arrow key is pressed, places the caret after the target blot and hides the formatter UI.
     *
     * @param e - The keyboard event triggered by the user's keyup action.
     */
    onKeyUp: (e: KeyboardEvent) => void;
}

declare type CompressorOptions = {
    jpegQuality: number;
    maxWidth?: number | null;
    styles?: {
        modalBackground?: {
            [key: string]: any;
        } | null | undefined;
        modalContainer?: {
            [key: string]: any;
        } | null | undefined;
        buttonContainer?: {
            [key: string]: any;
        } | null | undefined;
        buttons?: {
            [key: string]: any;
        } | null | undefined;
    } | null | undefined;
    buttons: {
        continue: {
            className: string;
            style?: {
                [key: string]: any;
            } | null | undefined;
        };
        cancel: {
            className: string;
            style?: {
                [key: string]: any;
            } | null | undefined;
        };
        moreInfo: {
            className: string;
            style?: {
                [key: string]: any;
            } | null | undefined;
        };
    };
    text: {
        prompt: string;
        moreInfo: string | null;
        reducedLabel: string;
        nothingToDo: string;
    };
    icons: {
        continue: string;
        moreInfo: string;
        cancel: string;
    };
};

declare type Constructor<T> = new (...args: any[]) => T;

/**
 * Factory function to create a custom Quill Image blot class supporting additional attributes.
 *
 * This function returns a class extending Quill's native Image blot, adding support for the `title` attribute
 * (in addition to `alt`, `height`, and `width`). The returned class overrides the static `formats` method
 * to extract these attributes from the DOM node, and the instance `format` method to set or remove them.
 *
 * @param QuillConstructor - The Quill constructor or instance used to import the base Image blot.
 * @returns A custom Image blot class supporting `alt`, `height`, `width`, and `title` attributes.
 *
 * @remarks
 * - This is useful for enabling the `title` attribute on images in Quill editors, which is not supported by default.
 * - See https://github.com/slab/quill/pull/4350 for related discussion.
 *
 * @example
 * ```typescript
 * const CustomImageBlot = createAltTitleImageBlotClass(Quill);
 * Quill.register(CustomImageBlot);
 * ```
 */
export declare const createAltTitleImageBlotClass: (QuillConstructor: any) => any;

/**
 * Creates a custom Quill Attributor class for handling iframe alignment.
 *
 * This attributor allows alignment of iframe elements within the Quill editor by
 * applying a CSS class and managing related dataset properties. It also handles
 * width styling and tracks whether the width is relative (percentage-based).
 *
 * @param QuillConstructor - The Quill constructor or Quill instance used to import Parchment.
 * @returns A class extending Quill's ClassAttributor, customized for iframe alignment.
 *
 * @example
 *   this.Quill = this.quill.constructor
 *   const IframeAlignClass = createIframeAlignAttributor(this.Quill);
 *   this.IframeAlign = new IframeAlignClass();
 *   this.Quill.register({
 *     'formats/iframeAlign': this.IframeAlign,
 *     'attributors/class/iframeAlign': this.IframeAlign,
 *   }, true);
 *
 * @remarks
 * - Supported alignments: 'left', 'center', 'right'.
 * - Adds/removes the `ql-iframe-align` class and manages `data-blot-align` and `--resize-width` style.
 * - Handles both string and object values for alignment.
 */
export declare const createIframeAlignAttributor: (QuillConstructor: any) => AttributorClass;

/**
 * Creates a custom Quill Attributor class for handling image alignment within a span wrapper.
 *
 * This attributor enables alignment formatting (`left`, `center`, `right`) for images by wrapping them in a `<span>`
 * element with a specific class and managing related attributes such as `data-title` for captions and width handling.
 * It also ensures that the image's alignment and caption are properly reflected in the DOM and Quill's internal model.
 *
 * @param QuillConstructor - The Quill constructor or instance used to import Parchment and related classes.
 * @returns A custom AttributorClass for image alignment formatting.
 *
 * @example
 *   this.Quill = this.quill.constructor
 *   const ImageAlignClass = createImageAlignAttributor(this.Quill);
 *   this.ImageAlign = new ImageAlignClass();
 *   this.Quill.register({
 *     'formats/imageAlign': this.ImageAlign,
 *     'attributors/class/imageAlign': this.ImageAlign,
 *   }, true);
 *
 * @remarks
 * - The attributor manages both string and object values for alignment, supporting additional metadata like `title`.
 * - It ensures the wrapper span is not editable and synchronizes width information for correct CSS rendering.
 * - Handles edge cases where Quill merges inline styles, ensuring the image alignment format is reapplied as needed.
 * - The `remove` and `value` methods ensure proper cleanup and retrieval of alignment state.
 */
export declare const createImageAlignAttributor: (QuillConstructor: any) => AttributorClass;

/**
 * Factory function to create a custom Quill video blot class with responsive styling.
 *
 * @param QuillConstructor - The Quill constructor or instance used to import the base video format.
 * @returns A class extending Quill's VideoEmbed, enforcing a 16:9 aspect ratio and full width for embedded videos.
 *
 * @remarks
 * The returned class, `VideoResponsive`, overrides the default video blot to ensure videos are displayed responsively.
 * The aspect ratio is controlled via the static `aspectRatio` property and applied to the video element's style.
 *
 * @example
 * ```typescript
 * const VideoResponsive = createResponsiveVideoBlotClass(Quill);
 * Quill.register(VideoResponsive);
 * ```
 */
export declare const createResponsiveVideoBlotClass: (QuillConstructor: any) => any;

/**
 * The `DefaultAligner` class provides alignment management for Quill editor blots (such as images and iframes).
 * It implements the `Aligner` interface and is responsible for applying, clearing, and querying alignment
 * formatting on supported blots within the editor.
 *
 * This class supports both inline and block-level blots, and can be configured with custom alignment options.
 * It interacts with Quill's Parchment module to determine blot types and scopes, and uses formatter options
 * to control alignment and resizing behaviors.
 *
 * Key features:
 * - Registers available alignments and exposes them via `getAlignments()`.
 * - Applies alignment to blots using `setAlignment()`, handling both inline (e.g., images) and block (e.g., iframes) elements.
 * - Clears alignment formatting from blots with `clear()`.
 * - Determines blot type and scope with utility methods (`isInlineBlot`, `isBlockBlot`, `hasInlineScope`, `hasBlockScope`).
 * - Checks and retrieves current alignment with `isAligned()` and `getAlignment()`.
 * - Optionally sets relative width for images if configured.
 * - Ensures editor usability by adding a new paragraph if the editor contains only an aligned image.
 *
 * @remarks
 * This class is intended for internal use by the BlotFormatter module and expects a properly configured
 * `BlotFormatter` instance with alignment and resize options.
 *
 * @example
 * ```typescript
 * const aligner = new DefaultAligner(formatter);
 * aligner.setAlignment(blot, 'center');
 * ```
 *
 * @see Aligner
 * @see BlotFormatter
 */
export declare class DefaultAligner implements Aligner {
    alignments: Record<string, Alignment>;
    options: Options;
    formatter: BlotFormatter;
    private debug;
    private Scope;
    constructor(formatter: BlotFormatter);
    /**
     * Retrieves all available alignment options.
     *
     * @returns {Alignment[]} An array of alignment objects defined in the `alignments` property.
     */
    getAlignments: () => Alignment[];
    /**
     * Clears alignment formatting from the given blot if it is an image or iframe.
     *
     * - For image blots (`IMG`), if the parent is a `SPAN`, removes the alignment attribute from the parent.
     * - For iframe blots (`IFRAME`), removes the alignment attribute directly from the blot.
     *
     * @param blot - The blot to clear alignment formatting from, or `null` if none.
     */
    clear: (blot: Blot | null) => void;
    /**
     * Determines whether the given blot is an inline blot.
     *
     * Checks if the provided `blot` has a scope that matches the inline blot scope.
     *
     * @param blot - The blot instance to check.
     * @returns `true` if the blot is an inline blot; otherwise, `false`.
     */
    isInlineBlot: (blot: Blot) => boolean;
    /**
     * Determines if the provided blot is a block-level blot.
     *
     * Checks the blot's static scope against the BLOCK scope constant,
     * and returns true if it matches the BLOCK_BLOT type.
     *
     * @param blot - The blot instance to check.
     * @returns True if the blot is a block blot; otherwise, false.
     */
    isBlockBlot: (blot: Blot) => boolean;
    /**
     * Determines whether the given blot has an inline scope.
     *
     * @param blot - The blot instance to check.
     * @returns `true` if the blot's scope includes the inline scope; otherwise, `false`.
     */
    hasInlineScope: (blot: Blot) => boolean;
    /**
     * Determines whether the given blot has block-level scope.
     *
     * @param blot - The blot instance to check.
     * @returns `true` if the blot's scope includes block-level formatting; otherwise, `false`.
     */
    hasBlockScope: (blot: Blot) => boolean;
    /**
     * Determines whether the given blot is aligned.
     *
     * If an alignment is specified, returns `true` only if the blot's alignment matches the specified alignment.
     * If no alignment is specified, returns `true` if the blot has any alignment.
     *
     * @param blot - The blot to check for alignment.
     * @param alignment - The alignment to compare against, or `null` to check for any alignment.
     * @returns `true` if the blot is aligned (and matches the specified alignment, if provided); otherwise, `false`.
     */
    isAligned: (blot: Blot, alignment: Alignment | null) => boolean;
    /**
     * Retrieves the alignment value from the given blot's DOM node.
     *
     * @param blot - The blot instance whose alignment is to be determined.
     * @returns The alignment value as a string if present, otherwise `undefined`.
     */
    getAlignment: (blot: Blot) => string | undefined;
    /**
     * Sets the alignment for a given blot (content element) in the editor.
     *
     * This method checks if the blot is already aligned as requested. If not, it clears any existing alignment,
     * and applies the new alignment based on the blot type (inline or block). For inline blots (such as images),
     * it may also set a relative width attribute if required by the configuration. For block blots (such as iframes),
     * it applies the alignment directly.
     *
     * Additionally, if the editor contains only an image, it ensures a new paragraph is added underneath to maintain
     * editor usability.
     *
     * @param blot - The blot (content element) to align. Can be `null`, in which case no action is taken.
     * @param alignment - The alignment to apply (e.g., 'left', 'center', 'right'). Must correspond to a key in `this.alignments`.
     */
    setAlignment: (blot: Blot | null, alignment: string) => void;
}

export declare const DefaultOptions: Options;

/**
 * Represents an action that handles deletion of a selected blot in a Quill editor.
 *
 * The `DeleteAction` class listens for keyboard and input events to detect when the user
 * presses the 'Delete' or 'Backspace' keys. If a blot is selected and no modal is open,
 * it deletes the corresponding blot from the editor and hides the formatter UI.
 *
 * @remarks
 * - Event listeners are attached on creation and removed on destruction to prevent memory leaks.
 * - The action only triggers when a blot is selected and no modal dialog with attribute `data-blot-formatter-modal` is open.
 *
 * @example
 * ```typescript
 * const deleteAction = new DeleteAction(formatter);
 * deleteAction.onCreate();
 * // ... later
 * deleteAction.onDestroy();
 * ```
 */
export declare class DeleteAction extends Action {
    /**
     * Initializes event listeners for the delete action.
     *
     * - Adds a 'keyup' event listener to the document that triggers `_onKeyUp`.
     * - Adds an 'input' event listener to the Quill editor's root element that also triggers `_onKeyUp`.
     *
     * This method should be called when the delete action is created to ensure
     * proper handling of keyboard and input events.
     */
    onCreate: () => void;
    /**
     * Cleans up event listeners associated with the action.
     *
     * Removes the 'keyup' event listener from the document and the 'input' event listener
     * from the Quill editor's root element to prevent memory leaks and unintended behavior
     * after the action is destroyed.
     */
    onDestroy: () => void;
    /**
     * Handles the keyup event for delete and backspace actions.
     *
     * If no modal is open and a current spec is selected, checks if the pressed key is
     * 'Delete' or 'Backspace'. If so, finds the target blot element in the Quill editor,
     * determines its index, and deletes one character at that index. Afterwards, hides the formatter UI.
     *
     * @param e - The keyboard event triggered by the user.
     */
    private _onKeyUp;
}

declare type DeleteOptions = {
    allowKeyboardDelete: boolean;
};

/**
 * Represents a specification for handling iframe-based video blots within the Quill editor.
 * Extends {@link UnclickableBlotSpec} to provide formatting capabilities for video iframes
 * that should not be clickable.
 *
 * @remarks
 * This class is intended to be used with the BlotFormatter to manage video embeds
 * that use iframes, such as YouTube or Vimeo videos.
 *
 * @param formatter - The {@link BlotFormatter} instance used to apply formatting logic.
 */
export declare class IframeVideoSpec extends UnclickableBlotSpec {
    constructor(formatter: BlotFormatter);
}

declare type ImageOptions = {
    allowAltTitleEdit: Boolean;
    registerImageTitleBlot: Boolean;
    altTitleModalOptions: AltTitleModalOptions;
    registerArrowRightFix: Boolean;
    allowCompressor: Boolean;
    compressorOptions: CompressorOptions;
    linkOptions: LinkOptions;
};

/**
 * Represents a specification for handling image elements within a Quill editor instance.
 *
 * `ImageSpec` extends `BlotSpec` to provide image-specific functionality, including:
 * - Initializing event listeners for image selection.
 * - Determining available actions (link editing, alt/title editing, compression) based on formatter options.
 * - Managing the currently selected image element.
 * - Handling UI display and cleanup when the image overlay is shown or hidden.
 *
 * @remarks
 * This class is intended to be used as part of the Quill Blot Formatter extension for rich image editing.
 *
 * @extends BlotSpec
 */
export declare class ImageSpec extends BlotSpec {
    img: HTMLElement | null;
    constructor(formatter: BlotFormatter);
    /**
     * Initializes the image spec by attaching a click event listener to the Quill editor's root element.
     * The event listener triggers the `onClick` handler when the root element is clicked.
     */
    init: () => void;
    /**
     * Returns an array of available actions for the image spec, based on the current formatter options and image eligibility.
     *
     * The returned actions may include:
     * - `LinkAction`: If link editing is allowed (`image.linkOptions.allowLinkEdit`).
     * - `AttributeAction`: If alt/title editing