<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## StyleManager

With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]

```js
const editor = grapesjs.init({
 styleManager: {
   // options
 }
})
```

Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.

```js
// Listen to events
editor.on('style:sector:add', (sector) => { ... });

// Use the API
const styleManager = editor.StyleManager;
styleManager.addSector(...);
```

## Available Events

*   `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
*   `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback.
*   `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback.
*   `style:property:add` - Property added. The [Property] is passed as an argument to the callback.
*   `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback.
*   `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback.
*   `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.

<!--
* `styleManager:update:target` - The target (Component or CSSRule) is changed
* `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
* `styleManager:change:{propertyName}` - As above but for a specific style property
-->

## Methods

*   [getConfig][2]
*   [addSector][3]
*   [getSector][4]
*   [getSectors][5]
*   [removeSector][6]
*   [addProperty][7]
*   [getProperty][8]
*   [getProperties][9]
*   [removeProperty][10]
*   [select][11]
*   [getSelected][12]
*   [getSelectedAll][13]
*   [getSelectedParents][14]
*   [addStyleTargets][15]
*   [getBuiltIn][16]
*   [getBuiltInAll][17]
*   [addBuiltIn][18]
*   [addType][19]
*   [getType][20]
*   [getTypes][21]

[Sector]: sector.html

[CssRule]: css_rule.html

[Component]: component.html

[Property]: property.html

## Sectors

## getConfig

Get configuration object

Returns **[Object][22]**&#x20;

## addSector

Add new sector. If the sector with the same id already exists, that one will be returned.

### Parameters

*   `id` **[String][23]** Sector id
*   `sector` **[Object][22]** Sector definition. Check the [available properties][24]
*   `options` **[Object][22]** Options (optional, default `{}`)

    *   `options.at` **[Number][25]?** Position index (by default, will be appended at the end).

### Examples

```javascript
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
```

Returns **[Sector]** Added Sector

## getSector

Get sector by id.

### Parameters

*   `id` **[String][23]** Sector id
*   `opts` **{warn: [boolean][26]?}**  (optional, default `{}`)

### Examples

```javascript
const sector = styleManager.getSector('mySector');
```

Returns **([Sector] | null)**&#x20;

## getSectors

Get all sectors.

### Parameters

*   `opts` **[Object][22]** Options (optional, default `{}`)

    *   `opts.visible` **[Boolean][26]?** Returns only visible sectors

### Examples

```javascript
const sectors = styleManager.getSectors();
```

Returns **[Array][27]<[Sector]>**&#x20;

## removeSector

Remove sector by id.

### Parameters

*   `id` **[String][23]** Sector id

### Examples

```javascript
const removed = styleManager.removeSector('mySector');
```

Returns **[Sector]** Removed sector

## addProperty

Add new property to the sector.

### Parameters

*   `sectorId` **[String][23]** Sector id.
*   `property` **[Object][22]** Property definition. Check the [base available properties][28] + others based on the `type` of your property.
*   `opts` **[Object][22]** Options (optional, default `{}`)

    *   `opts.at` **[Number][25]?** Position index (by default, will be appended at the end).

### Examples

```javascript
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 });
```

Returns **([Property] | null)** Added property or `null` in case the sector doesn't exist.

## getProperty

Get the property.

### Parameters

*   `sectorId` **[String][23]** Sector id.
*   `id` **[String][23]** Property id.

### Examples

```javascript
const property = styleManager.getProperty('mySector', 'min-height');
```

Returns **([Property] | [undefined][29])**&#x20;

## getProperties

Get all properties of the sector.

### Parameters

*   `sectorId` **[String][23]** Sector id.

### Examples

```javascript
const properties = styleManager.getProperties('mySector');
```

Returns **(Collection<[Property]> | [undefined][29])** Collection of properties

## removeProperty

Remove the property.

### Parameters

*   `sectorId` **[String][23]** Sector id.
*   `id` **[String][23]** Property id.

### Examples

```javascript
const property = styleManager.removeProperty('mySector', 'min-height');
```

Returns **([Property] | null)** Removed property

## select

Select new target.
The target could be a Component, CSSRule, or a CSS selector string.

### Parameters

*   `target` **([Component] | [CSSRule] | [String][23])**&#x20;
*   `opts` **{stylable: [boolean][26]?, component: Component?}**  (optional, default `{}`)

### Examples

```javascript
// 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');
```

Returns **[Array][27]<([Component] | [CSSRule])>** Array containing selected Components or CSSRules

## getSelected

Get the last selected target.
By default, the Style Manager shows styles of the last selected target.

Returns **([Component] | [CSSRule] | null)**&#x20;

## getSelectedAll

Get the array of selected targets.

Returns **[Array][27]<([Component] | [CSSRule])>**&#x20;

## getSelectedParents

Get parent rules of the last selected target.

Returns **[Array][27]<[CSSRule]>**&#x20;

## addStyleTargets

Update selected targets with a custom style.

### Parameters

*   `style` **[Object][22]** Style object
*   `opts` **[Object][22]** Options (optional, default `{}`)

### Examples

```javascript
styleManager.addStyleTargets({ color: 'red' });
```

## getBuiltIn

Return built-in property definition

### Parameters

*   `prop` **[String][23]** Property name.

### Examples

```javascript
const widthPropDefinition = styleManager.getBuiltIn('width');
```

Returns **([Object][22] | null)** Property definition.

## getBuiltInAll

Get all the available built-in property definitions.

Returns **[Object][22]**&#x20;

## addBuiltIn

Add built-in property definition.
If the property exists already, it will extend it.

### Parameters

*   `prop` **[String][23]** Property name.
*   `definition` **[Object][22]** Property definition.

### Examples

```javascript
const sector = styleManager.addBuiltIn('new-property', {
 type: 'select',
 default: 'value1',
 options: [{ id: 'value1', label: 'Some label' }, ...],
})
```

Returns **[Object][22]** Added property definition.

## addType

Add new property type

### Parameters

*   `id` **[string][23]** Type ID
*   `definition` **[Object][22]** Definition of the type.

### Examples

```javascript
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() {}
})
```

## getType

Get type

### Parameters

*   `id` **[string][23]** Type ID

Returns **[Object][22]** Type definition

## getTypes

Get all types

Returns **[Array][27]**&#x20;

[1]: https://github.com/GrapesJS/grapesjs/blob/master/src/style_manager/config/config.ts

[2]: #getconfig

[3]: #addsector

[4]: #getsector

[5]: #getsectors

[6]: #removesector

[7]: #addproperty

[8]: #getproperty

[9]: #getproperties

[10]: #removeproperty

[11]: #select

[12]: #getselected

[13]: #getselectedall

[14]: #getselectedparents

[15]: #addstyletargets

[16]: #getbuiltin

[17]: #getbuiltinall

[18]: #addbuiltin

[19]: #addtype

[20]: #gettype

[21]: #gettypes

[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[24]: sector.html#properties

[25]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

[26]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[28]: property.html#properties

[29]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined