@silexlabs/grapesjs-advanced-selector
Version:
A GrapesJS plugin for managing advanced CSS selectors with a visual interface
104 lines • 4.47 kB
TypeScript
/**
* @fileoverview The model types and functions for the simple selector
* A Simple selector is made of a list of simple selectors, e.g `div`, `.class`, `#id`, `[attr=^value]`
*/
/**
* The type of the simple selector
*/
export declare enum SimpleSelectorType {
TAG = "tag",
CUSTOM_TAG = "custom-tag",
CLASS = "class",
ID = "id",
ATTRIBUTE = "attribute",
UNIVERSAL = "universal",
UNKNOWN = "unknown"
}
/**
* The type for tag selectors
*/
export type TAG = 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'div' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'map' | 'mark' | 'meta' | 'meter' | 'nav' | 'noscript' | 'object' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'param' | 'picture' | 'pre' | 'progress' | 'q' | 'rb' | 'rp' | 'rt' | 'rtc' | 'ruby' | 's' | 'samp' | 'script' | 'section' | 'select' | 'slot' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'var' | 'video' | 'wbr';
/**
* 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;
}
export interface SimpleSelectorSuggestion extends SimpleSelector {
createText?: string;
createValue?: string;
keepEditing?: boolean;
}
export interface TagSelector extends SimpleSelector {
type: SimpleSelectorType.TAG;
value: TAG;
}
export interface IdSelector extends SimpleSelector {
type: SimpleSelectorType.ID;
value: string;
}
export interface ClassSelector extends SimpleSelector {
type: SimpleSelectorType.CLASS;
value: string;
}
export declare enum AttributeOperatorType {
EQUALS = "=",
INCLUDES = "~=",
DASH_MATCH = "|=",
PREFIX_MATCH = "^=",
SUFFIX_MATCH = "$=",
SUBSTRING_MATCH = "*="
}
export interface AttributeSelector extends SimpleSelector {
type: SimpleSelectorType.ATTRIBUTE;
value: string;
operator?: AttributeOperatorType;
attributeValue?: string;
}
export interface UniversalSelector extends SimpleSelector {
type: SimpleSelectorType.UNIVERSAL;
}
export interface CustomTagSelector extends SimpleSelector {
type: SimpleSelectorType.CUSTOM_TAG;
value: string;
}
export declare const ATTRIBUTES: string[];
export declare const ATTRIBUTE_OPERATORS: string[];
export declare const SELECTOR_PREFIXES: string[];
export declare const TAGS: TAG[];
export declare const ESCAPE_CHARS: string[];
export declare const COLOR_FOR_TYPE: {
tag: string;
"custom-tag": string;
class: string;
id: string;
attribute: string;
universal: string;
unknown: string;
};
/**
* Compare two simple selectors to see if they are the same
*/
export declare function isSameSelector(a: SimpleSelector, b: SimpleSelector, ignoreActive?: boolean): boolean;
export declare function toString(selector: SimpleSelector): string;
export declare function getDisplayType(selector: SimpleSelector): string;
export declare function getDisplayName(selector: SimpleSelector): string;
export declare function getEditableName(selector: SimpleSelector): string;
/**
* Determines if the value is valid for the selector
* If not valid, will try to suggest a valid value
*/
export declare function validate(_value: string): string | false;
/**
* Get a list of suggestions, filtered and with creation suggestions
*/
export declare function suggest(filter: string, suggestions: SimpleSelector[]): SimpleSelectorSuggestion[];
export declare function getCreationSuggestions(validated: string | false): SimpleSelectorSuggestion[];
export declare function specificity(selector: SimpleSelector, ignoreActive?: boolean): number;
/**
* Returns a sorting priority for selectors based on CSS specificity rules.
*/
export declare function getSelectorPriority(selector: SimpleSelector): number;
//# sourceMappingURL=SimpleSelector.d.ts.map