import Backbone from 'backbone';
import { ModelDestroyOptions, _StringKey } from 'backbone';

export interface DomComponentsConfig {
	stylePrefix?: string;
	/**
	 * Could be used for default components.
	 */
	components?: Record<string, any>[];
	/**
	 * If the component is draggable you can drag the component itself (not only from the toolbar).
	 * @default true
	 */
	draggableComponents?: boolean;
	/**
	 * Experimental: Disable text inner components.
	 * With this option, you're able to decide which inner component inside text should be
	 * disabled (eg. no select, no hover, no layer visibility) once edited.
	 * @default false
	 * @example
	 * // disable all inner childs
	 * disableTextInnerChilds: true,
	 * // disable all except link components
	 * disableTextInnerChilds: (child) => !child.is('link'),
	 */
	disableTextInnerChilds?: boolean | ((cmp: Component) => boolean | void);
	/**
	 * You can setup a custom component definition processor before adding it into the editor.
	 * It might be useful to transform custom objects (es. some framework specific JSX) to GrapesJS component one.
	 * This custom function will be executed on ANY new added component to the editor so make smart checks/conditions
	 * to avoid doing useless executions
	 * By default, GrapesJS supports already elements generated from React JSX preset
	 * @example
	 * processor: (obj) => {
	 *  if (obj.$$typeof) { // eg. this is a React Element
	 *     const gjsComponent = {
	 *      type: obj.type,
	 *      components: obj.props.children,
	 *      ...
	 *     };
	 *     ...
	 *     return gjsComponent;
	 *  }
	 * }
	 */
	processor?: (obj: any) => Record<string, any> | undefined;
	/**
	 * List of HTML void elements.
	 * https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#void-elements
	 */
	voidElements?: string[];
	/**
	 * Experimental: Use the frame document for DOM element creation.
	 * This option might be useful when elements require the local document context to
	 * work properly (eg. Web Components).
	 */
	useFrameDoc?: boolean;
}
declare const DataVariableType: "data-variable";
export interface DataVariableProps {
	type?: typeof DataVariableType;
	path?: string;
	defaultValue?: string;
	collectionId?: string;
	variableType?: DataCollectionStateType;
}
declare class DataVariable extends Model<DataVariableProps> {
	private em;
	private collectionsStateMap;
	defaults(): DataVariableProps;
	constructor(props: DataVariableProps, options: {
		em: EditorModel;
		collectionsStateMap: DataCollectionStateMap;
	});
	get path(): string;
	get defaultValue(): string;
	get collectionId(): string | undefined;
	get variableType(): DataCollectionStateType | undefined;
	getDataValue(): any;
	resolvesFromCollection(): boolean;
	updateCollectionsStateMap(collectionsStateMap: DataCollectionStateMap): void;
	getResolverPath(): string | false;
	toJSON(options?: any): DataVariableProps & {
		type: typeof DataVariableType;
	};
	private resolveDataSourcePath;
	private resolveCollectionVariable;
	private resolveCurrentItem;
}
declare enum DataCollectionStateType {
	currentIndex = "currentIndex",
	startIndex = "startIndex",
	currentItem = "currentItem",
	endIndex = "endIndex",
	collectionId = "collectionId",
	totalItems = "totalItems",
	remainingItems = "remainingItems"
}
export interface DataCollectionState {
	[DataCollectionStateType.currentIndex]: number;
	[DataCollectionStateType.startIndex]: number;
	[DataCollectionStateType.currentItem]: DataVariableProps;
	[DataCollectionStateType.endIndex]: number;
	[DataCollectionStateType.collectionId]: string;
	[DataCollectionStateType.totalItems]: number;
	[DataCollectionStateType.remainingItems]: number;
}
export interface DataCollectionStateMap {
	[key: string]: DataCollectionState;
}
export interface DynamicWatchersOptions {
	skipWatcherUpdates?: boolean;
	fromDataSource?: boolean;
}
export interface ComponentResolverWatcherOptions {
	em: EditorModel;
	collectionsStateMap?: DataCollectionStateMap;
}
declare class ModuleModel<TModule extends IBaseModule<any> = Module, T extends ObjectHash = any, S = SetOptions, E = any> extends Model<T, S, E> {
	private _module;
	constructor(module: TModule, attributes?: T, options?: CombinedModelConstructorOptions<E>);
	get module(): TModule;
	get config(): TModule extends IBaseModule<infer C> ? C : unknown;
	get em(): EditorModel;
}
export type ModuleExt<TModel extends ModuleModel> = TModel extends ModuleModel<infer M> ? M : unknown;
export type ModelConstructor<TModel extends ModuleModel> = {
	new (mod: ModuleExt<TModel>, attr: any): TModel;
};
declare class ModuleCollection<TModel extends ModuleModel = ModuleModel> extends Collection<TModel> {
	module: ModuleExt<TModel>;
	private newModel;
	add(model: Array<Record<string, any>> | TModel, options?: AddOptions): TModel;
	add(models: Array<Array<Record<string, any>> | TModel>, options?: AddOptions): TModel[];
	constructor(module: ModuleExt<TModel>, models: TModel[] | Array<Record<string, any>>, modelConstructor: ModelConstructor<TModel>);
	preinitialize(models?: TModel[] | Array<Record<string, any>>, options?: any): void;
}
export type ModuleFromModel<TModel extends ModuleModel> = TModel extends ModuleModel<infer M> ? M : unknown;
export type ModuleModelExt<TItem extends ModuleModel | ModuleCollection> = TItem extends ModuleCollection<infer M> ? ModuleFromModel<M> : TItem extends ModuleModel<infer M> ? M : unknown;
declare class ModuleView<TModel extends ModuleModel | ModuleCollection = ModuleModel, TElement extends Element = HTMLElement> extends View<TModel extends ModuleModel ? TModel : undefined, TElement> {
	protected get pfx(): string;
	protected get ppfx(): string;
	collection: TModel extends ModuleModel ? ModuleCollection<ModuleModel> : TModel;
	protected get module(): ModuleModelExt<TModel>;
	protected get em(): EditorModel;
	protected get config(): ModuleModelExt<TModel> extends IBaseModule<infer C> ? C : unknown;
	className: string;
	preinitialize(options?: any): void;
}
export type ContentElement = string | ComponentDefinition;
export type ContentType = ContentElement | ContentElement[];
export interface DraggableContent {
	/**
	 * Determines if a block can be moved inside a given component when the content is a function.
	 *
	 * This property is used to determine the validity of the drag operation.
	 * @type {ComponentDefinition | undefined}
	 */
	dragDef?: ComponentDefinition;
	/**
	 * The content being dragged. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition)
	 */
	content?: ContentType | (() => ContentType);
}
export type DragSource<T> = DraggableContent & {
	model?: T;
};
export type Placement = "inside" | "before" | "after";
export type DroppableZoneConfig = {
	ratio: number;
	minUndroppableDimension: number;
	maxUndroppableDimension: number;
};
declare enum DragDirection {
	Vertical = "Vertical",
	Horizontal = "Horizontal",
	BothDirections = "BothDirections"
}
export type CustomTarget = ({ event }: {
	event: MouseEvent;
}) => HTMLElement | null;
export interface SorterContainerContext {
	container: HTMLElement;
	containerSel: string;
	itemSel: string;
	pfx: string;
	document: Document;
	placeholderElement: HTMLElement;
	customTarget?: CustomTarget;
}
export interface PositionOptions {
	windowMargin?: number;
	borderOffset?: number;
	offsetTop?: number;
	offsetLeft?: number;
	canvasRelative?: boolean;
	relative?: boolean;
}
/**
 * Represents an event handler for the `onStartSort` event.
 *
 * @param sourceNodes The source nodes being sorted.
 * @param container The container element where the sorting is taking place.
 */
export type OnStartSortHandler<NodeType> = (sourceNodes: NodeType[], container?: HTMLElement) => void;
/**
 * Represents an event handler for the `onDragStart` event.
 *
 * @param mouseEvent The mouse event associated with the drag start.
 */
export type OnDragStartHandler = (mouseEvent: MouseEvent) => void;
export type OnMouseMoveHandler = (mouseEvent: MouseEvent) => void;
export type OnDropHandler<NodeType> = (targetNode: NodeType | undefined, sourceNodes: NodeType[], index: number | undefined) => void;
export type OnTargetChangeHandler<NodeType> = (oldTargetNode: NodeType | undefined, newTargetNode: NodeType | undefined) => void;
export type OnPlaceholderPositionChangeHandler = (targetDimension: Dimension, placement: Placement) => void;
export type OnEndHandler = () => void;
/**
 * Represents a collection of event handlers for sortable tree node events.
 */
export interface SorterEventHandlers<NodeType> {
	onStartSort?: OnStartSortHandler<NodeType>;
	onDragStart?: OnDragStartHandler;
	onMouseMove?: OnMouseMoveHandler;
	onDrop?: OnDropHandler<NodeType>;
	onTargetChange?: OnTargetChangeHandler<NodeType>;
	onPlaceholderPositionChange?: OnPlaceholderPositionChangeHandler;
	onEnd?: OnEndHandler;
	legacyOnMoveClb?: Function;
	legacyOnStartSort?: Function;
	legacyOnEndMove?: Function;
	legacyOnEnd?: Function;
}
export interface SorterDragBehaviorOptions {
	dragDirection: DragDirection;
	nested?: boolean;
	selectOnEnd?: boolean;
}
export interface SorterOptions<T, NodeType extends SortableTreeNode<T>> {
	em: EditorModel;
	treeClass: new (model: T, dragSource?: DragSource<T>) => NodeType;
	containerContext: SorterContainerContext;
	positionOptions: PositionOptions;
	dragBehavior: SorterDragBehaviorOptions;
	eventHandlers: SorterEventHandlers<NodeType>;
}
declare class Dimension {
	top: number;
	left: number;
	height: number;
	width: number;
	offsets: ReturnType<CanvasModule["getElementOffsets"]>;
	dir?: boolean;
	/**
	 * Initializes the DimensionCalculator with the given initial dimensions.
	 *
	 * @param initialDimensions - The initial dimensions containing `top`, `left`, `height`, `width`, and other properties.
	 */
	constructor(initialDimensions: {
		top: number;
		left: number;
		height: number;
		width: number;
		offsets: ReturnType<CanvasModule["getElementOffsets"]>;
		dir?: boolean;
		el?: HTMLElement;
		indexEl?: number;
	});
	/**
	 * Calculates the difference between the current and previous dimensions.
	 * If there are no previous dimensions, it will return zero differences.
	 *
	 * @returns An object containing the differences in `top` and `left` positions.
	 */
	calculateDimensionDifference(dimension: Dimension): {
		topDifference: number;
		leftDifference: number;
	};
	/**
	 * Updates the current dimensions by adding the given differences to the `top` and `left` values.
	 *
	 * @param topDifference - The difference to add to the current `top` value.
	 * @param leftDifference - The difference to add to the current `left` value.
	 */
	adjustDimensions(difference: {
		topDifference: number;
		leftDifference: number;
	}): Dimension;
	/**
	 * Determines the placement ('before' or 'after') based on the X and Y coordinates and center points.
	 *
	 * @param {number} mouseX X coordinate of the mouse
	 * @param {number} mouseY Y coordinate of the mouse
	 * @return {Placement} 'before' or 'after'
	 */
	determinePlacement(mouseX: number, mouseY: number): Placement;
	/**
	 * Compares the current dimension object with another dimension to check equality.
	 *
	 * @param {Dimension} dimension - The dimension to compare against.
	 * @returns {boolean} True if the dimensions are equal, otherwise false.
	 */
	equals(dimension: Dimension | undefined): boolean;
	/**
	 * Creates a clone of the current Dimension object.
	 *
	 * @returns {Dimension} A new Dimension object with the same properties.
	 */
	clone(): Dimension;
	getDropArea(config: DroppableZoneConfig): Dimension;
	private adjustDropDimension;
	/**
	 * Checks if the given coordinates are within the bounds of this dimension instance.
	 *
	 * @param {number} x - The X coordinate to check.
	 * @param {number} y - The Y coordinate to check.
	 * @returns {boolean} - True if the coordinates are within bounds, otherwise false.
	 */
	isWithinBounds(x: number, y: number): boolean;
}
declare abstract class SortableTreeNode<T> {
	protected _model: T;
	protected _dragSource: DragSource<T>;
	protected _dropAreaConfig: DroppableZoneConfig;
	/** The dimensions of the node. */
	nodeDimensions?: Dimension;
	/** The dimensions of the child elements within the target node. */
	childrenDimensions?: Dimension[];
	constructor(model: T, dragSource?: DragSource<T>);
	/**
	 * Get the list of children of this node.
	 *
	 * @returns {SortableTreeNode<T>[] | null} - List of children or null if no children exist.
	 */
	abstract getChildren(): SortableTreeNode<T>[] | null;
	/**
	 * Get the parent node of this node, or null if it has no parent.
	 *
	 * @returns {SortableTreeNode<T> | null} - Parent node or null if it has no parent.
	 */
	abstract getParent(): SortableTreeNode<T> | null;
	/**
	 * Add a child node at a particular index.
	 *
	 * @param {SortableTreeNode<T>} node - The node to add.
	 * @param {number} index - The position to insert the child node at.
	 * @returns {SortableTreeNode<T>} - The added node.
	 */
	abstract addChildAt(node: SortableTreeNode<T>, index: number): SortableTreeNode<T>;
	/**
	 * Remove a child node at a particular index.
	 *
	 * @param {number} index - The index to remove the child node from.
	 */
	abstract removeChildAt(index: number): void;
	/**
	 * Get the index of a child node in the current node's list of children.
	 *
	 * @param {SortableTreeNode<T>} node - The node whose index is to be found.
	 * @returns {number} - The index of the node, or -1 if the node is not a child.
	 */
	abstract indexOfChild(node: SortableTreeNode<T>): number;
	/**
	 * Determine if a node can be moved to a specific index in another node's children list.
	 *
	 * @param {SortableTreeNode<T>} source - The node to be moved.
	 * @param {number} index - The index at which the node will be inserted.
	 * @returns {boolean} - True if the move is allowed, false otherwise.
	 */
	abstract canMove(source: SortableTreeNode<T>, index: number): boolean;
	/**
	 * Get the view associated with this node, if any.
	 *
	 * @returns {View | undefined} - The view associated with this node, or undefined if none.
	 */
	abstract get view(): View | undefined;
	/**
	 * Get the HTML element associated with this node.
	 *
	 * @returns {HTMLElement} - The associated HTML element.
	 */
	abstract get element(): HTMLElement | undefined;
	/**
	 * Get the model associated with this node.
	 *
	 * @returns {T} - The associated model.
	 */
	get model(): T;
	get dragSource(): DragSource<T>;
	get dropArea(): Dimension | undefined;
	/**
	 * Checks if the given coordinates are within the bounds of this node.
	 *
	 * @param {number} x - The X coordinate to check.
	 * @param {number} y - The Y coordinate to check.
	 * @returns {boolean} - True if the coordinates are within bounds, otherwise false.
	 */
	isWithinDropBounds(x: number, y: number): boolean;
	equals(node?: SortableTreeNode<T>): node is SortableTreeNode<T>;
	adjustDimensions(diff: {
		topDifference: number;
		leftDifference: number;
	}): void;
}
declare abstract class BaseComponentNode extends SortableTreeNode<Component> {
	private displayCache;
	/**
	 * Get the list of child components.
	 * @returns {BaseComponentNode[] | null} - The list of children wrapped in
	 * BaseComponentNode, or null if there are no children.
	 */
	getChildren(): BaseComponentNode[] | null;
	/**
	 * Get the list of displayed children, i.e., components that have a valid HTML element.
	 * Cached values are used to avoid recalculating the display status unnecessarily.
	 * @returns {BaseComponentNode[] | null} - The list of displayed children wrapped in
	 * BaseComponentNode, or null if there are no displayed children.
	 */
	private getDisplayedChildren;
	/**
	 * Check if a child is displayed, using cached value if available.
	 * @param {Component} child - The child component to check.
	 * @returns {boolean} - Whether the child is displayed.
	 */
	private isChildDisplayed;
	/**
	 * Get the parent component of this node.
	 * @returns {BaseComponentNode | null} - The parent wrapped in BaseComponentNode,
	 * or null if no parent exists.
	 */
	getParent(): BaseComponentNode | null;
	/**
	 * Add a child component to this node at the specified index.
	 * @param {BaseComponentNode} node - The child node to add.
	 * @param {number} displayIndex - The visual index at which to insert the child.
	 * @param {{ action: string }} options - Options for the operation, with the default action being 'add-component'.
	 * @returns {BaseComponentNode} - The newly added child node wrapped in BaseComponentNode.
	 */
	addChildAt(node: BaseComponentNode, displayIndex: number, options?: {
		action: string;
	}): BaseComponentNode;
	/**
	 * Remove a child component at the specified index.
	 * @param {number} displayIndex - The visual index of the child to remove.
	 * @param {{ temporary: boolean }} options - Whether to temporarily remove the child.
	 */
	removeChildAt(displayIndex: number, options?: {
		temporary: boolean;
	}): void;
	/**
	 * Get the visual index of a child node within the displayed children.
	 * @param {BaseComponentNode} node - The child node to locate.
	 * @returns {number} - The index of the child node, or -1 if not found.
	 */
	indexOfChild(node: BaseComponentNode): number;
	/**
	 * Get the index of the given node within the displayed children.
	 * @param {BaseComponentNode} node - The node to find.
	 * @returns {number} - The display index of the node, or -1 if not found.
	 */
	private getDisplayIndex;
	/**
	 * Convert a display index to the actual index within the component's children array.
	 * @param {number} index - The display index to convert.
	 * @returns {number} - The corresponding real index, or -1 if not found.
	 */
	getRealIndex(index: number): number;
	/**
	 * Check if a source node can be moved to a specified index within this component.
	 * @param {BaseComponentNode} source - The source node to move.
	 * @param {number} index - The display index to move the source to.
	 * @returns {boolean} - True if the move is allowed, false otherwise.
	 */
	canMove(source: BaseComponentNode, index: number): boolean;
	/**
	 * Abstract method to get the view associated with this component.
	 * Subclasses must implement this method.
	 * @abstract
	 */
	abstract get view(): any;
	/**
	 * Abstract method to get the DOM element associated with this component.
	 * Subclasses must implement this method.
	 * @abstract
	 */
	abstract get element(): HTMLElement | undefined;
	/**
	 * Reset the state of the node by clearing its status and disabling editing.
	 */
	restNodeState(): void;
	/**
	 * Set the contentEditable property of the node's DOM element.
	 * @param {boolean} value - True to make the content editable, false to disable editing.
	 */
	setContentEditable(value: boolean): void;
	/**
	 * Disable editing capabilities for the component's view.
	 * This method depends on the presence of the `disableEditing` method in the view.
	 */
	private disableEditing;
	/**
	 * Clear the current state of the node by resetting its status.
	 */
	private clearState;
	/**
	 * Set the state of the node to 'selected-parent'.
	 */
	setSelectedParentState(): void;
	/**
	 * Determine if the component is a text node.
	 * @returns {boolean} - True if the component is a text node, false otherwise.
	 */
	isTextNode(): boolean;
	/**
	 * Determine if the component is textable.
	 * @returns {boolean} - True if the component is textable, false otherwise.
	 */
	isTextable(): boolean;
}
declare class CanvasComponentNode extends BaseComponentNode {
	protected _dropAreaConfig: {
		ratio: number;
		minUndroppableDimension: number;
		maxUndroppableDimension: number;
	};
	/**
	 * Get the associated view of this component.
	 * @returns The view associated with the component, or undefined if none.
	 */
	get view(): ComponentView<Component> | undefined;
	/**
	 * Get the associated element of this component.
	 * @returns The Element associated with the component, or undefined if none.
	 */
	get element(): HTMLElement | undefined;
}
declare class CanvasNewComponentNode extends CanvasComponentNode {
	canMove(source: CanvasNewComponentNode, index: number): boolean;
	private canMoveSingleContent;
	addChildAt(node: CanvasNewComponentNode, index: number): CanvasNewComponentNode;
	/**
	 * Adds a single content item to the current node.
	 * @param {ContentType} content - The content to add.
	 * @param {number} index - The index where the content is to be added.
	 * @param {boolean} insertingTextableIntoText - Whether the operation involves textable content.
	 * @returns {CanvasNewComponentNode} - The newly added node.
	 */
	private addSingleChild;
	/**
	 * Adds multiple content items as children, looping through the array.
	 * @param {any[]} contentArray - Array of content items
	 * @param {number} index - Index to start adding children
	 * @param {boolean} insertingTextableIntoText - Whether inserting textable content
	 * @returns {CanvasNewComponentNode} The last added node
	 */
	private addMultipleChildren;
	/**
	 * Checks if the source component belongs to the same symbol model as the current component.
	 * @param {Component | undefined} symbolModel - Symbol model to compare
	 * @returns {boolean} Whether the source is the same symbol
	 */
	private isSourceSameSymbol;
	set content(content: ContentType | (() => ContentType));
}
export type ContainerContext = {
	container: HTMLElement;
	itemSel: string;
	customTarget?: CustomTarget;
	document: Document;
};
export interface DropLocationDeterminerOptions<T, NodeType extends SortableTreeNode<T>> {
	em: EditorModel;
	treeClass: new (model: T, dragSource?: DragSource<T>) => NodeType;
	containerContext: ContainerContext;
	positionOptions: PositionOptions;
	dragDirection: DragDirection;
	eventHandlers: SorterEventHandlers<NodeType>;
}
/**
 * Represents the data related to the last move event during drag-and-drop sorting.
 * This type is discriminated by the presence or absence of a valid target node.
 */
export type lastMoveData<NodeType> = {
	/** The target node under the mouse pointer during the last move. */
	targetNode?: NodeType;
	/** The node under the mouse pointer during this move*/
	hoveredNode?: NodeType;
	/** The index where the placeholder or dragged element should be inserted. */
	index?: number;
	/** Placement relative to the target ('before' or 'after'). */
	placement?: Placement;
	/** The mouse event, used if we want to move placeholder with scrolling. */
	mouseEvent?: MouseEvent;
	placeholderDimensions?: Dimension;
};
declare class DropLocationDeterminer<T, NodeType extends SortableTreeNode<T>> extends View {
	em: EditorModel;
	treeClass: new (model: any, dragSource?: DragSource<T>) => NodeType;
	positionOptions: PositionOptions;
	containerContext: ContainerContext;
	dragDirection: DragDirection;
	eventHandlers: SorterEventHandlers<NodeType>;
	sourceNodes: NodeType[];
	lastMoveData: lastMoveData<NodeType>;
	containerOffset: {
		top: number;
		left: number;
	};
	private moveThreshold;
	private rateLimiter;
	constructor(options: DropLocationDeterminerOptions<T, NodeType>);
	/**
	 * Picking components to move
	 * @param {HTMLElement[]} sourceElements
	 * */
	startSort(sourceNodes: NodeType[]): void;
	private bindDragEventHandlers;
	/**
	 * Triggers the `onMove` event.
	 *
	 * This method is should be called when the user scrolls within the container, using the last recorded mouse event
	 * to determine the new target.
	 */
	recalculateTargetOnScroll(): void;
	private onMove;
	private handleMove;
	private adjustForScroll;
	private restLastMoveData;
	private triggerLegacyOnMoveCallback;
	private triggerMoveEvent;
	/**
	 * Handles the movement of the dragged element over a target node.
	 * Updates the placeholder position and triggers relevant events when necessary.
	 *
	 * @param node - The node currently being hovered over.
	 * @param mouseX - The x-coordinate of the mouse relative to the container.
	 * @param mouseY - The y-coordinate of the mouse relative to the container.
	 */
	private getDropPosition;
	/**
	 * Retrieves the target node based on the mouse event.
	 * Determines the element being hovered, its corresponding model, and
	 * calculates the valid parent node to use as the target node.
	 *
	 * @param mouseEvent - The mouse event containing the cursor position and target element.
	 * @returns The target node if a valid one is found, otherwise undefined.
	 */
	private getTargetNode;
	/**
	 * Creates a new hovered node or reuses the last hovered node if it is the same.
	 *
	 * @param hoveredModel - The model corresponding to the hovered element.
	 * @returns The new or reused hovered node.
	 */
	private getOrCreateHoveredNode;
	/**
	 * Checks if the target node has changed and returns the last one if they are identical.
	 *
	 * @param targetNode - The newly calculated target node.
	 * @returns The new or reused target node.
	 */
	private getOrReuseTargetNode;
	private getMouseTargetElement;
	private onDragStart;
	endDrag(): void;
	cancelDrag(): void;
	private finalizeMove;
	private dropDragged;
	private triggerOnDragEndEvent;
	/**
	 * Retrieves the first element that has a data model associated with it.
	 * Traverses up the DOM tree from the given element until it reaches the container
	 * or an element with a data model.
	 *
	 * @param mouseTargetEl - The element to start searching from.
	 * @returns The first element with a data model, or null if not found.
	 */
	private getFirstElementWithAModel;
	private getValidParent;
	private handleParentTraversal;
	private getIndexInParent;
	private triggerDragValidation;
	/**
	 * Clean up event listeners that were attached during the move.
	 *
	 * @param {HTMLElement} container - The container element.
	 * @param {Document[]} docs - List of documents.
	 * @private
	 */
	private cleanupEventListeners;
	/**
	 * Determines if an element is in the normal flow of the document.
	 * This checks whether the element is not floated or positioned in a way that removes it from the flow.
	 *
	 * @param  {HTMLElement} el - The element to check.
	 * @param  {HTMLElement} [parent=document.body] - The parent element for additional checks (defaults to `document.body`).
	 * @return {boolean} Returns `true` if the element is in flow, otherwise `false`.
	 * @private
	 */
	private getDirection;
	/**
	 * Get children dimensions
	 * @param {NodeType} el Element root
	 * @return {Array}
	 * */
	private getChildrenDim;
	/**
	 * Gets the mouse position relative to the container, adjusting for scroll and canvas relative options.
	 *
	 * @return {{ mouseXRelativeToContainer: number, mouseYRelativeToContainer: number }} - The mouse X and Y positions relative to the container.
	 * @private
	 */
	private getMousePositionRelativeToContainer;
	/**
	 * Caches the container position and updates relevant variables for position calculation.
	 *
	 * @private
	 */
	private cacheContainerPosition;
	/**
	 * Returns dimensions and positions about the element
	 * @param {HTMLElement} el
	 * @return {Dimension}
	 */
	private getDim;
}
declare class PlaceholderClass extends View {
	pfx: string;
	allowNesting: boolean;
	container: HTMLElement;
	el: HTMLElement;
	offset: {
		top: number;
		left: number;
	};
	private moveLimiter;
	constructor(options: {
		container: HTMLElement;
		pfx?: string;
		allowNesting?: boolean;
		el: HTMLElement;
		offset: {
			top: number;
			left: number;
		};
	});
	show(): void;
	hide(): void;
	/**
	 * Updates the position of the placeholder with a movement threshold.
	 * @param {Dimension} elementDimension element dimensions.
	 * @param {Placement} placement either before or after the target.
	 */
	move(elementDimension: Dimension, placement: Placement): void;
	private _move;
	/**
	 * Sets the orientation of the placeholder based on the element dimensions.
	 * @param {Dimension} elementDimension Dimensions of the element at the index.
	 */
	private setOrientationForDimension;
	/**
	 * Sets the placeholder's class to vertical.
	 */
	private setOrientation;
	/**
	 * Updates the CSS styles of the placeholder element.
	 * @param {number} top Top position of the placeholder.
	 * @param {number} left Left position of the placeholder.
	 * @param {string} width Width of the placeholder.
	 * @param {string} height Height of the placeholder.
	 */
	private updateStyles;
	private adjustOffset;
}
declare class Sorter<T, NodeType extends SortableTreeNode<T>> {
	em: EditorModel;
	treeClass: new (model: T, dragSource?: DragSource<T>) => NodeType;
	placeholder: PlaceholderClass;
	dropLocationDeterminer: DropLocationDeterminer<T, NodeType>;
	positionOptions: PositionOptions;
	containerContext: SorterContainerContext;
	dragBehavior: SorterDragBehaviorOptions;
	eventHandlers: SorterEventHandlers<NodeType>;
	sourceNodes?: NodeType[];
	constructor(sorterOptions: SorterOptions<T, NodeType>);
	/**
	 * Picking components to move
	 * @param {HTMLElement[]} sources[]
	 * */
	startSort(sources: {
		element?: HTMLElement;
		dragSource?: DragSource<T>;
	}[]): void;
	validTarget(targetEl: HTMLElement | undefined, sources: {
		element?: HTMLElement;
		dragSource?: DragSource<T>;
	}[], index: number): boolean;
	private getSourceNodes;
	/**
	 * This method is should be called when the user scrolls within the container.
	 */
	protected recalculateTargetOnScroll(): void;
	/**
	 * Called when the drag operation should be cancelled
	 */
	cancelDrag(): void;
	/**
	 * Called to drop an item onto a valid target.
	 */
	endDrag(): void;
	private handlePlaceholderMove;
	/**
	 * Creates a new placeholder element for the drag-and-drop operation.
	 *
	 * @returns {PlaceholderClass} The newly created placeholder instance.
	 */
	private createPlaceholder;
	private ensurePlaceholderElement;
	/**
	 * Triggered when the offset of the editor is changed
	 */
	private updateOffset;
	/**
	 * Finds the closest valid source element within the container context.
	
	 * @param sourceElement - The initial source element to check.
	 * @returns The closest valid source element, or null if none is found.
	 */
	private findValidSourceElement;
	protected bindDragEventHandlers(): void;
	private updatePlaceholderPosition;
	/**
	 * Clean up event listeners that were attached during the move.
	 *
	 * @private
	 */
	protected cleanupEventListeners(): void;
	/**
	 * Finalize the move.
	 *
	 * @private
	 */
	protected finalizeMove(): void;
	/**
	 * Cancels the drag on Escape press ( nothing is dropped or moved )
	 * @param {KeyboardEvent} e - The keyboard event object.
	 */
	private rollback;
	protected triggerNullOnEndMove(dragIsCancelled: boolean): void;
}
export interface CategoryViewConfig {
	em: EditorModel;
	pStylePrefix?: string;
	stylePrefix?: string;
}
declare class CategoryView extends View<Category> {
	em: EditorModel;
	config: CategoryViewConfig;
	pfx: string;
	caretR: string;
	caretD: string;
	iconClass: string;
	activeClass: string;
	iconEl?: HTMLElement;
	typeEl?: HTMLElement;
	catName: string;
	events(): {
		"click [data-title]": string;
	};
	template({ pfx, label, catName }: {
		pfx: string;
		label: string;
		catName: string;
	}): string;
	/** @ts-ignore */
	attributes(): Record<string, any>;
	constructor(o: any, config: CategoryViewConfig, catName: string);
	updateVisibility(): void;
	open(): void;
	close(): void;
	toggle(): void;
	getIconEl(): HTMLElement;
	getTypeEl(): HTMLElement;
	append(el: HTMLElement): void;
	render(): this;
}
interface CategoryProperties {
	/**
	 * Category id.
	 */
	id: string;
	/**
	 * Category label.
	 */
	label: string;
	/**
	 * Category open state.
	 * @default true
	 */
	open?: boolean;
	/**
	 * Category order.
	 */
	order?: string | number;
	/**
	 * Category attributes.
	 * @default {}
	 */
	attributes?: Record<string, any>;
}
export interface ItemsByCategory<T> {
	category?: Category;
	items: T[];
}
export declare class Category extends Model<CategoryProperties> {
	view?: CategoryView;
	defaults(): {
		id: string;
		label: string;
		open: boolean;
		attributes: {};
	};
	getId(): string;
	getLabel(): string;
}
export type CategoryCollectionParams = ConstructorParameters<typeof Collection<Category>>;
export interface CategoryOptions {
	events?: {
		update?: string;
	};
	em?: EditorModel;
}
export declare class Categories extends Collection<Category> {
	constructor(models?: CategoryCollectionParams[0], opts?: CategoryOptions);
	/** @ts-ignore */
	add(model: (CategoryProperties | Category)[] | CategoryProperties | Category, opts?: AddOptions): Category;
	get(id: string | Category): Category;
}
export interface ModelWithCategoryProps {
	category?: string | CategoryProperties;
}
declare abstract class CollectionWithCategories<T extends Model<ModelWithCategoryProps>> extends Collection<T> {
	abstract getCategories(): Categories;
	initCategory(model: T): Category | undefined;
}
export declare class Blocks extends CollectionWithCategories<Block> {
	em: EditorModel;
	constructor(coll: any[], options: {
		em: EditorModel;
	});
	getCategories(): Categories;
	handleAdd(model: Block): void;
}
/** @private */
export interface BlockProperties extends DraggableContent {
	/**
	 * Block label, eg. `My block`
	 */
	label: string;
	/**
	 * HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
	 * @default ''
	 */
	media?: string;
	/**
	 * Block category, eg. `Basic blocks`
	 * @default ''
	 */
	category?: string | CategoryProperties;
	/**
	 * If true, triggers the `active` event on the dropped component.
	 * @default false
	 */
	activate?: boolean;
	/**
	 * If true, the dropped component will be selected.
	 * @default false
	 */
	select?: boolean;
	/**
	 * If true, all IDs of dropped components and their styles will be changed.
	 * @default false
	 */
	resetId?: boolean;
	/**
	 * Disable the block from being interacted.
	 * @default false
	 */
	disable?: boolean;
	/**
	 * Custom behavior on click.
	 * @example
	 * onClick: (block, editor) => editor.getWrapper().append(block.get('content'))
	 */
	onClick?: (block: Block, editor: Editor) => void;
	/**
	 * Block attributes
	 */
	attributes?: Record<string, any>;
	id?: string;
	/**
	 * @deprecated
	 */
	activeOnRender?: boolean;
}
/**
 * @property {String} label Block label, eg. `My block`
 * @property {String|Object} content The content of the block. Might be an HTML string or a [Component Definition](/modules/Components.html#component-definition)
 * @property {String} [media=''] HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
 * @property {String} [category=''] Block category, eg. `Basic blocks`
 * @property {Boolean} [activate=false] If true, triggers the `active` event on the dropped component.
 * @property {Boolean} [select=false] If true, the dropped component will be selected.
 * @property {Boolean} [resetId=false] If true, all IDs of dropped components and their styles will be changed.
 * @property {Boolean} [disable=false] Disable the block from being interacted
 * @property {Function} [onClick] Custom behavior on click, eg. `(block, editor) => editor.getWrapper().append(block.get('content'))`
 * @property {Object} [attributes={}] Block attributes to apply in the view element
 *
 * @module docsjs.Block
 */
export declare class Block extends Model<BlockProperties> {
	defaults(): {
		label: string;
		content: string;
		media: string;
		category: string;
		activate: boolean;
		select: undefined;
		resetId: boolean;
		disable: boolean;
		onClick: undefined;
		attributes: {};
		dragDef: {};
	};
	get category(): Category | undefined;
	get parent(): Blocks;
	/**
	 * Get block id
	 * @returns {String}
	 */
	getId(): string;
	/**
	 * Get block label
	 * @returns {String}
	 */
	getLabel(): string;
	/**
	 * Get block media
	 * @returns {String}
	 */
	getMedia(): string | undefined;
	/**
	 * Get block content
	 * @returns {Object|String|Array<Object|String>}
	 */
	getContent(): ContentType | (() => ContentType) | undefined;
	/**
	 * Get block component dragDef
	 * @returns {ComponentDefinition}
	 */
	getDragDef(): ComponentDefinition | undefined;
	/**
	 * Get block category label
	 * @returns {String}
	 */
	getCategoryLabel(): string;
}
declare class ComponentSorter<NodeType extends BaseComponentNode> extends Sorter<Component, NodeType> {
	targetIsText: boolean;
	__currentBlock?: Block;
	constructor({ em, treeClass, containerContext, dragBehavior, positionOptions, eventHandlers, }: {
		em: EditorModel;
		treeClass: new (model: Component, dragSource?: DragSource<Component>) => NodeType;
		containerContext: SorterContainerContext;
		dragBehavior: SorterDragBehaviorOptions;
		positionOptions?: PositionOptions;
		eventHandlers?: SorterEventHandlers<NodeType>;
	});
	private onStartSort;
	protected bindDragEventHandlers(): void;
	protected cleanupEventListeners(): void;
	handleScrollEvent(...agrs: any[]): void;
	private onMouseMove;
	/**
	 * Handles the drop action by moving the source nodes to the target node.
	 * Calls appropriate handlers based on whether the move was successful or not.
	 *
	 * @param targetNode - The node where the source nodes will be dropped.
	 * @param sourceNodes - The nodes being dropped.
	 * @param index - The index at which to drop the source nodes.
	 */
	private onDrop;
	/**
	 * Handles the addition of multiple source nodes to the target node.
	 * If the move is valid, adds the nodes at the specified index and increments the index.
	 *
	 * @param targetNode - The target node where source nodes will be added.
	 * @param sourceNodes - The nodes being added.
	 * @param index - The initial index at which to add the source nodes.
	 * @returns The list of successfully added nodes.
	 */
	private handleNodeAddition;
	/**
	 * Determines if a source node position has changed.
	 *
	 * @param targetNode - The node where the source node will be moved.
	 * @param sourceNode - The node being moved.
	 * @param index - The index at which to move the source node.
	 * @returns Whether the node can be moved.
	 */
	private isPositionChanged;
	/**
	 * Moves a source node to the target node at the specified index, handling edge cases.
	 *
	 * @param targetNode - The node where the source node will be moved.
	 * @param sourceNode - The node being moved.
	 * @param index - The index at which to move the source node.
	 * @returns An object containing the added node and its new index, or null if it couldn't be moved.
	 */
	private moveNode;
	/**
	 * Triggers the end move event for a node that was added to the target.
	 *
	 * @param addedNode - The node that was moved and added to the target.
	 */
	private triggerEndMoveEvent;
	/**
	 * Finalize the move by removing any helpers and selecting the target model.
	 *
	 * @private
	 */
	protected finalizeMove(): void;
	private onTargetChange;
	private updateTextViewCursorPosition;
	/**
	 * Change Autoscroll while sorting
	 * @param {Boolean} active
	 */
	private setAutoCanvasScroll;
}
export type DragStop = (cancel?: boolean) => void;
declare class Droppable {
	em: EditorModel;
	canvas: CanvasModule;
	el: HTMLElement;
	counter: number;
	getSorterOptions?: (sorter: any) => Record<string, any> | null;
	over?: boolean;
	dragStop?: DragStop;
	draggedNode?: CanvasNewComponentNode;
	sorter: ComponentSorter<CanvasNewComponentNode>;
	setAbsoluteDragContent?: (cnt: any) => any;
	constructor(em: EditorModel, rootEl?: HTMLElement);
	toggleEffects(el: HTMLElement, enable: boolean): void;
	__customTglEff(enable: boolean): void;
	startCustom(): void;
	endCustom(cancel?: boolean): void;
	/**
	 * This function is expected to be always executed at the end of d&d.
	 */
	endDrop(cancel?: boolean, ev?: Event): void;
	handleDragLeave(ev: Event): void;
	updateCounter(value: number, ev: Event): void;
	handleDragEnter(ev: DragEvent | Event): void;
	/**
	 * Generates a temporary model of the content being dragged for use with the sorter.
	 * @returns The temporary model representing the dragged content.
	 */
	private getTempDropModel;
	handleDragEnd(model: any, dt: any): void;
	/**
	 * Always need to have this handler active for enabling the drop
	 * @param {Event} ev
	 */
	handleDragOver(ev: Event): void;
	/**
	 * WARNING: This function might fail to run on drop, for example, when the
	 * drop, accidentally, happens on some external element (DOM not inside the iframe)
	 */
	handleDrop(ev: Event | DragEvent): void;
	getContentByData(dt: any): {
		content: any;
	};
}
export interface PageManagerConfig extends ModuleConfig {
	/**
	 * Default pages.
	 */
	pages?: PageProperties[];
	/**
	 * ID of the page to select on editor load.
	 */
	selected?: string;
}
export interface SelectableOption {
	/**
	 * Select the page.
	 */
	select?: boolean;
}
export interface AbortOption {
	abort?: boolean;
}
declare enum PagesEvents {
	/**
	 * @event `page:add` Added new page. The page is passed as an argument to the callback.
	 * @example
	 * editor.on('page:add', (page) => { ... });
	 */
	add = "page:add",
	addBefore = "page:add:before",
	/**
	 * @event `page:remove` Page removed. The page is passed as an argument to the callback.
	 * @example
	 * editor.on('page:remove', (page) => { ... });
	 */
	remove = "page:remove",
	removeBefore = "page:remove:before",
	/**
	 * @event `page:select` New page selected. The newly selected page and the previous one, are passed as arguments to the callback.
	 * @example
	 * editor.on('page:select', (page, previousPage) => { ... });
	 */
	select = "page:select",
	selectBefore = "page:select:before",
	/**
	 * @event `page:update` Page updated. The updated page and the object containing changes are passed as arguments to the callback.
	 * @example
	 * editor.on('page:update', (page, changes) => { ... });
	 */
	update = "page:update",
	/**
	 * @event `page` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
	 * @example
	 * editor.on('page', ({ event, model, ... }) => { ... });
	 */
	all = "page"
}
export declare class Frames extends ModuleCollection<Frame> {
	loadedItems: number;
	itemsToLoad: number;
	page?: Page;
	constructor(module: CanvasModule, models?: Frame[] | Array<Record<string, any>>);
	onAdd(frame: Frame): void;
	onReset(m: Frame, opts?: {
		previousModels?: Frame[];
	}): void;
	onRemove(frame: Frame): void;
	initRefs(): void;
	itemLoaded(): void;
	listenToLoad(): void;
	listenToLoadItems(on: boolean): void;
}
/** @private */
export interface PageProperties {
	/**
	 * Panel id.
	 */
	id?: string;
	/**
	 * Page name.
	 */
	name?: string;
	/**
	 * HTML to load as page content.
	 */
	component?: string | ComponentDefinition | ComponentDefinition[];
	/**
	 * CSS to load with the page.
	 */
	styles?: string | CssRuleJSON[];
	[key: string]: unknown;
}
export interface PagePropertiesDefined extends Pick<PageProperties, "id" | "name"> {
	frames: Frames;
	[key: string]: unknown;
}
export declare class Page extends Model<PagePropertiesDefined> {
	defaults(): {
		name: string;
		frames: Frames;
		_undo: boolean;
	};
	em: EditorModel;
	constructor(props: any, opts?: {
		em?: EditorModel;
		config?: PageManagerConfig;
	});
	onRemove(): void;
	getFrames(): Frames;
	/**
	 * Get page id
	 * @returns {String}
	 */
	getId(): string;
	/**
	 * Get page name
	 * @returns {String}
	 */
	getName(): string;
	/**
	 * Update page name
	 * @param {String} name New page name
	 * @example
	 * page.setName('New name');
	 */
	setName(name: string): this;
	/**
	 * Get all frames
	 * @returns {Array<Frame>}
	 * @example
	 * const arrayOfFrames = page.getAllFrames();
	 */
	getAllFrames(): Frame[];
	/**
	 * Get the first frame of the page (identified always as the main one)
	 * @returns {Frame}
	 * @example
	 * const mainFrame = page.getMainFrame();
	 */
	getMainFrame(): Frame;
	/**
	 * Get the root component (usually is the `wrapper` component) from the main frame
	 * @returns {Component}
	 * @example
	 * const rootComponent = page.getMainComponent();
	 * console.log(rootComponent.toHTML());
	 */
	getMainComponent(): ComponentWrapper;
	toJSON(opts?: {}): any;
}
export declare class Canvas extends ModuleModel<CanvasModule> {
	defaults(): {
		frame: string;
		frames: never[];
		rulers: boolean;
		zoom: number;
		x: number;
		y: number;
		scripts: never[];
		styles: never[];
		pointer: Coordinates;
		pointerScreen: Coordinates;
	};
	constructor(module: CanvasModule);
	get frames(): Frames;
	init(): void;
	_pageUpdated(page: Page, prev?: Page): void;
	updateDevice(opts?: {
		frame?: Frame;
	}): void;
	onZoomChange(m: any, v: any, options: ObjectAny): void;
	onCoordsChange(): void;
	onPointerChange(): void;
	getPointerCoords(type?: CoordinatesTypes): Coordinates;
}
export type DraggerPosition = Position & {
	end?: boolean;
};
export type PositionXY = keyof Omit<DraggerPosition, "end">;
export type Guide = {
	x: number;
	y: number;
	lock?: number;
	active?: boolean;
};
export interface DraggerOptions {
	/**
	 * Element on which the drag will be executed. By default, the document will be used
	 */
	container?: HTMLElement;
	/**
	 * Callback on drag start.
	 * @example
	 * onStart(ev, dragger) {
	 *  console.log('pointer start', dragger.startPointer, 'position start', dragger.startPosition);
	 * }
	 */
	onStart?: (ev: Event, dragger: Dragger) => void;
	/**
	 * Callback on drag.
	 * @example
	 * onDrag(ev, dragger) {
	 *  console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta);
	 * }
	 */
	onDrag?: (ev: Event, dragger: Dragger) => void;
	/**
	 * Callback on drag end.
	 * @example
	 * onEnd(ev, dragger) {
	 *   console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta);
	 * }
	 */
	onEnd?: (ev: Event, dragger: Dragger, opts: {
		cancelled: boolean;
	}) => void;
	/**
	 * Indicate a callback where to pass an object with new coordinates
	 */
	setPosition?: (position: DraggerPosition) => void;
	/**
	 * Indicate a callback where to get initial coordinates.
	 * @example
	 * getPosition: () => {
	 *   // ...
	 *   return { x: 10, y: 100 }
	 * }
	 */
	getPosition?: () => DraggerPosition;
	/**
	 * Indicate a callback where to get pointer coordinates.
	 */
	getPointerPosition?: (ev: Event) => DraggerPosition;
	/**
	 * Static guides to be snapped.
	 */
	guidesStatic?: () => Guide[];
	/**
	 * Target guides that will snap to static one.
	 */
	guidesTarget?: () => Guide[];
	/**
	 * Offset before snap to guides.
	 * @default 5
	 */
	snapOffset?: number;
	/**
	 * Snapping value for the x-y axis. If you pass a value of 0, the snapping will be disabled for that axis.
	 * @example { snapGuides: { x: 10, y: 5 } }
	 */
	snapGuides?: {
		x?: number;
		y?: number;
	};
	/**
	 * Document on which listen to pointer events.
	 */
	doc?: Document;
	/**
	 * Scale result points, can also be a function.
	 * @default 1
	 */
	scale?: number | (() => number);
}
declare class Dragger {
	opts: DraggerOptions;
	startPointer: DraggerPosition;
	delta: DraggerPosition;
	lastScroll: DraggerPosition;
	lastScrollDiff: DraggerPosition;
	startPosition: DraggerPosition;
	globScrollDiff: DraggerPosition;
	currentPointer: DraggerPosition;
	position: DraggerPosition;
	el?: HTMLElement;
	guidesStatic: Guide[];
	guidesTarget: Guide[];
	lockedAxis?: any;
	docs: Document[];
	trgX?: Guide;
	trgY?: Guide;
	/**
	 * Init the dragger
	 * @param  {Object} opts
	 */
	constructor(opts?: DraggerOptions);
	/**
	 * Update options
	 * @param {Object} options
	 */
	setOptions(opts?: Partial<DraggerOptions>): void;
	toggleDrag(enable?: boolean): void;
	handleScroll(): void;
	/**
	 * Start dragging
	 * @param  {Event} e
	 */
	start(ev: Event): void;
	/**
	 * Drag event
	 * @param  {Event} event
	 */
	drag(ev: Event): void;
	/**
	 * Check if the delta hits some guide
	 */
	snapGuides(delta: DraggerPosition): {
		newDelta: {
			x: number;
			y: number;
			end?: boolean;
		};
		trgX: Guide | undefined;
		trgY: Guide | undefined;
	};
	isPointIn(src: number, trg: number, { offset, axis }?: {
		offset?: number;
		axis?: PositionXY;
	}): boolean;
	setGuideLock(guide: Guide, value: any): Guide;
	/**
	 * Stop dragging
	 */
	stop(ev: Event, opts?: {
		cancel?: boolean;
	}): void;
	keyHandle(ev: Event): void;
	/**
	 * Move the element
	 * @param  {integer} x
	 * @param  {integer} y
	 */
	move(x: number, y: number, end?: boolean): void;
	getContainerEl(): Document[] | HTMLElement[];
	getWindowEl(): any[];
	/**
	 * Returns documents
	 */
	getDocumentEl(el?: HTMLElement): Document[];
	/**
	 * Get mouse coordinates
	 * @param  {Event} event
	 * @return {Object}
	 */
	getPointerPos(ev: Event): DraggerPosition;
	getStartPosition(): {
		x: number;
		y: number;
	};
	getScrollInfo(): {
		y: number;
		x: number;
	};
	detectAxisLock(x: number, y: number): "x" | "y" | undefined;
}
export interface ToScreenOption {
	toScreen?: boolean;
}
export interface ToWorldOption {
	toWorld?: boolean;
}
export interface GetBoxRectOptions extends ToScreenOption {
	local?: boolean;
}
export interface CanvasRefreshOptions {
	/**
	 * Refresh canvas spots.
	 */
	spots?: boolean;
	all?: boolean;
}
export interface SetZoomOptions extends SetOptions {
	from?: string;
}
declare enum CanvasEvents {
	/**
	 * @event `canvas:dragenter` Something is dragged inside the canvas, `DataTransfer` instance passed as an argument.
	 */
	dragEnter = "canvas:dragenter",
	/**
	 * @event `canvas:dragover` Something is dragging on the canvas, `DataTransfer` instance passed as an argument.
	 */
	dragOver = "canvas:dragover",
	/**
	 * @event `canvas:dragend` When a drag operation is ended, `DataTransfer` instance passed as an argument.
	 */
	dragEnd = "canvas:dragend",
	/**
	 * @event `canvas:dragdata` On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments. By changing `result.content` you're able to customize what is dropped.
	 */
	dragData = "canvas:dragdata",
	/**
	 * @event `canvas:drop` Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments.
	 */
	drop = "canvas:drop",
	/**
	 * @event `canvas:spot` Spots updated.
	 * @example
	 * editor.on('canvas:spot', () => {
	 *  console.log('Spots', editor.Canvas.getSpots());
	 * });
	 */
	spot = "canvas:spot",
	/**
	 * @event `canvas:spot:add` New canvas spot added.
	 * @example
	 * editor.on('canvas:spot:add', ({ spot }) => {
	 *  console.log('Spot added', spot);
	 * });
	 */
	spotAdd = "canvas:spot:add",
	/**
	 * @event `canvas:spot:update` Canvas spot updated.
	 * @example
	 * editor.on('canvas:spot:update', ({ spot }) => {
	 *  console.log('Spot updated', spot);
	 * });
	 */
	spotUpdate = "canvas:spot:update",
	/**
	 * @event `canvas:spot:remove` Canvas spot removed.
	 * @example
	 * editor.on('canvas:spot:remove', ({ spot }) => {
	 *  console.log('Spot removed', spot);
	 * });
	 */
	spotRemove = "canvas:spot:remove",
	/**
	 * @event `canvas:coords` Canvas coordinates updated.
	 * @example
	 * editor.on('canvas:coords', () => {
	 *  console.log('Canvas coordinates updated:', editor.Canvas.getCoords());
	 * });
	 */
	coords = "canvas:coords",
	/**
	 * @event `canvas:zoom` Canvas zoom updated.
	 * @example
	 * editor.on('canvas:zoom', () => {
	 *  console.log('Canvas zoom updated:', editor.Canvas.getZoom());
	 * });
	 */
	zoom = "canvas:zoom",
	/**
	 * @event `canvas:pointer` Canvas pointer updated.
	 * @example
	 * editor.on('canvas:pointer', () => {
	 *  console.log('Canvas pointer updated:', editor.Canvas.getPointer());
	 * });
	 */
	pointer = "canvas:pointer",
	/**
	 * @event `canvas:refresh` Canvas was refreshed to update elements on top, like spots/tools (eg. via `editor.Canvas.refresh()` or on frame resize).
	 * @example
	 * editor.on('canvas:refresh', (canvasRefreshOptions) => {
	 *  console.log('Canvas refreshed with options:', canvasRefreshOptions);
	 * });
	 */
	refresh = "canvas:refresh",
	/**
	 * @event `canvas:frame:load` Frame loaded in canvas. The event is triggered right after iframe's `onload`.
	 * @example
	 * editor.on('canvas:frame:load', ({ window }) => {
	 *  console.log('Frame loaded', window);
	 * });
	 */
	frameLoad = "canvas:frame:load",
	/**
	 * @event `canvas:frame:load:head` Frame head loaded in canvas. The event is triggered right after iframe's finished to load the head elements (eg. scripts)
	 * @example
	 * editor.on('canvas:frame:load:head', ({ window }) => {
	 *  console.log('Frame head loaded', window);
	 * });
	 */
	frameLoadHead = "canvas:frame:load:head",
	/**
	 * @event `canvas:frame:load:body` Frame body loaded in canvas. The event is triggered when the body is rendered with components.
	 * @example
	 * editor.on('canvas:frame:load:body', ({ window }) => {
	 *  console.log('Frame completed the body render', window);
	 * });
	 */
	frameLoadBody = "canvas:frame:load:body"
}
declare abstract class ModuleDomainViews<TCollection extends ModuleCollection, TItemView extends ModuleView> extends ModuleView<TCollection> {
	itemsView: string;
	protected itemType: string;
	reuseView: boolean;
	viewCollection: TItemView[];
	constructor(opts?: any, autoAdd?: boolean);
	/**
	 * Add new model to the collection
	 * @param {ModuleModel} model
	 * @private
	 * */
	private addTo;
	private itemViewNotFound;
	protected abstract renderView(model: ModuleModel, itemType: string): TItemView;
	/**
	 * Render new model inside the view
	 * @param {ModuleModel} model
	 * @param {Object} fragment Fragment collection
	 * @private
	 * */
	private add;
	render(): this;
	onRender(): void;
	onRemoveBefore(items: TItemView[], opts: any): void;
	onRemove(items: TItemView[], opts: any): void;
	remove(opts?: any): this;
	clearItems(): void;
}
declare class FramesView extends ModuleDomainViews<Frames, FrameWrapView> {
	canvasView: CanvasView;
	private _module;
	constructor(opts: {} | undefined, config: any);
	onRemoveBefore(items: FrameWrapView[], opts?: {}): void;
	onRender(): void;
	clearItems(): void;
	protected renderView(item: any, type: string): FrameWrapView;
}
export interface MarginPaddingOffsets {
	marginTop?: number;
	marginRight?: number;
	marginBottom?: number;
	marginLeft?: number;
	paddingTop?: number;
	paddingRight?: number;
	paddingBottom?: number;
	paddingLeft?: number;
	borderTopWidth?: number;
	borderRightWidth?: number;
	borderBottomWidth?: number;
	borderLeftWidth?: number;
}
export type ElementPosOpts = {
	avoidFrameOffset?: boolean;
	avoidFrameZoom?: boolean;
	noScroll?: boolean;
};
export interface FitViewportOptions {
	frame?: Frame;
	gap?: number | {
		x: number;
		y: number;
	};
	ignoreHeight?: boolean;
	el?: HTMLElement;
	zoom?: number | ((zoom: number) => number);
}
declare class CanvasView extends ModuleView<Canvas> {
	template(): string;
	hlEl?: HTMLElement;
	badgeEl?: HTMLElement;
	placerEl?: HTMLElement;
	ghostEl?: HTMLElement;
	toolbarEl?: HTMLElement;
	resizerEl?: HTMLElement;
	offsetEl?: HTMLElement;
	fixedOffsetEl?: HTMLElement;
	toolsGlobEl?: HTMLElement;
	toolsEl?: HTMLElement;
	framesArea?: HTMLElement;
	toolsWrapper?: HTMLElement;
	spotsEl?: HTMLElement;
	cvStyle?: HTMLElement;
	clsUnscale: string;
	ready: boolean;
	frames: FramesView;
	frame?: FrameView;
	private timerZoom?;
	private frmOff?;
	private cvsOff?;
	constructor(model: Canvas);
	_onFramesUpdate(): void;
	_initFrames(): void;
	checkSelected(component: Component, opts?: {
		scroll?: ScrollIntoViewOptions;
	}): void;
	remove(...args: any): this;
	preventDefault(ev: Event): void;
	toggleListeners(enable: boolean): void;
	screenToWorld(x: number, y: number): Coordinates;
	onPointer(ev: WheelEvent): void;
	onKeyPress(ev: KeyboardEvent): void;
	onWheel(ev: WheelEvent): void;
	updateFrames(ev: Event): void;
	updateFramesArea(): void;
	fitViewport(opts?: FitViewportOptions): void;
	/**
	 * Checks if the element is visible in the canvas's viewport
	 * @param  {HTMLElement}  el
	 * @return {Boolean}
	 */
	isElInViewport(el: HTMLElement): boolean;
	/**
	 * Get the offset of the element
	 * @param  {HTMLElement} el
	 * @return { {top: number, left: number, width: number, height: number} }
	 */
	offset(el?: HTMLElement, opts?: ElementPosOpts): {
		top: number;
		left: number;
		width: number;
		height: number;
	};
	getRectToScreen(boxRect: Partial<BoxRect>): BoxRect;
	getElBoxRect(el: HTMLElement, opts?: GetBoxRectOptions): BoxRect;
	getViewportRect(opts?: ToWorldOption): BoxRect;
	getViewportDelta(opts?: {
		withZoom?: number;
	}): Coordinates;
	/**
	 * Cleare cached offsets
	 * @private
	 */
	clearOff(): void;
	/**
	 * Return frame offset
	 * @return { {top: number, left: number, width: number, height: number} }
	 * @public
	 */
	getFrameOffset(el?: HTMLElement): {
		top: number;
		left: number;
		width: number;
		height: number;
	};
	/**
	 * Return canvas offset
	 * @return { {top: number, left: number, width: number, height: number} }
	 * @public
	 */
	getCanvasOffset(): {
		top: number;
		left: number;
		width: number;
		height: number;
	};
	/**
	 * Returns element's rect info
	 * @param {HTMLElement} el
	 * @param {object} opts
	 * @return { {top: number, left: number, width: number, height: number, zoom: number, rect: any} }
	 * @public
	 */
	getElementPos(el: HTMLElement, opts?: ElementPosOpts): {
		top: number;
		left: number;
		height: number;
		width: number;
		zoom: number;
		rect: {
			top: number;
			left: number;
			width: number;
			height: number;
		};
	};
	/**
	 * Returns element's offsets like margins and paddings
	 * @param {HTMLElement} el
	 * @return { MarginPaddingOffsets }
	 * @public
	 */
	getElementOffsets(el: HTMLElement): MarginPaddingOffsets;
	/**
	 * Returns position data of the canvas element
	 * @return { {top: number, left: number, width: number, height: number} } obj Position object
	 * @public
	 */
	getPosition(opts?: any): ElementRect;
	/**
	 * Returns the scroll position of the canvas.
	 *
	 * If the canvas is scrollable, returns the current `scrollTop` and `scrollLeft` values.
	 * Otherwise, returns an object with `scrollTop` and `scrollLeft` both set to 0.
	 *
	 * @returns An object containing the vertical and horizontal scroll positions.
	 */
	getCanvasScroll(): {
		scrollTop: number;
		scrollLeft: number;
	};
	/**
	 * Update javascript of a specific component passed by its View
	 * @param {ModuleView} view Component's View
	 * @private
	 */
	updateScript(view: ComponentView): void;
	/**
	 * Get javascript container
	 * @private
	 */
	getJsContainer(view?: ComponentView): HTMLElement | undefined;
	getFrameView(view?: ComponentView): FrameView | undefined;
	_renderFrames(): void;
	renderFrames(): void;
	render(): this;
}
declare class FrameWrapView extends ModuleView<Frame> {
	events(): {
		"click [data-action-remove]": string;
		"mousedown [data-action-move]": string;
	};
	elTools?: HTMLElement;
	frame: FrameView;
	dragger?: Dragger;
	cv: CanvasView;
	classAnim: string;
	sizeObserver?: ResizeObserver;
	constructor(model: Frame, canvasView: CanvasView);
	setupDragger(): void;
	startDrag(ev?: Event): void;
	__clear(opts?: any): void;
	remove(opts?: any): this;
	updateOffset(): void;
	updatePos(md?: boolean): void;
	updateSize(): void;
	/**
	 * Update dimensions of the frame
	 * @private
	 */
	updateDim(): void;
	onScroll(): void;
	frameLoaded(): void;
	__handleSize(): {
		noChanges: boolean;
		width: any;
		height: any;
		newW: any;
		newH: any;
	};
	render(): this;
}
declare class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
	/** @ts-ignore */
	get tagName(): string;
	/** @ts-ignore */
	get attributes(): {
		allowfullscreen: string;
	};
	dragging: boolean;
	loaded: boolean;
	droppable?: Droppable;
	rect?: DOMRect;
	lastClientY?: number;
	lastMaxHeight: number;
	private autoScroller;
	private jsContainer?;
	private tools;
	private wrapper?;
	private headView?;
	private frameWrapView?;
	constructor(model: Frame, view?: FrameWrapView);
	getBoxRect(): BoxRect;
	/**
	 * Update `<head>` content of the frame
	 */
	updateHead(): void;
	getEl(): HTMLIFrameElement;
	getCanvasModel(): Canvas;
	getWindow(): Window;
	getDoc(): Document;
	getHead(): HTMLHeadElement;
	getBody(): HTMLBodyElement;
	getWrapper(): HTMLElement;
	getJsContainer(): HTMLElement;
	getToolsEl(): HTMLElement;
	getGlobalToolsEl(): HTMLElement;
	getHighlighter(): HTMLElement;
	getBadgeEl(): HTMLElement;
	getOffsetViewerEl(): HTMLElement;
	getRect(): DOMRect;
	/**
	 * Get rect data, not affected by the canvas zoom
	 */
	getOffsetRect(): {
		top: number;
		left: number;
		height: number;
		width: number;
		scrollTop: number;
		scrollLeft: number;
		scrollBottom: number;
		scrollRight: number;
	};
	_getTool(name: string): HTMLElement;
	remove(...args: any): this;
	startAutoscroll(): void;
	stopAutoscroll(): void;
	showGlobalTools(): void;
	render(): this;
	renderScripts(): void;
	renderStyles(opts?: any): void;
	renderHead(): void;
	renderBody(): void;
	_toggleEffects(enable: boolean): void;
	_emitUpdate(): void;
}
export interface CssComposerConfig {
	/**
	 * Style prefix.
	 * @default 'css-'
	 */
	stylePrefix?: string;
	/**
	 * Default CSS style rules
	 */
	rules?: Array<string>;
}
export declare class CssRules extends Collection<CssRule> {
	editor: EditorModel;
	constructor(props: any, opt: any);
	toJSON(opts?: any): any;
	onAdd(model: CssRule, c: CssRules, o: any): void;
	onRemove(removed: CssRule): void;
	/** @ts-ignore */
	add(models: any, opt?: any): any[];
}
declare class CssRulesView extends View {
	atRules: Record<string, any>;
	config: Record<string, any>;
	em: EditorModel;
	pfx: string;
	renderStarted?: boolean;
	constructor(o: any);
	/**
	 * Add to collection
	 * @param {Object} model
	 * @private
	 * */
	addTo(model: CssRule): void;
	/**
	 * Add new object to collection
	 * @param {Object} model
	 * @param {Object} fragmentEl
	 * @return {Object}
	 * @private
	 * */
	addToCollection(model: CssRule, fragmentEl?: DocumentFragment): HTMLElement | undefined;
	getMediaWidth(mediaText: string): string;
	sortRules(a: number, b: number): number;
	render(): this;
}
/** @private */
export interface RuleOptions {
	/**
	 * At-rule type, eg. `media`
	 */
	atRuleType?: string;
	/**
	 * At-rule parameters, eg. `(min-width: 500px)`
	 */
	atRuleParams?: string;
}
/** @private */
export interface SetRuleOptions extends RuleOptions, UpdateStyleOptions {
	/**
	 * If the rule exists already, merge passed styles instead of replacing them.
	 */
	addStyles?: boolean;
}
/** @private */
export interface GetSetRuleOptions extends UpdateStyleOptions {
	state?: string;
	mediaText?: string;
	addOpts?: ObjectAny;
	current?: boolean;
}
export type CssRuleStyle = Required<CssRuleProperties>["style"];
declare class CssComposer extends ItemManagerModule<CssComposerConfig & {
	pStylePrefix?: string;
}> {
	rules: CssRules;
	rulesView?: CssRulesView;
	Selectors: typeof Selectors;
	storageKey: string;
	/**
	 * Initializes module. Automatically called with a new instance of the editor
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	/**
	 * On load callback
	 * @private
	 */
	onLoad(): void;
	/**
	 * Do stuff after load
	 * @param  {Editor} em
	 * @private
	 */
	postLoad(): void;
	store(): any;
	load(data: any): any;
	/**
	 * Add new rule to the collection, if not yet exists with the same selectors
	 * @param {Array<Selector>} selectors Array of selectors
	 * @param {String} state Css rule state
	 * @param {String} width For which device this style is oriented
	 * @param {Object} props Other props for the rule
	 * @param {Object} opts Options for the add of new rule
	 * @return {Model}
	 * @private
	 * @example
	 * var sm = editor.SelectorManager;
	 * var sel1 = sm.add('myClass1');
	 * var sel2 = sm.add('myClass2');
	 * var rule = cssComposer.add([sel1, sel2], 'hover');
	 * rule.set('style', {
	 *   width: '100px',
	 *   color: '#fff',
	 * });
	 * */
	add(selectors: any, state?: string, width?: string, opts?: {}, addOpts?: {}): CssRule;
	/**
	 * Get the rule
	 * @param {String|Array<Selector>} selectors Array of selectors or selector string, eg `.myClass1.myClass2`
	 * @param {String} state Css rule state, eg. 'hover'
	 * @param {String} width Media rule value, eg. '(max-width: 992px)'
	 * @param {Object} ruleProps Other rule props
	 * @return  {Model|null}
	 * @private
	 * @example
	 * const sm = editor.SelectorManager;
	 * const sel1 = sm.add('myClass1');
	 * const sel2 = sm.add('myClass2');
	 * const rule = cssComposer.get([sel1, sel2], 'hover', '(max-width: 992px)');
	 * // Update the style
	 * rule.set('style', {
	 *   width: '300px',
	 *   color: '#000',
	 * });
	 * */
	get(selectors: any, state?: string, width?: string, ruleProps?: Omit<CssRuleProperties, "selectors">): CssRule | undefined;
	getAll(): CssRules;
	/**
	 * Add a raw collection of rule objects
	 * This method overrides styles, in case, of already defined rule
	 * @param {String|Array<Object>} data CSS string or an array of rule objects, eg. [{selectors: ['class1'], style: {....}}, ..]
	 * @param {Object} opts Options
	 * @param {Object} props Additional properties to add on rules
	 * @return {Array<Model>}
	 * @private
	 */
	addCollection(data: string | CssRuleJSON[], opts?: Record<string, any>, props?: {}): CssRule[];
	/**
	 * Add CssRules via CSS string.
	 * @param {String} css CSS string of rules to add.
	 * @returns {Array<[CssRule]>} Array of rules
	 * @example
	 * const addedRules = css.addRules('.my-cls{ color: red } @media (max-width: 992px) { .my-cls{ color: darkred } }');
	 * // Check rules
	 * console.log(addedRules.map(rule => rule.toCSS()));
	 */
	addRules(css: string): CssRule[];
	/**
	 * Add/update the CssRule.
	 * @param {String} selectors Selector string, eg. `.myclass`
	 * @param {Object} style  Style properties and values. If the rule exists, styles will be replaced unless `addStyles` option is used.
	 * @param {Object} [opts={}]  Additional properties.
	 * @param {String} [opts.atRuleType='']  At-rule type, eg. `media`.
	 * @param {String} [opts.atRuleParams='']  At-rule parameters, eg. `(min-width: 500px)`.
	 * @param {Boolean} [opts.addStyles=false] If the rule exists already, merge passed styles instead of replacing them.
	 * @returns {[CssRule]} The new/updated CssRule.
	 * @example
	 * // Simple class-based rule
	 * const rule = css.setRule('.class1.class2', { color: 'red' });
	 * console.log(rule.toCSS()) // output: .class1.class2 { color: red }
	 * // With state and other mixed selector
	 * const rule = css.setRule('.class1.class2:hover, div#myid', { color: 'red' });
	 * // output: .class1.class2:hover, div#myid { color: red }
	 * // With media
	 * const rule = css.setRule('.class1:hover', { color: 'red' }, {
	 *  atRuleType: 'media',
	 *  atRuleParams: '(min-width: 500px)',
	 * });
	 * // output: `@media (min-width: 500px) { .class1:hover { color: red } }`
	 *
	 * // Update styles of existent rule
	 * css.setRule('.class1', { color: 'red', background: 'red' });
	 * css.setRule('.class1', { color: 'blue' }, { addStyles: true });
	 * // output: .class1 { color: blue; background: red }
	 */
	setRule(selectors: any, style?: CssRuleProperties["style"], opts?: SetRuleOptions): CssRule;
	/**
	 * Get the CssRule.
	 * @param {String} selectors Selector string, eg. `.myclass:hover`
	 * @param {Object} [opts={}]  Additional properties
	 * @param {String} [opts.atRuleType='']  At-rule type, eg. `media`
	 * @param {String} [opts.atRuleParams='']  At-rule parameters, eg. '(min-width: 500px)'
	 * @returns {[CssRule]}
	 * @example
	 * const rule = css.getRule('.myclass1:hover');
	 * const rule2 = css.getRule('.myclass1:hover, div#myid');
	 * const rule3 = css.getRule('.myclass1', {
	 *  atRuleType: 'media',
	 *  atRuleParams: '(min-width: 500px)',
	 * });
	 */
	getRule(selectors: any, opts?: RuleOptions): CssRule | undefined;
	/**
	 * Get all rules or filtered by a matching selector.
	 * @param {String} [selector=''] Selector, eg. `.myclass`
	 * @returns {Array<[CssRule]>}
	 * @example
	 * // Take all the component specific rules
	 * const id = someComponent.getId();
	 * const rules = css.getRules(`#${id}`);
	 * console.log(rules.map(rule => rule.toCSS()))
	 * // All rules in the project
	 * console.log(css.getRules())
	 */
	getRules(selector?: string): CssRule[];
	/**
	 * Add/update the CSS rule with id selector
	 * @param {string} name Id selector name, eg. 'my-id'
	 * @param {Object} style  Style properties and values
	 * @param {Object} [opts={}]  Custom options, like `state` and `mediaText`
	 * @return {CssRule} The new/updated rule
	 * @private
	 * @example
	 * const rule = css.setIdRule('myid', { color: 'red' });
	 * const ruleHover = css.setIdRule('myid', { color: 'blue' }, { state: 'hover' });
	 * // This will add current CSS:
	 * // #myid { color: red }
	 * // #myid:hover { color: blue }
	 */
	setIdRule(name: string, style?: CssRuleStyle, opts?: GetSetRuleOptions): CssRule;
	/**
	 * Get the CSS rule by id selector
	 * @param {string} name Id selector name, eg. 'my-id'
	 * @param  {Object} [opts={}]  Custom options, like `state` and `mediaText`
	 * @return {CssRule}
	 * @private
	 * @example
	 * const rule = css.getIdRule('myid');
	 * const ruleHover = css.setIdRule('myid', { state: 'hover' });
	 */
	getIdRule(name: string, opts?: GetSetRuleOptions): CssRule | undefined;
	/**
	 * Add/update the CSS rule with class selector
	 * @param {string} name Class selector name, eg. 'my-class'
	 * @param {Object} style  Style properties and values
	 * @param {Object} [opts={}]  Custom options, like `state` and `mediaText`
	 * @return {CssRule} The new/updated rule
	 * @private
	 * @example
	 * const rule = css.setClassRule('myclass', { color: 'red' });
	 * const ruleHover = css.setClassRule('myclass', { color: 'blue' }, { state: 'hover' });
	 * // This will add current CSS:
	 * // .myclass { color: red }
	 * // .myclass:hover { color: blue }
	 */
	setClassRule(name: string, style?: CssRuleStyle, opts?: GetSetRuleOptions): CssRule;
	/**
	 * Get the CSS rule by class selector
	 * @param {string} name Class selector name, eg. 'my-class'
	 * @param  {Object} [opts={}]  Custom options, like `state` and `mediaText`
	 * @return {CssRule}
	 * @private
	 * @example
	 * const rule = css.getClassRule('myclass');
	 * const ruleHover = css.getClassRule('myclass', { state: 'hover' });
	 */
	getClassRule(name: string, opts?: GetSetRuleOptions): CssRule | undefined;
	/**
	 * Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like `@media`)
	 * @param {String|[CssRule]|Array<[CssRule]>} rule CssRule or matching selector.
	 * @return {Array<[CssRule]>} Removed rules
	 * @example
	 * // Remove by CssRule
	 * const toRemove = css.getRules('.my-cls');
	 * css.remove(toRemove);
	 * // Remove by selector
	 * css.remove('.my-cls-2');
	 */
	remove(rule: string | CssRule, opts?: any): CssRule[] | (CssRule & any[]);
	/**
	 * Remove all rules
	 * @return {this}
	 */
	clear(opts?: {}): this;
	getComponentRules(cmp: Component, opts?: GetSetRuleOptions): CssRule[];
	/**
	 * Render the block of CSS rules
	 * @return {HTMLElement}
	 * @private
	 */
	render(): HTMLElement;
	checkId(rule: CssRuleJSON | CssRuleJSON[], opts?: {
		idMap?: PrevToNewIdMap;
	}): CssRuleJSON[];
	destroy(): void;
}
declare class ComponentsView extends View {
	opts: any;
	config: DomComponentsConfig & {
		frameView?: FrameView;
	};
	em: EditorModel;
	parentEl?: HTMLElement;
	compView: typeof ComponentView;
	initialize(o: any): void;
	removeChildren(removed: Component, coll: any, opts?: {}): void;
	/**
	 * Add to collection
	 * @param {Model} model
	 * @param {Collection} coll
	 * @param {Object} opts
	 * @private
	 * */
	addTo(model: Component): void;
	/**
	 * Add new object to collection
	 * @param  {Object}  Model
	 * @param  {Object}   Fragment collection
	 * @param  {Integer}  Index of append
	 *
	 * @return   {Object}   Object rendered
	 * @private
	 * */
	addToCollection(model: Component, fragment?: DocumentFragment | null, index?: number): HTMLElement | Text;
	resetChildren(models: Components, opts?: ResetComponentsOptions): void;
	render(parent?: HTMLElement): this;
}
export type ClbObj = ReturnType<ComponentView["_clbObj"]>;
export interface IComponentView extends ExtractMethods<ComponentView> {
}
export declare class ComponentView<TComp extends Component = Component> extends View</**
 * Keep this format to avoid errors in TS bundler */ 
/** @ts-ignore */
TComp> {
	/** @ts-ignore */
	model: TComp;
	/** @ts-ignore */
	className(): any;
	/** @ts-ignore */
	tagName(): string;
	modelOpt: ComponentOptions;
	em: EditorModel;
	opts?: any;
	pfx?: string;
	ppfx?: string;
	attr?: Record<string, any>;
	classe?: string;
	config: DomComponentsConfig;
	childrenView?: ComponentsView;
	getChildrenSelector?: Function;
	getTemplate?: Function;
	scriptContainer?: HTMLElement;
	preinitialize(opt?: any): void;
	initialize(opt?: any): void;
	get __cmpStyleOpts(): GetSetRuleOptions;
	get frameView(): FrameView;
	get createDoc(): Document;
	__isDraggable(): string | boolean | DraggableDroppableFn | undefined;
	_clbObj(): {
		editor: Editor;
		model: TComp;
		el: HTMLElement;
	};
	/**
	 * Initialize callback
	 */
	init(opts: ClbObj): void;
	/**
	 * Remove callback
	 */
	removed(opts: ClbObj): void;
	/**
	 * On render callback
	 */
	onRender(opts: ClbObj): void;
	/**
	 * Callback executed when the `active` event is triggered on component
	 */
	onActive(ev: Event): void;
	/**
	 * Callback executed when the `disable` event is triggered on component
	 */
	onDisable(opts?: DisableOptions): void;
	remove(): this;
	handleDragStart(event: Event): false | undefined;
	initClasses(): void;
	initComponents(opts?: {
		avoidRender?: boolean;
	}): void;
	/**
	 * Handle any property change
	 * @private
	 */
	handleChange(): void;
	/**
	 * Import, if possible, classes inside main container
	 * @private
	 * */
	importClasses(): void;
	/**
	 * Update item on status change
	 * @param  {Event} e
	 * @private
	 * */
	updateStatus(opts?: {
		noExtHl?: boolean;
		avoidHover?: boolean;
	}): void;
	/**
	 * Update highlight attribute
	 * @private
	 * */
	updateHighlight(): void;
	/**
	 * Update style attribute
	 * @private
	 * */
	updateStyle(m?: any, v?: any, opts?: ObjectAny): void;
	updateStyles(): void;
	/**
	 * Update classe attribute
	 * @private
	 * */
	updateClasses(): void;
	/**
	 * Update single attribute
	 * @param {[type]} name  [description]
	 * @param {[type]} value [description]
	 */
	setAttribute(name: string, value: any): void;
	/**
	 * Get classes from attributes.
	 * This method is called before initialize
	 *
	 * @return  {Array}|null
	 * @private
	 * */
	getClasses(): any;
	/**
	 * Update attributes
	 * @private
	 * */
	updateAttributes(): void;
	/**
	 * Update component content
	 * @private
	 * */
	updateContent(): void;
	/**
	 * Prevent default helper
	 * @param  {Event} e
	 * @private
	 */
	prevDef(e: Event): void;
	/**
	 * Render component's script
	 * @private
	 */
	updateScript(): void;
	/**
	 * Return children container
	 * Differently from a simple component where children container is the
	 * component itself
	 * <my-comp>
	 *  <!--
	 *    <child></child> ...
	 *   -->
	 * </my-comp>
	 * You could have the children container more deeper
	 * <my-comp>
	 *  <div></div>
	 *  <div></div>
	 *  <div>
	 *    <div>
	 *      <!--
	 *        <child></child> ...
	 *      -->
	 *    </div>
	 *  </div>
	 * </my-comp>
	 * @return HTMLElement
	 * @private
	 */
	getChildrenContainer(): HTMLElement;
	/**
	 * This returns rect informations not affected by the canvas zoom.
	 * The method `getBoundingClientRect` doesn't work here and we
	 * have to take in account offsetParent
	 */
	getOffsetRect(): {
		top: number;
		left: number;
		bottom: number;
		right: number;
	};
	isInViewport(): boolean;
	scrollIntoView(opts?: {
		force?: boolean;
	} & ScrollIntoViewOptions): void;
	/**
	 * Recreate the element of the view
	 */
	reset(): void;
	_setData(): void;
	_createElement(tagName: string): Node;
	/**
	 * Render children components
	 * @private
	 */
	renderChildren(): void;
	renderAttributes(): void;
	onAttrUpdate(): void;
	render(): this;
	postRender(): void;
	static getEvents(): any;
}
declare enum CanvasSpotBuiltInTypes {
	Select = "select",
	Hover = "hover",
	Spacing = "spacing",
	Target = "target",
	Resize = "resize"
}
export type CanvasSpotBuiltInType = `${CanvasSpotBuiltInTypes}`;
export type CanvasSpotType = LiteralUnion<CanvasSpotBuiltInType, string>;
/** @private */
export interface CanvasSpotBase<T extends CanvasSpotType> {
	/**
	 * Spot type, eg. `select`.
	 */
	type: T;
	/**
	 * Spot ID.
	 */
	id: string;
	/**
	 * Fixed box rect of the spot, eg. `{ width: 100, height: 100, x: 0, y: 0 }`.
	 */
	boxRect?: BoxRect;
	/**
	 * Component to which the spot will be attached.
	 */
	component?: Component;
	/**
	 * ComponentView to which the spot will be attached.
	 */
	componentView?: ComponentView;
	frame?: Frame;
}
export interface CanvasSpotProps<T extends CanvasSpotType = CanvasSpotType> extends CanvasSpotBase<T> {
}
/**
 * Canvas spots are elements drawn on top of the canvas. They can be used to represent anything you
 * might need but the most common use case of canvas spots is rendering information and managing
 * components rendered in the canvas.
 * Read here for more information about [Canvas Spots](https://grapesjs.com/docs/modules/Canvas.html#canvas-spots)
 *
 * [Component]: component.html
 *
 * @property {String} id Spot ID.
 * @property {String} type Spot type.
 * @property {[Component]} [component] Component to which the spot will be attached.
 * @property {ComponentView} [componentView] ComponentView to which the spot will be attached.
 * @property {Object} [boxRect] Fixed box rect of the spot, eg. `{ width: 100, height: 100, x: 0, y: 0 }`.
 *
 */
export declare class CanvasSpot<T extends CanvasSpotProps = CanvasSpotProps> extends ModuleModel<CanvasModule, T> {
	defaults(): T;
	get type(): "" | T["type"];
	get component(): Component | undefined;
	get componentView(): ComponentView<Component> | undefined;
	get el(): HTMLElement | undefined;
	/**
	 * Get the box rect of the spot.
	 * @param {Object} [opts={}]
	 * @returns {Object} The box rect object
	 * @example
	 * canvasSpot.getBoxRect();
	 * // { width: 100, height: 50, x: 0, y: 0 }
	 */
	getBoxRect(opts?: GetBoxRectOptions): BoxRect;
	/**
	 * Get the style object of the spot.
	 * @param {Object} [opts={}]
	 * @returns {CSSStyleDeclaration} [opts]
	 * @example
	 * canvasSpot.getStyle();
	 * // { width: '100px', height: '...', ... }
	 */
	getStyle(opts?: {
		boxRect?: BoxRect;
	} & GetBoxRectOptions): Partial<CSSStyleDeclaration>;
	/**
	 * Check the spot type.
	 * @param {String} type
	 * @returns {Boolean}
	 * @example
	 * canvasSpot.isType('select');
	 */
	isType<E extends T>(type: E["type"]): this is CanvasSpot<E>;
}
export interface CanvasConfig {
	stylePrefix?: string;
	/**
	 * Append external scripts to the `<head>` of the iframe.
	 * Be aware that these scripts will not be printed in the export code.
	 * @default []
	 * @example
	 * scripts: [ 'https://...1.js', 'https://...2.js' ]
	 * // or passing objects as attributes
	 * scripts: [ { src: '/file.js', someattr: 'value' }, ... ]
	 */
	scripts?: (string | Record<string, any>)[];
	/**
	 * Append external styles to the `<head>` of the iframe.
	 * Be aware that these scripts will not be printed in the export code.
	 * @default []
	 * @example
	 * styles: [ 'https://...1.css', 'https://...2.css' ]
	 * // or passing objects as attributes
	 * styles: [ { href: '/style.css', someattr: 'value' }, ... ]
	 */
	styles?: (string | Record<string, any>)[];
	/**
	 * Add custom badge naming strategy.
	 * @example
	 * customBadgeLabel: component => component.getName(),
	 */
	customBadgeLabel?: (component: Component) => string;
	/**
	 * Indicate when to start the autoscroll of the canvas on component/block dragging (value in px).
	 * @default 50
	 */
	autoscrollLimit?: number;
	/**
	 * Experimental: external highlighter box
	 */
	extHl?: boolean;
	/**
	 * Initial content to load in all frames.
	 * The default value enables the standard mode for the iframe.
	 * @default '<!DOCTYPE html>'
	 */
	frameContent?: string;
	/**
	 * Initial style to load in all frames.
	 */
	frameStyle?: string;
	/**
	 * When some textable component is selected and focused (eg. input or text component), the editor
	 * stops some commands (eg. disables the copy/paste of components with CTRL+C/V to allow the copy/paste of the text).
	 * This option allows to customize, by a selector, which element should not be considered textable.
	 */
	notTextable?: string[];
	/**
	 * By default, the editor allows to drop external elements by relying on the native HTML5
	 * drag & drop API (eg. like a D&D of an image file from your desktop).
	 * If you want to customize how external elements are interpreted by the editor, you can rely
	 * on `canvas:dragdata` event, eg. https://github.com/GrapesJS/grapesjs/discussions/3849
	 * @default true
	 */
	allowExternalDrop?: boolean;
	/**
	 * Disable the rendering of built-in canvas spots.
	 *
	 * Read here for more information about [Canvas Spots](https://grapesjs.com/docs/modules/Canvas.html#canvas-spots).
	 * @example
	 * // Disable only the hover type spot
	 * customSpots: { hover: true },
	 *
	 * // Disable all built-in spots
	 * customSpots: true,
	 */
	customSpots?: boolean | Partial<Record<CanvasSpotBuiltInTypes, boolean>>;
	/**
	 * Experimental: enable infinite canvas.
	 */
	infiniteCanvas?: boolean;
	/**
	 * Enables the scrollable canvas feature.
	 *
	 * When this feature flag is set to `true`, the canvas element
	 * will have its `overflow` style set to `auto`, allowing users to scroll
	 * the canvas content if it exceeds the visible area.  This is useful for
	 * handling large diagrams or zoomed-in views where parts of the content
	 * are initially hidden.  If `false`, the canvas will use default overflow (typically hidden).
	 *
	 * @default false
	 */
	scrollableCanvas?: boolean;
}
export declare class CanvasSpots extends ModuleCollection<CanvasSpot> {
	refreshDbn: Debounced;
	constructor(module: CanvasModule, models?: CanvasSpot[] | CanvasSpotProps[]);
	get em(): EditorModel;
	get events(): typeof CanvasEvents;
	refresh(): void;
	onAdd(spot: CanvasSpot): void;
	onChange(spot: CanvasSpot): void;
	onRemove(spot: CanvasSpot): void;
	__trgEvent(event: string, props: ObjectAny): void;
}
declare class AutoScroller {
	private eventEl?;
	private scrollEl?;
	private dragging;
	private lastClientY?;
	private lastMaxHeight;
	private onScroll?;
	private autoscrollLimit;
	private zoom;
	/**
	 * When an element is inside an iframe, its `getBoundingClientRect()` values
	 * are relative to the iframe's document, not the main window's.
	 */
	private rectIsInScrollIframe;
	constructor(autoscrollLimit?: number, opts?: {
		lastMaxHeight?: number;
		onScroll?: () => void;
		rectIsInScrollIframe?: boolean;
	});
	start(eventEl: HTMLElement, scrollEl: HTMLElement | Window, opts?: {
		lastMaxHeight?: number;
		zoom?: number;
	}): void;
	private autoscroll;
	private getEventElHeight;
	private updateClientY;
	private getElScrollTop;
	private toggleAutoscrollFx;
	stop(): void;
}
export type CanvasEvent = `${CanvasEvents}`;
declare class CanvasModule extends Module<CanvasConfig> {
	autoScroller: AutoScroller;
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	/**
	 * Used inside RTE
	 * @private
	 */
	getCanvasView(): CanvasView;
	canvas: Canvas;
	model: Canvas;
	spots: CanvasSpots;
	events: typeof CanvasEvents;
	framesById: Record<string, Frame | undefined>;
	private canvasView?;
	/**
	 * Initialize module. Automatically called with a new instance of the editor
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	postLoad(): void;
	getModel(): Canvas;
	/**
	 * Get the canvas element
	 * @returns {HTMLElement}
	 */
	getElement(): HTMLElement;
	getFrame(index?: number): Frame;
	/**
	 * Get the main frame element of the canvas
	 * @returns {HTMLIFrameElement}
	 */
	getFrameEl(): HTMLIFrameElement;
	getFramesEl(): HTMLElement;
	/**
	 * Get the main frame window instance
	 * @returns {Window}
	 */
	getWindow(): Window;
	/**
	 * Get the main frame document element
	 * @returns {HTMLDocument}
	 */
	getDocument(): Document;
	/**
	 * Get the main frame body element
	 * @return {HTMLBodyElement}
	 */
	getBody(): HTMLBodyElement;
	_getLocalEl(globalEl: any, compView: ComponentView, method: keyof FrameView): any;
	/**
	 * Returns element containing all global canvas tools
	 * @returns {HTMLElement}
	 * @private
	 */
	getGlobalToolsEl(): HTMLElement | undefined;
	/**
	 * Returns element containing all canvas tools
	 * @returns {HTMLElement}
	 * @private
	 */
	getToolsEl(compView?: any): any;
	/**
	 * Returns highlighter element
	 * @returns {HTMLElement}
	 * @private
	 */
	getHighlighter(compView?: any): any;
	/**
	 * Returns badge element
	 * @returns {HTMLElement}
	 * @private
	 */
	getBadgeEl(compView: any): any;
	/**
	 * Returns placer element
	 * @returns {HTMLElement}
	 * @private
	 */
	getPlacerEl(): HTMLElement | undefined;
	/**
	 * Returns ghost element
	 * @returns {HTMLElement}
	 * @private
	 */
	getGhostEl(): HTMLElement | undefined;
	/**
	 * Returns toolbar element
	 * @returns {HTMLElement}
	 * @private
	 */
	getToolbarEl(): HTMLElement | undefined;
	/**
	 * Returns resizer element
	 * @returns {HTMLElement}
	 * @private
	 */
	getResizerEl(): HTMLElement | undefined;
	/**
	 * Returns offset viewer element
	 * @returns {HTMLElement}
	 * @private
	 */
	getOffsetViewerEl(compView: any): any;
	/**
	 * Returns fixed offset viewer element
	 * @returns {HTMLElement}
	 * @private
	 */
	getFixedOffsetViewerEl(): HTMLElement | undefined;
	getSpotsEl(): HTMLElement | undefined;
	render(): HTMLElement;
	/**
	 * Get frame position
	 * @returns {Object}
	 * @private
	 */
	getOffset(): {
		top: number;
		left: number;
	};
	/**
	 * Get the offset of the passed component element
	 * @param  {HTMLElement} el
	 * @returns {Object}
	 * @private
	 */
	offset(el: HTMLElement): {
		top: number;
		left: number;
		width: number;
		height: number;
	};
	/**
	 * Set custom badge naming strategy
	 * @param  {Function} f
	 * @example
	 * canvas.setCustomBadgeLabel(function(component){
	 *  return component.getName();
	 * });
	 */
	setCustomBadgeLabel(f: Function): void;
	/**
	 * Get element position relative to the canvas
	 * @param {HTMLElement} el
	 * @returns {Object}
	 * @private
	 */
	getElementPos(el: HTMLElement, opts?: any): {
		top: number;
		left: number;
		height: number;
		width: number;
		zoom: number;
		rect: {
			top: number;
			left: number;
			width: number;
			height: number;
		};
	};
	/**
	 * Returns element's offsets like margins and paddings
	 * @param {HTMLElement} el
	 * @returns {Object}
	 * @private
	 */
	getElementOffsets(el: HTMLElement): MarginPaddingOffsets;
	/**
	 * Get canvas rectangular data
	 * @returns {Object}
	 */
	getRect(): {
		topScroll: number;
		leftScroll: number;
		top: number;
		left: number;
		width: number;
		height: number;
	};
	/**
	 * This method comes handy when you need to attach something like toolbars
	 * to elements inside the canvas, dealing with all relative position,
	 * offsets, etc. and returning as result the object with positions which are
	 * viewable by the user (when the canvas is scrolled the top edge of the element
	 * is not viewable by the user anymore so the new top edge is the one of the canvas)
	 *
	 * The target should be visible before being passed here as invisible elements
	 * return empty string as width
	 * @param {HTMLElement} target The target in this case could be the toolbar
	 * @param {HTMLElement} element The element on which I'd attach the toolbar
	 * @param {Object} options Custom options
	 * @param {Boolean} options.toRight Set to true if you want the toolbar attached to the right
	 * @return {Object}
	 * @private
	 */
	getTargetToElementDim(target: HTMLElement, element: HTMLElement, options?: any): {
		top: number;
		left: any;
		elementTop: any;
		elementLeft: any;
		elementWidth: any;
		elementHeight: any;
		targetWidth: number;
		targetHeight: number;
		canvasTop: number;
		canvasLeft: number;
		canvasWidth: number;
		canvasHeight: number;
	} | undefined;
	canvasRectOffset(el: HTMLElement, pos: {
		top: number;
		left: number;
	}, opts?: any): {
		top: number;
		left: number;
	};
	/**
	 *
	 * @param {HTMLElement} el The component element in the canvas
	 * @param {HTMLElement} targetEl The target element to position (eg. toolbar)
	 * @param {Object} opts
	 * @private
	 */
	getTargetToElementFixed(el: HTMLElement, targetEl: HTMLElement, opts?: any): {
		top: number;
		left: any;
		canvasOffsetTop: any;
		canvasOffsetLeft: any;
		elRect: any;
		canvasOffset: any;
		canvasRect: ElementRect;
		targetWidth: number;
		targetHeight: number;
	};
	/**
	 * Instead of simply returning e.clientX and e.clientY this function
	 * calculates also the offset based on the canvas. This is helpful when you
	 * need to get X and Y position while moving between the editor area and
	 * canvas area, which is in the iframe
	 * @param {Event} e
	 * @return {Object}
	 * @private
	 */
	getMouseRelativePos(e: any, opts?: any): {
		y: number;
		x: number;
	};
	/**
	 * X and Y mouse position relative to the canvas
	 * @param {Event} ev
	 * @return {Object}
	 * @private
	 */
	getMouseRelativeCanvas(ev: MouseEvent | {
		clientX: number;
		clientY: number;
	}, opts?: Record<string, unknown>): {
		y: number;
		x: number;
	};
	/**
	 * Start custom drag-and-drop process.
	 *
	 * @param {DragSource<Component>} dragSource - The source object for the drag operation, containing the component being dragged.
	 * @example
	 * // as component definition
	 * canvas.startDrag({
	 *  content: { type: 'my-component' }
	 * });
	 * // as HTML
	 * canvas.startDrag({
	 *  content: '<div>...</div>'
	 * });
	 */
	startDrag(dragSource: DragSource<Component>): void;
	/**
	 * Ends the drag-and-drop process, resetting the drag source and clearing any drag results.
	 * This method can be used to finalize custom drag-and-drop content operations.
	 * @example
	 * canvas.startDrag({...});
	 * // ... drag finished ...
	 * canvas.endDrag();
	 */
	endDrag(): void;
	/**
	 * Check if the canvas is focused
	 * @returns {Boolean}
	 */
	hasFocus(): boolean;
	/**
	 * Detects if some input is focused (input elements, text components, etc.)
	 * @return {Boolean}
	 * @private
	 */
	isInputFocused(): boolean | null;
	/**
	 * Scroll canvas to the element if it's not visible. The scrolling is
	 * executed via `scrollIntoView` API and options of this method are
	 * passed to it. For instance, you can scroll smoothly by using
	 * `{ behavior: 'smooth' }`.
	 * @param  {HTMLElement|[Component]} el
	 * @param  {Object} [opts={}] Options, same as options for `scrollIntoView`
	 * @param  {Boolean} [opts.force=false] Force the scroll, even if the element is already visible
	 * @example
	 * const selected = editor.getSelected();
	 * // Scroll smoothly (this behavior can be polyfilled)
	 * canvas.scrollTo(selected, { behavior: 'smooth' });
	 * // Force the scroll, even if the element is already visible
	 * canvas.scrollTo(selected, { force: true });
	 */
	scrollTo(el: any, opts?: {}): void;
	/**
	 * Start autoscroll
	 * @private
	 */
	startAutoscroll(frame?: Frame): void;
	/**
	 * Stop autoscroll
	 * @private
	 */
	stopAutoscroll(frame?: Frame): void;
	/**
	 * Set canvas zoom value
	 * @param {Number} value The zoom value, from 0 to 100
	 * @returns {this}
	 * @example
	 * canvas.setZoom(50); // set zoom to 50%
	 */
	setZoom(value: number | string, opts?: SetZoomOptions): this;
	/**
	 * Get canvas zoom value
	 * @returns {Number}
	 * @example
	 * canvas.setZoom(50); // set zoom to 50%
	 * const zoom = canvas.getZoom(); // 50
	 */
	getZoom(): number;
	/**
	 * Set canvas position coordinates
	 * @param {Number} x Horizontal position
	 * @param {Number} y Vertical position
	 * @returns {this}
	 * @example
	 * canvas.setCoords(100, 100);
	 */
	setCoords(x?: string | number, y?: string | number, opts?: ToWorldOption): this;
	/**
	 * Get canvas position coordinates
	 * @returns {Object} Object containing coordinates
	 * @example
	 * canvas.setCoords(100, 100);
	 * const coords = canvas.getCoords();
	 * // { x: 100, y: 100 }
	 */
	getCoords(): Coordinates;
	/**
	 * Get canvas pointer position coordinates.
	 * @returns {Object} Object containing pointer coordinates
	 * @private
	 * @example
	 * const worldPointer = canvas.getPointer();
	 * const screenPointer = canvas.getPointer(true);
	 */
	getPointer(screen?: boolean): Coordinates;
	getZoomDecimal(): number;
	getZoomMultiplier(): number;
	fitViewport(opts?: FitViewportOptions): void;
	toggleFramesEvents(on: boolean): void;
	getFrames(): Frame[];
	/**
	 * Add new frame to the canvas
	 * @param {Object} props Frame properties
	 * @returns {[Frame]}
	 * @private
	 * @example
	 * canvas.addFrame({
	 *   name: 'Mobile home page',
	 *   x: 100, // Position in canvas
	 *   y: 100,
	 *   width: 500, // Frame dimensions
	 *   height: 600,
	 *   // device: 'DEVICE-ID',
	 *   components: [
	 *     '<h1 class="testh">Title frame</h1>',
	 *     '<p class="testp">Paragraph frame</p>',
	 *   ],
	 *   styles: `
	 *     .testh { color: red; }
	 *     .testp { color: blue; }
	 *   `,
	 * });
	 */
	addFrame(props?: {}, opts?: {}): Frame;
	/**
	 * Get the last created Component from a drag & drop to the canvas.
	 * @returns {[Component]|undefined}
	 */
	getLastDragResult(): Component | undefined;
	/**
	 * Add or update canvas spot.
	 * @param {Object} props Canvas spot properties.
	 * @param opts
	 * @returns {[CanvasSpot]}
	 * @example
	 * // Add new canvas spot
	 * const spot = canvas.addSpot({
	 *  type: 'select', // 'select' is one of the built-in spots
	 *  component: editor.getSelected(),
	 * });
	 *
	 * // Add custom canvas spot
	 * const spot = canvas.addSpot({
	 *  type: 'my-custom-spot',
	 *  component: editor.getSelected(),
	 * });
	 * // Update the same spot by reusing its ID
	 * canvas.addSpot({
	 *  id: spot.id,
	 *  component: anotherComponent,
	 * });
	 */
	addSpot<T extends CanvasSpotProps>(props: Omit<T, "id"> & {
		id?: string;
	}, opts?: AddOptions): CanvasSpot<T>;
	/**
	 * Get canvas spots.
	 * @param {Object} [spotProps] Canvas spot properties for filtering the result. With no properties, all available spots will be returned.
	 * @returns {[CanvasSpot][]}
	 * @example
	 * canvas.addSpot({ type: 'select', component: cmp1 });
	 * canvas.addSpot({ type: 'select', component: cmp2 });
	 * canvas.addSpot({ type: 'target', component: cmp3 });
	 *
	 * // Get all spots
	 * const allSpots = canvas.getSpots();
	 * allSpots.length; // 3
	 *
	 * // Get all 'select' spots
	 * const allSelectSpots = canvas.getSpots({ type: 'select' });
	 * allSelectSpots.length; // 2
	 */
	getSpots<T extends CanvasSpotProps>(spotProps?: Partial<T>): CanvasSpot<T>[];
	/**
	 * Remove canvas spots.
	 * @param {Object|[CanvasSpot][]} [spotProps] Canvas spot properties for filtering spots to remove or an array of spots to remove. With no properties, all available spots will be removed.
	 * @returns {[CanvasSpot][]}
	 * @example
	 * canvas.addSpot({ type: 'select', component: cmp1 });
	 * canvas.addSpot({ type: 'select', component: cmp2 });
	 * canvas.addSpot({ type: 'target', component: cmp3 });
	 *
	 * // Remove all 'select' spots
	 * canvas.removeSpots({ type: 'select' });
	 *
	 * // Remove spots by an array of canvas spots
	 * const filteredSpots = canvas.getSpots().filter(spot => myCustomCondition);
	 * canvas.removeSpots(filteredSpots);
	 *
	 * // Remove all spots
	 * canvas.removeSpots();
	 */
	removeSpots<T extends CanvasSpotProps>(spotProps?: Partial<T> | CanvasSpot[]): CanvasSpot<T>[];
	/**
	 * Check if the built-in canvas spot has a declared custom rendering.
	 * @param {String} type Built-in canvas spot type
	 * @returns {Boolean}
	 * @example
	 * grapesjs.init({
	 *  // ...
	 *  canvas: {
	 *    // avoid rendering the built-in 'target' canvas spot
	 *    customSpots: { target: true }
	 *  }
	 * });
	 * // ...
	 * canvas.hasCustomSpot('select'); // false
	 * canvas.hasCustomSpot('target'); // true
	 */
	hasCustomSpot(type?: CanvasSpotBuiltInTypes): boolean;
	/**
	 * Transform a box rect from the world coordinate system to the screen one.
	 * @param {Object} boxRect
	 * @returns {Object}
	 */
	getWorldRectToScreen(boxRect: Parameters<CanvasView["getRectToScreen"]>[0]): BoxRect | undefined;
	/**
	 * Update canvas for spots/tools positioning.
	 * @param {Object} [opts] Options.
	 * @param {Object} [opts.spots=false] Update the position of spots.
	 */
	refresh(opts?: CanvasRefreshOptions): void;
	refreshSpots(): void;
	destroy(): void;
}
/**
 * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.
 * @property {String} [width=''] Width of the frame. By default, the canvas width will be taken.
 * @property {String} [height=''] Height of the frame. By default, the canvas height will be taken.
 * @property {Number} [x=0] Horizontal position of the frame in the canvas.
 * @property {Number} [y=0] Vertical position of the frame in the canvas.
 *
 */
export declare class Frame extends ModuleModel<CanvasModule> {
	defaults(): {
		x: number;
		y: number;
		changesCount: number;
		attributes: {};
		width: null;
		height: null;
		head: never[];
		component: string;
		styles: string;
		refFrame: null;
		_undo: boolean;
		_undoexc: string[];
	};
	view?: FrameView;
	/**
	 * @hideconstructor
	 */
	constructor(module: CanvasModule, attr: any);
	get width(): number;
	get height(): number;
	get head(): {
		tag: string;
		attributes: any;
	}[];
	get refFrame(): Frame | undefined;
	get root(): ComponentWrapper;
	initRefs(): void;
	getBoxRect(): BoxRect;
	onRemove(): void;
	changesUp(opt?: any): void;
	getComponent(): ComponentWrapper;
	getStyles(): any;
	disable(): void;
	remove(): this;
	getHead(): {
		tag: string;
		attributes: any;
	}[];
	setHead(value: {
		tag: string;
		attributes: any;
	}[]): this;
	addHeadItem(item: {
		tag: string;
		attributes: any;
	}): void;
	getHeadByAttr(attr: string, value: any, tag: string): {
		tag: string;
		attributes: any;
	};
	removeHeadByAttr(attr: string, value: any, tag: string): void;
	addLink(href: string): void;
	removeLink(href: string): void;
	addScript(src: string): void;
	removeScript(src: string): void;
	getPage(): Page | undefined;
	_emitUpdated(data?: {}): void;
	hasAutoHeight(): boolean;
	toJSON(opts?: any): any;
}
export interface TraitManagerConfig {
	/**
	 * Style prefix.
	 * @default 'trt-'
	 */
	stylePrefix?: string;
	/**
	 * Specify the element to use as a container, string (query) or HTMLElement.
	 * With the empty value, nothing will be rendered.
	 * @default ''
	 */
	appendTo?: string | HTMLElement;
	/**
	 * Avoid rendering the default Trait Manager UI.
	 * More about it here: [Custom Trait Manager](https://grapesjs.com/docs/modules/Traits.html#custom-trait-manager).
	 * @default false
	 */
	custom?: boolean;
	optionsTarget?: Record<string, any>[];
}
declare class TraitView extends View<Trait> {
	pfx: string;
	ppfx: string;
	config: any;
	clsField: string;
	elInput: HTMLInputElement;
	input?: HTMLInputElement;
	$input?: JQuery<HTMLInputElement>;
	eventCapture: string[];
	noLabel?: boolean;
	em: EditorModel;
	target: Component;
	createLabel?: (data: {
		label: string;
		component: Component;
		trait: TraitView;
	}) => string | HTMLElement;
	createInput?: (data: ReturnType<TraitView["getClbOpts"]>) => string | HTMLElement;
	events: any;
	appendInput: boolean;
	/** @ts-ignore */
	attributes(): Record<string, any>;
	templateLabel(cmp?: Component): string;
	templateInput(data: ReturnType<TraitView["getClbOpts"]>): string;
	constructor(o?: any);
	getClbOpts(): {
		component: Component;
		trait: Trait;
		elInput: HTMLInputElement;
	};
	removeView(): void;
	init(): void;
	removed(): void;
	onRender(props: ReturnType<TraitView["getClbOpts"]>): void;
	onUpdate(props: ReturnType<TraitView["getClbOpts"]>): void;
	onEvent(props: ReturnType<TraitView["getClbOpts"]> & {
		event: Event;
	}): void;
	/**
	 * Fires when the input is changed
	 * @private
	 */
	onChange(event: Event): void;
	getValueForTarget(): any;
	setInputValue(value: string): void;
	/**
	 * On change callback
	 * @private
	 */
	onValueChange(_m: Trait, _v: string, opts?: SetOptions & {
		fromTarget?: boolean;
	}): void;
	/**
	 * Render label
	 * @private
	 */
	renderLabel(): void;
	/**
	 * Returns label for the input
	 * @return {string}
	 * @private
	 */
	getLabel(): any;
	/**
	 * Returns current target component
	 */
	getComponent(): Component;
	/**
	 * Returns input element
	 * @return {HTMLElement}
	 * @private
	 */
	getInputEl(): HTMLInputElement | undefined;
	getInputElem(): HTMLInputElement;
	getModelValue(): any;
	getElInput(): HTMLInputElement;
	/**
	 * Renders input
	 * @private
	 * */
	renderField(): void;
	hasLabel(): boolean;
	rerender(): void;
	postUpdate(): void;
	render(): this;
}
declare class DomainViews extends View {
	config?: any;
	items: any[];
	ns?: string;
	itemView?: any;
	itemsView: any;
	itemType: string;
	reuseView: boolean;
	constructor(opts?: any, config?: any, autoAdd?: boolean);
	/**
	 * Add new model to the collection
	 * @param {Model} model
	 * @private
	 * */
	addTo(model: any): void;
	itemViewNotFound(type: string): void;
	/**
	 * Render new model inside the view
	 * @param {Model} model
	 * @param {Object} fragment Fragment collection
	 * @private
	 * */
	add(model: any, fragment?: DocumentFragment): void;
	render(): this;
	onRender(): void;
	onRemoveBefore(items?: any, opts?: any): void;
	onRemove(items?: any, opts?: any): void;
	remove(opts?: {}): this;
	clearItems(): void;
}
export interface TraitsViewProps {
	el?: HTMLElement;
	collection: any[];
	editor: EditorModel;
	config: TraitManagerConfigModule;
}
declare class TraitsView extends DomainViews {
	reuseView: boolean;
	em: EditorModel;
	pfx: string;
	ppfx: string;
	renderedCategories: Map<string, CategoryView>;
	config: TraitManagerConfigModule;
	traitContClass: string;
	catsClass: string;
	classNoCat: string;
	catsEl?: HTMLElement;
	traitsEl?: HTMLElement;
	rendered?: boolean;
	itemsView: TraitManager["types"];
	collection: Traits;
	constructor(props: TraitsViewProps, itemsView: TraitManager["types"]);
	/**
	 * Update view collection
	 * @private
	 */
	updatedCollection(): void;
	/**
	 * Render new model inside the view
	 * @param {Model} model
	 * @param {Object} fragment Fragment collection
	 * @private
	 * */
	add(model: Trait, fragment?: DocumentFragment): void;
	getCategoriesEl(): HTMLElement;
	getTraitsEl(): HTMLElement;
	append(el: HTMLElement | DocumentFragment): void;
	render(): this;
}
declare class TraitManager extends Module<TraitManagerConfigModule> {
	__ctn?: HTMLElement;
	view?: TraitsView;
	TraitsView: typeof TraitsView;
	events: typeof TraitsEvents;
	state: Model<TraitModuleStateProps, SetOptions, any>;
	types: TraitViewTypes;
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @returns {Object}
	 */
	/**
	 * Initialize module
	 * @private
	 */
	constructor(em: EditorModel);
	/**
	 * Select traits from a component.
	 * @param {[Component]} component
	 * @example
	 * tm.select(someComponent);
	 */
	select(component?: Component): void;
	/**
	 * Get trait categories from the currently selected component.
	 * @returns {Array<Category>}
	 * @example
	 * const traitCategories: Category[] = tm.getCategories();
	 *
	 */
	getCategories(): Category[];
	/**
	 * Get traits from the currently selected component.
	 * @returns {Array<[Trait]>}
	 * @example
	 * const currentTraits: Trait[] = tm.getTraits();
	 */
	getTraits(): Trait[];
	/**
	 * Get traits by category from the currently selected component.
	 * @example
	 * tm.getTraitsByCategory();
	 * // Returns an array of items of this type
	 * // > { category?: Category; items: Trait[] }
	 *
	 * // NOTE: The item without category is the one containing traits without category.
	 *
	 * // You can also get the same output format by passing your own array of Traits
	 * const myFilteredTraits: Trait[] = [...];
	 * tm.getTraitsByCategory(myFilteredTraits);
	 */
	getTraitsByCategory(traits?: Trait[]): TraitsByCategory[];
	/**
	 * Get component from the currently selected traits.
	 * @example
	 * tm.getComponent();
	 * // Component {}
	 */
	getComponent(): Component | undefined;
	/**
	 * Add new trait type.
	 * More about it here: [Define new Trait type](https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type).
	 * @param {string} name Type name.
	 * @param {Object} methods Object representing the trait.
	 */
	addType<T>(name: string, methods: CustomTrait<T>): void;
	/**
	 * Get trait type
	 * @param {string} name Type name
	 * @returns {Object}
	 * @private
	 * const traitView = tm.getType('text');
	 */
	getType(name: string): new (o: any) => TraitView;
	/**
	 * Get all trait types
	 * @returns {Object}
	 * @private
	 */
	getTypes(): TraitViewTypes;
	/**
	 *
	 * Get Traits viewer
	 * @private
	 */
	getTraitsViewer(): TraitsView | undefined;
	getCurrent(): Trait[];
	render(): HTMLElement;
	postRender(): void;
	__onSelect(): void;
	__trgCustom(opts?: TraitCustomData): void;
	__customData(): TraitCustomData;
	__upSel(): void;
	__onUp(): void;
}
declare class TraitFactory {
	config: Partial<TraitManagerConfig>;
	constructor(config?: Partial<TraitManagerConfig>);
	/**
	 * Build props object by their name
	 */
	build(prop: string | TraitProperties, em: EditorModel): Trait;
	private buildFromString;
}
export declare class Traits extends CollectionWithCategories<Trait> {
	em: EditorModel;
	target: Component;
	tf: TraitFactory;
	categories: Categories;
	constructor(coll: TraitProperties[], options: {
		em: EditorModel;
	});
	get module(): TraitManager;
	getCategories(): Categories;
	handleReset(coll: TraitProperties[], { previousModels }?: {
		previousModels?: Trait[];
	}): void;
	handleAdd(model: Trait): void;
	setTarget(target: Component): void;
	add(model: string | TraitProperties | Trait, options?: AddOptions): Trait;
	add(models: Array<string | TraitProperties | Trait>, options?: AddOptions): Trait[];
}
/**
 * @property {String} id Trait id, eg. `my-trait-id`.
 * @property {String} type Trait type, defines how the trait should be rendered. Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button`
 * @property {String} label The trait label to show for the rendered trait.
 * @property {String} name The name of the trait used as a key for the attribute/property. By default, the name is used as attribute name or property in case `changeProp` in enabled.
 * @property {String} default Default value to use in case the value is not defined on the component.
 * @property {String} placeholder Placeholder to show inside the default input (if the UI type allows it).
 * @property {String} [category=''] Trait category.
 * @property {Boolean} changeProp If `true`, the trait value is applied on the component property, otherwise, on component attributes.
 *
 * @module docsjs.Trait
 *
 */
export declare class Trait extends Model<TraitProperties> {
	target: Component;
	em: EditorModel;
	view?: TraitView;
	el?: HTMLElement;
	defaults(): {
		type: string;
		label: string;
		name: string;
		unit: string;
		step: number;
		value: string;
		default: string;
		placeholder: string;
		category: string;
		changeProp: boolean;
		options: never[];
	};
	constructor(prop: TraitProperties, em: EditorModel);
	get parent(): Traits;
	get category(): Category | undefined;
	get component(): Component;
	get changeProp(): boolean;
	setTarget(component: Component): void;
	/**
	 * Get the trait id.
	 * @returns {String}
	 */
	getId(): string | number;
	/**
	 * Get the trait type.
	 * @returns {String}
	 */
	getType(): string;
	/**
	 * Get the trait name.
	 * @returns {String}
	 */
	getName(): string;
	/**
	 * Get the trait label.
	 * @param {Object} [opts={}] Options.
	 * @param {Boolean} [opts.locale=true] Use the locale string from i18n module.
	 * @returns {String}
	 */
	getLabel(opts?: {
		locale?: boolean;
	}): any;
	/**
	 * Get the trait value.
	 * The value is taken from component attributes by default or from properties if the trait has the `changeProp` enabled.
	 * @param {Object} [opts={}] Options.
	 * @param {Boolean} [opts.useType=false] Get the value based on type (eg. the checkbox will always return a boolean).
	 * @returns {any}
	 */
	getValue(opts?: TraitGetValueOptions): any;
	/**
	 * Update the trait value.
	 * The value is applied on component attributes by default or on properties if the trait has the `changeProp` enabled.
	 * @param {any} value Value of the trait.
	 * @param {Object} [opts={}] Options.
	 * @param {Boolean} [opts.partial] If `true` the update won't be considered complete (not stored in UndoManager).
	 */
	setValue(value: any, opts?: TraitSetValueOptions): void;
	/**
	 * Get default value.
	 */
	getDefault(): any;
	/**
	 * Get trait options.
	 */
	getOptions(): TraitOption[];
	/**
	 * Get current selected option or by id.
	 * @param {String} [id] Option id.
	 * @returns {Object | null}
	 */
	getOption(id?: string): TraitOption | undefined;
	/**
	 * Get the option id from the option object.
	 * @param {Object} option Option object
	 * @returns {String} Option id
	 */
	getOptionId(option: TraitOption): string;
	/**
	 * Get option label.
	 * @param {String|Object} id Option id or the option object
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.locale=true] Use the locale string from i18n module
	 * @returns {String} Option label
	 */
	getOptionLabel(id: string | TraitOption, opts?: LocaleOptions): string;
	/**
	 * Get category label.
	 * @param {Object} [opts={}] Options.
	 * @param {Boolean} [opts.locale=true] Use the locale string from i18n module.
	 * @returns {String}
	 */
	getCategoryLabel(opts?: LocaleOptions): string;
	/**
	 * Run the trait command (used on the button trait type).
	 */
	runCommand(): any;
	props(): Partial<TraitProperties>;
	targetUpdated(): void;
	getTargetValue(opts?: TraitGetValueOptions): any;
	setTargetValue(value: any, opts?: SetOptions): void;
	setValueFromInput(value: any, final?: boolean, opts?: SetOptions): void;
	getInitValue(): any;
}
export interface TraitViewTypes {
	[id: string]: {
		new (o: any): TraitView;
	};
}
export interface ITraitView {
	noLabel?: TraitView["noLabel"];
	eventCapture?: TraitView["eventCapture"];
	templateInput?: TraitView["templateInput"];
	onEvent?: TraitView["onEvent"];
	onUpdate?: TraitView["onUpdate"];
	createInput?: TraitView["createInput"];
	createLabel?: TraitView["createLabel"];
}
export type CustomTrait<T> = ITraitView & T & ThisType<T & TraitView>;
export interface TraitModuleStateProps {
	component?: Component;
	traits: Trait[];
}
export interface TraitsByCategory extends ItemsByCategory<Trait> {
}
export interface TraitManagerConfigModule extends TraitManagerConfig {
	pStylePrefix?: string;
	em: EditorModel;
}
export interface TraitCustomData {
	container?: HTMLElement;
}
export interface TraitProperties {
	/**
	 * Trait type, defines how the trait should be rendered.
	 * Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button`
	 */
	type?: string;
	/**
	 * The name of the trait used as a key for the attribute/property.
	 * By default, the name is used as attribute name or property in case `changeProp` in enabled.
	 */
	name?: string;
	/**
	 * Trait id, eg. `my-trait-id`.
	 * If not specified, the `name` will be used as id.
	 */
	id?: string | number;
	/**
	 * Trait category.
	 * @default ''
	 */
	category?: string | CategoryProperties;
	/**
	 * The trait label to show for the rendered trait.
	 */
	label?: string | false;
	/**
	 * If `true`, the trait value is applied on the component property, otherwise, on component attributes.
	 * @default false
	 */
	changeProp?: boolean;
	/**
	 * Instead of relying on component props/attributes, define your own
	 * logic on how to get the trait value.
	 */
	getValue?: (props: {
		editor: Editor;
		trait: Trait;
		component: Component;
	}) => any;
	/**
	 * In conjunction with the `getValue`, define your own logic for updating the trait value.
	 */
	setValue?: (props: {
		value: any;
		editor: Editor;
		trait: Trait;
		component: Component;
		partial: boolean;
		options: TraitSetValueOptions;
		emitUpdate: () => void;
	}) => void;
	/**
	 * Custom true value for checkbox type.
	 * @default 'true'
	 */
	valueTrue?: string;
	/**
	 * Custom false value for checkbox type.
	 * * @default 'false'
	 */
	valueFalse?: string;
	/**
	 * Minimum number value for number type.
	 */
	min?: number;
	/**
	 * Maximum number value for number type.
	 */
	max?: number;
	unit?: string;
	/**
	 * Number of steps for number type.
	 */
	step?: number;
	value?: any;
	target?: Component;
	default?: any;
	/**
	 * Placeholder to show inside the default input (if the UI type allows it).
	 */
	placeholder?: string;
	/**
	 * Array of options for the select type.
	 */
	options?: TraitOption[];
	/**
	 * Label text to use for the button type.
	 */
	text?: string;
	labelButton?: string;
	/**
	 * Command to use for the button type.
	 */
	command?: string | ((editor: Editor, trait: Trait) => any);
	full?: boolean;
	attributes?: Record<string, any>;
}
export interface TraitSetValueOptions {
	partial?: boolean;
	[key: string]: unknown;
}
export interface TraitGetValueOptions {
	/**
	 * Get the value based on type.
	 * With this option enabled, the returned value is normalized based on the
	 * trait type (eg. the checkbox will always return a boolean).
	 * @default false
	 */
	useType?: boolean;
}
export interface TraitOption {
	id: string;
	label?: string;
	[key: string]: unknown;
}
declare enum TraitsEvents {
	/**
	 * @event `trait:select` New traits selected (eg. by changing a component).
	 * @example
	 * editor.on('trait:select', ({ traits, component }) => { ... });
	 */
	select = "trait:select",
	/**
	 * @event `trait:value` Trait value updated.
	 * @example
	 * editor.on('trait:value', ({ trait, component, value }) => { ... });
	 */
	value = "trait:value",
	/**
	 * @event `trait:category:update` Trait category updated.
	 * @example
	 * editor.on('trait:category:update', ({ category, changes }) => { ... });
	 */
	categoryUpdate = "trait:category:update",
	/**
	 * @event `trait:custom` Event to use in case of [custom Trait Manager UI](https://grapesjs.com/docs/modules/Traits.html#custom-trait-manager).
	 * @example
	 * editor.on('trait:custom', ({ container }) => { ... });
	 */
	custom = "trait:custom",
	/**
	 * @event `trait` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
	 * @example
	 * editor.on('trait', ({ event, model, ... }) => { ... });
	 */
	all = "trait"
}
export type RectDim = {
	t: number;
	l: number;
	w: number;
	h: number;
};
export type BoundingRect = {
	left: number;
	top: number;
	width: number;
	height: number;
};
export type CallbackOptions = {
	docs: any;
	config: any;
	el: HTMLElement;
	resizer: Resizer;
};
export interface ResizerUpdateTargetOptions {
	store: boolean;
	selectedHandler?: string;
	resizer: Resizer;
	config: ResizerOptions;
}
export interface ResizerOnUpdateContainerOptions {
	el: HTMLElement;
	resizer: Resizer;
	opts: ResizerOptions;
}
export interface ResizerOptions {
	/**
	 * Function which returns custom X and Y coordinates of the mouse.
	 */
	mousePosFetcher?: (ev: Event) => Position;
	/**
	 * Indicates custom target updating strategy.
	 */
	updateTarget?: (el: HTMLElement, rect: RectDim, opts: ResizerUpdateTargetOptions) => void;
	/**
	 * Function which gets HTMLElement as an arg and returns it relative position
	 */
	posFetcher?: (el: HTMLElement, opts: ElementPosOpts) => BoundingRect;
	/**
	 * Indicate if the resizer should keep the default ratio.
	 * @default false
	 */
	ratioDefault?: boolean;
	/**
	 * On resize start callback.
	 */
	onStart?: (ev: Event, opts: CallbackOptions) => void;
	/**
	 * On resize move callback.
	 */
	onMove?: (ev: Event) => void;
	/**
	 * On resize end callback.
	 */
	onEnd?: (ev: Event, opts: CallbackOptions) => void;
	/**
	 * On container update callback.
	 */
	onUpdateContainer?: (opts: ResizerOnUpdateContainerOptions) => void;
	/**
	 * Resize unit step.
	 * @default 1
	 */
	step?: number;
	/**
	 * Minimum dimension.
	 * @default 10
	 */
	minDim?: number;
	/**
	 * Maximum dimension.
	 * @default Infinity
	 */
	maxDim?: number;
	/**
	 * Unit used for height resizing.
	 * @default 'px'
	 */
	unitHeight?: string;
	/**
	 * Unit used for width resizing.
	 * @default 'px'
	 */
	unitWidth?: string;
	/**
	 * The key used for height resizing.
	 * @default 'height'
	 */
	keyHeight?: string;
	/**
	 * The key used for width resizing.
	 * @default 'width'
	 */
	keyWidth?: string;
	/**
	 * If true, will override unitHeight and unitWidth, on start, with units
	 * from the current focused element (currently used only in SelectComponent).
	 * @default true
	 */
	currentUnit?: boolean;
	/**
	 * With this option enabled the mousemove event won't be altered when the pointer comes over iframes.
	 * @default false
	 */
	silentFrames?: boolean;
	/**
	 * If true the container of handlers won't be updated.
	 * @default false
	 */
	avoidContainerUpdate?: boolean;
	/**
	 * If height is 'auto', this setting will preserve it and only update the width.
	 * @default false
	 */
	keepAutoHeight?: boolean;
	/**
	 * If width is 'auto', this setting will preserve it and only update the height.
	 * @default false
	 */
	keepAutoWidth?: boolean;
	/**
	 * When keepAutoHeight is true and the height has the value 'auto', this is set to true and height isn't updated.
	 * @default false
	 */
	autoHeight?: boolean;
	/**
	 * When keepAutoWidth is true and the width has the value 'auto', this is set to true and width isn't updated.
	 * @default false
	 */
	autoWidth?: boolean;
	/**
	 * Enable top left handler.
	 * @default true
	 */
	tl?: boolean;
	/**
	 * Enable top center handler.
	 * @default true
	 */
	tc?: boolean;
	/**
	 * Enable top right handler.
	 * @default true
	 */
	tr?: boolean;
	/**
	 * Enable center left handler.
	 * @default true
	 */
	cl?: boolean;
	/**
	 * Enable center right handler.
	 * @default true
	 */
	cr?: boolean;
	/**
	 * Enable bottom left handler.
	 * @default true
	 */
	bl?: boolean;
	/**
	 * Enable bottom center handler.
	 * @default true
	 */
	bc?: boolean;
	/**
	 * Enable bottom right handler.
	 * @default true
	 */
	br?: boolean;
	/**
	 * Class prefix.
	 */
	prefix?: string;
	/**
	 * Where to append resize container (default body element).
	 */
	appendTo?: HTMLElement;
	/**
	 * Drag mode
	 */
	dragMode?: "absolute" | "relative";
}
export type Handlers = Record<string, HTMLElement | null>;
declare class Resizer {
	defOpts: ResizerOptions;
	opts: ResizerOptions;
	container?: HTMLElement;
	handlers?: Handlers;
	el?: HTMLElement;
	clickedHandler?: HTMLElement;
	selectedHandler?: HTMLElement;
	handlerAttr?: string;
	startDim?: RectDim;
	rectDim?: RectDim;
	parentDim?: RectDim;
	startPos?: Position;
	delta?: Position;
	currentPos?: Position;
	docs?: Document[];
	keys?: {
		shift: boolean;
		ctrl: boolean;
		alt: boolean;
	};
	mousePosFetcher?: ResizerOptions["mousePosFetcher"];
	updateTarget?: ResizerOptions["updateTarget"];
	posFetcher?: ResizerOptions["posFetcher"];
	onStart?: ResizerOptions["onStart"];
	onMove?: ResizerOptions["onMove"];
	onEnd?: ResizerOptions["onEnd"];
	onUpdateContainer?: ResizerOptions["onUpdateContainer"];
	/**
	 * Init the Resizer with options
	 * @param  {Object} options
	 */
	constructor(opts?: ResizerOptions);
	/**
	 * Get current connfiguration options
	 * @return {Object}
	 */
	getConfig(): ResizerOptions;
	/**
	 * Setup options
	 * @param {Object} options
	 */
	setOptions(options?: Partial<ResizerOptions>, reset?: boolean): void;
	/**
	 * Setup resizer
	 */
	setup(): void;
	/**
	 * Toggle iframes pointer event
	 * @param {Boolean} silent If true, iframes will be silented
	 */
	toggleFrames(silent?: boolean): void;
	/**
	 * Detects if the passed element is a resize handler
	 * @param  {HTMLElement} el
	 * @return {Boolean}
	 */
	isHandler(el: HTMLElement): boolean;
	/**
	 * Returns the focused element
	 * @return {HTMLElement}
	 */
	getFocusedEl(): HTMLElement | undefined;
	/**
	 * Returns the parent of the focused element
	 * @return {HTMLElement}
	 */
	getParentEl(): HTMLElement | null | undefined;
	/**
	 * Returns documents
	 */
	getDocumentEl(): Document[];
	/**
	 * Return element position
	 * @param  {HTMLElement} el
	 * @param  {Object} opts Custom options
	 * @return {Object}
	 */
	getElementPos(el: HTMLElement, opts?: ElementPosOpts): BoundingRect;
	/**
	 * Focus resizer on the element, attaches handlers to it
	 * @param {HTMLElement} el
	 */
	focus(el: HTMLElement): void;
	/**
	 * Blur from element
	 */
	blur(): void;
	/**
	 * Start resizing
	 * @param  {Event} e
	 */
	start(ev: Event): void;
	/**
	 * While resizing
	 * @param  {Event} e
	 */
	move(ev: PointerEvent | Event): void;
	/**
	 * Stop resizing
	 * @param  {Event} e
	 */
	stop(e: Event): void;
	/**
	 * Update rect
	 */
	updateRect(store: boolean): void;
	updateContainer(opt?: {
		forceShow?: boolean;
	}): void;
	/**
	 * Get selected handler name
	 * @return {string}
	 */
	getSelectedHandler(): string | undefined;
	/**
	 * Handle ESC key
	 * @param  {Event} e
	 */
	handleKeyDown(e: Event): void;
	/**
	 * Handle mousedown to check if it's possible to start resizing
	 * @param  {Event} e
	 */
	handleMouseDown(e: Event): void;
	/**
	 * All positioning logic
	 * @return {Object}
	 */
	calc(data: Resizer): RectDim | undefined;
	getParentRect(): BoundingRect;
}
export interface ICommand<O extends ObjectAny = any> {
	run?: CommandAbstract<O>["run"];
	stop?: CommandAbstract<O>["stop"];
	id?: string;
	[key: string]: unknown;
}
export type CommandFunction<O extends ObjectAny = any> = CommandAbstract<O>["run"];
export type Command = CommandObject | CommandFunction;
export type CommandOptions = Record<string, any>;
export type CommandObject<O extends ObjectAny = any, T extends ObjectAny = {}> = ICommand<O> & T & ThisType<T & CommandAbstract<O>>;
declare class CommandAbstract<O extends ObjectAny = any> extends Model {
	config: any;
	em: EditorModel;
	pfx: string;
	ppfx: string;
	hoverClass: string;
	badgeClass: string;
	plhClass: string;
	freezClass: string;
	canvas: CanvasModule;
	noStop?: boolean;
	constructor(o: any);
	/**
	 * On frame scroll callback
	 * @param  {[type]} e [description]
	 * @return {[type]}   [description]
	 */
	onFrameScroll(e: any): void;
	/**
	 * Returns canval element
	 * @return {HTMLElement}
	 */
	getCanvas(): HTMLElement;
	/**
	 * Get canvas body element
	 * @return {HTMLElement}
	 */
	getCanvasBody(): HTMLBodyElement;
	/**
	 * Get canvas wrapper element
	 * @return {HTMLElement}
	 */
	getCanvasTools(): any;
	/**
	 * Get the offset of the element
	 * @param  {HTMLElement} el
	 * @return {Object}
	 */
	offset(el: HTMLElement): {
		top: number;
		left: number;
	};
	/**
	 * Callback triggered after initialize
	 * @param  {Object}  o   Options
	 * @private
	 * */
	init(o: any): void;
	/**
	 * Method that run command
	 * @param  {Object}  editor Editor instance
	 * @param  {Object}  [options={}] Options
	 * @private
	 * */
	callRun(editor: Editor, options?: any): void;
	/**
	 * Method that run command
	 * @param  {Object}  editor Editor instance
	 * @param  {Object}  [options={}] Options
	 * @private
	 * */
	callStop(editor: Editor, options?: any): void;
	/**
	 * Stop current command
	 */
	stopCommand(opts?: any): void;
	/**
	 * Method that run command
	 * @param  {Object}  em     Editor model
	 * @param  {Object}  sender  Button sender
	 * @private
	 * */
	run(em: Editor, sender: any, options: O): void;
	/**
	 * Method that stop command
	 * @param  {Object}  em Editor model
	 * @param  {Object}  sender  Button sender
	 * @private
	 * */
	stop(em: Editor, sender: any, options: O): void;
}
export interface ToolbarButtonProps {
	/**
	 * Command name.
	 */
	command: CommandFunction | string;
	/**
	 * Button label.
	 */
	label?: string;
	id?: string;
	attributes?: ObjectAny;
	events?: ObjectAny;
}
export type DragMode = "translate" | "absolute" | "";
export type DraggableDroppableFn = (source: Component, target: Component, index?: number) => boolean | void;
export interface AddComponentsOption extends AddOptions, OptionAsDocument {
}
export interface ResetComponentsOptions extends AddComponentsOption {
	previousModels?: Component[];
	keepIds?: string[];
	skipDomReset?: boolean;
}
export interface ComponentWithCheck<C extends Component> {
	new (props: any, opt: ComponentOptions): C;
	isComponent(node: HTMLElement, opts?: ParseNodeOptions): ComponentDefinitionDefined | undefined | boolean;
}
export interface ComponentStackItem<C extends Component = Component, CV extends ComponentView<C> = ComponentView<C>> {
	id: string;
	model: ComponentWithCheck<C>;
	view: new (opt: any) => CV;
}
/**
 * Delegate commands to other components.
 */
export interface ComponentDelegateProps {
	/**
	 * Delegate remove command to another component.
	 * @example
	 * delegate: {
	 *  remove: (cmp) => cmp.closestType('other-type'),
	 * }
	 */
	remove?: (cmp: Component) => Component | Nullable;
	/**
	 * Delegate move command to another component.
	 * @example
	 * delegate: {
	 *  move: (cmp) => cmp.closestType('other-type'),
	 * }
	 */
	move?: (cmp: Component) => Component | Nullable;
	/**
	 * Delegate copy command to another component.
	 * @example
	 * delegate: {
	 *  copy: (cmp) => cmp.closestType('other-type'),
	 * }
	 */
	copy?: (cmp: Component) => Component | Nullable;
	/**
	 * Delegate select command to another component.
	 * @example
	 * delegate: {
	 *  select: (cmp) => cmp.findType('other-type')[0],
	 * }
	 */
	select?: (cmp: Component) => Component | Nullable;
	/**
	 * Delegate another component as a layer in the LayerManager.
	 * @example
	 * delegate: {
	 *  layer: (cmp) => cmp.findType('other-type')[0],
	 * }
	 */
	layer?: (cmp: Component) => Component | Nullable;
}
export interface ComponentProperties {
	/**
	 * Component type, eg. `text`, `image`, `video`, etc.
	 * @default ''
	 */
	type?: string;
	/**
	 * HTML tag of the component, eg. `span`. Default: `div`
	 * @default 'div'
	 */
	tagName?: string;
	/**
	 * Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}`
	 * @default {}
	 */
	attributes?: Record<string, any>;
	/**
	 * Name of the component. Will be used, for example, in Layers and badges
	 * @default ''
	 */
	name?: string;
	/**
	 * When `true` the component is removable from the canvas, default: `true`
	 * @default true
	 */
	removable?: boolean;
	/**
		 * Indicates if it's possible to drag the component inside others.
		 You can also specify a query string to indentify elements,
		 eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements
		 containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true`
		 * @default true
		 */
	draggable?: boolean | string | DraggableDroppableFn;
	/**
		 * Indicates if it's possible to drop other components inside. You can use
		a query string as with `draggable`. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: `true`
		 * @default true
		 */
	droppable?: boolean | string | DraggableDroppableFn;
	/**
	 * Set to false if you don't want to see the badge (with the name) over the component. Default: `true`
	 * @default true
	 */
	badgable?: boolean;
	/**
		 * True if it's possible to style the component.
		You can also indicate an array of CSS properties which is possible to style, eg. `['color', 'width']`, all other properties
		will be hidden from the style manager. Default: `true`
		 * @default true
		 */
	stylable?: boolean | String[];
	/**
	 * Indicate an array of style properties which should be hidden from the style manager. Default: `[]`
	 * @default []
	 */
	unstylable?: String[];
	/**
	 * It can be highlighted with 'dotted' borders if true. Default: `true`
	 * @default true
	 */
	highlightable?: boolean;
	/**
	 * True if it's possible to clone the component. Default: `true`
	 * @default true
	 */
	copyable?: boolean;
	/**
	 * Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/GrapesJS/grapesjs/blob/master/src/utils/Resizer.ts). Default: `false`
	 */
	resizable?: boolean | ResizerOptions;
	/**
	 * Allow to edit the content of the component (used on Text components). Default: `false`
	 */
	editable?: boolean;
	/**
	 * Set to `false` if you need to hide the component inside Layers. Default: `true`
	 * @default true
	 */
	layerable?: boolean;
	/**
	 * Allow component to be selected when clicked. Default: `true`
	 * @default true
	 */
	selectable?: boolean;
	/**
	 * Shows a highlight outline when hovering on the element if `true`. Default: `true`
	 * @default true
	 */
	hoverable?: boolean;
	/**
	 * Disable the selection of the component and its children in the canvas.
	 * @default false
	 */
	locked?: boolean;
	/**
	 * This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
	 */
	void?: boolean;
	/**
	 * Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }`
	 * @default {}
	 */
	style?: string | Record<string, any>;
	/**
	 * Component related styles, eg. `.my-component-class { color: red }`
	 * @default ''
	 */
	styles?: string;
	/**
	 * Content of the component (not escaped) which will be appended before children rendering. Default: `''`
	 * @default ''
	 */
	content?: string;
	/**
	 * Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<i class="fa fa-square-o"></i>'. Default: `''`
	 * @default ''
	 */
	icon?: string;
	/**
	 * Component's javascript. More about it [here](/modules/Components-js.html). Default: `''`
	 * @default ''
	 */
	script?: string | ((...params: any[]) => any);
	/**
	 * Component's traits. More about it [here](/modules/Traits.html). Default: `['id', 'title']`
	 * @default ''
	 */
	traits?: Traits;
	/**
		 * Indicates an array of properties which will be inhereted by all NEW appended children.
		 For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }`
		 and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]`
		 * @default []
		 */
	propagate?: (keyof ComponentProperties)[];
	/**
	 * Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
	 * Eg. `toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]`.
	 * By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
	 */
	toolbar?: ToolbarButtonProps[];
	/**
	 * Delegate commands to other components.
	 */
	delegate?: ComponentDelegateProps;
	components?: Components;
	classes?: Selectors;
	dmode?: DragMode;
	"script-props"?: string[];
	[key: string]: any;
}
export interface SymbolToUpOptions extends DynamicWatchersOptions {
	changed?: string;
	fromInstance?: boolean;
	noPropagate?: boolean;
	fromUndo?: boolean;
}
export interface ComponentDefinition extends Omit<ComponentProperties, "components" | "traits"> {
	/**
	 * Children components.
	 */
	components?: string | ComponentDefinition | (string | ComponentDefinition)[];
	traits?: (Partial<TraitProperties> | string)[];
	attributes?: Record<string, any>;
	[key: string]: unknown;
}
export interface ComponentDefinitionDefined extends Omit<ComponentProperties, "components" | "traits"> {
	/**
	 * Children components.
	 */
	components?: ComponentDefinitionDefined[] | ComponentDefinitionDefined;
	traits?: (Partial<TraitProperties> | string)[];
	[key: string]: any;
}
export type ComponentAddType = Component | ComponentDefinition | ComponentDefinitionDefined | string;
export type ComponentAdd = ComponentAddType | ComponentAddType[];
export interface ToHTMLOptions extends OptionAsDocument {
	/**
	 * Custom tagName.
	 */
	tag?: string;
	/**
	 * Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML.
	 */
	withProps?: boolean;
	/**
	 * In case the attribute value contains a `"` char, instead of escaping it (`attr="value &quot;"`), the attribute will be quoted using single quotes (`attr='value "'`).
	 */
	altQuoteAttr?: boolean;
	/**
	 * Keep inline style set intentionally by users with `setStyle({}, { inline: true })`
	 */
	keepInlineStyle?: boolean;
	/**
	 * You can pass an object of custom attributes to replace with the current ones
	 * or you can even pass a function to generate attributes dynamically.
	 */
	attributes?: Record<string, any> | ((component: Component, attr: Record<string, any>) => Record<string, any>);
}
export interface ComponentOptions {
	em: EditorModel;
	config: DomComponentsConfig;
	frame?: Frame;
	temporary?: boolean;
	avoidChildren?: boolean;
	forCloning?: boolean;
}
declare class ComponentHead extends Component {
	get defaults(): {
		type: string;
		tagName: string;
		draggable: boolean;
		highlightable: boolean;
		droppable: DraggableDroppableFn;
		components?: ComponentDefinitionDefined[] | ComponentDefinitionDefined;
		traits?: (Partial<TraitProperties> | string)[];
	};
	static isComponent(el: HTMLElement): boolean;
}
declare class ComponentWrapper extends Component {
	get defaults(): {
		tagName: string;
		removable: boolean;
		copyable: boolean;
		draggable: boolean;
		components: never[];
		traits: never[];
		doctype: string;
		head: null;
		docEl: null;
		stylable: string[];
	};
	preInit(): void;
	get head(): ComponentHead;
	get docEl(): Component;
	get doctype(): string;
	clone(opt?: {
		symbol?: boolean | undefined;
		symbolInv?: boolean | undefined;
	}): this;
	toHTML(opts?: ToHTMLOptions): string;
	__postAdd(): void;
	__postRemove(): void;
	static isComponent(): boolean;
}
declare class ComponentWrapperView extends ComponentView {
	tagName(): string;
}
export interface SymbolInfo {
	isSymbol: boolean;
	isMain: boolean;
	isInstance: boolean;
	isRoot: boolean;
	main?: Component;
	instances: Component[];
	relatives: Component[];
}
export interface ParseStringOptions extends AddOptions, OptionAsDocument, WithHTMLParserOptions {
	keepIds?: string[];
}
declare enum ComponentsEvents {
	/**
	 * @event `component:add` New component added.
	 * @example
	 * editor.on('component:add', (component) => { ... });
	 */
	add = "component:add",
	/**
	 * @event `component:remove` Component removed.
	 * @example
	 * editor.on('component:remove', (component) => { ... });
	 */
	remove = "component:remove",
	removeBefore = "component:remove:before",
	removed = "component:removed",
	/**
	 * @event `component:create` Component created.
	 * @example
	 * editor.on('component:create', (component) => { ... });
	 */
	create = "component:create",
	/**
	 * @event `component:update` Component is updated, the component is passed as an argument to the callback.
	 * @example
	 * editor.on('component:update', (component) => { ... });
	 */
	update = "component:update",
	updateInside = "component:update-inside",
	/**
	 * @event `component:select` Component selected.
	 * @example
	 * editor.on('component:select', (component) => { ... });
	 */
	select = "component:select",
	selectBefore = "component:select:before",
	/**
	 * @event `component:script:mount` Component with script is mounted.
	 * @example
	 * editor.on('component:script:mount', ({ component, view, el }) => { ... });
	 */
	scriptMount = "component:script:mount",
	scriptMountBefore = "component:script:mount:before",
	/**
	 * @event `component:script:unmount` Component with script is unmounted. This is triggered when the component is removed or the script execution has to be refreshed. This event might be useful to clean up resources.
	 * @example
	 * editor.on('component:script:unmount', ({ component, view, el }) => { ... });
	 */
	scriptUnmount = "component:script:unmount",
	/**
	 * @event `component:render` Component rendered in the canvas. This event could be triggered multiple times for the same component (eg. undo/redo, explicit rerender).
	 * @example
	 * editor.on('component:render', ({ component, view, el }) => { ... });
	 */
	render = "component:render",
	/**
	 * @event `symbol:main:add` Added new main symbol.
	 * @example
	 * editor.on('symbol:main:add', ({ component }) => { ... });
	 */
	symbolMainAdd = "symbol:main:add",
	/**
	 * @event `symbol:main:update` Main symbol updated.
	 * @example
	 * editor.on('symbol:main:update', ({ component }) => { ... });
	 */
	symbolMainUpdate = "symbol:main:update",
	symbolMainUpdateDeep = "symbol:main:update-deep",
	/**
	 * @event `symbol:main:remove` Main symbol removed.
	 * @example
	 * editor.on('symbol:main:remove', ({ component }) => { ... });
	 */
	symbolMainRemove = "symbol:main:remove",
	/**
	 * @event `symbol:main` Catch-all event related to main symbol updates.
	 * @example
	 * editor.on('symbol:main', ({ event, component }) => { ... });
	 */
	symbolMain = "symbol:main",
	/**
	 * @event `symbol:instance:add` Added new root instance symbol.
	 * @example
	 * editor.on('symbol:instance:add', ({ component }) => { ... });
	 */
	symbolInstanceAdd = "symbol:instance:add",
	/**
	 * @event `symbol:instance:remove` Root instance symbol removed.
	 * @example
	 * editor.on('symbol:instance:remove', ({ component }) => { ... });
	 */
	symbolInstanceRemove = "symbol:instance:remove",
	/**
	 * @event `symbol:instance` Catch-all event related to instance symbol updates.
	 * @example
	 * editor.on('symbol:instance', ({ event, component }) => { ... });
	 */
	symbolInstance = "symbol:instance",
	/**
	 * @event `symbol` Catch-all event for any symbol update (main or instance).
	 * @example
	 * editor.on('symbol', () => { ... });
	 */
	symbol = "symbol"
}
export interface PropsComponentUpdate {
	component: Component;
	changed: ObjectAny;
	options: ObjectAny;
}
declare class Symbols extends Components {
	refreshDbn: Debounced;
	constructor(...args: ConstructorParameters<typeof Components>);
	removeChildren(component: Component, coll?: Components, opts?: any): void;
	onAdd(...args: Parameters<Components["onAdd"]>): void;
	onUpdate(props: PropsComponentUpdate): void;
	onUpdateDeep(props: PropsComponentUpdate): void;
	refresh(): void;
	__trgEvent(event: string, props: ObjectAny, isInstance?: boolean): void;
}
export type ComponentEvent = "component:create" | "component:mount" | "component:add" | "component:remove" | "component:remove:before" | "component:clone" | "component:update" | "component:styleUpdate" | "component:selected" | "component:deselected" | "component:toggled" | "component:type:add" | "component:type:update" | "component:drag:start" | "component:drag" | "component:drag:end" | "component:resize";
export interface ComponentModelDefinition extends IComponent {
	defaults?: ComponentDefinition | (() => ComponentDefinition);
	[key: string]: any;
}
export interface ComponentViewDefinition extends IComponentView {
	[key: string]: any;
}
export interface AddComponentTypeOptions {
	isComponent?: (el: HTMLElement) => boolean | ComponentDefinitionDefined | undefined;
	model?: Partial<ComponentModelDefinition> & ThisType<ComponentModelDefinition & Component>;
	view?: Partial<ComponentViewDefinition> & ThisType<ComponentViewDefinition & ComponentView>;
	block?: boolean | Partial<BlockProperties>;
	extend?: string;
	extendView?: string;
	extendFn?: string[];
	extendFnView?: string[];
}
declare enum CanMoveReason {
	/**
	 * Invalid source. This is a default value and should be ignored in case the `result` is true
	 */
	InvalidSource = 0,
	/**
	 * Source doesn't accept target as destination.
	 */
	SourceReject = 1,
	/**
	 * Target doesn't accept source.
	 */
	TargetReject = 2
}
export interface CanMoveResult {
	result: boolean;
	reason: CanMoveReason;
	target: Component;
	source?: Component | null;
}
export declare class ComponentManager extends ItemManagerModule<DomComponentsConfig, any> {
	componentTypes: ComponentStackItem[];
	componentsById: {
		[id: string]: Component;
	};
	componentView?: ComponentWrapperView;
	Component: typeof Component;
	Components: typeof Components;
	ComponentView: typeof ComponentView;
	ComponentsView: typeof ComponentsView;
	/**
	 * Name of the module
	 * @type {String}
	 * @private
	 */
	storageKey: string;
	keySymbols: string;
	shallow?: Component;
	symbols: Symbols;
	events: typeof ComponentsEvents;
	/**
	 * Initialize module. Called on a new instance of the editor with configurations passed
	 * inside 'domComponents' field
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	postLoad(): void;
	load(data: any): any;
	store(): {
		[x: string]: Symbols;
	};
	/**
	 * Returns the main wrapper.
	 * @return {Object}
	 * @private
	 */
	getComponent(): ComponentWrapper | undefined;
	/**
	 * Returns root component inside the canvas. Something like `<body>` inside HTML page
	 * The wrapper doesn't differ from the original Component Model
	 * @return {[Component]} Root Component
	 * @example
	 * // Change background of the wrapper and set some attribute
	 * var wrapper = cmp.getWrapper();
	 * wrapper.set('style', {'background-color': 'red'});
	 * wrapper.set('attributes', {'title': 'Hello!'});
	 */
	getWrapper(): ComponentWrapper | undefined;
	/**
	 * Returns wrapper's children collection. Once you have the collection you can
	 * add other Components(Models) inside. Each component can have several nested
	 * components inside and you can nest them as more as you wish.
	 * @return {Components} Collection of components
	 * @example
	 * // Let's add some component
	 * var wrapperChildren = cmp.getComponents();
	 * var comp1 = wrapperChildren.add({
	 *   style: { 'background-color': 'red'}
	 * });
	 * var comp2 = wrapperChildren.add({
	 *   tagName: 'span',
	 *   attributes: { title: 'Hello!'}
	 * });
	 * // Now let's add an other one inside first component
	 * // First we have to get the collection inside. Each
	 * // component has 'components' property
	 * var comp1Children = comp1.get('components');
	 * // Procede as before. You could also add multiple objects
	 * comp1Children.add([
	 *   { style: { 'background-color': 'blue'}},
	 *   { style: { height: '100px', width: '100px'}}
	 * ]);
	 * // Remove comp2
	 * wrapperChildren.remove(comp2);
	 */
	getComponents(): Components;
	/**
	 * Add new components to the wrapper's children. It's the same
	 * as 'cmp.getComponents().add(...)'
	 * @param {Object|[Component]|Array<Object>} component Component/s to add
	 * @param {string} [component.tagName='div'] Tag name
	 * @param {string} [component.type=''] Type of the component. Available: ''(default), 'text', 'image'
	 * @param {boolean} [component.removable=true] If component is removable
	 * @param {boolean} [component.draggable=true] If is possible to move the component around the structure
	 * @param {boolean} [component.droppable=true] If is possible to drop inside other components
	 * @param {boolean} [component.badgable=true] If the badge is visible when the component is selected
	 * @param {boolean} [component.stylable=true] If is possible to style component
	 * @param {boolean} [component.copyable=true] If is possible to copy&paste the component
	 * @param {string} [component.content=''] String inside component
	 * @param {Object} [component.style={}] Style object
	 * @param {Object} [component.attributes={}] Attribute object
	 * @param {Object} opt the options object to be used by the [Components.add]{@link getComponents} method
	 * @return {[Component]|Array<[Component]>} Component/s added
	 * @example
	 * // Example of a new component with some extra property
	 * var comp1 = cmp.addComponent({
	 *   tagName: 'div',
	 *   removable: true, // Can't remove it
	 *   draggable: true, // Can't move it
	 *   copyable: true, // Disable copy/past
	 *   content: 'Content text', // Text inside component
	 *   style: { color: 'red'},
	 *   attributes: { title: 'here' }
	 * });
	 */
	addComponent(component: ComponentAdd, opt?: AddComponentsOption): Component | Component[];
	/**
	 * Render and returns wrapper element with all components inside.
	 * Once the wrapper is rendered, and it's what happens when you init the editor,
	 * the all new components will be added automatically and property changes are all
	 * updated immediately
	 * @return {HTMLElement}
	 * @private
	 */
	render(): HTMLElement | undefined;
	/**
	 * Remove all components
	 * @return {this}
	 */
	clear(opts?: {}): this;
	/**
	 * Set components
	 * @param {Object|string} components HTML string or components model
	 * @param {Object} opt the options object to be used by the {@link addComponent} method
	 * @return {this}
	 * @private
	 */
	setComponents(components: ComponentAdd, opt?: AddComponentsOption): void;
	/**
	 * Add new component type.
	 * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
	 * @param {string} type Component ID
	 * @param {Object} methods Component methods
	 * @return {this}
	 */
	addType(type: string, methods: AddComponentTypeOptions): this;
	/**
	 * Get component type.
	 * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
	 * @param {string} type Component ID
	 * @return {Object} Component type definition, eg. `{ model: ..., view: ... }`
	 */
	getType(type: "default"): {
		id: string;
		model: any;
		view: any;
	};
	getType(type: string): {
		id: string;
		model: any;
		view: any;
	} | undefined;
	/**
	 * Remove component type
	 * @param {string} type Component ID
	 * @returns {Object|undefined} Removed component type, undefined otherwise
	 */
	removeType(id: string): {
		id: string;
		model: any;
		view: any;
	} | undefined;
	/**
	 * Return the array of all types
	 * @return {Array}
	 */
	getTypes(): ComponentStackItem<Component, ComponentView<Component>>[];
	selectAdd(component: Component, opts?: {}): void;
	selectRemove(component: Component, opts?: {}): void;
	/**
	 * Triggered when the component is hovered
	 * @private
	 */
	componentHovered(): void;
	getShallowWrapper(): Component | undefined;
	/**
	 * Check if the object is a [Component].
	 * @param {Object} obj
	 * @returns {Boolean}
	 * @example
	 * cmp.isComponent(editor.getSelected()); // true
	 * cmp.isComponent({}); // false
	 */
	isComponent(obj?: ObjectAny): obj is Component;
	/**
	 * Add a new symbol from a component.
	 * If the passed component is not a symbol, it will be converted to an instance and will return the main symbol.
	 * If the passed component is already an instance, a new instance will be created and returned.
	 * If the passed component is the main symbol, a new instance will be created and returned.
	 * @param {[Component]} component Component from which create a symbol.
	 * @returns {[Component]}
	 * @example
	 * const symbol = cmp.addSymbol(editor.getSelected());
	 * // cmp.getSymbolInfo(symbol).isSymbol === true;
	 */
	addSymbol(component: Component): Component | undefined;
	/**
	 * Get the array of main symbols.
	 * @returns {Array<[Component]>}
	 * @example
	 * const symbols = cmp.getSymbols();
	 * // [Component, Component, ...]
	 * // Removing the main symbol will detach all the relative instances.
	 * symbols[0].remove();
	 */
	getSymbols(): Component[];
	/**
	 * Detach symbol instance from the main one.
	 * The passed symbol instance will become a regular component.
	 * @param {[Component]} component The component symbol to detach.
	 * @example
	 * const cmpInstance = editor.getSelected();
	 * // cmp.getSymbolInfo(cmpInstance).isInstance === true;
	 * cmp.detachSymbol(cmpInstance);
	 * // cmp.getSymbolInfo(cmpInstance).isInstance === false;
	 */
	detachSymbol(component: Component): void;
	/**
	 * Get info about the symbol.
	 * @param {[Component]} component Component symbol from which to get the info.
	 * @returns {Object} Object containing symbol info.
	 * @example
	 * cmp.getSymbolInfo(editor.getSelected());
	 * // > { isSymbol: true, isMain: false, isInstance: true, ... }
	 */
	getSymbolInfo(component: Component, opts?: {
		withChanges?: string;
	}): SymbolInfo;
	/**
	 * Check if a component can be moved inside another one.
	 * @param {[Component]} target The target component is the one that is supposed to receive the source one.
	 * @param {[Component]|String} source The source can be another component, a component definition or an HTML string.
	 * @param {Number} [index] Index position, if not specified, the check will be performed against appending the source to the target.
	 * @returns {Object} Object containing the `result` (Boolean), `source`, `target` (as Components), and a `reason` (Number) with these meanings:
	 * * `0` - Invalid source. This is a default value and should be ignored in case the `result` is true.
	 * * `1` - Source doesn't accept target as destination.
	 * * `2` - Target doesn't accept source.
	 * @example
	 * const rootComponent = editor.getWrapper();
	 * const someComponent = editor.getSelected();
	 *
	 * // Check with two components
	 * editor.Components.canMove(rootComponent, someComponent);
	 *
	 * // Check with component definition
	 * editor.Components.canMove(rootComponent, { tagName: 'a', draggable: false });
	 *
	 * // Check with HTML string
	 * editor.Components.canMove(rootComponent, '<form>...</form>');
	 */
	canMove(target: Component, source?: Component | ComponentDefinition | string, index?: number): CanMoveResult;
	allById(): {
		[id: string]: Component;
	};
	getById(id: string): Component;
	destroy(): void;
}
export interface ComponentsOptions {
	em: EditorModel;
	config?: DomComponentsConfig;
	domc?: ComponentManager;
}
export interface AddComponentOptions extends AddOptions {
	previousModels?: Component[];
	keepIds?: string[];
}
export declare class Components extends Collection</**
 * Keep this format to avoid errors in TS bundler */ 
/** @ts-ignore */
Component> {
	opt: ComponentsOptions;
	config?: DomComponentsConfig;
	em: EditorModel;
	domc?: ComponentManager;
	parent?: Component;
	constructor(models: any, opt: ComponentsOptions);
	get events(): typeof ComponentsEvents;
	resetChildren(models: Components, opts?: {
		previousModels?: Component[];
		keepIds?: string[];
	}): void;
	resetFromString(input?: string, opts?: {
		visitedCmps?: Record<string, Component[]>;
		keepIds?: string[];
	}): void;
	removeChildren(removed: Component, coll?: Components, opts?: any): void;
	/** @ts-ignore */
	model(attrs: Partial<ComponentProperties>, options: any): Component;
	parseString(value: string, opt?: ParseStringOptions): ComponentDefinitionDefined | ComponentDefinitionDefined[];
	add(model: Exclude<ComponentAddType, string>, opt?: AddComponentOptions): Component;
	add(models: ComponentAddType[], opt?: AddComponentOptions): Component[];
	add(models: ComponentAdd, opt?: AddComponentOptions): Component | Component[];
	/**
	 * Process component definition.
	 */
	processDef(mdl: Component | ComponentDefinition | ComponentDefinitionDefined): Component | ComponentDefinitionDefined | ComponentDefinition;
	onAdd(model: Component, c?: any, opts?: {
		temporary?: boolean;
	}): void;
}
export interface LayerManagerConfig {
	stylePrefix?: string;
	/**
	 * Specify the element to use as a container, string (query) or HTMLElement.
	 * With the empty value, nothing will be rendered.
	 * @default ''
	 */
	appendTo?: string | HTMLElement;
	/**
	 * Enable/Disable globally the possibility to sort layers.
	 * @default true
	 */
	sortable?: boolean;
	/**
	 * Enable/Disable globally the possibility to hide layers.
	 * @default true
	 */
	hidable?: boolean;
	/**
	 * Hide textnodes.
	 * @default true
	 */
	hideTextnode?: boolean;
	/**
	 * Indicate a query string of the element to be selected as the root of layers.
	 * By default the root is the wrapper.
	 * @default ''
	 */
	root?: string;
	/**
	 * Indicates if the wrapper is visible in layers.
	 * @default true
	 */
	showWrapper?: boolean;
	/**
	 * Show hovered components in canvas.
	 * @default true
	 */
	showHover?: boolean;
	/**
	 * Scroll to selected component in Canvas when it's selected in Layers.
	 * true, false or `scrollIntoView`-like options,
	 * `block: 'nearest'` avoids the issue of window scrolling.
	 * @default { behavior: 'smooth', block: 'nearest' }
	 */
	scrollCanvas?: boolean | ScrollIntoViewOptions;
	/**
	 * Scroll to selected component in Layers when it's selected in Canvas.
	 * @default { behavior: 'auto', block: 'nearest' }
	 */
	scrollLayers?: boolean | ScrollIntoViewOptions;
	/**
	 * Highlight when a layer component is hovered.
	 * @default true
	 */
	highlightHover?: boolean;
	/**
	 * Avoid rendering the default layer manager.
	 * @default false
	 */
	custom?: boolean;
	/**
	 * WARNING: Experimental option.
	 * A callback triggered once the component layer is initialized.
	 * Useful to trigger updates on some component prop change.
	 * @example
	 * onInit({ component, render, listenTo }) {
	 *  listenTo(component, 'change:some-prop', render);
	 * };
	 */
	onInit?: () => void;
	/**
	 * WARNING: Experimental option.
	 * A callback triggered once the component layer is rendered.
	 * A callback useful to update the layer DOM on some component change
	 * @example
	 * onRender({ component, el }) { // el is the DOM of the layer
	 *  if (component.get('some-prop')) {
	 *    // do changes using the `el` DOM
	 *  }
	 * }
	 */
	onRender?: () => void;
	/**
	 * Extend Layer view object (view/ItemView.js)
	 * @example
	 * extend: {
	 *   setName(name) {
	 *     // this.model is the component of the layer
	 *     this.model.set('another-prop-for-name', name);
	 *   },
	 * },
	 */
	extend?: Record<string, any>;
}
export interface LayerData {
	name: string;
	open: boolean;
	selected: boolean;
	hovered: boolean;
	visible: boolean;
	locked: boolean;
	components: Component[];
}
declare class LayerManager extends Module<LayerManagerConfig> {
	model: ModuleModel;
	__ctn?: HTMLElement;
	view?: View;
	events: {
		all: string;
		root: string;
		component: string;
		custom: string;
	};
	constructor(em: EditorModel);
	onLoad(): void;
	/**
	 * Update the root layer with another component.
	 * @param {[Component]|String} component Component to be set as root
	 * @return {[Component]}
	 * @example
	 * const component = editor.getSelected();
	 * layers.setRoot(component);
	 */
	setRoot(component: Component | string): Component;
	/**
	 * Get the current root layer.
	 * @return {[Component]}
	 * @example
	 * const layerRoot = layers.getRoot();
	 */
	getRoot(): Component;
	/**
	 * Get valid layer child components (eg. excludes non layerable components).
	 * @param {[Component]} component Component from which you want to get child components
	 * @returns {Array<[Component]>}
	 * @example
	 * const component = editor.getSelected();
	 * const components = layers.getComponents(component);
	 * console.log(components);
	 */
	getComponents(component: Component): Component[];
	/**
	 * Update the layer open state of the component.
	 * @param {[Component]} component Component to update
	 * @param {Boolean} value
	 */
	setOpen(component: Component, value: boolean): void;
	/**
	 * Check the layer open state of the component.
	 * @param {[Component]} component
	 * @returns {Boolean}
	 */
	isOpen(component: Component): boolean;
	/**
	 * Update the layer visibility state of the component.
	 * @param {[Component]} component Component to update
	 * @param {Boolean} value
	 */
	setVisible(component: Component, value: boolean): void;
	/**
	 * Check the layer visibility state of the component.
	 * @param {[Component]} component
	 * @returns {Boolean}
	 */
	isVisible(component: Component): boolean;
	/**
	 * Update the layer locked state of the component.
	 * @param {[Component]} component Component to update
	 * @param {Boolean} value
	 */
	setLocked(component: Component, value: boolean): void;
	/**
	 * Check the layer locked state of the component.
	 * @param {[Component]} component
	 * @returns {Boolean}
	 */
	isLocked(component: Component): boolean;
	/**
	 * Update the layer name of the component.
	 * @param {[Component]} component Component to update
	 * @param {String} value New name
	 */
	setName(component: Component, value: string): void;
	/**
	 * Get the layer name of the component.
	 * @param {[Component]} component
	 * @returns {String} Component layer name
	 */
	getName(component: Component): any;
	/**
	 * Get layer data from a component.
	 * @param {[Component]} component Component from which you want to read layer data.
	 * @returns {Object} Object containing the layer data.
	 * @example
	 * const component = editor.getSelected();
	 * const layerData = layers.getLayerData(component);
	 * console.log(layerData);
	 */
	getLayerData(component: Component): LayerData;
	setLayerData(component: Component, data: Partial<Omit<LayerData, "components">>, opts?: {}): void;
	/**
	 * Triggered when the selected component is changed
	 * @private
	 */
	componentChanged(sel?: Component, opts?: {}): void;
	getAll(): View | undefined;
	render(): HTMLElement;
	destroy(): void;
	__onRootChange(): void;
	__getLayerFromComponent(cmp: Component): Component;
	__onComponent(component: Component): void;
	__isLayerable(cmp: Component): boolean;
	__trgCustom(opts?: any): void;
	updateLayer(component: Component, opts?: any): void;
}
declare class LayersComponentNode extends BaseComponentNode {
	protected _dropAreaConfig: {
		ratio: number;
		minUndroppableDimension: number;
		maxUndroppableDimension: number;
	};
	/**
	 * Get the associated view of this component.
	 * @returns The view associated with the component, or undefined if none.
	 */
	get view(): any;
	/**
	 * Get the associated element of this component.
	 * @returns The Element associated with the component, or undefined if none.
	 */
	get element(): HTMLElement | undefined;
}
declare class ItemsView extends View {
	items: ItemView[];
	opt: {
		sorter: ComponentSorter<LayersComponentNode>;
		[k: string]: any;
	};
	config: any;
	parentView: ItemView;
	module: LayerManager;
	/** @ts-ignore */
	collection: Components;
	constructor(opt?: any);
	/**
	 * Create placeholder
	 * @return {HTMLElement}
	 */
	private createPlaceholder;
	removeChildren(removed: Component): void;
	/**
	 * Add to collection
	 * @param Object Model
	 *
	 * @return Object
	 * */
	addTo(model: Component): void;
	/**
	 * Add new object to collection
	 * @param  Object  Model
	 * @param  Object   Fragment collection
	 * @param  integer  Index of append
	 *
	 * @return Object Object created
	 * */
	addToCollection(model: Component, fragment: DocumentFragment | null, index?: number): HTMLElement;
	remove(...args: [
	]): this;
	render(): this;
}
export type ItemViewProps = ViewOptions & {
	ItemView: ItemView;
	level: number;
	config: any;
	opened: {};
	model: Component;
	module: LayerManager;
	sorter: any;
	parentView: ItemView;
};
declare class ItemView extends View {
	events(): {
		"mousedown [data-toggle-move]": string;
		"touchstart [data-toggle-move]": string;
		"click [data-toggle-visible]": string;
		"click [data-toggle-open]": string;
		"click [data-toggle-select]": string;
		"mouseover [data-toggle-select]": string;
		"mouseout [data-toggle-select]": string;
		"dblclick [data-name]": string;
		"keydown [data-name]": string;
		"focusout [data-name]": string;
	};
	template(model: Component): string;
	get em(): EditorModel;
	get ppfx(): string;
	get pfx(): string;
	opt: ItemViewProps;
	module: LayerManager;
	config: any;
	sorter: Sorter<Component, LayersComponentNode>;
	/** @ts-ignore */
	model: Component;
	parentView: ItemView;
	items?: ItemsView;
	inputNameCls: string;
	clsTitleC: string;
	clsTitle: string;
	clsCaret: string;
	clsCount: string;
	clsMove: string;
	clsChildren: string;
	clsNoChild: string;
	clsEdit: string;
	clsNoEdit: string;
	_rendered?: boolean;
	caret?: JQuery<HTMLElement>;
	inputName?: HTMLElement;
	constructor(opt: ItemViewProps);
	initComponent(): void;
	updateName(): void;
	getVisibilityEl(): JQuery<HTMLElement>;
	updateVisibility(): void;
	updateMove(): void;
	/**
	 * Toggle visibility
	 * @param	Event
	 *
	 * @return 	void
	 * */
	toggleVisibility(ev?: MouseEvent): void;
	/**
	 * Handle the edit of the component name
	 */
	handleEdit(ev?: MouseEvent): void;
	handleEditKey(ev: KeyboardEvent): void;
	/**
	 * Handle with the end of editing of the component name
	 */
	handleEditEnd(ev?: KeyboardEvent): void;
	/**
	 * Get the input containing the name of the component
	 * @return {HTMLElement}
	 */
	getInputName(): HTMLElement;
	/**
	 * Update item opening
	 *
	 * @return void
	 * */
	updateOpening(): void;
	/**
	 * Toggle item opening
	 * @param {Object}	e
	 *
	 * @return void
	 * */
	toggleOpening(ev?: MouseEvent): void;
	/**
	 * Handle component selection
	 */
	handleSelect(event?: MouseEvent): void;
	/**
	 * Handle component selection
	 */
	handleHover(ev?: MouseEvent): void;
	handleHoverOut(ev?: MouseEvent): void;
	/**
	 * Delegate to sorter
	 * @param	Event
	 * */
	startSort(ev: MouseEvent): void;
	/**
	 * Update item on status change
	 * @param	Event
	 * */
	updateStatus(): void;
	getItemContainer(): JQuery<HTMLElement>;
	/**
	 * Update item aspect after children changes
	 *
	 * @return void
	 * */
	checkChildren(): void;
	getCaret(): JQuery<HTMLElement>;
	setRoot(cmp: Component | string): void;
	updateLayerable(): void;
	__clearItems(): void;
	remove(...args: [
	]): this;
	render(): this;
	__render(): void;
}
declare class ComponentDataResolverWatchers {
	private component;
	private propertyWatcher;
	private attributeWatcher;
	constructor(component: Component | undefined, options: ComponentResolverWatcherOptions);
	private onPropertyUpdate;
	private onAttributeUpdate;
	bindComponent(component: Component): void;
	updateCollectionStateMap(collectionsStateMap: DataCollectionStateMap): void;
	addProps(props: ObjectAny, options?: DynamicWatchersOptions): {
		[k: string]: any;
	};
	removeAttributes(attributes: string[]): void;
	private updateSymbolOverride;
	getDynamicPropsDefs(): ObjectAny;
	getDynamicAttributesDefs(): ObjectAny;
	getPropsDefsOrValues(props: ObjectAny): {
		[x: string]: any;
	};
	getAttributesDefsOrValues(attributes: ObjectAny): {
		[x: string]: any;
	};
	destroy(): void;
}
export interface IComponent extends ExtractMethods<Component> {
}
export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions {
}
export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions {
}
/**
 * The Component object represents a single node of our template structure, so when you update its properties the changes are
 * immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
 * the tree of nodes).
 * An example on how to update properties:
 * ```js
 * component.set({
 *  tagName: 'span',
 *  attributes: { ... },
 *  removable: false,
 * });
 * component.get('tagName');
 * // -> 'span'
 * ```
 *
 * [Component]: component.html
 *
 * @property {String} [type=''] Component type, eg. `text`, `image`, `video`, etc.
 * @property {String} [tagName='div'] HTML tag of the component, eg. `span`. Default: `div`
 * @property {Object} [attributes={}] Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}`
 * @property {String} [name=''] Name of the component. Will be used, for example, in Layers and badges
 * @property {Boolean} [removable=true] When `true` the component is removable from the canvas, default: `true`
 * @property {Boolean|String|Function} [draggable=true] Indicates if it's possible to drag the component inside others.
 *  You can also specify a query string to identify elements,
 *  eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements
 *  containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true`
 * @property {Boolean|String|Function} [droppable=true] Indicates if it's possible to drop other components inside. You can use
 * a query string as with `draggable`. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: `true`
 * @property {Boolean} [badgable=true] Set to false if you don't want to see the badge (with the name) over the component. Default: `true`
 * @property {Boolean|Array<String>} [stylable=true] True if it's possible to style the component.
 * You can also indicate an array of CSS properties which is possible to style, eg. `['color', 'width']`, all other properties
 * will be hidden from the style manager. Default: `true`
 * @property {Array<String>} [stylable-require=[]] Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
 * @property {Array<String>} [unstylable=[]] Indicate an array of style properties which should be hidden from the style manager. Default: `[]`
 * @property {Boolean} [highlightable=true] It can be highlighted with 'dotted' borders if true. Default: `true`
 * @property {Boolean} [copyable=true] True if it's possible to clone the component. Default: `true`
 * @property {Boolean} [resizable=false] Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/GrapesJS/grapesjs/blob/master/src/utils/Resizer.ts). Default: `false`
 * @property {Boolean} [editable=false] Allow to edit the content of the component (used on Text components). Default: `false`
 * @property {Boolean} [layerable=true] Set to `false` if you need to hide the component inside Layers. Default: `true`
 * @property {Boolean} [selectable=true] Allow component to be selected when clicked. Default: `true`
 * @property {Boolean} [hoverable=true] Shows a highlight outline when hovering on the element if `true`. Default: `true`
 * @property {Boolean} [locked] Disable the selection of the component and its children in the canvas. You can unlock a children by setting its locked property to `false`. Default: `undefined`
 * @property {Boolean} [void=false] This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
 * @property {Object} [style={}] Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }`
 * @property {String} [styles=''] Component related styles, eg. `.my-component-class { color: red }`
 * @property {String} [content=''] Content of the component (not escaped) which will be appended before children rendering. Default: `''`
 * @property {String} [icon=''] Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<i class="fa fa-square-o"></i>'. Default: `''`
 * @property {String|Function} [script=''] Component's javascript. More about it [here](/modules/Components-js.html). Default: `''`
 * @property {String|Function} [script-export=''] You can specify javascript available only in export functions (eg. when you get the HTML).
 * If this property is defined it will overwrite the `script` one (in export functions). Default: `''`
 * @property {Array<Object|String>} [traits=''] Component's traits. More about it [here](/modules/Traits.html). Default: `['id', 'title']`
 * @property {Array<String>} [propagate=[]] Indicates an array of properties which will be inhereted by all NEW appended children.
 *  For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }`
 *  and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]`
 * @property {Array<Object>} [toolbar=null] Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
 * Eg. `toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]`.
 * By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
 * @property {Collection<Component>} [components=null] Children components. Default: `null`
 * @property {Object} [delegate=null] Delegate commands to other components. Available commands `remove` | `move` | `copy` | `select`. eg. `{ remove: (cmp) => cmp.closestType('other-type') }`
 *
 * @module docsjs.Component
 */
export declare class Component extends StyleableModel<ComponentProperties> {
	/**
	 * @private
	 * @ts-ignore */
	get defaults(): ComponentDefinitionDefined;
	get tagName(): string;
	get classes(): Selectors;
	get traits(): Traits;
	get content(): string;
	get toolbar(): ToolbarButtonProps[];
	get resizable(): boolean | ResizerOptions;
	get delegate(): ComponentDelegateProps | undefined;
	get locked(): boolean | undefined;
	get frame(): Frame | undefined;
	get page(): Page | undefined;
	preInit(): void;
	/**
	 * Hook method, called once the model is created
	 */
	init(): void;
	/**
	 * Hook method, called when the model has been updated (eg. updated some model's property)
	 * @param {String} property Property name, if triggered after some property update
	 * @param {*} value Property value, if triggered after some property update
	 * @param {*} previous Property previous value, if triggered after some property update
	 */
	updated(property: string, value: any, previous: any): void;
	/**
	 * Hook method, called once the model has been removed
	 */
	removed(): void;
	em: EditorModel;
	opt: ComponentOptions;
	config: DomComponentsConfig;
	ccid: string;
	views: ComponentView[];
	view?: ComponentView;
	viewLayer?: ItemView;
	rule?: CssRule;
	prevColl?: Components;
	__hasUm?: boolean;
	__symbReady?: boolean;
	/**
	 * @private
	 * @ts-ignore */
	collection: Components;
	collectionStateListeners: string[];
	dataResolverWatchers: ComponentDataResolverWatchers;
	constructor(props: ComponentProperties | undefined, opt: ComponentOptions);
	set<A extends string>(keyOrAttributes: A | Partial<ComponentProperties>, valueOrOptions?: ComponentProperties[A] | ComponentSetOptions, optionsOrUndefined?: ComponentSetOptions): this;
	__postAdd(opts?: {
		recursive?: boolean;
	}): void;
	__postRemove(): void;
	__onChange(m: any, opts: any): void;
	__onStyleChange(newStyles: StyleProps): void;
	__changesUp(opts: any): void;
	__propSelfToParent(props: any): void;
	__propToParent(props: any): void;
	__emitUpdateTlb(): void;
	__getAllById(): {
		[id: string]: Component;
	};
	__upSymbProps(m: any, opts?: SymbolToUpOptions): void;
	__upSymbCls(m: any, c: any, opts?: {}): void;
	__upSymbComps(m: Component, c: Components, o: any): void;
	/**
	 * Check component's type
	 * @param  {string}  type Component type
	 * @return {Boolean}
	 * @example
	 * component.is('image')
	 * // -> false
	 */
	is(type: string): boolean;
	/**
	 * Return all the propeties
	 * @returns {Object}
	 */
	props(): Partial<ComponentProperties>;
	/**
	 * Get the index of the component in the parent collection.
	 * @return {Number}
	 */
	index(): number;
	/**
	 * Change the drag mode of the component.
	 * To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936
	 * @param {String} value Drag mode, options: `'absolute'` | `'translate'` | `''`
	 * @returns {this}
	 */
	setDragMode(value?: DragMode): this;
	/**
	 * Get the drag mode of the component.
	 * @returns {String} Drag mode value, options: `'absolute'` | `'translate'` | `''`
	 */
	getDragMode(): DragMode;
	/**
	 * Set symbol override.
	 * By setting override to `true`, none of its property changes will be propagated to relative symbols.
	 * By setting override to specific properties, changes of those properties will be skipped from propagation.
	 * @param {Boolean|String|Array<String>} value
	 * @example
	 * component.setSymbolOverride(['children', 'classes']);
	 */
	setSymbolOverride(value: boolean | string | string[], options?: DynamicWatchersOptions): void;
	/**
	 * Get symbol override value.
	 * @returns {Boolean|Array<String>}
	 */
	getSymbolOverride(): boolean | string[] | undefined;
	/**
	 * Find inner components by query string.
	 * **ATTENTION**: this method works only with already rendered component
	 * @param  {String} query Query string
	 * @return {Array} Array of components
	 * @example
	 * component.find('div > .class');
	 * // -> [Component, Component, ...]
	 */
	find(query: string): Component[];
	/**
	 * Find all inner components by component type.
	 * The advantage of this method over `find` is that you can use it
	 * also before rendering the component
	 * @param {String} type Component type
	 * @returns {Array<Component>}
	 * @example
	 * const allImages = component.findType('image');
	 * console.log(allImages[0]) // prints the first found component
	 */
	findType(type: string): Component[];
	/**
	 * Find the first inner component by component type.
	 * If no component is found, it returns `undefined`.
	 * @param {String} type Component type
	 * @returns {Component|undefined}
	 * @example
	 * const image = component.findFirstType('image');
	 * if (image) {
	 *  console.log(image);
	 * }
	 */
	findFirstType(type: string): Component | undefined;
	/**
	 * Find the closest parent component by query string.
	 * **ATTENTION**: this method works only with already rendered component
	 * @param  {string} query Query string
	 * @return {Component}
	 * @example
	 * component.closest('div.some-class');
	 * // -> Component
	 */
	closest(query: string): Component | undefined;
	/**
	 * Find the closest parent component by its type.
	 * The advantage of this method over `closest` is that you can use it
	 * also before rendering the component
	 * @param {String} type Component type
	 * @returns {Component} Found component, otherwise `undefined`
	 * @example
	 * const Section = component.closestType('section');
	 * console.log(Section);
	 */
	closestType(type: string): Component | undefined;
	/**
	 * The method returns a Boolean value indicating whether the passed
	 * component is a descendant of a given component
	 * @param {Component} component Component to check
	 * @returns {Boolean}
	 */
	contains(component: Component): boolean;
	/**
	 * Once the tag is updated I have to rerender the element
	 * @private
	 */
	tagUpdated(): void;
	/**
	 * Replace a component with another one
	 * @param {String|Component} el Component or HTML string
	 * @param {Object} [opts={}] Options for the append action
	 * @returns {Array<Component>} New replaced components
	 * @example
	 * const result = component.replaceWith('<div>Some new content</div>');
	 * // result -> [Component]
	 */
	replaceWith<C extends Component = Component>(el: ComponentAdd, opts?: AddOptions): C[];
	/**
	 * Emit changes for each updated attribute
	 * @private
	 */
	attrUpdated(m: any, v: any, opts?: SetAttrOptions): void;
	/**
	 * Update attributes of the component
	 * @param {Object} attrs Key value attributes
	 * @param {Object} options Options for the model update
	 * @return {this}
	 * @example
	 * component.setAttributes({ id: 'test', 'data-key': 'value' });
	 */
	setAttributes(attrs: ObjectAny, opts?: SetAttrOptions): this;
	/**
	 * Add attributes to the component
	 * @param {Object} attrs Key value attributes
	 * @param {Object} options Options for the model update
	 * @return {this}
	 * @example
	 * component.addAttributes({ 'data-key': 'value' });
	 */
	addAttributes(attrs: ObjectAny, opts?: SetAttrOptions): this;
	/**
	 * Remove attributes from the component
	 * @param {String|Array<String>} attrs Array of attributes to remove
	 * @param {Object} options Options for the model update
	 * @return {this}
	 * @example
	 * component.removeAttributes('some-attr');
	 * component.removeAttributes(['some-attr1', 'some-attr2']);
	 */
	removeAttributes(attrs?: string | string[], opts?: SetOptions): this;
	/**
	 * Get the style of the component
	 * @return {Object}
	 */
	getStyle(options?: any, optsAdd?: any): StyleProps;
	/**
	 * Set the style on the component
	 * @param {Object} prop Key value style object
	 * @return {Object}
	 * @example
	 * component.setStyle({ color: 'red' });
	 */
	setStyle(prop?: StyleProps, opts?: UpdateStyleOptions): StyleProps;
	/**
	 * Return all component's attributes
	 * @return {Object}
	 */
	getAttributes(opts?: {
		noClass?: boolean;
		noStyle?: boolean;
	}): {
		[x: string]: any;
	};
	/**
	 * Add classes
	 * @param {Array<String>|String} classes Array or string of classes
	 * @return {Array} Array of added selectors
	 * @example
	 * model.addClass('class1');
	 * model.addClass('class1 class2');
	 * model.addClass(['class1', 'class2']);
	 * // -> [SelectorObject, ...]
	 */
	addClass(classes: string | string[]): Selector;
	/**
	 * Set classes (resets current collection)
	 * @param {Array<String>|String} classes Array or string of classes
	 * @return {Array} Array of added selectors
	 * @example
	 * model.setClass('class1');
	 * model.setClass('class1 class2');
	 * model.setClass(['class1', 'class2']);
	 * // -> [SelectorObject, ...]
	 */
	setClass(classes: string | string[]): Selector;
	/**
	 * Remove classes
	 * @param {Array<String>|String} classes Array or string of classes
	 * @return {Array} Array of removed selectors
	 * @example
	 * model.removeClass('class1');
	 * model.removeClass('class1 class2');
	 * model.removeClass(['class1', 'class2']);
	 * // -> [SelectorObject, ...]
	 */
	removeClass(classes: string | string[]): Selector[];
	/**
	 * Returns component's classes as an array of strings
	 * @return {Array}
	 */
	getClasses(): any;
	initClasses(m?: any, c?: any, opts?: any): this;
	initComponents(): this;
	initTraits(changed?: any): this;
	initScriptProps(): void;
	__scriptPropsChange(m: any, v: any, opts?: any): void;
	/**
	 * Add new component children
	 * @param  {Component|String} components Component to add
	 * @param {Object} [opts={}] Options for the append action
	 * @return {Array} Array of appended components
	 * @example
	 * someComponent.get('components').length // -> 0
	 * const videoComponent = someComponent.append('<video></video><div></div>')[0];
	 * // This will add 2 components (`video` and `div`) to your `someComponent`
	 * someComponent.get('components').length // -> 2
	 * // You can pass components directly
	 * otherComponent.append(otherComponent2);
	 * otherComponent.append([otherComponent3, otherComponent4]);
	 * // append at specific index (eg. at the beginning)
	 * someComponent.append(otherComponent, { at: 0 });
	 */
	append<T extends Component = Component>(components: ComponentAdd, opts?: AddOptions): T[];
	/**
	 * Set new collection if `components` are provided, otherwise the
	 * current collection is returned
	 * @param  {Component|Component[]|String} [components] Component Definitions or HTML string
	 * @param {Object} [opts={}] Options, same as in `Component.append()`
	 * @returns {Collection|Array<[Component]>}
	 * @example
	 * // Set new collection
	 * component.components('<span></span><div></div>');
	 * // Get current collection
	 * const collection = component.components();
	 * console.log(collection.length);
	 * // -> 2
	 */
	components<T extends ComponentAdd | undefined>(components?: T, opts?: ResetComponentsOptions): undefined extends T ? Components : Component[];
	/**
	 * If exists, returns the child component at specific index.
	 * @param {Number} index Index of the component to return
	 * @returns {[Component]|null}
	 * @example
	 * // Return first child
	 * component.getChildAt(0);
	 * // Return second child
	 * component.getChildAt(1);
	 */
	getChildAt(index: number): Component;
	/**
	 * If exists, returns the last child component.
	 * @returns {[Component]|null}
	 * @example
	 * const lastChild = component.getLastChild();
	 */
	getLastChild(): Component;
	/**
	 * Remove all inner components
	 * * @return {this}
	 */
	empty(opts?: {}): this;
	/**
	 * Get the parent component, if exists
	 * @return {Component|null}
	 * @example
	 * component.parent();
	 * // -> Component
	 */
	parent(opts?: any): Component | undefined;
	/**
	 * Return all parents of the component.
	 * @returns {Array<Component>}
	 */
	parents(): Component[];
	/**
	 * Script updated
	 * @private
	 */
	scriptUpdated(): void;
	/**
	 * Init toolbar
	 * @private
	 */
	initToolbar(): void;
	__loadTraits(tr?: Traits | TraitProperties[], opts?: {}): this;
	/**
	 * Get traits.
	 * @returns {Array<Trait>}
	 * @example
	 * const traits = component.getTraits();
	 * console.log(traits);
	 * // [Trait, Trait, Trait, ...]
	 */
	getTraits(): Trait[];
	/**
	 * Replace current collection of traits with a new one.
	 * @param {Array<Object>} traits Array of trait definitions
	 * @returns {Array<Trait>}
	 * @example
	 * const traits = component.setTraits([{ type: 'checkbox', name: 'disabled'}, ...]);
	 * console.log(traits);
	 * // [Trait, ...]
	 */
	setTraits(traits: TraitProperties[]): Trait[];
	/**
	 * Get the trait by id/name.
	 * @param  {String} id The `id` or `name` of the trait
	 * @return {Trait|null} Trait getModelToStyle
	 * @example
	 * const traitTitle = component.getTrait('title');
	 * traitTitle && traitTitle.set('label', 'New label');
	 */
	getTrait(id: string): Trait;
	/**
	 * Update a trait.
	 * @param  {String} id The `id` or `name` of the trait
	 * @param  {Object} props Object with the props to update
	 * @return {this}
	 * @example
	 * component.updateTrait('title', {
	 *  type: 'select',
	 *  options: [ 'Option 1', 'Option 2' ],
	 * });
	 */
	updateTrait(id: string, props: Partial<TraitProperties>): this;
	/**
	 * Get the trait position index by id/name. Useful in case you want to
	 * replace some trait, at runtime, with something else.
	 * @param  {String} id The `id` or `name` of the trait
	 * @return {Number} Index position of the current trait
	 * @example
	 * const traitTitle = component.getTraitIndex('title');
	 * console.log(traitTitle); // 1
	 */
	getTraitIndex(id: string): number;
	/**
	 * Remove trait/s by id/s.
	 * @param  {String|Array<String>} id The `id`/`name` of the trait (or an array)
	 * @return {Array<Trait>} Array of removed traits
	 * @example
	 * component.removeTrait('title');
	 * component.removeTrait(['title', 'id']);
	 */
	removeTrait(id: string | string[]): Trait[];
	/**
	 * Add new trait/s.
	 * @param  {String|Object|Array<String|Object>} trait Trait to add (or an array of traits)
	 * @param  {Options} opts Options for the add
	 * @return {Array<Trait>} Array of added traits
	 * @example
	 * component.addTrait('title', { at: 1 }); // Add title trait (`at` option is the position index)
	 * component.addTrait({
	 *  type: 'checkbox',
	 *  name: 'disabled',
	 * });
	 * component.addTrait(['title', {...}, ...]);
	 */
	addTrait(trait: Parameters<Traits["add"]>[0], opts?: AddOptions): Trait[];
	/**
	 * Normalize input classes from array to array of objects
	 * @param {Array} arr
	 * @return {Array}
	 * @private
	 */
	normalizeClasses(arr: string[]): Selector[];
	/**
	 * Override original clone method
	 * @private
	 * @ts-ignore */
	clone(opt?: {
		symbol?: boolean;
		symbolInv?: boolean;
	}): this;
	/**
	 * Get the name of the component.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.noCustom] Avoid custom name assigned to the component.
	 * @returns {String}
	 * */
	getName(opts?: {
		noCustom?: boolean;
	}): any;
	/**
	 * Update component name.
	 * @param {String} name New name.
	 */
	setName(name?: string, opts?: SetOptions): void;
	/**
	 * Get the icon string
	 * @return {String}
	 */
	getIcon(): string;
	/**
	 * Return HTML string of the component
	 * @param {Object} [opts={}] Options
	 * @param {String} [opts.tag] Custom tagName
	 * @param {Object|Function} [opts.attributes=null] You can pass an object of custom attributes to replace with the current ones or you can even pass a function to generate attributes dynamically.
	 * @param {Boolean} [opts.withProps] Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML.
	 * @param {Boolean} [opts.altQuoteAttr] In case the attribute value contains a `"` char, instead of escaping it (`attr="value &quot;"`), the attribute will be quoted using single quotes (`attr='value "'`).
	 * @return {String} HTML string
	 * @example
	 * // Simple HTML return
	 * component.set({ tagName: 'span' });
	 * component.setAttributes({ title: 'Hello' });
	 * component.toHTML();
	 * // -> <span title="Hello"></span>
	 *
	 * // Custom attributes
	 * component.toHTML({ attributes: { 'data-test': 'Hello' } });
	 * // -> <span data-test="Hello"></span>
	 *
	 * // Custom dynamic attributes
	 * component.toHTML({
	 *  attributes(component, attributes) {
	 *    if (component.get('tagName') == 'span') {
	 *      attributes.title = 'Custom attribute';
	 *    }
	 *    return attributes;
	 *  },
	 * });
	 * // -> <span title="Custom attribute"></span>
	 */
	toHTML(opts?: ToHTMLOptions): string;
	/**
	 * Get inner HTML of the component
	 * @param {Object} [opts={}] Same options of `toHTML`
	 * @returns {String} HTML string
	 */
	getInnerHTML(opts?: ToHTMLOptions): string;
	__innerHTML(opts?: ToHTMLOptions): string;
	__attrToString(opts?: ToHTMLOptions): string;
	/**
	 * Returns object of attributes for HTML
	 * @return {Object}
	 * @private
	 */
	getAttrToHTML(opts?: ToHTMLOptions): {
		[x: string]: any;
	};
	/**
	 * Return a shallow copy of the model's attributes for JSON
	 * stringification.
	 * @return {Object}
	 * @private
	 */
	toJSON(opts?: ObjectAny): ComponentDefinition;
	/**
	 * Return an object containing only changed props
	 */
	getChangedProps(res: Partial<ComponentDefinition>): Partial<ComponentDefinition>;
	/**
	 * Return the component id
	 * @return {String}
	 */
	getId(): string;
	/**
	 * Set new id on the component
	 * @param {String} id
	 * @return {this}
	 */
	setId(id: string, opts?: SetOptions & {
		idUpdate?: boolean;
	}): this;
	/**
	 * Get the DOM element of the component.
	 * This works only if the component is already rendered
	 * @param {Frame} frame Specific frame from which taking the element
	 * @return {HTMLElement}
	 */
	getEl(frame?: Frame): HTMLElement | undefined;
	/**
	 * Get the View of the component.
	 * This works only if the component is already rendered
	 * @param {Frame} frame Get View of a specific frame
	 * @return {ComponentView}
	 */
	getView(frame?: Frame): ComponentView<Component> | undefined;
	getCurrentView(): ComponentView<Component> | undefined;
	__getScriptProps(): Partial<ComponentProperties>;
	/**
	 * Return script in string format, cleans 'function() {..' from scripts
	 * if it's a function
	 * @param {string|Function} script
	 * @return {string}
	 * @private
	 */
	getScriptString(script?: string | Function): string;
	emitUpdate(property?: string, ...args: any[]): void;
	emitWithEditor(event: string, data?: Record<string, any>, extra?: Record<string, any>): void;
	/**
	 * Execute callback function on itself and all inner components
	 * @param  {Function} clb Callback function, the model is passed as an argument
	 * @return {this}
	 * @example
	 * component.onAll(component => {
	 *  // do something with component
	 * })
	 */
	onAll(clb: (cmp: Component) => void): this;
	/**
	 * Execute a callback function on all inner child components.
	 * @param  {Function} clb Callback function, the child component is passed as an argument
	 * @example
	 * component.forEachChild(child => {
	 *  console.log(child)
	 * })
	 */
	forEachChild(clb: (child: Component) => void): void;
	/**
	 * Remove the component
	 * @return {this}
	 */
	remove(opts?: any): this;
	destroy(options?: ModelDestroyOptions | undefined): false | JQueryXHR;
	/**
	 * Move the component to another destination component
	 * @param {Component} component Destination component (so the current one will be appended as a child)
	 * @param {Object} opts Options for the append action
	 * @returns {this}
	 * @example
	 * // Move the selected component on top of the wrapper
	 * const dest = editor.getWrapper();
	 * editor.getSelected().move(dest, { at: 0 });
	 */
	move(component: Component, opts?: AddOptions): this;
	/**
	 * Check if the component is an instance of some component type.
	 * @param {String} type Component type
	 * @returns {Boolean}
	 * @example
	 * // Add a new component type by extending an existing one
	 * editor.Components.addType('text-ext', { extend: 'text' });
	 * // Append a new component somewhere
	 * const newTextExt = editor.getSelected().append({ type: 'text-ext' })[0];
	 * newTextExt.isInstanceOf('text-ext'); // true
	 * newTextExt.isInstanceOf('text'); // true
	 */
	isInstanceOf(type: string): boolean;
	/**
	 * Check if the component is a child of some other component (or component type)
	 * @param {[Component]|String} component Component parent to check. In case a string is passed,
	 *  the check will be performed on the component type.
	 * @returns {Boolean}
	 * @example
	 * const newTextComponent = editor.getSelected().append({
	 *  type: 'text',
	 *  components: 'My text <b>here</b>',
	 * })[0];
	 * const innerComponent = newTextComponent.find('b')[0];
	 * innerComponent.isChildOf(newTextComponent); // true
	 * innerComponent.isChildOf('text'); // true
	 */
	isChildOf(component: string | Component): boolean;
	/**
	 * Reset id of the component and any of its style rule
	 * @param {Object} [opts={}] Options
	 * @return {this}
	 * @private
	 */
	resetId(opts?: {}): this;
	_getStyleRule({ id }?: {
		id?: string;
	}): CssRule | undefined;
	_getStyleSelector(opts?: {
		id?: string;
	}): Selector | undefined;
	_idUpdated(m: any, v: any, opts?: {
		idUpdate?: boolean;
	}): this | undefined;
	static typeExtends: Set<string>;
	static getDefaults(): any;
	static isComponent(el: HTMLElement, opts?: any): ComponentDefinitionDefined | boolean | undefined;
	static ensureInList(model: Component): void;
	static createId(model: Component, opts?: any): string;
	static getNewId(list: ObjectAny): string;
	static getIncrementId(id: string, list: ObjectAny, opts?: {
		keepIds?: string[];
	}): string;
	static getList(model: Component): {
		[id: string]: Component;
	};
	static checkId(components: ComponentDefinitionDefined | ComponentDefinitionDefined[], styles?: CssRuleJSON[], list?: ObjectAny, opts?: {
		keepIds?: string[];
		idMap?: PrevToNewIdMap;
	}): void;
}
declare class Selectable extends Model {
}
declare class Selected extends Collection<Selectable> {
	getByComponent(component: Component): Selectable;
	addComponent(component: Component, opts: any): Selectable;
	getComponent(model: Selectable): Component;
	hasComponent(component: Component): boolean;
	lastComponent(): Component | undefined;
	allComponents(): Component[];
	removeComponent(component: Component | Component[], opts: any): Selectable;
}
declare class EditorView extends View<EditorModel> {
	constructor(model: EditorModel);
	render(): this;
	private sendTelemetryData;
}
export interface AssetManagerConfig {
	/**
	 * Default assets.
	 * @example
	 * [
	 *  'https://...image1.png',
	 *  'https://...image2.png',
	 *  {type: 'image', src: 'https://...image3.png', someOtherCustomProp: 1}
	 * ]
	 */
	assets?: (string | Record<string, any>)[];
	/**
	 * Content to add where there is no assets to show.
	 * @default ''
	 * @example 'No <b>assets</b> here, drag to upload'
	 */
	noAssets?: string;
	/**
	 * Style prefix
	 * @default 'am-'
	 */
	stylePrefix?: string;
	/**
	 * Upload endpoint, set `false` to disable upload.
	 * @example 'https://endpoint/upload/assets'
	 */
	upload?: false | string;
	/**
	 * The name used in POST to pass uploaded files.
	 * @default 'files'
	 */
	uploadName?: string;
	/**
	 * Custom headers to pass with the upload request.
	 * @default {}
	 */
	headers?: Record<string, any>;
	/**
	 * Custom parameters to pass with the upload request, eg. csrf token.
	 * @default {}
	 */
	params?: Record<string, any>;
	/**
	 * The credentials setting for the upload request, eg. 'include', 'omit'.
	 * @default 'include'
	 */
	credentials?: RequestCredentials;
	/**
	 * Allow uploading multiple files per request. If disabled filename will not have the 'multiUploadSuffix' appended.
	 * @default true
	 */
	multiUpload?: boolean;
	/**
	 * The suffix to append to 'uploadName' when 'multiUpload' is true.
	 * @default '[]'
	 */
	multiUploadSuffix?: string;
	/**
	 * If true, tries to add automatically uploaded assets. To make it work the server should respond with a JSON containing assets in a data key, eg:
	 * { data: [ 'https://.../image.png', {src: 'https://.../image2.png'} ]
	 * @default true
	 */
	autoAdd?: boolean;
	/**
	 * Customize the options passed to the default Fetch API.
	 * @example
	 * fetchOptions: (options) => ({ ...options, method: 'put' }),
	 */
	fetchOptions?: (options: RequestInit) => RequestInit;
	/**
	 * To upload your assets, the module uses Fetch API. With this option you can overwrite it with your own logic. The custom function should return a Promise.
	 * @example
	 * customFetch: (url, options) => axios(url, { data: options.body }),
	 */
	customFetch?: (url: string, options: Record<string, any>) => Promise<void>;
	/**
	 * Custom uploadFile function.
	 * Differently from the `customFetch` option, this gives a total control over the uploading process, but you also have to emit all `asset:upload:*` events b
	 * y yourself (if you need to use them somewhere).
	 * @example
	 * uploadFile: (ev) => {
	 *  const files = ev.dataTransfer ? ev.dataTransfer.files : ev.target.files;
	 *  // ...send somewhere
	 * }
	 */
	uploadFile?: (ev: DragEvent) => void;
	/**
	 * In the absence of 'uploadFile' or 'upload' assets will be embedded as Base64.
	 * @default true
	 */
	embedAsBase64?: boolean;
	/**
	 * Handle the image url submit from the built-in 'Add image' form.
	 * @example
	 * handleAdd: (textFromInput) => {
	 *   // some check...
	 *   editor.AssetManager.add(textFromInput);
	 * }
	 */
	handleAdd?: (value: string) => void;
	/**
	 * Method called before upload, on return false upload is canceled.
	 * @example
	 * beforeUpload: (files) => {
	 *  // logic...
	 *  const stopUpload = true;
	 *  if(stopUpload) return false;
	 * }
	 */
	beforeUpload?: (files: any) => void | false;
	/**
	 * Toggles visiblity of assets url input
	 * @default true
	 */
	showUrlInput?: boolean;
	/**
	 * Avoid rendering the default asset manager.
	 * @default false
	 */
	custom?: boolean | {
		open?: (props: any) => void;
		close?: (props: any) => void;
	};
	/**
	 * Enable an upload dropzone on the entire editor (not document) when dragging files over it.
	 * If active the dropzone disable/hide the upload dropzone in asset modal, otherwise you will get double drops (#507).
	 * @deprecated
	 */
	dropzone?: boolean;
	/**
	 * Open the asset manager once files are been dropped via the dropzone.
	 * @deprecated
	 */
	openAssetsOnDrop?: boolean;
	/**
	 * Any dropzone content to append inside dropzone element
	 * @deprecated
	 */
	dropzoneContent?: string;
}
export interface BlockManagerConfig {
	/**
	 * Specify the element to use as a container, string (query) or HTMLElement.
	 * With the empty value, nothing will be rendered.
	 * @default ''
	 */
	appendTo?: HTMLElement | string;
	/**
	 * Default blocks.
	 * @default []
	 */
	blocks?: BlockProperties[];
	/**
	 * Append blocks to canvas on click.
	 * With the `true` value, it will try to append the block to the selected component
	 * If there is no selected component, the block will be appened to the wrapper.
	 * You can also pass a function to this option, use it as a catch-all for all block
	 * clicks and implement a custom logic for each block.
	 * @default false
	 * @example
	 * // Example with a function
	 * appendOnClick: (block, editor) => {
	 *  if (block.get('id') === 'some-id')
	 *    editor.getSelected().append(block.get('content'))
	 *  else
	 *    editor.getWrapper().append(block.get('content'))
	 * }
	 */
	appendOnClick?: boolean | ((block: Block, editor: Editor, opts: {
		event: Event;
	}) => void);
	/**
	 * Avoid rendering the default block manager UI.
	 * More about it here: https://grapesjs.com/docs/modules/Blocks.html#customization
	 * @default false
	 */
	custom?: boolean;
}
export interface CodeManagerConfig {
	/**
	 * Style prefix.
	 * @default 'cm-'
	 */
	stylePrefix?: string;
	/**
	 * Pass default options to code viewer
	 * @default {}
	 */
	optsCodeViewer?: Record<string, any>;
}
/** @private */
export interface DeviceProperties {
	id?: string;
	/**
	 * Device name.
	 * @example 'Mobile'
	 */
	name: string;
	/**
	 * Width to set for the editor iframe.
	 * @example '900px'
	 */
	width: string | null;
	/**
	 * Height to set for the editor iframe.
	 * @example '600px'
	 */
	height?: string;
	/**
	 * Min height to set for the editor iframe.
	 * @example '600px'
	 */
	minHeight?: string;
	/**
	 * The width which will be used in media queries, if empty the `width` will be used.
	 * @example '900px'
	 */
	widthMedia?: string | null;
	/**
	 * Setup the order of media queries
	 * @example 1
	 */
	priority?: number | null;
}
/**
 * @typedef Device
 * @property {String} [name=''] Device type, eg. `Mobile`
 * @property {String} [width] Width to set for the editor iframe, eg. '900px'
 * @property {String} [height=''] Height to set for the editor iframe, eg. '600px'
 * @property {String} [widthMedia=''] The width which will be used in media queries, If empty the width will be used
 * @property {Number} [priority=null] Setup the order of media queries
 */
export declare class Device extends Model<DeviceProperties> {
	defaults(): {
		name: string;
		width: null;
		height: string;
		widthMedia: null;
		priority: null;
	};
	initialize(): void;
	checkUnit(prop: keyof DeviceProperties): void;
	getName(): string | undefined;
	getWidthMedia(): string;
}
export interface DeviceManagerConfig {
	/**
	 * The device `id` to select on start, if not indicated, the first available from `devices` will be used.
	 * @default ''
	 */
	default?: string;
	/**
	 * Default devices.
	 * @example
	 * devices: [{
	 *  id: 'desktop',
	 *  name: 'Desktop',
	 *  width: '',
	 * }, {
	 *  id: 'tablet',
	 *  name: 'Tablet',
	 *  width: '770px',
	 *  widthMedia: '992px',
	 * },
	 * ...
	 * ]
	 */
	devices?: DeviceProperties[];
}
export interface I18nConfig {
	/**
	 * Locale value.
	 * @default 'en'
	 */
	locale?: string;
	/**
	 * Fallback locale.
	 * @default 'en'
	 */
	localeFallback?: string;
	/**
	 * Detect locale by checking browser language.
	 * @default true
	 */
	detectLocale?: boolean;
	/**
	 * Show warnings when some of the i18n resources are missing.
	 * @default false
	 */
	debug?: boolean;
	/**
	 * Messages to translate.
	 * @default { en: {...} }
	 */
	messages?: Record<string, any>;
	/**
	 * Additional messages. This allows extending the default `messages` set directly from the configuration.
	 */
	messagesAdd?: Record<string, any>;
}
export interface ModalConfig {
	stylePrefix?: string;
	title?: string;
	content?: string;
	/**
	 * Close modal on interact with backdrop.
	 * @default true
	 */
	backdrop?: boolean;
	/**
	 * Avoid rendering the default modal.
	 * @default false
	 */
	custom?: boolean;
	/**
	 * Extend ModalView object (view/ModalView.js)
	 * @example
	 * extend: {
	 *   template() {
	 *     return '<div>...New modal template...</div>';
	 *   },
	 * },
	 */
	extend?: Record<string, any>;
}
export interface Keymap {
	id: string;
	keys: string;
	handler: string | CommandFunction;
}
export interface KeymapOptions {
	/**
	 * Force the handler to be executed.
	 */
	force?: boolean;
	/**
	 * Prevent default of the original triggered event.
	 */
	prevent?: boolean;
}
export interface KeymapsConfig {
	/**
	 * Default keymaps.
	 */
	defaults?: Record<string, Omit<Keymap, "id"> & {
		opts?: KeymapOptions;
	}>;
}
export declare class Panels extends ModuleCollection<Panel> {
	constructor(module: PanelManager, models: Panel[] | Array<Record<string, any>>);
}
declare class PanelsView extends ModuleView<Panels> {
	constructor(target: Panels);
	private onRemove;
	/**
	 * Add to collection
	 * @param Object Model
	 *
	 * @return Object
	 * @private
	 * */
	private addTo;
	/**
	 * Add new object to collection
	 * @param  Object  Model
	 * @param  Object   Fragment collection
	 * @param  integer  Index of append
	 *
	 * @return Object Object created
	 * @private
	 * */
	private addToCollection;
	render(): this;
}
declare class PanelManager extends Module<PanelsConfig> {
	panels: Panels;
	PanelsViewObj?: PanelsView;
	/**
	 * Initialize module. Automatically called with a new instance of the editor
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	/**
	 * Returns the collection of panels
	 * @return {Collection} Collection of panel
	 */
	getPanels(): Panels;
	/**
	 * Returns panels element
	 * @return {HTMLElement}
	 */
	getPanelsEl(): HTMLElement | undefined;
	/**
	 * Add new panel to the collection
	 * @param {Object|Panel} panel Object with right properties or an instance of Panel
	 * @return {Panel} Added panel. Useful in case passed argument was an Object
	 * @example
	 * const newPanel = panelManager.addPanel({
	 *  id: 'myNewPanel',
	 *  visible: true,
	 *  buttons: [...],
	 * });
	 */
	addPanel(panel: Panel | PanelProperties): Panel;
	/**
	 * Remove a panel from the collection
	 * @param {Panel|String} panel Panel instance or panel id
	 * @return {Panel} Removed panel
	 * @example
	 * const somePanel = panelManager.getPanel('somePanel');
	 * const removedPanel = panelManager.removePanel(somePanel);
	 *
	 * // or by id
	 * const removedPanel = panelManager.removePanel('myNewPanel');
	 *
	 */
	removePanel(panel: Panel | string): Panel;
	/**
	 * Get panel by ID
	 * @param  {string} id Id string
	 * @return {Panel|null}
	 * @example
	 * const myPanel = panelManager.getPanel('myPanel');
	 */
	getPanel(id: string): Panel | null;
	/**
	 * Add button to the panel
	 * @param {string} panelId Panel's ID
	 * @param {Object|Button} button Button object or instance of Button
	 * @return {Button|null} Added button. Useful in case passed button was an Object
	 * @example
	 * const newButton = panelManager.addButton('myNewPanel',{
	 *   id: 'myNewButton',
	 *   className: 'someClass',
	 *   command: 'someCommand',
	 *   attributes: { title: 'Some title'},
	 *   active: false,
	 * });
	 * // It's also possible to pass the command as an object
	 * // with .run and .stop methods
	 * ...
	 * command: {
	 *   run: function(editor) {
	 *     ...
	 *   },
	 *   stop: function(editor) {
	 *     ...
	 *   }
	 * },
	 * // Or simply like a function which will be evaluated as a single .run command
	 * ...
	 * command: function(editor) {
	 *   ...
	 * }
	 */
	addButton(panelId: string, button: any): Button | null;
	/**
	 * Remove button from the panel
	 * @param {String} panelId Panel's ID
	 * @param {String} buttonId Button's ID
	 * @return {Button|null} Removed button.
	 * @example
	 * const removedButton = panelManager.addButton('myNewPanel',{
	 *   id: 'myNewButton',
	 *   className: 'someClass',
	 *   command: 'someCommand',
	 *   attributes: { title: 'Some title'},
	 *   active: false,
	 * });
	 *
	 * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');
	 *
	 */
	removeButton(panelId: string, button: any): Button | null;
	/**
	 * Get button from the panel
	 * @param {string} panelId Panel's ID
	 * @param {string} id Button's ID
	 * @return {Button|null}
	 * @example
	 * const button = panelManager.getButton('myPanel', 'myButton');
	 */
	getButton(panelId: string, id: string): Button | null;
	/**
	 * Render panels and buttons
	 * @return {HTMLElement}
	 * @private
	 */
	render(): HTMLElement;
	/**
	 * Active activable buttons
	 * @private
	 */
	active(): void;
	/**
	 * Disable buttons flagged as disabled
	 * @private
	 */
	disableButtons(): void;
	destroy(): void;
}
export declare class Button extends ModuleModel<PanelManager> {
	defaults(): {
		id: string;
		label: string;
		tagName: string;
		className: string;
		command: string;
		context: string;
		buttons: never[];
		attributes: {};
		options: {};
		active: boolean;
		dragDrop: boolean;
		togglable: boolean;
		runDefaultCommand: boolean;
		stopDefaultCommand: boolean;
		disable: boolean;
	};
	get className(): string;
	get command(): string;
	get active(): boolean;
	set active(isActive: boolean);
	get togglable(): boolean;
	get runDefaultCommand(): boolean;
	get stopDefaultCommand(): boolean;
	get disable(): boolean;
	constructor(module: PanelManager, options: any);
}
export declare class Buttons extends ModuleCollection<Button> {
	constructor(module: PanelManager, models: Button[]);
	/**
	 * Deactivate all buttons, except one passed
	 * @param  {Object}  except  Model to ignore
	 * @param  {Boolean}  r     Recursive flag
	 *
	 * @return  void
	 * */
	deactivateAllExceptOne(except: Button, r: boolean): void;
	/**
	 * Deactivate all buttons
	 * @param  {String}  ctx Context string
	 *
	 * @return  void
	 * */
	deactivateAll(ctx?: string, sender?: any): void;
	/**
	 * Disables all buttons
	 * @param  {String}  ctx Context string
	 *
	 * @return  void
	 * */
	disableAllButtons(ctx?: string): void;
	/**
	 * Disables all buttons, except one passed
	 * @param  {Object}  except  Model to ignore
	 * @param  {Boolean}  r     Recursive flag
	 *
	 * @return  void
	 * */
	disableAllButtonsExceptOne(except: Button, r: boolean): void;
}
/** @private */
export interface PanelProperties {
	/**
	 * Panel id.
	 */
	id: string;
	/**
	 * Panel content.
	 */
	content?: string;
	/**
	 * Panel visibility.
	 * @default true
	 */
	visible?: boolean;
	/**
	 * Panel buttons.
	 * @default []
	 */
	buttons?: ObjectAny[];
	/**
	 * Panel attributes.
	 * @default {}
	 */
	attributes?: ObjectAny;
	/**
	 * Specify element query where to append the panel
	 */
	appendTo?: string;
	/**
	 * Resizable options.
	 */
	resizable?: boolean | ResizerOptions;
	el?: string;
	appendContent?: HTMLElement;
}
export interface PanelPropertiesDefined extends Omit<Required<PanelProperties>, "buttons"> {
	buttons: Buttons;
	[key: string]: unknown;
}
export declare class Panel extends ModuleModel<PanelManager, PanelPropertiesDefined> {
	defaults(): {
		id: string;
		content: string;
		visible: boolean;
		buttons: Buttons;
		attributes: {};
	};
	get buttons(): Buttons;
	private set buttons(value);
	view?: any;
	constructor(module: PanelManager, options: PanelProperties);
}
export interface ButtonProps {
	id?: string;
	active?: boolean;
	label?: string;
	togglable?: boolean;
	className?: string;
	command?: string | (() => any);
	context?: string;
	attributes?: Record<string, any>;
}
export interface PanelProps extends Omit<PanelProperties, "id" | "buttons"> {
	id?: string;
	buttons?: ButtonProps[];
}
export interface PanelsConfig {
	stylePrefix?: string;
	/**
	 * Default panels.
	 */
	defaults?: PanelProps[];
}
export interface RichTextEditorAction {
	name: string;
	icon: string | HTMLElement;
	event?: string;
	attributes?: Record<string, any>;
	result: (rte: RichTextEditor, action: RichTextEditorAction) => void;
	update?: (rte: RichTextEditor, action: RichTextEditorAction) => number;
	state?: (rte: RichTextEditor, doc: Document) => number;
	btn?: HTMLElement;
	currentState?: RichTextEditorActionState;
}
declare enum RichTextEditorActionState {
	ACTIVE = 1,
	INACTIVE = 0,
	DISABLED = -1
}
export interface RichTextEditorOptions {
	actions?: (RichTextEditorAction | string)[];
	classes?: Record<string, string>;
	actionbar?: HTMLElement;
	actionbarContainer?: HTMLElement;
	styleWithCSS?: boolean;
	module?: RichTextEditorModule;
}
export type EffectOptions = {
	event?: Event;
};
declare class RichTextEditor {
	em: EditorModel;
	settings: RichTextEditorOptions;
	classes: Record<string, string>;
	actionbar?: HTMLElement;
	actions: RichTextEditorAction[];
	el: HTMLElement;
	doc: Document;
	enabled?: boolean;
	getContent?: () => string;
	constructor(em: EditorModel, el: HTMLElement & {
		_rte?: RichTextEditor;
	}, settings?: RichTextEditorOptions);
	isCustom(module?: RichTextEditorModule): boolean;
	destroy(): void;
	setEl(el: HTMLElement): void;
	updateActiveActions(): void;
	enable(opts: EffectOptions): this;
	disable(): this;
	__toggleEffects(enable?: boolean, opts?: EffectOptions): this;
	__onKeydown(ev: KeyboardEvent): void;
	__onPaste(ev: ClipboardEvent): void;
	/**
	 * Sync actions with the current RTE
	 */
	syncActions(): void;
	/**
	 * Add new action to the actionbar
	 * @param {Object} action
	 * @param {Object} [opts={}]
	 */
	addAction(action: RichTextEditorAction, opts?: {
		sync?: boolean;
	}): void;
	/**
	 * Get the array of current actions
	 * @return {Array}
	 */
	getActions(): RichTextEditorAction[];
	/**
	 * Returns the Selection instance
	 * @return {Selection}
	 */
	selection(): Selection | null;
	/**
	 * Wrapper around [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) to allow
	 * you to perform operations like `insertText`
	 * @param  {string} command Command name
	 * @param  {any} [value=null Command's arguments
	 */
	exec(command: string, value?: string): void;
	/**
	 * Get the actionbar element
	 * @return {HTMLElement}
	 */
	actionbarEl(): HTMLElement | undefined;
	/**
	 * Set custom HTML to the selection, useful as the default 'insertHTML' command
	 * doesn't work in the same way on all browsers
	 * @param  {string} value HTML string
	 */
	insertHTML(value: string | HTMLElement, { select }?: {
		select?: boolean;
	}): void;
}
export type RichTextEditorEvent = "rte:enable" | "rte:disable" | "rte:custom";
export interface ModelRTE {
	currentView?: ComponentTextView;
}
export interface RteDisableResult {
	forceSync?: boolean;
}
declare class RichTextEditorModule extends Module<RichTextEditorConfig & {
	pStylePrefix?: string;
}> {
	pfx: string;
	toolbar: HTMLElement;
	globalRte?: RichTextEditor;
	actionbar?: HTMLElement;
	lastEl?: HTMLElement;
	actions?: (RichTextEditorAction | string)[];
	customRte?: CustomRTE;
	model: Model<ModelRTE>;
	__dbdTrgCustom: Debounced;
	events: {
		enable: string;
		disable: string;
		custom: string;
	};
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	constructor(em: EditorModel);
	onLoad(): void;
	__trgCustom(): void;
	destroy(): void;
	/**
	 * Post render callback
	 * @param  {View} ev
	 * @private
	 */
	postRender(ev: any): void;
	/**
	 * Init the built-in RTE
	 * @param  {HTMLElement} el
	 * @return {RichTextEditor}
	 * @private
	 */
	initRte(el: HTMLElement): RichTextEditor;
	/**
	 * Add a new action to the built-in RTE toolbar
	 * @param {string} name Action name
	 * @param {Object} action Action options
	 * @example
	 * rte.add('bold', {
	 *   icon: '<b>B</b>',
	 *   attributes: {title: 'Bold'},
	 *   result: rte => rte.exec('bold')
	 * });
	 * rte.add('link', {
	 *   icon: document.getElementById('t'),
	 *   attributes: { title: 'Link' },
	 *   // Example on how to wrap selected content
	 *   result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`)
	 * });
	 * // An example with fontSize
	 * rte.add('fontSize', {
	 *   icon: `<select class="gjs-field">
	 *         <option>1</option>
	 *         <option>4</option>
	 *         <option>7</option>
	 *       </select>`,
	 *     // Bind the 'result' on 'change' listener
	 *   event: 'change',
	 *   result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
	 *   // Callback on any input change (mousedown, keydown, etc..)
	 *   update: (rte, action) => {
	 *     const value = rte.doc.queryCommandValue(action.name);
	 *     if (value != 'false') { // value is a string
	 *       action.btn.firstChild.value = value;
	 *     }
	 *    }
	 *   })
	 * // An example with state
	 * const isValidAnchor = (rte) => {
	 *   // a utility function to help determine if the selected is a valid anchor node
	 *   const anchor = rte.selection().anchorNode;
	 *   const parentNode  = anchor && anchor.parentNode;
	 *   const nextSibling = anchor && anchor.nextSibling;
	 *   return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A')
	 * }
	 * rte.add('toggleAnchor', {
	 *   icon: `<span style="transform:rotate(45deg)">&supdsub;</span>`,
	 *   state: (rte, doc) => {
	 *    if (rte && rte.selection()) {
	 *      // `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active
	 *      return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;
	 *    } else {
	 *      return btnState.INACTIVE;
	 *    }
	 *   },
	 *   result: (rte, action) => {
	 *     if (isValidAnchor(rte)) {
	 *       rte.exec('unlink');
	 *     } else {
	 *       rte.insertHTML(`<a class="link" href="">${rte.selection()}</a>`);
	 *     }
	 *   }
	 * })
	 */
	add(name: string, action?: Partial<RichTextEditorAction>): void;
	/**
	 * Get the action by its name
	 * @param {string} name Action name
	 * @return {Object}
	 * @example
	 * const action = rte.get('bold');
	 * // {name: 'bold', ...}
	 */
	get(name: string): RichTextEditorAction | undefined;
	/**
	 * Get all actions
	 * @return {Array}
	 */
	getAll(): RichTextEditorAction[];
	/**
	 * Remove the action from the toolbar
	 * @param  {string} name
	 * @return {Object} Removed action
	 * @example
	 * const action = rte.remove('bold');
	 * // {name: 'bold', ...}
	 */
	remove(name: string): RichTextEditorAction | undefined;
	/**
	 * Run action command.
	 * @param action Action to run
	 * @example
	 * const action = rte.get('bold');
	 * rte.run(action) // or rte.run('bold')
	 */
	run(action: string | RichTextEditorAction): void;
	/**
	 * Get the toolbar element
	 * @return {HTMLElement}
	 */
	getToolbarEl(): HTMLElement;
	/**
	 * Triggered when the offset of the editor is changed
	 * @private
	 */
	updatePosition(): void;
	/**
	 * Enable rich text editor on the element
	 * @param {View} view Component view
	 * @param {Object} rte The instance of already defined RTE
	 * @private
	 * */
	enable(view: ComponentTextView, rte: RichTextEditor, opts: CustomRteOptions): Promise<any>;
	getContent(view: ComponentTextView, rte: RichTextEditor): Promise<string>;
	hideToolbar(): void;
	/**
	 * Unbind rich text editor from the element
	 * @param {View} view
	 * @param {Object} rte The instance of already defined RTE
	 * @private
	 * */
	disable(view: ComponentTextView, rte?: RichTextEditor, opts?: DisableOptions): Promise<RteDisableResult>;
}
declare class ComponentText extends Component {
	get defaults(): {
		type: string;
		droppable: boolean;
		editable: boolean;
		components?: ComponentDefinitionDefined[] | ComponentDefinitionDefined;
		traits?: (Partial<TraitProperties> | string)[];
	};
	constructor(props: ComponentProperties | undefined, opt: ComponentOptions);
	__checkInnerChilds(): void;
}
declare class ComponentTextView<TComp extends ComponentText = ComponentText> extends ComponentView<TComp> {
	rte?: RichTextEditorModule;
	rteEnabled?: boolean;
	activeRte?: RichTextEditor;
	lastContent?: string;
	events(): {
		dblclick: string;
		input: string;
	};
	initialize(props: any): void;
	updateContentText(m: any, v: any, opts?: {
		fromDisable?: boolean;
	}): void;
	canActivate(): {
		result: boolean;
		delegate: Component | undefined;
	};
	/**
	 * Enable element content editing
	 * @private
	 * */
	onActive(ev: MouseEvent): Promise<void>;
	onDisable(opts?: DisableOptions): void;
	/**
	 * Disable element content editing
	 * @private
	 * */
	disableEditing(opts?: DisableOptions & WithHTMLParserOptions): Promise<void>;
	/**
	 * get content from RTE
	 * @return string
	 */
	getContent(): Promise<string>;
	/**
	 * Merge content from the DOM to the model
	 */
	syncContent(opts?: ObjectAny): Promise<void>;
	insertComponent(content: ComponentDefinition, opts?: AddOptions & {
		useDomContent?: boolean;
	}): Component | Component[];
	/**
	 * Callback on input event
	 * @param  {Event} e
	 */
	onInput(): void;
	/**
	 * Isolate disable propagation method
	 * @param {Event}
	 * @private
	 * */
	disablePropagation(e: Event): void;
	/**
	 * Enable/Disable events
	 * @param {Boolean} enable
	 */
	toggleEvents(enable?: boolean): void;
}
export interface CustomRteOptions {
	event?: MouseEvent;
	view: ComponentTextView;
}
export interface CustomRTE<T = any> {
	/**
	 * If true, the returned HTML content will be parsed into Components, allowing
	 * the custom RTE to behave in the same way as the native one.
	 * If false, the HTML content will be used as it is in the canvas and the export code.
	 */
	parseContent?: boolean;
	/**
	 * Create or enable the custom RTE.
	 */
	enable: (el: HTMLElement, rte: T | undefined, opts: CustomRteOptions) => T | Promise<T>;
	/**
	 * Disable the custom RTE.
	 */
	disable: (el: HTMLElement, rte: T, opts: CustomRteOptions) => any | Promise<any>;
	/**
	 * Get HTML content from the custom RTE.
	 * If not specified, it will use the innerHTML of the element (passed also as `content` in options).
	 */
	getContent?: (el: HTMLElement, rte: T | undefined, opts: CustomRteOptions) => string | Promise<string>;
	/**
	 * Destroy the custom RTE.
	 * Will be triggered on editor destroy.
	 */
	destroy?: () => void;
	[key: string]: unknown;
}
export interface RichTextEditorConfig {
	/**
	 * Class name prefix for styles
	 * @default 'rte-'
	 */
	stylePrefix?: string;
	/**
	 * If true, moves the toolbar below the element when the top canvas edge is reached.
	 * @default true
	 */
	adjustToolbar?: boolean;
	/**
	 * Default RTE actions.
	 * @default ['bold', 'italic', 'underline', 'strikethrough', 'link', 'wrap']
	 */
	actions?: string[];
	/**
	 * Custom on paste logic for the built-in RTE.
	 * @example
	 * onPaste: ({ ev, rte }) => {
	 *  ev.preventDefault();
	 *  const { clipboardData } = ev;
	 *  const text = clipboardData.getData('text');
	 *  rte.exec('insertHTML', `<b>[ ${text} ]</b>`);
	 * }
	 */
	onPaste?: (data: {
		ev: ClipboardEvent;
		editor: Editor;
		rte: RichTextEditor;
	}) => void;
	/**
	 * Custom on keydown logic for the built-in RTE.
	 * @example
	 * onKeydown: ({ ev, rte }) => {
	 *  if (ev.key === 'Enter') {
	 *    ev.preventDefault();
	 *    rte.exec('insertHTML', `<br>-- custom line break --<br>`);
	 *  }
	 * }
	 */
	onKeydown?: (data: {
		ev: KeyboardEvent;
		editor: Editor;
		rte: RichTextEditor;
	}) => void;
	/**
	 * Avoid rendering the default RTE UI.
	 * @default false
	 */
	custom?: boolean;
}
export interface SelectorManagerConfig {
	/**
	 * Style prefix.
	 * @default 'clm-'
	 */
	stylePrefix?: string;
	/**
	 * Specify the element to use as a container, string (query) or HTMLElement.
	 * With the empty value, nothing will be rendered.
	 * @default ''
	 */
	appendTo?: string | HTMLElement;
	/**
	 * Default selectors.
	 * @default []
	 */
	selectors?: any[];
	/**
	 * Default states.
	 * @default [{ name: 'hover' }, { name: 'active' }, { name: 'nth-of-type(2n)' }]
	 */
	states?: any[];
	/**
	 * Custom selector name escaping strategy.
	 * @example
	 * escapeName: name => name.replace(' ', '_'),
	 */
	escapeName?: (name: string) => string;
	/**
	 * Custom selected name strategy (the string you see after 'Selected').
	 * @example
	 * selectedName: ({ result, state, target }) => `${result} - ID: ${target.getId()}`,
	 */
	selectedName?: (props: {
		result: string;
		state: any;
		target: any;
	}) => string;
	/**
	 * Icon used to add new selector
	 */
	iconAdd?: string;
	/**
	 * Icon used to sync styles.
	 */
	iconSync?: string;
	/**
	 * Icon to show when the selector is enabled.
	 */
	iconTagOn?: string;
	/**
	 * Icon to show when the selector is disabled.
	 */
	iconTagOff?: string;
	/**
	 * Icon used to remove the selector.
	 */
	iconTagRemove?: string;
	/**
	 * Custom render function for the Selector Manager.
	 * @example
	 * render: ({ el, labelHead, labelStates, labelInfo, }) => {
	 *  // You can use the default `el` to extend/edit the current
	 *  // DOM element of the Selector Manager
	 *  const someEl = document.createElement('div');
	 *  // ...
	 *  el.appendChild(someEl);
	 *  // no need to return anything from the function
	 *
	 *  // Create and return a new DOM element
	 *  const newEl = document.createElement('div');
	 *  // ...
	 *  return newEl;
	 *
	 *  // Return an HTML string for a completely different layout.
	 *  // Use `data-*` attributes to make the module recognize some elements:
	 *  // `data-states` - Where to append state `<option>` elements (or just write yours)
	 *  // `data-selectors` - Where to append selectors
	 *  // `data-input` - Input element which is used to add new selectors
	 *  // `data-add` - Element which triggers the add of a new selector on click
	 *  // `data-sync-style` - Element which triggers the sync of styles (visible with `componentFirst` enabled)
	 *  // `data-selected` - Where to print selected selectors
	 *  return `
	 *    <div class="my-sm-header">
	 *     <div>${labelHead}</div>
	 *     <div>
	 *       <select data-states>
	 *         <option value="">${labelStates}</option>
	 *       </select>
	 *     </div>
	 *    </div>
	 *    <div class="my-sm-body">
	 *      <div data-selectors></div>
	 *      <input data-input/>
	 *      <span data-add>Add</span>
	 *      <span data-sync-style>Sync</span>
	 *    </div>
	 *    <div class="my-sm-info">
	 *      <div>${labelInfo}</div>
	 *      <div data-selected></div>
	 *    </div>
	 * `;
	 * }
	 */
	render?: (props: any) => string;
	/**
	 * When you select a component in the canvas the selected Model (Component or CSS Rule)
	 * is passed to the StyleManager which will be then able to be styled, these are the cases:
	 * - Selected component doesn't have any classes: Component will be passed
	 * - Selected component has at least one class: The CSS Rule will be passed
	 *
	 * With this option enabled, also in the second case, the Component will be passed.
	 * This method allows to avoid styling classes directly and make, for example, some
	 * unintended changes below the visible canvas area (when components share same classes).
	 * @default false
	 */
	componentFirst?: boolean;
	/**
	 * Avoid rendering the default Selector Manager UI.
	 * @default false
	 */
	custom?: boolean;
}
export interface StorageOptions {
	[key: string]: any;
}
export interface ProjectData {
	[key: string]: any;
}
export interface IStorage<T extends StorageOptions = {}> {
	load: (options: T) => Promise<ProjectData>;
	store: (data: ProjectData, options: T) => Promise<any>;
	[key: string]: any;
}
export interface LocalStorageConfig {
	/**
	 * Local key identifier of the project.
	 * @default 'gjsProject'
	 */
	key?: string;
	/**
	 * If enabled, checks if browser supports LocalStorage.
	 * @default true
	 */
	checkLocal?: boolean;
}
export interface RemoteStorageConfig {
	/**
	 * Custom headers.
	 * @default {}
	 */
	headers?: ObjectAny;
	/**
	 * Endpoint URL where to store data project.
	 */
	urlStore?: string;
	/**
	 * Endpoint URL where to load data project.
	 */
	urlLoad?: string;
	/**
	 * Use JSON contentType.
	 * @default true
	 */
	contentTypeJson?: boolean;
	/**
	 * Credentials option for the fetch API.
	 * @default 'include'
	 */
	credentials?: RequestCredentials;
	/**
	 * Pass custom options to fetch API (remote storage)
	 * You can pass a simple object: { someOption: 'someValue' }
	 * or a function which returns and object to add:
	 * @example
	 * fetchOptions: currentOpts => {
	 *  return currentOpts.method === 'POST' ?  { method: 'PATCH' } : {};
	 * },
	 */
	fetchOptions?: string | ((opts: RequestInit) => RequestInit);
	/**
	 * The remote storage sends the project data as a body of the request.
	 * You can use this method to update the body before the store call in order to align
	 * with your API requirements.
	 * @default data => data
	 */
	onStore?: (data: ProjectData, editor: Editor) => ProjectData;
	/**
	 * The remote storage loads the project data directly from the request response.
	 * You can use this method to properly extract the project data from the response.
	 * @default data => data
	 */
	onLoad?: (data: ProjectData, editor: Editor) => ProjectData;
}
export interface StorageManagerConfig {
	/**
	 * Prefix identifier that will be used inside storing and loading.
	 * @default 'gjs-'
	 * @deprecated
	 */
	id?: string;
	/**
	 * Default storage type.
	 * Available by default: 'local' | 'remote'
	 * @default 'local'
	 */
	type?: LiteralUnion<"local" | "remote", string>;
	/**
	 * Enable/disable autosaving.
	 * @default true
	 */
	autosave?: boolean;
	/**
	 * Enable/disable autoload of data on editor init.
	 * @default true
	 */
	autoload?: boolean;
	/**
	 * If autosave enabled, indicates how many steps (general changes to structure)
	 * need to be done before save. Useful with remoteStorage to reduce remote calls
	 * @default 1
	 */
	stepsBeforeSave?: number;
	/**
	 * In case the `remote` storage is selected, and this options is enabled, the project
	 * will be stored on the `local` storage in case the remote one fails.
	 * The local data are cleared on every successful remote save. When the remote storage
	 * fails (eg. network issue) and the editor is reloaded, a dialog with the possibility to
	 * recovery previous data will be shown.
	 * @default false
	 * @example
	 * // Enable recovery with default confirm dialog
	 * recovery: true,
	 * // Enable recovery with a custom dialog
	 * recovery: (accept, cancel, editor) => {
	 *   confirm('Recover data?') ? accept() : cancel();
	 * },
	 */
	recovery?: boolean | ((accept: Function, cancel: Function, editor: Editor) => void);
	/**
	 * Callback triggered before the store call (can be asynchronous).
	 * This can be used to enrich the project data to store.
	 * @default data => data
	 */
	onStore?: (data: ProjectData, editor: Editor) => ProjectData;
	/**
	 * Callback triggered after the load call (can be asynchronous).
	 * @default data => data
	 */
	onLoad?: (data: ProjectData, editor: Editor) => ProjectData;
	/**
	 * Default storage options.
	 */
	options?: {
		local?: LocalStorageConfig;
		remote?: RemoteStorageConfig;
		[key: string]: any;
	};
}
export interface UndoManagerConfig {
	/**
	 * Maximum number of undo items.
	 * @default 500
	 */
	maximumStackLength?: number;
	/**
	 * Track component selection.
	 * @default true
	 */
	trackSelection?: boolean;
}
export type PluginOptions = Record<string, any>;
export type Plugin<T extends PluginOptions = {}> = (editor: Editor, config: T) => void;
declare class PluginManager {
	plugins: Record<string, Plugin>;
	/**
	 * Add new plugin. Plugins could not be overwritten
	 * @param {string} id Plugin ID
	 * @param {Function} plugin Function which contains all plugin logic
	 * @return {Function} The plugin function
	 * @deprecated Don't use named plugins, create plugins as simple functions. More about [Plugins](https://grapesjs.com/docs/modules/Plugins.html)
	 * @example
	 * PluginManager.add('some-plugin', function(editor) {
	 *   editor.Commands.add('new-command', {
	 *     run:  function(editor, senderBtn){
	 *       console.log('Executed new-command');
	 *     }
	 *   })
	 * });
	 */
	add<T extends PluginOptions>(id: string, plugin: Plugin<T>): Plugin<T>;
	/**
	 * Returns plugin by ID
	 * @param  {string} id Plugin ID
	 * @return {Function|undefined} Plugin
	 * @example
	 * var plugin = PluginManager.get('some-plugin');
	 * plugin(editor);
	 */
	get<T extends PluginOptions>(id: string): Plugin<T> | undefined;
	/**
	 * Returns object with all plugins
	 */
	getAll(): Record<string, Plugin<{}>>;
}
export interface CommandConfigDefaultOptions {
	run?: (options: CommandOptions) => CommandOptions;
	stop?: (options: CommandOptions) => CommandOptions;
}
export interface CommandsConfig {
	/**
	 * Style prefix
	 * @default 'com-'
	 */
	stylePrefix?: string;
	/**
	 * Default commands
	 * @default {}
	 */
	defaults?: Record<string, CommandObject>;
	/**
	 * If true, stateful commands (with `run` and `stop` methods) can't be executed multiple times.
	 * If the command is already active, running it again will not execute the `run` method.
	 * @default true
	 */
	strict?: boolean;
	/**
	 * Default options for commands
	 * These options will be merged with the options passed when the command is run.
	 * This allows you to define common behavior for commands in one place.
	 * @default {}
	 * @example
	 * defaultOptions: {
	 *  'core:component-drag': {
	 *    run: (options: Record<string, unknown>) => ({
	 *      ...options,
	 *      skipGuidesRender: true,
	 *      addStyle({ component, styles, partial }) {
	 *        component.addStyle(styles, { partial });
	 *      },
	 *     }),
	 *    stop: (options: Record<string, unknown>) => ({
	 *      ...options,
	 * *     skipGuidesRender: true,
	 *      addStyle({ component, styles, partial }) {
	 *        component.addStyle(styles, { partial });
	 *      },
	 *    }),
	 *  }
	 * }
	 */
	defaultOptions?: Record<string, CommandConfigDefaultOptions>;
}
declare class Input extends View {
	ppfx: string;
	em: EditorModel;
	opts: any;
	inputEl?: any;
	template(): string;
	inputClass(): string;
	holderClass(): string;
	constructor(opts?: any);
	/**
	 * Fired when the element of the property is updated
	 */
	elementUpdated(): void;
	/**
	 * Set value to the input element
	 * @param {string} value
	 */
	setValue(value: string, opts?: any): void;
	/**
	 * Updates the view when the model is changed
	 * */
	handleModelChange(model: any, value: string, opts: any): void;
	/**
	 * Handled when the view is changed
	 */
	handleChange(e: Event): void;
	__onInputChange(value: string): void;
	/**
	 * Get the input element
	 * @return {HTMLElement}
	 */
	getInputEl(): any;
	render(): this;
}
declare class InputNumber extends Input {
	doc: Document;
	unitEl?: any;
	moved?: boolean;
	prValue?: number;
	current?: {
		y: number;
		val: string;
	};
	template(): string;
	inputClass(): any;
	constructor(opts?: {});
	/**
	 * Set value to the model
	 * @param {string} value
	 * @param {Object} opts
	 */
	setValue(value: string, opts?: any): void;
	/**
	 * Handled when the view is changed
	 */
	handleChange(e: Event): void;
	/**
	 * Handled when the view is changed
	 */
	handleUnitChange(e: Event): void;
	/**
	 * Handled when user uses keyboard
	 */
	handleKeyDown(e: KeyboardEvent): void;
	/**
	 * Fired when the element of the property is updated
	 */
	elementUpdated(): void;
	/**
	 * Updates the view when the model is changed
	 * */
	handleModelChange(): void;
	/**
	 * Get the unit element
	 * @return {HTMLElement}
	 */
	getUnitEl(): any;
	/**
	 * Invoked when the up arrow is clicked
	 * */
	upArrowClick(): void;
	/**
	 * Invoked when the down arrow is clicked
	 * */
	downArrowClick(): void;
	/**
	 * Change easily integer input value with click&drag method
	 * @param Event
	 *
	 * @return void
	 * */
	downIncrement(e: MouseEvent): void;
	/** While the increment is clicked, moving the mouse will update input value
	 * @param Object
	 *
	 * @return bool
	 * */
	moveIncrement(ev: MouseEvent): boolean;
	/**
	 * Stop moveIncrement method
	 * */
	upIncrement(): void;
	normalizeValue(value: any, defValue?: number): any;
	/**
	 * Validate input value
	 * @param {String} value Raw value
	 * @param {Object} opts Options
	 * @return {Object} Validated string
	 */
	validateInputValue(value?: any, opts?: any): {
		force: number;
		value: any;
		unit: any;
	};
	render(): this;
}
/** @private */
export interface PropertyNumberProps extends PropertyProps {
	/**
	 * Array of units, eg. `['px', '%']`
	 */
	units?: string[];
	/**
	 * Unit defualt value.
	 */
	unit?: string;
	/**
	 * Minimum value.
	 */
	min?: number;
	/**
	 * Maximum value.
	 */
	max?: number;
	/**
	 * Step value.
	 * @default 1
	 */
	step?: number;
}
/**
 * @typedef PropertyNumber
 * @property {Array<String>} units Array of units, eg. `['px', '%']`
 * @property {Number} min Minimum value.
 * @property {Number} max Maximum value.
 * @property {Number} step Step value.
 *
 */
export declare class PropertyNumber extends Property<PropertyNumberProps> {
	input?: InputNumber;
	defaults(): any;
	/**
	 * Get property units.
	 * @returns {Array<String>}
	 */
	getUnits(): string[];
	/**
	 * Get property unit value.
	 * @returns {String}
	 */
	getUnit(): string;
	/**
	 * Get min value.
	 * @returns {Number}
	 */
	getMin(): number;
	/**
	 * Get max value.
	 * @returns {Number}
	 */
	getMax(): number;
	/**
	 * Get step value.
	 * @returns {Number}
	 */
	getStep(): number;
	/**
	 * Update property unit value.
	 * The change is also propagated to the selected targets.
	 * @param {String} unit New unit value
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.noTarget=false] If `true` the change won't be propagated to selected targets.
	 * @returns {String}
	 */
	upUnit(unit: string, opts?: {
		noTarget?: boolean;
	}): this;
	initialize(props?: {}, opts?: {}): void;
	__getClearProps(): {
		unit: string;
	};
	parseValue(val: any, opts?: {}): Partial<PropertyNumberProps>;
	getFullValue(): string;
}
export type SelectOption = {
	id: string;
	value?: string;
	label?: string;
	name?: string;
	className?: string;
	title?: string;
	style?: string;
	propValue?: ObjectAny;
};
/** @private */
export interface PropertySelectProps extends PropertyProps {
	options?: SelectOption[];
	list?: SelectOption[];
}
/**
 * @typedef PropertySelect
 * @property {Array<Object>} options Array of option definitions.
 * \n
 * ```js
 * options: [
 *  { id: '100', label: 'Set 100' },
 *  { id: '200', label: 'Set 200' },
 * ]
 * ```
 */
export declare class PropertySelect extends Property<PropertySelectProps> {
	defaults(): any;
	/**
	 * Get available options.
	 * @returns {Array<Object>} Array of options
	 */
	getOptions(): SelectOption[];
	/**
	 * Get current selected option or by id.
	 * @param {String} [id] Option id.
	 * @returns {Object | null}
	 */
	getOption(id?: string): SelectOption;
	/**
	 * Update options.
	 * @param {Array<Object>} value New array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]`
	 */
	setOptions(value?: SelectOption[]): this;
	/**
	 * Add new option.
	 * @param {Object} value Option object, eg. `{ id: 'val-1', label: 'Value 1' }`
	 */
	addOption(value: SelectOption): this;
	/**
	 * Get the option id from the option object.
	 * @param {Object} option Option object
	 * @returns {String} Option id
	 */
	getOptionId(option: SelectOption): string;
	/**
	 * Get option label.
	 * @param {String|Object} id Option id or the option object
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.locale=true] Use the locale string from i18n module
	 * @returns {String} Option label
	 */
	getOptionLabel(id: string | SelectOption, opts?: {
		locale?: boolean;
		property?: string;
	}): string;
	initialize(...args: any): void;
	__onOptionChange(): void;
}
export type PropValues = Record<string, any>;
export type OptionByName = {
	byName?: boolean;
};
export type FromStyle = (style: StyleProps, data: FromStyleData) => PropValues;
export type FromStyleData = {
	property: Property;
	name: string;
	separator: RegExp;
};
export type ToStyle = (values: PropValues, data: ToStyleData) => StyleProps;
export type ToStyleData = {
	join: string;
	name: string;
	property: Property;
};
/** @private */
export interface PropertyCompositeProps extends PropertyProps {
	detached?: boolean;
	/**
	 * Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
	 */
	properties: (PropertyProps | PropertyNumberProps | PropertySelectProps)[];
	/**
	 * Value used to split property values, default `" "`.
	 */
	separator?: string;
	/**
	 * Value used to join property values, default `" "`.
	 */
	join?: string;
	/**
	 * Custom logic for getting property values from the target style object.
	 */
	fromStyle?: FromStyle;
	/**
	 * Custom logic for creating the CSS style object to apply on selected targets.
	 */
	toStyle?: ToStyle;
}
/**
 *
 * [Property]: property.html
 *
 *
 * @typedef PropertyComposite
 * @property {Array<Object>} properties Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
 * @property {Boolean} [detached=false] Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`)
 * @property {String|RegExp} [separator=' '] Value used to split property values, default `" "`.
 * @property {String} [join=' '] Value used to join property values, default `" "`.
 * @property {Function} [fromStyle] Custom logic for getting property values from the target style object.
 * \n
 * ```js
 *  fromStyle: (style) => {
 *    const margins = parseMarginShorthand(style.margin);
 *    return {
 *      'margin-top': margins.top,
 *      // ...
 *    };
 *  }
 * ```
 * @property {Function} [toStyle] Custom logic for creating the CSS style object to apply on selected targets.
 * \n
 * ```js
 *  toStyle: (values) => {
 *    const top = values['margin-top'] || 0;
 *    const right = values['margin-right'] || 0;
 *    // ...
 *    return {
 *      margin: `${top} ${right} ...`,
 *    };
 *  }
 * ```
 */
export declare class PropertyComposite<T extends Record<string, any> = PropertyCompositeProps> extends Property<T> {
	defaults(): any;
	initialize(props?: {}, opts?: {}): void;
	get properties(): Property[];
	/**
	 * Get properties.
	 * @returns {Array<[Property]>}
	 */
	getProperties(): Property[];
	/**
	 * Get property by id.
	 * @param  {String} id Property id.
	 * @returns {[Property]|null}
	 */
	getProperty(id: string): Property | undefined;
	/**
	 * Get property at index.
	 * @param  {Number} index
	 * @returns {[Property]|null}
	 */
	getPropertyAt(index: number): any;
	/**
	 * Check if the property is detached.
	 * @returns {Boolean}
	 */
	isDetached(): boolean;
	/**
	 * Get current values of properties.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.byName=false] Use property names as a key instead of the id.
	 * @returns {Object}
	 * @example
	 * // In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc.
	 * console.log(property.getValues());
	 * // { 'margin-top': '10px', 'margin-right': '20px', ... };
	 */
	getValues({ byName }?: {
		byName?: boolean;
	}): Record<string, any>;
	/**
	 * Get property separator.
	 * @returns {RegExp}
	 */
	getSeparator(): RegExp;
	/**
	 * Get the join value.
	 * @returns {String}
	 */
	getJoin(): (T["join"] & string) | NonNullable<T["separator"]>;
	/**
	 * Get style object from current properties
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.camelCase] Return property names in camelCase.
	 * @returns {Object} Style object
	 * @private
	 */
	getStyleFromProps(opts?: OptionsStyle): StyleProps;
	getSplitSeparator(): RegExp;
	__upProperties(p: PropertyComposite, opts?: any): void;
	__upTargetsStyleProps(opts?: {}, prop?: Property): void;
	_up(props: Partial<T>, opts?: OptionsUpdate): this;
	getStyle(opts?: {
		camelCase?: boolean;
	}): StyleProps;
	__getFullValue(opts?: any): string;
	__getJoin(): (T["join"] & string) | NonNullable<T["separator"]>;
	__styleHasProps(style?: StyleProps): boolean;
	__splitValue(value: string | string[], sep: string | RegExp): string[];
	__splitStyleName(style: StyleProps, name: string, sep: string | RegExp): string[];
	__getSplitValue(value?: string | string[], { byName }?: OptionByName): StyleProps;
	__getPropsFromStyle(style?: StyleProps, opts?: OptionByName): any;
	__setProperties(values?: Record<string, any>, opts?: OptionsUpdate): void;
	clear(): this;
	hasValue(opts?: Parameters<Property["hasValue"]>[0]): boolean;
	getFullValue(): string;
	__canClearProp(prop: Property): boolean;
}
/** @private */
export interface PropertyProps {
	name?: string;
	label?: string;
	id?: string;
	property?: string;
	type?: string;
	defaults?: string;
	default?: string;
	info?: string;
	value?: any;
	icon?: string;
	functionName?: string;
	status?: string;
	visible?: boolean;
	fixedValues?: string[];
	className?: string;
	extend?: string;
	onChange?: (data: {
		property: Property;
		from: PartialPropertyProps;
		to: PartialPropertyProps;
		value: any;
		opts: any;
	}) => any;
	/**
	 * If true, the property will be forced to be full width
	 */
	full?: boolean;
	/**
	 * If true to the value will be added '!important'
	 */
	important?: boolean;
	/**
	 * If true, will be hidden by default and will show up only for targets
	 * which require this property (via `stylable-require`)
	 * Use case:
	 * you can add all SVG CSS properties with toRequire as true
	 * and then require them on SVG Components
	 */
	toRequire?: boolean;
	/**
	 * Specifies dependency on other properties of the selected object.
	 * Property is shown only when all conditions are matched.
	 *
	 * example: { display: ['flex', 'block'], position: ['absolute'] };
	 * in this case the property is only shown when display is
	 * of value 'flex' or 'block' AND position is 'absolute'
	 */
	requires?: Record<string, any>;
	/**
	 * Specifies dependency on properties of the parent of the selected object.
	 * Property is shown only when all conditions are matched.
	 */
	requiresParent?: any;
	parentTarget?: any;
	__p?: any;
}
export type OptionsUpdate = {
	partial?: boolean;
	noTarget?: boolean;
	__up?: boolean;
	__clear?: boolean;
};
export type OptionsStyle = {
	camelCase?: boolean;
};
export type PartialPropertyProps = Partial<PropertyProps>;
/**
 * @typedef Property
 * @property {String} id Property id, eg. `my-property-id`.
 * @property {String} property Related CSS property name, eg. `text-align`.
 * @property {String} default Defaul value of the property.
 * @property {String} label Label to use in UI, eg. `Text Align`.
 * @property {Function} [onChange] Change callback.
 * \n
 * ```js
 *  onChange: ({ property, from, to }) => {
 *    console.log(`Changed property`, property.getName(), { from, to });
 *  }
 * ```
 *
 */
export declare class Property<T extends Record<string, any> = PropertyProps> extends Model<T> {
	em: EditorModel;
	parent?: Property;
	static getDefaults(): any;
	/**
	 * @private
	 * @ts-ignore */
	defaults(): {
		name: string;
		property: string;
		type: string;
		defaults: string;
		info: string;
		value: string;
		icon: string;
		functionName: string;
		status: string;
		visible: boolean;
		fixedValues: string[];
		full: boolean;
		important: boolean;
		toRequire: boolean;
		requires: undefined;
		requiresParent: null;
		parentTarget: null;
	};
	initialize(props?: {}, opts?: any): void;
	__getParentProp<T = PropertyComposite>(): T;
	__upTargets(p: this, opts?: any): void;
	__upTargetsStyle(style: StyleProps, opts: any): void;
	_up(props: Partial<T>, opts?: OptionsUpdate): this;
	up(props: PartialPropertyProps, opts?: {}): void;
	init(): void;
	/**
	 * Get property id.
	 * @returns {String}
	 */
	getId(): string;
	/**
	 * Get the property type.
	 * The type of the property is defined on property creation and based on its value the proper Property class is assigned.
	 * The default type is `base`.
	 * @returns {String}
	 */
	getType(): string;
	/**
	 * Get name (the CSS property name).
	 * @returns {String}
	 */
	getName(): string;
	/**
	 * Get property label.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.locale=true] Use the locale string from i18n module
	 * @returns {String}
	 */
	getLabel(opts?: {
		locale?: boolean;
	}): any;
	/**
	 * Get property value.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.noDefault=false] Avoid returning the default value
	 * @returns {String}
	 */
	getValue(opts?: {
		noDefault?: boolean;
	}): string | T["value"] | undefined;
	/**
	 * Check if the property has value.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.noParent=false] Ignore the value if it comes from the parent target.
	 * @returns {Boolean}
	 */
	hasValue(opts?: {
		noParent?: boolean;
	}): boolean;
	/**
	 * Indicates if the current value is coming from a parent target (eg. another CSSRule).
	 * @returns {Boolean}
	 */
	hasValueParent(): boolean;
	/**
	 * Get the CSS style object of the property.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.camelCase] Return property name in camelCase.
	 * @return {Object}
	 * @example
	 * // In case the property is `color` with a value of `red`.
	 * console.log(property.getStyle());
	 * // { color: 'red' };
	 */
	getStyle(opts?: OptionsStyle): StyleProps;
	/**
	 * Get the default value.
	 * @return {string}
	 */
	getDefaultValue(): string;
	/**
	 * Update the value.
	 * The change is also propagated to the selected targets (eg. CSS rule).
	 * @param {String} value New value
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.partial=false] If `true` the update on targets won't be considered complete (not stored in UndoManager)
	 * @param {Boolean} [opts.noTarget=false] If `true` the change won't be propagated to selected targets.
	 */
	upValue(value: string, opts?: OptionsUpdate): this;
	/**
	 * Check if the property is visible
	 * @returns {Boolean}
	 */
	isVisible(): boolean;
	/**
	 * Clear the value.
	 * The change is also propagated to the selected targets (eg. the css property is cleared).
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.noTarget=false] If `true` the change won't be propagated to selected targets.
	 */
	clear(opts?: {}): this;
	/**
	 * Indicates if the current value comes directly from the selected target and so can be cleared.
	 * @returns {Boolean}
	 */
	canClear(): boolean;
	/**
	 * If the current property is a sub-property, this will return the parent Property.
	 * @returns {[Property]|null}
	 */
	getParent(): PropertyComposite<PropertyCompositeProps>;
	/**
	 * Indicates if the property is full-width in UI.
	 * @returns {Boolean}
	 */
	isFull(): boolean;
	__parseValue(value: string, opts: any): Partial<T>;
	__getClearProps(): Partial<T>;
	/**
	 * Update value
	 * @param {any} value
	 * @param {Boolen} [complete=true] Indicates if it's a final state
	 * @param {Object} [opts={}] Options
	 * @private
	 */
	setValue(value: string, complete?: boolean, opts?: {}): void;
	/**
	 * Like `setValue` but, in addition, prevents the update of the input element
	 * as the changes should come from the input itself.
	 * This method is useful with the definition of custom properties
	 * @param {any} value
	 * @param {Boolen} [complete=true] Indicates if it's a final state
	 * @param {Object} [opts={}] Options
	 * @private
	 * @deprecated
	 */
	setValueFromInput(value: string, complete: boolean, opts?: {}): void;
	/**
	 * Parse a raw value, generally fetched from the target, for this property
	 * @param  {string} value Raw value string
	 * @return {Object}
	 * @private
	 * @example
	 * // example with an Input type
	 * prop.parseValue('translateX(10deg)');
	 * // -> { value: 10, unit: 'deg', functionName: 'translateX' }
	 *
	 */
	parseValue(value: string, opts?: {
		complete?: boolean;
		numeric?: boolean;
	}): Partial<T>;
	/**
	 * Helper function to safely split a string of values.
	 * Useful when style values are inside functions
	 * eg:
	 * -> input: 'value(1,2,4), 123, value(4,5)' -- default separator: ','
	 * -> output: ['value(1,2,4)', '123', 'value(4,5)']
	 * @param {String} values Values to split
	 * @param {String} [separator] Separator
	 * @private
	 */
	__getFullValue({ withDefault }?: any): string;
	/**
	 * Get a complete value of the property.
	 * This probably will replace the getValue when all
	 * properties models will be splitted
	 * @param {String} val Custom value to replace the one on the model
	 * @return {string}
	 * @private
	 */
	getFullValue(val?: string, opts?: any): string;
	__setParentTarget(parentTarget: any): void;
	getParentTarget(): NonNullable<T["parentTarget"]> | null;
	__parseFn(input?: string): {
		name: string;
		value: string;
	};
	__checkVisibility({ target, component, sectors }: {
		target: any;
		component?: Component;
		sectors?: Sector[];
	}): boolean;
}
/** @private */
export interface SectorProperties {
	id?: string;
	name: string;
	open?: boolean;
	visible?: boolean;
	buildProps?: string[];
	extendBuilded?: boolean;
	properties?: PropertyTypes[];
}
/**
 *
 * [Property]: property.html
 *
 * @typedef Sector
 * @property {String} id Sector id, eg. `typography`
 * @property {String} name Sector name, eg. `Typography`
 * @property {Boolean} [open=true] Indicates the open state.
 * @property {Array<Object>} [properties=[]] Indicate an array of Property definitions.
 */
export declare class Sector extends Model<SectorProperties> {
	em: EditorModel;
	defaults(): {
		id: string;
		name: string;
		open: boolean;
		visible: boolean;
		extendBuilded: boolean;
		properties: never[];
	};
	/**
	 * @hideconstructor
	 */
	constructor(prp: SectorProperties, opts?: {
		em?: EditorModel;
	});
	get properties(): Collection<Property>;
	/**
	 * Get sector id.
	 * @returns {String}
	 */
	getId(): string;
	/**
	 * Get sector name.
	 * @returns {String}
	 */
	getName(): string;
	/**
	 * Update sector name.
	 * @param {String} value New sector name
	 */
	setName(value: string): this;
	/**
	 * Check if the sector is open
	 * @returns {Boolean}
	 */
	isOpen(): boolean;
	/**
	 * Update Sector open state
	 * @param {Boolean} value
	 */
	setOpen(value: boolean): this;
	/**
	 * Check if the sector is visible
	 * @returns {Boolean}
	 */
	isVisible(): boolean;
	/**
	 * Get sector properties.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.withValue=false] Get only properties with value
	 * @param {Boolean} [opts.withParentValue=false] Get only properties with parent value
	 * @returns {Array<[Property]>}
	 */
	getProperties(opts?: {
		withValue?: boolean;
		withParentValue?: boolean;
	}): Property<PropertyProps>[];
	getProperty(id: string): Property | undefined;
	addProperty(property: PropertyTypes, opts: AddOptions): Property<PropertyProps>;
	/**
	 * Extend properties
	 * @param {Array<Object>} props Start properties
	 * @param {Array<Object>} moProps Model props
	 * @param {Boolean} ex Returns the same amount of passed model props
	 * @return {Array<Object>} Final props
	 * @private
	 */
	extendProperties(props: PropertyTypes[], moProps?: PropertyTypes[], ex?: boolean): PropertyTypes[];
	checkExtend(prop: any): PropertyTypes;
	/**
	 * Build properties
	 * @param {Array<string>} propr Array of props as sting
	 * @return {Array<Object>}
	 * @private
	 */
	buildProperties(props: string | string[]): PropertyTypes[];
}
export declare class Sectors extends Collection<Sector> {
	em: EditorModel;
	module: any;
	initialize(prop: any, opts?: {
		em?: EditorModel;
		module?: any;
	}): void;
	/** @ts-ignore */
	model(props: any, opts?: {}): Sector;
	onReset(models: any, opts?: {
		previousModels?: Sector[];
	}): void;
}
export declare const Properties: any;
export type Option = {
	id: string;
	label?: string;
};
declare class PropertyFactory {
	props: Record<string, PropertyProps | undefined>;
	typeNumber: string;
	typeColor: string;
	typeRadio: string;
	typeSelect: string;
	typeFile: string;
	typeSlider: string;
	typeComposite: string;
	typeStack: string;
	unitsSize: string[];
	unitsSizeNoPerc: string[];
	unitsTime: string[];
	unitsAngle: string[];
	fixedValues: string[];
	optsBgSize: Option[];
	optsBgAttach: Option[];
	optsBgRepeat: Option[];
	optsWrap: Option[];
	optsOverflow: Option[];
	optsDir: Option[];
	opstDisplay: Option[];
	optsTransitFn: Option[];
	optsCursor: Option[];
	optsFloat: Option[];
	optsPos: Option[];
	optsTextAlign: Option[];
	optsFlexAlign: Option[];
	optsJustCont: Option[];
	optsAlignCont: Option[];
	optsAlignSelf: Option[];
	optsTransitProp: Option[];
	optsBorderStyle: Option[];
	optsBgPos: Option[];
	optsWeight: Option[];
	optsShadowType: Option[];
	optsFonts: Option[];
	fixedFontSizes: string[];
	fixedLetSpace: string[];
	requireFlex: Record<string, any>;
	constructor();
	__sub(items: (string | PropertyProps)[]): () => PropertyProps[];
	init(): this;
	add(property: string, def?: Record<string, any>, opts?: {
		from?: string;
	}): any;
	get(prop: string): PropertyProps | undefined;
	/**
	 * Build props object by their name
	 * @param  {Array<string>|string} props Array of properties name
	 * @return {Array<Object>}
	 */
	build(props: string | string[]): PropertyProps[];
}
declare class SectorsView extends View {
	pfx: string;
	ppfx: string;
	config: StyleManagerConfig;
	module: any;
	constructor(o?: {
		module?: any;
		config?: StyleManagerConfig;
		el?: HTMLElement;
		em?: EditorModel;
		collection?: Sectors;
	});
	remove(): this;
	addTo(model: Sector, c: any, opts?: {}): void;
	addToCollection(model: Sector, fragmentEl: DocumentFragment | null, opts?: {
		at?: number;
	}): HTMLElement;
	render(): this;
}
export interface ICustomPropertyView {
	create?: (data: ReturnType<PropertyView["_getClbOpts"]>) => any;
	destroy?: (data: ReturnType<PropertyView["_getClbOpts"]>) => any;
	update?: (data: ReturnType<PropertyView["_getClbOpts"]> & {
		value: string;
	}) => any;
	emit?: (data: ReturnType<PropertyView["_getClbOpts"]>, ...args: any) => any;
	unset?: (data: ReturnType<PropertyView["_getClbOpts"]>) => any;
}
export type CustomPropertyView<T> = ICustomPropertyView & T & ThisType<T & PropertyView>;
declare class PropertyView extends View<Property> {
	em: EditorModel;
	pfx: string;
	ppfx: string;
	config: any;
	parent?: PropertyView;
	__destroyFn: Function;
	create?: Function;
	destroy?: Function;
	update?: Function;
	emit?: Function;
	unset?: Function;
	clearEl?: HTMLElement;
	createdEl?: HTMLElement;
	input?: HTMLInputElement;
	$input?: any;
	constructor(o?: {});
	events(): {
		change: string;
		"click [data-clear-style]": string;
	};
	template(model: any): string;
	templateLabel(model: Property): string;
	templateInput(model: Property): string;
	remove(): this;
	/**
	 * Triggers when the status changes. The status indicates if the value of
	 * the proprerty is changed or inherited
	 * @private
	 */
	updateStatus(): void;
	/**
	 * Clear the property from the target
	 */
	clear(ev: Event): void;
	/**
	 * Get clear element
	 * @return {HTMLElement}
	 */
	getClearEl(): HTMLElement;
	/**
	 * Triggers when the value of element input/s is changed, so have to update
	 * the value of the model which will propogate those changes to the target
	 */
	inputValueChanged(ev: any): void;
	onValueChange(m: any, val: any, opt?: any): void;
	/**
	 * Update the element input.
	 * Usually the value is a result of `model.getFullValue()`
	 * @param {String} value The value from the model
	 * */
	setValue(value: string): void;
	__setValueInput(value: string): void;
	getInputEl(): HTMLInputElement;
	updateVisibility(): void;
	clearCached(): void;
	__unset(): void;
	__update(value: string): void;
	__change(...args: any): void;
	__updateStyle(value: string | StyleProps, { complete, partial, ...opts }?: any): void;
	_getClbOpts(): {
		el: HTMLElement;
		createdEl: HTMLElement | undefined;
		property: Property<PropertyProps>;
		props: Partial<PropertyProps>;
		change: (...args: any) => void;
		updateStyle: (value: string | StyleProps, { complete, partial, ...opts }?: any) => void;
	};
	render(): this;
	onRender(): void;
}
declare class PropertiesView extends View {
	config?: any;
	pfx: string;
	properties: PropertyView[];
	parent?: PropertyView;
	constructor(o: any);
	addTo(model: any, coll: any, opts: any): void;
	add(model: any, frag: DocumentFragment | null, opts?: any): void;
	remove(): this;
	clearItems(): void;
	render(): this;
}
declare class PropertyCompositeView extends PropertyView {
	props?: PropertiesView;
	templateInput(): string;
	remove(): this;
	onValueChange(): void;
	onRender(): void;
	clearCached(): void;
}
declare class Layers extends Collection<Layer> {
	prop: any;
	view?: LayersView;
	initialize(p: any, opts?: {
		prop?: any;
	}): void;
}
declare class LayerNode extends SortableTreeNode<Layer | Layers> {
	/**
	 * Constructor for creating a new LayerNode instance.
	 * @param model - The Layer or Layers model associated with this node.
	 */
	constructor(model: Layer | Layers);
	/**
	 * Get the list of children of this Layer or Layers component.
	 * @returns An array of LayerNode instances representing the children.
	 */
	getChildren(): LayerNode[] | null;
	/**
	 * Get the parent LayerNode of this component, or null if it has no parent.
	 * @returns The parent LayerNode or null.
	 */
	getParent(): LayerNode | null;
	/**
	 * Add a child LayerNode at a particular index in the Layers model.
	 * @param node - The LayerNode to add as a child.
	 * @param index - The position to insert the child.
	 * @returns The newly added LayerNode.
	 * @throws Error if trying to add to a Layer (not a Layers).
	 */
	addChildAt(node: LayerNode, index: number): LayerNode;
	/**
	 * Remove a child LayerNode at a specified index in the Layers model.
	 * @param index - The index of the child to remove.
	 * @returns The removed LayerNode.
	 * @throws Error if trying to remove from a Layer (not a Layers).
	 */
	removeChildAt(index: number): void;
	/**
	 * Get the index of a child LayerNode in the current Layers model.
	 * @param node - The child LayerNode to find.
	 * @returns The index of the child, or -1 if not found.
	 */
	indexOfChild(node: LayerNode): number;
	/**
	 * Determine if a source LayerNode can be moved to a specific index.
	 * @param source - The source LayerNode to be moved.
	 * @param index - The index to move the source to.
	 * @returns True if the source can be moved, false otherwise.
	 */
	canMove(source: LayerNode, index: number): boolean;
	/**
	 * Get the view associated with this LayerNode's model.
	 * @returns The associated view or undefined if none.
	 */
	get view(): any;
	/**
	 * Get the DOM element associated with this LayerNode's view.
	 * @returns The associated HTMLElement or undefined.
	 */
	get element(): HTMLElement | undefined;
	get model(): Layer | Layers;
}
declare class StyleManagerSorter extends Sorter<Layers | Layer, LayerNode> {
	constructor({ em, containerContext, dragBehavior, positionOptions, eventHandlers, }: {
		em: EditorModel;
		containerContext: SorterContainerContext;
		dragBehavior: SorterDragBehaviorOptions;
		positionOptions?: PositionOptions;
		eventHandlers?: SorterEventHandlers<LayerNode>;
	});
	onLayerStartSort: (sourceNodes: LayerNode[]) => void;
	onLayerDrop: (targetNode: LayerNode | undefined, sourceNodes: LayerNode[], index: number | undefined) => void;
}
declare class LayersView extends View<Layer> {
	pfx: string;
	ppfx: string;
	config: any;
	propertyView: PropertyStackView;
	items: LayerView[];
	sorter?: StyleManagerSorter;
	constructor(o: any);
	addTo(model: Layer): void;
	addToCollection(model: Layer, fragmentEl: DocumentFragment | null, index?: number): HTMLElement;
	reset(coll: any, opts: any): void;
	remove(): this;
	clearItems(): void;
	render(): this;
	/**
	 * Create placeholder
	 * @return {HTMLElement}
	 */
	private createPlaceholder;
}
declare class PropertyStackView extends PropertyCompositeView {
	model: PropertyStack;
	layersView?: LayersView;
	events(): {
		"click [data-add-layer]": string;
		change: string;
		"click [data-clear-style]": string;
	};
	templateInput(): string;
	init(): void;
	addLayer(): void;
	/**
	 * There is no need to handle input update by the property itself,
	 * this will be done by layers
	 * @private
	 */
	setValue(): void;
	remove(): this;
	clearCached(): void;
	onRender(): void;
}
declare class LayerView extends View<Layer> {
	pfx: string;
	ppfx: string;
	em: EditorModel;
	propertyView: PropertyStackView;
	propsWrapEl?: HTMLElement;
	previewEl?: HTMLElement;
	labelEl?: HTMLElement;
	sorter: any;
	config: any;
	events(): {
		click: string;
		"click [data-close-layer]": string;
		"mousedown [data-move-layer]": string;
		"touchstart [data-move-layer]": string;
	};
	template(): string;
	initialize(o?: any): void;
	initSorter(): void;
	removeItem(ev: Event): void;
	select(): void;
	getPropertiesWrapper(): HTMLElement;
	getPreviewEl(): HTMLElement;
	getLabelEl(): HTMLElement;
	updateLabel(): void;
	updateVisibility(): void;
	render(): this;
}
export type LayerValues = Record<string, any>;
export interface LayerProps {
	values: LayerValues;
}
declare class Layer extends Model<LayerProps> {
	prop: any;
	view?: LayerView;
	defaults(): {
		values: {};
	};
	initialize(): void;
	/**
	 * Get layer id.
	 * @returns {String}
	 */
	getId(): string;
	/**
	 * Get layer index.
	 * @returns {Number}
	 */
	getIndex(): number;
	/**
	 * Get layer values.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.camelCase] Return property names in camelCase.
	 * @returns {Object}
	 */
	getValues(opts?: {
		camelCase?: boolean;
	}): LayerValues;
	/**
	 * Get layer label.
	 * @returns {String}
	 */
	getLabel(): string;
	/**
	 * Check if the layer is selected.
	 * @returns {Boolean}
	 */
	isSelected(): boolean;
	/**
	 * Select the layer.
	 */
	select(): any;
	/**
	 * Remove the layer.
	 */
	remove(): any;
	/**
	 * Move layer to a new index.
	 * @param {Number} index New index
	 */
	move(index: number): any;
	/**
	 * Get style object for the preview.
	 * @param {Object} [opts={}] Options. Same of `PropertyStack.getStyleFromLayer`
	 * @returns {Object} Style object
	 */
	getStylePreview(opts?: OptionStyleStack): Record<string, any>;
	/**
	 * Check if the property has the preview enabled for this layer.
	 * @returns {Boolean}
	 */
	hasPreview(): boolean;
	upValues(props?: LayerValues): this;
}
export type ToStyleDataStack = Omit<ToStyleData, "property"> & {
	joinLayers: string;
	layer: Layer;
	property: PropertyStack;
};
export type FromStyleDataStack = Omit<FromStyleData, "property" | "separator"> & {
	property: PropertyStack;
	separatorLayers: RegExp;
};
export type OptionStyleStack = OptionsStyle & {
	number?: {
		min?: number;
		max?: number;
	};
	__clear?: boolean;
};
/** @private */
export interface PropertyStackProps extends Omit<PropertyCompositeProps, "toStyle" | "fromStyle"> {
	layers?: LayerProps[];
	/**
	 * The separator used to split layer values.
	 */
	layerSeparator?: string | RegExp;
	/**
	 * Value used to join layer values.
	 */
	layerJoin?: string;
	/**
	 * Indicate if the layer should display a preview.
	 */
	preview?: boolean;
	/**
	 * Custom logic for creating layer labels.
	 */
	layerLabel?: (layer: Layer, data: {
		index: number;
		values: LayerValues;
		property: PropertyStack;
	}) => string;
	/**
	 * Empty value to apply when all layers are removed.
	 * @default 'unset'
	 * @example
	 * // use simple string
	 * emptyValue: 'inherit',
	 * // or a function for a custom style object
	 * emptyValue: () => ({
	 *  color: 'unset',
	 *  width: 'auto'
	 * }),
	 */
	emptyValue?: string | ((data: {
		property: PropertyStack;
	}) => PropValues);
	toStyle?: (values: PropValues, data: ToStyleDataStack) => ReturnType<ToStyle>;
	fromStyle?: (style: StyleProps, data: FromStyleDataStack) => ReturnType<FromStyle>;
	parseLayer?: (data: {
		value: string;
		values: PropValues;
	}) => PropValues;
	selectedLayer?: Layer;
	prepend?: boolean;
	__layers?: PropValues[];
	isEmptyValue?: boolean;
}
/**
 *
 * [Layer]: layer.html
 *
 *
 * @typedef PropertyStack
 * @property {Boolean} [preview=false] Indicate if the layer should display a preview.
 * @property {String|RegExp} [layerSeparator=', '] The separator used to split layer values.
 * @property {String} [layerJoin=', '] Value used to join layer values.
 * @property {Function} [layerLabel] Custom logic for creating layer labels.
 * \n
 * ```js
 *  layerLabel: (layer) => {
 *    const values = layer.getValues();
 *    return `A: ${values['prop-a']} B: ${values['prop-b']}`;
 *  }
 *  ```
 * @property {String|Function} [emptyValue='unset'] Empty value to apply when all layers are removed.
 * \n
 * ```js
 *  // use simple string
 *  emptyValue: 'inherit',
 *  // or a function for a custom style object
 *  emptyValue: () => ({
 *    color: 'unset',
 *    width: 'auto'
 *  }),
 *  ```
 *
 */
export declare class PropertyStack extends PropertyComposite<PropertyStackProps> {
	defaults(): any;
	initialize(props?: {}, opts?: {}): void;
	get layers(): Layers;
	/**
	 * Get all available layers.
	 * @returns {Array<[Layer]>}
	 */
	getLayers(): Layer[];
	/**
	 * Check if the property has layers.
	 * @returns {Boolean}
	 */
	hasLayers(): boolean;
	/**
	 * Get layer by index.
	 * @param {Number} [index=0] Layer index position.
	 * @returns {[Layer]|null}
	 * @example
	 * // Get the first layer
	 * const layerFirst = property.getLayer(0);
	 * // Get the last layer
	 * const layers = this.getLayers();
	 * const layerLast = property.getLayer(layers.length - 1);
	 */
	getLayer(index?: number): Layer | undefined;
	/**
	 * Get selected layer.
	 * @returns {[Layer] | undefined}
	 */
	getSelectedLayer(): Layer | undefined;
	/**
	 * Select layer.
	 * Without a selected layer any update made on inner properties has no effect.
	 * @param {[Layer]} layer Layer to select
	 * @example
	 * const layer = property.getLayer(0);
	 * property.selectLayer(layer);
	 */
	selectLayer(layer: Layer): this;
	/**
	 * Select layer by index.
	 * @param {Number} index Index of the layer to select.
	 * @example
	 * property.selectLayerAt(1);
	 */
	selectLayerAt(index?: number): this | undefined;
	/**
	 * Move layer by index.
	 * @param {[Layer]} layer Layer to move.
	 * @param {Number} index New layer index.
	 * @example
	 * const layer = property.getLayer(1);
	 * property.moveLayer(layer, 0);
	 */
	moveLayer(layer: Layer, index?: number): void;
	/**
	 * Add new layer to the stack.
	 * @param {Object} [props={}] Custom property values to use in a new layer.
	 * @param {Object} [opts={}] Options
	 * @param {Number} [opts.at] Position index (by default the layer will be appended at the end).
	 * @returns {[Layer]} Added layer.
	 * @example
	 * // Add new layer at the beginning of the stack with custom values
	 * property.addLayer({ 'sub-prop1': 'value1', 'sub-prop2': 'value2' }, { at: 0 });
	 */
	addLayer(props?: LayerValues, opts?: {}): Layer;
	/**
	 * Remove layer.
	 * @param {[Layer]} layer Layer to remove.
	 * @returns {[Layer]} Removed layer
	 * @example
	 * const layer = property.getLayer(0);
	 * property.removeLayer(layer);
	 */
	removeLayer(layer: Layer): Layer;
	/**
	 * Remove layer by index.
	 * @param {Number} index Index of the layer to remove
	 * @returns {[Layer]|null} Removed layer
	 * @example
	 * property.removeLayerAt(0);
	 */
	removeLayerAt(index?: number): Layer | null;
	/**
	 * Get the layer label. The label can be customized with the `layerLabel` property.
	 * @param {[Layer]} layer
	 * @returns {String}
	 * @example
	 * const layer = this.getLayer(1);
	 * const label = this.getLayerLabel(layer);
	 */
	getLayerLabel(layer: Layer): string;
	/**
	 * Get style object from the layer.
	 * @param {[Layer]} layer
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.camelCase] Return property names in camelCase.
	 * @param {Object} [opts.number] Limit the result of the number types, eg. `number: { min: -3, max: 3 }`
	 * @returns {Object} Style object
	 */
	getStyleFromLayer(layer: Layer, opts?: OptionStyleStack): StyleProps;
	/**
	 * Get preview style object from the layer.
	 * If the property has `preview: false` the returned object will be empty.
	 * @param {[Layer]} layer
	 * @param {Object} [opts={}] Options. Same of `getStyleFromLayer`
	 * @returns {Object} Style object
	 */
	getStylePreview(layer: Layer, opts?: OptionStyleStack): {};
	/**
	 * Get layer separator.
	 * @return {RegExp}
	 */
	getLayerSeparator(): RegExp;
	/**
	 * Check if the property is with an empty value.
	 * @returns {Boolean}
	 */
	hasEmptyValue(): boolean;
	__upProperties(prop: Property, opts?: any): void;
	__upLayers(m: any, c: any, o: any): void;
	__upTargets(p: this, opts?: any): void;
	__upTargetsStyleProps(opts?: {}): void;
	__upTargetsStyle(style: StyleProps, opts: any): void;
	__upSelected({ noEvent }?: {
		noEvent?: boolean;
	}, opts?: OptionsUpdate): void;
	_up(props: Partial<PropertyStackProps>, opts?: OptionsUpdate): this;
	__setLayers(newLayers?: LayerValues[], opts?: {
		isEmptyValue?: boolean;
	}): void;
	__parseValue(value: string): Partial<PropertyStackProps>;
	__parseLayer(value: string): PropValues;
	__getLayersFromStyle(style?: StyleProps): LayerValues[] | null;
	getStyle(opts?: OptionStyleStack): {
		[x: string]: any;
	};
	getStyleFromLayers(opts?: OptionStyleStack): {
		[x: string]: any;
	};
	isEmptyValueStyle(style?: StyleProps): boolean;
	getEmptyValueStyle(opts?: {
		force?: boolean;
	}): PropValues;
	__getJoinLayers(): string;
	__getFullValue(): string;
	/**
	 * Extended
	 * @private
	 */
	hasValue(opts?: {
		noParent?: boolean;
	}): boolean;
	/**
	 * Extended
	 * @private
	 */
	clear(opts?: {}): this;
	__canClearProp(): boolean;
	/**
	 * @deprecated
	 * @private
	 */
	__getLayers(): Layers;
}
export type PropertyTypes = PropertyStackProps | PropertySelectProps | PropertyNumberProps;
export type StyleManagerEvent = "style:sector:add" | "style:sector:remove" | "style:sector:update" | "style:property:add" | "style:property:remove" | "style:property:update" | "style:target";
export type StyleTarget = StyleableModel;
export type StyleModuleParam<T extends keyof StyleManager, N extends number> = Parameters<StyleManager[T]>[N];
declare const stylesEvents: {
	all: string;
	sectorAdd: string;
	sectorRemove: string;
	sectorUpdate: string;
	propertyAdd: string;
	propertyRemove: string;
	propertyUpdate: string;
	layerSelect: string;
	target: string;
	custom: string;
};
declare class StyleManager extends ItemManagerModule<StyleManagerConfig, 
/** @ts-ignore */
Sectors> {
	builtIn: PropertyFactory;
	upAll: Debounced;
	properties: typeof Properties;
	events: typeof stylesEvents;
	sectors: Sectors;
	SectView: SectorsView;
	Sector: typeof Sector;
	storageKey: string;
	__ctn?: HTMLElement;
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	/**
	 * Initialize module. Automatically called with a new instance of the editor
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	__upSel(): void;
	__trgCustom(opts?: {
		container?: HTMLElement;
	}): void;
	__trgEv(event: string, ...data: any[]): void;
	__clearStateTarget(): void;
	onLoad(): void;
	postRender(): void;
	/**
	 * Add new sector. If the sector with the same id already exists, that one will be returned.
	 * @param {String} id Sector id
	 * @param {Object} sector Sector definition. Check the [available properties](sector.html#properties)
	 * @param {Object} [options={}] Options
	 * @param {Number} [options.at] Position index (by default, will be appended at the end).
	 * @returns {[Sector]} Added Sector
	 * @example
	 * const sector = styleManager.addSector('mySector',{
	 *   name: 'My sector',
	 *   open: true,
	 *   properties: [{ name: 'My property'}]
	 * }, { at: 0 });
	 * // With `at: 0` we place the new sector at the beginning of the list
	 * */
	addSector(id: string, sector: SectorProperties, options?: AddOptions): Sector;
	/**
	 * Get sector by id.
	 * @param {String} id  Sector id
	 * @returns {[Sector]|null}
	 * @example
	 * const sector = styleManager.getSector('mySector');
	 * */
	getSector(id: string, opts?: {
		warn?: boolean;
	}): Sector;
	/**
	 * Get all sectors.
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.visible] Returns only visible sectors
	 * @returns {Array<[Sector]>}
	 * @example
	 * const sectors = styleManager.getSectors();
	 * */
	getSectors<T extends {
		array?: boolean;
		visible?: boolean;
	}>(opts?: T): T["array"] extends true ? Sector[] : T["visible"] extends true ? Sector[] : Sectors;
	/**
	 * Remove sector by id.
	 * @param  {String} id Sector id
	 * @returns {[Sector]} Removed sector
	 * @example
	 * const removed = styleManager.removeSector('mySector');
	 */
	removeSector(id: string): Sector;
	/**
	 * Add new property to the sector.
	 * @param {String} sectorId Sector id.
	 * @param {Object} property Property definition. Check the [base available properties](property.html#properties) + others based on the `type` of your property.
	 * @param {Object} [opts={}] Options
	 * @param {Number} [opts.at] Position index (by default, will be appended at the end).
	 * @returns {[Property]|null} Added property or `null` in case the sector doesn't exist.
	 * @example
	 * const property = styleManager.addProperty('mySector', {
	 *   label: 'Minimum height',
	 *   property: 'min-height',
	 *   type: 'select',
	 *   default: '100px',
	 *   options: [
	 *    { id: '100px', label: '100' },
	 *    { id: '200px', label: '200' },
	 *   ],
	 * }, { at: 0 });
	 */
	addProperty(sectorId: string, property: PropertyTypes, opts?: AddOptions): Property | undefined;
	/**
	 * Get the property.
	 * @param {String} sectorId Sector id.
	 * @param {String} id Property id.
	 * @returns {[Property]|undefined}
	 * @example
	 * const property = styleManager.getProperty('mySector', 'min-height');
	 */
	getProperty(sectorId: string, id: string): Property | undefined;
	/**
	 * Get all properties of the sector.
	 * @param {String} sectorId Sector id.
	 * @returns {Collection<[Property]>|undefined} Collection of properties
	 * @example
	 * const properties = styleManager.getProperties('mySector');
	 */
	getProperties(sectorId: string): Collection<Property<PropertyProps>> | undefined;
	/**
	 * Remove the property.
	 * @param {String} sectorId Sector id.
	 * @param {String} id Property id.
	 * @returns {[Property]|null} Removed property
	 * @example
	 * const property = styleManager.removeProperty('mySector', 'min-height');
	 */
	removeProperty(sectorId: string, id: string): Property<PropertyProps> | null;
	/**
	 * Select new target.
	 * The target could be a Component, CSSRule, or a CSS selector string.
	 * @param {[Component]|[CSSRule]|String} target
	 * @returns {Array<[Component]|[CSSRule]>} Array containing selected Components or CSSRules
	 * @example
	 * // Select the first button in the current page
	 * const wrapperCmp = editor.Pages.getSelected().getMainComponent();
	 * const btnCmp = wrapperCmp.find('button')[0];
	 * btnCmp && styleManager.select(btnCmp);
	 *
	 * // Set as a target the CSS selector
	 * styleManager.select('.btn > span');
	 */
	select(target: StyleTarget | string | (StyleTarget | string)[], opts?: {
		stylable?: boolean;
		component?: Component;
	}): StyleTarget[];
	/**
	 * Get the last selected target.
	 * By default, the Style Manager shows styles of the last selected target.
	 * @returns {[Component]|[CSSRule]|null}
	 */
	getSelected(): StyleTarget | undefined;
	/**
	 * Get the array of selected targets.
	 * @returns {Array<[Component]|[CSSRule]>}
	 */
	getSelectedAll(): StyleTarget[];
	/**
	 * Get parent rules of the last selected target.
	 * @returns {Array<[CSSRule]>}
	 */
	getSelectedParents(): CssRule[];
	__getStateTarget(): CssRule | undefined;
	/**
	 * Update selected targets with a custom style.
	 * @param {Object} style Style object
	 * @param {Object} [opts={}] Options
	 * @example
	 * styleManager.addStyleTargets({ color: 'red' });
	 */
	addStyleTargets(style: StyleProps, opts: any): void;
	/**
	 * Return built-in property definition
	 * @param {String} prop Property name.
	 * @returns {Object|null} Property definition.
	 * @example
	 * const widthPropDefinition = styleManager.getBuiltIn('width');
	 */
	getBuiltIn(prop: string): PropertyProps | undefined;
	/**
	 * Get all the available built-in property definitions.
	 * @returns {Object}
	 */
	getBuiltInAll(): Record<string, PropertyProps | undefined>;
	/**
	 * Add built-in property definition.
	 * If the property exists already, it will extend it.
	 * @param {String} prop Property name.
	 * @param {Object} definition Property definition.
	 * @returns {Object} Added property definition.
	 * @example
	 * const sector = styleManager.addBuiltIn('new-property', {
	 *  type: 'select',
	 *  default: 'value1',
	 *  options: [{ id: 'value1', label: 'Some label' }, ...],
	 * })
	 */
	addBuiltIn(prop: string, definition: PropertyProps): any;
	/**
	 * Get what to style inside Style Manager. If you select the component
	 * without classes the entity is the Component itself and all changes will
	 * go inside its 'style' property. Otherwise, if the selected component has
	 * one or more classes, the function will return the corresponding CSS Rule
	 * @param  {Model} model
	 * @return {Model}
	 * @private
	 */
	getModelToStyle(model: any, options?: {
		skipAdd?: boolean;
		useClasses?: boolean;
	}): any;
	getParentRules(target: StyleTarget, { state, component }?: {
		state?: string;
		component?: Component;
	}): CssRule[];
	/**
	 * Add new property type
	 * @param {string} id Type ID
	 * @param {Object} definition Definition of the type.
	 * @example
	 * styleManager.addType('my-custom-prop', {
	 *    // Create UI
	 *    create({ props, change }) {
	 *      const el = document.createElement('div');
	 *      el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
	 *      const inputEl = el.querySelector('.my-input');
	 *      inputEl.addEventListener('change', event => change({ event }));
	 *      inputEl.addEventListener('input', event => change({ event, partial: true }));
	 *      return el;
	 *    },
	 *    // Propagate UI changes up to the targets
	 *    emit({ props, updateStyle }, { event, partial }) {
	 *      const { value } = event.target;
	 *      updateStyle(`${value}px`, { partial });
	 *    },
	 *    // Update UI (eg. when the target is changed)
	 *    update({ value, el }) {
	 *      el.querySelector('.my-input').value = parseInt(value, 10);
	 *    },
	 *    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
	 *    destroy() {}
	 *})
	 */
	addType<T>(id: string, definition: CustomPropertyView<T>): void;
	/**
	 * Get type
	 * @param {string} id Type ID
	 * @return {Object} Type definition
	 */
	getType(id: string): any;
	/**
	 * Get all types
	 * @return {Array}
	 */
	getTypes(): any;
	/**
	 * Create new UI property from type (Experimental)
	 * @param {string} id Type ID
	 * @param  {Object} [options={}] Options
	 * @param  {Object} [options.model={}] Custom model object
	 * @param  {Object} [options.view={}] Custom view object
	 * @return {PropertyView}
	 * @private
	 * @example
	 * const propView = styleManager.createType('number', {
	 *  model: {units: ['px', 'rem']}
	 * });
	 * propView.render();
	 * propView.model.on('change:value', ...);
	 * someContainer.appendChild(propView.el);
	 */
	createType(id: string, { model, view }?: {
		model?: {} | undefined;
		view?: {} | undefined;
	}): any;
	/**
	 * Render sectors and properties
	 * @return  {HTMLElement}
	 * @private
	 * */
	render(): HTMLElement;
	_logNoSector(sectorId: string): void;
	__emitCmpStyleUpdate(style: StyleProps, opts?: {
		components?: Component | Component[];
	}): void;
	__upProps(opts?: {}): void;
	__upProp(prop: Property, style: StyleProps, parentStyles: any[], opts: any): void;
	destroy(): void;
}
export interface StyleManagerConfig {
	/**
	 * Default sectors and properties
	 */
	sectors?: (Omit<SectorProperties, "properties"> & {
		properties?: (string | PropertyTypes)[];
	})[];
	/**
	 * Specify the element to use as a container, string (query) or HTMLElement.
	 * With the empty value, nothing will be rendered.
	 */
	appendTo?: string | HTMLElement;
	/**
	 * Style prefix.
	 * @default 'sm-'
	 */
	stylePrefix?: string;
	/**
	 * Avoid rendering the default style manager.
	 * @default false
	 */
	custom?: boolean;
	/**
	 * Hide the property in case it's not stylable for the
	 * selected component (each component has 'stylable' property).
	 * @deprecated
	 */
	hideNotStylable?: boolean;
	/**
	 * Highlight changed properties of the selected component.
	 * @deprecated
	 */
	highlightChanged?: boolean;
	/**
	 * Highlight computed properties of the selected component.
	 * @deprecated
	 */
	highlightComputed?: boolean;
	/**
	 * Show computed properties of the selected component, if this value
	 * is set to false, highlightComputed will not take effect.
	 * @deprecated
	 */
	showComputed?: boolean;
	/**
	 * Adds the possibility to clear property value from the target style.
	 * @deprecated
	 */
	clearProperties?: boolean;
	/**
	 * Properties not to take in account for computed styles.
	 * @deprecated
	 */
	avoidComputed?: string[];
	pStylePrefix?: string;
}
export interface HTMLGeneratorBuildOptions extends ToHTMLOptions {
	/**
	 * Remove unnecessary IDs (eg. those created automatically).
	 */
	cleanId?: boolean;
}
export type CssGeneratorBuildOptions = {
	/**
	 * Return an array of CssRules instead of the CSS string.
	 */
	json?: boolean;
	/**
	 * Return only rules matched by the passed component.
	 */
	onlyMatched?: boolean;
	/**
	 * Force keep all defined rules. Toggle on in case output looks different inside/outside of the editor.
	 */
	keepUnusedStyles?: boolean;
	rules?: CssRule[];
	clearStyles?: boolean;
};
export interface ColorPickerOptions {
	beforeShow?: () => void;
	move?: () => void;
	change?: () => void;
	show?: () => void;
	hide?: () => void;
	color?: boolean | string;
	flat?: boolean;
	showInput?: boolean;
	allowEmpty?: boolean;
	showButtons?: boolean;
	clickoutFiresChange?: boolean;
	showInitial?: boolean;
	showPalette?: boolean;
	showPaletteOnly?: boolean;
	hideAfterPaletteSelect?: boolean;
	togglePaletteOnly?: boolean;
	showSelectionPalette?: boolean;
	localStorageKey?: boolean | string;
	appendTo?: string | HTMLElement;
	maxSelectionSize?: number;
	cancelText?: string;
	chooseText?: string;
	togglePaletteMoreText?: string;
	togglePaletteLessText?: string;
	clearText?: string;
	noColorSelectedText?: string;
	preferredFormat?: boolean | string;
	containerClassName?: string;
	replacerClassName?: string;
	showAlpha?: boolean;
	theme?: string;
	palette?: string[][];
	selectionPalette?: string[];
	disabled?: boolean;
	offset?: {
		top: number;
		left: number;
	};
}
export interface EditorConfig {
	/**
	 * Style class name prefix.
	 * @default 'gjs-'
	 */
	stylePrefix?: string;
	/**
	 * Selector which indicates where render the editor.
	 */
	container?: string | HTMLElement;
	/**
	 * If true, auto-render the content
	 * @default true
	 */
	autorender?: boolean;
	/**
	 * Array of plugins to execute on start.
	 * @default []
	 */
	plugins?: (string | Plugin<any>)[];
	/**
	 * Custom options for plugins
	 * @default {}
	 */
	pluginsOpts?: Record<string, any>;
	/**
	 * Init headless editor.
	 * @default false
	 */
	headless?: boolean;
	/**
	 * Initial project data (JSON containing your components/styles/etc) to load.
	 */
	projectData?: ObjectAny;
	/**
	 * HTML string or object of components
	 * @deprecated Rely on `projectData` option
	 * @default ''
	 */
	components?: string;
	/**
	 * CSS string or object of rules
	 * @deprecated Rely on `projectData` option
	 * @default ''
	 */
	style?: string;
	/**
	 * If true, will fetch HTML and CSS from the selected container.
	 * @deprecated
	 * @default false
	 */
	fromElement?: boolean;
	/**
	 * Show an alert before unload the page with unsaved changes
	 * @default true
	 */
	noticeOnUnload?: boolean;
	/**
	 * Show paddings and margins.
	 * @default false
	 */
	showOffsets?: boolean;
	/**
	 * Show paddings and margins on selected component
	 * @default false
	 */
	showOffsetsSelected?: boolean;
	/**
	 * On creation of a new Component (via object), if the 'style' attribute is not
	 * empty, all those roles will be moved in its new class.
	 * @default true
	 */
	forceClass?: boolean;
	/**
	 * Height for the editor container
	 * @default '900px'
	 */
	height?: string;
	/**
	 * Width for the editor container
	 * @default '100%'
	 */
	width?: string;
	/**
	 * Type of logs to print with the logger (by default is used the devtool console).
	 * Available by default: debug, info, warning, error.
	 * You can use `false` to disable all of them or `true` to print all of them.
	 * @default ['warning', 'error']
	 */
	log?: ("debug" | "info" | "warning" | "error")[] | boolean;
	/**
	 * By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0
	 * and sets a default background color of white. This CSS is desired in most cases.
	 * use this property if you wish to overwrite the base CSS to your own CSS. This is most
	 * useful if for example your template is not based off a document with 0 as body margin.
	 * @deprecated in favor of `config.canvas.frameStyle`
	 * @default ''
	 */
	baseCss?: string;
	/**
	 * CSS that could only be seen (for instance, inside the code viewer)
	 * @default '* { box-sizing: border-box; } body {margin: 0;}'
	 */
	protectedCss?: string;
	/**
	 * CSS for the iframe which containing the canvas, useful if you need to customize
	 * something inside (eg. the style of the selected component).
	 * @default ''
	 */
	canvasCss?: string;
	/**
	 * Default command
	 * @default 'select-comp'
	 */
	defaultCommand?: string;
	/**
	 * Show a toolbar when the component is selected
	 * @default true
	 */
	showToolbar?: boolean;
	/**
	 * If true render a select of available devices
	 * @default true
	 */
	showDevices?: boolean;
	/**
	 * When enabled, on device change media rules won't be created
	 * @default false
	 */
	devicePreviewMode?: boolean;
	/**
	 * The condition to use for media queries, eg. 'max-width'.
	 * Comes handy for mobile-first cases.
	 * @default 'max-width'
	 */
	mediaCondition?: string;
	/**
	 * Starting tag for variable inside scripts in Components
	 * @deprecated Rely on 'script-props' https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
	 * @default '{[ '
	 */
	tagVarStart?: string;
	/**
	 * Ending tag for variable inside scripts in Components
	 * @deprecated Rely on 'script-props' https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
	 * @default ' ]}'
	 */
	tagVarEnd?: string;
	/**
	 * When false, removes empty text nodes when parsed, unless they contain a space.
	 * @default false
	 */
	keepEmptyTextNodes?: boolean;
	/**
	 * Return JS of components inside HTML from 'editor.getHtml()'.
	 * @default true
	 */
	jsInHtml?: boolean;
	/**
	 * Enable native HTML5 drag and drop.
	 * @default true
	 */
	nativeDnD?: boolean;
	/**
	 * Enable multiple component selection.
	 * @default true
	 */
	multipleSelection?: boolean;
	/**
	 * Pass default available options wherever `editor.getHtml()` is called.
	 * @default {}
	 */
	optsHtml?: HTMLGeneratorBuildOptions;
	/**
	 * Pass default available options wherever `editor.getCss()` is called
	 * @default {}
	 */
	optsCss?: CssGeneratorBuildOptions;
	/**
	 * Usually when you update the `style` of the component this changes the
	 * element's `style` attribute. Unfortunately, inline styling doesn't allow
	 * use of media queries (@media) or even pseudo selectors (eg. :hover).
	 * When `avoidInlineStyle` is true all styles are inserted inside the css rule
	 * @deprecated Don't use this option, we don't support inline styling anymore.
	 */
	avoidInlineStyle?: boolean;
	/**
	 * Avoid default properties from storable JSON data, like `components` and `styles`.
	 * With this option enabled your data will be smaller (usefull if need to
	 * save some storage space).
	 * @default true
	 */
	avoidDefaults?: boolean;
	/**
	 * (experimental)
	 * The structure of components is always on the screen but it's not the same
	 * for style rules. When you delete a component you might leave a lot of styles
	 * which will never be used again, therefore they might be removed.
	 * With this option set to true, styles not used from the CSS generator (so in
	 * any case where `CssGenerator.build` is used) will be removed automatically.
	 * But be careful, not always leaving the style not used mean you wouldn't
	 * use it later, but this option comes really handy when deal with big templates.
	 * @default false
	 */
	clearStyles?: boolean;
	/**
	 * Specify the global drag mode of components. By default, components are moved
	 * following the HTML flow. Two other options are available:
	 * 'absolute' - Move components absolutely (design tools way)
	 * 'translate' - Use translate CSS from transform property
	 * To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936.
	 */
	dragMode?: "translate" | "absolute";
	/**
	 * When the editor is placed in a scrollable container (eg. modals) this might
	 * cause elements inside the canvas (eg. floating toolbars) to be misaligned.
	 * To avoid that, you can specify an array of DOM elements on which their scroll will
	 * trigger the canvas update.
	 * Be default, if the array is empty, the first parent element will be appended.
	 * listenToEl: [document.querySelector('#scrollable-el')],
	 * @default []
	 * */
	listenToEl?: HTMLElement[];
	/**
	 * Import asynchronously CSS to use as icons.
	 * @default 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
	 * */
	cssIcons?: string;
	/**
	 * Experimental: don't use.
	 * Editor icons
	 */
	icons?: ObjectAny;
	/**
	 * Configurations for I18n.
	 */
	i18n?: I18nConfig;
	/**
	 * Configurations for Undo Manager
	 */
	undoManager?: UndoManagerConfig | boolean;
	/**
	 * Configurations for Asset Manager.
	 */
	assetManager?: AssetManagerConfig;
	/**
	 * Configurations for Canvas.
	 */
	canvas?: CanvasConfig;
	/**
	 * Configurations for Storage Manager.
	 */
	storageManager?: StorageManagerConfig | boolean;
	/**
	 * Configurations for Rich Text Editor.
	 */
	richTextEditor?: RichTextEditorConfig;
	/**
	 * Configurations for DomComponents
	 */
	domComponents?: DomComponentsConfig;
	/**
	 * Configurations for Modal Dialog.
	 */
	modal?: ModalConfig;
	/**
	 * Configurations for Code Manager.
	 */
	codeManager?: CodeManagerConfig;
	/**
	 * Configurations for Panels.
	 */
	panels?: PanelsConfig;
	/**
	 * Configurations for Commands.
	 */
	commands?: CommandsConfig;
	/**
	 * Configurations for keymaps
	 */
	keymaps?: KeymapsConfig;
	/**
	 * Configurations for Css Composer.
	 */
	cssComposer?: CssComposerConfig;
	/**
	 * Configurations for Selector Manager.
	 */
	selectorManager?: SelectorManagerConfig;
	/**
	 * Configurations for Device Manager.
	 */
	deviceManager?: DeviceManagerConfig;
	/**
	 * Configurations for Style Manager.
	 */
	styleManager?: StyleManagerConfig;
	/**
	 * Configurations for Block Manager.
	 */
	blockManager?: BlockManagerConfig;
	/**
	 * Configurations for Trait Manager.
	 */
	traitManager?: TraitManagerConfig;
	/**
	 * Configurations for Page Manager.
	 */
	pageManager?: PageManagerConfig;
	/**
	 * Configurations for Layer Manager.
	 */
	layerManager?: LayerManagerConfig;
	/**
	 * Configurations for Parser module.
	 */
	parser?: ParserConfig;
	/** Texts **/
	textViewCode?: string;
	/**
	 * Keep unused styles within the editor.
	 * @default false
	 */
	keepUnusedStyles?: boolean;
	/**
	 * Experimental: don't use.
	 * Avoid default UI styles.
	 */
	customUI?: boolean;
	el?: HTMLElement;
	/**
	 * Color picker options.
	 */
	colorPicker?: ColorPickerOptions;
	pStylePrefix?: string;
	/**
	 * Telemetry options
	 * Default: true
	 */
	telemetry?: boolean;
}
export type EditorConfigKeys = keyof EditorConfig;
export interface BlocksByCategory extends ItemsByCategory<Block> {
}
declare enum BlocksEvents {
	/**
	 * @event `block:add` New block added to the collection. The [Block] is passed as an argument to the callback.
	 * @example
	 * editor.on('block:add', (block) => { ... });
	 */
	add = "block:add",
	/**
	 * @event `block:remove` Block removed from the collection. The [Block] is passed as an argument to the callback.
	 * @example
	 * editor.on('block:remove', (block) => { ... });
	 */
	remove = "block:remove",
	/**
	 * @event `block:remove:before` Event triggered before Block remove.
	 * @example
	 * editor.on('block:remove:before', (block, remove, opts) => { ... });
	 */
	removeBefore = "block:remove:before",
	/**
	 * @event `block:update` Block updated. The [Block] and the object containing changes are passed as arguments to the callback.
	 * @example
	 * editor.on('block:update', (block, updatedProps) => { ... });
	 */
	update = "block:update",
	/**
	 * @event `block:drag:start` Started dragging block. The [Block] is passed as an argument.
	 * @example
	 * editor.on('block:drag:start', (block) => { ... });
	 */
	dragStart = "block:drag:start",
	/**
	 * @event `block:drag` The block is dragging. The [Block] is passed as an argument.
	 * @example
	 * editor.on('block:drag', (block) => { ... });
	 */
	drag = "block:drag",
	/**
	 * @event `block:drag:stop` Dragging of the block is stopped. The dropped [Component] (if dropped successfully) and the [Block] are passed as arguments.
	 * @example
	 * editor.on('block:drag:stop', (component, block) => { ... });
	 */
	dragEnd = "block:drag:stop",
	/**
	 * @event `block:category:update` Block category updated.
	 * @example
	 * editor.on('block:category:update', ({ category, changes }) => { ... });
	 */
	categoryUpdate = "block:category:update",
	/**
	 * @event `block:custom` Event to use in case of [custom Block Manager UI](https://grapesjs.com/docs/modules/Blocks.html#customization).
	 * @example
	 * editor.on('block:custom', ({ container, blocks, ... }) => { ... });
	 */
	custom = "block:custom",
	/**
	 * @event `block` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
	 * @example
	 * editor.on('block', ({ event, model, ... }) => { ... });
	 */
	all = "block"
}
export interface BlocksViewConfig {
	em: EditorModel;
	pStylePrefix?: string;
	ignoreCategories?: boolean;
	getSorter?: any;
}
declare class BlocksView extends View {
	em: EditorModel;
	config: BlocksViewConfig;
	categories: Categories;
	renderedCategories: Map<string, CategoryView>;
	ppfx: string;
	noCatClass: string;
	blockContClass: string;
	catsClass: string;
	catsEl?: HTMLElement;
	blocksEl?: HTMLElement;
	rendered?: boolean;
	sorter: any;
	constructor(opts: any, config: BlocksViewConfig);
	__getModule(): BlockManager;
	updateConfig(opts?: {}): void;
	/**
	 * Get sorter
	 * @private
	 */
	getSorter(): any;
	onDrag(ev: Event): void;
	onMove(ev: Event): void;
	onDrop(component?: Component): void;
	/**
	 * Add new model to the collection
	 * @param {Model} model
	 * @private
	 * */
	addTo(model: Block): void;
	/**
	 * Render new model inside the view
	 * @param {Model} model
	 * @param {Object} fragment Fragment collection
	 * @private
	 * */
	add(model: Block, fragment?: DocumentFragment): void;
	getCategoriesEl(): HTMLElement;
	getBlocksEl(): HTMLElement;
	append(el: HTMLElement | DocumentFragment): void;
	render(): this;
}
export type BlockEvent = `${BlocksEvents}`;
declare class BlockManager extends ItemManagerModule<BlockManagerConfig, Blocks> {
	blocks: Blocks;
	blocksVisible: Blocks;
	categories: Categories;
	blocksView?: BlocksView;
	_dragBlock?: Block;
	_bhv?: Record<string, any>;
	events: typeof BlocksEvents;
	Block: typeof Block;
	Blocks: typeof Blocks;
	Category: typeof Category;
	Categories: typeof Categories;
	storageKey: string;
	constructor(em: EditorModel);
	onInit(): void;
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	__trgCustom(): void;
	__customData(): {
		bm: BlockManager;
		blocks: Block[];
		container: any;
		dragStart: (block: Block, ev?: Event) => void;
		drag: (ev: Event) => void;
		dragStop: (cancel?: boolean) => void;
	};
	__startDrag(block: Block, ev?: Event): void;
	__drag(ev: Event): void;
	__endDrag(opts?: {
		component?: Component;
	}): void;
	__getFrameViews(): FrameView[];
	__behaviour(opts?: {}): {};
	__getBehaviour(): Record<string, any>;
	startDrag(block: Block, ev?: Event): void;
	endDrag(cancel?: boolean): void;
	postRender(): void;
	/**
	 * Add new block.
	 * @param {String} id Block ID
	 * @param {[Block]} props Block properties
	 * @returns {[Block]} Added block
	 * @example
	 * blockManager.add('h1-block', {
	 *   label: 'Heading',
	 *   content: '<h1>Put your title here</h1>',
	 *   category: 'Basic',
	 *   attributes: {
	 *     title: 'Insert h1 block'
	 *   }
	 * });
	 */
	add(id: string, props: BlockProperties, opts?: {}): Block;
	/**
	 * Get the block by id.
	 * @param  {String} id Block id
	 * @returns {[Block]}
	 * @example
	 * const block = blockManager.get('h1-block');
	 * console.log(JSON.stringify(block));
	 * // {label: 'Heading', content: '<h1>Put your ...', ...}
	 */
	get(id: string): Block;
	/**
	 * Return all blocks.
	 * @returns {Collection<[Block]>}
	 * @example
	 * const blocks = blockManager.getAll();
	 * console.log(JSON.stringify(blocks));
	 * // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
	 */
	getAll(): Blocks;
	/**
	 * Return the visible collection, which containes blocks actually rendered
	 * @returns {Collection<[Block]>}
	 */
	getAllVisible(): Blocks;
	/**
	 * Remove block.
	 * @param {String|[Block]} block Block or block ID
	 * @returns {[Block]} Removed block
	 * @example
	 * const removed = blockManager.remove('BLOCK_ID');
	 * // or by passing the Block
	 * const block = blockManager.get('BLOCK_ID');
	 * blockManager.remove(block);
	 */
	remove(block: string | Block, opts?: {}): any;
	/**
	 * Get all available categories.
	 * It's possible to add categories only within blocks via 'add()' method
	 * @return {Array|Collection}
	 */
	getCategories(): Categories;
	/**
	 * Return the Blocks container element
	 * @return {HTMLElement}
	 */
	getContainer(): HTMLElement | undefined;
	/**
	 * Returns currently dragging block.
	 * Updated when the drag starts and cleared once it's done.
	 * @returns {[Block]|undefined}
	 */
	getDragBlock(): Block | undefined;
	/**
	 * Get blocks by category.
	 * @example
	 * blockManager.getBlocksByCategory();
	 * // Returns an array of items of this type
	 * // > { category?: Category; items: Block[] }
	 *
	 * // NOTE: The item without category is the one containing blocks without category.
	 *
	 * // You can also get the same output format by passing your own array of Blocks
	 * const myFilteredBlocks: Block[] = [...];
	 * blockManager.getBlocksByCategorymyFilteredBlocks
	 */
	getBlocksByCategory(blocks?: Block[]): BlocksByCategory[];
	/**
	 * Render blocks
	 * @param  {Array} blocks Blocks to render, without the argument will render all global blocks
	 * @param  {Object} [opts={}] Options
	 * @param  {Boolean} [opts.external] Render blocks in a new container (HTMLElement will be returned)
	 * @param  {Boolean} [opts.ignoreCategories] Render blocks without categories
	 * @return {HTMLElement} Rendered element
	 * @example
	 * // Render all blocks (inside the global collection)
	 * blockManager.render();
	 *
	 * // Render new set of blocks
	 * const blocks = blockManager.getAll();
	 * const filtered = blocks.filter(block => block.get('category') == 'sections')
	 *
	 * blockManager.render(filtered);
	 * // Or a new set from an array
	 * blockManager.render([
	 *  {label: 'Label text', content: '<div>Content</div>'}
	 * ]);
	 *
	 * // Back to blocks from the global collection
	 * blockManager.render();
	 *
	 * // You can also render your blocks outside of the main block container
	 * const newBlocksEl = blockManager.render(filtered, { external: true });
	 * document.getElementById('some-id').appendChild(newBlocksEl);
	 */
	render(blocks?: Block[], opts?: {
		external?: boolean;
	}): HTMLElement | undefined;
	destroy(): void;
}
/**
 * @typedef State
 * @property {String} name State name, eg. `hover`, `nth-of-type(2n)`
 * @property {String} label State label, eg. `Hover`, `Even/Odd`
 */
export declare class State extends Model {
	defaults(): {
		name: string;
		label: string;
	};
	/**
	 * Get state name
	 * @returns {String}
	 */
	getName(): string;
	/**
	 * Get state label. If label was not provided, the name will be returned.
	 * @returns {String}
	 */
	getLabel(): string;
}
declare class ClassTagsView extends View<Selector> {
	template({ labelInfo, labelHead, iconSync, iconAdd, pfx, ppfx }: any): string;
	events(): {
		"change [data-states]": string;
		"click [data-add]": string;
		"focusout [data-input]": string;
		"keyup [data-input]": string;
		"click [data-sync-style]": string;
	};
	$input?: JQuery<HTMLElement>;
	$addBtn?: JQuery<HTMLElement>;
	$classes?: JQuery<HTMLElement>;
	$btnSyncEl?: JQuery<HTMLElement>;
	$states?: JQuery<HTMLElement>;
	$statesC?: JQuery<HTMLElement>;
	em: EditorModel;
	target: EditorModel;
	module: SelectorManager;
	pfx: string;
	ppfx: string;
	stateInputId: string;
	stateInputC: string;
	config: any;
	states: State[];
	constructor(o?: any);
	syncStyle(): void;
	/**
	 * Triggered when a tag is removed from collection
	 * @param {Object} model Removed model
	 * @private
	 */
	tagRemoved(model?: State): void;
	/**
	 * Add new model
	 * @param {Object} model
	 * @private
	 */
	addNew(model: State): void;
	/**
	 * Start tag creation
	 * @param {Object} e
	 * @private
	 */
	startNewTag(): void;
	/**
	 * End tag creation
	 * @param {Object} e
	 * @private
	 */
	endNewTag(): void;
	/**
	 * Checks what to do on keyup event
	 * @param  {Object} e
	 * @private
	 */
	onInputKeyUp(e: KeyboardEvent): void;
	checkStates(): void;
	/**
	 * Triggered when component is changed
	 * @param  {Object} e
	 * @public
	 */
	componentChanged({ targets }?: any): void;
	updateSelection(targets: Component | Component[]): Selector[];
	getCommonSelectors({ targets, opts }?: any): Selector[];
	_commonSelectors(...args: any): Selector[];
	checkSync(): void;
	getTarget(): Component | undefined;
	getTargets(): Component[];
	/**
	 * Update states visibility. Hides states in case there is no tags
	 * inside collection
	 * @private
	 */
	updateStateVis(targets?: Component[] | Component): void;
	__handleStateChange(): void;
	/**
	 * Update selector helper
	 * @return {this}
	 * @private
	 */
	updateSelector(targets?: Component[] | Component): void;
	__getName(target: Component): string;
	/**
	 * Triggered when the select with states is changed
	 * @param  {Object} e
	 * @private
	 */
	stateChanged(ev: any): void;
	/**
	 * Add new tag to collection, if possible, and to the component
	 * @param  {Object} e
	 * @private
	 */
	addNewTag(value: any): void;
	/**
	 * Add new object to collection
	 * @param   {Object} model  Model
	 * @param   {Object} fragmentEl   Fragment collection
	 * @return {Object} Object created
	 * @private
	 * */
	addToClasses(model: State, fragmentEl?: DocumentFragment): HTMLElement;
	/**
	 * Render the collection of classes
	 * @private
	 */
	renderClasses(): void;
	/**
	 * Return classes element
	 * @return {HTMLElement}
	 * @private
	 */
	getClasses(): JQuery<HTMLElement>;
	/**
	 * Return states element
	 * @return {HTMLElement}
	 * @private
	 */
	getStates(): JQuery<HTMLElement>;
	/**
	 * Return states container element
	 * @return {HTMLElement}
	 * @private
	 */
	getStatesC(): JQuery<HTMLElement>;
	renderStates(): void;
	render(): this;
}
export type SelectorEvent = "selector:add" | "selector:remove" | "selector:update" | "selector:state" | "selector";
declare const selectorEvents: {
	all: string;
	update: string;
	add: string;
	remove: string;
	removeBefore: string;
	state: string;
	custom: string;
};
export type SelectorStringObject = string | {
	name?: string;
	label?: string;
	type?: number;
};
declare class SelectorManager extends ItemManagerModule<SelectorManagerConfig & {
	pStylePrefix?: string;
}> {
	Selector: typeof Selector;
	Selectors: typeof Selectors;
	model: Model;
	states: Collection<State>;
	selectorTags?: ClassTagsView;
	selected: Selectors;
	all: Selectors;
	events: typeof selectorEvents;
	storageKey: string;
	__update: Debounced;
	__ctn?: HTMLElement;
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	constructor(em: EditorModel);
	__trgCustom(opts?: any): void;
	getAll<T extends {
		array?: boolean;
	}>(opts?: T): T["array"] extends true ? Selector[] : Selectors;
	__customData(opts?: any): {
		states: State[];
		selected: Selector[];
		container: HTMLElement | undefined;
	};
	postRender(): void;
	select(value: StyleModuleParam<"select", 0>, opts?: StyleModuleParam<"select", 1>): this;
	addSelector(name: SelectorStringObject | Selector, opts?: {}, cOpts?: {}): Selector;
	getSelector(name: string, type?: number): Selector | undefined;
	/**
	 * Add a new selector to the collection if it does not already exist.
	 * You can pass selectors properties or string identifiers.
	 * @param {Object|String} props Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls`
	 * @param {Object} [opts] Selector options
	 * @return {[Selector]}
	 * @example
	 * const selector = selectorManager.add({ name: 'my-class', label: 'My class' });
	 * console.log(selector.toString()) // `.my-class`
	 * // Same as
	 * const selector = selectorManager.add('.my-class');
	 * console.log(selector.toString()) // `.my-class`
	 * */
	add(props: SelectorStringObject, opts?: {}): Selector | Selector[];
	/**
	 * Add class selectors
	 * @param {Array|string} classes Array or string of classes
	 * @return {Array} Array of added selectors
	 * @private
	 * @example
	 * sm.addClass('class1');
	 * sm.addClass('class1 class2');
	 * sm.addClass(['class1', 'class2']);
	 * // -> [SelectorObject, ...]
	 */
	addClass(classes: string | string[]): Selector[];
	/**
	 * Get the selector by its name/type
	 * @param {String} name Selector name or string identifier
	 * @returns {[Selector]|null}
	 * @example
	 * const selector = selectorManager.get('.my-class');
	 * // Get Id
	 * const selectorId = selectorManager.get('#my-id');
	 * */
	get<T extends string | string[]>(name: T, type?: number): T extends string[] ? Selector[] : Selector | undefined;
	/**
	 * Remove Selector.
	 * @param {String|[Selector]} selector Selector instance or Selector string identifier
	 * @returns {[Selector]} Removed Selector
	 * @example
	 * const removed = selectorManager.remove('.myclass');
	 * // or by passing the Selector
	 * selectorManager.remove(selectorManager.get('.myclass'));
	 */
	remove(selector: string | Selector, opts?: RemoveOptions): any;
	/**
	 * Rename Selector.
	 * @param {[Selector]} selector Selector to update.
	 * @param {String} name New name for the selector.
	 * @returns {[Selector]} Selector containing the passed name.
	 * @example
	 * const selector = selectorManager.get('myclass');
	 * const result = selectorManager.rename(selector, 'myclass2');
	 * console.log(result === selector ? 'Selector updated' : 'Selector with this name exists already');
	 */
	rename(selector: Selector, name: string, opts?: SetOptions): Selector;
	/**
	 * Change the selector state
	 * @param {String} value State value
	 * @returns {this}
	 * @example
	 * selectorManager.setState('hover');
	 */
	setState(value: string): this;
	/**
	 * Get the current selector state value
	 * @returns {String}
	 */
	getState(): string;
	/**
	 * Get states
	 * @returns {Array<[State]>}
	 */
	getStates(): State[];
	/**
	 * Set a new collection of states
	 * @param {Array<Object>} states Array of new states
	 * @returns {Array<[State]>}
	 * @example
	 * const states = selectorManager.setStates([
	 *   { name: 'hover', label: 'Hover' },
	 *   { name: 'nth-of-type(2n)', label: 'Even/Odd' }
	 * ]);
	 */
	setStates(states: State[], opts?: any): State[];
	/**
	 * Get commonly selected selectors, based on all selected components.
	 * @returns {Array<[Selector]>}
	 * @example
	 * const selected = selectorManager.getSelected();
	 * console.log(selected.map(s => s.toString()))
	 */
	getSelected(): Selector[];
	/**
	 * Get selected selectors.
	 * @returns {Array<[Selector]>}
	 * @example
	 * const selected = selectorManager.getSelectedAll();
	 * console.log(selected.map(s => s.toString()))
	 */
	getSelectedAll(): Selector[];
	/**
	 * Add new selector to all selected components.
	 * @param {Object|String} props Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls`
	 * @example
	 * selectorManager.addSelected('.new-class');
	 */
	addSelected(props: SelectorStringObject): void;
	/**
	 * Remove a common selector from all selected components.
	 * @param {String|[Selector]} selector Selector instance or Selector string identifier
	 * @example
	 * selectorManager.removeSelected('.myclass');
	 */
	removeSelected(selector: Selector): void;
	duplicateSelected(selector: Selector, opts?: {
		suffix?: string;
	}): void;
	/**
	 * Get the array of currently selected targets.
	 * @returns {Array<[Component]|[CssRule]>}
	 * @example
	 * const targetsToStyle = selectorManager.getSelectedTargets();
	 * console.log(targetsToStyle.map(target => target.getSelectorsString()))
	 */
	getSelectedTargets(): StyleableModel[];
	/**
	 * Update component-first option.
	 * If the component-first is enabled, all the style changes will be applied on selected components (ID rules) instead
	 * of selectors (which would change styles on all components with those classes).
	 * @param {Boolean} value
	 */
	setComponentFirst(value: boolean): void;
	/**
	 * Get the value of component-first option.
	 * @return {Boolean}
	 */
	getComponentFirst(): boolean;
	/**
	 * Get all selectors
	 * @name getAll
	 * @function
	 * @return {Collection<[Selector]>}
	 * */
	/**
	 * Return escaped selector name
	 * @param {String} name Selector name to escape
	 * @returns {String} Escaped name
	 * @private
	 */
	escapeName(name: string): string;
	/**
	 * Render class selectors. If an array of selectors is provided a new instance of the collection will be rendered
	 * @param {Array<Object>} selectors
	 * @return {HTMLElement}
	 * @private
	 */
	render(selectors: any[]): HTMLElement;
	destroy(): void;
	/**
	 * Get common selectors from the current selection.
	 * @return {Array<Selector>}
	 * @private
	 */
	__getCommon(): Selector[];
	__getCommonSelectors(components: Component[], opts?: {}): Selector[];
	__common(...args: any): Selector[];
	__updateSelectedByComponents(): void;
}
declare const ParserCss: (em?: EditorModel, config?: ParserConfig) => {
	/**
	 * Parse CSS string to a desired model object
	 * @param  {String} str CSS string
	 * @return {Array<Object>}
	 */
	parse(str: string, opts?: {
		throwOnError?: boolean;
	}): CssRuleJSON[];
	/**
	 * Check the returned node from a custom parser and transforms it to
	 * a valid object for the CSS composer
	 * @return {[type]}
	 */
	checkNode(node: CssRuleJSON | ParsedCssRule): CssRuleJSON[];
};
declare const ParserHtml: (em?: EditorModel, config?: ParserConfig & {
	returnArray?: boolean;
}) => {
	compTypes: ComponentStackItem[];
	modelAttrStart: string;
	getPropAttribute(attrName: string, attrValue?: string): {
		name: string;
		value: any;
	};
	/**
	 * Extract component props from an attribute object
	 * @param {Object} attr
	 * @returns {Object} An object containing props and attributes without them
	 */
	splitPropsFromAttr(attr?: ObjectAny): {
		props: ObjectAny;
		attrs: ObjectStrings;
	};
	/**
	 * Parse style string to object
	 * @param {string} str
	 * @return {Object}
	 * @example
	 * var stl = ParserHtml.parseStyle('color:black; width:100px; test:value;');
	 * console.log(stl);
	 * // {color: 'black', width: '100px', test: 'value'}
	 */
	parseStyle(str: string): Record<string, string | string[]>;
	/**
	 * Parse class string to array
	 * @param {string} str
	 * @return {Array<string>}
	 * @example
	 * var res = ParserHtml.parseClass('test1 test2 test3');
	 * console.log(res);
	 * // ['test1', 'test2', 'test3']
	 */
	parseClass(str: string): string[];
	parseNodeAttr(node: HTMLElement, result?: ComponentDefinitionDefined): ComponentDefinitionDefined;
	detectNode(node: HTMLElement, opts?: ParseNodeOptions): ComponentDefinitionDefined;
	parseNode(node: HTMLElement, opts?: ParseNodeOptions): ComponentDefinitionDefined;
	/**
	 * Get data from the node element
	 * @param  {HTMLElement} el DOM element to traverse
	 * @return {Array<Object>}
	 */
	parseNodes(el: HTMLElement, opts?: ParseNodeOptions): ComponentDefinitionDefined[];
	/**
	 * Parse HTML string to a desired model object
	 * @param  {string} str HTML string
	 * @param  {ParserCss} parserCss In case there is style tags inside HTML
	 * @return {Object}
	 */
	parse(str: string, parserCss?: any, opts?: HTMLParserOptions): HTMLParseResult;
	__sanitizeNode(node: HTMLElement, opts: HTMLParserOptions): void;
	__checkAsDocument(str: string, opts: HTMLParserOptions): boolean | undefined;
};
declare enum ParserEvents {
	/**
	 * @event `parse:html` On HTML parse, an object containing the input and the output of the parser is passed as an argument.
	 * @example
	 * editor.on('parse:html', ({ input, output }) => { ... });
	 */
	html = "parse:html",
	htmlRoot = "parse:html:root",
	/**
	 * @event `parse:html:before` Event triggered before the HTML parsing starts. An object containing the input is passed as an argument.
	 * @example
	 * editor.on('parse:html:before', (options) => {
	 *   console.log('Parser input', options.input);
	 *   // You can also process the input and update `options.input`
	 *   options.input += '<div>Extra content</div>';
	 * });
	 */
	htmlBefore = "parse:html:before",
	/**
	 * @event `parse:css` On CSS parse, an object containing the input and the output of the parser is passed as an argument.
	 * @example
	 * editor.on('parse:css', ({ input, output }) => { ... });
	 */
	css = "parse:css",
	/**
	 * @event `parse:css:before` Event triggered before the CSS parsing starts. An object containing the input is passed as an argument.
	 * @example
	 * editor.on('parse:css:before', (options) => {
	 *   console.log('Parser input', options.input);
	 *   // You can also process the input and update `options.input`
	 *   options.input += '.my-class { color: red; }';
	 * });
	 */
	cssBefore = "parse:css:before",
	/**
	 * @event `parse` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
	 * @example
	 * editor.on('parse', ({ event, ... }) => { ... });
	 */
	all = "parse"
}
declare class ParserModule extends Module<ParserConfig & {
	name?: string;
}> {
	parserHtml: ReturnType<typeof ParserHtml>;
	parserCss: ReturnType<typeof ParserCss>;
	events: typeof ParserEvents;
	constructor(em: EditorModel);
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	/**
	 * Parse HTML string and return the object containing the Component Definition
	 * @param  {String} input HTML string to parse
	 * @param  {Object} [options] Options
	 * @param  {String} [options.htmlType] [HTML mime type](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02) to parse
	 * @param  {Boolean} [options.allowScripts=false] Allow `<script>` tags
	 * @param  {Boolean} [options.allowUnsafeAttr=false] Allow unsafe HTML attributes (eg. `on*` inline event handlers)
	 * @returns {Object} Object containing the result `{ html: ..., css: ... }`
	 * @example
	 * const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
	 *   htmlType: 'text/html', // default
	 * });
	 * // By using the `text/html`, this will fix automatically all the HTML syntax issues
	 * // Indeed the final representation, in this case, will be `<div>Hi</div><table></table>`
	 * const resXml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
	 *   htmlType: 'application/xml',
	 * });
	 * // This will preserve the original format as, from the XML point of view, is a valid format
	 */
	parseHtml(input: string, options?: HTMLParserOptions): HTMLParseResult;
	/**
	 * Parse CSS string and return an array of valid definition objects for CSSRules
	 * @param  {String} input CSS string to parse
	 * @returns {Array<Object>} Array containing the result
	 * @example
	 * const res = Parser.parseCss('.cls { color: red }');
	 * // [{ ... }]
	 */
	parseCss(input: string): CssRuleJSON[];
	__emitEvent(event: string, data: ObjectAny): void;
	destroy(): void;
}
declare enum StorageEvents {
	/**
	 * @event `storage:start` Storage request start.
	 * @example
	 * editor.on('storage:start', (type) => {
	 *  console.log('Storage start');
	 * });
	 */
	start = "storage:start",
	/**
	 * @event `storage:start:store` Storage store request start. The project JSON object to store is passed as an argument (which you can edit).
	 * @example
	 * editor.on('storage:start:store', (data) => {
	 *  console.log('Storage start store');
	 * });
	 */
	startStore = "storage:start:store",
	/**
	 * @event `storage:start:load` Storage load request start.
	 * @example
	 * editor.on('storage:start:load', () => {
	 *  console.log('Storage start load');
	 * });
	 */
	startLoad = "storage:start:load",
	/**
	 * @event `storage:load` Storage loaded the project. The loaded project is passed as an argument.
	 * @example
	 * editor.on('storage:load', (data, res) => {
	 *  console.log('Storage loaded the project');
	 * });
	 */
	load = "storage:load",
	/**
	 * @event `storage:store` Storage stored the project. The stored project is passed as an argument.
	 * @example
	 * editor.on('storage:store', (data, res) => {
	 *  console.log('Storage stored the project');
	 * });
	 */
	store = "storage:store",
	/**
	 * @event `storage:after` Storage request completed. Triggered right after `storage:load`/`storage:store`.
	 * @example
	 * editor.on('storage:after', (type) => {
	 *  console.log('Storage request completed');
	 * });
	 */
	after = "storage:after",
	afterStore = "storage:after:store",
	afterLoad = "storage:after:load",
	/**
	 * @event `storage:end` Storage request ended. This event triggers also in case of errors.
	 * @example
	 * editor.on('storage:end', (type) => {
	 *  console.log('Storage request ended');
	 * });
	 */
	end = "storage:end",
	/**
	 * @event `storage:end:store` Storage store request ended. This event triggers also in case of errors.
	 * @example
	 * editor.on('storage:end:store', () => {
	 *  console.log('Storage store request ended');
	 * });
	 */
	endStore = "storage:end:store",
	/**
	 * @event `storage:end:load` Storage load request ended. This event triggers also in case of errors.
	 * @example
	 * editor.on('storage:end:load', () => {
	 *  console.log('Storage load request ended');
	 * });
	 */
	endLoad = "storage:end:load",
	/**
	 * @event `storage:error` Error on storage request.
	 * @example
	 * editor.on('storage:error', (err, type) => {
	 *  console.log('Storage error');
	 * });
	 */
	error = "storage:error",
	/**
	 * @event `storage:error:store` Error on store request.
	 * @example
	 * editor.on('storage:error:store', (err) => {
	 *  console.log('Error on store');
	 * });
	 */
	errorStore = "storage:error:store",
	/**
	 * @event `storage:error:load` Error on load request.
	 * @example
	 * editor.on('storage:error:load', (err) => {
	 *  console.log('Error on load');
	 * });
	 */
	errorLoad = "storage:error:load"
}
export type StorageEvent = `${StorageEvents}`;
export type StorageEventType = "store" | "load";
declare class StorageManager extends Module<StorageManagerConfig & {
	name?: string;
	_disable?: boolean;
	currentStorage?: string;
}> {
	storages: Record<string, IStorage>;
	events: typeof StorageEvents;
	constructor(em: EditorModel);
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	/**
	 * Check if autosave is enabled.
	 * @returns {Boolean}
	 * */
	isAutosave(): boolean;
	/**
	 * Set autosave value.
	 * @param  {Boolean} value
	 * */
	setAutosave(value: boolean): this;
	/**
	 * Returns number of steps required before trigger autosave.
	 * @returns {Number}
	 * */
	getStepsBeforeSave(): number;
	/**
	 * Set steps required before trigger autosave.
	 * @param {Number} value
	 * */
	setStepsBeforeSave(value: number): this;
	/**
	 * Add new storage.
	 * @param {String} type Storage type
	 * @param {Object} storage Storage definition
	 * @param {Function} storage.load Load method
	 * @param  {Function} storage.store Store method
	 * @example
	 * storageManager.add('local2', {
	 *   async load(storageOptions) {
	 *     // ...
	 *   },
	 *   async store(data, storageOptions) {
	 *     // ...
	 *   },
	 * });
	 * */
	add<T extends StorageOptions>(type: string, storage: IStorage<T>): this;
	/**
	 * Return storage by type.
	 * @param {String} type Storage type
	 * @returns {Object|null}
	 * */
	get<T extends StorageOptions>(type: string): IStorage<T> | undefined;
	/**
	 * Get all storages.
	 * @returns {Object}
	 * */
	getStorages(): Record<string, IStorage<{}>>;
	/**
	 * Get current storage type.
	 * @returns {String}
	 * */
	getCurrent(): string;
	/**
	 * Set current storage type.
	 * @param {String} type Storage type
	 * */
	setCurrent(type: string): this;
	getCurrentStorage(): IStorage<StorageOptions> | undefined;
	/**
	 * Get storage options by type.
	 * @param {String} type Storage type
	 * @returns {Object}
	 * */
	getStorageOptions(type: string): StorageOptions;
	/**
	 * Store data in the current storage.
	 * @param {Object} data Project data.
	 * @param {Object} [options] Storage options.
	 * @returns {Object} Stored data.
	 * @example
	 * const data = editor.getProjectData();
	 * await storageManager.store(data);
	 * */
	store<T extends StorageOptions>(data: ProjectData, options?: T): Promise<ProjectData>;
	/**
	 * Load resource from the current storage by keys
	 * @param {Object} [options] Storage options.
	 * @returns {Object} Loaded data.
	 * @example
	 * const data = await storageManager.load();
	 * editor.loadProjectData(data);
	 * */
	load<T extends StorageOptions>(options?: T): Promise<ProjectData>;
	__askRecovery(): Promise<unknown>;
	getRecovery(): StorageManagerConfig["recovery"];
	getRecoveryStorage(): false | IStorage<StorageOptions> | undefined;
	__exec(storage: IStorage, opts: StorageOptions, data?: ProjectData): Promise<any>;
	__clearKeys(data?: ProjectData): ProjectData;
	getCurrentOptions(type?: string): StorageOptions;
	/**
	 * On start callback
	 * @private
	 */
	onStart(type: StorageEventType, data?: ProjectData): void;
	/**
	 * On after callback (before passing data to the callback)
	 * @private
	 */
	onAfter(type: StorageEventType, data: ProjectData, response: any): void;
	/**
	 * On end callback
	 * @private
	 */
	onEnd(type: StorageEventType, data: ProjectData, response?: any): void;
	/**
	 * On error callback
	 * @private
	 */
	onError(type: StorageEventType, error: any): void;
	/**
	 * Check if autoload is possible
	 * @return {Boolean}
	 * @private
	 * */
	canAutoload(): boolean;
	destroy(): void;
}
/**
 * @property {String} type Asset type, eg. `'image'`.
 * @property {String} src Asset URL, eg. `'https://.../image.png'`.
 *
 * @module docsjs.Asset
 */
export declare class Asset extends Model {
	static getDefaults(): any;
	defaults(): {
		type: string;
		src: string;
	};
	/**
	 * Get asset type.
	 * @returns {String}
	 * @example
	 * // Asset: { src: 'https://.../image.png', type: 'image' }
	 * asset.getType(); // -> 'image'
	 * */
	getType(): any;
	/**
	 * Get asset URL.
	 * @returns {String}
	 * @example
	 * // Asset: { src: 'https://.../image.png'  }
	 * asset.getSrc(); // -> 'https://.../image.png'
	 * */
	getSrc(): any;
	/**
	 * Get filename of the asset (based on `src`).
	 * @returns {String}
	 * @example
	 * // Asset: { src: 'https://.../image.png' }
	 * asset.getFilename(); // -> 'image.png'
	 * // Asset: { src: 'https://.../image' }
	 * asset.getFilename(); // -> 'image'
	 * */
	getFilename(): any;
	/**
	 * Get extension of the asset (based on `src`).
	 * @returns {String}
	 * @example
	 * // Asset: { src: 'https://.../image.png' }
	 * asset.getExtension(); // -> 'png'
	 * // Asset: { src: 'https://.../image' }
	 * asset.getExtension(); // -> ''
	 * */
	getExtension(): any;
}
declare const TypeableCollectionExt: any;
export declare class Assets extends TypeableCollectionExt<Asset> {
}
export type AssetEvent = `${AssetsEvents}`;
export interface AssetOpenOptions {
	select?: (asset: Asset, complete: boolean) => void;
	types?: string[];
	accept?: string;
	target?: any;
}
declare enum AssetsEvents {
	/**
	 * @event `asset:add` New asset added to the collection. The [Asset] is passed as an argument to the callback.
	 * @example
	 * editor.on('asset:add', (asset) => { ... });
	 */
	add = "asset:add",
	/**
	 * @event `asset:remove` Asset removed from the collection. The [Asset] is passed as an argument to the callback.
	 * @example
	 * editor.on('asset:remove', (asset) => { ... });
	 */
	remove = "asset:remove",
	removeBefore = "asset:remove:before",
	/**
	 * @event `asset:update` Asset updated. The [Asset] and the object containing changes are passed as arguments to the callback.
	 * @example
	 * editor.on('asset:update', (asset, updatedProps) => { ... });
	 */
	update = "asset:update",
	/**
	 * @event `asset:open` Asset Manager opened.
	 * @example
	 * editor.on('asset:open', () => { ... });
	 */
	open = "asset:open",
	/**
	 * @event `asset:close` Asset Manager closed.
	 * @example
	 * editor.on('asset:close', () => { ... });
	 */
	close = "asset:close",
	/**
	 * @event `asset:upload:start` Asset upload start.
	 * @example
	 * editor.on('asset:upload:start', () => { ... });
	 */
	uploadStart = "asset:upload:start",
	/**
	 * @event `asset:upload:end` Asset upload end.
	 * @example
	 * editor.on('asset:upload:end', (result) => { ... });
	 */
	uploadEnd = "asset:upload:end",
	/**
	 * @event `asset:upload:error` Asset upload error.
	 * @example
	 * editor.on('asset:upload:error', (error) => { ... });
	 */
	uploadError = "asset:upload:error",
	/**
	 * @event `asset:upload:response` Asset upload response.
	 * @example
	 * editor.on('asset:upload:response', (res) => { ... });
	 */
	uploadResponse = "asset:upload:response",
	/**
	 * @event `asset:custom` Event to use in case of [custom Asset Manager UI](https://grapesjs.com/docs/modules/Assets.html#customization).
	 * @example
	 * editor.on('asset:custom', ({ container, assets, ... }) => { ... });
	 */
	custom = "asset:custom",
	/**
	 * @event `asset` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
	 * @example
	 * editor.on('asset', ({ event, model, ... }) => { ... });
	 */
	all = "asset"
}
declare class AssetsView extends View {
	options: any;
	config: AssetManagerConfig;
	pfx: string;
	ppfx: string;
	em: EditorModel;
	inputUrl?: HTMLInputElement | null;
	template({ pfx, ppfx, em }: AssetsView): string;
	constructor(o?: any);
	/**
	 * Add new asset to the collection via string
	 * @param {Event} e Event object
	 * @return {this}
	 * @private
	 */
	handleSubmit(ev: Event): void;
	/**
	 * Returns assets element
	 * @return {HTMLElement}
	 * @private
	 */
	getAssetsEl(): Element | null;
	/**
	 * Returns input url element
	 * @return {HTMLElement}
	 * @private
	 */
	getAddInput(): HTMLInputElement | null;
	/**
	 * Triggered when an asset is removed
	 * @param {Asset} model Removed asset
	 * @private
	 */
	removedAsset(model: Asset): void;
	/**
	 * Add asset to collection
	 * @private
	 * */
	addToAsset(model: Asset): void;
	/**
	 * Add new asset to collection
	 * @param Object Model
	 * @param Object Fragment collection
	 * @return Object Object created
	 * @private
	 * */
	addAsset(model: Asset, fragmentEl?: DocumentFragment | null): any;
	/**
	 * Checks if to show noAssets
	 * @param {Boolean} hide
	 * @private
	 */
	toggleNoAssets(hide?: boolean): void;
	/**
	 * Deselect all assets
	 * @private
	 * */
	deselectAll(): void;
	renderAssets(): void;
	render(): this;
}
export type FileUploaderTemplateProps = {
	pfx: string;
	title: string;
	uploadId: string;
	disabled: boolean;
	multiUpload: boolean;
};
declare class FileUploaderView extends View {
	options: any;
	config: AssetManagerConfig;
	pfx: string;
	ppfx: string;
	em: EditorModel;
	module: AssetManager;
	target: any;
	uploadId: string;
	disabled: boolean;
	multiUpload: boolean;
	uploadForm?: HTMLFormElement | null;
	template({ pfx, title, uploadId, disabled, multiUpload }: FileUploaderTemplateProps): string;
	events(): {
		"change [data-input]": string;
	};
	constructor(opts?: any);
	/**
	 * Triggered before the upload is started
	 * @private
	 */
	onUploadStart(): void;
	/**
	 * Triggered after the upload is ended
	 * @param  {Object|string} res End result
	 * @private
	 */
	onUploadEnd(res: any): void;
	/**
	 * Triggered on upload error
	 * @param  {Object} err Error
	 * @private
	 */
	onUploadError(err: Error): void;
	/**
	 * Triggered on upload response
	 * @param  {string} text Response text
	 * @private
	 */
	onUploadResponse(text: string, clb?: (json: any) => void): void;
	/**
	 * Upload files
	 * @param  {Object}  e Event
	 * @return {Promise}
	 * @private
	 * */
	uploadFile(e: DragEvent, clb?: () => void): any;
	/**
	 * Make input file droppable
	 * @private
	 * */
	initDrop(): void;
	initDropzone(ev: any): void;
	render(): this;
	static embedAsBase64(e: DragEvent, clb?: () => void): Promise<void> | undefined;
}
export type AssetProps = Record<string, any>;
declare class AssetManager extends ItemManagerModule<AssetManagerConfig, Assets> {
	storageKey: string;
	Asset: typeof Asset;
	Assets: typeof Assets;
	assetsVis: Assets;
	am?: AssetsView;
	fu?: FileUploaderView;
	_bhv?: any;
	events: typeof AssetsEvents;
	/**
	 * Initialize module
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	/**
	 * Open the asset manager.
	 * @param {Object} [options] Options for the asset manager.
	 * @param {Array<String>} [options.types=['image']] Types of assets to show.
	 * @param {Function} [options.select] Type of operation to perform on asset selection. If not specified, nothing will happen.
	 * @example
	 * assetManager.open({
	 *  select(asset, complete) {
	 *    const selected = editor.getSelected();
	 *    if (selected && selected.is('image')) {
	 *      selected.addAttributes({ src: asset.getSrc() });
	 *      // The default AssetManager UI will trigger `select(asset, false)` on asset click
	 *      // and `select(asset, true)` on double-click
	 *      complete && assetManager.close();
	 *    }
	 *  }
	 * });
	 * // with your custom types (you should have assets with those types declared)
	 * assetManager.open({ types: ['doc'], ... });
	 */
	open(options?: AssetOpenOptions): void;
	/**
	 * Close the asset manager.
	 * @example
	 * assetManager.close();
	 */
	close(): void;
	/**
	 * Checks if the asset manager is open
	 * @returns {Boolean}
	 * @example
	 * assetManager.isOpen(); // true | false
	 */
	isOpen(): boolean;
	/**
	 * Add new asset/s to the collection. URLs are supposed to be unique
	 * @param {String|Object|Array<String>|Array<Object>} asset URL strings or an objects representing the resource.
	 * @param {Object} [opts] Options
	 * @returns {[Asset]}
	 * @example
	 * // As strings
	 * assetManager.add('http://img.jpg');
	 * assetManager.add(['http://img.jpg', './path/to/img.png']);
	 *
	 * // Using objects you can indicate the type and other meta informations
	 * assetManager.add({
	 *  // type: 'image',	// image is default
	 * 	src: 'http://img.jpg',
	 * 	height: 300,
	 *	width: 200,
	 * });
	 * assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
	 */
	add(asset: string | AssetProps | (string | AssetProps)[], opts?: AddOptions): any;
	/**
	 * Return asset by URL
	 * @param  {String} src URL of the asset
	 * @returns {[Asset]|null}
	 * @example
	 * const asset = assetManager.get('http://img.jpg');
	 */
	get(src: string): Asset | null;
	/**
	 * Return the global collection, containing all the assets
	 * @returns {Collection<[Asset]>}
	 */
	getAll(): Assets;
	/**
	 * Return the visible collection, which contains assets actually rendered
	 * @returns {Collection<[Asset]>}
	 */
	getAllVisible(): Assets;
	/**
	 * Remove asset
	 * @param {String|[Asset]} asset Asset or asset URL
	 * @returns {[Asset]} Removed asset
	 * @example
	 * const removed = assetManager.remove('http://img.jpg');
	 * // or by passing the Asset
	 * const asset = assetManager.get('http://img.jpg');
	 * assetManager.remove(asset);
	 */
	remove(asset: string | Asset, opts?: RemoveOptions): any;
	store(): any;
	load(data: ProjectData): any;
	/**
	 * Return the Asset Manager Container
	 * @returns {HTMLElement}
	 */
	getContainer(): any;
	/**
	 *  Get assets element container
	 * @returns {HTMLElement}
	 * @private
	 */
	getAssetsEl(): Element | null | undefined;
	/**
	 * Render assets
	 * @param  {array} assets Assets to render, without the argument will render all global assets
	 * @returns {HTMLElement}
	 * @private
	 * @example
	 * // Render all assets
	 * assetManager.render();
	 *
	 * // Render some of the assets
	 * const assets = assetManager.getAll();
	 * assetManager.render(assets.filter(
	 *  asset => asset.get('category') == 'cats'
	 * ));
	 */
	render(assts?: Asset[]): any;
	__viewParams(): {
		collection: Assets;
		globalCollection: Assets;
		config: AssetManagerConfig & {
			pStylePrefix?: string;
		};
		module: AssetManager;
		fu: any;
	};
	/**
	 * Add new type. If you want to get more about type definition we suggest to read the [module's page](/modules/Assets.html)
	 * @param {string} id Type ID
	 * @param {Object} definition Definition of the type. Each definition contains
	 *                            `model` (business logic), `view` (presentation logic)
	 *                            and `isType` function which recognize the type of the
	 *                            passed entity
	 * @private
	 * @example
	 * assetManager.addType('my-type', {
	 *  model: {},
	 *  view: {},
	 *  isType: (value) => {},
	 * })
	 */
	addType(id: string, definition: any): void;
	/**
	 * Get type
	 * @param {string} id Type ID
	 * @returns {Object} Type definition
	 * @private
	 */
	getType(id: string): any;
	/**
	 * Get types
	 * @returns {Array}
	 * @private
	 */
	getTypes(): any;
	AssetsView(): AssetsView | undefined;
	FileUploader(): FileUploaderView;
	onLoad(): void;
	postRender(editorView: any): void;
	/**
	 * Set new target
	 * @param	{Object}	m Model
	 * @private
	 * */
	setTarget(m: any): void;
	/**
	 * Set callback after asset was selected
	 * @param	{Object}	f Callback function
	 * @private
	 * */
	onSelect(f: any): void;
	/**
	 * Set callback to fire when the asset is clicked
	 * @param {function} func
	 * @private
	 */
	onClick(func: any): void;
	/**
	 * Set callback to fire when the asset is double clicked
	 * @param {function} func
	 * @private
	 */
	onDblClick(func: any): void;
	__propEv(ev: string, ...data: any[]): void;
	__trgCustom(): void;
	__customData(): {
		am: AssetManager;
		open: boolean;
		assets: any;
		types: any;
		container: any;
		close: () => void;
		remove: (asset: string | Asset, opts?: Record<string, any>) => any;
		select: (asset: Asset, complete: boolean) => void;
		options: any;
	};
	__behaviour(opts?: {}): any;
	__getBehaviour(opts?: {}): any;
	destroy(): void;
}
export declare class Devices extends Collection<Device> {
}
export interface DevicesViewConfig {
	em: EditorModel;
	pStylePrefix?: string;
}
declare class DevicesView extends View {
	em: EditorModel;
	config: DevicesViewConfig;
	ppfx: string;
	devicesEl?: JQuery<HTMLElement>;
	template({ ppfx, label }: {
		ppfx: string;
		label: string;
	}): string;
	events(): {
		change: string;
		"click [data-add-trasp]": string;
	};
	constructor(o: {
		config: DevicesViewConfig;
		collection: Devices;
	});
	/**
	 * Start adding new device
	 * @return {[type]} [description]
	 * @private
	 */
	startAdd(): void;
	/**
	 * Update device of the editor
	 * @private
	 */
	updateDevice(): void;
	/**
	 * Update select value on device update
	 * @private
	 */
	updateSelect(): void;
	/**
	 * Return devices options
	 * @return {string} String of options
	 * @private
	 */
	getOptions(): string;
	render(): this;
}
declare const deviceEvents: {
	all: string;
	select: string;
	update: string;
	add: string;
	remove: string;
	removeBefore: string;
};
declare class DeviceManager extends ItemManagerModule<DeviceManagerConfig & {
	appendTo?: HTMLElement | string;
}, Devices> {
	devices: Devices;
	events: typeof deviceEvents;
	view?: DevicesView;
	Device: typeof Device;
	Devices: typeof Devices;
	storageKey: string;
	constructor(em: EditorModel);
	_onSelect(m: EditorModel, deviceId: string, opts: Record<string, any>): void;
	/**
	 * Add new device
	 * @param {Object} props Device properties
	 * @returns {[Device]} Added device
	 * @example
	 * const device1 = deviceManager.add({
	 *  // Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
	 *  id: 'tablet',
	 *  name: 'Tablet',
	 *  width: '900px', // This width will be applied on the canvas frame and for the CSS media
	 * });
	 * const device2 = deviceManager.add({
	 *  id: 'tablet2',
	 *  name: 'Tablet 2',
	 *  width: '800px', // This width will be applied on the canvas frame
	 *  widthMedia: '810px', // This width that will be used for the CSS media
	 *  height: '600px', // Height will be applied on the canvas frame
	 * });
	 */
	add(props: DeviceProperties, options?: Record<string, any>): Device;
	/**
	 * Return device by ID
	 * @param  {String} id ID of the device
	 * @returns {[Device]|null}
	 * @example
	 * const device = deviceManager.get('Tablet');
	 * console.log(JSON.stringify(device));
	 * // {name: 'Tablet', width: '900px'}
	 */
	get(id: string): Device | undefined;
	/**
	 * Remove device
	 * @param {String|[Device]} device Device or device id
	 * @returns {[Device]} Removed device
	 * @example
	 * const removed = deviceManager.remove('device-id');
	 * // or by passing the Device
	 * const device = deviceManager.get('device-id');
	 * deviceManager.remove(device);
	 */
	remove(device: string | Device, opts?: {}): any;
	/**
	 * Return all devices
	 * @returns {Array<[Device]>}
	 * @example
	 * const devices = deviceManager.getDevices();
	 * console.log(JSON.stringify(devices));
	 * // [{name: 'Desktop', width: ''}, ...]
	 */
	getDevices(): Device[];
	/**
	 * Change the selected device. This will update the frame in the canvas
	 * @param {String|[Device]} device Device or device id
	 * @example
	 * deviceManager.select('some-id');
	 * // or by passing the page
	 * const device = deviceManager.get('some-id');
	 * deviceManager.select(device);
	 */
	select(device: string | Device, opts?: {}): this;
	/**
	 * Get the selected device
	 * @returns {[Device]}
	 * @example
	 * const selected = deviceManager.getSelected();
	 */
	getSelected(): Device | undefined;
	getAll(): Devices;
	render(): HTMLElement;
	destroy(): void;
}
export declare class Pages extends Collection<Page> {
	constructor(models: any, em: EditorModel);
	onReset(m: Page, opts?: RemoveOptions & {
		previousModels?: Pages;
	}): void;
	onRemove(removed?: Page, _p?: this, opts?: RemoveOptions): void;
}
declare class PageManager extends ItemManagerModule<PageManagerConfig, Pages> {
	events: typeof PagesEvents;
	storageKey: string;
	get pages(): Pages;
	model: ModuleModel;
	getAll(): Page[];
	/**
	 * Get all pages
	 * @name getAll
	 * @function
	 * @returns {Array<[Page]>}
	 * @example
	 * const arrayOfPages = pageManager.getAll();
	 */
	/**
	 * Initialize module
	 * @hideconstructor
	 * @param {Object} config Configurations
	 */
	constructor(em: EditorModel);
	__onChange(event: string, page: Page, coll: Pages, opts?: any): void;
	onLoad(): void;
	_onPageChange(m: any, page: Page, opts: any): void;
	postLoad(): void;
	/**
	 * Add new page
	 * @param {Object} props Page properties
	 * @param {Object} [opts] Options
	 * @returns {[Page]}
	 * @example
	 * const newPage = pageManager.add({
	 *  id: 'new-page-id', // without an explicit ID, a random one will be created
	 *  styles: `.my-class { color: red }`, // or a JSON of styles
	 *  component: '<div class="my-class">My element</div>', // or a JSON of components
	 * });
	 */
	add(props: PageProperties, opts?: AddOptions & SelectableOption & AbortOption): Page | undefined;
	/**
	 * Remove page
	 * @param {String|[Page]} page Page or page id
	 * @returns {[Page]} Removed Page
	 * @example
	 * const removedPage = pageManager.remove('page-id');
	 * // or by passing the page
	 * const somePage = pageManager.get('page-id');
	 * pageManager.remove(somePage);
	 */
	remove(page: string | Page, opts?: RemoveOptions & AbortOption): false | Page | undefined;
	/**
	 * Move a page to a specific index in the pages collection.
	 * If the index is out of bounds, the page will not be moved.
	 *
	 * @param {string|[Page]} page Page or page id to move.
	 * @param {Object} [opts] Move options
	 * @param {number} [opts.at] The target index where the page should be moved.
	 * @returns {Page | undefined} The moved page, or `undefined` if the page does not exist or the index is out of bounds.
	 * @example
	 * // Move a page to index 2
	 * const movedPage = pageManager.move('page-id', { at: 2 });
	 * if (movedPage) {
	 *   console.log('Page moved successfully:', movedPage);
	 * } else {
	 *   console.log('Page could not be moved.');
	 * }
	 */
	move(page: string | Page, opts?: AddOptions): Page | undefined;
	/**
	 * Get page by id
	 * @param {String} id Page id
	 * @returns {[Page]}
	 * @example
	 * const somePage = pageManager.get('page-id');
	 */
	get(id: string): Page | undefined;
	/**
	 * Get main page (the first one available)
	 * @returns {[Page]}
	 * @example
	 * const mainPage = pageManager.getMain();
	 */
	getMain(): Page;
	/**
	 * Get wrapper components (aka body) from all pages and frames.
	 * @returns {Array<[Component]>}
	 * @example
	 * const wrappers = pageManager.getAllWrappers();
	 * // Get all `image` components from the project
	 * const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
	 */
	getAllWrappers(): ComponentWrapper[];
	/**
	 * Change the selected page. This will switch the page rendered in canvas
	 * @param {String|[Page]} page Page or page id
	 * @returns {this}
	 * @example
	 * pageManager.select('page-id');
	 * // or by passing the page
	 * const somePage = pageManager.get('page-id');
	 * pageManager.select(somePage);
	 */
	select(page: string | Page, opts?: SetOptions): this;
	/**
	 * Get the selected page
	 * @returns {[Page]}
	 * @example
	 * const selectedPage = pageManager.getSelected();
	 */
	getSelected(): Page | undefined;
	destroy(): void;
	store(): any;
	load(data: any): any;
	_initPage(): Page;
	_createId(): string;
}
export type Messages = Required<I18nConfig>["messages"];
declare enum I18nEvents {
	/**
	 * @event `i18n:add` New set of messages is added.
	 * @example
	 * editor.on('i18n:add', (messages) => { ... });
	 */
	add = "i18n:add",
	/**
	 * @event `i18n:update` The set of messages is updated.
	 * @example
	 * editor.on('i18n:update', (messages) => { ... });
	 */
	update = "i18n:update",
	/**
	 * @event `i18n:locale` Locale changed.
	 * @example
	 * editor.on('i18n:locale', ({ value, valuePrev }) => { ... });
	 */
	locale = "i18n:locale"
}
declare class I18nModule extends Module<I18nConfig & {
	stylePrefix?: string;
}> {
	events: typeof I18nEvents;
	/**
	 * Initialize module
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	/**
	 * Update current locale
	 * @param {String} locale Locale value
	 * @returns {this}
	 * @example
	 * i18n.setLocale('it');
	 */
	setLocale(locale: string): this;
	/**
	 * Get current locale
	 * @returns {String} Current locale value
	 */
	getLocale(): string;
	/**
	 * Get all messages
	 * @param {String} [lang] Specify the language of messages to return
	 * @param {Object} [opts] Options
	 * @param {Boolean} [opts.debug] Show warnings in case of missing language
	 * @returns {Object}
	 * @example
	 * i18n.getMessages();
	 * // -> { en: { hello: '...' }, ... }
	 * i18n.getMessages('en');
	 * // -> { hello: '...' }
	 */
	getMessages(lang?: string, opts?: {}): any;
	/**
	 * Set new set of messages
	 * @param {Object} msg Set of messages
	 * @returns {this}
	 * @example
	 * i18n.getMessages();
	 * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
	 * i18n.setMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
	 * // Set replaced
	 * i18n.getMessages();
	 * // -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }
	 */
	setMessages(msg: Messages): this;
	/**
	 * Update messages
	 * @param {Object} msg Set of messages to add
	 * @returns {this}
	 * @example
	 * i18n.getMessages();
	 * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
	 * i18n.addMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
	 * // Set updated
	 * i18n.getMessages();
	 * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }
	 */
	addMessages(msg: Messages): this;
	/**
	 * Translate the locale message
	 * @param {String} key Label to translate
	 * @param {Object} [opts] Options for the translation
	 * @param {Object} [opts.params] Params for the translation
	 * @param {Boolean} [opts.debug] Show warnings in case of missing resources
	 * @returns {String}
	 * @example
	 * obj.setMessages({
	 *  en: { msg: 'Msg', msg2: 'Msg {test}'},
	 *  it: { msg2: 'Msg {test} it'},
	 * });
	 * obj.t('msg');
	 * // -> outputs `Msg`
	 * obj.t('msg2', { params: { test: 'hello' } });  // use params
	 * // -> outputs `Msg hello`
	 * obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
	 * // -> outputs `Msg hello it`
	 */
	t(key: string, opts?: Record<string, any>): any;
	_localLang(): any;
	_addParams(str: string, params: Record<string, any>): string;
	_getMsg(key: string, locale: string, opts?: {}): any;
	_debug(str: string, opts?: {
		debug?: boolean;
	}): void;
	destroy(): void;
}
declare class UtilsModule extends Module {
	Sorter: typeof ComponentSorter;
	Resizer: typeof Resizer;
	Dragger: typeof Dragger;
	ComponentSorter: typeof ComponentSorter;
	StyleManagerSorter: typeof StyleManagerSorter;
	helpers: {
		stringToPath: (string: string) => string[];
		get: (object: ObjectAny, path: string | string[], def: any) => any;
		serialize: (obj: ObjectAny) => any;
		isBultInMethod: (key: string) => boolean;
		normalizeKey: (key: string) => string;
		wait: (mls?: number) => Promise<unknown>;
		isDef: (value: any) => boolean;
		hasWin: () => boolean;
		getGlobal: () => typeof globalThis;
		toLowerCase: (str: string) => string;
		getUiClass: (em: EditorModel, defCls: string) => string;
		find: (arr: any[], test: (item: any, i: number, arr: any[]) => boolean) => null;
		escape: (str?: string) => string;
		escapeNodeContent: (str?: string) => string;
		deepMerge: (...args: ObjectAny[]) => {
			[x: string]: any;
		};
		isComponent: (obj: any) => obj is Component;
		getComponentView: (el?: Node) => ComponentView<Component> | undefined;
		getComponentModel: (el?: Node) => Component | undefined;
		buildBase64UrlFromSvg: (svg: string) => string;
		hasDnd: (em: EditorModel) => boolean;
		upFirst: (value: string) => string;
		matches: any;
		getModel: (el: HTMLElement & {
			__cashData?: any;
		}, $?: any) => Component | undefined;
		camelCase: (value: string) => string;
		getElement: (el: HTMLElement) => any;
		shallowDiff: (objOrig: ObjectAny, objNew: ObjectAny) => ObjectAny;
		normalizeFloat: (value: any, step?: number, valueDef?: number) => any;
		getUnitFromValue: (value: any) => any;
		capitalize: (str?: string) => string;
		getViewEl: <T extends unknown>(el?: Node) => T | undefined;
		setViewEl: (el: any, view: any) => void;
		appendStyles: (styles: {}, opts?: {
			unique?: boolean;
			prepand?: boolean;
		}) => void;
		isObject: (val: any) => val is ObjectAny;
		isEmptyObj: (val: ObjectAny) => boolean;
		createId: (length?: number) => string;
		isRule: (obj: any) => any;
	};
	constructor(em: EditorModel);
	destroy(): void;
}
export type KeymapEvent = "keymap:add" | "keymap:remove" | "keymap:emit" | `keymap:emit:${string}`;
declare class KeymapsModule extends Module<KeymapsConfig & {
	name?: string;
}> {
	keymaster: any;
	keymaps: Record<string, Keymap>;
	constructor(em: EditorModel);
	onLoad(): void;
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	/**
	 * Add new keymap
	 * @param {string} id Keymap id
	 * @param {string} keys Keymap keys, eg. `ctrl+a`, `⌘+z, ctrl+z`
	 * @param {Function|string} handler Keymap handler, might be a function
	 * @param {Object} [opts={}] Options
	 * @param {Boolean} [opts.force=false] Force the handler to be executed.
	 * @param {Boolean} [opts.prevent=false] Prevent default of the original triggered event.
	 * @returns {Object} Added keymap
	 * @example
	 * // 'ns' is just a custom namespace
	 * keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
	 *  console.log('do stuff');
	 * });
	 * // or
	 * keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', {
	 *  // Prevent the default browser action
	 *  prevent: true,
	 * });
	 *
	 * // listen to events
	 * editor.on('keymap:emit', (id, shortcut, event) => {
	 *  // ...
	 * })
	 */
	add(id: Keymap["id"], keys: Keymap["keys"], handler: Keymap["handler"], opts?: KeymapOptions): Keymap;
	/**
	 * Get the keymap by id
	 * @param {string} id Keymap id
	 * @return {Object} Keymap object
	 * @example
	 * keymaps.get('ns:my-keymap');
	 * // -> {keys, handler};
	 */
	get(id: string): Keymap;
	/**
	 * Get all keymaps
	 * @return {Object}
	 * @example
	 * keymaps.getAll();
	 * // -> {id1: {}, id2: {}};
	 */
	getAll(): Record<string, Keymap>;
	/**
	 * Remove the keymap by id
	 * @param {string} id Keymap id
	 * @return {Object} Removed keymap
	 * @example
	 * keymaps.remove('ns:my-keymap');
	 * // -> {keys, handler};
	 */
	remove(id: string): Keymap | undefined;
	/**
	 * Remove all binded keymaps
	 * @return {this}
	 */
	removeAll(): this;
	destroy(): void;
}
export declare class Modal extends ModuleModel<ModalModule> {
	defaults(): {
		title: string;
		content: string;
		attributes: {};
		open: boolean;
	};
	open(): void;
	close(): void;
}
declare class ModalView extends ModuleView<Modal> {
	template({ pfx, ppfx, content, title }: any): string;
	events(): {
		click: string;
		"click [data-close-modal]": string;
	};
	$title?: JQuery<HTMLElement>;
	$content?: JQuery<HTMLElement>;
	$collector?: JQuery<HTMLElement>;
	constructor(o: any);
	onClick(e: Event): void;
	/**
	 * Returns collector element
	 * @return {HTMLElement}
	 * @private
	 */
	getCollector(): JQuery<HTMLElement>;
	/**
	 * Returns content element
	 * @return {HTMLElement}
	 */
	getContent(): JQuery<HTMLElement>;
	/**
	 * Returns title element
	 * @return {HTMLElement}
	 * @private
	 */
	getTitle(opts?: any): HTMLElement | JQuery<HTMLElement> | undefined;
	/**
	 * Update content
	 * @private
	 * */
	updateContent(): void;
	/**
	 * Update title
	 * @private
	 * */
	updateTitle(): void;
	/**
	 * Update open
	 * @private
	 * */
	updateOpen(): void;
	/**
	 * Hide modal
	 * @private
	 * */
	hide(): void;
	/**
	 * Show modal
	 * @private
	 * */
	show(): void;
	updateAttr(attr?: any): void;
	render(): this;
}
export type ModalEvent = "modal:open" | "modal:close" | "modal";
declare class ModalModule extends Module<ModalConfig> {
	modal?: ModalView;
	/**
	 * Initialize module. Automatically called with a new instance of the editor
	 * @param {Object} config Configurations
	 * @private
	 */
	constructor(em: EditorModel);
	_evData(): {
		open: any;
		attributes: any;
		title: any;
		content: any;
		close: () => void;
	};
	postRender(view: EditorView): void;
	/**
	 * Open the modal window
	 * @param {Object} [opts={}] Options
	 * @param {String|HTMLElement} [opts.title] Title to set for the modal
	 * @param {String|HTMLElement} [opts.content] Content to set for the modal
	 * @param {Object} [opts.attributes] Updates the modal wrapper with custom attributes
	 * @returns {this}
	 * @example
	 * modal.open({
	 *   title: 'My title',
	 *   content: 'My content',
	 *   attributes: { class: 'my-class' },
	 * });
	 */
	open(opts?: any): this;
	/**
	 * Close the modal window
	 * @returns {this}
	 * @example
	 * modal.close();
	 */
	close(): this;
	/**
	 * Execute callback when the modal will be closed.
	 * The callback will be called one only time
	 * @param {Function} clb Callback to call
	 * @returns {this}
	 * @example
	 * modal.onceClose(() => {
	 *  console.log('The modal is closed');
	 * });
	 */
	onceClose(clb: EventHandler): this;
	/**
	 * Execute callback when the modal will be opened.
	 * The callback will be called one only time
	 * @param {Function} clb Callback to call
	 * @returns {this}
	 * @example
	 * modal.onceOpen(() => {
	 *  console.log('The modal is opened');
	 * });
	 */
	onceOpen(clb: EventHandler): this;
	/**
	 * Checks if the modal window is open
	 * @returns {Boolean}
	 * @example
	 * modal.isOpen(); // true | false
	 */
	isOpen(): boolean;
	/**
	 * Set the title to the modal window
	 * @param {string | HTMLElement} title Title
	 * @returns {this}
	 * @example
	 * // pass a string
	 * modal.setTitle('Some title');
	 * // or an HTMLElement
	 * const el = document.createElement('div');
	 * el.innerText =  'New title';
	 * modal.setTitle(el);
	 */
	setTitle(title: string): this;
	/**
	 * Returns the title of the modal window
	 * @returns {string | HTMLElement}
	 * @example
	 * modal.getTitle();
	 */
	getTitle(): any;
	/**
	 * Set the content of the modal window
	 * @param {string | HTMLElement} content Content
	 * @returns {this}
	 * @example
	 * // pass a string
	 * modal.setContent('Some content');
	 * // or an HTMLElement
	 * const el = document.createElement('div');
	 * el.innerText =  'New content';
	 * modal.setContent(el);
	 */
	setContent(content: string | HTMLElement): this;
	/**
	 * Get the content of the modal window
	 * @returns {string | HTMLElement}
	 * @example
	 * modal.getContent();
	 */
	getContent(): string | HTMLElement;
	/**
	 * Returns content element
	 * @return {HTMLElement}
	 * @private
	 */
	getContentEl(): HTMLElement | undefined;
	/**
	 * Returns modal model
	 * @return {Model}
	 * @private
	 */
	getModel(): any;
	/**
	 * Render the modal window
	 * @return {HTMLElement}
	 * @private
	 */
	render(): HTMLElement | undefined;
	destroy(): void;
}
declare class CodeEditorView extends View {
	pfx?: string;
	config: Record<string, any>;
	template({ pfx, codeName, label }: {
		pfx: string;
		codeName: string;
		label: string;
	}): string;
	initialize(o: any): void;
	render(): this;
}
declare class CodeManagerModule extends Module<CodeManagerConfig & {
	pStylePrefix?: string;
}> {
	defGenerators: Record<string, any>;
	defViewers: Record<string, any>;
	generators: Record<string, any>;
	viewers: Record<string, any>;
	EditorView: typeof CodeEditorView;
	constructor(em: EditorModel);
	/**
	 * Add new code generator to the collection
	 * @param  {string} id Code generator ID
	 * @param  {Object} generator Code generator wrapper
	 * @param {Function} generator.build Function that builds the code
	 * @return {this}
	 * @example
	 * codeManager.addGenerator('html7',{
	 *   build: function(model){
	 *    return 'myCode';
	 *   }
	 * });
	 * */
	addGenerator(id: string, generator: any): this;
	/**
	 * Get code generator by id
	 * @param  {string} id Code generator ID
	 * @return {Object|null}
	 * @example
	 * var generator = codeManager.getGenerator('html7');
	 * generator.build = function(model){
	 *   //extend
	 * };
	 * */
	getGenerator(id: string): any;
	/**
	 * Returns all code generators
	 * @return {Array<Object>}
	 * */
	getGenerators(): Record<string, any>;
	/**
	 * Add new code viewer
	 * @param  {string} id Code viewer ID
	 * @param  {Object} viewer Code viewer wrapper
	 * @param {Function} viewer.init Set element on which viewer will be displayed
	 * @param {Function} viewer.setContent Set content to the viewer
	 * @return {this}
	 * @example
	 * codeManager.addViewer('ace',{
	 *   init: function(el){
	 *     var ace = require('ace-editor');
	 *     this.editor  = ace.edit(el.id);
	 *   },
	 *   setContent: function(code){
	 *    this.editor.setValue(code);
	 *   }
	 * });
	 * */
	addViewer(id: string, viewer: any): this;
	/**
	 * Get code viewer by id
	 * @param  {string} id Code viewer ID
	 * @return {Object|null}
	 * @example
	 * var viewer = codeManager.getViewer('ace');
	 * */
	getViewer(id: string): any;
	/**
	 * Returns all code viewers
	 * @return {Array<Object>}
	 * */
	getViewers(): Record<string, any>;
	createViewer(opts?: any): any;
	/**
	 * Update code viewer content
	 * @param  {Object} viewer Viewer instance
	 * @param  {string} code  Code string
	 * @example
	 * var AceViewer = codeManager.getViewer('ace');
	 * // ...
	 * var viewer = AceViewer.init(el);
	 * // ...
	 * codeManager.updateViewer(AceViewer, 'code');
	 * */
	updateViewer(viewer: any, code: string): void;
	/**
	 * Get code from model
	 * @param  {Object} model Any kind of model that will be passed to the build method of generator
	 * @param  {string} genId Code generator id
	 * @param  {Object} [opt] Options
	 * @return {string}
	 * @example
	 * var codeStr = codeManager.getCode(model, 'html');
	 * */
	getCode(model: any, genId: string, opt?: any): string;
	/**
	 * Load default code generators
	 * @return {this}
	 * @private
	 * */
	loadDefaultGenerators(): this;
	/**
	 * Load default code viewers
	 * @return {this}
	 * @private
	 * */
	loadDefaultViewers(): this;
	destroy(): void;
}
export interface UndoGroup {
	index: number;
	actions: any[];
	labels: string[];
}
declare class UndoManagerModule extends Module<UndoManagerConfig & {
	name?: string;
	_disable?: boolean;
}> {
	beforeCache?: any;
	um: any;
	constructor(em: EditorModel);
	postLoad(): void;
	/**
	 * Get configuration object
	 * @name getConfig
	 * @function
	 * @return {Object}
	 */
	/**
	 * Add an entity (Model/Collection) to track
	 * Note: New Components and CSSRules will be added automatically
	 * @param {Model|Collection} entity Entity to track
	 * @return {this}
	 * @example
	 * um.add(someModelOrCollection);
	 */
	add(entity: any): this;
	/**
	 * Remove and stop tracking the entity (Model/Collection)
	 * @param {Model|Collection} entity Entity to remove
	 * @return {this}
	 * @example
	 * um.remove(someModelOrCollection);
	 */
	remove(entity: any): this;
	/**
	 * Remove all entities
	 * @return {this}
	 * @example
	 * um.removeAll();
	 */
	removeAll(): this;
	/**
	 * Start/resume tracking changes
	 * @return {this}
	 * @example
	 * um.start();
	 */
	start(): this;
	/**
	 * Stop tracking changes
	 * @return {this}
	 * @example
	 * um.stop();
	 */
	stop(): this;
	/**
	 * Undo last change
	 * @return {this}
	 * @example
	 * um.undo();
	 */
	undo(all?: boolean): this;
	/**
	 * Undo all changes
	 * @return {this}
	 * @example
	 * um.undoAll();
	 */
	undoAll(): this;
	/**
	 * Redo last change
	 * @return {this}
	 * @example
	 * um.redo();
	 */
	redo(all?: boolean): this;
	/**
	 * Redo all changes
	 * @return {this}
	 * @example
	 * um.redoAll();
	 */
	redoAll(): this;
	/**
	 * Checks if exists an available undo
	 * @return {Boolean}
	 * @example
	 * um.hasUndo();
	 */
	hasUndo(): boolean;
	/**
	 * Checks if exists an available redo
	 * @return {Boolean}
	 * @example
	 * um.hasRedo();
	 */
	hasRedo(): boolean;
	/**
	 * Check if the entity (Model/Collection) to tracked
	 * Note: New Components and CSSRules will be added automatically
	 * @param {Model|Collection} entity Entity to track
	 * @returns {Boolean}
	 */
	isRegistered(obj: any): boolean;
	/**
	 * Get stack of changes
	 * @return {Collection}
	 * @example
	 * const stack = um.getStack();
	 * stack.each(item => ...);
	 */
	getStack(): any[];
	/**
	 * Get grouped undo manager stack.
	 * The difference between `getStack` is when you do multiple operations at a time,
	 * like appending multiple components:
	 * `editor.getWrapper().append('<div>C1</div><div>C2</div>');`
	 * `getStack` will return a collection length of 2.
	 *  `getStackGroup` instead will group them as a single operation (the first
	 * inserted component will be returned in the list) by returning an array length of 1.
	 * @return {Array}
	 * @private
	 */
	getStackGroup(): any;
	/**
	 * Execute the provided callback temporarily stopping tracking changes
	 * @param clb The callback to execute with changes tracking stopped
	 * @example
	 * um.skip(() => {
	 *  // Do stuff without tracking
	 * });
	 */
	skip(clb: Function): void;
	getGroupedStack(): UndoGroup[];
	goToGroup(group: UndoGroup): void;
	getPointer(): number;
	/**
	 * Clear the stack
	 * @return {this}
	 * @example
	 * um.clear();
	 */
	clear(): this;
	getInstance(): any;
	destroy(): void;
}
declare enum CommandsEvents {
	/**
	 * @event `command:run` Triggered on run of any command.
	 * @example
	 * editor.on('command:run', ({ id, result, options }) => {
	 *  console.log('Command id', id, 'command result', result);
	 * });
	 */
	run = "command:run",
	/**
	 * @event `command:run:COMMAND-ID` Triggered on run of a specific command.
	 * @example
	 * editor.on('command:run:my-command', ({ result, options }) => { ... });
	 */
	runCommand = "command:run:",
	/**
	 * @event `command:run:before:COMMAND-ID` Triggered before the command is called.
	 * @example
	 * editor.on('command:run:before:my-command', ({ options }) => { ... });
	 */
	runBeforeCommand = "command:run:before:",
	/**
	 * @event `command:abort:COMMAND-ID` Triggered when the command execution is aborted.
	 * @example
	 * editor.on('command:abort:my-command', ({ options }) => { ... });
	 *
	 * // The command could be aborted during the before event
	 * editor.on('command:run:before:my-command', ({ options }) => {
	 *  if (someCondition) {
	 *    options.abort = true;
	 *  }
	 * });
	 */
	abort = "command:abort:",
	/**
	 * @event `command:stop` Triggered on stop of any command.
	 * @example
	 * editor.on('command:stop', ({ id, result, options }) => {
	 *  console.log('Command id', id, 'command result', result);
	 * });
	 */
	stop = "command:stop",
	/**
	 * @event `command:stop:COMMAND-ID` Triggered on stop of a specific command.
	 * @example
	 * editor.on('command:run:my-command', ({ result, options }) => { ... });
	 */
	stopCommand = "command:stop:",
	/**
	 * @event `command:stop:before:COMMAND-ID` Triggered before the command is called to stop.
	 * @example
	 * editor.on('command:stop:before:my-command', ({ options }) => { ... });
	 */
	stopBeforeCommand = "command:stop:before:",
	/**
	 * @event `command:call` Triggered on run or stop of a command.
	 * @example
	 * editor.on('command:call', ({ id, result, options, type }) => {
	 *  console.log('Command id', id, 'command result', result, 'call type', type);
	 * });
	 */
	call = "command:call",
	/**
	 * @event `command:call:COMMAND-ID` Triggered on run or stop of a specific command.
	 * @example
	 * editor.on('command:call:my-command', ({ result, options, type }) => { ... });
	 */
	callCommand = "command:call:"
}
export type CommandEvent = "run" | "stop" | `run:${string}` | `stop:${string}` | `abort:${string}`;
declare class CommandsModule extends Module<CommandsConfig & {
	pStylePrefix?: string;
}> {
	CommandAbstract: typeof CommandAbstract;
	defaultCommands: Record<string, Command>;
	commands: Record<string, CommandObject>;
	active: Record<string, any>;
	events: typeof CommandsEvents;
	/**
	 * @private
	 */
	constructor(em: Editor);
	/**
	 * Add new command to the collection
	 * @param	{string} id Command's ID
	 * @param	{Object|Function} command Object representing your command,
	 *  By passing just a function it's intended as a stateless command
	 *  (just like passing an object with only `run` method).
	 * @return {this}
	 * @example
	 * commands.add('myCommand', {
	 * 	run(editor, sender) {
	 * 		alert('Hello world!');
	 * 	},
	 * 	stop(editor, sender) {
	 * 	},
	 * });
	 * // As a function
	 * commands.add('myCommand2', editor => { ... });
	 * */
	add<T extends ObjectAny = {}>(id: string, command: CommandFunction | CommandObject<any, T>): this;
	/**
	 * Get command by ID
	 * @param	{string}	id Command's ID
	 * @return {Object} Object representing the command
	 * @example
	 * var myCommand = commands.get('myCommand');
	 * myCommand.run();
	 * */
	get(id: string): CommandObject | undefined;
	/**
	 * Extend the command. The command to extend should be defined as an object
	 * @param	{string}	id Command's ID
	 * @param {Object} Object with the new command functions
	 * @returns {this}
	 * @example
	 * commands.extend('old-command', {
	 *  someInnerFunction() {
	 *  // ...
	 *  }
	 * });
	 * */
	extend(id: string, cmd?: CommandObject): this;
	/**
	 * Check if command exists
	 * @param	{string}	id Command's ID
	 * @return {Boolean}
	 * */
	has(id: string): boolean;
	/**
	 * Get an object containing all the commands
	 * @return {Object}
	 */
	getAll(): Record<string, CommandObject>;
	/**
	 * Execute the command
	 * @param {String} id Command ID
	 * @param {Object} [options={}] Options
	 * @return {*} The return is defined by the command
	 * @example
	 * commands.run('myCommand', { someOption: 1 });
	 */
	run(id: string, options?: CommandOptions): any;
	/**
	 * Stop the command
	 * @param {String} id Command ID
	 * @param {Object} [options={}] Options
	 * @return {*} The return is defined by the command
	 * @example
	 * commands.stop('myCommand', { someOption: 1 });
	 */
	stop(id: string, options?: CommandOptions): any;
	/**
	 * Check if the command is active. You activate commands with `run`
	 * and disable them with `stop`. If the command was created without `stop`
	 * method it can't be registered as active
	 * @param  {String}  id Command id
	 * @return {Boolean}
	 * @example
	 * const cId = 'some-command';
	 * commands.run(cId);
	 * commands.isActive(cId);
	 * // -> true
	 * commands.stop(cId);
	 * commands.isActive(cId);
	 * // -> false
	 */
	isActive(id: string): boolean;
	/**
	 * Get all active commands
	 * @return {Object}
	 * @example
	 * console.log(commands.getActive());
	 * // -> { someCommand: itsLastReturn, anotherOne: ... };
	 */
	getActive(): Record<string, any>;
	/**
	 * Run command via its object
	 * @param  {Object} command
	 * @param {Object} options
	 * @return {*} Result of the command
	 * @private
	 */
	runCommand(command?: CommandObject, options?: CommandOptions): any;
	/**
	 * Stop the command
	 * @param  {Object} command
	 * @param {Object} options
	 * @return {*} Result of the command
	 * @private
	 */
	stopCommand(command?: CommandObject, options?: CommandOptions): any;
	/**
	 * Create anonymous Command instance
	 * @param {Object} command Command object
	 * @return {Command}
	 * @private
	 * */
	create(command: CommandObject): any;
	__onRun(id: string, clb: () => void): void;
	__onStop(id: string, clb: () => void): void;
	destroy(): void;
}
export interface DataSourceOptions extends CombinedModelConstructorOptions<{
	em: EditorModel;
}, DataSource> {
}
export declare class DataSource<DRProps extends DataRecordProps = DataRecordProps> extends Model<DataSourceType<DRProps>> {
	transformers: DataSourceTransformers;
	/**
	 * Returns the default properties for the data source.
	 * These include an empty array of records and an empty object of transformers.
	 *
	 * @returns {Object} The default attributes for the data source.
	 * @name defaults
	 */
	defaults(): DataSourceType<DRProps>;
	/**
	 * Initializes a new instance of the `DataSource` class.
	 * It sets up the transformers and initializes the collection of records.
	 * If the `records` property is not an instance of `DataRecords`, it will be converted into one.
	 *
	 * @param {DataSourceProps<DRProps>} props - Properties to initialize the data source.
	 * @param {DataSourceOptions} opts - Options to initialize the data source.
	 * @name constructor
	 */
	constructor(props: DataSourceProps<DRProps>, opts: DataSourceOptions);
	/**
	 * Retrieves the collection of records associated with this data source.
	 *
	 * @returns {DataRecords<DRProps>} The collection of data records.
	 * @name records
	 */
	get records(): NonNullable<DataRecords<DRProps>>;
	/**
	 * Retrieves the editor model associated with this data source.
	 *
	 * @returns {EditorModel} The editor model.
	 * @name em
	 */
	get em(): EditorModel;
	/**
	 * Handles the `add` event for records in the data source.
	 * This method triggers a change event on the newly added record.
	 *
	 * @param {DataRecord<DRProps>} dr - The data record that was added.
	 * @private
	 * @name onAdd
	 */
	onAdd(dr: DataRecord<DRProps>): void;
	/**
	 * Adds a new record to the data source.
	 *
	 * @param {DRProps} record - The properties of the record to add.
	 * @param {AddOptions} [opts] - Options to apply when adding the record.
	 * @returns {DataRecord} The added data record.
	 * @name addRecord
	 */
	addRecord(record: DRProps, opts?: AddOptions): DataRecord<DRProps>;
	/**
	 * Retrieves a record from the data source by its ID.
	 *
	 * @param {string | number} id - The ID of the record to retrieve.
	 * @returns {DataRecord<DRProps> | undefined} The data record, or `undefined` if no record is found with the given ID.
	 * @name getRecord
	 */
	getRecord(id: string | number): DataRecord | undefined;
	/**
	 * Retrieves all records from the data source.
	 * Each record is processed with the `getRecord` method to apply any read transformers.
	 *
	 * @returns {Array<DataRecord<DRProps> | undefined>} An array of data records.
	 * @name getRecords
	 */
	getRecords(): DataRecord<DataRecordProps>[];
	/**
	 * Removes a record from the data source by its ID.
	 *
	 * @param {string | number} id - The ID of the record to remove.
	 * @param {RemoveOptions} [opts] - Options to apply when removing the record.
	 * @returns {DataRecord<DRProps> | undefined} The removed data record, or `undefined` if no record is found with the given ID.
	 * @name removeRecord
	 */
	removeRecord(id: string | number, opts?: RemoveOptions): DataRecord<DRProps>;
	/**
	 * Replaces the existing records in the data source with a new set of records.
	 *
	 * @param {Array<DRProps>} records - An array of data record properties to set.
	 * @returns {Array<DataRecord>} An array of the added data records.
	 * @name setRecords
	 */
	setRecords(records: DRProps[]): void;
	private handleChanges;
}
export declare class DataRecords<T extends DataRecordProps = DataRecordProps> extends Collection<DataRecord<T>> {
	dataSource: DataSource;
	constructor(models: DataRecord[] | DataRecordProps[], options: {
		dataSource: DataSource;
	});
}
export type ConditionProps = ExpressionProps | LogicGroupProps | boolean;
declare enum BooleanOperation {
	and = "and",
	or = "or",
	xor = "xor"
}
declare enum NumberOperation {
	greaterThan = ">",
	lessThan = "<",
	greaterThanOrEqual = ">=",
	lessThanOrEqual = "<=",
	equals = "=",
	notEquals = "!="
}
declare enum StringOperation {
	contains = "contains",
	startsWith = "startsWith",
	endsWith = "endsWith",
	matchesRegex = "matchesRegex",
	equalsIgnoreCase = "equalsIgnoreCase",
	trimEquals = "trimEquals"
}
declare enum AnyTypeOperation {
	equals = "equals",
	isTruthy = "isTruthy",
	isFalsy = "isFalsy",
	isDefined = "isDefined",
	isNull = "isNull",
	isUndefined = "isUndefined",
	isArray = "isArray",
	isObject = "isObject",
	isString = "isString",
	isNumber = "isNumber",
	isBoolean = "isBoolean",
	isDefaultValue = "isDefaultValue"
}
declare const DataConditionType: "data-condition";
export interface ExpressionProps {
	left?: any;
	operator?: AnyTypeOperation | StringOperation | NumberOperation;
	right?: any;
}
export interface LogicGroupProps {
	logicalOperator: BooleanOperation;
	statements: ConditionProps[];
}
export interface DataConditionProps {
	type?: typeof DataConditionType;
	condition: ConditionProps;
	ifTrue?: any;
	ifFalse?: any;
}
declare class DataCondition extends Model<DataConditionProps> {
	private em;
	private collectionsStateMap;
	private resolverListeners;
	private _previousEvaluationResult;
	private _conditionEvaluator;
	defaults(): {
		type: "data-condition";
		condition: {
			left: string;
			operator: StringOperation;
			right: string;
		};
		ifTrue: {};
		ifFalse: {};
	};
	constructor(props: DataConditionProps, opts: {
		em: EditorModel;
		onValueChange?: () => void;
	});
	getCondition(): ConditionProps;
	getIfTrue(): any;
	getIfFalse(): any;
	setCondition(condition: ConditionProps): void;
	setIfTrue(newIfTrue: any): void;
	setIfFalse(newIfFalse: any): void;
	isTrue(): boolean;
	getDataValue(skipDynamicValueResolution?: boolean): any;
	resolvesFromCollection(): boolean;
	updateCollectionsStateMap(collectionsStateMap: DataCollectionStateMap): void;
	private listenToPropsChange;
	private handleConditionChange;
	private listenToDataVariables;
	private setupConditionDataVariableListeners;
	private setupOutputDataVariableListeners;
	private setupOutputVariableListener;
	private addListener;
	private emitConditionEvaluationChange;
	private emitOutputValueChange;
	private cleanupListeners;
	toJSON(): DataConditionProps;
}
export type DataResolver = DataVariable | DataCondition;
export interface DataRecordProps extends ObjectAny {
	/**
	 * Record id.
	 */
	id: string;
	/**
	 * Specifies if the record is mutable. Defaults to `true`.
	 */
	mutable?: boolean;
	[key: string]: any;
}
export interface BaseDataSource {
	/**
	 * DataSource id.
	 */
	id: string;
	/**
	 * DataSource validation and transformation factories.
	 */
	transformers?: DataSourceTransformers;
	/**
	 * If true will store the data source in the GrapesJS project.json file.
	 */
	skipFromStorage?: boolean;
}
export interface DataSourceType<DR extends DataRecordProps> extends BaseDataSource {
	records: DataRecords<DR>;
}
export interface DataSourceProps<DR extends DataRecordProps> extends BaseDataSource {
	records?: DataRecords<DR> | DataRecord<DR>[] | DR[];
}
export interface DataSourceTransformers {
	onRecordSetValue?: (args: {
		id: string | number;
		key: string;
		value: any;
	}) => any;
}
declare enum DataSourcesEvents {
	/**
	 * @event `data:add` Added new data source.
	 * @example
	 * editor.on('data:add', (dataSource) => { ... });
	 */
	add = "data:add",
	addBefore = "data:add:before",
	/**
	 * @event `data:remove` Data source removed.
	 * @example
	 * editor.on('data:remove', (dataSource) => { ... });
	 */
	remove = "data:remove",
	removeBefore = "data:remove:before",
	/**
	 * @event `data:update` Data source updated.
	 * @example
	 * editor.on('data:update', (dataSource, changes) => { ... });
	 */
	update = "data:update",
	/**
	 * @event `data:path` Data record path update.
	 * @example
	 * editor.on('data:path:SOURCE_ID:RECORD_ID:PROP_NAME', ({ dataSource, dataRecord, path }) => { ... });
	 */
	path = "data:path",
	/**
	 * @event `data` Catch-all event for all the events mentioned above.
	 * @example
	 * editor.on('data', ({ event, model, ... }) => { ... });
	 */
	all = "data"
}
/**{END_EVENTS}*/
export type DotSeparatedKeys<T> = T extends object ? {
	[K in keyof T]: K extends string ? T[K] extends object ? `${K}` | `${K}.${DotSeparatedKeys<T[K]>}` : `${K}` : never;
}[keyof T] : never;
export type DeepPartialDot<T> = {
	[P in DotSeparatedKeys<T>]?: P extends `${infer K}.${infer Rest}` ? K extends keyof T ? Rest extends DotSeparatedKeys<T[K]> ? DeepPartialDot<T[K]>[Rest] : never : never : P extends keyof T ? T[P] : never;
};
export declare class DataRecord<T extends DataRecordProps = DataRecordProps> extends Model<T> {
	mutable: boolean;
	constructor(props: T, opts?: {});
	get cl(): DataRecords;
	get dataSource(): DataSource;
	get em(): EditorModel;
	get index(): number;
	/**
	 * Handles changes to the record's attributes.
	 * This method triggers a change event for each property that has been altered.
	 *
	 * @private
	 * @name handleChange
	 */
	handleChange(): void;
	/**
	 * Get the path of the record.
	 * The path is a string that represents the location of the record within the data source.
	 * Optionally, include a property name to create a more specific path.
	 *
	 * @param {String} [prop] - Optional property name to include in the path.
	 * @param {Object} [opts] - Options for path generation.
	 * @param {Boolean} [opts.useIndex] - Whether to use the index of the record in the path.
	 * @returns {String} - The path of the record.
	 * @name getPath
	 * @example
	 * const pathRecord = record.getPath();
	 * // e.g., 'SOURCE_ID.record1'
	 * const pathRecord2 = record.getPath('myProp');
	 * // e.g., 'SOURCE_ID.record1.myProp'
	 */
	getPath(prop?: string, opts?: {
		useIndex?: boolean;
	}): string;
	/**
	 * Get both ID-based and index-based paths of the record.
	 * Returns an array containing the paths using both ID and index.
	 *
	 * @param {String} [prop] - Optional property name to include in the paths.
	 * @returns {Array<String>} - An array of paths.
	 * @name getPaths
	 * @example
	 * const paths = record.getPaths();
	 * // e.g., ['SOURCE_ID.record1', 'SOURCE_ID.0']
	 */
	getPaths(prop?: string): string[];
	/**
	 * Trigger a change event for the record.
	 * Optionally, include a property name to trigger a change event for a specific property.
	 *
	 * @param {String} [prop] - Optional property name to trigger a change event for a specific property.
	 * @name triggerChange
	 */
	triggerChange(prop?: string): void;
	/**
	 * Set a property on the record, optionally using transformers.
	 * If transformers are defined for the record, they will be applied to the value before setting it.
	 *
	 * @param {String|Object} attributeName - The name of the attribute to set, or an object of key-value pairs.
	 * @param {any} [value] - The value to set for the attribute.
	 * @param {Object} [options] - Options to apply when setting the attribute.
	 * @param {Boolean} [options.avoidTransformers] - If true, transformers will not be applied.
	 * @returns {DataRecord} - The instance of the DataRecord.
	 * @name set
	 * @example
	 * record.set('name', 'newValue');
	 * // Sets 'name' property to 'newValue'
	 */
	set<A extends _StringKey<T>>(attributeName: DeepPartialDot<T> | A, value?: SetOptions | T[A] | undefined, options?: SetOptions | undefined): this;
}
export declare class DataSources extends Collection<DataSource> {
	em: EditorModel;
	constructor(models: DataSource[] | DataSourceProps<DataRecordProps>[], em: EditorModel);
}
export declare class DataSourceManager extends ItemManagerModule<ModuleConfig, DataSources> {
	storageKey: string;
	events: typeof DataSourcesEvents;
	destroy(): void;
	constructor(em: EditorModel);
	/**
	 * Add new data source.
	 * @param {Object} props Data source properties.
	 * @returns {[DataSource]} Added data source.
	 * @example
	 * const ds = dsm.add({
	 *  id: 'my_data_source_id',
	 *  records: [
	 *    { id: 'id1', name: 'value1' },
	 *    { id: 'id2', name: 'value2' }
	 *  ]
	 * });
	 */
	add<DRProps extends DataRecordProps>(props: DataSourceProps<DRProps>, opts?: AddOptions): DataSource<DRProps>;
	/**
	 * Get data source.
	 * @param {String} id Data source id.
	 * @returns {[DataSource]} Data source.
	 * @example
	 * const ds = dsm.get('my_data_source_id');
	 */
	get(id: string): DataSource<DataRecordProps>;
	/**
	 * Get value from data sources by key
	 * @param {String} key Path to value.
	 * @param {any} defValue
	 * @returns {any}
	 * const value = dsm.getValue('ds_id.record_id.propName', 'defaultValue');
	 */
	getValue(key: string | string[], defValue: any): any;
	private getContext;
	/**
	 * Remove data source.
	 * @param {String|[DataSource]} id Id of the data source.
	 * @returns {[DataSource]} Removed data source.
	 * @example
	 * const removed = dsm.remove('DS_ID');
	 */
	remove(id: string | DataSource, opts?: RemoveOptions): any;
	/**
	 * Retrieve a data source, data record, and optional property path based on a string path.
	 * This method parses a string path to identify and retrieve the corresponding data source
	 * and data record. If a property path is included in the input, it will also be returned.
	 * The method is useful for accessing nested data within data sources.
	 *
	 * @param {String} path - The string path in the format 'dataSourceId.recordId.property'.
	 * @returns {[DataSource?, DataRecord?, String?]} - An array containing the data source,
	 * data record, and optional property path.
	 * @example
	 * const [dataSource, dataRecord, propPath] = dsm.fromPath('my_data_source_id.record_id.myProp');
	 * // e.g., [DataSource, DataRecord, 'myProp']
	 */
	fromPath(path: string): [
		(DataSource<DataRecordProps> | undefined)?,
		(DataRecord<DataRecordProps> | undefined)?,
		(string | undefined)?
	];
	/**
	 * Store data sources to a JSON object.
	 * @returns {Array} Stored data sources.
	 */
	store(): {
		[x: string]: any[];
	};
	/**
	 * Load data sources from a JSON object.
	 * @param {Object} data The data object containing data sources.
	 * @returns {Object} Loaded data sources.
	 */
	load(data: any): any;
	postLoad(): void;
}
declare enum EditorEvents {
	/**
	 * @event `update` Event triggered on any change of the project (eg. component added/removed, style changes, etc.)
	 * @example
	 * editor.on('update', () => { ... });
	 */
	update = "update",
	/**
	 * @event `undo` Undo executed.
	 * @example
	 * editor.on('undo', () => { ... });
	 */
	undo = "undo",
	/**
	 * @event `redo` Redo executed.
	 * @example
	 * editor.on('redo', () => { ... });
	 */
	redo = "redo",
	/**
	 * @event `load` Editor is loaded. At this stage, the project is loaded in the editor and elements in the canvas are rendered.
	 * @example
	 * editor.on('load', () => { ... });
	 */
	load = "load",
	/**
	 * @event `project:load` Project JSON loaded in the editor. The event is triggered on the initial load and on the `editor.loadProjectData` method.
	 * @example
	 * editor.on('project:load', ({ project, initial }) => { ... });
	 */
	projectLoad = "project:load",
	/**
	 * @event `project:get` Event triggered on request of the project data. This can be used to extend the project with custom data.
	 * @example
	 * editor.on('project:get', ({ project }) => { project.myCustomKey = 'value' });
	 */
	projectGet = "project:get",
	/**
	 * @event `log` Log message triggered.
	 * @example
	 * editor.on('log', (msg, opts) => { ... });
	 */
	log = "log",
	/**
	 * @event `telemetry:init` Initial telemetry data are sent.
	 * @example
	 * editor.on('telemetry:init', () => { ... });
	 */
	telemetryInit = "telemetry:init",
	/**
	 * @event `destroy` Editor started destroy (on `editor.destroy()`).
	 * @example
	 * editor.on('destroy', () => { ... });
	 */
	destroy = "destroy",
	/**
	 * @event `destroyed` Editor destroyed.
	 * @example
	 * editor.on('destroyed', () => { ... });
	 */
	destroyed = "destroyed"
}
export interface EditorLoadOptions {
	/** Clear the editor state (eg. dirty counter, undo manager, etc.). */
	clear?: boolean;
	initial?: boolean;
}
declare class EditorModel extends Model {
	defaults(): {
		editing: number;
		selected: number;
		clipboard: null;
		dmode: number;
		componentHovered: null;
		previousModel: null;
		changesCount: number;
		storables: never[];
		modules: never[];
		toLoad: never[];
		opened: {};
		device: string;
	};
	Model: typeof Model;
	Collection: typeof Collection;
	events: typeof EditorEvents;
	__skip: boolean;
	defaultRunning: boolean;
	destroyed: boolean;
	_config: InitEditorConfig;
	_storageTimeout?: ReturnType<typeof setTimeout>;
	attrsOrig: any;
	timedInterval?: ReturnType<typeof setTimeout>;
	updateItr?: ReturnType<typeof setTimeout>;
	view?: EditorView;
	get storables(): IStorableModule[];
	get modules(): IModule[];
	get toLoad(): ILoadableModule[];
	get selected(): Selected;
	get shallow(): EditorModel;
	get I18n(): I18nModule;
	get Utils(): UtilsModule;
	get Commands(): CommandsModule;
	get Keymaps(): KeymapsModule;
	get Modal(): ModalModule;
	get Panels(): PanelManager;
	get CodeManager(): CodeManagerModule;
	get UndoManager(): UndoManagerModule;
	get RichTextEditor(): RichTextEditorModule;
	get Canvas(): CanvasModule;
	get Editor(): Editor;
	get Components(): ComponentManager;
	get Css(): CssComposer;
	get Blocks(): BlockManager;
	get Selectors(): SelectorManager;
	get Storage(): StorageManager;
	get Traits(): TraitManager;
	get Parser(): ParserModule;
	get Layers(): LayerManager;
	get Assets(): AssetManager;
	get Devices(): DeviceManager;
	get Pages(): PageManager;
	get Styles(): StyleManager;
	get DataSources(): DataSourceManager;
	constructor(conf?: EditorConfig);
	_checkReady(): void;
	getContainer(): HTMLElement | undefined;
	listenLog(event: string): void;
	get config(): InitEditorConfig;
	get version(): string;
	get isHeadless(): boolean;
	get isShallow(): boolean;
	initModules(): void;
	/**
	 * Get configurations
	 * @param  {string} [prop] Property name
	 * @return {any} Returns the configuration object or
	 *  the value of the specified property
	 */
	getConfig<P extends EditorConfigKeys | undefined = undefined, R = P extends EditorConfigKeys ? EditorConfig[P] : EditorConfig>(prop?: P): R;
	/**
	 * Should be called once all modules and plugins are loaded
	 * @private
	 */
	loadOnStart(): void;
	/**
	 * Set the alert before unload in case it's requested
	 * and there are unsaved changes
	 * @private
	 */
	updateChanges(m: any, v: any, opts: ObjectAny): void;
	/**
	 * Load generic module
	 */
	private loadModule;
	private loadStorableModule;
	/**
	 * Initialize editor model and set editor instance
	 * @param {Editor} editor Editor instance
	 * @return {this}
	 * @public
	 */
	init(editor: Editor, opts?: {}): void;
	getEditor(): Editor;
	/**
	 * This method handles updates on the editor and tries to store them
	 * if requested and if the changesCount is exceeded
	 * @param  {Object} model
	 * @param  {any} val  Value
	 * @param  {Object} opt  Options
	 * @private
	 * */
	handleUpdates(model: any, val: any, opt?: any): void;
	changesUp(opts: any): void;
	/**
	 * Callback on component hover
	 * @param   {Object}   Model
	 * @param   {Mixed}   New value
	 * @param   {Object}   Options
	 * @private
	 * */
	componentHovered(editor: any, component: any, options: any): void;
	/**
	 * Returns model of the selected component
	 * @return {Component|null}
	 * @public
	 */
	getSelected(): Component | undefined;
	/**
	 * Returns an array of all selected components
	 * @return {Array}
	 * @public
	 */
	getSelectedAll(): Component[];
	/**
	 * Select a component
	 * @param  {Component} el Component to select
	 * @param  {Object} [opts={}] Options, optional
	 * @public
	 */
	setSelected(el?: Component | Component[], opts?: any): void;
	/**
	 * Add component to selection
	 * @param  {Component|Array<Component>} component Component to select
	 * @param  {Object} [opts={}] Options, optional
	 * @public
	 */
	addSelected(component: Component | Component[], opts?: any): void;
	/**
	 * Remove component from selection
	 * @param  {Component|Array<Component>} component Component to select
	 * @param  {Object} [opts={}] Options, optional
	 * @public
	 */
	removeSelected(component: Component | Component[], opts?: {}): void;
	/**
	 * Toggle component selection
	 * @param  {Component|Array<Component>} component Component to select
	 * @param  {Object} [opts={}] Options, optional
	 * @public
	 */
	toggleSelected(component: Component | Component[], opts?: any): void;
	/**
	 * Hover a component
	 * @param  {Component|Array<Component>} cmp Component to select
	 * @param  {Object} [opts={}] Options, optional
	 * @private
	 */
	setHovered(cmp?: Component | null, opts?: any): void;
	getHovered(): Component | undefined;
	/**
	 * Set components inside editor's canvas. This method overrides actual components
	 * @param {Object|string} components HTML string or components model
	 * @param {Object} opt the options object to be used by the [setComponents]{@link setComponents} method
	 * @return {this}
	 * @public
	 */
	setComponents(components: ComponentAdd, opt?: AddComponentsOption): void;
	/**
	 * Returns components model from the editor's canvas
	 * @return {Components}
	 * @private
	 */
	getComponents(): string | undefined;
	/**
	 * Set style inside editor's canvas. This method overrides actual style
	 * @param {Object|string} style CSS string or style model
	 * @param {Object} opt the options object to be used by the `CssRules.add` method
	 * @return {this}
	 * @public
	 */
	setStyle(style: any, opt?: {}): this;
	/**
	 * Add styles to the editor
	 * @param {Array<Object>|Object|string} style CSS string or style model
	 * @returns {Array<CssRule>}
	 * @public
	 */
	addStyle(style: any, opts?: {}): CssRule[];
	/**
	 * Returns rules/style model from the editor's canvas
	 * @return {Rules}
	 * @private
	 */
	getStyle(): CssRules;
	/**
	 * Change the selector state
	 * @param {String} value State value
	 * @returns {this}
	 */
	setState(value: string): this;
	/**
	 * Get the current selector state
	 * @returns {String}
	 */
	getState(): string;
	/**
	 * Returns HTML built inside canvas
	 * @param {Object} [opts={}] Options
	 * @returns {string} HTML string
	 * @public
	 */
	getHtml(opts?: {
		component?: Component;
	} & HTMLGeneratorBuildOptions): string;
	/**
	 * Returns CSS built inside canvas
	 * @param {Object} [opts={}] Options
	 * @returns {string} CSS string
	 * @public
	 */
	getCss(opts?: {
		component?: Component;
		avoidProtected?: boolean;
	} & CssGeneratorBuildOptions): string | undefined;
	/**
	 * Returns JS of all components
	 * @return {string} JS string
	 * @public
	 */
	getJs(opts?: {
		component?: Component;
	}): string;
	/**
	 * Store data to the current storage.
	 * @public
	 */
	store<T extends StorageOptions>(options?: T): Promise<ProjectData>;
	/**
	 * Load data from the current storage.
	 * @public
	 */
	load<T extends StorageOptions>(options?: T, loadOptions?: EditorLoadOptions): Promise<ProjectData>;
	storeData(): ProjectData;
	loadData(project?: ProjectData, opts?: EditorLoadOptions): ProjectData;
	/**
	 * Returns device model by name
	 * @return {Device|null}
	 * @private
	 */
	getDeviceModel(): Device | undefined;
	/**
	 * Run default command if setted
	 * @param {Object} [opts={}] Options
	 * @private
	 */
	runDefault(opts?: {}): void;
	/**
	 * Stop default command
	 * @param {Object} [opts={}] Options
	 * @private
	 */
	stopDefault(opts?: {}): void;
	/**
	 * Update canvas dimensions and refresh data useful for tools positioning
	 * @public
	 */
	refreshCanvas(opts?: any): void;
	/**
	 * Clear all selected stuf inside the window, sometimes is useful to call before
	 * doing some dragging opearation
	 * @param {Window} win If not passed the current one will be used
	 * @private
	 */
	clearSelection(win?: Window): void;
	/**
	 * Get the current media text
	 * @return {string}
	 */
	getCurrentMedia(): string;
	/**
	 * Return the component wrapper
	 * @return {Component}
	 */
	getWrapper(): ComponentWrapper | undefined;
	setCurrentFrame(frameView?: FrameView): this;
	getCurrentFrame(): FrameView | undefined;
	getCurrentFrameModel(): Frame | undefined;
	getIcon(icon: string): any;
	/**
	 * Return the count of changes made to the content and not yet stored.
	 * This count resets at any `store()`
	 * @return {number}
	 */
	getDirtyCount(): number;
	clearDirtyCount(): this;
	getZoomDecimal(): number;
	getZoomMultiplier(): number;
	setDragMode(value: DragMode): this;
	getDragMode(component?: Component): DragMode;
	t(...args: any[]): any;
	/**
	 * Returns true if the editor is in absolute mode
	 * @returns {Boolean}
	 */
	inAbsoluteMode(component?: Component): boolean;
	/**
	 * Destroy editor
	 */
	destroyAll(): void;
	getEditing(): Component | undefined;
	setEditing(value: boolean | ComponentView): this;
	isEditing(): boolean;
	log(msg: string, opts?: any): void;
	logInfo(msg: string, opts?: any): void;
	logWarning(msg: string, opts?: any): void;
	logError(msg: string, opts?: any): void;
	initBaseColorPicker(el: any, opts?: {}): any;
	/**
	 * Execute actions without triggering the storage and undo manager.
	 * @param  {Function} clb
	 * @private
	 */
	skip(clb: Function): void;
	/**
	 * Set/get data from the HTMLElement
	 * @param  {HTMLElement} el
	 * @param  {string} name Data name
	 * @param  {any} value Date value
	 * @return {any}
	 * @private
	 */
	data(el: any, name: string, value: any): any;
}
export interface SelectorProps {
	name: string;
	label?: string;
	type?: number;
	active?: boolean;
	private?: boolean;
	protected?: boolean;
}
export interface SelectorPropsCustom extends SelectorProps {
	[key: string]: unknown;
}
export interface SelectorOptions {
	config?: SelectorManagerConfig;
	em?: EditorModel;
}
/**
 * @typedef Selector
 * @property {String} name Selector name, eg. `my-class`
 * @property {String} label Selector label, eg. `My Class`
 * @property {Number} [type=1] Type of the selector. 1 (class) | 2 (id)
 * @property {Boolean} [active=true] If not active, it's not selectable by the Style Manager.
 * @property {Boolean} [private=false] If true, it can't be seen by the Style Manager, but it will be rendered in the canvas and in export code.
 * @property {Boolean} [protected=false] If true, it can't be removed from the attached component.
 */
export declare class Selector extends Model<SelectorPropsCustom> {
	defaults(): {
		name: string;
		label: string;
		type: number;
		active: boolean;
		private: boolean;
		protected: boolean;
		_undo: boolean;
	};
	static readonly TYPE_CLASS = 1;
	static readonly TYPE_ID = 2;
	em?: EditorModel;
	/**
	 * @hideconstructor
	 */
	constructor(props: SelectorPropsCustom, opts?: SelectorOptions);
	isId(): boolean;
	isClass(): boolean;
	getFullName(opts?: any): string;
	/**
	 * Get selector as a string.
	 * @returns {String}
	 * @example
	 * // Given such selector: { name: 'my-selector', type: 2 }
	 * console.log(selector.toString());
	 * // -> `#my-selector`
	 */
	toString(): string;
	/**
	 * Get selector name.
	 * @returns {String}
	 * @example
	 * // Given such selector: { name: 'my-selector', label: 'My selector' }
	 * console.log(selector.getName());
	 * // -> `my-selector`
	 */
	getName(): string;
	/**
	 * Get selector label.
	 * @returns {String}
	 * @example
	 * // Given such selector: { name: 'my-selector', label: 'My selector' }
	 * console.log(selector.getLabel());
	 * // -> `My selector`
	 */
	getLabel(): string;
	/**
	 * Update selector label.
	 * @param {String} label New label
	 * @example
	 * // Given such selector: { name: 'my-selector', label: 'My selector' }
	 * selector.setLabel('New Label')
	 * console.log(selector.getLabel());
	 * // -> `New Label`
	 */
	setLabel(label: string): this;
	/**
	 * Get selector active state.
	 * @returns {Boolean}
	 */
	getActive(): boolean;
	/**
	 * Update selector active state.
	 * @param {Boolean} value New active state
	 */
	setActive(value: boolean): this;
	toJSON(opts?: {}): any;
	/**
	 * Escape string
	 * @param {string} name
	 * @return {string}
	 * @private
	 */
	static escapeName(name: string): string;
}
export interface FullNameOptions {
	combination?: boolean;
	array?: boolean;
}
export declare class Selectors extends Collection<Selector> {
	modelId(attr: any): string;
	getStyleable(): Selector[];
	getValid({ noDisabled }?: any): Selector[];
	getFullString(collection?: Selector[] | null, opts?: {
		sort?: boolean;
	}): string;
	getFullName<T extends FullNameOptions>(opts?: T): T["array"] extends true ? string[] : string;
}
export interface DataResolverListenerProps {
	em: EditorModel;
	resolver: DataResolver;
	onUpdate: (value: any) => void;
}
declare class DataResolverListener {
	private listeners;
	private em;
	private onUpdate;
	private model;
	resolver: DataResolver;
	constructor(props: DataResolverListenerProps);
	private onChange;
	private createListener;
	listenToResolver(): void;
	private listenToConditionalVariable;
	private listenToDataVariable;
	private removeListeners;
	destroy(): void;
}
declare class CssRuleView extends View<CssRule> {
	config: any;
	constructor(o?: any);
	get frameView(): FrameView;
	remove(): this;
	updateStyles(): void;
	/** @ts-ignore */
	tagName(): string;
	render(): this;
}
export type StyleProps = Record<string, string | string[] | DataVariableProps | DataConditionProps>;
export interface UpdateStyleOptions extends SetOptions {
	partial?: boolean;
	addStyle?: StyleProps;
	inline?: boolean;
	noEvent?: boolean;
}
export type StyleableView = ComponentView | CssRuleView;
declare class StyleableModel<T extends ObjectHash = any> extends Model<T> {
	em?: EditorModel;
	views: StyleableView[];
	styleResolverListeners: Record<string, DataResolverListener>;
	constructor(attributes: T, options?: {
		em?: EditorModel;
	});
	/**
	 * Parse style string to an object
	 * @param  {string} str
	 * @returns
	 */
	parseStyle(str: string): Record<string, string | string[]>;
	/**
	 * Trigger style change event with a new object instance
	 * @param {Object} prop
	 * @return {Object}
	 */
	extendStyle(prop: ObjectAny): ObjectAny;
	/**
	 * Get style object
	 * @return {Object}
	 */
	getStyle(prop?: string | ObjectAny, opts?: {
		skipResolve?: boolean;
	}): StyleProps;
	/**
	 * Set new style object
	 * @param {Object|string} prop
	 * @param {Object} opts
	 * @return {Object} Applied properties
	 */
	setStyle(prop?: string | ObjectAny, opts?: UpdateStyleOptions): {
		[x: string]: any;
	};
	listenToDataResolver(resolver: DataResolver, styleProp: string): void;
	getView(frame?: Frame): StyleableView | undefined;
	setView(view: StyleableView): void;
	removeView(view: StyleableView): void;
	updateView(): void;
	getResolvedStyles(style: StyleProps): StyleProps;
	/**
	 * Add style property
	 * @param {Object|string} prop
	 * @param {string} value
	 * @example
	 * this.addStyle({color: 'red'});
	 * this.addStyle('color', 'blue');
	 */
	addStyle(prop: string | ObjectAny, value?: any, opts?: UpdateStyleOptions): void;
	/**
	 * Remove style property
	 * @param {string} prop
	 */
	removeStyle(prop: string): void;
	/**
	 * Returns string of style properties
	 * @param {Object} [opts={}] Options
	 * @return {String}
	 */
	styleToString(opts?: ObjectAny): string;
	getSelectors(): Selectors;
	getSelectorsString(opts?: ObjectAny): any;
}
/** @private */
export interface CssRuleProperties {
	/**
	 * Array of selectors
	 */
	selectors: Selector[];
	/**
	 * Object containing style definitions
	 * @default {}
	 */
	style?: Record<string, any>;
	/**
	 * Additional string css selectors
	 * @default ''
	 */
	selectorsAdd?: string;
	/**
	 * Type of at-rule, eg. `media`, 'font-face'
	 * @default ''
	 */
	atRuleType?: string;
	/**
	 * At-rule value, eg. `(max-width: 1000px)`
	 * @default ''
	 */
	mediaText?: string;
	/**
	 * This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations.
	 * @default false
	 */
	singleAtRule?: boolean;
	/**
	 * State of the rule, eg: `hover`, `focused`
	 * @default ''
	 */
	state?: string;
	/**
	 * If true, sets `!important` on all properties. You can also pass an array to specify properties on which to use important.
	 * @default false
	 */
	important?: boolean | string[];
	/**
	 * Indicates if the rule is stylable from the editor.
	 * @default true
	 */
	stylable?: boolean | string[];
	/**
	 * Group for rules.
	 * @default ''
	 */
	group?: string;
	/**
	 * If true, the rule won't be stored in JSON or showed in CSS export.
	 * @default false
	 */
	shallow?: boolean;
}
export interface CssRuleJSON extends Omit<CssRuleProperties, "selectors"> {
	selectors: (string | SelectorProps)[];
}
/**
 * @typedef CssRule
 * @property {Array<Selector>} selectors Array of selectors
 * @property {Object} style Object containing style definitions
 * @property {String} [selectorsAdd=''] Additional string css selectors
 * @property {String} [atRuleType=''] Type of at-rule, eg. `media`, 'font-face'
 * @property {String} [mediaText=''] At-rule value, eg. `(max-width: 1000px)`
 * @property {Boolean} [singleAtRule=false] This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations
 * @property {String} [state=''] State of the rule, eg: `hover`, `focused`
 * @property {Boolean|Array<String>} [important=false] If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important
 * @property {Boolean} [stylable=true] Indicates if the rule is stylable from the editor
 *
 * [Device]: device.html
 * [State]: state.html
 * [Component]: component.html
 */
export declare class CssRule extends StyleableModel<CssRuleProperties> {
	config: CssRuleProperties;
	em?: EditorModel;
	opt: any;
	views: CssRuleView[];
	defaults(): {
		selectors: never[];
		selectorsAdd: string;
		style: {};
		mediaText: string;
		state: string;
		stylable: boolean;
		atRuleType: string;
		singleAtRule: boolean;
		important: boolean;
		group: string;
		shallow: boolean;
		_undo: boolean;
	};
	constructor(props: CssRuleProperties, opt?: any);
	__onChange(m: CssRule, opts: any): void;
	clone(): CssRule;
	ensureSelectors(m: any, c: any, opts: any): void;
	/**
	 * Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
	 * @returns {String}
	 * @example
	 * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
	 *  atRuleType: 'media',
	 *  atRuleParams: '(min-width: 500px)'
	 * });
	 * cssRule.getAtRule(); // "@media (min-width: 500px)"
	 */
	getAtRule(): string;
	/**
	 * Return selectors of the rule as a string
	 * @param {Object} [opts] Options
	 * @param {Boolean} [opts.skipState] Skip state from the result
	 * @returns {String}
	 * @example
	 * const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
	 * cssRule.selectorsToString(); // ".class1:hover"
	 * cssRule.selectorsToString({ skipState: true }); // ".class1"
	 */
	selectorsToString(opts?: ObjectAny): string;
	/**
	 * Get declaration block (without the at-rule statement)
	 * @param {Object} [opts={}] Options (same as in `selectorsToString`)
	 * @returns {String}
	 * @example
	 * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
	 *  atRuleType: 'media',
	 *  atRuleParams: '(min-width: 500px)'
	 * });
	 * cssRule.getDeclaration() // ".class1{color:red;}"
	 */
	getDeclaration(opts?: ObjectAny): string;
	/**
	 * Get the Device the rule is related to.
	 * @returns {[Device]|null}
	 * @example
	 * const device = rule.getDevice();
	 * console.log(device?.getName());
	 */
	getDevice(): Device;
	/**
	 * Get the State the rule is related to.
	 * @returns {[State]|null}
	 * @example
	 * const state = rule.getState();
	 * console.log(state?.getLabel());
	 */
	getState(): State;
	/**
	 * Returns the related Component (valid only for component-specific rules).
	 * @returns {[Component]|null}
	 * @example
	 * const cmp = rule.getComponent();
	 * console.log(cmp?.toHTML());
	 */
	getComponent(): Component | null;
	/**
	 * Return the CSS string of the rule
	 * @param {Object} [opts={}] Options (same as in `getDeclaration`)
	 * @return {String} CSS string
	 * @example
	 * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
	 *  atRuleType: 'media',
	 *  atRuleParams: '(min-width: 500px)'
	 * });
	 * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"
	 */
	toCSS(opts?: ObjectAny): string;
	toJSON(...args: any): any;
	/**
	 * Compare the actual model with parameters
	 * @param {Object} selectors Collection of selectors
	 * @param {String} state Css rule state
	 * @param {String} width For which device this style is oriented
	 * @param {Object} ruleProps Other rule props
	 * @returns  {Boolean}
	 * @private
	 */
	compare(selectors: any, state?: string, width?: string, ruleProps?: Partial<CssRuleProperties>): boolean;
}
export interface ParsedCssRule {
	selectors: string | string[];
	style: Record<string, string>;
	atRule?: string;
	params?: string;
}
export type CustomParserCss = (input: string, editor: Editor) => ParsedCssRule[];
export type CustomParserHtml = (input: string, options: HTMLParserOptions) => HTMLElement;
export interface HTMLParseResult {
	html: ComponentDefinitionDefined | ComponentDefinitionDefined[];
	css?: CssRuleJSON[];
	doctype?: string;
	root?: ComponentDefinitionDefined;
	head?: ComponentDefinitionDefined;
}
export interface ParseNodeOptions extends HTMLParserOptions {
	inSvg?: boolean;
	skipChildren?: boolean;
}
export interface HTMLParserOptions extends OptionAsDocument {
	/**
	 * DOMParser mime type.
	 * If you use the `text/html` parser, it will fix the invalid syntax automatically.
	 * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString
	 * @default 'text/html'
	 */
	htmlType?: DOMParserSupportedType;
	/**
	 * Allow <script> tags.
	 * @default false
	 */
	allowScripts?: boolean;
	/**
	 * Allow unsafe HTML attributes (eg. `on*` inline event handlers).
	 * @default false
	 */
	allowUnsafeAttr?: boolean;
	/**
	 * Allow unsafe HTML attribute values (eg. `src="javascript:..."`).
	 * @default false
	 */
	allowUnsafeAttrValue?: boolean;
	/**
	 * When false, removes empty text nodes when parsed, unless they contain a space.
	 * @default false
	 */
	keepEmptyTextNodes?: boolean;
	/**
	 * Indicate if or how to detect if the passed HTML string should be parsed as a document.
	 */
	detectDocument?: boolean | ((html: string) => boolean);
	/**
	 * Custom transformer to run before passing the input HTML to the parser.
	 * A common use case might be to sanitize the input string.
	 * @example
	 * preParser: htmlString => DOMPurify.sanitize(htmlString)
	 */
	preParser?: (input: string, opts: {
		editor: Editor;
	}) => string;
}
export interface ParserConfig {
	/**
	 * Let the editor know which HTML tags should be treated as part of the text component.
	 * @default ['br', 'b', 'i', 'u', 'a', 'ul', 'ol']
	 */
	textTags?: string[];
	/**
	 * Let the editor know which Component types should be treated as part of the text component.
	 * @default ['text', 'textnode', 'comment']
	 */
	textTypes?: string[];
	/**
	 * Custom CSS parser.
	 * @see https://grapesjs.com/docs/guides/Custom-CSS-parser.html
	 */
	parserCss?: CustomParserCss;
	/**
	 * Custom HTML parser.
	 * At the moment, the custom HTML parser should rely on DOM Node instance as the result.
	 * @example
	 * // The return should be an instance of an Node as the root to traverse
	 * // https://developer.mozilla.org/en-US/docs/Web/API/Node
	 * // Here the result will be XMLDocument, which extends Node.
	 * parserHtml: (input, opts = {}) => (new DOMParser()).parseFromString(input, 'text/xml')
	 */
	parserHtml?: CustomParserHtml;
	/**
	 * Default HTML parser options (used in `parserModule.parseHtml('<div...', options)`).
	 */
	optionsHtml?: HTMLParserOptions;
}
export interface NOOP {
}
export type Debounced = Function & {
	cancel(): void;
};
export type SetOptions = Backbone.ModelSetOptions & {
	avoidStore?: boolean;
	avoidTransformers?: boolean;
	partial?: boolean;
};
export type AddOptions = Backbone.AddOptions & {
	temporary?: boolean;
	action?: string;
};
export type DisableOptions = {
	fromMove?: boolean;
};
export type LocaleOptions = {
	locale?: boolean;
};
export type UndoOptions = {
	fromUndo?: boolean;
};
export type WithHTMLParserOptions = {
	parserOptions?: HTMLParserOptions;
};
export type RemoveOptions = Backbone.Silenceable & UndoOptions & {
	dangerously?: boolean;
	temporary?: boolean;
};
export type EventHandler = Backbone.EventHandler;
export type ObjectHash = Backbone.ObjectHash;
export type ObjectAny = Record<string, any>;
export type ObjectStrings = Record<string, string>;
export type Nullable = undefined | null | false;
export interface OptionAsDocument {
	/**
	 * Treat the HTML string as document (option valid on the root component, eg. will include doctype, html, head, etc.).
	 */
	asDocument?: boolean;
}
export type LiteralUnion<T, U> = T | (U & NOOP);
export type Position = {
	x: number;
	y: number;
};
export interface Coordinates {
	x: number;
	y: number;
}
export interface Dimensions {
	height: number;
	width: number;
}
export interface BoxRect extends Coordinates, Dimensions {
}
export type ElementRect = {
	top: number;
	left: number;
	width: number;
	height: number;
};
export type CombinedModelConstructorOptions<E, M extends Model<any, any, E> = Model> = Backbone.ModelConstructorOptions<M> & E;
export interface ViewOptions<TModel extends Model | undefined = Model, TElement extends Element = HTMLElement> extends Backbone.ViewOptions<TModel, TElement> {
}
declare class Model<T extends ObjectHash = any, S = SetOptions, E = any> extends Backbone.Model<T, S, E> {
}
declare class Collection<T extends Model = Model> extends Backbone.Collection<T> {
}
declare class View<T extends Model | undefined = Model, E extends Element = HTMLElement> extends Backbone.View<T, E> {
}
export type PickMatching<T, V> = {
	[K in keyof T as T[K] extends V ? K : never]: T[K];
};
export type ExtractMethods<T> = PickMatching<T, Function>;
declare enum CoordinatesTypes {
	Screen = "screen",
	World = "world"
}
export type PrevToNewIdMap = Record<string, string>;
export interface IModule<TConfig extends ModuleConfig = ModuleConfig> extends IBaseModule<TConfig> {
	destroy(): void;
	postLoad(key: any): any;
	onInit(): void;
	onLoad?(): void;
	name: string;
	postRender?(view: any): void;
}
export interface IBaseModule<TConfig extends any> {
	em: EditorModel;
	config: TConfig;
}
export interface ModuleConfig {
	name?: string;
	stylePrefix?: string;
	appendTo?: string | HTMLElement;
}
export interface IStorableModule {
	storageKey: string[] | string;
	store(result: any): any;
	load(keys: ProjectData): void;
	clear(): void;
}
export interface ILoadableModule {
	onLoad(): void;
}
declare abstract class Module<T extends ModuleConfig = ModuleConfig> implements IModule<T> {
	private _em;
	private _config;
	private _name;
	debounced: Debounced[];
	collections: Collection[];
	cls: any[];
	state?: Model;
	events: any;
	model?: any;
	view?: any;
	constructor(em: EditorModel, moduleName: string, defaults?: T);
	get em(): EditorModel;
	get config(): T & {
		pStylePrefix?: string;
	};
	render(opts?: any): HTMLElement | JQuery<HTMLElement> | void;
	postLoad(key: any): void;
	onInit(): void;
	get name(): string;
	getConfig<P extends keyof T | undefined = undefined, R = P extends keyof T ? T[P] : T>(name?: P): R & {
		pStylePrefix?: string;
	};
	__logWarn(str: string, opts?: {}): void;
	postRender?(view: any): void;
	destroy(): void;
	__destroy(): void;
	/**
	 * Move the main DOM element of the module.
	 * To execute only post editor render (in postRender)
	 */
	__appendTo(): void;
}
declare abstract class ItemManagerModule<TConf extends ModuleConfig = ModuleConfig, TCollection extends Collection = Collection> extends Module<TConf> {
	cls: any[];
	all: TCollection;
	view?: View;
	constructor(em: EditorModel, moduleName: string, all: any, events?: any, defaults?: TConf, opts?: {
		skipListen?: boolean;
	});
	private: boolean;
	abstract storageKey: string;
	abstract destroy(): void;
	postLoad(key: any): void;
	render(opts?: any): void;
	getProjectData(data?: any): any;
	loadProjectData(data?: any, param?: {
		all?: TCollection;
		onResult?: Function;
		reset?: boolean;
	}): any;
	clear(opts?: {}): this;
	getAll(): TCollection | any;
	getAllMap(): {
		[key: string]: TCollection extends Collection<infer C> ? C : unknown;
	};
	__initListen(opts?: any): void;
	__remove(model: any, opts?: any): any;
	__catchAllEvent(event: any, model: any, coll: any, opts?: any): void;
	__appendTo(renderProps?: any): void;
	__onAllEvent(): void;
	_createId(len?: number): string;
	__listenAdd(model: TCollection, event: string): void;
	__listenRemove(model: TCollection, event: string): void;
	__listenUpdate(model: TCollection, event: string): void;
	__destroy(): void;
}
declare function html(literals: TemplateStringsArray, ...substs: string[]): string;
export type GeneralEvent = "canvasScroll" | "undo" | "redo" | "load" | "update";
export type EditorBuiltInEvents = ComponentEvent | BlockEvent | AssetEvent | KeymapEvent | StyleManagerEvent | StorageEvent | CanvasEvent | SelectorEvent | RichTextEditorEvent | ModalEvent | CommandEvent | GeneralEvent;
export type EditorEvent = LiteralUnion<EditorBuiltInEvents, string>;
export type EditorConfigType = EditorConfig & {
	pStylePrefix?: string;
};
export type EditorModelParam<T extends keyof EditorModel, N extends number> = Parameters<EditorModel[T]>[N];
export declare class Editor implements IBaseModule<EditorConfig> {
	editorView?: EditorView;
	editor: EditorModel;
	$: any;
	em: EditorModel;
	config: EditorConfigType;
	events: typeof EditorEvents;
	constructor(config?: EditorConfig, opts?: any);
	get Config(): InitEditorConfig;
	get I18n(): I18nModule;
	get Utils(): UtilsModule;
	get Commands(): CommandsModule;
	get Keymaps(): KeymapsModule;
	get Modal(): ModalModule;
	get Panels(): PanelManager;
	get Canvas(): CanvasModule;
	get Parser(): ParserModule;
	get CodeManager(): CodeManagerModule;
	get UndoManager(): UndoManagerModule;
	get RichTextEditor(): RichTextEditorModule;
	get Pages(): PageManager;
	get Components(): ComponentManager;
	get DomComponents(): ComponentManager;
	get Layers(): LayerManager;
	get LayerManager(): LayerManager;
	get Css(): CssComposer;
	get CssComposer(): CssComposer;
	get Storage(): StorageManager;
	get StorageManager(): StorageManager;
	get Assets(): AssetManager;
	get AssetManager(): AssetManager;
	get Blocks(): BlockManager;
	get BlockManager(): BlockManager;
	get Traits(): TraitManager;
	get TraitManager(): TraitManager;
	get Selectors(): SelectorManager;
	get SelectorManager(): SelectorManager;
	get Styles(): StyleManager;
	get StyleManager(): StyleManager;
	get Devices(): DeviceManager;
	get DeviceManager(): DeviceManager;
	get DataSources(): DataSourceManager;
	get EditorModel(): EditorModel;
	/**
	 * Returns configuration object
	 * @returns {any} Returns the configuration object or the value of the specified property
	 */
	getConfig<P extends EditorConfigKeys | undefined = undefined, R = P extends EditorConfigKeys ? EditorConfig[P] : EditorConfig>(prop?: P): R;
	/**
	 * Returns HTML built inside canvas
	 * @param {Object} [opts={}] Options
	 * @param {Component} [opts.component] Return the HTML of a specific Component
	 * @param {Boolean} [opts.cleanId=false] Remove unnecessary IDs (eg. those created automatically)
	 * @returns {string} HTML string
	 */
	getHtml(opts?: EditorModelParam<"getHtml", 0>): string;
	/**
	 * Returns CSS built inside canvas
	 * @param {Object} [opts={}] Options
	 * @param {Component} [opts.component] Return the CSS of a specific Component
	 * @param {Boolean} [opts.json=false] Return an array of CssRules instead of the CSS string
	 * @param {Boolean} [opts.avoidProtected=false] Don't include protected CSS
	 * @param {Boolean} [opts.onlyMatched=false] Return only rules matched by the passed component.
	 * @param {Boolean} [opts.keepUnusedStyles=false] Force keep all defined rules. Toggle on in case output looks different inside/outside of the editor.
	 * @returns {String|Array<CssRule>} CSS string or array of CssRules
	 */
	getCss(opts?: EditorModelParam<"getCss", 0>): string | undefined;
	/**
	 * Returns JS of all components
	 * @param {Object} [opts={}] Options
	 * @param {Component} [opts.component] Get the JS of a specific component
	 * @returns {String} JS string
	 */
	getJs(opts?: EditorModelParam<"getJs", 0>): string;
	/**
	 * Return the complete tree of components. Use `getWrapper` to include also the wrapper
	 * @return {Components}
	 */
	getComponents(): Components;
	/**
	 * Return the wrapper and its all components
	 * @return {Component}
	 */
	getWrapper(): ComponentWrapper | undefined;
	/**
	 * Set components inside editor's canvas. This method overrides actual components
	 * @param {Array<Object>|Object|string} components HTML string or components model
	 * @param {Object} opt the options object to be used by the [setComponents]{@link em#setComponents} method
	 * @return {this}
	 * @example
	 * editor.setComponents('<div class="cls">New component</div>');
	 * // or
	 * editor.setComponents({
	 *  type: 'text',
	 *   classes:['cls'],
	 *   content: 'New component'
	 * });
	 */
	setComponents(components: ComponentAdd, opt?: AddComponentsOption): this;
	/**
	 * Add components
	 * @param {Array<Object>|Object|string} components HTML string or components model
	 * @param {Object} opts Options
	 * @param {Boolean} [opts.avoidUpdateStyle=false] If the HTML string contains styles,
	 * by default, they will be created and, if already exist, updated. When this option
	 * is true, styles already created will not be updated.
	 * @return {Array<Component>}
	 * @example
	 * editor.addComponents('<div class="cls">New component</div>');
	 * // or
	 * editor.addComponents({
	 *  type: 'text',
	 *   classes:['cls'],
	 *   content: 'New component'
	 * });
	 */
	addComponents(components: ComponentAdd, opts?: AddOptions): Component[];
	/**
	 * Returns style in JSON format object
	 * @return {Object}
	 */
	getStyle(): CssRules;
	/**
	 * Set style inside editor's canvas. This method overrides actual style
	 * @param {Array<Object>|Object|string} style CSS string or style model
	 * @return {this}
	 * @example
	 * editor.setStyle('.cls{color: red}');
	 * //or
	 * editor.setStyle({
	 *   selectors: ['cls'],
	 *   style: { color: 'red' }
	 * });
	 */
	setStyle(style: any, opt?: any): this;
	/**
	 * Add styles to the editor
	 * @param {Array<Object>|Object|string} style CSS string or style model
	 * @returns {Array<CssRule>} Array of created CssRule instances
	 * @example
	 * editor.addStyle('.cls{color: red}');
	 */
	addStyle(style: any, opts?: {}): CssRule[];
	/**
	 * Returns the last selected component, if there is one
	 * @return {Model}
	 */
	getSelected(): Component | undefined;
	/**
	 * Returns an array of all selected components
	 * @return {Array}
	 */
	getSelectedAll(): Component[];
	/**
	 * Get a stylable entity from the selected component.
	 * If you select a component without classes the entity is the Component
	 * itself and all changes will go inside its 'style' attribute. Otherwise,
	 * if the selected component has one or more classes, the function will
	 * return the corresponding CSS Rule
	 * @return {Model}
	 */
	getSelectedToStyle(): any;
	/**
	 * Select a component
	 * @param  {Component|HTMLElement} el Component to select
	 * @param  {Object} [opts] Options
	 * @param  {Boolean} [opts.scroll] Scroll canvas to the selected element
	 * @return {this}
	 * @example
	 * // Select dropped block
	 * editor.on('block:drag:stop', function(model) {
	 *  editor.select(model);
	 * });
	 */
	select(el?: EditorModelParam<"setSelected", 0>, opts?: {
		scroll?: boolean;
	}): this;
	/**
	 * Add component to selection
	 * @param  {Component|HTMLElement|Array} el Component to select
	 * @return {this}
	 * @example
	 * editor.selectAdd(model);
	 */
	selectAdd(el: EditorModelParam<"addSelected", 0>): this;
	/**
	 * Remove component from selection
	 * @param  {Component|HTMLElement|Array} el Component to select
	 * @return {this}
	 * @example
	 * editor.selectRemove(model);
	 */
	selectRemove(el: EditorModelParam<"removeSelected", 0>): this;
	/**
	 * Toggle component selection
	 * @param  {Component|HTMLElement|Array} el Component to select
	 * @return {this}
	 * @example
	 * editor.selectToggle(model);
	 */
	selectToggle(el: EditorModelParam<"toggleSelected", 0>): this;
	/**
	 * Returns, if active, the Component enabled in rich text editing mode.
	 * @returns {Component|null}
	 * @example
	 * const textComp = editor.getEditing();
	 * if (textComp) {
	 *  console.log('HTML: ', textComp.toHTML());
	 * }
	 */
	getEditing(): Component | undefined;
	/**
	 * Set device to the editor. If the device exists it will
	 * change the canvas to the proper width
	 * @param {string} name Name of the device
	 * @return {this}
	 * @example
	 * editor.setDevice('Tablet');
	 */
	setDevice(name: string): this;
	/**
	 * Return the actual active device
	 * @return {string} Device name
	 * @example
	 * var device = editor.getDevice();
	 * console.log(device);
	 * // 'Tablet'
	 */
	getDevice(): string;
	/**
	 * Execute command
	 * @param {string} id Command ID
	 * @param {Object} options Custom options
	 * @return {*} The return is defined by the command
	 * @example
	 * editor.runCommand('myCommand', {someValue: 1});
	 */
	runCommand(id: string, options?: Record<string, unknown>): any;
	/**
	 * Stop the command if stop method was provided
	 * @param {string} id Command ID
	 * @param {Object} options Custom options
	 * @return {*} The return is defined by the command
	 * @example
	 * editor.stopCommand('myCommand', {someValue: 1});
	 */
	stopCommand(id: string, options?: Record<string, unknown>): any;
	/**
	 * Store data to the current storage.
	 * This will reset the counter of changes (`editor.getDirtyCount()`).
	 * @param {Object} [options] Storage options.
	 * @returns {Object} Stored data.
	 * @example
	 * const storedData = await editor.store();
	 */
	store<T extends StorageOptions>(options?: T): Promise<ProjectData>;
	/**
	 * Load data from the current storage.
	 * @param {Object} [options] Storage options.
	 * @param {Object} [loadOptions={}] Load options.
	 * @param {Boolean} [loadOptions.clear=false] Clear the editor state (eg. dirty counter, undo manager, etc.).
	 * @returns {Object} Loaded data.
	 * @example
	 * const data = await editor.load();
	 */
	load<T extends StorageOptions>(options?: T, loadOptions?: EditorLoadOptions): Promise<ProjectData>;
	/**
	 * Get the JSON project data, which could be stored and loaded back with `editor.loadProjectData(json)`
	 * @returns {Object}
	 * @example
	 * console.log(editor.getProjectData());
	 * // { pages: [...], styles: [...], ... }
	 */
	getProjectData(): ProjectData;
	/**
	 * Load data from the JSON project
	 * @param {Object} data Project to load
	 * @example
	 * editor.loadProjectData({ pages: [...], styles: [...], ... })
	 */
	loadProjectData(data: ProjectData): ProjectData;
	storeData(): ProjectData;
	loadData(data: any): ProjectData;
	/**
	 * Returns container element. The one which was indicated as 'container'
	 * on init method
	 * @return {HTMLElement}
	 */
	getContainer(): HTMLElement | undefined;
	/**
	 * Return the count of changes made to the content and not yet stored.
	 * This count resets at any `store()`
	 * @return {number}
	 */
	getDirtyCount(): number;
	/**
	 * Reset the counter of changes.
	 */
	clearDirtyCount(): EditorModel;
	/**
	 * Update editor dimension offsets
	 *
	 * This method could be useful when you update, for example, some position
	 * of the editor element (eg. canvas, panels, etc.) with CSS, where without
	 * refresh you'll get misleading position of tools
	 * @param {Object} [options] Options
	 * @param {Boolean} [options.tools=false] Update the position of tools (eg. rich text editor, component highlighter, etc.)
	 */
	refresh(opts?: {
		tools?: boolean;
	}): void;
	/**
	 * Replace the built-in Rich Text Editor with a custom one.
	 * @param {Object} obj Custom RTE Interface
	 * @example
	 * editor.setCustomRte({
	 *   // Function for enabling custom RTE
	 *   // el is the HTMLElement of the double clicked Text Component
	 *   // rte is the same instance you have returned the first time you call
	 *   // enable(). This is useful if need to check if the RTE is already enabled so
	 *   // ion this case you'll need to return the RTE and the end of the function
	 *   enable: function(el, rte) {
	 *     rte = new MyCustomRte(el, {}); // this depends on the Custom RTE API
	 *     ...
	 *     return rte; // return the RTE instance
	 *   }
	 *
	 *   // Disable the editor, called for example when you unfocus the Text Component
	 *  disable: function(el, rte) {
	 *     rte.blur(); // this depends on the Custom RTE API
	 *  }
	 *
	 * // Called when the Text Component is focused again. If you returned the RTE instance
	 * // from the enable function, the enable won't be called again instead will call focus,
	 * // in this case to avoid double binding of the editor
	 *  focus: function (el, rte) {
	 *   rte.focus(); // this depends on the Custom RTE API
	 *  }
	 * });
	 */
	setCustomRte<T>(obj: CustomRTE & ThisType<T & CustomRTE>): void;
	/**
	 * Replace the default CSS parser with a custom one.
	 * The parser function receives a CSS string as a parameter and expects
	 * an array of CSSRule objects as a result. If you need to remove the
	 * custom parser, pass `null` as the argument
	 * @param {Function|null} parser Parser function
	 * @return {this}
	 * @example
	 * editor.setCustomParserCss(css => {
	 *  const result = [];
	 *  // ... parse the CSS string
	 *  result.push({
	 *    selectors: '.someclass, div .otherclass',
	 *    style: { color: 'red' }
	 *  })
	 *  // ...
	 *  return result;
	 * });
	 */
	setCustomParserCss(parser: CustomParserCss): this;
	/**
	 * Change the global drag mode of components.
	 * To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936
	 * @param {String} value Drag mode, options: 'absolute' | 'translate'
	 * @returns {this}
	 */
	setDragMode(value: DragMode): this;
	/**
	 * Trigger event log message
	 * @param  {*} msg Message to log
	 * @param  {Object} [opts={}] Custom options
	 * @param  {String} [opts.ns=''] Namespace of the log (eg. to use in plugins)
	 * @param  {String} [opts.level='debug'] Level of the log, `debug`, `info`, `warning`, `error`
	 * @return {this}
	 * @example
	 * editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
	 * // This will trigger following events
	 * // `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
	 * // Callbacks of those events will always receive the message and
	 * // options, as arguments, eg:
	 * // editor.on('log:info', (msg, opts) => console.info(msg, opts))
	 */
	log(msg: string, opts?: {
		ns?: string;
		level?: string;
	}): this;
	/**
	 * Translate label
	 * @param {String} key Label to translate
	 * @param {Object} [opts] Options for the translation
	 * @param {Object} [opts.params] Params for the translation
	 * @param {Boolean} [opts.noWarn] Avoid warnings in case of missing resources
	 * @returns {String}
	 * @example
	 * editor.t('msg');
	 * // use params
	 * editor.t('msg2', { params: { test: 'hello' } });
	 * // custom local
	 * editor.t('msg2', { params: { test: 'hello' } l: 'it' });
	 */
	t(...args: any[]): any;
	/**
	 * Attach event
	 * @param  {string} event Event name
	 * @param  {Function} callback Callback function
	 * @return {this}
	 */
	on(event: EditorEvent, callback: EventHandler): this;
	/**
	 * Attach event and detach it after the first run
	 * @param  {string} event Event name
	 * @param  {Function} callback Callback function
	 * @return {this}
	 */
	once(event: EditorEvent, callback: EventHandler): this;
	/**
	 * Detach event
	 * @param  {string} event Event name
	 * @param  {Function} callback Callback function
	 * @return {this}
	 */
	off(event: EditorEvent, callback: EventHandler): this;
	/**
	 * Trigger event
	 * @param  {string} event Event to trigger
	 * @return {this}
	 */
	trigger(event: EditorEvent, ...args: any[]): this;
	/**
	 * Destroy the editor
	 */
	destroy(): void;
	/**
	 * Returns editor element
	 * @return {HTMLElement}
	 * @private
	 */
	getEl(): HTMLElement | undefined;
	/**
	 * Returns editor model
	 * @return {Model}
	 * @private
	 */
	getModel(): EditorModel;
	/**
	 * Render editor
	 * @return {HTMLElement}
	 */
	render(): HTMLElement;
	/**
	 * Trigger a callback once the editor is loaded and rendered.
	 * The callback will be executed immediately if the method is called on the already rendered editor.
	 * @param  {Function} clb Callback to trigger
	 * @example
	 * editor.onReady(() => {
	 *   // perform actions
	 * });
	 */
	onReady(clb: EventHandler): void;
	/**
	 * Print safe HTML by using ES6 tagged template strings.
	 * @param {Array<String>} literals
	 * @param  {Array<String>} substs
	 * @returns {String}
	 * @example
	 * const unsafeStr = '<script>....</script>';
	 * const safeStr = '<b>Hello</b>';
	 * // Use `$${var}` to avoid escaping
	 * const strHtml = editor.html`Escaped ${unsafeStr} unescaped $${safeStr}`;
	 */
	html: typeof html;
}
export interface ComponentDragOpts {
	target: Component;
	center?: number;
	debug?: boolean;
	dragger?: DraggerOptions;
	event?: Event;
	guidesInfo?: number;
	mode?: "absolute" | "translate";
	skipGuidesRender?: boolean;
	addStyle?: (data: {
		component?: Component;
		styles?: Record<string, unknown>;
		partial?: boolean;
	}) => void;
	onStart?: (data: any) => Editor;
	onDrag?: (data: any) => Editor;
	onEnd?: (ev: Event, opt: any, data: any) => void;
}
/**
 * Represents the properties of the drag events.
 */
export interface ComponentDragEventProps {
	/**
	 * The mode of the drag (absolute or translate).
	 */
	mode: ComponentDragOpts["mode"];
	/**
	 * The component being dragged.
	 * @deprecated Use `component` instead.
	 */
	target: Component;
	/**
	 * The component being dragged.
	 */
	component: Component;
	/**
	 * The guides of the component being dragged.
	 * @deprecated Use `guidesMatched` instead.
	 */
	guidesTarget: ComponentDragGuide[];
	/**
	 * All the guides except the ones of the component being dragged.
	 * @deprecated Use `guidesMatched` instead.
	 */
	guidesStatic: ComponentDragGuide[];
	/**
	 * The guides that are being matched.
	 */
	guidesMatched: ComponentDragGuideMatched[];
	/**
	 * The options used for the drag event.
	 */
	opts: ComponentDragOpts;
}
/**
 * Represents a guide used during component dragging.
 */
export interface ComponentDragGuide {
	/**
	 * The type of the guide (e.g., 't', 'b', 'l', 'r', 'x', 'y').
	 */
	type: string;
	/**
	 * The vertical position of the guide.
	 */
	y: number;
	/**
	 * The horizontal position of the guide.
	 */
	x: number;
	/**
	 * The component associated with the guide.
	 */
	component: Component;
	/**
	 * The view of the component associated with the guide.
	 */
	componentView: ComponentView;
	/**
	 * The HTML element associated with the guide.
	 * @deprecated Use `componentEl` instead.
	 */
	origin: HTMLElement;
	/**
	 * The HTML element associated with the guide.
	 */
	componentEl: HTMLElement;
	/**
	 * The rectangle (position and dimensions) of the guide's element.
	 * @deprecated Use `componentElRect` instead.
	 */
	originRect: ComponentOrigRect;
	/**
	 * The rectangle (position and dimensions) of the guide's element.
	 */
	componentElRect: ComponentOrigRect;
	/**
	 * The HTML element representing the guide.
	 * @deprecated Use `guideEl` instead.
	 */
	guide?: HTMLElement;
	/**
	 * The HTML element representing the guide.
	 */
	guideEl?: HTMLElement;
	/**
	 * Indicates whether the guide is active.
	 * @todo The `active` property is not set in the code, but the value is changing.
	 */
	active?: boolean;
}
/**
 * Represents a matched guide during component dragging.
 */
export interface ComponentDragGuideMatched {
	/**
	 * The static guides used for matching.
	 */
	guidesStatic: ComponentDragGuide[];
	/**
	 * The origin component guide.
	 */
	guide: ComponentDragGuide;
	/**
	 * The matched component guide.
	 */
	matched: ComponentDragGuide;
	/**
	 * The primary position of the guide (either x or y depending on the axis).
	 */
	posFirst: number;
	/**
	 * The secondary position of the guide (the opposite axis of posFirst).
	 */
	posSecond: number;
	/**
	 * The distance between the two matched guides in pixels.
	 */
	size: number;
	/**
	 * The raw distance between the two matched guides in pixels.
	 */
	sizeRaw: number;
	/**
	 * The HTML element representing the guide info (line between the guides).
	 */
	elGuideInfo: HTMLElement;
	/**
	 * The container element for the guide info (text content of the line).
	 */
	elGuideInfoCnt: HTMLElement;
}
export type ComponentRect = {
	left: number;
	width: number;
	top: number;
	height: number;
};
export type ComponentOrigRect = ComponentRect & {
	rect: ComponentRect;
};
export declare class PropertyRadio extends PropertySelect {
	defaults(): any;
}
export declare class PropertySlider extends PropertyNumber {
	defaults(): any;
}
export interface InitEditorConfig extends EditorConfig {
	grapesjs?: typeof grapesjs;
}
export declare const usePlugin: <P extends Plugin<any> | string>(plugin: P, opts?: P extends Plugin<infer C> ? C : {}) => (editor: Editor) => void;
export declare const grapesjs: {
	$: any;
	editors: Editor[];
	plugins: PluginManager;
	usePlugin: <P extends Plugin<any> | string>(plugin: P, opts?: P extends Plugin<infer C> ? C : {}) => (editor: Editor) => void;
	version: string;
	/**
	 * Initialize the editor with passed options
	 * @param {Object} config Configuration object
	 * @param {string|HTMLElement} config.container Selector which indicates where render the editor
	 * @param {Boolean} [config.autorender=true] If true, auto-render the content
	 * @param {Array} [config.plugins=[]] Array of plugins to execute on start
	 * @param {Object} [config.pluginsOpts={}] Custom options for plugins
	 * @param {Boolean} [config.headless=false] Init headless editor
	 * @return {Editor} Editor instance
	 * @example
	 * var editor = grapesjs.init({
	 *   container: '#myeditor',
	 *   components: '<article class="hello">Hello world</article>',
	 *   style: '.hello{color: red}',
	 * })
	 */
	init(config?: EditorConfig): Editor;
};

export {
	CategoryProperties as BlockCategoryProperties,
	grapesjs as default,
};

export {};