Sectores de carrocería

Hola @verloka y @pouyamiralayi,

La lista de sectores parece ser común a todos los componentes de la aplicación.

Sin embargo, los componentes almacenan una lista de atributos que pueden editarse a través del panel del gestor de estilos cuando se seleccionan, que se utiliza para filtrar los sectores de la aplicación.

Desde la Component API Reference, puedes usar las propiedades 'stylable' y 'unstylable' para incluir y/o excluir atributos editables.

Por defecto, el elemento "Cuerpo" (denominado "Envoltorio") tiene la siguiente propiedad 'estilizable': '["fondo", "color de fondo", "imagen de fondo", "repetición de fondo", "anexo de fondo", "posición de fondo", "tamaño de fondo"]' (de su configuración predeterminada), por lo que incluso con sectores por defecto, solo muestra el de "Decoraciones" en el administrador de estilos.

Tendrías que editar su propiedad 'estilizable' para añadir las relacionadas con "Dimensión", lo cual podría hacerse así:

• Mediante configuración de inicialización:

'''Manuscrito mecanografiado // ...

grapesjs.init({ // ... domComponents: { // ... envoltorio: { estilizado: [ Atributos predeterminados 'trasfondo', 'color de fondo', 'imagen de fondo', 'repetición de fondo', 'vínculo de fondo', 'posición de fondo', 'tamaño de fondo',

Añadir los atributos del sector "Dimensión" 'ancho', 'altura', 'ancho máximo', 'min-height', 'margen', 'márgene-top', 'margen-derecha', 'margen inferior', 'margen-izquierda', 'acolchado', 'acolchado', 'relleno-derecho', 'acolchonado-fondo', 'acolchado-izquierda' ] } } });

- En tiempo de ejecución: 'editor.getWrapper().set('stylable', editor.getWrapper().get('stylable').concat(['ancho', 'altura', 'ancho máximo', 'altura-mínima', 'margen', 'margen-superior', 'margen-derecha', 'margen-abajo', 'margen-izquierda', 'relleno', 'relleno-superior', 'relleno-derecho', 'relleno-inferior', 'relleno-izquierda'));'

**_EDITED: añadido que faltan properties_ arriba / derecha / abajo / izquierda**
**_EDITED2: añadido una segunda solución mediante inicialización configuration_**