@flozy/editor 4.0.3 → 4.0.4

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

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Paper, Popover } from "@mui/material";
+import useDragOverStyle from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DragOver = props => {
+  const ref = useRef();
+  const classes = useDragOverStyle();
+  const {
+    status,
+    hover_on,
+    path,
+    type
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const isSectionHover = status && type === "parent";
+  const isContainerHover = hover_on.has(path) && type === "parent-container";
+  useEffect(() => {
+    if (ref?.current) {
+      const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();
+      setAnchorEl({
+        getBoundingClientRect,
+        nodeType: 1
+      });
+    }
+  }, [ref?.current]);
+  const handleClose = () => {};
+  return isSectionHover || isContainerHover ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
+      sx: classes.root,
+      ref: ref
+    }), /*#__PURE__*/_jsx(Popover, {
+      sx: classes.popper,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      children: /*#__PURE__*/_jsx(Paper, {
+        className: "papper-root",
+        children: isSectionHover ? "Attach to this Section" : "Attach to this Container"
+      })
+    })]
+  }) : null;
+};
+export default DragOver;

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

@@ -0,0 +1,23 @@
+const useDragOverStyle = () => ({
+  root: {
+    pointerEvents: "none",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    outline: "2px solid #116dff"
+  },
+  popper: {
+    pointerEvents: "none",
+    zIndex: 1200,
+    "& .papper-root": {
+      padding: "8px 12px",
+      color: "#FFF",
+      fontSize: "14px",
+      left: "12px",
+      background: "#116dff"
+    }
+  }
+});
+export default useDragOverStyle;

package/dist/Editor/common/RnD/ElementOptions/Actions.js

@@ -0,0 +1,102 @@
+import { Button, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import SettingsIcon from "@mui/icons-material/Settings";
+import EditIcon from "@mui/icons-material/Edit";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import AddIcon from "@mui/icons-material/Add";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import SaveIcon from "@mui/icons-material/Save";
+import LinkIcon from "./Icons/LinkIcon";
+import { GridAddSectionIcon, WorkflowIcon } from "../../iconslist";
+const Actions = {
+  ai: {
+    type: "ai",
+    Button: IconButton,
+    Icon: AutoAwesomeIcon,
+    title: "Auto Generate using AI"
+  },
+  addSection: {
+    type: "addSection",
+    Button: Button,
+    Icon: null,
+    title: "Add Section"
+  },
+  addElement: {
+    type: "addElement",
+    Button: IconButton,
+    Icon: AddIcon,
+    title: "Add Element"
+  },
+  settings: {
+    type: "settings",
+    Button: IconButton,
+    Icon: SettingsIcon,
+    title: "Settings",
+    cb: "settings"
+  },
+  link: {
+    type: "link",
+    Button: IconButton,
+    Icon: LinkIcon,
+    title: "Link"
+  },
+  more: {
+    type: "more",
+    Button: IconButton,
+    Icon: MoreVertIcon,
+    title: "More",
+    cb: "more"
+  },
+  drag: {
+    type: 1,
+    Button: IconButton,
+    Icon: DragIndicatorIcon,
+    title: "Drag"
+  },
+  edit: {
+    type: 2,
+    Button: IconButton,
+    Icon: EditIcon,
+    title: "Edit"
+  },
+  close: {
+    type: 3,
+    Button: IconButton,
+    Icon: CloseIcon,
+    title: "close"
+  },
+  moveUp: {
+    type: "moveUp",
+    Button: IconButton,
+    Icon: ArrowUpwardIcon,
+    title: "Move Up"
+  },
+  moveDown: {
+    type: "moveDown",
+    Button: IconButton,
+    Icon: ArrowDownwardIcon,
+    title: "Move Down"
+  },
+  addFormField: {
+    type: "addFormField",
+    Button: IconButton,
+    Icon: GridAddSectionIcon,
+    title: "Add Form Field"
+  },
+  workFlow: {
+    type: "workFlow",
+    Button: IconButton,
+    Icon: WorkflowIcon,
+    title: "Workflow"
+  },
+  saveAsTemplate: {
+    type: "saveAsTemplate",
+    Button: IconButton,
+    Icon: SaveIcon,
+    title: "Save As Template"
+  }
+};
+export default Actions;

package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LinkIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10.1582 7.84185C9.54389 7.22778 8.71084 6.88281 7.84222 6.88281C6.97361 6.88281 6.14055 7.22778 5.52622 7.84185L3.20947 10.1578C2.59513 10.7722 2.25 11.6054 2.25 12.4742C2.25 13.343 2.59513 14.1763 3.20947 14.7906C3.82381 15.4049 4.65704 15.7501 5.52585 15.7501C6.39466 15.7501 7.22788 15.4049 7.84222 14.7906L9.00022 13.6326",
+      stroke: "#000000",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.8418 10.1582C8.45613 10.7723 9.28918 11.1173 10.1578 11.1173C11.0264 11.1173 11.8595 10.7723 12.4738 10.1582L14.7905 7.84222C15.4049 7.22788 15.75 6.39466 15.75 5.52585C15.75 4.65704 15.4049 3.82381 14.7905 3.20947C14.1762 2.59513 13.343 2.25 12.4742 2.25C11.6054 2.25 10.7721 2.59513 10.1578 3.20947L8.9998 4.36747",
+      stroke: "#000000",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default LinkIcon;

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

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { Paper, Popper, Tooltip } from "@mui/material";
+import Actions from "./Actions";
+import useElementOptionsStyle from "./styles";
+import OptionsPopup from "../OptionsPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ElementOptions = props => {
+  const {
+    open,
+    anchorEl,
+    enable,
+    handleAction,
+    actions,
+    actionsMap,
+    optionsProps,
+    selectedAction
+  } = props;
+  const classes = useElementOptionsStyle();
+  const [menu, setMenu] = useState({});
+  const openMenu = Boolean(menu.anchorEl);
+  const {
+    MenuComp,
+    menuProps
+  } = menu;
+  const isOpen = Boolean(anchorEl) && open;
+  const handleOptionClick = type => e => {
+    if (actionsMap[type]) {
+      const {
+        title,
+        placement,
+        Component,
+        props
+      } = actionsMap[type];
+      setMenu({
+        title,
+        type,
+        anchorEl: e.currentTarget,
+        placement,
+        isComponent: true,
+        MenuComp: Component,
+        menuProps: props
+      });
+    } else {
+      handleAction(type);
+    }
+  };
+  const renderAction = (action, index) => {
+    const {
+      Button,
+      Icon,
+      type,
+      title
+    } = Actions[action] || {};
+    return type ? /*#__PURE__*/_jsx(Tooltip, {
+      title: title,
+      arrow: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: handleOptionClick(type),
+        className: enable === type || selectedAction === type ? "active" : "",
+        children: Icon ? /*#__PURE__*/_jsx(Icon, {}) : title
+      })
+    }, `actions_fgele_${type}_${index}`) : null;
+  };
+  const handleClose = () => {
+    setMenu({});
+  };
+  return isOpen ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Popper, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: "top-start",
+      sx: classes.root,
+      ...optionsProps,
+      contentEditable: false,
+      disablePortal: false,
+      children: /*#__PURE__*/_jsx(Paper, {
+        className: "papper-root",
+        children: actions.map(renderAction)
+      })
+    }), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {
+      open: openMenu,
+      ...menu,
+      handleClose: handleClose,
+      children: /*#__PURE__*/_jsx(MenuComp, {
+        ...menuProps
+      })
+    }) : null]
+  }) : null;
+};
+ElementOptions.defaultProps = {
+  actions: []
+};
+export default ElementOptions;

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

@@ -0,0 +1,41 @@
+const useElementOptionsStyle = () => ({
+  root: {
+    zIndex: 1200,
+    "& .papper-root": {
+      background: "transparent",
+      boxShadow: "none"
+    },
+    "& .MuiButton-root": {
+      padding: "4px",
+      fontSize: "10px",
+      textTransform: "none",
+      marginRight: "6px",
+      background: "#FFF",
+      boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+      "&.active,&:hover ": {
+        color: "#FFF",
+        background: "#1976d2"
+      }
+    },
+    "& .MuiIconButton-root": {
+      padding: "4px",
+      color: "#000",
+      background: "#FFF",
+      borderRadius: "50%",
+      marginRight: "6px",
+      boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+      border: "1px solid transparent",
+      "& svg": {
+        width: "16px",
+        height: "16px"
+      },
+      "&.active,&:hover ": {
+        color: "#2563EB",
+        background: "#FFF",
+        border: "1px solid #2563EB",
+        boxShadow: "1px 1px 3px #2563EB"
+      }
+    }
+  }
+});
+export default useElementOptionsStyle;

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from "react";
+import { Node, Transforms, Editor } from "slate";
+import { ReactEditor } from "slate-react";
+import LinkSettings from "../../../LinkSettings";
+import { insertLink, removeLink } from "../../../../utils/link";
+import { getBlockActive, isBlockActive, upateBlockActive } from "../../../../utils/SlateUtilityFunctions";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Link = props => {
+  const {
+    onClose,
+    customProps,
+    editor,
+    path,
+    childType
+  } = props;
+  const pPath = path?.split("|")?.map(m => parseInt(m));
+  const element_path = [...pPath, 0];
+  const element = Node.get(editor, element_path);
+  const {
+    actionTrigger
+  } = element?.buttonLink || {};
+  const {
+    onClick
+  } = actionTrigger || {
+    options: []
+  };
+  const [blockProps, setBlockProps] = useState();
+  const [isActiveTextLink, setIsActiveTextLink] = useState(false);
+  useEffect(() => {
+    if (childType === "text") {
+      selectTextNode();
+      const p = getBlockActive(editor, "link")?.props || {};
+      const bp = {
+        name: Editor.string(editor, editor.selection),
+        navType: "webAddress",
+        navValue: p?.href,
+        openInNewTab: p?.target === "_blank"
+      };
+      setIsActiveTextLink(isBlockActive(editor, "link"));
+      setBlockProps(bp);
+    } else {
+      setBlockProps(getProps());
+    }
+  }, []);
+  const selectTextNode = () => {
+    try {
+      ReactEditor.focus(editor);
+      const range = Editor.range(editor, element_path);
+      Transforms.select(editor, range);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const getProps = () => {
+    switch (childType) {
+      case "button":
+        return {
+          navType: element?.buttonLink?.linkType,
+          navValue: element?.url,
+          openInNewTab: element?.openInNewTab
+        };
+      case "image":
+        return {
+          navType: element?.linkType,
+          navValue: element?.webAddress,
+          openInNewTab: element?.isNewTab
+        };
+      default:
+        return {};
+    }
+  };
+  const getTransformedData = d => {
+    switch (childType) {
+      case "text":
+        selectTextNode();
+        return {
+          name: Editor.string(editor, editor.selection),
+          url: d?.navValue,
+          showInNewTab: d?.openInNewTab
+        };
+      case "image":
+        return {
+          linkType: d?.linkType,
+          webAddress: d?.navValue,
+          isNewTab: d?.openInNewTab
+        };
+      case "button":
+        return {
+          buttonLink: {
+            linkType: d?.linkType,
+            onClick
+          },
+          url: d?.navValue,
+          openInNewTab: d?.openInNewTab
+        };
+      default:
+        return {};
+    }
+  };
+  const updateTextLink = data => {
+    // remove link
+    if (!data?.url && isActiveTextLink) {
+      removeLink(editor);
+      return;
+    }
+    const upData = isActiveTextLink ? {
+      href: data?.url,
+      target: data?.showInNewTab ? "_blank" : "_self",
+      name: data?.name
+    } : data;
+    if (isActiveTextLink) {
+      // update text link
+      upateBlockActive(editor, "link", upData);
+    } else {
+      insertLink(editor, upData);
+    }
+  };
+  const onSave = data => {
+    try {
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+
+      // for text we have defined method already
+      // to update leaf data
+      if (childType === "text") {
+        updateTextLink(data);
+        return;
+      }
+      Transforms.setNodes(editor, {
+        ...updateData
+      }, {
+        at: element_path
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return blockProps?.navType !== undefined ? /*#__PURE__*/_jsx(LinkSettings, {
+    handleClose: onClose,
+    onSave: d => {
+      const upData = getTransformedData(d);
+      onSave({
+        ...upData
+      });
+      onClose();
+    },
+    ...(blockProps || {}),
+    customProps: customProps
+  }) : null;
+};
+export default Link;

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Node } from "slate";
+import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
+import SaveAsTemplate from "../../../StyleBuilder/fieldTypes/saveAsTemplate";
+import { CloseIcon } from "../../../iconslist";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SavePopup = props => {
+  const {
+    classes,
+    onClose,
+    elementProps
+  } = props;
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: true,
+    fullWidth: true,
+    sx: classes.dialog,
+    children: [/*#__PURE__*/_jsxs(DialogTitle, {
+      children: ["Save As Template", /*#__PURE__*/_jsx(IconButton, {
+        onClick: onClose,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsx(SaveAsTemplate, {
+        ...props,
+        data: {
+          key: "saveAsTemplate"
+        },
+        saveText: "Save",
+        handleClose: onClose,
+        elementProps: elementProps
+      })
+    })]
+  });
+};
+export default SavePopup;

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { Paper, Popper, Tooltip, Typography, Box, Divider, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { settingsLabel } from "../settingsConstants";
+import SettingsComponents from "../Settings";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Settings = props => {
+  const {
+    path,
+    childType,
+    open,
+    anchorEl,
+    placement,
+    onClose,
+    editor,
+    classes,
+    customProps
+  } = props;
+  const title = settingsLabel[childType] || "Settings";
+  const Settings = SettingsComponents[childType];
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Popper, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: placement,
+      sx: classes.root,
+      children: /*#__PURE__*/_jsxs(Paper, {
+        className: "papper-root",
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          variant: "h6",
+          className: "item-wrapper title",
+          children: [title, /*#__PURE__*/_jsx(Box, {
+            component: "div",
+            children: /*#__PURE__*/_jsx(Tooltip, {
+              title: "Close",
+              arrow: true,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                className: "closeBtn",
+                onClick: onClose,
+                children: /*#__PURE__*/_jsx(CloseIcon, {})
+              })
+            })
+          })]
+        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          className: "item-wrapper",
+          children: Settings ? /*#__PURE__*/_jsx(Settings, {
+            editor: editor,
+            path: path,
+            customProps: customProps
+          }) : null
+        })]
+      })
+    })
+  });
+};
+Settings.defaultProps = {};
+export default Settings;

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

@@ -0,0 +1,9 @@
+import Settings from "./Settings";
+import Link from "./Link";
+import SavePopup from "./SaveAsTemplate";
+const OtherSettings = {
+  link: Link,
+  settings: Settings,
+  saveAsTemplate: SavePopup
+};
+export default OtherSettings;

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import appHeaderStyle from "../../../StyleBuilder/appHeaderStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AppHeaderSettings = 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: appHeaderStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: appHeaderStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default AppHeaderSettings;