grapesjs-preset-webpage
grapesjs-preset-webpage copied to clipboard
Published
20 hours ago •
artf
artf
Duplicate StyleManager
I have been messing with this for days now...
Tried with several browsers, several servers (PHP, NodeJS and even a simple HTML file), but cannot seem to figure out why my Style Manager sections are duplicated.
Any help would be greatly appreciated!
I also get this problem, any one know how to fix it ?
I found the solution that you can add styleManager: {} inside grapes.init({ styleManager: {} })
- But for the reason I don't know the duplicate on below where they from.
var editor = grapesjs.init({
container: '#gjs',
height: '100%',
styleManager: {
clearProperties: true,
}
});
Here clearProperties solution works but if any element is flex, Flex section is not shown in style manager.
Thank you, @amittal-quot ! Now I know the source of my other problem. Thank you for the bad news! 😢
@robsonsobral Found the fix, add following to grapejs.init() config
styleManager: { clearProperties: 1 },
plugins: [
"gjs-preset-webpage",
],
pluginsOpts: {
"gjs-preset-webpage": {
blocksBasicOpts: { flexGrid: 1 },
customStyleManager: [
{
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-bg",
],
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" },
],
},
{
id: "background-bg",
property: "background",
type: "bg",
},
],
},
{
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",
},
],
},
],
},
],
},
}
@amittal-quot , thank you! Almost perfect, with exception of background!
Hi Guys, I got the same problem duplicated elements on a fresh install of "grapesjs-preset-webpage" this repo. So anyone can test it. @amittal-quot Great fix, i'll use this one. Thank you!
To add the missing flex section which disappears when using @scottccoates solution, use the following snippet after initialising the editor:
editor.StyleManager.addSector(
'flexSector',
{
name: 'Flex',
open: false,
buildProps: [
'flex-direction',
'flex-wrap',
'justify-content',
'align-items',
'align-content',
'order',
'flex-basis',
'flex-grow',
'flex-shrink',
'align-self',
],
},
{ at: 2 },
);
I think the reason of "Duplicate StyleManager" is that the 'add code' sectors.add(this.config.sectors, { silent: true }); in grapesjs run after the 'reset code' sm.getSectors().reset(csm && csm.length ? csm : [{ ...}]) in grapesjs-preset-webpage
so I think use the customStyleManager in grapesjs-preset-webpage wouldn't work. At least I don't work.
I resolve it by using editor.StyleManager.getSectors().reset([{ ... }]) after grapesjs.init
I found a solution for gjsPresetWebpage plugin
Add this after grapesjs.init
const desiredModels = editor.StyleManager.getSectors().models.filter((value, idx, self) => {
return idx === self.findIndex((t) => (
t.id === value.id && t.name === value.name
))
});
editor.StyleManager.getSectors().models = desiredModels;
Should be fixed in the new release https://github.com/artf/grapesjs-preset-webpage/releases/tag/v1.0.1
