grapesjs/docs/api/selector_manager.md

Selectors

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:

• span -> selector of type tag
• send-btn -> selector of type id
• btn -> selector of type class

So, 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;

Available Events

• 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, ... }) => { ... });

• SelectorStringObject

Methods

• getConfig
• add
• get
• remove
• rename
• getAll
• setState
• getState
• getStates
• setStates
• getSelected
• addSelected
• removeSelected
• getSelectedTargets
• setComponentFirst
• getComponentFirst

getConfig

Get configuration object

Returns Object

add

Add a new selector to the collection if it does not already exist. You can pass selectors properties or string identifiers.

Parameters

• props (Object | String) Selector properties or string identifiers, eg. { name: 'my-class', label: 'My class' }, .my-cls
• opts Object? Selector options (optional, default {})

Examples

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

Get the selector by its name/type

Parameters

• name String Selector name or string identifier
• type number?

Examples

const selector = selectorManager.get('.my-class');
// Get Id
const selectorId = selectorManager.get('#my-id');

Returns (Selector | null)

remove

Remove Selector.

Parameters

• selector (String | Selector) Selector instance or Selector string identifier
• opts RemoveOptions?

Examples

const removed = selectorManager.remove('.myclass');
// or by passing the Selector
selectorManager.remove(selectorManager.get('.myclass'));

Returns Selector Removed Selector

rename

Rename Selector.

Parameters

• selector Selector Selector to update.
• name String New name for the selector.
• opts SetOptions?

Examples

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.

setState

Change the selector state

Parameters

• value String State value

Examples

selectorManager.setState('hover');

Returns this

getState

Get the current selector state value

Returns String

getStates

Get states

Returns Array<State>

setStates

Set a new collection of states

Parameters

• states Array<Object> Array of new states
• opts any?

Examples

const states = selectorManager.setStates([
  { name: 'hover', label: 'Hover' },
  { name: 'nth-of-type(2n)', label: 'Even/Odd' }
]);

Returns Array<State>

getSelected

Get commonly selected selectors, based on all selected components.

Examples

const selected = selectorManager.getSelected();
console.log(selected.map(s => s.toString()))

Returns Array<Selector>

getSelectedAll

Get selected selectors.

Examples

const selected = selectorManager.getSelectedAll();
console.log(selected.map(s => s.toString()))

Returns Array<Selector>

addSelected

Add new selector to all selected components.

Parameters

• props (Object | String) Selector properties or string identifiers, eg. { name: 'my-class', label: 'My class' }, .my-cls

Examples

selectorManager.addSelected('.new-class');

removeSelected

Remove a common selector from all selected components.

Parameters

• selector (String | Selector) Selector instance or Selector string identifier

Examples

selectorManager.removeSelected('.myclass');

getSelectedTargets

Get the array of currently selected targets.

Examples

const targetsToStyle = selectorManager.getSelectedTargets();
console.log(targetsToStyle.map(target => target.getSelectorsString()))

Returns Array<(Component | CssRule)>

setComponentFirst

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).

Parameters

• value Boolean

getComponentFirst

Get the value of component-first option.

Returns Boolean

getAll

Get all selectors

Returns Collection<Selector>