Ju99ernaut
commented
4 years ago The gjs-preset-webpage plugin by default has no flex section so you have to write your own customStyleManger
Closed ahmeds63 closed 4 years ago
Ju99ernaut
commented
4 years ago The gjs-preset-webpage plugin by default has no flex section so you have to write your own customStyleManger
ajumell
commented
4 years ago Change the styles/index.js with the content given below. Also update the styles as required
`
export default (editor, config) => { const sm = editor.StyleManager; const csm = config.customStyleManager;
const oConfig = [
{
name: 'General',
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
properties: [
{
name: 'Alignment',
property: 'float',
type: 'radio',
defaults: 'none',
list: [
{value: 'none', className: 'fa fa-times'},
{value: 'left', className: 'fa fa-align-left'},
{value: 'right', className: 'fa fa-align-right'}
],
},
{property: 'position', type: 'select'}
],
},
{
name: 'Dimension',
open: false,
buildProps: ['width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
properties: [
{
id: 'flex-width',
type: 'integer',
name: 'Width',
units: ['px', '%'],
property: 'flex-basis',
toRequire: 1,
},
{
property: 'margin',
properties: [
{name: 'Top', property: 'margin-top'},
{name: 'Right', property: 'margin-right'},
{name: 'Bottom', property: 'margin-bottom'},
{name: 'Left', property: 'margin-left'}
],
},
{
property: 'padding',
properties: [
{name: 'Top', property: 'padding-top'},
{name: 'Right', property: 'padding-right'},
{name: 'Bottom', property: 'padding-bottom'},
{name: 'Left', property: 'padding-left'}
],
}
],
},
{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-decoration', 'text-shadow'],
properties: [
{
name: 'Font', property: 'font-family'
},
{
name: 'Weight',
property: 'font-weight'
},
{
name: 'Font color',
property: 'color'
},
{
property: 'text-align',
type: 'radio',
defaults: 'left',
list: [
{value: 'left', name: 'Left', className: 'fa fa-align-left'},
{value: 'center', name: 'Center', className: 'fa fa-align-center'},
{value: 'right', name: 'Right', className: 'fa fa-align-right'},
{value: 'justify', name: 'Justify', className: 'fa fa-align-justify'}
],
},
{
property: 'text-decoration',
type: 'radio',
defaults: 'none',
list: [
{value: 'none', name: 'None', className: 'fa fa-times'},
{value: 'underline', name: 'underline', className: 'fa fa-underline'},
{value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough'}
],
},
{
property: 'text-shadow',
properties: [
{name: 'X position', property: 'text-shadow-h'},
{name: 'Y position', property: 'text-shadow-v'},
{name: 'Blur', property: 'text-shadow-blur'},
{name: 'Color', property: 'text-shadow-color'}
],
}
],
},
{
name: 'Decorations',
open: false,
buildProps: ['opacity', 'border-radius', 'border', 'box-shadow', 'background'],
properties: [
{
type: 'slider',
property: 'opacity',
defaults: 1,
step: 0.01,
max: 1,
min: 0,
},
{
property: 'border-radius',
properties: [
{name: 'Top', property: 'border-top-left-radius'},
{name: 'Right', property: 'border-top-right-radius'},
{name: 'Bottom', property: 'border-bottom-left-radius'},
{name: 'Left', property: 'border-bottom-right-radius'}
],
},
{
property: 'box-shadow',
properties: [
{name: 'X position', property: 'box-shadow-h'},
{name: 'Y position', property: 'box-shadow-v'},
{name: 'Blur', property: 'box-shadow-blur'},
{name: 'Spread', property: 'box-shadow-spread'},
{name: 'Color', property: 'box-shadow-color'},
{name: 'Shadow type', property: 'box-shadow-type'}
],
},
],
},
{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
properties: [
{
property: 'transition',
properties: [
{name: 'Property', property: 'transition-property'},
{name: 'Duration', property: 'transition-duration'},
{name: 'Easing', property: 'transition-timing-function'}
],
},
{
property: 'transform',
properties: [
{name: 'Rotate X', property: 'transform-rotate-x'},
{name: 'Rotate Y', property: 'transform-rotate-y'},
{name: 'Rotate Z', property: 'transform-rotate-z'},
{name: 'Scale X', property: 'transform-scale-x'},
{name: 'Scale Y', property: 'transform-scale-y'},
{name: 'Scale Z', property: 'transform-scale-z'}
],
}
]
},
{
name: 'Flex',
open: false,
properties: [
{
name: 'Flex Container',
property: 'display',
type: 'select',
defaults: 'block',
list: [
{value: 'block', name: 'Disable'},
{value: 'flex', name: 'Enable'}
],
},
{
name: 'Flex Parent',
property: 'label-parent-flex',
type: 'integer',
},
{
name: 'Direction',
property: 'flex-direction',
type: 'radio',
defaults: 'row',
list: [
{
value: 'row',
name: 'Row',
className: 'icons-flex icon-dir-row',
title: 'Row',
},
{
value: 'row-reverse',
name: 'Row reverse',
className: 'icons-flex icon-dir-row-rev',
title: 'Row reverse',
},
{
value: 'column',
name: 'Column',
title: 'Column',
className: 'icons-flex icon-dir-col',
},
{
value: 'column-reverse',
name: 'Column reverse',
title: 'Column reverse',
className: 'icons-flex icon-dir-col-rev',
}
],
},
{
name: 'Justify',
property: 'justify-content',
type: 'radio',
defaults: 'flex-start',
list: [
{
value: 'flex-start',
className: 'icons-flex icon-just-start',
title: 'Start',
},
{
value: 'flex-end',
title: 'End',
className: 'icons-flex icon-just-end',
},
{
value: 'space-between',
title: 'Space between',
className: 'icons-flex icon-just-sp-bet',
},
{
value: 'space-around',
title: 'Space around',
className: 'icons-flex icon-just-sp-ar',
},
{
value: 'center',
title: 'Center',
className: 'icons-flex icon-just-sp-cent',
}
],
},
{
name: 'Align',
property: 'align-items',
type: 'radio',
defaults: 'center',
list: [
{
value: 'flex-start',
title: 'Start',
className: 'icons-flex icon-al-start',
},
{
value: 'flex-end',
title: 'End',
className: 'icons-flex icon-al-end',
},
{
value: 'stretch',
title: 'Stretch',
className: 'icons-flex icon-al-str',
},
{
value: 'center',
title: 'Center',
className: 'icons-flex icon-al-center',
}
],
},
{
name: 'Flex Children',
property: 'label-parent-flex',
type: 'integer',
},
{
name: 'Order',
property: 'order',
type: 'integer',
defaults: 0,
min: 0
},
{
name: 'Flex',
property: 'flex',
type: 'composite',
properties: [
{
name: 'Grow',
property: 'flex-grow',
type: 'integer',
defaults: 0,
min: 0
},
{
name: 'Shrink',
property: 'flex-shrink',
type: 'integer',
defaults: 0,
min: 0
},
{
name: 'Basis',
property: 'flex-basis',
type: 'integer',
units: ['px', '%', ''],
unit: '',
defaults: 'auto',
}
],
},
{
name: 'Align',
property: 'align-self',
type: 'radio',
defaults: 'auto',
list: [
{
value: 'auto',
name: 'Auto',
},
{
value: 'flex-start',
title: 'Start',
className: 'icons-flex icon-al-start',
},
{
value: 'flex-end',
title: 'End',
className: 'icons-flex icon-al-end',
},
{
value: 'stretch',
title: 'Stretch',
className: 'icons-flex icon-al-str',
},
{
value: 'center',
title: 'Center',
className: 'icons-flex icon-al-center',
}
],
}
]
}
];
sm.getSectors().reset(csm && csm.length ? csm : oConfig);}
`
gunslingor
commented
4 years ago sm.getSectors().reset(csm)
Is what fixed it for me, I assume oConfig would work too. I don't understand why this is necessary... or more specifically, why the demo gets away with NOT doing it (unless I'm missing it).
I certainly seem to be rolling thru the common errors as I learn this platform, lol, I must have posted 30 times today on this package.
Explanation would be magical.
Ju99ernaut
commented
4 years ago You may have noticed that by default grapesjs comes with a style manager which has a simple flex sector defined by default, however if you're using gjs-preset-webpage it overwrites this default style manager with it's own which doesn't include a flex sector, so if you want to include the flex sector you have to define a customStyleManager, which will be used instead of the gjs-preset-webpage default. When you use sm.getSectors().reset(csm) after init you are simply removing the current style manager and replacing it with csm. This works but this is not what I meant when I said you have to define a customStyleManager, below is the approach I was referring to which is the one used in the demo:
const editor = grapesjs.init({
//...
pluginsOpts: {
//...
'gjs-preset-webpage': {
//...
customStyleManager: [/* redefine the style manager here */]
}
}
//...
});Yeah, I figured that out. I guess I was expecting that to be more seamless, i.e. if the preset plugin or loader saw a customStyleManager section, figured it would do any replacing it needed to. The important part is that I understand what, not why I guess.
I mean, it makes me wonder... can I define other things like customStyleManger IN there too and then apply them later like this, I'm not a fan of how the demo defines so much of the actual view in the init, then defines a bunch more of it in separate JS to further modify it... i.e. rather than doing cmdm.add, why can't their be an command section to the init, that runs after any presets?
Just academic at this point. I need to study the preset project a bit more.
Thanks.
I am using grapesjs plugins to build the side panel options and different elements. I am looking for this flex section in the side panel but there is none.
Is there any option that I need to enable for this any of the following plugins that I am using?
gjs-preset-webpage,grapesjs-lory-slider,grapesjs-tabs,grapesjs-tooltip,grapesjs-custom-code,grapesjs-typed,gjs-blocks-flexboxI tried adding the
customStyleManageringjs-preset-pluginbut that overrides all the default option that this plugin comes with I have to manually write all those options incustomStyleManagerI don't want to do that. Please help - thanks!