@flozy/editor 3.8.8 → 3.8.9

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

@@ -0,0 +1,193 @@
+import React 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 { getBreakPointsValue } from "../../helper/theme";
+import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
+import { bringItemToFB } from "../../helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FreeGridBox = 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,
+    zIndex,
+    sectionBgColor,
+    sectionBackgroundImage,
+    sectionBorderRadius
+  } = element;
+  // get values based on breakpoint size
+  const {
+    gridArea,
+    width,
+    height,
+    left,
+    top,
+    marginTop
+  } = breakpointValues(element.type, breakpoint, element);
+  const {
+    setSelectedElement
+  } = useEditorContext();
+  const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
+  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
+        });
+        Transforms.setNodes(editor, {
+          zIndex: Math.min(arrangeIndex + 1, editor.children.length)
+        }, {
+          at: path
+        });
+        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;
+    }
+  };
+  return /*#__PURE__*/_jsx(RnD, {
+    id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
+    className: `freegrid-item breakpoint-${breakpoint}`,
+    editor: editor,
+    path: path,
+    actions: ["ai", "drag", "settings", "close"],
+    settingsProps: {
+      settings: "freegridBoxItem",
+      onChange: onChangeSettings
+    },
+    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: "box",
+    handleContextMenuClick: handleContextMenuClick,
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      ...attributes,
+      className: `fgi_type_box`,
+      sx: {
+        borderRadius: {
+          ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+        },
+        background: sectionBgColor,
+        backgroundImage: `url(${sectionBackgroundImage})`
+      },
+      children: children
+    })
+  });
+};
+export default FreeGridBox;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+import { insertFreeGrid } from "../../utils/freegrid";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FreeGridButton = props => {
+  const {
+    editor,
+    icoBtnType
+  } = props;
+  const onButtonClick = () => {
+    insertFreeGrid(editor);
+  };
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    title: "Free Grid",
+    onClick: onButtonClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "freegrid"
+    }),
+    icoBtnType: icoBtnType
+  });
+};
+export default FreeGridButton;

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

@@ -0,0 +1,184 @@
+import React 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 { jsx as _jsx } 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
+  } = useEditorContext();
+  const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
+  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 handleActionClick = type => {
+    console.log(type);
+  };
+  return /*#__PURE__*/_jsx(RnD, {
+    id: `freegrid_item_${path.join("|")}_${updated_at}_${breakpoint}`,
+    className: `freegrid-item 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,
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      ...attributes,
+      className: `fgi_type_${childType}`,
+      children: children
+    })
+  });
+};
+export default FreeGridItem;

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

@@ -0,0 +1,36 @@
+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"
+      })]
+    })
+  });
+};
+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,11 @@
+const commonOptions = ["drag", "edit", "settings", "close"];
+const textOptions = ["drag", "edit", "settings", "link", "close"];
+const buttonOptions = ["drag", "edit", "settings", "link", "close"];
+const imageOptions = ["drag", "edit", "settings", "link", "close"];
+const itemOptions = {
+  default: commonOptions,
+  text: textOptions,
+  button: buttonOptions,
+  image: imageOptions
+};
+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);
+  }
+}