@enzedonline/quill-blot-formatter2
Version:
An update for quill-blot-formatter to make quilljs v2 compatible.
1,143 lines (1,121 loc) • 94.1 kB
TypeScript
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 _enabled;
private _startX;
private _startY;
private _abortController?;
private _resizeObserver?;
private _tooltipContainPosition?;
ImageAlign: AttributorClass;
IframeAlign: AttributorClass;
static cache: {
ImageAlign: any;
IframeAlign: any;
};
static registerFormats(quillConstructor: typeof default_2, debug?: boolean): void;
static registerImageAlign(quillConstructor: typeof default_2, debug?: boolean): void;
static registerIframeAlign(quillConstructor: typeof default_2, debug?: boolean): void;
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;
/**
* Indicates whether the blot formatter is currently active.
*
* When `true`, formatting controls and interactions are available.
* When `false`, the formatter is disabled and will not react to user input. Proxy images are hidden by css.
*
* @returns True if the formatter is enabled; otherwise false.
*/
get enabled(): boolean;
/**
* Enables or disables the blot formatter UI.
*
* When set to false, any currently visible formatter interface (such as
* overlays, resize handles, or toolbars) is immediately hidden via `hide()`.
* While disabled, user interactions that would normally trigger the formatter
* are ignored until re-enabled.
*
* @param value True to enable the formatter; false to disable it and hide all active UI.
*/
set enabled(value: boolean);
/**
* MutationObserver monitoring the Quill editor container's class attribute to track disabled state.
*
* When the container gains or loses the 'ql-disabled' CSS class, this observer updates the
* formatter's `enabled` property accordingly, ensuring the formatter UI is automatically
* disabled/enabled in sync with the editor.
*
* Behavior:
* - Listens only for attribute mutations on the 'class' attribute.
* - Sets `this.enabled` to false if 'ql-disabled' is present; true otherwise.
*
* Rationale:
* Centralizes Quill's disabled state propagation without requiring explicit event hooks or
* modifications to Quill's core. This avoids polling and keeps formatter state consistent.
*
* Lifecycle:
* - Should be started after the editor container is available.
* - Must be disconnected during teardown (e.g., in a destroy/dispose method) to prevent memory leaks.
*
* Caveats:
* - Assumes the presence and semantic meaning of the 'ql-disabled' class as used by Quill.
* - If external code mutates classes frequently, this may fire often; the handler is intentionally lightweight.
*/
private _qlDisabledObserver;
/**
* 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.
* - For the quill container
* - Observes class attribute changes to detect disabled state.
*
* 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 press