@flozy/editor 1.4.0 → 1.4.1

package/dist/Editor/CommonEditor.js

@@ -75,13 +75,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageProps
   } = pageSettings || {};
   const {
-    bannerSpacing
+    bannerSpacing,
+    pageBgImage,
+    pageColor
   } = pageProps || {
     bannerSpacing: {
-      left: 8,
-      right: 8,
-      top: 8,
-      bottom: 8
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
     }
   };
   useEffect(() => {
@@ -257,7 +259,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
             className: "editor-wrapper",
             style: {
               border: "1px solid #f3f3f3",
-              background: pageProps?.pageColor || defaultBG || "#FFF",
+              backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
+              backgroundColor: pageColor || defaultBG || "#FFF",
               color: pageProps?.color || "#000",
               paddingLeft: `${bannerSpacing?.left}px`,
               paddingRight: `${bannerSpacing?.right}px`,

package/dist/Editor/Editor.css

@@ -546,4 +546,4 @@ blockquote {
 
 .empty-carousel-wrapper .grid-item-toolbar {
   left: 0px;
-}
+}

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -34,6 +34,9 @@ function AppHeader(props) {
     appLogo,
     menus,
     bgColor,
+    bgColorHover,
+    textColor,
+    textColorHover,
     menuStyle,
     bannerSpacing,
     fontSize,
@@ -210,10 +213,15 @@ function AppHeader(props) {
             component: "a",
             href: item.url,
             sx: {
-              color: "#fff",
               fontFamily: fontFamily,
               textTransform: "none",
-              fontSize: fontSize || "16px"
+              fontSize: fontSize || "16px",
+              color: textColor || "#FFF",
+              background: bgColor || "none",
+              "&:hover": {
+                color: textColorHover || textColor || "#FFF",
+                background: bgColorHover || bgColor || "none"
+              }
             },
             children: item.text
           }, item)) : null]

package/dist/Editor/Elements/Button/EditorButton.js

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import { IconButton, Menu, MenuItem, Tooltip, Box } from "@mui/material";
+import * as fIcons from "@mui/icons-material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -13,7 +14,8 @@ const EditorButton = props => {
   const {
     attributes,
     element,
-    customProps
+    customProps,
+    children
   } = props;
   const {
     readOnly,
@@ -34,7 +36,11 @@ const EditorButton = props => {
     buttonLink,
     textSize,
     textAlign,
-    fontFamily
+    fontFamily,
+    textColorHover,
+    bgColorHover,
+    buttonIcon,
+    iconPosition
   } = element;
   const {
     linkType,
@@ -52,6 +58,7 @@ const EditorButton = props => {
     right,
     bottom
   } = bannerSpacing || {};
+  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
       if (metadata?.buttonLink?.handler) {
@@ -121,15 +128,19 @@ const EditorButton = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: "editor-btn-wrapper",
     ...attributes,
+    style: {
+      display: "inline"
+    },
     children: [/*#__PURE__*/_jsx("div", {
       className: "editor-btn-wrapper-inner",
       style: {
-        textAlign: textAlign || "left"
+        textAlign: textAlign || "left",
+        display: "inline"
       },
-      children: /*#__PURE__*/_jsx("button", {
-        contentEditable: false,
-        className: "editor-btn",
-        style: {
+      contentEditable: false,
+      children: /*#__PURE__*/_jsxs(Box, {
+        component: "button",
+        sx: {
           background: bgColor || "rgb(30, 75, 122)",
           borderWidth: "1px",
           borderBlockStyle: "solid",
@@ -141,11 +152,33 @@ const EditorButton = props => {
           paddingBottom: `${bottom || 8}px`,
           color: `${textColor || "#FFFFFF"}`,
           fontSize: textSize || "inherit",
-          fontFamily: fontFamily || "PoppinsRegular"
+          fontFamily: fontFamily || "PoppinsRegular",
+          display: "inline-flex",
+          alignItems: "center",
+          "&:hover": {
+            color: `${textColorHover || textColor || "#FFFFFF"}`,
+            background: bgColorHover || bgColor || "rgb(30, 75, 122)"
+          }
         },
         onClick: onClick,
-        children: label || "My Button"
+        children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
+          style: {
+            paddingLeft: "4px",
+            paddingRight: "4px"
+          }
+        }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
+          style: {
+            paddingLeft: "4px",
+            paddingRight: "4px"
+          }
+        })]
       })
+    }), /*#__PURE__*/_jsx("div", {
+      contentEditable: true,
+      style: {
+        display: "inline"
+      },
+      children: children
     }), /*#__PURE__*/_jsxs(Menu, {
       className: "editor-btn-options",
       open: anchorEl !== null,

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -25,10 +25,12 @@ const ChipText = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsx("button", {
     ...attributes,
     className: "editor-chip-text",
+    contentEditable: false,
     style: {
+      display: "inline",
       paddingLeft: `${left}px`,
       paddingRight: `${right}px`,
       paddingTop: `${top}px`,
@@ -38,7 +40,10 @@ const ChipText = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: children
+    children: /*#__PURE__*/_jsx("div", {
+      contentEditable: true,
+      children: children
+    })
   });
 };
 export default ChipText;

package/dist/Editor/Elements/Grid/Grid.js

@@ -53,7 +53,7 @@ const Grid = props => {
       Transforms.insertNodes(editor, [{
         ...gridItem()
       }], {
-        at: insertPath
+        at: [...path, children.length]
       });
       // new line
       Transforms.insertNodes(editor, [{

package/dist/Editor/Elements/Grid/GridItem.js

@@ -31,7 +31,8 @@ const GridItem = props => {
   } = bannerSpacing || {};
   const {
     vertical,
-    horizantal
+    horizantal,
+    flexDirection
   } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -62,6 +63,7 @@ const GridItem = props => {
     const updateData = {
       ...data
     };
+    console.log(updateData);
     delete updateData.children;
     Transforms.setNodes(editor, {
       ...updateData
@@ -85,7 +87,7 @@ const GridItem = props => {
     ...attributes,
     style: {
       display: "flex",
-      flexDirection: "column",
+      flexDirection: flexDirection || "column",
       backgroundColor: bgColor,
       alignItems: horizantal,
       justifyContent: vertical,
@@ -97,14 +99,16 @@ const GridItem = props => {
       contentEditable: false,
       children: /*#__PURE__*/_jsx(GridItemToolbar, {})
     }), /*#__PURE__*/_jsx("div", {
+      className: "gi-inner-cw",
       style: {
         display: "flex",
-        flexDirection: "column",
+        flexDirection: flexDirection || "column",
         width: "100%",
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`
+        paddingBottom: `${bottom}px`,
+        justifyContent: vertical
       },
       children: children
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {

package/dist/Editor/Elements/Grid/templates/default_grid.js

@@ -0,0 +1,144 @@
+const default_grid = {
+  type: "grid",
+  grid: "container",
+  children: [{
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "alignCenter",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Ship Sites with Style.",
+          fontSize: "huge",
+          fontFamily: "PoppinsBold"
+        }]
+      }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    },
+    alignment: {
+      horizantal: "center"
+    }
+  }, {
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "alignCenter",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum."
+        }]
+      }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    }
+  }, {
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "button",
+      children: [{
+        text: "     "
+      }],
+      buttonLink: {
+        linkType: "webAddress"
+      },
+      label: "Gettings Started",
+      bgColor: "rgba(192,192,192, 1)",
+      textColor: "rgba(0,0,0,1)",
+      lockSpacing: true,
+      bannerSpacing: {
+        top: "16",
+        left: "16",
+        right: "16",
+        bottom: "16"
+      },
+      lockRadius: true,
+      borderRadius: {
+        topLeft: "12",
+        topRight: "12",
+        bottomLeft: "12",
+        bottomRight: "12"
+      },
+      bgColorHover: "rgba(0, 0, 0, 1)",
+      textColorHover: "rgba(255, 255, 255, 1)",
+      borderColor: "rgba(175, 51, 242, 0)"
+    }, {
+      type: "button",
+      children: [{
+        text: ""
+      }],
+      buttonLink: {
+        linkType: "webAddress"
+      },
+      label: "Learn More",
+      bgColor: "rgba(192,192,192, 1)",
+      textColor: "rgba(0,0,0,1)",
+      lockSpacing: false,
+      bannerSpacing: {
+        top: "16",
+        left: "32",
+        right: "32",
+        bottom: "16"
+      },
+      lockRadius: true,
+      borderRadius: {
+        topLeft: "12",
+        topRight: "12",
+        bottomLeft: "12",
+        bottomRight: "12"
+      },
+      borderColor: "rgba(175, 51, 242, 0)",
+      bgColorHover: "rgba(0,0,0,1)",
+      textColorHover: "rgba(255,255,255, 1)"
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    alignment: {
+      flexDirection: "row",
+      vertical: "center",
+      horizantal: "center"
+    },
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    }
+  }],
+  alignment: {
+    flexDirection: "column"
+  },
+  lockSpacing: true,
+  bannerSpacing: {
+    top: "16",
+    left: "16",
+    right: "16",
+    bottom: "16"
+  }
+};
+export default JSON.stringify(default_grid);

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -54,6 +54,7 @@ const PageSettingsButton = props => {
       ...data
     };
     delete updateData.children;
+    console.log(openSetttings);
     if (openSetttings?.path) {
       Transforms.setNodes(editor, {
         pageProps: {
@@ -63,6 +64,7 @@ const PageSettingsButton = props => {
         at: openSetttings?.path
       });
     } else {
+      console.log(editor.children.length);
       Transforms.insertNodes(editor, [{
         type: "page-settings",
         pageProps: {
@@ -71,7 +73,9 @@ const PageSettingsButton = props => {
         children: [{
           text: ""
         }]
-      }]);
+      }], {
+        at: [editor.children.length]
+      });
     }
     onClose();
   };

package/dist/Editor/Toolbar/FormatTools/Autocomplete.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import { activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectFreeSolo = ({
+  editor,
+  format,
+  options
+}) => {
+  const value = activeMark(editor, format);
+  console.log(options);
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    console.log(event.target.value, format);
+    // const value = event.target.value;
+    // addMarkData(editor, { format, value });
+  };
+
+  return /*#__PURE__*/_jsx(Autocomplete, {
+    size: "small",
+    style: {},
+    value: value?.value,
+    className: "editor-dd",
+    onChange: e => changeMarkData(e, format),
+    getOptionLabel: option => option.text,
+    options: options,
+    freeSolo: true,
+    renderInput: params => /*#__PURE__*/_jsx(TextField, {
+      ...params
+    })
+  });
+};
+export default SelectFreeSolo;

package/dist/Editor/Toolbar/FormatTools/Text.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { sizeMap } from "../../utils/font.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Text = ({
+  editor,
+  format,
+  options,
+  style = {}
+}) => {
+  const value = activeMark(editor, format);
+  const changeMarkData = (event, format) => {
+    event.preventDefault();
+    const value = event.target.value;
+    addMarkData(editor, {
+      format,
+      value
+    });
+  };
+  return /*#__PURE__*/_jsx(TextField, {
+    size: "small",
+    style: style,
+    value: sizeMap[value],
+    className: "editor-text",
+    onChange: e => changeMarkData(e, format)
+  });
+};
+export default Text;

package/dist/Editor/Toolbar/FormatTools/index.js

@@ -1,4 +1,6 @@
 import BlockButton from "./BlockButton";
 import Dropdown from "./Dropdown";
 import MarkButton from "./MarkButton";
-export { BlockButton, Dropdown, MarkButton };
+import Autocomplete from "./Autocomplete";
+import Text from "./Text";
+export { BlockButton, Dropdown, MarkButton, Autocomplete, Text };

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -5,7 +5,6 @@ import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import TextFormat from "./TextFormat";
 import usePopupStyle from "./PopupToolStyle";
-import useFormat from "../../utils/customHooks/useFormat";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = () => {
@@ -18,9 +17,7 @@ const PopupTool = () => {
   } = editor;
   const open = Boolean(anchorEl);
   const id = open ? "popup-edit-tool" : "";
-  console.log(useFormat(editor, null));
   useEffect(() => {
-    console.log(selection, inFocus);
     if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {

package/dist/Editor/Toolbar/Toolbar.js

@@ -20,8 +20,10 @@ import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
 import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
 import CarouselButton from "../Elements/Carousel/CarouselButton";
 import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
-import "./styles.css";
 import FormButton from "../Elements/Form/FormButton.js";
+import Text from "./FormatTools/Text";
+import ChipTextButton from "../Elements/ChipText/ChipTextButton";
+import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -65,6 +67,14 @@ const Toolbar = props => {
               ...element,
               editor: editor
             }, element.id);
+          case "text":
+            return /*#__PURE__*/_jsx(Text, {
+              ...element,
+              editor: editor,
+              style: {
+                width: "80px"
+              }
+            }, element.id);
           case "link":
             return /*#__PURE__*/_jsx(LinkButton, {
               active: isBlockActive(editor, "link"),
@@ -128,14 +138,11 @@ const Toolbar = props => {
             return /*#__PURE__*/_jsx(CarouselButton, {
               editor: editor
             }, element.id);
-          // case "chip-text":
-          //   return (
-          //     <ChipTextButton
-          //       key={element.id}
-          //       editor={editor}
-          //       customProps={customProps}
-          //     />
-          //   );
+          case "chip-text":
+            return /*#__PURE__*/_jsx(ChipTextButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           // case "drawer":
           //   return (
           //     <DrawerMenuButton

package/dist/Editor/common/StyleBuilder/appHeaderStyle.js

@@ -80,5 +80,22 @@ const appHeaderStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Text",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColorHover",
+    type: "color"
+  }]
 }];
 export default appHeaderStyle;

package/dist/Editor/common/StyleBuilder/buttonStyle.js

@@ -39,6 +39,25 @@ const buttonStyle = [{
     key: "buttonLink",
     type: "buttonLink"
   }]
+}, {
+  tab: "Icon",
+  value: "icon",
+  fields: [{
+    label: "Icon Position",
+    key: "iconPosition",
+    type: "textOptions",
+    options: [{
+      value: "start",
+      label: "Start"
+    }, {
+      value: "end",
+      label: "End"
+    }]
+  }, {
+    label: "Button Icons",
+    key: "buttonIcon",
+    type: "icons"
+  }]
 }, {
   tab: "Position",
   value: "position",
@@ -88,6 +107,23 @@ const buttonStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Text",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColorHover",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColorHover",
+    type: "color"
+  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js

@@ -104,7 +104,7 @@ const Alignment = props => {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",
           name: "flexDirection",
-          value: value?.flexDirection || "row",
+          value: value?.flexDirection || "column",
           onChange: handleChange,
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "row",

package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
+import * as fIcons from "@mui/icons-material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
+  if (b.indexOf("Outlined") > -1) {
+    a.outlined.push(b);
+  } else if (b.indexOf("Rounded") > -1) {
+    a.rounded.push(b);
+  } else if (b.indexOf("Sharp") > -1) {
+    a.sharp.push(b);
+  } else if (b.indexOf("TwoTone") > -1) {
+    a.tt.push(b);
+  } else {
+    a.filled.push(b);
+  }
+  return a;
+}, {
+  filled: [],
+  outlined: [],
+  rounded: [],
+  tt: [],
+  sharp: []
+});
+const Icons = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const [val, setVal] = useState("");
+  const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
+  const onSelectIcon = ico => () => {
+    onChange({
+      [key]: ico
+    });
+  };
+  const handleChange = e => {
+    const keyVal = e.target.value?.toLowerCase();
+    setVal(keyVal);
+    if (keyVal) {
+      setList(MUIIcons.filled.filter(f => {
+        return f.toLowerCase().indexOf(keyVal) > -1;
+      }).slice(0, 90));
+    } else {
+      setList(MUIIcons.filled.slice(0, 90));
+    }
+  };
+  const SelectedIcon = value ? fIcons[value] : null;
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px"
+        },
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 10,
+          children: /*#__PURE__*/_jsx(TextField, {
+            fullWidth: true,
+            size: "small",
+            placeholder: "Search Icons...",
+            value: val,
+            onChange: handleChange
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 2,
+          style: {
+            paddingLeft: "8px"
+          },
+          children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      textAlign: "center",
+      style: {
+        maxHeight: "200px",
+        overflowY: "auto"
+      },
+      children: list.map(m => {
+        const Ico = fIcons[m];
+        return /*#__PURE__*/_jsx(Tooltip, {
+          title: m,
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onSelectIcon(m),
+            children: /*#__PURE__*/_jsx(Ico, {})
+          })
+        }, `mui_ico_${m}`);
+      })
+    })]
+  });
+};
+export default Icons;

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -13,6 +13,7 @@ import SaveAsTemplate from "./saveAsTemplate";
 import TextAlign from "./textAlign";
 import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
+import Icons from "./icons";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -28,6 +29,7 @@ const FieldMap = {
   saveAsTemplate: SaveAsTemplate,
   textAlign: TextAlign,
   textOptions: TextOptions,
-  selectBox: SelectBox
+  selectBox: SelectBox,
+  icons: Icons
 };
 export default FieldMap;

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { Grid, MenuItem, Select } from "@mui/material";
+import { FormControlLabel, Grid, MenuItem, Select } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextOptions = props => {
   const {
     value,
@@ -19,13 +20,19 @@ const TextOptions = props => {
   };
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
         padding: "10px"
       },
-      children: /*#__PURE__*/_jsx(Select, {
+      children: [/*#__PURE__*/_jsx("label", {
+        style: {
+          marginBottom: "8px",
+          display: "flex"
+        },
+        children: data?.label
+      }), /*#__PURE__*/_jsx(Select, {
         onChange: handleChange,
         value: value || options[0]?.value,
         placeholder: data?.label,
@@ -37,7 +44,7 @@ const TextOptions = props => {
             children: renderOption ? renderOption(m) : m.label || m.text
           }, `${key}_${m.value}`);
         })
-      })
+      })]
     })
   });
 };

package/dist/Editor/common/StyleBuilder/index.js

@@ -30,7 +30,7 @@ const StyleContent = props => {
       style: {
         marginTop: "12px"
       },
-      children: [...fields].map(m => {
+      children: [...fields].map((m, i) => {
         const FieldComponent = FieldMap[m.type];
         return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
           data: m,
@@ -39,7 +39,7 @@ const StyleContent = props => {
           elementProps: element,
           customProps: customProps,
           handleClose: handleClose
-        }, `ei_stt_tab_${value}_${m.key}`) : null;
+        }, `ei_stt_tab_${value}_${m.key}_${i}`) : null;
       })
     })
   }, value);

package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js

@@ -7,11 +7,11 @@ const pageSettingsStyle = [{
     type: "color"
   }, {
     label: "Background URL",
-    key: "pageColor",
+    key: "pageBgImage",
     type: "text"
   }, {
     label: "Background Image",
-    key: "pageColor",
+    key: "pageBgImage",
     type: "backgroundImage"
   }, {
     label: "Background",

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -166,7 +166,7 @@ export const getMarked = (leaf, children) => {
     });
   }
   if (leaf.fontSize) {
-    const size = sizeMap[leaf.fontSize];
+    const size = sizeMap[leaf.fontSize] || leaf.fontSize;
     children = /*#__PURE__*/_jsx("span", {
       style: {
         fontSize: size

package/dist/Editor/utils/grid.js

@@ -1,13 +1,7 @@
 import { Transforms } from "slate";
-import { gridItem } from "./gridItem";
+import default_grid from "../Elements/Grid/templates/default_grid";
 export const insertGrid = (editor, item) => {
-  const grid = !item ? {
-    type: "grid",
-    grid: "container",
-    children: [{
-      ...gridItem()
-    }]
-  } : item;
+  const grid = !item ? JSON.parse(default_grid) : item;
   const {
     selection
   } = editor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"