@flozy/editor 1.4.0 → 1.4.2

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,10 +34,15 @@ function AppHeader(props) {
     appLogo,
     menus,
     bgColor,
+    bgColorHover,
+    textColor,
+    textColorHover,
     menuStyle,
     bannerSpacing,
     fontSize,
-    fontFamily
+    fontFamily,
+    logoFontSize,
+    titleFontFamily
   } = element;
   const {
     left,
@@ -63,7 +68,8 @@ function AppHeader(props) {
       className: "element-toolbar",
       contentEditable: false,
       style: {
-        top: "-24px"
+        top: "-24px",
+        right: "50px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "App Header Settings",
@@ -110,9 +116,9 @@ function AppHeader(props) {
     children: [/*#__PURE__*/_jsx(Typography, {
       variant: "h6",
       sx: {
-        my: 2
+        my: 2,
+        color: textColor
       },
-      color: "primary",
       children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
         alt: `${appTitle} Logo`,
         style: {
@@ -175,7 +181,10 @@ function AppHeader(props) {
           color: "primary",
           style: {
             display: "inline-flex",
-            alignItems: "center"
+            alignItems: "center",
+            color: textColor,
+            fontSize: logoFontSize,
+            fontFamily: titleFontFamily
           },
           sx: {
             flexGrow: 1,
@@ -210,10 +219,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/Form/Form.js

@@ -195,13 +195,13 @@ const Form = props => {
         spacing: 2,
         children: [children, /*#__PURE__*/_jsx(Grid, {
           item: true,
+          xs: buttonProps?.grid || 6,
           className: "form-btn-wrpr",
           contentEditable: false,
           style: {
             display: "flex",
             justifyContent: btnAlign?.horizantal || "start",
-            alignItems: btnAlign?.vertical || "start",
-            marginLeft: "0px"
+            alignItems: btnAlign?.vertical || "start"
           },
           children: /*#__PURE__*/_jsx("button", {
             onClick: onSubmitClick,

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormText = props => {
   const {
@@ -8,7 +7,8 @@ const FormText = props => {
   const {
     borderColor,
     bannerSpacing,
-    borderRadius
+    borderRadius,
+    height
   } = fieldProps;
   const {
     left,
@@ -22,13 +22,14 @@ const FormText = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  console.log(fieldProps);
   const onChange = e => {
     e.preventDefault();
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    item: true,
-    xs: 12,
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
     contentEditable: false,
     children: /*#__PURE__*/_jsx("input", {
       ...fieldProps,
@@ -40,7 +41,8 @@ const FormText = props => {
         paddingLeft: `${left || 8}px`,
         paddingRight: `${right || 8}px`,
         paddingTop: `${top || 8}px`,
-        paddingBottom: `${bottom || 8}px`
+        paddingBottom: `${bottom || 8}px`,
+        height: height || "auto"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormTextArea = props => {
+  const {
+    fieldProps
+  } = props;
+  const {
+    borderColor,
+    bannerSpacing,
+    borderRadius,
+    height
+  } = fieldProps;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
+  console.log(fieldProps);
+  const onChange = e => {
+    e.preventDefault();
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "100%",
+      display: "flex"
+    },
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx("textarea", {
+      ...fieldProps,
+      onChange: onChange,
+      style: {
+        width: "100%",
+        border: `1px solid ${borderColor || "#FFF"}`,
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        paddingLeft: `${left || 8}px`,
+        paddingRight: `${right || 8}px`,
+        paddingTop: `${top || 8}px`,
+        paddingBottom: `${bottom || 8}px`,
+        height: height || "150px"
+      }
+    })
+  });
+};
+export default FormTextArea;

package/dist/Editor/Elements/Form/FormElements/index.js

@@ -1,5 +1,7 @@
 import FormText from "./FormText";
+import FormTextArea from "./FormTextArea";
 const FormElements = {
-  text: FormText
+  text: FormText,
+  textArea: FormTextArea
 };
 export default FormElements;

package/dist/Editor/Elements/Form/FormField.js

@@ -27,7 +27,6 @@ const FormField = props => {
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const [openSetttings, setOpenSettings] = useState(false);
-  const itemWidth = (grid || 6) / 12 * 100;
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -83,11 +82,11 @@ const FormField = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
+    xs: grid,
     ...attributes,
     className: "form-field",
     style: {
-      position: "relative",
-      width: `${itemWidth}%`
+      position: "relative"
     },
     children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
       fieldProps: elementProps

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,7 +21,17 @@ const GridItem = props => {
     grid,
     bannerSpacing,
     bgColor,
-    alignment
+    alignment,
+    gridHeight,
+    borderRadius,
+    borderStyle,
+    borderWidth,
+    borderColor,
+    margin,
+    textColorHover,
+    bgColorHover,
+    borderColorHover,
+    textColor
   } = element;
   const {
     left,
@@ -31,7 +41,8 @@ const GridItem = props => {
   } = bannerSpacing || {};
   const {
     vertical,
-    horizantal
+    horizantal,
+    flexDirection
   } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -62,6 +73,7 @@ const GridItem = props => {
     const updateData = {
       ...data
     };
+    console.log(updateData);
     delete updateData.children;
     Transforms.setNodes(editor, {
       ...updateData
@@ -80,31 +92,53 @@ const GridItem = props => {
       });
     }
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: `grid-item xs-${grid} element-root`,
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    className: `grid-item xs-${grid} element-root gi-top-wrpr`,
     ...attributes,
-    style: {
+    sx: {
       display: "flex",
-      flexDirection: "column",
-      backgroundColor: bgColor,
+      flexDirection: flexDirection || "column",
+      backgroundColor: bgColor || "transparent",
       alignItems: horizantal,
       justifyContent: vertical,
       width: `${itemWidth}%`,
-      margin: "0px"
+      marginLeft: `${margin?.left || 0}px`,
+      marginRight: `${margin?.right || 0}px`,
+      marginTop: `${margin?.top || 0}px`,
+      marginBottom: `${margin?.bottom || 0}px`,
+      "&:hover": {
+        background: `${bgColorHover || bgColor || "transparent"}`,
+        "& *": {
+          color: textColorHover || textColor || "#000"
+        }
+      }
     },
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
       children: /*#__PURE__*/_jsx(GridItemToolbar, {})
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "gi-inner-cw",
+      component: "div",
+      sx: {
         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,
+        height: gridHeight || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: borderRadius || "0px",
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        "&:hover": {
+          borderColor: borderColorHover || borderColor || "transparent"
+        }
       },
       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();
   };