docs/api/selector_manager.md
Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take a look at this code:
span > #send-btn.btn{
...
}
<span>
<button id="send-btn" class="btn"></button>
</span>
In this scenario we get:
tagidclassSo, for example, being btn the same class entity it'll be easier to refactor and track things.
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
const editor = grapesjs.init({
selectorManager: {
// options
}
})
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.
const sm = editor.Selectors;
selector:add Selector added. The Selector is passed as an argument to the callback.editor.on('selector:add', (selector) => { ... });
selector:remove Selector removed. The Selector is passed as an argument to the callback.editor.on('selector:remove', (selector) => { ... });
selector:remove:before Before selector remove. The Selector is passed as an argument to the callback.editor.on('selector:remove:before', (selector) => { ... });
selector:update Selector updated. The Selector and the object containing changes are passed as arguments to the callback.editor.on('selector:update', (selector, changes) => { ... });
selector:state States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.editor.on('selector:state', (state) => { ... });
selector:custom Custom selector event. An object containing states, selected selectors, and container is passed as an argument.editor.on('selector:custom', ({ states, selected, container }) => { ... });
selector 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.editor.on('selector', ({ event, selector, changes, ... }) => { ... });
Get configuration object
Returns Object
Add a new selector to the collection if it does not already exist. You can pass selectors properties or string identifiers.
props (Object | String) Selector properties or string identifiers, eg. { name: 'my-class', label: 'My class' }, .my-clsopts Object? Selector options (optional, default {})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`
Returns Selector
Get the selector by its name/type
const selector = selectorManager.get('.my-class');
// Get Id
const selectorId = selectorManager.get('#my-id');
Returns (Selector | null)
Remove Selector.
const removed = selectorManager.remove('.myclass');
// or by passing the Selector
selectorManager.remove(selectorManager.get('.myclass'));
Returns Selector Removed Selector
Rename Selector.
const selector = selectorManager.get('myclass');
const result = selectorManager.rename(selector, 'myclass2');
console.log(result === selector ? 'Selector updated' : 'Selector with this name exists already');
Returns Selector Selector containing the passed name.
Change the selector state
value String State valueselectorManager.setState('hover');
Returns this
Get the current selector state value
Returns String
Get states
Set a new collection of states
const states = selectorManager.setStates([
{ name: 'hover', label: 'Hover' },
{ name: 'nth-of-type(2n)', label: 'Even/Odd' }
]);
Get commonly selected selectors, based on all selected components.
const selected = selectorManager.getSelected();
console.log(selected.map(s => s.toString()))
Get selected selectors.
const selected = selectorManager.getSelectedAll();
console.log(selected.map(s => s.toString()))
Add new selector to all selected components.
props (Object | String) Selector properties or string identifiers, eg. { name: 'my-class', label: 'My class' }, .my-clsselectorManager.addSelected('.new-class');
Remove a common selector from all selected components.
selectorManager.removeSelected('.myclass');
Get the array of currently selected targets.
const targetsToStyle = selectorManager.getSelectedTargets();
console.log(targetsToStyle.map(target => target.getSelectorsString()))
Returns Array<(Component | CssRule)>
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).
value Boolean Get the value of component-first option.
Returns Boolean
Get all selectors
Returns Collection<Selector>