@flozy/editor 4.0.2 → 4.0.4

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -0,0 +1,236 @@
+import React, { useState } from "react";
+import { Transforms, Node, Path } from "slate";
+import { useSlateStatic } from "slate-react";
+import { ReactEditor } from "slate-react";
+import { Box, useTheme } from "@mui/material";
+import RnD from "../../common/RnD";
+import { onDropItem } from "../../common/RnD/Utils/gridDropItem";
+import useBreakpoints from "../../hooks/useBreakpoints";
+import { breakpointValues, formatBreakpointValues } from "./breakpointConstants";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
+import { bringItemToFB } from "../../helper";
+import itemOptions from "./Options/sectionItemOptions";
+import { formField } from "../../utils/formfield";
+import Workflow from "../Form/Workflow";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FreeGridItem = props => {
+  const theme = useTheme();
+  const breakpoint = useBreakpoints(theme);
+  const {
+    element,
+    attributes,
+    children,
+    customProps
+  } = props;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const {
+    readOnly
+  } = customProps;
+  const {
+    updated_at,
+    childType,
+    zIndex
+  } = element;
+  // get values based on breakpoint size
+  const {
+    gridArea,
+    width,
+    height,
+    left,
+    top,
+    marginTop
+  } = breakpointValues(element.type, breakpoint, element);
+  const {
+    setSelectedElement,
+    selectedElement
+  } = useEditorContext();
+  const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
+  const [openWorkflow, setOpenWorkflow] = useState(false);
+  const onChangeSettings = () => {};
+  const onChange = data => {
+    let updateData = {
+      ...data
+    };
+    delete updateData.children;
+    updateData = formatBreakpointValues(element.type, breakpoint, updateData);
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+  };
+  const handleDragEvent = (type, data, cb) => {
+    const toPosition = {
+      left: left + data.lastX,
+      top: top + data.lastY
+    };
+    const {
+      node,
+      ...rest
+    } = data;
+    switch (type) {
+      case "stop":
+        const updated_data = onDropItem({
+          editor,
+          fromPosition: {
+            left,
+            top
+          },
+          toPosition,
+          path,
+          ref: node,
+          breakpoint,
+          ...rest
+        }, ".freegrid-container");
+        if (cb) {
+          cb(updated_data);
+        }
+        break;
+      default:
+    }
+  };
+  const handleResizeEvent = (type, data, cb) => {
+    switch (type) {
+      case "stop":
+        return;
+      default:
+    }
+  };
+  const onDelete = () => {
+    try {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const handleContextMenuClick = d => {
+    switch (d?.name) {
+      case "bringForward":
+        bringItemToFB(editor, {
+          path,
+          moveFront: true
+        });
+        break;
+      case "bringBackward":
+        bringItemToFB(editor, {
+          path,
+          moveFront: false
+        });
+        break;
+      case "cut":
+        window.copiedNode = JSON.stringify(Node.get(editor, path));
+        onDelete();
+        focusOnNewItem(editor, Path.parent(path), {
+          setSelectedElement
+        });
+        break;
+      case "copy":
+        window.copiedNode = JSON.stringify(Node.get(editor, path));
+        break;
+      case "delete":
+        onDelete();
+        setSelectedElement({});
+        break;
+      default:
+        return;
+    }
+  };
+  const onAddFormField = () => {
+    try {
+      Transforms.insertNodes(editor, {
+        ...formField()
+      }, {
+        at: [...path, 0, 0]
+      });
+    } catch (err) {
+      console.log(err, "Add Field Error in Form Builder");
+    }
+  };
+  const closeWorkflow = () => {
+    setOpenWorkflow(false);
+  };
+  const onWorkflowSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: [...path, 0]
+    });
+  };
+  const handleActionClick = type => {
+    switch (type) {
+      case "workFlow":
+        setSelectedElement({
+          ...selectedElement,
+          enable: 2
+        });
+        setOpenWorkflow(true);
+        break;
+      case "addFormField":
+        onAddFormField();
+        break;
+      default:
+        break;
+    }
+  };
+  return /*#__PURE__*/_jsx(RnD, {
+    id: `freegrid_item_${path.join("|")}_${updated_at}_${breakpoint}`,
+    className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
+    editor: editor,
+    path: path,
+    actions: itemOptions[childType] || itemOptions?.default,
+    settingsProps: {
+      settings: "freegridItem",
+      onChange: onChangeSettings,
+      customProps
+    },
+    style: {
+      "--left": `${left || 0}px`,
+      "--marginTop": `${marginTop || 0}px`,
+      "--gridArea": `${gridArea}`,
+      "--width": `${width}px`,
+      "--height": `${height}px`,
+      "--zIndex": 100 + arrangeIndex
+    },
+    defaultStyle: {
+      height: `${height}px`,
+      width: `${width}px`
+    },
+    gridArea: gridArea,
+    onChange: onChange,
+    delta: {
+      width,
+      height
+    },
+    handleDragEvent: handleDragEvent,
+    handleResizeEvent: handleResizeEvent,
+    readOnly: readOnly,
+    childType: childType || "",
+    handleContextMenuClick: handleContextMenuClick,
+    handleActionClick: handleActionClick,
+    itemData: {
+      left: left || 0
+    },
+    children: /*#__PURE__*/_jsxs(Box, {
+      component: "div",
+      ...attributes,
+      className: `fgi_type_${childType}`,
+      children: [children, /*#__PURE__*/_jsx(Workflow, {
+        openWorkflow: openWorkflow,
+        element: element,
+        customWorkflowElement: element?.children?.[0] || null,
+        closeWorkflow: closeWorkflow,
+        onSave: onWorkflowSave
+      })]
+    })
+  });
+};
+export default FreeGridItem;

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Box, List, ListItemButton } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AddElement = props => {
+  const {
+    handleClick
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsxs(List, {
+      className: "item-list-wrpr",
+      children: [/*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addText"),
+        children: "Text"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addButton"),
+        children: "Button"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addImage"),
+        children: "Image"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addVideo"),
+        children: "Video"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addBox"),
+        children: "Box"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addForm"),
+        children: "Form"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addAppHeader"),
+        children: "App Header"
+      })]
+    })
+  });
+};
+export default AddElement;

package/dist/Editor/Elements/FreeGrid/Options/More.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box, List, ListItemButton } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const More = props => {
+  const {
+    handleClick
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsxs(List, {
+      className: "item-list-wrpr",
+      children: [/*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("addSection"),
+        children: "Add Section"
+      }), /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("duplicateSection"),
+        children: "Duplicate Section"
+      })]
+    })
+  });
+};
+export default More;

package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../common/StyleBuilder";
+import sectionStyle from "../../../common/StyleBuilder/sectionStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SectionSettings = props => {
+  const {
+    editor,
+    path,
+    classes
+  } = props;
+  const element = Node.get(editor, path);
+  const styleMaps = sectionStyle?.filter(f => !f?.hideOnFGS);
+  const onChange = data => {
+    const updated_props = {
+      ...element,
+      ...data,
+      field_type: data?.element
+    };
+    delete updated_props.children;
+    Transforms.setNodes(editor, {
+      ...updated_props
+    }, {
+      at: path
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "style-settings-wrpr",
+    sx: classes.sectionSettingsPopper,
+    children: styleMaps?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: sectionStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: {},
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default SectionSettings;

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -0,0 +1,19 @@
+const commonOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
+const textOptions = ["edit", "settings", "link", "saveAsTemplate", "close"];
+const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
+const imageOptions = ["settings", "link", "saveAsTemplate", "close"];
+const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
+const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
+const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
+const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "close"];
+const itemOptions = {
+  default: commonOptions,
+  text: textOptions,
+  button: buttonOptions,
+  image: imageOptions,
+  box: boxOptions,
+  appHeader: appHeaderOptions,
+  form: formOptions,
+  section: sectionOptions
+};
+export default itemOptions;

package/dist/Editor/Elements/FreeGrid/breakpointConstants.js

@@ -0,0 +1,75 @@
+const breakpointConstants = {
+  freegrid: ["height"],
+  freegridItem: ["left", "top", "marginTop", "width", "height", "gridArea"],
+  freegridBox: ["left", "top", "marginTop", "width", "height", "gridArea"]
+};
+export function CssVar(device = "lg", key, props) {
+  const keyTo = `${key}_${device}`;
+  const value = props[keyTo] === undefined ? props[key] : props[keyTo];
+  return value;
+}
+export function breakpointValues(type, breakpoint = "lg", props) {
+  try {
+    const breakpointDatas = breakpointConstants[type]?.reduce((a, b) => {
+      const bpKey = `${b}_${breakpoint}`;
+      a[b] = props[bpKey] === undefined ? props[b] : props[bpKey];
+      return a;
+    }, {});
+    return breakpointDatas;
+  } catch (err) {
+    console.log(err);
+    return {};
+  }
+}
+export function formatBreakpointValues(type, breakpoint = "lg", data) {
+  try {
+    const bpValues = breakpointConstants[type];
+    if (breakpoint === "lg") {
+      return data;
+    } else {
+      let rtData = {};
+      Object.keys(data).forEach(key => {
+        if (bpValues.indexOf(key) > -1) {
+          rtData[`${key}_${breakpoint}`] = data[key];
+        } else {
+          rtData[key] = data[key];
+        }
+      });
+      return rtData;
+    }
+  } catch (err) {
+    console.log(err);
+    return {};
+  }
+}
+export function wrapThemeBreakpoints(sxProp, prop, theme) {
+  try {
+    const formatedSxProp = Object.keys(sxProp).reduce((a, b) => {
+      switch (b) {
+        case "md":
+          a[theme.breakpoints.up("lg")] = {
+            [prop]: sxProp["md"] || sxProp["lg"]
+          };
+          break;
+        case "sm":
+          a[theme.breakpoints.up("lg")] = {
+            [prop]: sxProp["sm"] || sxProp["lg"]
+          };
+          break;
+        case "xs":
+          a[theme.breakpoints.between("xs", "md")] = {
+            [prop]: sxProp["xs"] || sxProp["lg"]
+          };
+          break;
+        default:
+          a[theme.breakpoints.up("lg")] = {
+            [prop]: sxProp["lg"]
+          };
+      }
+      return a;
+    }, {});
+    return formatedSxProp;
+  } catch (err) {
+    console.log(err);
+  }
+}

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -0,0 +1,214 @@
+const useFreeGridStyles = ({
+  theme,
+  MAX_DEVICE_WIDTH
+}) => ({
+  root: {
+    "&.freegrid-container": {
+      display: "grid",
+      gridTemplateColumns: "var(--cols)",
+      gridTemplateRows: "var(--rows)",
+      gridGap: "0px",
+      backgroundColor: "#FFF",
+      padding: "0px",
+      height: "100%",
+      position: "static",
+      overflow: "hidden",
+      "& .freegrid-item, & .freegrid-box-item": {
+        gridArea: "var(--gridArea)",
+        left: "var(--left)",
+        marginTop: "var(--marginTop)",
+        marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
+        zIndex: "var(--zIndex) !important",
+        "&.active-drag": {},
+        "&.inactive-drag": {},
+        "& .editor-blocker": {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "100%",
+          height: "100%",
+          background: "rgba(0,0,0,0)",
+          border: 0,
+          outline: 0,
+          zIndex: 1000
+        },
+        "&.type_box": {
+          "& .editor-blocker": {
+            zIndex: 100
+          }
+        },
+        "&.enable-1, &.enable-2": {
+          "&.type_text": {
+            // height: "fit-content !important",
+          }
+        },
+        "&.enable-1:before, &.enable-2:before": {
+          position: "absolute",
+          content: "attr(placeholder)",
+          top: "-22px",
+          left: "-2px",
+          padding: "2px 4px",
+          backgroundColor: "#2563EB",
+          color: "#FFF",
+          fontSize: "12px",
+          borderTopLeftRadius: "2px",
+          borderTopRightRadius: "2px",
+          width: "auto"
+        },
+        "&:hover": {
+          "& .debug-info": {
+            opacity: 1
+          }
+        },
+        "& .debug-info": {
+          position: "absolute",
+          top: "calc(100% + 8px)",
+          pointerEvents: "none",
+          left: 0,
+          background: "rgba(0,0,0,0.2)",
+          color: "red",
+          width: "100%",
+          padding: "6px",
+          opacity: 0
+        },
+        "&.enable-1": {
+          "&.type_text": {
+            "*": {
+              "::selection": {
+                backgroundColor: "transparent !important",
+                color: "inherit !important"
+              }
+            }
+          },
+          "& .fgi_type_box": {
+            "& .freegrid-item": {
+              // pointerEvents: "none",
+            }
+          }
+        },
+        "&.enable-2": {
+          "& .fgi_type_box": {
+            "& .freegrid-item": {
+              // pointerEvents: "auto",
+            }
+          },
+          "& .fgi_type_form": {
+            "& .default-toolbar": {
+              display: "block"
+            }
+          }
+        },
+        /** for element items */
+        "& .fgi_type_image, & .fgi_type_video": {
+          height: "100%",
+          overflow: "hidden",
+          "& .embed": {
+            width: "100%",
+            height: "100%",
+            "& .embed-image-wrpr, & .embed-video-wrpr-in, & .element-empty-btn": {
+              height: "100%"
+            }
+          }
+        },
+        "& .fgi_type_button": {
+          height: "100%",
+          "& .editor-btn-wrapper": {
+            height: "100%",
+            "& .editor-btn-wrapper-inner": {
+              width: "100%",
+              height: "100%",
+              "& span": {
+                width: "100%",
+                height: "100%"
+              },
+              "& .btn": {
+                width: "100%",
+                height: "100%",
+                "&.textAlign-left": {
+                  justifyContent: "start"
+                },
+                "&.textAlign-right": {
+                  justifyContent: "end"
+                },
+                "&.textAlign-center": {
+                  justifyContent: "center"
+                }
+              }
+            }
+          }
+        },
+        "& .fgi_type_box": {
+          display: "grid",
+          width: "100%",
+          height: "var(--height)",
+          gridTemplateColumns: "var(--cols)",
+          gridTemplateRows: "var(--rows)",
+          "& .freegrid-item": {
+            marginLeft: "0px"
+            // pointerEvents: "none",
+          }
+        },
+
+        "& .fgi_type_form": {
+          "& legend": {
+            paddingLeft: "16px",
+            paddingTop: "16px",
+            width: "calc(100% -16px) !important"
+          }
+        },
+        "& .fgi_type_appHeader": {
+          "& .MuiToolbar-root": {
+            paddingLeft: "0px !important",
+            paddingRight: "0px !important",
+            "& .app-drawer-btn": {
+              marginRight: "0px",
+              width: "100%",
+              "& svg": {
+                width: "100%",
+                height: "100%"
+              }
+            }
+          }
+        },
+        /** element toolbar hide */
+        "& .element-toolbar": {
+          display: "none"
+        },
+        [theme.breakpoints.between("xs", "md")]: {
+          marginLeft: `calc((100% - 320px) * 0.5)`
+        }
+      }
+    }
+  },
+  sectionPopper: {
+    zIndex: 1200,
+    width: "40px",
+    left: "-58px !important",
+    borderRadius: "8px",
+    "& .papper-root": {
+      fontFamily: "sans-serif",
+      boxShadow: "-4px -3px 12px 4px rgba(0, 0, 0, 0.12)",
+      background: "#FFF",
+      "& .MuiIconButton-root": {
+        padding: "10px",
+        color: "#000",
+        background: "#FFF",
+        "& svg": {
+          width: "20px",
+          height: "20px"
+        },
+        "&.active,&:hover ": {}
+      }
+    }
+  },
+  sectionSettingsPopper: {
+    "&.style-settings-wrpr": {
+      height: "300px",
+      overflowY: "auto",
+      overflowX: "hidden",
+      padding: "8px 8px 12px 12px",
+      marginBotton: "12px"
+    }
+  }
+});
+export default useFreeGridStyles;