/** * @description properties of editor's active state * @property previewDeviceMode - property containing information about the active mode of the preview ({@link PreviewDeviceMode}) */ declare enum EditorStatePropertyType { previewDeviceMode = "previewDeviceMode", panelPosition = "panelPosition", themeMode = "themeMode" } declare enum PanelPosition { BLOCKS_SETTINGS = "BLOCKS_SETTINGS", SETTINGS_BLOCKS = "SETTINGS_BLOCKS" } /** * @description modes of editor preview */ declare enum PreviewDeviceMode { DESKTOP = "DESKTOP", MOBILE = "MOBILE" } declare enum ThemeMode { LIGHT = "LIGHT", DARK = "DARK" } interface EditorState { [EditorStatePropertyType.previewDeviceMode]: PreviewDeviceMode; [EditorStatePropertyType.panelPosition]: PanelPosition; [EditorStatePropertyType.themeMode]: ThemeMode; } /** * @description Defines the allowed anchor sides for popovers. * @remarks Used to position popovers relative to a target element with a consistent vocabulary. * @enum {string} */ declare enum PopoverSide { TOP = "top", RIGHT = "right", BOTTOM = "bottom", LEFT = "left" } /** * @description Enumerates built-in AI popover intents. * @remarks Standardizes mapping from UI triggers to AI behaviors. * @enum {string} */ declare enum ExtensionPopoverType { AI_HIDDEN_PREHEADER = "aiHiddenPreheader", AI_SUBJECT = "aiSubject", AI_TEXT = "aiText" } /** * @description Ordered placement preferences for a popover. * @remarks Enables deterministic fallbacks when space is constrained. * @typedef {Array} PopoverPreferredSides */ type PopoverPreferredSides = PopoverSide[]; /** * @description Configuration for an AI-assisted popover. * @remarks Encapsulates anchoring, placement, intent, initial value, and completion callback. * @typedef {Object} AIPopoverOptions * @property {HTMLElement} targetElement Element the popover anchors to. * @property {PopoverPreferredSides} preferredSides Preferred sides in priority order. * @property {ExtensionPopoverType} type AI intent to execute. * @property {string} value Initial text context. * @property {(response: string) => void} onResult Callback fired with the AI result. */ interface AIPopoverOptions { /** * Element the popover anchors to. * @remarks Required to compute placement. */ targetElement: HTMLElement; /** * Preferred sides in priority order. * @remarks Drives fallback positioning. */ preferredSides: PopoverPreferredSides; /** * AI intent to execute. * @remarks One of `ExtensionPopoverType`. */ type: ExtensionPopoverType; /** * Initial text context. * @remarks Seeds AI generation. */ value: string; /** * Callback fired with the AI result. * @param response The generated string. */ onResult: (response: string) => void; } /** * @description Configuration for an emoji picker popover. * @remarks Reuses the same anchoring and result contract for emoji selection. * @typedef {Object} EmojiPopoverOptions * @property {HTMLElement} targetElement Element the popover anchors to. * @property {PopoverPreferredSides} preferredSides Preferred sides in priority order. * @property {(response: string) => void} onResult Callback with the selected emoji. */ interface EmojiPopoverOptions { /** * Element the popover anchors to. * @remarks Required to compute placement. */ targetElement: HTMLElement; /** * Preferred sides in priority order. * @remarks Drives fallback positioning. */ preferredSides: PopoverPreferredSides; /** * Callback with the selected emoji. * @param response The emoji string. */ onResult: (response: string) => void; } interface BaseImmutableNode { /** * @description * This method searches for all elements within the current node's subtree that match the specified selector. * For HTML nodes, the selector syntax follows the browser's standard querySelectorAll. * For CSS nodes, the selector syntax allows specific CSS-related queries: * * @{max-width:100px} - media, exact match. * * @*{max-width:100px} - media, should include text in { }. * * #test.class-2 - selector,exact match. * * *#test - selector, should include test. * * {display} - attribute, exact match. * * &{test comment text} - comment, exact match. * * &*{test comment} - comment, should include text in { }. * * selector examples: * @example * @{media all and (max-width: 100px)} h1.class#id {display} * @{media all and (max-width: 100px)} > h1.class#id > {display} * h1.class#id &{comment inside h1.class#id} * * @param selector - A string representing the CSS selector to query. * @returns The first matching node as `T`, or `undefined` if no match is found. * * @summary Searches for a single matching child element within the node's subtree, * delegating the query to appropriate HTML or CSS node query helpers based on the node type. */ querySelector(selector: string): T | undefined; /** * Retrieves all matching child elements within the node's subtree based on the provided selector. * * @description * This method searches for all elements within the current node's subtree that match the specified selector. * For HTML nodes, the selector syntax follows the browser's standard querySelectorAll. * For CSS nodes, the selector syntax allows specific CSS-related queries: * * for html nodes the selector syntax is similar to browser querySelector. * * for css nodes the syntax is: * * @{max-width:100px} - media, exact match. * * @*{max-width:100px} - media, should include text in { }. * * #test.class-2 - selector,exact match. * * *#test - selector, should include test. * * {display} - attribute, exact match. * * &{test comment text} - comment, exact match. * * &*{test comment} - comment, should include text in { }. * * selector examples: * @example * @{media all and (max-width: 100px)} h1.class#id {display} * @{media all and (max-width: 100px)} > h1.class#id > {display} * h1.class#id &{comment inside h1.class#id} * * @param selector - A string representing the CSS selector to query. * @returns An array of matching nodes as `T[],` or an empty array if no match is found. * * @summary Returns all matching elements within the current node's subtree, * delegating the query operation to either the HTML or CSS query helpers * based on the node type. */ querySelectorAll(selector: string): T[]; /** * Finds the closest ancestor of the current node that matches the provided selector. * * @description * This method searches for the nearest parent node of the current node that matches * the specified selector. The query is delegated to different helper objects * based on whether the current node belongs to the HTML or CSS node type. * * For HTML nodes, the selector syntax follows the browser's standard querySelectorAll. * For CSS nodes, the selector syntax allows specific CSS-related queries: * * for html nodes the selector syntax is similar to browser querySelector. * * for css nodes the syntax is: * * @{max-width:100px} - media, exact match. * * @*{max-width:100px} - media, should include text in { }. * * #test.class-2 - selector,exact match. * * *#test - selector, should include test. * * {display} - attribute, exact match. * * &{test comment text} - comment, exact match. * * &*{test comment} - comment, should include text in { }. * * selector examples: * @example * @{media all and (max-width: 100px)} h1.class#id {display} * @{media all and (max-width: 100px)} > h1.class#id > {display} * h1.class#id &{comment inside h1.class#id} * * @param selector - A string representing the selector to match the parent node. * @returns The closest matching parent node as `T`. * Returns `undefined` if no matching parent is found. * * @summary Searches for the closest parent element matching the selector, * utilizing appropriate query helpers based on whether the current node is HTML or CSS type. */ closest(selector: string): T | undefined; /** * @description * Retrieves the parent node of the current HTML or CSS node. * * @returns The parent node as an instance of `T`, or `undefined` if no parent exists. * * @throws {Error} If the node is not found during the operation or an internal error occurs. * * @summary Returns the parent node of the current node, using appropriate logic * based on whether the node is of HTML or CSS type. */ parent(): T | undefined; /** * Retrieves the child nodes of the current HTML or CSS node. * @returns An array of ImmutableNode instances representing the children. * @throws {Error} If the node is not found. */ children(): T[]; /** * Retrieves the child nodes of the current node. * * @description * This method fetches all child nodes of the current node, distinguishing * between HTML and CSS nodes to use the appropriate query methods. * * @returns An array of child nodes as `T[]`. * * @throws {Error} If the node is not found or an internal error occurs during retrieval. * * @summary Fetches all child nodes */ childNodes(): T[]; /** * Retrieves the sibling nodes of the current HTML or CSS node. * @returns An array of ImmutableNode instances representing the siblings. * @throws {Error} If the node is not found. */ siblings(): T[]; /** * Retrieves the type of the HTML node associated with the current object. * * for HTML node return type values are 'element', 'text', 'comment', 'document', 'doctype', 'documentFragment' * * for CSS node return type values are 'attr', 'comment', 'rule', 'media', 'document' * * @return {string} The type of the HTML node. * @throws {Error} If the node cannot be found. */ getType(): string | undefined; /** * Retrieves the next sibling of the current node. * * @description * This method finds and returns the next sibling of the current node in the document structure. * * @returns The next sibling node as `T`, or `undefined` if no next sibling exists. * * @throws {Error} If the node is not found or an internal error occurs during sibling lookup. * * @summary Fetches the next sibling node in the hierarchy, * distinguishing between HTML and CSS node types for querying. */ nextSibling(): T | undefined; /** * @description * Retrieves the next sibling of the current node that is an element. * * @returns The next element sibling as an instance, or `undefined` if no next element sibling exists. * * @throws {Error} If the node or its position is not found during the execution. * * @summary Locates and returns the next sibling that is an element node, taking into account the node type * (HTML or CSS). */ nextElementSibling(): T | undefined; /** * Retrieves the previous sibling of the current node that is an element. * * @description * This method locates and returns the closest previous sibling that is an element node. * * @returns The previous element sibling as an instance of `T`, or `undefined` if no such sibling exists. * * @throws {Error} If the node or its position is not found during the operation. * * @summary Finds and retrieves the previous sibling element node by traversing the node hierarchy, * using appropriate querying methods for HTML or CSS nodes. */ previousElementSibling(): T | undefined; /** * Retrieves the previous sibling of the current node. * * @description * This method finds and returns the previous sibling of the current node in the document structure. * * @returns The previous sibling node, or `undefined` if no previous sibling exists. * * @throws {Error} If the node is not found or an internal error occurs during sibling lookup. * * @summary Finds and retrieves the previous sibling node by querying the node hierarchy, * identifying whether the node belongs to the HTML or CSS domain. */ previousSibling(): T | undefined; /** * Retrieves the configuration object of the current node. * * @description * This method provides access to the config object associated with the current node. * The configuration can be set and modified by the user via the TemplateModifier * and utilized in future operations. * * @returns {Record} The configuration object of the current node. */ getNodeConfig(): Record; } /*********************************************************************************/ interface BaseImmutableHtmlNode extends BaseImmutableNode { /** * Retrieves the closest module ID associated with the current node. * * @description * This method traverses up the node tree to find the closest ancestor (or itself) * that has a moduleId in its node configuration. * * @returns {number | undefined} The module ID of the closest module element, or undefined if not found. */ getClosestModuleId(): number | undefined; /** * Retrieves the closest module element associated with the current node. * * @description * This method traverses up the node tree to find the closest ancestor (or itself) * that has a moduleId in its node configuration and returns it as an ImmutableHtmlNode. * * @returns {ImmutableHtmlNode | undefined} The closest module element, or undefined if not found. */ getClosestModuleElement(): ImmutableHtmlNode | undefined; /** * Converts the current node to an instance of ImmutableHtmlTextNode. * * @description * This method casts the current object as an instance of the ImmutableHtmlTextNode class. * It is used to explicitly interpret the current node as a text node. * * @returns {ImmutableHtmlTextNode} The current node casted to ImmutableHtmlTextNode. * * * @summary Casts the current node to ImmutableHtmlTextNode type, enabling text node-specific operations. */ asText(): ImmutableHtmlTextNode; /** * Converts the current node to an instance of ImmutableHtmlElementNode. * * @description * This method casts the current object as an instance of the ImmutableHtmlElementNode class. * It is used to explicitly interpret the current node as an HTML element node. * * @returns {ImmutableHtmlElementNode} The current node casted to ImmutableHtmlElementNode. * * @summary Casts the current node to ImmutableHtmlElementNode type, enabling operations specific to HTML element nodes. */ asElement(): ImmutableHtmlElementNode; /** * Retrieves module elements by their module ID. * * @description * This method searches for all elements within the current node's subtree that have * the specified module ID in their node configuration. Modules are identified by * having a `moduleId` property in their node config. * * @param id - The module ID to search for. * @returns An array of module elements matching the specified ID, or an empty array if no modules are found. */ getModuleElementsById(id: number): ImmutableHtmlNode[]; /** * Retrieves all module elements within the document. * * @description * This method searches for all elements within the current node's subtree that have * a module ID in their node configuration. A module element is any element that has * a `moduleId` property set in its node config. * * @returns An array of all module elements, or an empty array if no modules are found. */ getModuleElements(): ImmutableHtmlNode[]; } interface ImmutableHtmlTextNode extends BaseImmutableHtmlNode { /** * Retrieves the text content of the current HTML node. * * @returns {string} The text content of the node. * @throws {Error} If the specified node not found. */ getTextContent(): string; } /** DisplayCondition is a condition for displaying a node */ interface DisplayCondition { /** ID of the condition */ id: number; /** name of the condition */ name: string; /** description of the condition */ description: string; /** script to run before the condition */ beforeScript: string; /** script to run after the condition */ afterScript: string; /** extra custom data, can be set by user */ extraData?: string; conditionsCount?: number; } interface ImmutableHtmlElementNode extends ImmutableHtmlTextNode { /** * Retrieves the value of the specified attribute for the current HTML node. name is case-sensitive * @param name The name of the attribute to retrieve. * @returns The attribute value as a string or null if not found. * @throws {Error} If the node is not found. */ getAttribute(name: string): string | null; /** * Checks if the current HTML element has a specific CSS class applied. * @param className The name of the CSS class to check for. * @returns {boolean} True if the class is applied, otherwise false. * @throws {Error} If the node is not found. */ hasClass(className: string): boolean; /** * Retrieves the bounding client rectangle of the current HTML node. * * @returns {DOMRect} The bounding client rectangle of the element. * @throws {Error} If the node is not found. * @throws {Error} If the HTML element is not found. */ getBoundingClientRect(): DOMRect; /** * Retrieves the computed style value of the specified CSS property for the current HTML node. name is case-sensitive * @param name The name of the CSS property. * @returns The computed style value as a string or undefined if not found. * @throws {Error} If the node is not found. */ getComputedStyle(name: string): string | undefined; /** * Retrieves the list of CSS classes applied to the current HTML node. * @returns An array of class names as strings. * @throws {Error} If the node is not found. */ getClassList(): string[]; /** * Retrieves the tag name of the current HTML node. * @returns The tag name as a lowercase string. * @throws {Error} If the node is not found. */ getTagName(): string; /** * Retrieves the value attribute of the current HTML node. * @returns The value as a string. * @throws {Error} If the node is not found. */ getValue(): string; /** * Retrieves the inner HTML content of the current HTML node. * @returns The inner HTML as a string. * @throws {Error} If the node is not found. */ getInnerHTML(): string; /** * Retrieves the outer HTML content of the current HTML node. * @returns The outer HTML as a string. * @throws {Error} If the node is not found. */ getOuterHTML(): string; /** * Retrieves the inner text content of the current HTML node and its descendants. * This method concatenates the text content of the node and all its child nodes recursively. * * @returns {string} The inner text of the node and its descendants. * @throws {Error} If the node with the specified ID is not found. */ getInnerText(): string; /** * Retrieves the value of the specified style property for the current HTML node. name is case-sensitive. * @param name The name of the style property. * @returns The style value as a string or undefined if not found. * @throws {Error} If the node is not found or the property name is undefined. */ getStyle(name: string): string | undefined; getDisplayCondition(): DisplayCondition; } type ImmutableHtmlNode = ImmutableHtmlElementNode | ImmutableHtmlTextNode; /*********************************************************************************/ interface BaseImmutableCssNode extends BaseImmutableNode { /** * Checks if the current CSS node is commented. * * @description * This method determines if the current node has a commented property set to true. * It leverages the underlying API and node for the check. * * @returns {boolean} True if the node is commented, false otherwise. * * @throws {Error} If the API or node associated with the current object is not found. * * @summary Determines if the current node is commented, providing support for node inspection. */ isCommented(): boolean; /** * Converts the current node to an instance of ImmutableCssDocumentNode. * * @description * This method casts the current object as an instance of the ImmutableCssDocumentNode class. * It is used to explicitly interpret the current node as a CSS document node. * * @returns {ImmutableCssDocumentNode} The current node casted to ImmutableCssDocumentNode. * * @summary Casts the current node to ImmutableCssDocumentNode type, enabling CSS document-specific operations. */ asDocument(): ImmutableCssDocumentNode; /** * Converts the current node to an instance of ImmutableCssRuleNode. * * @description * This method casts the current object as an instance of the ImmutableCssRuleNode class. * It is used to explicitly interpret the current node as a CSS rule node. * * @returns {ImmutableCssRuleNode} The current node casted to ImmutableCssRuleNode. * * @summary Casts the current node to ImmutableCssRuleNode type, enabling CSS rule-specific operations. */ asRule(): ImmutableCssRuleNode; /** * Converts the current node to an instance of ImmutableCssAttributeNode. * * @description * This method casts the current object as an instance of the ImmutableCssAttributeNode class. * It is used to explicitly interpret the current node as a CSS attribute node. * * @returns {ImmutableCssAttributeNode} The current node casted to ImmutableCssAttributeNode. * * @summary Casts the current node to ImmutableCssAttributeNode type, enabling CSS attribute-specific operations. */ asAttribute(): ImmutableCssAttributeNode; /** * Converts the current node to an instance of ImmutableCssCommentNode. * * @description * This method casts the current object as an instance of the ImmutableCssCommentNode class. * It is used to explicitly interpret the current node as a CSS comment node. * * @returns {ImmutableCssCommentNode} The current node casted to ImmutableCssCommentNode. * * @summary Casts the current node to ImmutableCssCommentNode type, enabling CSS comment-specific operations. */ asComment(): ImmutableCssCommentNode; } type ImmutableCssDocumentNode = BaseImmutableCssNode; interface ImmutableCssCommentNode extends BaseImmutableCssNode { /** * Retrieves the text content of the current CSS comment node. * * @description * This method fetches the text content of the current CSS comment node * using the associated API and node details. * * @returns {string} - The text content of the CSS comment node. * * @throws {Error} - If the API or node associated with the current object is not found. * * @summary Fetches the text content of the CSS comment node for inspection or processing. */ getTextContent(): string; } interface ImmutableCssAttributeNode extends BaseImmutableCssNode { /** * Retrieves the name of the CSS attribute for the current node. * * @description * This method fetches the name of the attribute associated with the current CSS node. * * @returns {string} - The name of the CSS attribute. * * @throws {Error} - If the API or node associated with the current object cannot be found. * * @summary Fetches the name of the CSS attribute for inspection or usage. */ getAttributeName(): string; /** * Retrieves the value of the CSS attribute for the current node. * * @description * This method fetches the value of the attribute associated with the current CSS node. * * @returns {string} - The value of the CSS attribute. * * @throws {Error} - If the API or node associated with the current object cannot be found. * * @summary Fetches the value of the CSS attribute for inspection or usage. */ getAttributeValue(): string; } interface ImmutableCssRuleNode extends BaseImmutableCssNode { /** * Retrieves the selector string of the current CSS rule node. * * @description * This method fetches the selector assigned to the current CSS rule node * by utilizing the associated API and node details. The selector represents * the CSS rule's matching criteria, such as a class, ID, or element name. * * @returns {string} - The selector string of the CSS rule node. * * @throws {Error} - If the node associated with the current object cannot be found. * * @summary Fetches the selector of the CSS rule node for inspection or usage. */ getSelector(): string; } type ImmutableCssNode = ImmutableCssCommentNode | ImmutableCssAttributeNode | ImmutableCssRuleNode | ImmutableCssDocumentNode; /** * @description Config of editor custom font family. * @property name - name of the font family displayed in {@link UETag.FONT_FAMILY_SELECT} * @property fontFamily - css declaration of the font family inserted in document html/css * @property url - URL of font file */ interface CustomFontFamily { name: string; fontFamily: string; url: string; } interface BaseApi { /** * Gets the root immutable HTML node of the document template. * @returns The root ImmutableHtmlNode. */ getDocumentRootHtmlNode(): ImmutableHtmlNode; /** * Gets the root immutable CSS node of the document's stylesheet. * @returns The root ImmutableCssNode. */ getDocumentRootCssNode(): ImmutableCssNode; /** * Retrieves the current configuration settings of the editor instance. * @returns A record object containing editor configuration key-value pairs. */ getEditorConfig(): Record; /** * Translates a given key into the currently configured language, optionally interpolating parameters. * @param key - The localization key to translate. * @param params - Optional parameters for interpolation into the translated string. * @returns The translated string. */ translate(key: string, params?: Record): string; /** * @description Adds new font to editor config. */ addCustomFont(font: CustomFontFamily): void; /** * @description Sets editor click outside behavior. * Allows extension user to interact with additional extension UI without triggering block deselect. * @param ignore - disables/enables block deselect on click outside. */ ignoreClickOutside(ignore: boolean): void; /** * @description return information about active state of the editor */ getEditorState(): EditorState; /** * @description allows to subscribe to property of editor's active state */ onEditorStatePropUpdated(prop: EditorStatePropertyType, callback: (newValue: unknown, oldValue: unknown) => void): void; /** * Opens an AI popover anchored to a target element. * @param {AIPopoverOptions} options Options including target element, preferred sides, type, and initial value. * @see {AIPopoverOptions} */ openAIPopover(options: AIPopoverOptions): void; /** * Opens emoji picker popover anchored to a target element. * @param {EmojiPopoverOptions} options Options including target element, preferred sides, and onResult callback. * @see {EmojiPopoverOptions} */ openEmojiPopover(options: EmojiPopoverOptions): void; /** * @description Sends an event with the specified type and additional params. * The `type` represents the event identifier, while `params` contains * arbitrary contextual data related to the event. * This method performs a fire-and-forget operation and does not return a value. */ sendEvent(type: string, params: Record): void; } type HideElementState = 'desktop' | 'mobile' | undefined; declare class ModificationDescription { private key; private params; constructor(key: string); withParams(params: Record): ModificationDescription; getValue(): { key: string; params: Record; }; } interface TemplateModifier { /** * Start accumulate changes for HTML node passed to this method. * * @description * This method sets the HTML modifier to work with the specified HTML node, allowing further modifications on it. * * @summary Sets the HTML node for modification. * * @param node - The HTML node to modify. * @returns The HtmlNodeModifier instance for chaining. */ modifyHtml(node: ImmutableHtmlNode): HtmlNodeModifier; /** * Start accumulate changes for CSS node passed to this method. * * @description * This method sets the CSS modifier to work with the specified CSS node, enabling subsequent modifications to the node. * * @summary Sets the CSS node for modification. * * @param node - The CSS node to modify. * @returns The CssNodeModifier instance for chaining. */ modifyCss(node: ImmutableCssNode): CssNodeModifier; /** * Applies the accumulated modifications. * * @description * Executes all recorded actions and clears the actions list after application. * * @summary Applies all modifications made to HTML or CSS nodes. * * @param description - A description object providing additional context about the modifications being applied. */ apply(description: ModificationDescription): void; } /** * Represents a content container in a structure layout as a width percentage string. * * @description * This type defines containers that will hold actual content (text, images, buttons, etc.). * The string value represents the width percentage of the container within the structure. * * @example * ```typescript * // Create a content container that takes 50% of the structure width * const contentContainer: CreateStructureContentContainer = '50%'; * * // Use in layout array * const layout = ['25%', '50%', '25%']; // Three content containers * ``` */ type CreateStructureContentContainer = string; /** * Configuration for empty containers and spacers in email structure layouts. * * @description * This interface defines containers that don't hold content but serve layout purposes. * EMPTY containers are placeholders that can be converted to content containers later. * SPACER containers maintain spacing and alignment in the email layout. * * @example * ```typescript * // Create an empty container placeholder * const emptyContainer: CreateStructureEmptyContainer = { * width: '25%', * contentType: 'EMPTY' * }; * * // Create a spacer for layout alignment * const spacer: CreateStructureEmptyContainer = { * width: '10%', * contentType: 'SPACER' * }; * ``` */ interface CreateStructureEmptyContainer { /** The width percentage of the container (e.g., '25%', '50%') */ width: string; /** Type of empty container - EMPTY for placeholders, SPACER for layout spacing */ contentType: 'EMPTY' | 'SPACER'; } /** * Union type representing any container in a structure layout. * * @description * This type allows for flexible container definitions in email structure layouts. * Content containers are defined as width percentage strings, while empty containers * and spacers use the more detailed object interface with contentType specification. * * @example * ```typescript * // Mixed layout with content containers and empty containers * const layout: StructureLayout[] = [ * '30%', // Content container * {width: '20%', contentType: 'EMPTY'}, // Empty placeholder * '30%', // Content container * {width: '20%', contentType: 'SPACER'} // Layout spacer * ]; * ``` */ type StructureLayout = CreateStructureEmptyContainer | CreateStructureContentContainer; /** * Interface for modifying email structure layouts and container arrangements. * * @description * This interface provides methods to create new structures or modify existing ones * by defining container layouts and distributing content among them. It handles * the complex logic of email structure generation, including responsive design, * MSO compatibility, and proper content distribution across multiple containers. * * @example * ```typescript * // Create a two-column structure with content * modifier.structureModifier() * .updateLayoutWithContent( * ['60%', '40%'], * ['

Main Content

', '

Sidebar

'] * ); * * // Modify existing structure layout while preserving content * modifier.structureModifier() * .updateLayout([ * {width: '25%', contentType: 'EMPTY'}, * '50%', * '25%' * ]); * ``` */ interface MultiRowStructureModifier { /** * Creates a new structure by replacing the current one with specified containers and content. * * @description * This method completely replaces the existing structure with a new layout defined by * the container configuration and content distribution. It handles responsive design, * MSO compatibility, image resizing, and proper DOM positioning. * * @param layout - Array of container configurations defining the structure layout * @param containerContent - Array of HTML content strings to distribute among content containers * @returns HtmlNodeModifier for method chaining * * @example * ```typescript * // Create three-column layout with mixed containers * structureModifier.updateLayoutWithContent( * [ * {width: '25%', contentType: 'EMPTY'}, // Empty placeholder * '50%', // Main content area * '25%' // Sidebar area * ], * [ * '

Main Article

Content...

', * '
Sidebar Widget
' * ] * ); * ``` */ updateLayoutWithContent: (layout: StructureLayout[], containerContent: string[]) => HtmlNodeModifier; /** * Modifies the container layout of an existing structure while preserving existing content. * * @description * This method changes the container arrangement of the current multi fow structure without losing * existing content. Content is redistributed among the new container layout, with excess * content truncated or empty containers added as needed. * * @param layout - New container layout configuration for the structure * @returns HtmlNodeModifier for method chaining * * @example * ```typescript * // Change from two columns to three columns * structureModifier.updateLayout([ * '33%', // First content column * '33%', // Second content column * '34%' // Third content column * ]); * * // Add empty containers for spacing * structureModifier.updateLayout([ * {width: '20%', contentType: 'EMPTY'}, * '60%', * {width: '20%', contentType: 'EMPTY'} * ]); * ``` */ updateLayout: (layout: StructureLayout[]) => HtmlNodeModifier; } interface HtmlNodeModifier extends TemplateModifier { /** * Sets an attribute with the given name and value on the current HTML node. * * @description * This method modifies the current HTML node by adding or updating an attribute * with the specified name and value. It creates an action to record this modification * and stores it for later execution. * * @summary Adds or updates an attribute on the current HTML node. * * @param name - The name of the attribute to set. * @param value - The value of the attribute to set. * @returns The current HtmlNodeModifier instance for method chaining. */ setAttribute(name: string, value: string): HtmlNodeModifier; /** * Removes an attribute with the given name from the current HTML node. * * @description * This method modifies the current HTML node by removing an attribute with the specified name. * It creates an action to record this modification and stores it for later execution. * * @summary Removes an attribute from the current HTML node. * * @param name - The name of the attribute to remove. * @returns The current HtmlNodeModifier instance for method chaining. */ removeAttribute(name: string): HtmlNodeModifier; /** * Adds a class to the current HTML node. * * @description * This method modifies the current HTML node by appending a CSS class with the specified name. * It creates an action to record this modification and stores it for future execution. * * @summary Appends a CSS class to the current HTML node. * * @param name - The name of the CSS class to add. * @returns The current HtmlNodeModifier instance for method chaining. */ setClass(name: string): HtmlNodeModifier; /** * Removes a CSS class from the current HTML node. * * @description * This method modifies the current HTML node by removing a specified CSS class. * It creates an action to record this modification and stores it for later execution. * * @summary Removes a CSS class from the current HTML node. * * @param name - The name of the CSS class to remove. * @returns The current HtmlNodeModifier instance for method chaining. */ removeClass(name: string): HtmlNodeModifier; /** * Sets device-specific hidden state for the current HTML node. * * @description * The editor resolves the canonical target node for the current HTML node * and applies hidden config directly to that target. * * @param state - The hidden state to apply. * @returns The current HtmlNodeModifier instance for method chaining. */ setHiddenElementState(state: HideElementState): HtmlNodeModifier; /** * Sets the value attribute for the current HTML node. * * @description * This method modifies the current HTML node by updating the value attribute. * It creates an action to record this modification and stores it for later execution. * * @summary Updates the value attribute of the current HTML node. * * @param value - The value to set for the value attribute. * @returns The current HtmlNodeModifier instance for method chaining. */ setValue(value: string): HtmlNodeModifier; /** * Updates the inner HTML of the current HTML node. * * @description * This method replaces the current inner HTML of the node with the provided HTML string. * It removes the existing children and creates new nodes based on the provided HTML. * * @summary Replaces the inner HTML of the current HTML node. * * @param html - The HTML string to set as the new inner content. * @returns The current HtmlNodeModifier instance for method chaining. */ setInnerHtml(html: string): HtmlNodeModifier; /** * @description * Updates the text content of the HTML text node (ImmutableHtmlTextNode). * * @param {string} newValue - The new text value to be set for the current node. * @returns {HtmlNodeModifier} Returns the current HtmlNodeModifier instance for chaining. */ setText(newValue: string): HtmlNodeModifier; /** * Appends new HTML content to the current HTML node. * * @description * This method adds the provided HTML as children to the current node, placing it at the end of the node's child elements. * It utilizes the parsed HTML content to generate new nodes. * * @summary Appends new HTML content as children of the current HTML node. * * @param html - The HTML string to append. * @returns The current HtmlNodeModifier instance for method chaining. */ append(html: string): HtmlNodeModifier; /** * Prepends new HTML content to the current HTML node. * * @description * This method adds the provided HTML as the first child of the current node. * It parses the given HTML and calculates its position to ensure it is placed before any existing child nodes. * * @summary Prepends new HTML content as the first child of the current HTML node. * * @param html - The HTML string to prepend. * @returns The current HtmlNodeModifier instance for method chaining. */ prepend(html: string): HtmlNodeModifier; /** * Replaces the current HTML node with the provided HTML content. * * @description * This method removes the current HTML node and inserts the provided HTML content in its place. * The new content is parsed and positioned correctly in the DOM tree. * * @summary Replaces the current HTML node with new HTML content. * * @param html - The HTML string to replace the current node with. * @returns The current HtmlNodeModifier instance for method chaining. */ replaceWith(html: string): HtmlNodeModifier; /** * Sets a CSS style property on the current HTML node. * * @description * This method modifies the current HTML node by adding or updating a specified CSS style property. * * @summary Adds or updates a CSS style property on the current HTML node. * * @param property - The name of the CSS property to set. * @param value - The value of the CSS property to set. * @returns The current HtmlNodeModifier instance for method chaining. */ setStyle(property: string, value: string): HtmlNodeModifier; /** * Removes a CSS style property from the current HTML node. * * @description * This method modifies the current HTML node by removing a specified CSS style property. * * @summary Removes a CSS style property from the current HTML node. * * @param property - The name of the CSS property to remove. * @returns The current HtmlNodeModifier instance for method chaining. */ removeStyle(property: string): HtmlNodeModifier; /** * Deletes the current HTML node. * * @description * This method removes the current HTML node from the DOM tree by generating the appropriate actions. * * @summary Removes the current HTML node from the DOM tree. * * @returns The current HtmlNodeModifier instance for method chaining. */ delete(): HtmlNodeModifier; /** * Sets a display condition for the current HTML node. * * @description * This method associates a display condition with the current HTML node, which determines * whether the node should be rendered based on the specified condition's logic. * The display condition includes details such as an ID, name, description, and associated scripts * that are executed before and after evaluating the condition. * * @summary Configures a display condition for the current HTML node. * * @param condition - An object representing the display condition to apply, * including its ID, name, description, and associated scripts. * @returns The current HtmlNodeModifier instance for method chaining. */ setDisplayCondition(condition: DisplayCondition): HtmlNodeModifier; /** * Sets a custom configuration object for the current HTML node. * * @description * This method allows users to define a configuration object for the current HTML node. * The configuration can serve as a replacement for traditional HTML attributes, enabling * the attachment of custom data or settings to the node without altering its attributes. * * @summary Assigns a configuration object to the current HTML node. * * @param config - The configuration object to associate with the current node. * @returns The current HtmlNodeModifier instance for method chaining. */ setNodeConfig(config: Record): HtmlNodeModifier; /** * Returns a modifier for creating and modifying email template structures with containers. * * @description * This method provides access to the StructureModifier, which allows creating new structures * or modifying existing ones using containers with different widths. The structure modifier * handles complex email structure generation logic, including responsive design, * MSO/Outlook compatibility, proper content distribution between containers, * automatic image scaling, and indentation handling. * * @summary Provides access to the interface for modifying email template structures. * * @returns StructureModifier for creating and modifying email structures * * @example * ```typescript * // Create a two-column structure * htmlModifier.structureModifier() * .updateLayoutWithContent( * ['60%', '40%'], * ['

Main Content

', '

Sidebar

'] * ); * * // Modify existing structure * htmlModifier.structureModifier() * .updateLayout([ * {width: '25%', contentType: 'EMPTY'}, * '50%', * '25%' * ]); * ``` */ multiRowStructureModifier(): MultiRowStructureModifier; /** * Returns the target Html node being modified. */ getTargetNode(): ImmutableHtmlNode; } interface CssNodeModifier extends TemplateModifier { /** * Inserts a CSS rule before a specified CSS node. * * @description * This method parses the provided CSS string and inserts the resulting rule or media * node before the specified CSS node in the tree. Throws an error if the serialized node * is not a rule or media type. * * @summary Inserts a CSS rule or media before a specified node. * * @param css - The CSS rule string to insert. * @param beforeNode - The CSS node before which the rule is to be inserted. * @returns The current CssNodeModifier instance for chaining. */ insertRuleBefore(css: string, beforeNode: ImmutableCssNode): CssNodeModifier; /** * Inserts a CSS rule after a specified CSS node. * * @description * This method parses the provided CSS string and inserts the resulting rule or media * node after the specified CSS node in the tree. Throws an error if the serialized node * is not a rule or media type. * * @summary Inserts a CSS rule or media after a specified node. * * @param css - The CSS rule string to insert. * @param afterNode - The CSS node after which the rule is to be inserted. * @returns The current CssNodeModifier instance for chaining. */ insertRuleAfter(css: string, afterNode: ImmutableCssNode): CssNodeModifier; /** * Appends a CSS rule to the current CSS node. * * @description * This method adds the provided CSS rule or media node as the last child of the current * CSS node. Throws an error if the serialized node is not a rule or media type. * * @summary Appends a CSS rule or media as the last child. * * @param css - The CSS rule string to append. * @returns The current CssNodeModifier instance for chaining. */ appendRule(css: string): CssNodeModifier; /** * Prepends a CSS rule to the current CSS node. * * @description * This method adds the provided CSS rule or media node as the first child of the current * CSS node. Throws an error if the serialized node is not a rule or media type. * * @summary Prepends a CSS rule or media as the first child. * * @param css - The CSS rule string to prepend. * @returns The current CssNodeModifier instance for chaining. */ prependRule(css: string): CssNodeModifier; /** * Removes the current CSS rule from the CSS node. * * @description * This method deletes the current node, provided it is a rule or media type. * An error is thrown if the node is not of these supported types. * * @summary Removes the current CSS rule or media node. * * @returns The current CssNodeModifier instance for chaining. */ removeRule(): CssNodeModifier; /** * Sets a CSS property on the current CSS node. * * @description * This method updates or adds a CSS property with the specified name and value * in the corresponding CSS rule. If multiple properties with the same name are found, * an error will be thrown. * * @summary Adds or updates a CSS property in the current CSS node. * * @param name - The name of the CSS property to set. * @param value - The value of the CSS property to set. * @returns The current CssNodeModifier instance for chaining. */ setProperty(name: string, value: string): CssNodeModifier; /** * Removes a CSS property from the current CSS node. * * @description * This method deletes a CSS property with the specified name from the corresponding * CSS rule. If multiple properties with the same name are found, an error will be thrown. * * @summary Deletes a CSS property from the current CSS node. * * @param name - The name of the CSS property to remove. * @returns The current CssNodeModifier instance for chaining. */ removeProperty(name: string): CssNodeModifier; /** * Returns the target CSS node being modified. */ getTargetNode(): ImmutableCssNode; } interface BaseModifierApi { /** * Gets a modifier instance for performing operations on the document's template. * @returns A TemplateModifier instance capable of modifying HTML and CSS nodes. */ getDocumentModifier(): TemplateModifier; } interface BlockApi extends BaseApi, BaseModifierApi { /** * @deprecated use {@link getDocumentRootHtmlNode} instead * Gets the root immutable HTML node of the document template. * @returns The root ImmutableHtmlNode. */ getDocumentRoot(): ImmutableHtmlNode; /** * Sets the view-only state for the current block context. * @param viewOnly - If true, interactions might be restricted. */ setViewOnly(viewOnly: boolean): void; /** * Gets the current hide-element state for the provided node. * The editor resolves the canonical node that owns the visibility config. * * @param target - The node to inspect. * @returns Current hide-element state. */ getHiddenElementState(target: ImmutableHtmlNode): HideElementState; } /** * Provides API access for custom Block Renderer implementations. * Inherits base API functionalities like translation and config access. */ type BlockRendererApi = BaseApi; /** * Provides API access for Blocks Panel implementations. * Inherits base API functionalities like translation and config access. */ type BlocksPanelApi = BaseApi; /** * Provides API access for Context Action implementations. * Inherits base API functionalities and template modification capabilities. */ interface ContextActionApi extends BaseApi, BaseModifierApi { } interface ControlApi extends BaseApi, BaseModifierApi { /** * Sets the visibility of a specific UI element within the control's scope. * @param uiElementName - The ID of the UI element to show/hide. * @param isVisible - True to show the element, false to hide it. */ setVisibility(uiElementName: string, isVisible: boolean): void; /** * @description Sets a specific attribute on a target UI element within the control's scope. * Use attributes defined in {@link UEAttr}. * @param uiElementName - The ID of the target UI element. * @param attribute - The name of the attribute to set (should be one of UEAttr). * @param value - The value to set for the attribute. */ setUIEAttribute(uiElementName: string, attribute: string, value: unknown): void; /** * Updates the values of multiple UI elements within the control's scope at once. * @param valuesMap - A record object where keys are UI element IDs and values are their new values. */ updateValues(valuesMap: Record): void; /** * Updates the value of single UI element within the control's scope * @param path - path of updated UI element * @param value - value of updated UI element * @example * ```typescript * // update the value of the input with the name 'text' * this.api.updateUIElementValue('text', 'updated value'); * // update the value of the input with name 'text' in the first item of the {@link UIElementType.REPEATABLE} element with name 'items' * this.api.updateUIElementValue('items[0].text', 'updated value'); * ``` */ updateUIElementValue(path: string, value: unknown): void; /** * @description Returns the current values of all UI elements managed by this control. * @returns A record object where keys are UI element IDs and values are their current values. */ getValues(): Record; /** * Registers a callback function to be invoked when the value of a specific UI element changes. * @param uiElementName - The ID of the UI element to listen to. * @param callback - The function to call on value change, receiving the new and old values as well * as the value index if it's a part of repeatable ui element. */ onValueChanged(uiElementName: string, callback: (newValue: unknown, oldValue: unknown, index?: number) => void): void; /** * Updates the title of a settings panel tab with raw HTML content. * @param tabId - The ID of the tab whose title should be updated. * @param html - HTML string to render as the tab title. */ setSettingsPanelTabTitleHtml(tabId: string, html: string): void; } interface ExtensionPlatformRequestOptions { method?: string; headers?: HeadersInit; body?: BodyInit | null; credentials?: RequestCredentials; /** * Uses native fetch transport instead of editor HttpClient. Required for * streaming/SSE responses such as ChatKit thread streams. */ streaming?: boolean; /** Cancels the underlying editor HttpClient request when aborted. */ signal?: AbortSignal | null; } interface ExtensionPlatformApi { /** * Fetch-like wrapper around the editor HttpClient. * * Only a supported subset of `RequestInit` is accepted: * `method`, `headers`, `body`, `credentials`, `streaming`, and `signal`. * The URL must be relative; the editor resolves the correct backend base URL * and runs the request through its existing auth pipeline. * HTTP error statuses still resolve to a `Response` object, matching native fetch. */ fetch(url: string, init?: ExtensionPlatformRequestOptions): Promise; } type ExternalDisplayConditionsApi = BaseApi; type GeneralPanelTabApi = ControlApi; interface ModulesPanelTabApi extends BaseApi, BaseModifierApi { /** * Sets the visibility of a specific UI element within the tab's scope. * @param uiElementName - The ID of the UI element to show/hide. * @param isVisible - True to show the element, false to hide it. */ setVisibility(uiElementName: string, isVisible: boolean): void; /** * @description Sets a specific attribute on a target UI element within the tab's scope. * Use attributes defined in {@link UEAttr}. * @param uiElementName - The ID of the target UI element. * @param attribute - The name of the attribute to set (should be one of UEAttr). * @param value - The value to set for the attribute. */ setUIEAttribute(uiElementName: string, attribute: string, value: unknown): void; /** * Updates the values of multiple UI elements within the tab's scope at once. * @param valuesMap - A record object where keys are UI element IDs and values are their new values. */ updateValues(valuesMap: Record): void; /** * @description Returns the current values of all UI elements managed by this tab. * @returns A record object where keys are UI element IDs and values are their current values. */ getValues(): Record; /** * Registers a callback function to be invoked when the value of a specific UI element changes. * @param uiElementName - The ID of the UI element to listen to. * @param callback - The function to call on value change, receiving the new and old values. */ onValueChanged(uiElementName: string, callback: (newValue: unknown, oldValue: unknown) => void): void; } /** * Provides API access for Settings Panel implementations. * Inherits base API functionalities like translation and config access. */ type SettingsPanelApi = BaseApi; interface UIElementApi extends BaseApi { /** * @deprecated use {@link triggerValueChange} instead * */ onValueChanged(value: any): void; /** * Callback function intended to be called by the UIElement implementation when its value changes. * This typically signals the change to the managing control. * @param value - The new value of the UI element. */ triggerValueChange(value: unknown): void; } /** Type for class constructor references used in validation */ type Constructor = new (...args: unknown[]) => unknown; /** * Base class that provides validation logic for classes that require certain methods to be implemented. * Subclasses should define their own static REQUIRED_METHODS array and pass it to super() in the constructor. */ declare abstract class BaseValidatedClass { /** Set to track validated classes for performance optimization */ private static readonly validatedClasses; /** Map to store validation errors for each class */ private static readonly validationErrors; /** * Validates that all required methods are properly implemented in the subclass. * @param requiredMethods - Array of method names that must be implemented * @param classRef - Reference to the class constructor for validation caching */ constructor(requiredMethods: string[], classRef: Constructor); /** * Validates that all required methods are properly implemented in the subclass. * This validation runs only once per class type and results are cached. */ private validateImplementation; /** * Lifecycle method for cleaning up resources (e.g., removing DOM artifacts from document.body). * Override this method in subclasses to implement custom cleanup logic. * Called when the editor is reinitialized or the extension is uninstalled. */ destroy(): void; } declare enum BlockCompositionType { BLOCK = "BLOCK", CONTAINER = "CONTAINER", STRUCTURE = "STRUCTURE", STRIPE = "STRIPE" } /** * @description type declaring class which constructs instance of T */ declare type ConstructorOfType = new (...params: any[]) => T; declare class BlockRenderer extends BaseValidatedClass { api: BlockRendererApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * @deprecated - use {@link getPreviewInnerHtml} instead */ getPreviewHtml(_node: ImmutableHtmlNode): string | undefined; /** * @description returns custom content to be displayed inside the {@link Block} root TD element */ getPreviewInnerHtml(_node: ImmutableHtmlNode): string; } declare class Block extends BaseValidatedClass { /** Provides access to editor functionalities specific to this block instance. */ api: BlockApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * Determines if the block should be available for use in the editor. * Override to provide custom logic based on editor state or configuration. * @returns True if the block is enabled, false otherwise. Defaults to true. */ isEnabled(): boolean; /** * Determines if the block can be saved as a reusable module by the user. * @returns True if the block can be saved as a module, false otherwise. Defaults to false. */ canBeSavedAsModule(): boolean; /** * Specifies the context actions available for this block. * If not overridden, the editor might use a default set of actions. * Use IDs from {@link ContextActionType} or custom action IDs. * @returns An array of context action IDs, or undefined to use defaults (if any). */ getContextActionsIds(): string[] | undefined; /** * Provides a custom renderer class for this block, allowing for specialized rendering logic. * @returns A constructor for a class extending {@link BlockRenderer}, or undefined to use the default renderer. */ getCustomRenderer(): ConstructorOfType | undefined; /** * Gets a unique CSS class name specifically for this block type. * Used for targeting styles. * @returns A unique CSS class name. Defaults to `esd-{blockId}`. */ getUniqueBlockClassname(): string; /** * Lifecycle hook called when the editor document is initialized. * Useful for performing initial setup or modifications on existing block instances in the template. */ onDocumentInit(): void; /** * Lifecycle hook called when an instance of this block is selected in the editor. * @param node - The immutable HTML node representing the selected block instance. */ onSelect(node: ImmutableHtmlNode): void; /** * Lifecycle hook called when an instance of this block is copied. * @param modifier - The HTML node modifier to apply changes to the copied block instance. */ onCopy(modifier: HtmlNodeModifier): void; /** * Lifecycle hook called when an instance of this block is deleted. * @param node - The immutable HTML node representing the block instance being deleted. */ onDelete(node: ImmutableHtmlNode): void; /** * Lifecycle hook called after a new instance of this block is created and added to the document (e.g., via drag-and-drop). * @param node - The immutable HTML node representing the newly created block instance. */ onCreated(node: ImmutableHtmlNode): void; /** * Lifecycle hook called when any part of the document template has changed. * This can be frequent; use cautiously for performance-sensitive operations. * @param node - The immutable HTML node representing current node instance */ onDocumentChanged(node: ImmutableHtmlNode): void; /** * @description Determines if block is atomic or composite. * {@link BlockCompositionType.BLOCK} - atomic block which can be inserted inside other container and cannot hold other objects * {@link BlockCompositionType.STRUCTURE} - composite block which can serve as a container for another atomic block * @returns The type of the block. Defaults to {@link BlockCompositionType.BLOCK}. */ getBlockCompositionType(): BlockCompositionType; /** * @description Determines if block should be included in empty container quick insert actions list. * @returns True to show a quick-add icon for this block in empty containers, false otherwise. Defaults to false. */ shouldDisplayQuickAddIcon(): boolean; /** * Determines if the block should be shown in the blocks panel. * Override to hide the block from the blocks panel while keeping it available elsewhere. * @returns True if the block should appear in the blocks panel. Defaults to true. */ shouldDisplayInBlocksPanel(): boolean; /** * @description Determines if nested blocks selection allowed in extension of type {@link BlockCompositionType.STRUCTURE} */ allowInnerBlocksSelection(): boolean; /** * @description Determines if nested blocks drag and drop allowed in extension of type {@link BlockCompositionType.STRUCTURE} */ allowInnerBlocksDND(): boolean; allowInteractWithAMPWhenSelected(): boolean; /** * Gets the unique identifier for this block type. * This ID is used for registration and referencing the block. * @returns A unique string ID. */ getId(): string; /** * Gets the HTML template string that defines the initial structure of this block. * This template will be used when the block is dragged into the editor. * @returns An HTML string. */ getTemplate(): string; /** * Gets a CSS template string that contains the custom styles that apply to the block. * This CSS will be used when a block is dragged into the editor and removed when the last block is deleted. * @returns An CSS string. */ getTemplateStyles(): string; /** * Gets the URL or path to the icon representing this block in the editor's block panel. * @returns A string representing the icon source (e.g., URL, data URI). */ getIcon(): string; /** * Gets the display name of the block shown to the user in the block panel. * Use `this.api.translate()` for localization. * @returns The localized block name string. */ getName(): string; /** * Retrieves the name of block in the block panel. * Can contain html markup * If not implemented by the subclass, getName() function will be used to display name in the block panel * * @return {string} The name of the block panel. */ getSettingsPanelTitleHtml(): string; /** * Gets a short description of the block shown to the user, often as a tooltip in the block panel. * Use `this.api.translate()` for localization. * @returns The localized description string. */ getDescription(): string; } interface BlockItem { name: string; title: string; iconSrc: string; description: string; disabled?: boolean; } interface BlockHint { title: string; description: string; } declare class BlocksPanel { api: BlocksPanelApi; /** * Generates HTML representation for a block item * @param block - The block item to generate HTML for * @returns HTML string representation of the block or undefined if default representation should be used */ getBlockItemHtml(block: BlockItem): string | undefined; /** * Determines whether a hint should be displayed for the block * @param block - The block item to check hint visibility for * @returns True if the hint should be visible, false otherwise */ isBlockHintVisible(block: BlockItem): boolean; /** * Determines whether a draggable handle should be displayed in modules panel * @returns True if the block panel should be reorderable */ isPanelPlacementChangeEnabled(): boolean; /** * Gets the hint text for a block * @param block - The block item to get hint for * @returns The hint text for the block or undefined if default hint should be used */ getBlockHint(block: BlockItem): BlockHint | undefined; /** * Generates HTML representation for the blocks panel header * @returns HTML string representation of the blocks panel header or undefined if header should not be shown */ getBlocksPanelHeaderHtml(): string | undefined; /** * Generates HTML representation for the modules panel in collapsed state * @returns HTML string representation of the collapsed modules panel or undefined if default representation should be used */ getModulesPanelCollapsedHtml(): string | undefined; /** * Determines whether a hint should be displayed for the collapsed modules panel * @returns True if the hint should be visible, false otherwise */ isModulesPanelCollapsedHintVisible(): boolean; /** * Gets the custom delay for showing hints * @returns The delay in milliseconds or undefined to use the default delay */ getHintDelay(): number | undefined; /** * Gets the hint text for a modules panel block * @returns The hint text for the modules panel or undefined if default hint should be used */ getModulesPanelHint(): BlockHint | undefined; /** * Gets the icon name for the modules tab * @returns The icon name for the modules tab or undefined if default icon or text should be used */ getModulesTabIconName(modulesTab: { key: string; label: Record; }): string | undefined; } declare class ContextAction extends BaseValidatedClass { api: ContextActionApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); getId(): string; getIcon(): string; getLabel(): string; onClick(_node: ImmutableHtmlNode): void; } /** * @description value of {@link UETag.FONT_FAMILY_SELECT} returned when user selects 'Add custom font' option */ declare const ADD_CUSTOM_FONT_OPTION = "ADD_CUSTOM_FONT_OPTION"; declare enum AiAssistantValueType { SUBJECT = "subject", HIDDEN_PREHEADER = "hiddenPreheader", TEXT_BLOCK = "textBlock" } /** * @description List of attributes supported by corresponding Block ({@link BlockType}). */ declare const BlockAttr: { EMPTY_CONTAINER: { blocks: string; widthPercent: string; }; CONTAINER: { widthPercent: string; }; BLOCK_IMAGE: { src: string; alt: string; href: string; width: string; height: string; }; BLOCK_BUTTON: { href: string; }; }; declare enum BlockName { BUTTON = "esd-block-button", TEXT = "esd-block-text", IMAGE = "esd-block-image", STRUCTURE = "esd-structure", VIDEO = "esd-block-video", SOCIAL = "esd-block-social", BANNER = "esd-block-banner", TIMER = "esd-block-timer", MENU = "esd-block-menu", HTML = "esd-block-html", SPACER = "esd-block-spacer", CONTAINER = "esd-container-frame" } declare enum BlockSelector { BUTTON = ".esd-block-button", TEXT = ".esd-block-text", IMAGE = ".esd-block-image", STRUCTURE = ".esd-structure", VIDEO = ".esd-block-video", SOCIAL = ".esd-block-social", BANNER = ".esd-block-banner", TIMER = ".esd-block-timer", MENU = ".esd-block-menu", HTML = ".esd-block-html", SPACER = ".esd-block-spacer", CONTAINER = ".esd-container-frame", STRIPE = ".esd-stripe", FORM = ".esd-amp-form" } /** * @description List of supported Block types. */ declare enum BlockType { BLOCK_IMAGE = "BLOCK_IMAGE", BLOCK_TEXT = "BLOCK_TEXT", BLOCK_BUTTON = "BLOCK_BUTTON", BLOCK_SPACER = "BLOCK_SPACER", BLOCK_VIDEO = "BLOCK_VIDEO", BLOCK_SOCIAL = "BLOCK_SOCIAL", BLOCK_BANNER = "BLOCK_BANNER", BLOCK_TIMER = "BLOCK_TIMER", BLOCK_MENU = "BLOCK_MENU", BLOCK_MENU_ITEM = "BLOCK_MENU_ITEM", BLOCK_HTML = "BLOCK_HTML", BLOCK_AMP_CAROUSEL = "BLOCK_AMP_CAROUSEL", BLOCK_AMP_ACCORDION = "BLOCK_AMP_ACCORDION", BLOCK_AMP_FORM = "BLOCK_AMP_FORM", CONTAINER = "CONTAINER", FORM_CONTAINER = "FORM_CONTAINER", STRUCTURE = "STRUCTURE", STRIPE = "STRIPE", EMPTY_CONTAINER = "EMPTY_CONTAINER", CUSTOM_BLOCK_LINK = "CUSTOM_BLOCK_LINK", CUSTOM_BLOCK_IMAGE = "CUSTOM_BLOCK_IMAGE", CUSTOM_BLOCK_TEXT = "CUSTOM_BLOCK_TEXT" } declare enum GeneralControls { ANCHOR_LINK_CONTAINER = "anchorLinkFormContainer", APPLY_CONDITION = "applyCondition", APPLY_CONDITION_SWITCHER = "applyConditionSwitcher", BACKGROUND_COLOR = "backgroundColor", BACKGROUND_IMAGE = "generalImageContainer", TEXT_COLOR = "textColor", TEXT_STYLE = "textStyle", TEXT_SIZE = "textSize", TEXT_LINE_SPACING = "textLineSpacing", TEXT_ALIGN = "textAlign", FIXED_HEIGHT_SWITCHER = "fixedHeightSwitcherForm", HIDDEN_NODE = "hiddenNode", SMART_BLOCK = "smartBlock", SYNCHRONIZED_MODULE = "synchronizedModuleForm", FONT_FAMILY = "generalFontFamilyForm", BLOCK_INTERNAL_INDENTS = "generalBlockInternalIndents", STRUCTURE_INTERNAL_INDENTS = "generalStructureInternalIndents" } declare enum BannerControls { ALIGNMENT = "bannerAlignment", ALT_TEXT = "bannerAltText", ANCHOR_LINK_CONTAINER = "bannerAnchorLinkContainerForm", ASPECT_RATIO = "bannerAspectRatioForm", BACKGROUND_COLOR = "bannerBackgroundColor", BACKGROUND_IMAGE_CONTAINER = "bannerBackgroundImageContainer", SIZE = "bannerBlockBannerSize", BLOCK_LINK = "bannerBlockLink", CHILD_ROTATION = "bannerChildRotationForm", CROP = "bannerCropForm", FILTER = "bannerFilter", EXTERNAL_INDENTS = "bannerExternalIndents", MIME_TYPE = "bannerMimeTypeForm", RESPONSIVE_IMAGE = "bannerResponsiveImageForm" } declare enum BannerChildControls { ADDITIONAL_IMAGE = "bannerAdditionalImageForm", ADDITIONAL_IMAGE_ASPECT_RATIO = "bannerAdditionalImageAspectRatioForm", CHILD_COLOR = "bannerChildColorForm", CHILD_FLIP = "bannerChildFlipForm", CHILD_OPACITY = "bannerChildOpacityForm", TEXT_ALIGNMENT = "bannerTextAlignmentForm", TEXT_FONT = "bannerTextFontContainer", TEXT_LETTER_CASE = "bannerTextLetterCaseForm", TEXT_STYLE = "bannerTextStyleForm" } declare enum ButtonControls { ADJUST_TO_WIDTH = "adjustToWidth", ALIGNMENT = "buttonAlignment", BORDER = "buttonBorder", BORDER_RADIUS = "buttonBorderRadius", COLOR = "buttonColor", BUTTON_BLOCK_BACKGROUND_COLOR = "buttonBlockBackgroundColor", EXTERNAL_INDENTS = "buttonExternalIndents", FIXED_HEIGHT = "buttonFixedHeightForm", FONT_COLOR = "buttonFontColor", FONT_FAMILY = "buttonFontFamily", FONT_SIZE = "buttonFontSize", FONT_WEIGHT = "buttonFontWeight", ICON = "buttonIconContainer", ICON_ALIGN = "buttonIconAlign", ICON_INDENT = "buttonIconIndent", ICON_WIDTH = "buttonIconWidth", IMAGE = "buttonImageForm", INTERNAL_INDENTS = "buttonInternalIndents", LINK = "buttonLink", MIME_TYPE = "buttonMimeTypeForm", SWITCHER_HOVERED_STYLES = "buttonSwitcherHoveredStylesForm", TEXT = "buttonText", TEXT_STYLE_AND_COLOR = "buttonTextStyleAndColorForm", HOVERED_BORDER_COLOR = "hoveredStyleBorderButtonForm", HOVERED_COLOR = "hoveredButtonColorForm", HOVERED_TEXT_COLOR = "hoveredButtonTextColorForm" } declare enum TextControls { HIDDEN_NODE = "hiddenNodeText", PARAGRAPH_STYLE = "paragraphStyleForm", ALIGN = "textAlignmentForm", ANCHOR_CONTAINER = "textAnchorForm", FONT_BACKGROUND_COLOR = "textBlockFontBackgroundColor", TEXT_BLOCK_BACKGROUND_COLOR = "textBlockBackgroundColor", FONT_COLOR = "textBlockFontColor", TEXT_BLOCK_FONT_FAMILY = "textBlockFontFamily", FONT_FAMILY = "textFontFamily", FONT_SIZE = "textBlockFontSize", FONT_WEIGHT = "textBlockFontWeight", DIRECTION = "textBlockDirectionForm", INSERT_FORM = "textBlockInsertForm", LINK_DATA = "textBlockLinkDataForm", FORMAT = "textBlockTextFormatForm", FIXED_HEIGHT = "textFixedHeightForm", INTERNAL_INDENTS = "textInternalIndents", LINE_HEIGHT = "textLineHeightForm", MIME_TYPE = "textMimeTypeForm", NO_LINE_WRAPS = "textNoLineWrapsForm" } declare enum AmpFormControls { AMP_FORM_HIDDEN_NODE = "ampFormHiddenNodeForm", AMP_FORM_DATA_COLLECTION = "ampFormDataCollectionForm", AMP_FORM_MIME_TYPE = "ampFormMimeTypeForm", BACKGROUND_COLOR = "ampFormBackgroundColorForm" } declare enum VideoControls { CUSTOM_THUMBNAIL_CONTAINER = "customThumbnailContainerForm", METADATA_LINK = "metadataLink", PLAY_BUTTON = "playButton", ALIGNMENT = "videoAlignment", ALT_TEXT = "videoAltText", EXTERNAL_INDENTS = "videoExternalIndents", MIME_TYPE = "videoMimeTypeForm", RESPONSIVE = "videoResponsive", SIZE = "videoSizeContainer" } declare enum TimerControls { ALIGNMENT = "timerAlignment", ALT_TEXT = "timerAltText", BACKGROUND_COLOR = "timerBackgroundColor", DATE_TIME = "timeDateTime", DIGITAL_LABELS = "timerDigitalLabels", DIGITS_FONT_COLOR_CONTAINER = "timerDigitsFontColorContainer", DIGITS_FONT_CONTAINER = "timerDigitsFontContainer", DISPLAY_DAYS_SWITCHER = "timerDisplayDaysSwitcher", EXPIRATION_IMAGE = "timerExpirationImage", EXPIRATION_IMAGE_SWITCHER = "timerExpirationSwitcher", EXTERNAL_INDENTS = "timerExternalIndents", LABELS_CASE = "timerLabelsCase", LABELS_FONT_COLOR_CONTAINER = "timerLabelsFontColorContainer", LABELS_FONT_CONTAINER = "timerLabelsFontContainer", LABEL_LANGUAGE = "timerLabelsLanguage", LINK = "timerLink", MIME_TYPE = "timerMimeTypeForm", RESPONSIVE = "timerResponsive", RETINA_DISPLAY_SUPPORT = "timerRetinaDisplaySupport", SEPARATOR = "timerSeparator", SEPARATOR_FONT_COLOR = "timerSeparatorFontColor", SEPARATOR_FONT_CONTAINER = "timerSeparatorFontContainer", SIZE = "timerSize", TIME_ZONE = "timerTimeZone" } declare enum SpacerControls { ALIGNMENT = "spacerAlignment", BORDER = "spacerBorder", EXTERNAL_INDENTS = "spacerExternalIndents", MIME_TYPE = "spacerMimeTypeForm", MODE = "spacerMode", SIZE = "spacerSize", BACKGROUND_COLOR = "spacerBackgroundColor", BACKGROUND_COLOR_LINE = "spacerBackgroundColorLine" } declare enum ImageControls { ALT_TEXT = "altText", LINK = "blockLink", ALIGNMENT = "imageAlignment", ANCHOR_LINK_CONTAINER = "imageAnchorLinkContainerForm", BORDER_RADIUS = "imageBorderRadiusForm", IMAGE = "imageImageForm", EXTERNAL_INDENTS = "imageExternalIndents", MIME_TYPE = "imageMimeTypeForm", RESPONSIVE = "imageResponsive", ROLLOVER_IMAGE = "imageRolloverImageForm", ROLLOVER_SWITCHER = "imageRolloverSwitcherForm", SIZE = "imageSizeContainer" } declare enum HTMLControls { EXTERNAL_INDENTS = "htmlExternalIndents", MIME_TYPE = "htmlMimeTypeForm" } declare enum CustomLinkControls { IMAGE = "customBlockImageForm", COLOR_FORM = "customLinkColorForm", HREF_FORM = "customLinkHrefForm", TEXT_FORM = "customLinkTextForm", UNDERLINE_FORM = "customLinkUnderlineForm", WORD_BREAK_FORM = "customLinkWordBreakForm" } declare enum CustomImageControls { ALT_TEXT_FORM = "customBlockImageAltTextForm", WITHOUT_LINK_FORM = "customBlockImageWithOutLinkForm" } declare enum CustomTextControls { ALIGN = "customTextBlockTextAlign", FONT_SIZE = "customTextFontSizeController" } declare enum SocialControls { ICON_SIZE = "iconSize", EXTERNAL_INDENTS = "socialExternalIndents", ICON_SPACER = "socialIconsSpacer", ICON_TYPE = "socialIconTypeForm", ITEM = "socialItemForm", ITEM_TEXT_CUSTOMIZATION = "socialItemTextCustomizationForm", MIME_TYPE = "socialMimeTypeForm", NETWORK_ALIGNMENT = "socialNetworkAlignment", BACKGROUND_COLOR = "socialBackgroundColor" } declare enum MenuControls { EXTERNAL_INDENTS = "menuExternalIndents", ALIGNMENT = "menuAlignment", RESPONSIVE_MENU = "menuResponsive", FIT_TO_CONTAINER = "menuFitToContainer", FONT_FAMILY = "menuFontFamily", FONT_SIZE = "menuFontSize", HIDDEN = "menuHidden", ICONS_CONFIGURATION = "menuIconsConfiguration", ITEMS = "menuItemsForm", ITEMS_COUNT = "menuItemsCount", ITEM_INTERNAL_INDENTS = "menuItemInternalIndents", MIME_TYPE = "menuMimeTypeForm", SEPARATE_ITEMS = "menuSeparateItems", SEPARATE_ITEMS_COLOR_SWITCHER = "menuSeparateItemsColorSwitcher", SEPARATOR = "menuSeparatorForm", STYLES = "menuStylesForm", TEXT_STYLE_AND_COLOR = "menuTextStyleAndColor", TYPE_CONTAINER = "menuTypeContainerForm" } declare enum AccordionControls { MIME_TYPE = "ampAccordionMimeTypeForm", ANIMATED_OPENING = "ampAccordionAnimatedOpeningForm", AUTO_COLLAPSING = "ampAccordionAutoCollapsingForm", BORDER_FORM = "ampAccordionBorderForm", FONT_FAMILY = "ampAccordionFontFamily", ICON_SIZE = "ampAccordionIconSizeForm", HIDDEN_NODE = "ampAccordionHiddenNodeForm", SECTIONS_FORM = "ampAccordionSectionsForm", SECTIONS_GAP_FORM = "ampAccordionSectionsGapForm", SECTIONS_MAIN_FORM = "ampAccordionSectionsMainForm", TITLES_BACKGROUND_COLOR = "ampAccordionTitlesBackgroundColor", TITLE_ALIGNMENT_FORM = "ampAccordionTitleAlignmentForm", TITLE_FONT_SIZE = "AmpAccordionTitleFontSizeController", TITLE_ICON_IMAGE = "ampAccordionTitleIconImageForm", TITLE_ICON_SWITCHER = "ampAccordionTitleIconSwitcherForm", TITLE_TEXT_STYLE_AND_COLOR = "AmpAccordionTitleTextStyleAndColorController" } declare enum CarouselControls { MIME_TYPE = "ampCarouselMimeTypeForm", AUTOPLAY = "ampCarouselAutoplayForm", AUTOPLAY_DELAY = "ampCarouselDelayForm", HIDDEN_NODE = "ampCarouselHiddenNodeForm", LOOP = "ampCarouselLoopForm", SLIDES = "ampSlidesForm", SLIDE_ALT_TEXT = "ampSlideAltTextForm", SLIDE_IMAGE = "ampSlideImageForm", SLIDE_IMAGE_FIT = "ampCarouselSlideImageFitForm", SLIDE_LINK = "ampSlideLinkForm", SLIDE_RADIUS = "ampCarouselSlideRadiusForm", SLIDE_THUMBNAIL_SWITCHER = "ampCarouselSlideThumbnailSwitcherForm", THUMBNAIL_BORDER_STYLE = "ampCarouselThumbnailBorderStyleForm", THUMBNAIL_CONTAINER = "ampCarouselThumbnailContainerForm", THUMBNAIL_CUSTOM_REVIEW = "ampCarouselThumbnailCustomPreviewImageForm", THUMBNAIL_RADIUS = "ampCarouselThumbnailRadiusForm", THUMBNAIL_COLOR = "ampCarouselThumbnailColorForm", AMP_GENERAL_LINK = "AMP_GENERAL_LINK_CONTROLLER", AMP_GENERAL_LINK_SWITCHER = "AMP_GENERAL_LINK_SWITCHER" } declare enum StripeControls { BORDER_FORM = "stripeBorderForm", COLOR = "stripeColorForm", CONTENT_COLOR = "stripeContentColor", IMAGE_CONTAINER = "stripeImageContainerForm", INTERNAL_INDENTS = "stripeInternalIndents", MESSAGE_AREA = "stripeMessageAreaForm", MIME_TYPE = "stripeMimeTypeForm" } declare enum StructureControls { RESPONSIVE_STRUCTURE = "responsiveStructure", BACKGROUND_COLOR = "structureBackgroundColor", BORDER_RADIUS = "structureBorderRadiusForm", CONTAINER_GAP = "structureContainerGap", CONTAINER_INVERSION = "structureContainerInversion", DYNAMIC_CONTAINERS = "structureDynamicContainers", EXTERNAL_INDENTS = "structureExternalIndents", IMAGE_CONTAINER = "structureImageContainerForm", INTERNAL_INDENTS = "structureInternalIndents", ITEM = "structureItem", MIME_TYPE = "structureMimeType", BORDER_FORM = "structureBorderForm" } declare enum ContainerControls { BACKGROUND_COLOR = "containerBackgroundColorForm", BORDER_FORM = "containerBorderForm", BORDER_RADIUS = "containerBorderRadiusForm", EXTERNAL_INDENTS = "containerExternalIndentsForm", IMAGE_CONTAINER = "containerImageContainerForm", MIME_TYPE = "containerMimeTypeForm", DISPLAY_CONDITIONS = "displayConditions", HIDDEN_NODE = "containerHiddenNodeForm" } declare enum MessageSettingsControls { GMAIL_PROMOTIONS_SWITCHER = "gmailPromotionsSwitcherForm", GMAIL_PROMOTIONS_TAB = "gmailPromotionsTabForm", HIDDEN_PRE_HEADER = "hiddenPreHeaderForm", SUBJECT_TITLE = "subjectTitleForm", UTM_PARAMETERS = "utmParametersForm", UTM_PARAMETERS_CAMPAIGN = "utmParameterCampaignForm", UTM_PARAMETERS_CUSTOM = "utmParametersCustomForm", UTM_PARAMETERS_CUSTOM_ITEM = "utmParametersCustomItemForm" } declare enum GeneralStylesControls { BUTTONS_ADJUST_TO_WIDTH_CONTAINER = "buttonsAdjustToWidthFormContainer", BUTTONS_BORDER = "buttonsBorder", BUTTONS_BORDER_RADIUS_CONTAINER = "buttonsBorderRadiusContainer", BUTTONS_COLOR_CONTAINER = "buttonsColorContainer", BUTTONS_FONT_FAMILY_CONTAINER = "buttonsFontFamilyContainer", BUTTONS_FONT_SIZE_CONTAINER = "buttonsFontSizeFormContainer", BUTTONS_HOVERED_BUTTON_STYLE = "buttonsHoveredButtonStyleForm", BUTTONS_INTERNAL_INDENTS_CONTAINER = "buttonsInternalIndentsContainer", BUTTONS_LETTER_SPACING_CONTAINER = "buttonsLetterSpacingContainer", BUTTONS_OUTLOOK_SUPPORT_CONTAINER = "buttonsOutlookSupportContainer", BUTTONS_TEXT_STYLE_AND_COLOR_CONTAINER = "buttonsTextStyleAndColorFormContainer", DEFAULT_STRUCTURE_INTERNAL_INDENTS = "defaultStructureInternalIndents", GENERAL_BACKGROUND_COLOR_CONTAINER = "generalBackgroundColorContainer", GENERAL_IMAGE_CONTAINER = "generalImageContainer", HEADINGS_FONT_FAMILY_CONTAINER = "headingsFontFamilyContainer", HEADINGS_H1_CONTROLS_CONTAINER = "headingH1controlsContainer", HEADINGS_H2_CONTROLS_CONTAINER = "headingH2controlsContainer", HEADINGS_H3_CONTROLS_CONTAINER = "headingH3controlsContainer", HEADINGS_H4_CONTROLS_CONTAINER = "headingH4controlsContainer", HEADINGS_H5_CONTROLS_CONTAINER = "headingH5controlsContainer", HEADINGS_H6_CONTROLS_CONTAINER = "headingH6controlsContainer", HEADINGS_LETTER_SPACING_CONTAINER = "headingsLetterSpacingFormContainer", HEADINGS_PARAGRAPH_BOTTOM_MARGIN = "headingsParagraphBottomMarginForm", HEADINGS_TYPES_BUTTON_BAR = "headingsTypesButtonBarForm", LISTS_STYLES = "listsStyles", MARGIN_AROUND_MESSAGE = "marginAroundMessage", MESSAGE_ALIGNMENT = "messageAlignment", MESSAGE_CONTENT_WIDTH = "messageContentWidth", RESPONSIVE_DESIGN = "responsiveDesign", HIDE_IMAGE_DOWNLOAD_ICONS = "hideImageDownloadIcons", DEFAULT_STYLES = "defaultStyles", RIGHT_TO_LEFT_CONTAINER = "rightToLeftContainer", STRIPES_CONTENT_CONTROLS_CONTAINER = "stripesContentControlsContainer", STRIPES_FONT_FAMILY_CONTAINER = "stripesFontFamilyFormContainer", STRIPES_FOOTER_CONTROLS_CONTAINER = "stripesFooterControlsContainer", STRIPES_HEADER_CONTROLS_CONTAINER = "stripesHeaderControlsContainer", STRIPES_INFO_AREA_CONTROLS_CONTAINER = "stripesInfoAreaControlsContainer", STRIPES_LETTER_SPACING_CONTAINER = "stripesLetterSpacingFormContainer", STRIPES_LINE_HEIGHT_CONTAINER = "stripesLineHeightFormContainer", STRIPE_TYPES_BUTTON_BAR = "stripeTypesButtonBarForm", UNDERLINE_LINKS_CONTAINER = "underlineLinksContainer" } /** * @description List of supported controls grouped by block ({@link BlockType}) or additional panel name */ declare const BuiltInControlTypes: { BLOCK_BANNER: typeof BannerControls; BLOCK_BUTTON: typeof ButtonControls; BLOCK_TEXT: typeof TextControls; BLOCK_VIDEO: typeof VideoControls; BLOCK_TIMER: typeof TimerControls; BLOCK_SPACER: typeof SpacerControls; BLOCK_IMAGE: typeof ImageControls; BLOCK_HTML: typeof HTMLControls; BLOCK_SOCIAL: typeof SocialControls; BLOCK_MENU: typeof MenuControls; BLOCK_AMP_FORM: typeof AmpFormControls; BLOCK_AMP_ACCORDION: typeof AccordionControls; BLOCK_AMP_CAROUSEL: typeof CarouselControls; STRIPE: typeof StripeControls; STRUCTURE: typeof StructureControls; CONTAINER: typeof ContainerControls; CUSTOM_BLOCK_LINK: typeof CustomLinkControls; CUSTOM_BLOCK_IMAGE: typeof CustomImageControls; CUSTOM_BLOCK_TEXT: typeof CustomTextControls; BANNER_CHILD: typeof BannerChildControls; MESSAGE_SETTINGS: typeof MessageSettingsControls; GENERAL_STYLES: typeof GeneralStylesControls; GENERAL: typeof GeneralControls; }; /** * @description List of actions supported by blocks. */ declare enum ContextActionType { SAVE_AS_MODULE = "saveAsModule", IMPROVE_WITH_AI = "improveWithAI", MOVE = "move", COPY = "copy", REMOVE = "remove", CLEAR_CONTAINER = "clearContainer", EXTERNAL_DISPLAY_CONDITION = "externalDisplayCondition" } declare enum OrderableItemIconPosition { TOP = "TOP", LEFT = "LEFT" } /** * @description List of default settings panel tabs. */ declare enum SettingsTab { SETTINGS = "settings", STYLES = "styles", DATA = "data" } /** * @description List of attributes supported by corresponding UI Element ({@link UIElementType}). */ declare const UEAttr: { DEFAULT: { name: string; disabled: string; }; BUTTON: { caption: string; icon: string; name: string; disabled: string; }; CHECKBOX: { caption: string; name: string; disabled: string; }; CHECK_BUTTONS: { buttons: string; name: string; disabled: string; }; COLOR: { name: string; disabled: string; }; COUNTER: { minValue: string; maxValue: string; step: string; name: string; disabled: string; }; DATEPICKER: { placeholder: string; minDate: string; name: string; disabled: string; }; LABEL: { text: string; hint: string; name: string; disabled: string; }; MESSAGE: { type: string; name: string; disabled: string; }; RADIO_BUTTONS: { buttons: string; name: string; disabled: string; }; SELECTPICKER: { searchable: string; multiSelect: string; placeholder: string; items: string; name: string; disabled: string; }; FONT_FAMILY_SELECT: { addCustomFontOption: string; searchable: string; multiSelect: string; placeholder: string; items: string; name: string; disabled: string; }; SWITCHER: { name: string; disabled: string; }; TEXT: { placeholder: string; name: string; disabled: string; }; TEXTAREA: { resizable: string; placeholder: string; name: string; disabled: string; }; ICON: { img: string; src: string; title: string; imageClass: string; hint: string; disabled: string; isActive: string; visibility: string; transform: string; name: string; }; CHECK_ITEM: { text: string; hint: string; icon: string; value: string; name: string; disabled: string; }; SELECT_ITEM: { text: string; value: string; name: string; disabled: string; }; RADIO_ITEM: { text: string; hint: string; icon: string; value: string; name: string; disabled: string; }; NESTED_CONTROL: { controlId: string; name: string; disabled: string; }; EXPANDABLE: { expanded: string; name: string; disabled: string; }; ORDERABLE: { icon: string; position: string; name: string; disabled: string; }; ORDERABLE_ITEM: { name: string; disabled: string; }; ORDERABLE_ICON: { icon: string; name: string; disabled: string; }; REPEATABLE: { name: string; disabled: string; }; DRAGGABLE_BLOCK: { blockId: string; name: string; disabled: string; }; AMP_FORM_SERVICE_PICKER: { name: string; disabled: string; }; MULTIPLE_SELECT: { placeholder: string; name: string; disabled: string; }; }; /** * @description List of supported UI elements. */ declare enum UIElementType { BUTTON = "UE-BUTTON", CHECKBOX = "UE-CHECKBOX", CHECK_BUTTONS = "UE-CHECK-BUTTONS", COLOR = "UE-COLOR", COUNTER = "UE-COUNTER", DATEPICKER = "UE-DATEPICKER", LABEL = "UE-LABEL", MESSAGE = "UE-MESSAGE", RADIO_BUTTONS = "UE-RADIO-BUTTONS", SELECTPICKER = "UE-SELECT", SWITCHER = "UE-SWITCHER", TEXT = "UE-TEXT", TEXTAREA = "UE-TEXTAREA", CHECK_ITEM = "UE-CHECK-ITEM", RADIO_ITEM = "UE-RADIO-ITEM", SELECT_ITEM = "UE-SELECT-ITEM", ICON = "UE-ICON", MERGETAGS = "UE-MERGETAGS", FONT_FAMILY_SELECT = "UE-FONT-FAMILY-SELECT", NESTED_CONTROL = "UE-NESTED-CONTROL", EXPANDABLE = "UE-EXPANDABLE", EXPANDABLE_HEADER = "UE-EXPANDABLE_HEADER", EXPANDABLE_CONTENT = "UE-EXPANDABLE_CONTENT", ORDERABLE = "UE-ORDERABLE", ORDERABLE_ITEM = "UE-ORDERABLE-ITEM", ORDERABLE_ICON = "UE-ORDERABLE-ICON", REPEATABLE = "UE-REPEATABLE", DRAGGABLE_BLOCK = "UE-DRAGGABLE-BLOCK", AMP_FORM_SERVICE_PICKER = "UE-AMP-FORM-SERVICE-PICKER", MULTIPLE_SELECT = "UE-MULTIPLE_SELECT", SCROLLABLE = "UE-SCROLLABLE-CONTAINER" } /** * @description map of general labels used in built in controls UI */ interface ControlLabels { title?: string; } interface BackgroundImageControlLabels extends ControlLabels { title?: string; titleHint?: string; repeat?: string; repeatHint?: string; horizontalPosition?: string; verticalPosition?: string; backgroundWidth?: string; backgroundHeight?: string; } interface BorderLabels extends ControlLabels { borderColorTitle?: string; borderStyleTitle?: string; borderStyleHint?: string; } /** * @description base class for extension controls extending built in editor controls */ declare abstract class BuiltInControl { api: ControlApi; /** * @description returns extended control identifier to be referenced in {@link SettingsPanelRegistry} or templates */ abstract getId(): string; /** * @description returns parent control identifier from the list {@link BuiltInControlTypes} of available controls */ abstract getParentControlId(): string; /** * @description returns map of nodes parent control operates on */ getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[] | undefined; /** * @description returns map of labels used by parent control UI */ getLabels(): ControlLabels | undefined; /** * @description returns custom description for parent modifications */ getModificationDescription(): ModificationDescription | undefined; /** * @description returns custom modifications to be included in the parent control patch */ getAdditionalModifications(_root: ImmutableHtmlNode): TemplateModifier | undefined; /** * Determines whether the specified HTML node is visible. * * @param _node - The HTML node to evaluate for visibility, provided as an immutable object. * @return A boolean value indicating whether the node is visible. Returns `true` if the node is visible, otherwise `false`. */ isVisible(_node: ImmutableHtmlNode): boolean; } declare abstract class ButtonBuiltInControl extends BuiltInControl { getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[]; } interface ButtonBorderRadiusControlLabels extends ControlLabels { titleHint?: string; } declare abstract class ButtonBorderRadiusBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; getLabels(): ButtonBorderRadiusControlLabels | undefined; } declare abstract class ButtonAlignBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } /** * @description base class including background color modifications logic */ declare abstract class ButtonBackgroundColorBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } declare abstract class ButtonBlockBackgroundColorBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } interface ButtonBorderControlLabels extends ControlLabels { titleHint?: string; borderColorTitle?: string; borderStyleTitle?: string; borderStyleHint?: string; } /** * @description base class including button border modifications logic */ declare abstract class ButtonBorderBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; getLabels(): ButtonBorderControlLabels | undefined; } /** * @description base class including button color modifications logic */ declare abstract class ButtonColorBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } declare abstract class ButtonFitToContainerBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } interface FixedHeightLabels extends ControlLabels { counterTitle?: string; alignTitle?: string; } declare abstract class ButtonFixedHeightBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; getLabels(): FixedHeightLabels | undefined; } declare abstract class ButtonFontFamilyBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } /** * @description base class including button hover text color modifications logic */ declare abstract class ButtonHoverBorderColorBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } declare abstract class ButtonHoverColorBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } /** * @description base class including button hover text color modifications logic */ declare abstract class ButtonHoverTextColorBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } declare abstract class ButtonMarginsBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } declare abstract class ButtonPaddingsBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } /** * @description base class including button text modifications logic */ declare abstract class ButtonTextBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } /** * @description base class including button text modifications logic */ declare abstract class ButtonTextSizeBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } interface ButtonTextStyleAndFontColorControlLabels extends ControlLabels { colorTitle?: string; styleTitle?: string; } declare abstract class ButtonTextStyleAndFontColorBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; getLabels(): ButtonTextStyleAndFontColorControlLabels | undefined; } declare abstract class ButtonVisibilityBuiltInControl extends ButtonBuiltInControl { getParentControlId(): string; } declare abstract class ContainerBuiltInControl extends BuiltInControl { getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[]; } declare abstract class ContainerBackgroundColorBuiltInControl extends ContainerBuiltInControl { getParentControlId(): string; } declare abstract class ContainerBackgroundImageBuiltInControl extends ContainerBuiltInControl { getParentControlId(): string; getLabels(): BackgroundImageControlLabels | undefined; } declare abstract class ContainerBorderBuiltInControl extends ContainerBuiltInControl { getParentControlId(): string; getLabels(): BorderLabels | undefined; } declare abstract class ContainerVisibilityBuiltInControl extends ContainerBuiltInControl { getParentControlId(): string; } declare class Control extends BaseValidatedClass { /** Provides access to editor functionalities specific to this UI control instance. */ api: ControlApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * @description Allows to determine if control should be visible or hidden in control panel. * Called on every node modification. */ isVisible(_node: ImmutableHtmlNode): boolean; /** * Optional hook called when the control is initially rendered. * Use this for setup tasks like attaching event listeners to the control's template elements. */ onRender(): void; /** * Optional cleanup hook called when the control is being destroyed. * Use this to remove event listeners or perform other cleanup tasks. */ onDestroy(): void; /** * Gets the unique identifier for this UI control type. * This ID is used for registration and referencing. * @returns A unique string ID. */ getId(): string; /** * Gets the HTML template string that defines the structure of this UI control, * typically containing one or more UI elements (e.g., ``, ``). * @returns An HTML string. */ getTemplate(): string; /** * Hook called whenever the underlying template node associated with this control's context * (e.g., the selected block's HTMLnode) is updated. * Implement this to react to changes in the block/structure and update the control's UI elements accordingly. * @param node - The updated immutable HTML node representing the control's context. */ onTemplateNodeUpdated(_node: ImmutableHtmlNode): void; /** * Lifecycle hook called when any part of the document template has changed. * This can be frequent; use cautiously for performance-sensitive operations. * @param _node - The immutable HTML node representing current node instance */ onDocumentChanged(_node: ImmutableHtmlNode): void; } interface GeneralPanelTabMap { getId(): string; getIcon(): string; getName(): string; getTabIndex(): number; getTemplate(): string; } declare class GeneralPanelTab extends BaseValidatedClass implements GeneralPanelTabMap { /** Provides access to editor functionalities specific to this tab instance. */ api: GeneralPanelTabApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * Gets the unique identifier for this tab. * This ID is used for registration. * @returns A unique string ID. */ getId(): string; /** * Gets the icon key representing this tab in the header. * @returns A string representing the icon key from the IconsRegistry */ getIcon(): string; /** * Retrieves the index of the tab associated with the panel. * The index represents the position/order of the tab in the UI. * * @returns {number} The index of the tab. */ getTabIndex(): number; /** * Gets the display name of the tab shown to the user in the header hint. * Use `this.api.translate()` for localization. * @returns The localized tab name string. */ getName(): string; /** * Determines if the tab should be available for use in the editor. * Override to provide custom logic based on the editor state or configuration. * @returns True if the tab is enabled, false otherwise. Defaults to true. */ isEnabled(): boolean; /** * Gets the HTML template string that defines the initial template of general tab. * @returns An HTML string. */ getTemplate(): string; /** * Lifecycle hook called when any part of the document template has changed. * This can be frequent; use cautiously for performance-sensitive operations. */ onDocumentChanged(): void; /** * Optional hook called when the general panel tab is initially rendered. * Use this for setup tasks like attaching event listeners to the panel's template elements. */ onRender(): void; /** * Optional cleanup hook called when the general panel tab is being destroyed. */ onDestroy(): void; } declare abstract class ImageBuiltInControl extends BuiltInControl { getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[]; } declare abstract class ImageAlignmentBuiltInControl extends ImageBuiltInControl { getParentControlId(): string; } declare abstract class ImageMarginsBuiltInControl extends ImageBuiltInControl { getParentControlId(): string; } declare abstract class ImageSizeBuiltInControl extends ImageBuiltInControl { getParentControlId(): string; } declare abstract class ImageVisibilityBuiltInControl extends ImageBuiltInControl { getParentControlId(): string; } declare class ModulesPanelTab extends BaseValidatedClass { /** Provides access to editor functionalities specific to this tab instance. */ api: ModulesPanelTabApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * Gets the unique identifier for this tab. * This ID is used for registration. * @returns A unique string ID. */ getId(): string; /** * Gets the icon key representing this tab in the header. * @returns A string representing the icon key from the IconsRegistry */ getIcon(): string; /** * Retrieves the index of the tab associated with the panel. * The index represents the position/order of the tab in the UI. * * @returns {number} The index of the tab. */ getTabIndex(): number; /** * Gets the display name of the tab shown to the user in the header hint. * Use `this.api.translate()` for localization. * @returns The localized tab name string. */ getName(): string; /** * Determines if the tab should be available for use in the editor. * Override to provide custom logic based on the editor state or configuration. * @returns True if the tab is enabled, false otherwise. Defaults to true. */ isEnabled(): boolean; /** * Gets the HTML template string that defines the initial structure of this tab. * @returns An HTML string. */ getTemplate(): string; /** * Optional hook called when the modules panel tab is initially rendered. * Use this for setup tasks like attaching event listeners to the panel's template elements. */ onRender(): void; /** * Lifecycle hook called when any part of the document template has changed. * This can be frequent; use cautiously for performance-sensitive operations. */ onDocumentChanged(): void; } interface SideLabels { label: string; decrementLabel: string; incrementLabel: string; } interface VisualModeLabels { ['top']: SideLabels; ['right']: SideLabels; ['bottom']: SideLabels; ['left']: SideLabels; } interface IndentsFormNameLabels { ['DESKTOP']: string; ['MOBILE']: string; ['RESPONSIVE_OFF']: string; } interface IndentsInputsLabels { ['DESKTOP']: VisualModeLabels; ['MOBILE']: VisualModeLabels; ['RESPONSIVE_OFF']: VisualModeLabels; } interface IndentsLockLabels { ['DESKTOP']: string; ['MOBILE']: string; ['RESPONSIVE_OFF']?: string; } /** * Interface for indent labels used in padding controls */ interface IndentLabels extends ControlLabels { inputsLabels?: IndentsInputsLabels; lockLabels?: IndentsLockLabels; } declare class SettingsPanelTab { private label?; private readonly tabId; private readonly controls; constructor(tabId: string, controls: string[]); getTabId(): string; getLabel(): string | undefined; getControlsIds(): string[]; getControls(): SettingsPanelTabControl[]; withLabel(label: string): this; addControl(control: string | SettingsPanelTabControlConfig, position: number): this; deleteControl(controlId: string): void; private static normalizeControl; } interface SettingsPanelTabControlConfig { id: string; class?: string; withFullHeight?: boolean; } type SettingsPanelTabControl = SettingsPanelTabControlConfig; interface SettingsPanelTabMap { registerBlockControls(_blockControlsMap: Record): void; } declare class SettingsPanelRegistry extends BaseValidatedClass implements SettingsPanelTabMap { api: SettingsPanelApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); registerBlockControls(_blockControlsMap: Record): void; } declare abstract class SpacerBuildInControl extends BuiltInControl { getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[]; } declare abstract class SpacerBackgroundColorBuiltInControl extends SpacerBuildInControl { getParentControlId(): string; } declare abstract class SpacerMarginsBuiltInControl extends SpacerBuildInControl { getParentControlId(): string; } declare abstract class StructureBuiltInControl extends BuiltInControl { getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[] | undefined; } interface StructureAdaptControlLabels extends ControlLabels { description?: string; } declare abstract class StructureAdaptBuiltInControl extends StructureBuiltInControl { getParentControlId(): string; getLabels(): StructureAdaptControlLabels | undefined; } declare abstract class StructureBackgroundColorBuiltInControl extends StructureBuiltInControl { getParentControlId(): string; } declare abstract class StructureBackgroundImageBuiltInControl extends StructureBuiltInControl { getParentControlId(): string; getLabels(): BackgroundImageControlLabels | undefined; } /** * @description base class including structure border modifications logic */ declare abstract class StructureBorderBuiltInControl extends StructureBuiltInControl { getParentControlId(): string; getLabels(): BorderLabels | undefined; } declare abstract class StructureMarginsBuiltInControl extends StructureBuiltInControl { getParentControlId(): string; } declare abstract class StructurePaddingsBuiltInControl extends StructureBuiltInControl { getParentControlId(): string; } declare abstract class StructureVisibilityBuiltInControl extends StructureBuiltInControl { getParentControlId(): string; } declare abstract class TextBuiltInControl extends BuiltInControl { getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[]; } declare abstract class TextAlignBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } declare abstract class TextBlockBackgroundBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } /** * @description base class including text color modifications logic */ declare abstract class TextColorBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } declare abstract class TextFixedHeightBuiltInControl extends TextBuiltInControl { getParentControlId(): string; getLabels(): FixedHeightLabels | undefined; } /** * @description base class including font family modifications logic */ declare abstract class TextFontFamilyBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } /** * @description base class including text line spacing modifications logic */ declare abstract class TextLineSpacingBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } declare abstract class TextPaddingsBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } /** * @description base class including general text size modifications logic */ declare abstract class TextSizeBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } /** * @description base class including text style modifications logic */ declare abstract class TextStyleBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } declare abstract class TextVisibilityBuiltInControl extends TextBuiltInControl { getParentControlId(): string; } interface ExternalAiAssistantMap { openAiAssistant(_params: { value: string; onDataSelectCallback: ExternalAiAssistantCallback; onCancelCallback: ExternalAiAssistantCancelCallback; type: AiAssistantValueType; }): void; } type ExternalAiAssistantCallback = (html: string) => void; type ExternalAiAssistantCancelCallback = () => void; declare class ExternalAiAssistant extends BaseValidatedClass implements ExternalAiAssistantMap { /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); openAiAssistant(_options: { value: string; onDataSelectCallback: ExternalAiAssistantCallback; onCancelCallback: ExternalAiAssistantCancelCallback; type: AiAssistantValueType; }): void; } interface ExternalDisplayConditionsLibraryMap { getCategoryName(): string; openExternalDisplayConditionsDialog(_currentCondition: DisplayCondition, _successCallback: ExternalDisplayConditionSelectedCB, _cancelCallback: () => void): void; getIsContextActionEnabled(): boolean; getContextActionIndex(): number; } type ExternalDisplayConditionSelectedCB = (condition: DisplayCondition) => void; interface ExternalDisplayConditionCategory { type: string; category: string; } declare class ExternalDisplayConditionsLibrary extends BaseValidatedClass implements ExternalDisplayConditionsLibraryMap { api: ExternalDisplayConditionsApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * Retrieves the name of the category. * * @return {string} The name of the category. */ getCategoryName(): string; /** * Opens a popup dialog for creating or updating a display condition. * * @param {DisplayCondition} _currentCondition - The currently selected display condition to edit. * @param {ExternalDisplayConditionSelectedCB} _successCallback - Callback executed with the updated or newly created condition upon success. * @param {() => void} _cancelCallback - Callback executed when the dialog is closed without making changes. */ openExternalDisplayConditionsDialog(_currentCondition: DisplayCondition, _successCallback: ExternalDisplayConditionSelectedCB, _cancelCallback: () => void): void; /** * Determines if the context action associated with this library is enabled. * * @returns {boolean} `true` if the context action is enabled, otherwise `false`. */ getIsContextActionEnabled(): boolean; /** * Retrieves the index of the context action associated with this library. * The index represents the position/order of the action in the UI. * * @returns {number} The index of the context action. */ getContextActionIndex(): number; } interface ExternalImageLibraryMap { openImageLibrary(_currentImageUrl: string, _onImageSelectCallback: ExternalGalleryImageSelectCallback, _onCancelCallback: ExternalGalleryImageCancelCallback): void; } interface ExternalGalleryImage { originalName: string; width: number; height: number; sizeBytes: number; url: string; altText: string; labels?: Record; } type ExternalGalleryImageSelectCallback = (imageUrl: ExternalGalleryImage) => void; type ExternalGalleryImageCancelCallback = () => void; declare class ExternalImageLibrary extends BaseValidatedClass implements ExternalImageLibraryMap { /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); openImageLibrary(_currentImageUrl: string, _onImageSelectCallback: ExternalGalleryImageSelectCallback, _onCancelCallback: ExternalGalleryImageCancelCallback): void; } interface ExternalImageLibraryTabMap { getName(): string; openImageLibraryTab(_container: HTMLElement, _onImageSelectCallback: ExternalGalleryImageSelectCallback): void; } declare class ExternalImageLibraryTab extends BaseValidatedClass implements ExternalImageLibraryTabMap { api: BaseApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * @description Returns the translated name/label for the tab * @returns Translation key or text to display as tab label */ getName(): string; /** * @description Opens the external image library tab and provides a container for rendering * @param _container - DOM element container where the external library UI should be rendered * @param _onImageSelectCallback - Callback to invoke when an image is selected * @param _selectedNode - (Optional) Selected node for which the gallery is being opened */ openImageLibraryTab(_container: HTMLElement, _onImageSelectCallback: ExternalGalleryImageSelectCallback, _selectedNode?: ImmutableHtmlNode): void; } interface ExternalSmartElementsLibraryMap { openSmartElementsLibrary(_onDataSelectCallback: ExternalSmartElementSelectCallback, _onCancelCallback: ExternalSmartElementCancelCallback): void; } type ExternalSmartElement = Record; type ExternalSmartElementSelectCallback = (smartElement: ExternalSmartElement) => void; type ExternalSmartElementCancelCallback = () => void; declare class ExternalSmartElementsLibrary extends BaseValidatedClass implements ExternalSmartElementsLibraryMap { /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); openSmartElementsLibrary(_onDataSelectCallback: ExternalSmartElementSelectCallback, _onCancelCallback: ExternalSmartElementCancelCallback): void; } interface ExternalVideosLibraryMap { openExternalVideosLibraryDialog(_currentValue: string, _successCallback: ExternalVideosLibrarySelectedCallback, _cancelCallback: ExternalVideosLibraryCancelCallback): void; } type ExternalVideosLibrarySelectedCallback = (value: ExternalGalleryVideo) => void; type ExternalVideosLibraryCancelCallback = () => void; type ExternalGalleryVideo = { originalVideoName: string; originalImageName: string; urlImage: string; urlVideo: string; altText: string; }; declare class ExternalVideosLibrary extends BaseValidatedClass implements ExternalVideosLibraryMap { /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); openExternalVideosLibraryDialog(_currentValue: string, _successCallback: ExternalVideosLibrarySelectedCallback, _cancelCallback: ExternalVideosLibraryCancelCallback): void; } interface IconsRegistryMap { registerIconsSvg(_iconsMap: Record): void; } declare class IconsRegistry extends BaseValidatedClass implements IconsRegistryMap { /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); registerIconsSvg(_iconsMap: Record): void; } declare class UIElement extends BaseValidatedClass { /** Provides access to editor functionalities specific to this UI element instance. */ api: UIElementApi; /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); /** * Called when the UI element should render its content into the provided container. * @param container - The HTMLElement where the UI element should be rendered. */ onRender(_container: HTMLElement): void; /** * Optional cleanup hook called when the UI element is being destroyed. * Use this to remove event listeners or perform other cleanup tasks. */ onDestroy(): void; /** * Optional method to get the current value of the UI element. * Implement this if the element manages a state or value (e.g., input fields). * @returns The current value of the element. */ getValue(): any; /** * Optional method to set the value of the UI element. * Implement this if the element manages a state or value and needs to be updated externally. * @param value - The new value to set. */ setValue(_value: any): void; /** * @description Optional hook called when one of the element's supported attributes ({@link UEAttr}) gets updated externally. * Implement this to react to attribute changes (e.g., visibility, disabled state). * @param name - The name of the attribute that was updated. * @param value - The new value of the attribute. */ onAttributeUpdated(_name: string, _value: unknown): void; /** * Gets the unique identifier for this UI element type. * This ID is used for registration and referencing within controls. * @returns A unique string ID. */ getId(): string; /** * Gets the HTML template string that defines the structure of this UI element. * @returns An HTML string. */ getTemplate(): string; } declare class UIElementTagRegistry extends BaseValidatedClass { /** List of methods that must be implemented by subclasses */ private static readonly REQUIRED_METHODS; constructor(); registerUiElements(_uiElementsTagsMap: Record): void; } interface ExtensionOptions { i18n: Record> | undefined; styles: string | undefined; previewStyles?: string; uiElements: ConstructorOfType[]; generalPanelTabs: ConstructorOfType[]; modulesPanelTabs: ConstructorOfType[]; controls: ConstructorOfType[]; contextActions: ConstructorOfType[]; blocks: ConstructorOfType[]; uiElementTagRegistry: ConstructorOfType | undefined; settingsPanelRegistry: ConstructorOfType | undefined; externalSmartElementsLibrary?: ConstructorOfType; externalImageLibrary?: ConstructorOfType; externalAiAssistant?: ConstructorOfType; externalDisplayConditionsLibrary?: ConstructorOfType; externalVideoLibrary?: ConstructorOfType; blocksPanel?: ConstructorOfType; iconsRegistry?: ConstructorOfType; externalImageLibraryTab?: ConstructorOfType; } declare class Extension { private readonly i18n?; private readonly styles?; private readonly previewStyles?; private readonly uiElements; private readonly uiElementTagRegistry?; private readonly controls; private readonly settingsPanelRegistry?; private readonly contextActions; private readonly blocks; private readonly generalPanelTabs; private readonly modulesPanelTabs; private readonly id; private readonly externalSmartElementsLibrary?; private readonly externalImageLibrary?; private readonly externalImageLibraryTab?; private readonly externalAiAssistant?; private readonly externalDisplayConditionsLibrary?; private readonly externalVideoLibrary?; private readonly blocksPanel?; private readonly iconsRegistry?; constructor(options: ExtensionOptions); getI18n(): Record> | undefined; getStyles(): string | undefined; getPreviewStyles(): string | undefined; getUiElements(): ConstructorOfType[]; getUiElementTagRegistry(): ConstructorOfType | undefined; getControls(): ConstructorOfType[]; getSettingsPanelRegistry(): ConstructorOfType | undefined; getContextActions(): ConstructorOfType[]; getBlocks(): ConstructorOfType[]; getId(): string; getExternalSmartElementsLibrary(): ConstructorOfType | undefined; getExternalImageLibrary(): ConstructorOfType | undefined; getExternalImageLibraryTab(): ConstructorOfType | undefined; getExternalAiAssistant(): ConstructorOfType | undefined; getExternalDisplayConditionsLibrary(): ConstructorOfType | undefined; getExternalVideoLibrary(): ConstructorOfType | undefined; getBlocksPanel(): ConstructorOfType | undefined; getIconsRegistry(): ConstructorOfType | undefined; getGeneralPanelTabs(): ConstructorOfType[]; getModulesPanelTabs(): ConstructorOfType[]; } declare class ExtensionBuilder { private i18n?; private styles; private readonly uiElements; private readonly controls; private readonly contextActions; private readonly blocks; private readonly generalPanelTabs; private readonly modulesPanelTabs; private previewStyles?; private uiElementTagRegistry?; private settingsPanelRegistry?; private externalSmartElementsLibrary?; private externalImageLibrary?; private externalImageLibraryTab?; private externalAiAssistant?; private externalDisplayConditionsLibrary?; private externalVideoLibrary?; private blocksPanel?; private iconsRegistry?; withLocalization(i18n: Record>): this; /** * @deprecated Use addStyles() instead. This method will be removed in a future version. */ withStyles(styles: string): this; addStyles(styles: string): this; /** * @description defines custom developer styles to use inside the editor document preview */ withPreviewStyles(styles: string): this; addContextAction(contextAction: ConstructorOfType): this; addUiElement(uiElement: ConstructorOfType): this; withUiElementTagRegistry(uiElementTagRegistry: ConstructorOfType): this; addControl(control: ConstructorOfType): this; withSettingsPanelRegistry(settingsPanelRegistry: ConstructorOfType): this; withExternalSmartElementsLibrary(externalSmartElementsLibrary: ConstructorOfType): this; withExternalImageLibrary(externalImageLibrary: ConstructorOfType): this; withExternalImageLibraryTab(externalImageLibraryTab: ConstructorOfType): this; withExternalAiAssistant(externalAiAssistant: ConstructorOfType): this; withExternalDisplayCondition(externalDisplayCondition: ConstructorOfType): this; withExternalVideosLibrary(externalVideoLibrary: ConstructorOfType): this; withBlocksPanel(blocksPanel: ConstructorOfType): this; addBlock(block: ConstructorOfType): this; withIconsRegistry(iconsRegistry: ConstructorOfType): this; addGeneralPanelTab(tab: ConstructorOfType): this; addModulesPanelTab(tab: ConstructorOfType): this; build(): Extension; } /** * @description Properties and methods contained in DOM node of UE element ({@link UIElementType}) */ interface UIEDomElement extends HTMLElement { value: unknown; /** * @description Sets element's supported attribute ({@link UEAttr}) value. */ setUIEAttribute(name: string, value: unknown): void; } export { ADD_CUSTOM_FONT_OPTION, type AIPopoverOptions, AccordionControls, AiAssistantValueType, AmpFormControls, type BackgroundImageControlLabels, BannerChildControls, BannerControls, type BaseApi, type BaseImmutableCssNode, type BaseImmutableHtmlNode, type BaseImmutableNode, Block, type BlockApi, BlockAttr, BlockCompositionType, type BlockItem, BlockName, BlockRenderer, type BlockRendererApi, BlockSelector, BlockType, BlocksPanel, type BlocksPanelApi, type BorderLabels, BuiltInControl, BuiltInControlTypes, ButtonAlignBuiltInControl, ButtonBackgroundColorBuiltInControl, ButtonBlockBackgroundColorBuiltInControl, ButtonBorderBuiltInControl, type ButtonBorderControlLabels, ButtonBorderRadiusBuiltInControl, type ButtonBorderRadiusControlLabels, ButtonColorBuiltInControl, ButtonControls, ButtonFitToContainerBuiltInControl, ButtonFixedHeightBuiltInControl, ButtonFontFamilyBuiltInControl, ButtonHoverBorderColorBuiltInControl, ButtonHoverColorBuiltInControl, ButtonHoverTextColorBuiltInControl, ButtonMarginsBuiltInControl, ButtonPaddingsBuiltInControl, ButtonTextBuiltInControl, ButtonTextSizeBuiltInControl, ButtonTextStyleAndFontColorBuiltInControl, type ButtonTextStyleAndFontColorControlLabels, ButtonVisibilityBuiltInControl, CarouselControls, type ConstructorOfType, ContainerBackgroundColorBuiltInControl, ContainerBackgroundImageBuiltInControl, ContainerBorderBuiltInControl, ContainerControls, ContainerVisibilityBuiltInControl, ContextAction, type ContextActionApi, ContextActionType, Control, type ControlApi, type ControlLabels, type CssNodeModifier, type CustomFontFamily, CustomImageControls, CustomLinkControls, CustomTextControls, type DisplayCondition, type EditorState, EditorStatePropertyType, type EmojiPopoverOptions, Extension, ExtensionBuilder, type ExtensionPlatformApi, type ExtensionPlatformRequestOptions, ExtensionPopoverType, ExternalAiAssistant, type ExternalAiAssistantCallback, type ExternalAiAssistantCancelCallback, type ExternalDisplayConditionCategory, type ExternalDisplayConditionSelectedCB, type ExternalDisplayConditionsApi, ExternalDisplayConditionsLibrary, type ExternalGalleryImage, type ExternalGalleryImageCancelCallback, type ExternalGalleryImageSelectCallback, type ExternalGalleryVideo, ExternalImageLibrary, ExternalImageLibraryTab, type ExternalSmartElement, type ExternalSmartElementCancelCallback, type ExternalSmartElementSelectCallback, ExternalSmartElementsLibrary, ExternalVideosLibrary, type ExternalVideosLibraryCancelCallback, type ExternalVideosLibrarySelectedCallback, type FixedHeightLabels, GeneralControls, GeneralPanelTab, type GeneralPanelTabApi, GeneralStylesControls, HTMLControls, type HideElementState, type HtmlNodeModifier, IconsRegistry, ImageAlignmentBuiltInControl, ImageControls, ImageMarginsBuiltInControl, ImageSizeBuiltInControl, ImageVisibilityBuiltInControl, type ImmutableCssAttributeNode, type ImmutableCssCommentNode, type ImmutableCssDocumentNode, type ImmutableCssNode, type ImmutableCssRuleNode, type ImmutableHtmlElementNode, type ImmutableHtmlNode, type ImmutableHtmlTextNode, type IndentLabels, type IndentsFormNameLabels, type IndentsInputsLabels, type IndentsLockLabels, MenuControls, MessageSettingsControls, ModificationDescription, ModulesPanelTab, type ModulesPanelTabApi, type MultiRowStructureModifier, OrderableItemIconPosition, PanelPosition, type PopoverPreferredSides, PopoverSide, PreviewDeviceMode, type SettingsPanelApi, SettingsPanelRegistry, SettingsPanelTab, SettingsTab, SocialControls, SpacerBackgroundColorBuiltInControl, SpacerControls, SpacerMarginsBuiltInControl, StripeControls, StructureAdaptBuiltInControl, type StructureAdaptControlLabels, StructureBackgroundColorBuiltInControl, StructureBackgroundImageBuiltInControl, StructureBorderBuiltInControl, StructureControls, type StructureLayout, StructureMarginsBuiltInControl, StructurePaddingsBuiltInControl, StructureVisibilityBuiltInControl, type TemplateModifier, TextAlignBuiltInControl, TextBlockBackgroundBuiltInControl, TextColorBuiltInControl, TextControls, TextFixedHeightBuiltInControl, TextFontFamilyBuiltInControl, TextLineSpacingBuiltInControl, TextPaddingsBuiltInControl, TextSizeBuiltInControl, TextStyleBuiltInControl, TextVisibilityBuiltInControl, ThemeMode, TimerControls, UEAttr, type UIEDomElement, UIElement, type UIElementApi, UIElementTagRegistry, UIElementType, VideoControls };