@flozy/editor 3.8.7 → 3.8.9

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/Settings.js

@@ -0,0 +1,58 @@
+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
+  } = 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
+          }) : null
+        })]
+      })
+    })
+  });
+};
+Settings.defaultProps = {};
+export default Settings;

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+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
+  } = 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: {},
+        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,46 @@
+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
+  } = 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: {},
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default VideoSettings;

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

@@ -0,0 +1,13 @@
+import TextSettings from "./TextSettings";
+import ButtonSettings from "./ButtonSettings";
+import ImageSettings from "./ImageSettings";
+import VideoSettings from "./VideoSettings";
+import BoxSettings from "./BoxSettings";
+const SettingsComponents = {
+  text: TextSettings,
+  button: ButtonSettings,
+  image: ImageSettings,
+  video: VideoSettings,
+  box: BoxSettings
+};
+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,14 @@
+export const settingsLabel = {
+  text: "Text Settings",
+  button: "Button Settings",
+  image: "Image Settings",
+  video: "Video Settings",
+  box: "Box Settings"
+};
+export const ItemTypes = {
+  text: "Text",
+  button: "Button",
+  image: "Image",
+  video: "Video",
+  box: "Box"
+};

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

@@ -0,0 +1,76 @@
+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"
+          }
+        }
+      }
+    }
+  }
+});
+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;