@flozy/editor 3.8.9 → 3.9.1

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

@@ -1,391 +0,0 @@
-import React from "react";
-import { Path, Transforms, Node } from "slate";
-import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, useTheme } from "@mui/material";
-import RnD from "../../common/RnD";
-import More from "./Options/More";
-import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
-import AddElement from "./Options/AddElement";
-import useBreakpoints from "../../hooks/useBreakpoints";
-import { breakpointValues } from "./breakpointConstants";
-import useFreeGridStyles from "./styles";
-import { insertFreeGrid, insertFreeGridItem } from "../../utils/freegrid";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import SectionSettings from "./Options/SectionSettings";
-import scrollToNewSection from "../../helper/RnD/scrollToNewSection";
-import { createEmbedNode } from "../../utils/embed";
-import { onPasteRnDNode } from "../../helper";
-import focusOnNewItem from "../../helper/RnD/focusOnNewItem";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const MAX_DEVICE_WIDTH = {
-  lg: 980,
-  xs: 320
-};
-const FreeGrid = props => {
-  const theme = useTheme();
-  const breakpoint = useBreakpoints(theme);
-  const classes = useFreeGridStyles({
-    theme,
-    MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
-  });
-  const editor = useSlateStatic();
-  const {
-    element,
-    attributes,
-    children,
-    customProps
-  } = props;
-  const {
-    sectionName
-  } = element;
-  const {
-    readOnly
-  } = customProps;
-  const {
-    updated_at,
-    sectionBgColor,
-    sectionBackgroundImage
-  } = element;
-  const path = ReactEditor.findPath(editor, element);
-  // get values based on breakpoint size
-  const {
-    height
-  } = breakpointValues(element.type, breakpoint, element);
-  const {
-    setSelectedElement
-  } = useEditorContext();
-  const onChange = data => {
-    const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
-    const updateData = {
-      ...data,
-      [`height${append}`]: height + data.height
-    };
-    if (append !== "") {
-      delete updateData.height;
-    }
-    if (breakpoint === "xs") {
-      updateData.xs_updatedOn = new Date().getTime();
-    }
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-  };
-  const moveUp = () => {
-    const cur_root_path = Path.parent(path);
-    if (Path.hasPrevious(cur_root_path)) {
-      Transforms.moveNodes(editor, {
-        at: cur_root_path,
-        to: Path.previous(cur_root_path)
-      });
-    }
-  };
-  const moveDown = () => {
-    const cur_root_path = Path.parent(path);
-    Transforms.moveNodes(editor, {
-      at: cur_root_path,
-      to: Path.next(cur_root_path)
-    });
-  };
-  const handleActionClick = actionType => {
-    switch (actionType) {
-      case "moveUp":
-        moveUp();
-        break;
-      case "moveDown":
-        moveDown();
-        break;
-      default:
-    }
-  };
-  const handleMoreClick = moreAction => () => {
-    try {
-      const cur_root_path = Path.parent(path);
-      const next_path = Path.next(cur_root_path);
-      switch (moreAction) {
-        case "addSection":
-          insertFreeGrid(editor, next_path, {
-            setSelectedElement
-          });
-          break;
-        case "duplicateSection":
-          Transforms.insertNodes(editor, [{
-            ...JSON.parse(JSON.stringify(Node.get(editor, cur_root_path)))
-          }], {
-            at: next_path
-          });
-          scrollToNewSection(editor, next_path, {
-            setSelectedElement
-          });
-          break;
-        default:
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const isEmptySection = () => {
-    try {
-      const emptyNode = element?.children?.find(f => !f.type) && element?.children.length === 1;
-      return emptyNode;
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const handleAddElementClick = type => () => {
-    const isEmpty = isEmptySection();
-    const insertAt = isEmpty ? [...path, 0] : [...path, element?.children?.length];
-    switch (type) {
-      case "addText":
-        Transforms.insertNodes(editor, [{
-          type: "freegridItem",
-          childType: "text",
-          children: [{
-            type: "paragraph",
-            children: [{
-              text: "Text"
-            }]
-          }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 170,
-          height: 80
-        }], {
-          at: [...insertAt]
-        });
-        break;
-      case "addButton":
-        Transforms.insertNodes(editor, [{
-          type: "freegridItem",
-          childType: "button",
-          children: [{
-            type: "button",
-            children: [{
-              text: ""
-            }],
-            buttonLink: {
-              linkType: "webAddress"
-            },
-            iconPosition: "start",
-            bgColor: "#2563EB",
-            textColor: "#FFF",
-            borderRadius: {
-              topLeft: 30,
-              topRight: 30,
-              bottomLeft: 30,
-              bottomRight: 30
-            },
-            bannerSpacing: {
-              left: 12,
-              top: 12,
-              right: 12,
-              bottom: 12
-            }
-          }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 170,
-          height: 80
-        }], {
-          at: [...insertAt]
-        });
-        break;
-      case "addImage":
-        Transforms.insertNodes(editor, [{
-          type: "freegridItem",
-          childType: "image",
-          children: [{
-            type: "image",
-            url: "",
-            images: [],
-            children: [{
-              text: ""
-            }]
-          }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 170,
-          height: 80
-        }], {
-          at: [...insertAt]
-        });
-        break;
-      case "addVideo":
-        Transforms.insertNodes(editor, [{
-          ...insertFreeGridItem("video", createEmbedNode("video", {
-            url: "",
-            alt: "",
-            images: []
-          }), {
-            height: 300,
-            width: 250
-          })
-        }], {
-          at: [...insertAt]
-        });
-        break;
-      case "addBox":
-        Transforms.insertNodes(editor, [{
-          ...insertFreeGridItem("box", {
-            type: "paragraph",
-            children: [{
-              text: ""
-            }]
-          }, {}, "freegridBox")
-        }], {
-          at: [...insertAt]
-        });
-        break;
-      default:
-    }
-    // focus on newly added element
-    focusOnNewItem(editor, insertAt, {
-      setSelectedElement
-    });
-  };
-  const onPaste = () => {
-    try {
-      const cur_root_path = Path.parent(path);
-      const parsed_node = JSON.parse(window.copiedNode);
-      if (parsed_node?.type === "freegridItem" || parsed_node?.type === "freegridBox") {
-        const np = onPasteRnDNode(editor, {
-          path,
-          children: children
-        });
-        if (np) {
-          focusOnNewItem(editor, np, {
-            setSelectedElement
-          });
-        }
-      } else {
-        // for pasting whole section
-        const new_path = Path.next(cur_root_path);
-        Transforms.insertNodes(editor, [{
-          ...parsed_node
-        }], {
-          at: new_path
-        });
-        scrollToNewSection(editor, new_path, {
-          setSelectedElement
-        });
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const onDelete = () => {
-    try {
-      Transforms.removeNodes(editor, {
-        at: Path.parent(path)
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const handleContextMenuClick = d => {
-    switch (d?.name) {
-      case "cut":
-        window.copiedNode = JSON.stringify(Node.get(editor, Path.parent(path)));
-        onDelete();
-        break;
-      case "copy":
-        window.copiedNode = JSON.stringify(Node.get(editor, Path.parent(path)));
-        break;
-      case "paste":
-        onPaste();
-        break;
-      case "delete":
-        onDelete();
-        break;
-      default:
-        return;
-    }
-  };
-  const repeatTimes = Math.floor(height / ROW_HEIGHT);
-  return /*#__PURE__*/_jsx(RnD, {
-    id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
-    className: `freegrid-section breakpoint-${breakpoint}`,
-    editor: editor,
-    path: path,
-    disableDragging: true,
-    style: {
-      position: "relative",
-      "--height": `${height}px`
-    },
-    defaultStyle: {
-      width: "100%",
-      height: height ? `${height}px` : "auto"
-    },
-    enableResizing: {
-      bottom: true
-    },
-    actions: ["addElement", "settings", "moveUp", "moveDown", "more"],
-    type: "parent",
-    optionsProps: {
-      placement: "right",
-      sx: classes.sectionPopper
-    },
-    onChange: onChange,
-    handleActionClick: handleActionClick,
-    actionsMap: {
-      addElement: {
-        Component: AddElement,
-        placement: "left",
-        title: "Add Element",
-        props: {
-          handleClick: handleAddElementClick
-        }
-      },
-      more: {
-        Component: More,
-        placement: "left",
-        title: "More Options",
-        props: {
-          handleClick: handleMoreClick
-        }
-      },
-      settings: {
-        Component: SectionSettings,
-        placement: "left",
-        title: "Section Settings",
-        props: {
-          editor,
-          path,
-          classes
-        }
-      }
-    },
-    readOnly: readOnly,
-    updated_at: updated_at,
-    breakpoint: breakpoint,
-    handleContextMenuClick: handleContextMenuClick,
-    children: /*#__PURE__*/_jsxs(Box, {
-      ...attributes,
-      className: "freegrid-container",
-      sx: classes.root,
-      "data-path": path.join("|"),
-      style: {
-        "--cols": `100%`,
-        "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
-        background: sectionBgColor,
-        backgroundImage: `url('${sectionBackgroundImage}')`,
-        backgroundSize: "cover"
-      },
-      children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
-        placeholder: `Section (${sectionName || "Welcome"})`,
-        className: "freegrid-section-infos",
-        contentEditable: false
-      }) : null]
-    })
-  });
-};
-export default FreeGrid;

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

@@ -1,193 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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;