grapesjs/docs/api/style_manager.md

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;

Available Events

• style:sector:add - Sector added. The Sector is passed as an argument to the callback.

Methods

• getConfig
• addSector
• getSector
• getSectors
• removeSector
• addProperty
• getProperty
• getProperties
• removeProperty
• getModelToStyle
• addType
• getType
• getTypes
• createType

getConfig

Get configuration object

Returns Object

addSector

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

Parameters

• id String Sector id

• sector Object Sector definition. Check the available properties

• options Object Options (optional, default {})

  • options.at Number? Position index (by default, will be appended at the end).

Examples

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 Sector id
• opts (optional, default {})

Examples

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

Returns (Sector | null)

getSectors

Get all sectors.

Parameters

• opts (optional, default {})

Examples

const sectors = styleManager.getSectors();

Returns Collection<Sector> Collection of sectors

removeSector

Remove sector by id.

Parameters

• id String Sector id

Examples

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

Returns Sector Removed sector

addProperty

Add new property to the sector.

Parameters

• sectorId String Sector id.

• property Object Property definition. Check the base available properties + others based on the type of your property.

• opts Object Options (optional, default {})

  • opts.at Number? Position index (by default, will be appended at the end).

Examples

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 Sector id.
• id String Property id.

Examples

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

Returns (Property | null)

getProperties

Get all properties of the sector.

Parameters

• sectorId String Sector id.

Examples

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

Returns (Collection<Property> | null) Collection of properties

removeProperty

Remove the property.

Parameters

• sectorId String Sector id.
• id String Property id.

Examples

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

Returns (Property | null) Removed property

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

• id string Type ID

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.render();
propView.model.on('change:value', ...);
someContainer.appendChild(propView.el);

Returns PropertyView

getBuiltIn

Return built-in property definition

Parameters

• prop String Property name.

Returns (Object | null) Property definition.

getBuiltInAll

Get all the available built-in property definitions.

Returns Object

addBuiltIn

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

Parameters

• prop String Property name.
• definition Object Property definition.

Examples

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

Returns Object Added property definition.