From 942dfceae7ef8f5d35649c3c2df5d14413bb5baf Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 25 Dec 2021 16:21:17 +0100 Subject: [PATCH] Move StyleManager default config --- docs/modules/Style-manager.md | 49 +++++++++++++++- src/editor/config/config.js | 93 +----------------------------- src/style_manager/config/config.js | 70 +++++++++++++++++++++- 3 files changed, 117 insertions(+), 95 deletions(-) diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index 7cc961fad..0222d727c 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -4,12 +4,53 @@ title: Style Manager # Style Manager -Coming soon +::: danger TODO +Hero image + +::: + +The Style Manager module is responsible to show and update style properties on your [Components]. In this guide, you will see how to setup and take full advantage of the built-in Style Manager UI in GrapesJS. +The default UI is a lightweight component with built-in properties, but as you'll see next in this guide, it's easy to extend with your own elements or even create the Style Manager UI from scratch by using the [Style Manager API]. + +::: warning +To get a better understanding of the content in this guide, we recommend reading [Components] first +::: +::: warning +This guide is referring to GrapesJS v0.17.30 or higher +::: [[toc]] +## Configuration + +To change the default configurations you have to pass the `styleManager` property with the main configuration object. + +```js +const editor = grapesjs.init({ + ... + styleManager: { + sectors: [...], + ... + } +}); +``` + +Check the full list of available options here: [Style Manager Config](https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js) + + + + + +## Initialization + +### Built-in properties + +## Programmatic usage + +## Customization + +## Events -## Built-in properties Here you can find all the available built-in properties that you can use inside Style Manager via `buildProps`: @@ -29,3 +70,7 @@ Example usage: } ... ``` + + +[Components]: +[Style Manager API]: \ No newline at end of file diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 26ec27ec6..5573ac16f 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -163,8 +163,7 @@ export default { listenToEl: [], // Import asynchronously CSS to use as icons - cssIcons: - 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', + cssIcons: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', // Dom element el: '', @@ -215,93 +214,7 @@ export default { deviceManager: {}, //Configurations for Style Manager - styleManager: { - sectors: [ - { - name: 'General', - open: false, - buildProps: [ - 'float', - 'display', - 'position', - 'top', - 'right', - 'left', - 'bottom' - ] - }, - { - name: 'Flex', - open: false, - buildProps: [ - 'flex-direction', - 'flex-wrap', - 'justify-content', - 'align-items', - 'align-content', - 'order', - 'flex-basis', - 'flex-grow', - 'flex-shrink', - 'align-self' - ] - }, - { - name: 'Dimension', - open: false, - buildProps: [ - 'width', - 'height', - 'max-width', - 'min-height', - 'margin', - 'padding' - ] - }, - { - name: 'Typography', - open: false, - buildProps: [ - 'font-family', - 'font-size', - 'font-weight', - 'letter-spacing', - 'color', - 'line-height', - 'text-align', - 'text-shadow' - ], - properties: [ - { - property: 'text-align', - list: [ - { value: 'left', className: 'fa fa-align-left' }, - { value: 'center', className: 'fa fa-align-center' }, - { value: 'right', className: 'fa fa-align-right' }, - { value: 'justify', className: 'fa fa-align-justify' } - ] - } - ] - }, - { - name: 'Decorations', - open: false, - buildProps: [ - 'border-radius-c', - 'background-color', - 'border-radius', - 'border', - 'box-shadow', - 'background' - ] - }, - { - name: 'Extra', - open: false, - buildProps: ['transition', 'perspective', 'transform'] - } - ] - }, + styleManager: {}, // Configurations for Block Manager blockManager: {}, @@ -320,5 +233,5 @@ export default { // Experimental: don't use. // Avoid default UI styles - customUI: false + customUI: false, }; diff --git a/src/style_manager/config/config.js b/src/style_manager/config/config.js index 8980c843a..9f10fea5c 100644 --- a/src/style_manager/config/config.js +++ b/src/style_manager/config/config.js @@ -1,7 +1,68 @@ export default { - stylePrefix: 'sm-', - - sectors: [], + // Default sectors and properties + sectors: [ + { + name: 'General', + open: false, + buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], + }, + { + name: 'Flex', + open: false, + buildProps: [ + 'flex-direction', + 'flex-wrap', + 'justify-content', + 'align-items', + 'align-content', + 'order', + 'flex-basis', + 'flex-grow', + 'flex-shrink', + 'align-self', + ], + }, + { + name: 'Dimension', + open: false, + buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], + }, + { + name: 'Typography', + open: false, + buildProps: [ + 'font-family', + 'font-size', + 'font-weight', + 'letter-spacing', + 'color', + 'line-height', + 'text-align', + 'text-shadow', + ], + properties: [ + { + property: 'text-align', + list: [ + { value: 'left', className: 'fa fa-align-left' }, + { value: 'center', className: 'fa fa-align-center' }, + { value: 'right', className: 'fa fa-align-right' }, + { value: 'justify', className: 'fa fa-align-justify' }, + ], + }, + ], + }, + { + name: 'Decorations', + open: false, + buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'], + }, + { + name: 'Extra', + open: false, + buildProps: ['transition', 'perspective', 'transform'], + }, + ], // Specify the element to use as a container, string (query) or HTMLElement // With the empty value, nothing will be rendered @@ -27,6 +88,9 @@ export default { // Properties not to take in account for computed styles avoidComputed: ['width', 'height'], + // Style prefix + stylePrefix: 'sm-', + // Avoid rendering the default style manager. custom: false, };