# 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

const editor = grapesjs.init({
 styleManager: {
   // options

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

const styleManager = editor.StyleManager;

# getConfig

Get configuration object

Returns Object

# addSector

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

# Parameters

  • id string Sector id
  • sector Object Object representing sector
    • sector.name string Sector's label (optional, default '')
    • sector.open Boolean Indicates if the sector should be opened (optional, default true)
    • sector.properties Array<Object> Array of properties (optional, default [])
  • opts (optional, default {})
  • options Object Options (optional, default {})

# Examples

var 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 collection

Returns Sector Added Sector

# getSector

Get sector by id

# Parameters

  • id string Sector id
  • opts (optional, default {})

# Examples

var sector = styleManager.getSector('mySector');

Returns (Sector | null)

# removeSector

Remove a sector by id

# Parameters

# Examples

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

Returns Sector Removed sector

# getSectors

Get all sectors

Returns Sectors Collection of sectors

# addProperty

Add property to the sector identified by id

# Parameters

  • sectorId string Sector id
  • property Object Property object
    • property.name string Name of the property (optional, default '')
    • property.property string CSS property, eg. min-height (optional, default '')
    • property.type string Type of the property: integer | radio | select | color | file | composite | stack (optional, default '')
    • property.units Array<string> Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default [])
    • property.unit string Default selected unit from units. Only for integer type (optional, default '')
    • property.min number Min possible value. Only for integer type (optional, default null)
    • property.max number Max possible value. Only for integer type (optional, default null)
    • property.defaults string Default value (optional, default '')
    • property.info string Some description (optional, default '')
    • property.icon string Class name. If exists no text will be displayed (optional, default '')
    • property.preview Boolean Show layers preview. Only for stack type (optional, default false)
    • property.functionName string Indicates if value need to be wrapped in some function, for istance transform: rotate(90deg) (optional, default '')
    • property.properties Array<Object> Nested properties for composite and stack type (optional, default [])
    • property.layers Array<Object> Layers for stack properties (optional, default [])
    • property.list Array<Object> List of possible options for radio and select types (optional, default [])
  • opts (optional, default {})
  • options Object Options (optional, default {})

# Examples

var property = styleManager.addProperty('mySector',{
  name: 'Minimum height',
  property: 'min-height',
  type: 'select',
  defaults: '100px',
  list: [{
    value: '100px',
    name: '100',
     value: '200px',
     name: '200',
}, { at: 0 });
// With `at: 0` we place the new property at the beginning of the collection

Returns (Property | null) Added Property or null in case sector doesn't exist

# getProperty

Get property by its CSS name and sector id

# Parameters

  • sectorId string Sector id
  • name string CSS property name (or id), eg. 'min-height'

# Examples

var property = styleManager.getProperty('mySector','min-height');

Returns (Property | null)

# removeProperty

Remove a property from the sector

# Parameters

  • sectorId string Sector id
  • name string CSS property name, eg. 'min-height'

# Examples

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

Returns Property Removed property

# getProperties

Get properties of the sector

# Parameters

# Examples

var properties = styleManager.getProperties('mySector');

Returns Properties Collection of properties

# getModelToStyle

Get what to style inside Style Manager. If you select the component without classes the entity is the Component itself and all changes will go inside its 'style' property. Otherwise, if the selected component has one or more classes, the function will return the corresponding CSS Rule

# Parameters

  • model Model
  • options (optional, default {})

Returns Model

# addType

Add new property type

# Parameters

  • id string Type ID
  • definition Object Definition of the type. Each definition contains model (business logic), view (presentation logic) and isType function which recognize the type of the passed entity

# Examples

styleManager.addType('my-custom-prop', {
   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 })); // change will trigger the emit
     inputEl.addEventListener('input', event => change({ event, complete: false }));
     return el;
   emit({ props, updateStyle }, { event, complete }) {
     const { value } = event.target;
     const valueRes = value + 'px';
     // Pass a string value for the exact CSS property or an object containing multiple properties
     // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
     updateStyle(valueRes, { complete });
   update({ value, el }) {
     el.querySelector('.my-input').value = parseInt(value, 10);
   destroy() {
     // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.

# getType

Get type

# Parameters

Returns Object Type definition

# getTypes

Get all types

Returns Array

# createType

Create new property from type

# Parameters

  • id string Type ID
  • options Object Options (optional, default {})
    • options.model Object Custom model object (optional, default {})
    • options.view Object Custom view object (optional, default {})

# Examples

const propView = styleManager.createType('integer', {
 model: {units: ['px', 'rem']}
propView.model.on('change:value', ...);

Returns PropertyView

# setTarget

Select different target for the Style Manager. It could be a Component, CSSRule, or a string of any CSS selector

# Parameters

  • target (Component | CSSRule | String)
  • opts

Returns Styleable A Component or CSSRule