@flozy/editor 4.0.2 → 4.0.4

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import formStyle from "../../../StyleBuilder/formStyle";
+import { ReactEditor } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path];
+  const element = Node.get(editor, element_path);
+  const onChange = data => {
+    const currentPath = ReactEditor.findPath(editor, element);
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: [...currentPath, 0]
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: formStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: formStyle,
+        value: m.value,
+        element: element,
+        customElement: element?.children?.[0] || null,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default FormSettings;

package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import embedImageStyle from "../../../StyleBuilder/embedImageStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const element = Node.get(editor, element_path);
+  const onChange = data => {
+    const updated_props = {
+      ...element,
+      ...data,
+      field_type: data?.element
+    };
+    delete updated_props.children;
+    Transforms.setNodes(editor, {
+      ...updated_props
+    }, {
+      at: element_path
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: embedImageStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: embedImageStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default ImageSettings;

package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from "react";
+import { Editor, Transforms } from "slate";
+import TextFormat from "../../../../Toolbar/PopupTool/TextFormat";
+import usePopupStyle from "../../../../Toolbar/PopupTool/PopupToolStyle";
+import { ReactEditor } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextSettings = props => {
+  const {
+    editor,
+    path
+  } = props;
+  const item_path = path.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const classes = usePopupStyle();
+  useEffect(() => {
+    try {
+      ReactEditor.focus(editor);
+      const range = Editor.range(editor, element_path);
+      Transforms.select(editor, range);
+      ReactEditor.focus(editor);
+    } catch (err) {
+      console.log(err);
+    }
+  }, []);
+  return /*#__PURE__*/_jsx(TextFormat, {
+    classes: classes,
+    editor: editor
+  });
+};
+export default TextSettings;

package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import embedVideoStyle from "../../../StyleBuilder/embedVideoStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const VideoSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const element = Node.get(editor, element_path);
+  const onChange = data => {
+    const updated_props = {
+      ...element,
+      ...data,
+      field_type: data?.element
+    };
+    delete updated_props.children;
+    Transforms.setNodes(editor, {
+      ...updated_props
+    }, {
+      at: element_path
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: embedVideoStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: embedVideoStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default VideoSettings;

package/dist/Editor/common/RnD/ElementSettings/Settings/index.js

@@ -0,0 +1,17 @@
+import TextSettings from "./TextSettings";
+import ButtonSettings from "./ButtonSettings";
+import ImageSettings from "./ImageSettings";
+import VideoSettings from "./VideoSettings";
+import BoxSettings from "./BoxSettings";
+import AppHeaderSettings from "./AppHeaderSettings";
+import FormSettings from "./FormSettings";
+const SettingsComponents = {
+  text: TextSettings,
+  button: ButtonSettings,
+  image: ImageSettings,
+  video: VideoSettings,
+  box: BoxSettings,
+  appHeader: AppHeaderSettings,
+  form: FormSettings
+};
+export default SettingsComponents;

package/dist/Editor/common/RnD/ElementSettings/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import useElementSettingsStyle from "./styles";
+import OtherSettings from "./OtherSettings";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ElementSettings = props => {
+  const {
+    currentAction
+  } = props;
+  const classes = useElementSettingsStyle();
+  const Settings = OtherSettings[currentAction];
+  return Settings ? /*#__PURE__*/_jsx(Settings, {
+    classes: classes,
+    ...props
+  }) : null;
+};
+ElementSettings.defaultProps = {};
+export default ElementSettings;

package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js

@@ -0,0 +1,18 @@
+export const settingsLabel = {
+  text: "Text Settings",
+  button: "Button Settings",
+  image: "Image Settings",
+  video: "Video Settings",
+  box: "Box Settings",
+  appHeader: "App Header Settings",
+  form: "Form Settings"
+};
+export const ItemTypes = {
+  text: "Text",
+  button: "Button",
+  image: "Image",
+  video: "Video",
+  box: "Box",
+  appHeader: "App Header",
+  form: "Form"
+};

package/dist/Editor/common/RnD/ElementSettings/styles.js

@@ -0,0 +1,94 @@
+const useElementSettingsStyle = theme => ({
+  root: {
+    zIndex: 1200,
+    background: "#FFF",
+    borderRadius: "10px",
+    overflow: "hidden",
+    boxShadow: "0px 0px 12px 4px #00000014",
+    padding: "10px 16px",
+    "& .papper-root": {
+      width: "312px",
+      boxShadow: "none"
+    },
+    ".MuiDivider-root": {
+      background: "#DCE4EC"
+    },
+    "& .closeBtn": {
+      borderRadius: "4px",
+      width: "26px",
+      height: "26px",
+      background: "#F8FAFC",
+      padding: "7px"
+    },
+    ".MuiAccordionSummary-root": {
+      minHeight: "40px !important",
+      padding: "0px"
+    },
+    ".MuiAccordionSummary-content": {
+      margin: "0px"
+    },
+    "& .MuiAccordion-root": {
+      boxShadow: "none",
+      "& .accordionTitle": {
+        display: "flex",
+        alignItems: "center"
+      },
+      "& .expandIcon": {
+        transform: "rotate(270deg)",
+        transition: "all 0.5s",
+        fill: "#64748B"
+      },
+      "&.Mui-expanded": {
+        "& .expandIcon": {
+          transform: "rotate(360deg)"
+        }
+      }
+    },
+    "& .item-w": {
+      maxHeight: "300px",
+      overflowX: "hidden",
+      overflowY: "auto"
+    },
+    "& .item-wrapper": {
+      fontFamily: "sans-serif",
+      padding: "5px 0px 12px 0px",
+      "& .text-formatter-popup": {
+        padding: "0px",
+        overflowX: "hidden"
+      },
+      "&.title": {
+        display: "flex",
+        fontSize: "16px",
+        fontWeight: "bold",
+        justifyContent: "space-between",
+        alignItems: "center",
+        "& .MuiIconButton-root": {
+          padding: "4px",
+          "& svg": {
+            width: "16px",
+            height: "16px"
+          }
+        }
+      }
+    }
+  },
+  dialog: {
+    "& .MuiDialogTitle-root": {
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    "& .MuiGrid-root": {
+      marginBottom: "12px"
+    },
+    "& .action-btn-wrpr": {
+      justifyContent: "flex-end !important",
+      "& .savebtn": {
+        marginRight: "12px"
+      },
+      "& .close": {
+        marginRight: "12px"
+      }
+    }
+  }
+});
+export default useElementSettingsStyle;

package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, useTheme } from "@mui/material";
+import useGuideLineStyle from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SVGDashed = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "1",
+    height: "100%",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("line", {
+      strokeDasharray: "5, 5",
+      x1: "0",
+      y1: "100%",
+      x2: "1",
+      y2: "1",
+      style: {
+        stroke: "rgb(0, 0, 0)",
+        strokeWidth: 2
+      }
+    })
+  });
+};
+const BoundaryLine = () => {
+  const theme = useTheme();
+  const classes = useGuideLineStyle({
+    theme
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    sx: classes.boundaryLine,
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: "rnd-guideline-lv",
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(SVGDashed, {})
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: "rnd-guideline-rv",
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(SVGDashed, {})
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: "white-wrapper w_left"
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: "white-wrapper w_right"
+    })]
+  });
+};
+export default BoundaryLine;

package/dist/Editor/common/RnD/GuideLines/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Box, useTheme } from "@mui/material";
+import useGuideLineStyle from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GuideLines = props => {
+  const theme = useTheme();
+  const classes = useGuideLineStyle({
+    theme
+  });
+  const {
+    lines
+  } = props;
+  const renderGuideLine = ({
+    x,
+    y,
+    width,
+    height
+  }, index) => {
+    return /*#__PURE__*/_jsx(Box, {
+      sx: classes.root,
+      component: "span",
+      className: "rnd-guideline",
+      style: {
+        left: x,
+        top: y,
+        width,
+        height
+      }
+    }, `rnd-gl-${index}_${x}_${y}`);
+  };
+  return lines?.length ? lines?.map(renderGuideLine) : null;
+};
+export default GuideLines;

package/dist/Editor/common/RnD/GuideLines/styles.js

@@ -0,0 +1,62 @@
+const useGuideLineStyle = ({
+  theme
+}) => ({
+  root: {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "2px",
+    height: "1px",
+    backgroundColor: "#FF70B4",
+    opacity: 1,
+    pointerEvents: "none",
+    zIndex: 1200
+  },
+  boundaryLine: {
+    "& .rnd-guideline-lv": {
+      position: "absolute",
+      left: "calc(50% - 490px)",
+      top: "0",
+      height: "100%",
+      width: "1px",
+      backgroundColor: "#FFF",
+      pointerEvents: "none",
+      zIndex: 1,
+      [theme.breakpoints.between("xs", "md")]: {
+        left: "calc(50% - 160px)"
+      }
+    },
+    "& .rnd-guideline-rv": {
+      position: "absolute",
+      left: "calc(50% + 490px)",
+      top: "0",
+      height: "100%",
+      width: "1px",
+      backgroundColor: "#FFF",
+      pointerEvents: "none",
+      zIndex: 1,
+      [theme.breakpoints.between("xs", "md")]: {
+        left: "calc(50% + 160px)"
+      }
+    },
+    "& .white-wrapper": {
+      overflowX: "hidden",
+      [theme.breakpoints.between("xs", "md")]: {
+        position: "absolute",
+        width: "calc(50% - 162px)",
+        height: "calc(100% - 2px)",
+        backgroundColor: "rgba(255,255,255,1)",
+        pointerEvents: "none",
+        top: 2,
+        "&.w_left": {
+          left: 2
+        },
+        "&.w_right": {
+          right: 2,
+          width: "calc(50% - 163px)"
+        }
+      }
+    }
+  }
+});
+export default useGuideLineStyle;

package/dist/Editor/common/RnD/OptionsPopup/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { Box, Paper, Popper, Typography, Tooltip, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import HelpIcon from "@mui/icons-material/Help";
+import useOptionsPopupStyle from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const OptionsPopup = props => {
+  const classes = useOptionsPopupStyle();
+  const {
+    title,
+    children,
+    open,
+    anchorEl,
+    placement,
+    handleClose
+  } = props;
+  return anchorEl ? /*#__PURE__*/_jsx(Popper, {
+    sx: classes.root,
+    open: open,
+    anchorEl: anchorEl,
+    placement: placement,
+    onClose: handleClose,
+    children: /*#__PURE__*/_jsxs(Paper, {
+      className: "papper-root",
+      children: [/*#__PURE__*/_jsxs(Typography, {
+        variant: "div",
+        className: "item-wrapper title",
+        children: [title, /*#__PURE__*/_jsxs(Box, {
+          component: "div",
+          children: [/*#__PURE__*/_jsx(Tooltip, {
+            title: "Help",
+            arrow: true,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              children: /*#__PURE__*/_jsx(HelpIcon, {})
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: "Close",
+            arrow: true,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: handleClose,
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
+          })]
+        })]
+      }), children]
+    })
+  }) : null;
+};
+export default OptionsPopup;

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -0,0 +1,36 @@
+const useOptionsPopupStyle = () => ({
+  root: {
+    zIndex: 1200,
+    background: "#FFF",
+    borderRadius: "5px",
+    overflow: "hidden",
+    boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+    "& .papper-root": {
+      borderTop: "8px solid #1976d2",
+      width: "270px",
+      boxShadow: "none"
+    },
+    "& .item-list-wrpr": {
+      paddingTop: "0px",
+      paddingBottom: "0px"
+    },
+    "& .item-wrapper": {
+      padding: "12px",
+      fontFamily: "sans-serif",
+      "&.title": {
+        display: "flex",
+        fontWeight: "bold",
+        justifyContent: "space-between",
+        alignItems: "center",
+        "& .MuiIconButton-root": {
+          padding: "4px",
+          "& svg": {
+            width: "16px",
+            height: "16px"
+          }
+        }
+      }
+    }
+  }
+});
+export default useOptionsPopupStyle;

package/dist/Editor/common/RnD/RnDCopy.js

@@ -0,0 +1,23 @@
+import Box from "@mui/material/Box";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RnDCopy = props => {
+  const {
+    readOnly
+  } = props;
+  const {
+    selectedElement
+  } = useEditorContext();
+  useEffect(() => {
+    if (selectedElement?.path) {
+      window.selectedRnDElement = selectedElement;
+    }
+  }, [selectedElement?.path, selectedElement?.enable]);
+  return !readOnly ? /*#__PURE__*/_jsx(Box, {
+    sx: {
+      display: "none"
+    }
+  }) : null;
+};
+export default RnDCopy;

package/dist/Editor/common/RnD/ShadowElement.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Box, useTheme } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useShadowElementStyles = ({
+  theme,
+  style
+}) => ({
+  root: {
+    ...style,
+    position: "relative",
+    backgroundColor: "rgba(0,0,0,0)",
+    marginLeft: `calc((100% - 980px) * 0.5)`,
+    [theme.breakpoints.between("xs", "md")]: {
+      marginLeft: `calc((100% - 320px) * 0.5)`
+    }
+  }
+});
+const ShadowElement = props => {
+  const theme = useTheme();
+  const {
+    type,
+    enable,
+    style
+  } = props;
+  const classes = useShadowElementStyles({
+    theme,
+    style
+  });
+  return type === "child" && enable === 1 ? /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    sx: classes.root
+  }) : null;
+};
+export default ShadowElement;

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -0,0 +1,40 @@
+import { Box, IconButton, Tooltip } from "@mui/material";
+import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
+import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
+import useSwitchViewport from "./styles";
+import { useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SwitchViewport = props => {
+  const {
+    breakpoint,
+    onChange
+  } = props;
+  const classes = useSwitchViewport();
+  useEffect(() => {
+    console.log(breakpoint);
+  }, [breakpoint]);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: classes.root,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Desktop View",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
+        onClick: () => {
+          onChange("");
+        },
+        children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Mobile View",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: `${breakpoint === "xs" ? "active" : ""}`,
+        onClick: () => {
+          onChange("xs");
+        },
+        children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
+      })
+    })]
+  });
+};
+export default SwitchViewport;

package/dist/Editor/common/RnD/SwitchViewport/styles.js

@@ -0,0 +1,24 @@
+const useSwitchViewport = () => ({
+  root: {
+    position: "absolute",
+    right: 4,
+    top: 4,
+    margin: "auto",
+    padding: "4px",
+    zIndex: 100,
+    backgroundColor: "#FFF",
+    borderRadius: "12px",
+    display: "flex",
+    justifyContent: "center",
+    "& .MuiIconButton-root": {
+      padding: "4px",
+      "&.active": {
+        color: "#2563EB"
+      },
+      "& svg": {
+        height: "20px"
+      }
+    }
+  }
+});
+export default useSwitchViewport;