@silexlabs/grapesjs-advanced-selector/dist/index.d.ts

A GrapesJS plugin for managing advanced CSS selectors with a visual interface

import { Component, Editor } from 'grapesjs';

declare enum SimpleSelectorType {
	TAG = "tag",
	CUSTOM_TAG = "custom-tag",
	CLASS = "class",
	ID = "id",
	ATTRIBUTE = "attribute",
	UNIVERSAL = "universal",
	UNKNOWN = "unknown"
}
/**
 * A simple selector interface
 * This is a virtual interface to be overridden by the specific simple selector types
 */
export interface SimpleSelector {
	type: SimpleSelectorType;
	active: boolean;
}
declare enum PseudoClassType {
	HOVER = "hover",
	ACTIVE = "active",
	FOCUS = "focus",
	FOCUS_WITHIN = "focus-within",
	FOCUS_VISIBLE = "focus-visible",
	VISITED = "visited",
	LINK = "link",
	ANY_LINK = "any-link",// Deprecated, but some usage
	FIRST_CHILD = "first-child",
	LAST_CHILD = "last-child",
	NTH_CHILD = "nth-child",
	NTH_LAST_CHILD = "nth-last-child",
	ONLY_CHILD = "only-child",
	FIRST_OF_TYPE = "first-of-type",
	LAST_OF_TYPE = "last-of-type",
	NTH_OF_TYPE = "nth-of-type",
	NTH_LAST_OF_TYPE = "nth-last-of-type",
	ONLY_OF_TYPE = "only-of-type",
	EMPTY = "empty",
	ROOT = "root",
	SCOPE = "scope",
	TARGET = "target",
	BEFORE = "before",
	AFTER = "after",
	FIRST_LINE = "first-line",
	FIRST_LETTER = "first-letter",
	ENABLED = "enabled",
	DISABLED = "disabled",
	CHECKED = "checked",
	INDETERMINATE = "indeterminate",
	DEFAULT = "default",
	VALID = "valid",
	INVALID = "invalid",
	IN_RANGE = "in-range",
	OUT_OF_RANGE = "out-of-range",
	REQUIRED = "required",
	OPTIONAL = "optional",
	READ_ONLY = "read-only",
	READ_WRITE = "read-write",
	LANG = "lang",
	DIR = "dir"
}
export interface PseudoClass {
	type: PseudoClassType;
	hasParam: boolean;
	param?: string | null;
	sentencePre: string;
	sentencePost?: string;
	helpLink?: string;
	displayName?: string;
}
export type CompoundSelector = {
	selectors: SimpleSelector[];
	pseudoClass?: PseudoClass | null;
};
declare enum OperatorType {
	HAS = "has",
	NOT = "not",
	IS = "is",
	WHERE = "where",
	CHILD = ">",
	DESCENDANT = " ",
	ADJACENT = "+",
	GENERAL_SIBLING = "~"
}
export interface Operator {
	type: OperatorType;
	hasParam: boolean;
	sentencePre: string;
	sentencePost?: string;
	helpLink: string;
	isCombinator: boolean;
	displayName?: string;
	stringRepresentation: string;
}
export interface ComplexSelector {
	mainSelector: CompoundSelector;
	operator?: Operator;
	relatedSelector?: CompoundSelector;
	atRule?: string;
}
declare function toString(cs: ComplexSelector, ignorePseudoClass?: boolean): string;
declare function fromString(selector: string, atRule: string): ComplexSelector;
export type AdvancedSelectorOptions = {
	i18n: {
		[key: string]: string;
	};
	helpLinks: {
		actionBar: string;
	};
};
/**
 * Get all selectors that match the selected component
 * Don't take pseudo class into account
 */
export declare function getSelectors(editor: Editor): ComplexSelector[];
/**
 * Function to edit or add style based on the selector
 */
export declare function editStyle(editor: Editor, selector: string): void;
/**
 * Check if all the selected components are selected by the provided selector
 */
export declare function matchSelectorAll(selector: string, components: Component[]): boolean;
/**
 * Stores a selector in a component's attributes.
 */
export declare function setComponentSelector(component: Component, selector: ComplexSelector): void;
export declare function getComponentSelector(component: Component): ComplexSelector;
export declare const name = "@silexlabs/grapesjs-advanced-selector";
declare const _default: (editor: Editor, opts?: Partial<AdvancedSelectorOptions>) => void;

export {
	_default as default,
	fromString as complexSelectorFromString,
	toString as complexSelectorToString,
};

export {};