@flozy/editor 1.9.9 → 2.0.1

package/dist/Editor/CommonEditor.js

@@ -338,7 +338,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
+    editor: editor,
     children: /*#__PURE__*/_jsx(DialogWrapper, {
+      classes: classes,
       ...props,
       fullScreen: fullScreen,
       footer: footer || "",

package/dist/Editor/DialogWrapper.js

@@ -9,7 +9,8 @@ const DialogWrapper = props => {
   const {
     fullScreen,
     onClose,
-    children
+    children,
+    classes
   } = props;
   return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
     className: `dialogComp`,
@@ -19,6 +20,7 @@ const DialogWrapper = props => {
     style: {
       zIndex: 1000
     },
+    sx: classes.fullScreenWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
       style: {
         padding: "6px 8px"
@@ -31,13 +33,16 @@ const DialogWrapper = props => {
           },
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onClose,
+            style: {
+              background: "rgba(255,255,255,0.5)"
+            },
             children: /*#__PURE__*/_jsx(CloseIcon, {})
           })
         })
       })
     }), /*#__PURE__*/_jsx(DialogContent, {
       style: {
-        padding: "0px"
+        paddingTop: "12px"
       },
       children: children
     })]

package/dist/Editor/Editor.css

@@ -181,7 +181,7 @@ blockquote {
 
 .no-border-button button,
 .no-border-button button:hover {
-  border: none
+  border: none;
 }
 
 .grid-item {

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -2,10 +2,11 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionBtnPopup from "./AccordionBtnPopup";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Accordion = props => {
@@ -21,6 +22,7 @@ const Accordion = props => {
   const [toggle, setToggle] = useState(false);
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -31,7 +33,7 @@ const Accordion = props => {
     setToggle(!toggle);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
@@ -94,13 +96,19 @@ const Accordion = props => {
         backgroundColor: bgColor
       },
       onClick: onToggle,
-      children: [/*#__PURE__*/_jsx(IconButton, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        role: "button",
         className: "accordion-summary-collapse-btn",
         contentEditable: false,
         sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
           "& svg": {
             fill: textColor
-          }
+          },
+          cursor: "pointer"
         },
         children: !toggle ? /*#__PURE__*/_jsx(Icon, {
           icon: "accordionArrow"

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -4,6 +4,7 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import AccordionTitlePopup from "./AccordionTitlePopup";
 import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
@@ -18,6 +19,7 @@ const AccordionSummary = props => {
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -26,7 +28,7 @@ const AccordionSummary = props => {
     borderColor
   } = element;
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {

package/dist/Editor/Elements/Button/EditorButton.js

@@ -9,7 +9,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -44,19 +44,14 @@ const EditorButton = props => {
     borderStyle,
     borderWidth,
     borderColor,
-    alignment
+    alignment,
+    xsHidden
   } = element;
   const {
     linkType,
     redirectOnURLResult
   } = buttonLink || {};
   const isTrigger = linkType === "actionTrigger";
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
@@ -149,10 +144,14 @@ const EditorButton = props => {
       textAlign: alignment || textAlign || "left"
     },
     contentEditable: false,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
       className: "editor-btn-wrapper-inner",
-      style: {
-        display: "inline"
+      sx: {
+        display: {
+          lg: "inline",
+          xs: xsHidden ? "none" : "inline"
+        }
       },
       children: /*#__PURE__*/_jsxs("span", {
         style: {
@@ -165,7 +164,9 @@ const EditorButton = props => {
             borderBlockStyle: "solid",
             borderColor: borderColor || "transparent",
             borderWidth: borderWidth || "1px",
-            borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+            borderRadius: {
+              ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+            },
             borderStyle: borderStyle || "solid",
             padding: {
               ...getTRBLBreakPoints(bannerSpacing)

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import * as fIcons from "@mui/icons-material";
-import ChipTextPopup from "./ChipTextPopup";
-import { getTRBLBreakPoints } from "../../helper/theme";
 import { Box } from "@mui/material";
+import ChipTextPopup from "./ChipTextPopup";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipText = props => {
@@ -26,12 +26,6 @@ const ChipText = props => {
     buttonIcon,
     textSize
   } = element;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -82,7 +76,9 @@ const ChipText = props => {
         ...getTRBLBreakPoints(bannerSpacing)
       },
       border: borderColor ? `1px solid ${borderColor}` : "none",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       background: bgColor || "#CCC",
       color: textColor
     },

package/dist/Editor/Elements/Embed/Image.js

@@ -6,7 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,17 +26,12 @@ const Image = ({
     borderColor,
     borderRadius,
     boxShadow,
-    width: oldWidth
+    width: oldWidth,
+    xsHidden
   } = element;
   const {
     readOnly
   } = customProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const {
     vertical,
     horizantal
@@ -48,6 +43,7 @@ const Image = ({
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const path = ReactEditor.findPath(editor, element);
+  const [showTool] = useEditorSelection(editor);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -111,7 +107,7 @@ const Image = ({
     });
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -133,9 +129,12 @@ const Image = ({
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "image"
       }), "Add Image"]
-    }) : /*#__PURE__*/_jsx("img", {
-      style: {
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+    }) : /*#__PURE__*/_jsx(Box, {
+      component: "img",
+      sx: {
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         objectFit: "cover",
         boxShadow: boxShadow || "none"
       },
@@ -164,7 +163,10 @@ const Image = ({
     component: "div",
     className: "embed has-hover",
     sx: {
-      display: "flex",
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       width: `100%`,
       maxWidth: "100%",
       padding: {

package/dist/Editor/Elements/Embed/Video.js

@@ -26,7 +26,8 @@ const Video = ({
     borderWidth,
     borderColor,
     borderStyle,
-    url
+    url,
+    xsHidden
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -52,12 +53,6 @@ const Video = ({
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -140,9 +135,10 @@ const Video = ({
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "videoPlayer"
       })
-    }) : /*#__PURE__*/_jsx("iframe", {
+    }) : /*#__PURE__*/_jsx(Box, {
+      component: "iframe",
       className: "embedd-iframe",
-      style: {
+      sx: {
         border: "none",
         position: "absolute",
         width: "100%",
@@ -151,7 +147,9 @@ const Video = ({
         left: "0px",
         ...(gradientBorder(borderColor) || {}),
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid"
       },
       src: embedURL,
@@ -168,11 +166,14 @@ const Video = ({
       }), "Embed Video or Other"]
     }) : /*#__PURE__*/_jsx(VideoContent, {});
   };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "embed has-hover video",
-    style: {
-      display: "flex",
+    sx: {
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       flexDirection: "row",
       width: `100%`,
       justifyContent: horizantal,

package/dist/Editor/Elements/Form/Form.js

@@ -11,7 +11,7 @@ import { formField } from "../../utils/formfield";
 import { formSubmit } from "../../service/formSubmit";
 import formButtonStyle from "../../common/StyleBuilder/formButtonStyle";
 import Workflow from "./Workflow";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { validation } from "./FormElements/validations";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,12 +41,6 @@ const Form = props => {
     fontFamily,
     textAlign
   } = element;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
   const btnAlign = buttonProps?.alignment || {};
@@ -66,7 +60,7 @@ const Form = props => {
   } : {
     borderColor: buttonProps?.borderColor || "none"
   };
-  const getFieldProps = (key = '', val = '') => {
+  const getFieldProps = (key = "", val = "") => {
     return element?.children?.find(obj => obj && obj[key] === val);
   };
   const handleSubmit = async (event, test = false) => {
@@ -77,14 +71,14 @@ const Form = props => {
       const formData = new FormData(formEle?.current);
       setLoading(true);
       let response = {};
-      const emailObject = getFieldProps('field_type', 'email');
-      let user_email = '';
+      const emailObject = getFieldProps("field_type", "email");
+      let user_email = "";
       const validations = [];
       for (let pair of formData.entries()) {
         if (emailObject?.name === pair[0]) {
           user_email = pair[1];
         }
-        const fieldData = getFieldProps('name', pair[0]);
+        const fieldData = getFieldProps("name", pair[0]);
         let rule = [];
         if (fieldData?.required) {
           rule.push(`isRequired`);
@@ -92,7 +86,7 @@ const Form = props => {
         if (fieldData?.field_type === "email") {
           rule.push(`isEmail`);
         }
-        if (fieldData?.required || fieldData?.field_type === 'email') {
+        if (fieldData?.required || fieldData?.field_type === "email") {
           validations.push({
             name: pair[0],
             value: pair[1],
@@ -274,7 +268,9 @@ const Form = props => {
         color: textColor || "#FFF",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         padding: {
@@ -317,7 +313,9 @@ const Form = props => {
                 borderWidth: "1px",
                 borderBlockStyle: "solid",
                 ...btnBorderStyle,
-                borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
+                borderRadius: {
+                  ...getBreakPointsValue(btnR || {}, null, "overrideBorderRadius", true)
+                },
                 padding: {
                   ...getTRBLBreakPoints(btnSpacing)
                 },

package/dist/Editor/Elements/Form/FormElements/FormEmail.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { getTRBLBreakPoints } from "../../../helper/theme";
 import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormEmail = props => {
   const {
@@ -18,12 +18,6 @@ const FormEmail = props => {
     lockSpacing,
     ...rest
   } = fieldProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const onChange = e => {
     e.preventDefault();
   };
@@ -48,7 +42,9 @@ const FormEmail = props => {
         height: height || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent"

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { getTRBLBreakPoints } from "../../../helper/theme";
 import { Box } from "@mui/material";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormText = props => {
   const {
@@ -18,12 +18,6 @@ const FormText = props => {
     lockSpacing,
     ...rest
   } = fieldProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const onChange = e => {
     e.preventDefault();
   };
@@ -46,7 +40,9 @@ const FormText = props => {
         height: height || "auto",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent"

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box } from "@mui/material";
-import { getTRBLBreakPoints } from "../../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormTextArea = props => {
   const {
@@ -17,12 +17,6 @@ const FormTextArea = props => {
     bgColor,
     ...rest
   } = fieldProps;
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const onChange = e => {
     e.preventDefault();
   };
@@ -45,7 +39,9 @@ const FormTextArea = props => {
         height: height || "150px",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderRadius: {
+          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+        },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent"

package/dist/Editor/Elements/Grid/Grid.js

@@ -11,7 +11,7 @@ import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../com
 import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -43,25 +43,21 @@ const Grid = props => {
     borderColor,
     borderStyle,
     borderRadius,
-    flexWrap
+    flexWrap,
+    xsHidden
   } = element;
   const {
     vertical,
     horizantal,
     flexDirection
   } = alignment || {};
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
     hoverPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
+  const [showTool] = useEditorSelection(editor);
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -174,7 +170,7 @@ const Grid = props => {
   };
   const PoupComp = GridSettingsPoupComp[openSetttings];
   const NewLineButtons = () => {
-    return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+    return !readOnly && selected && path.length === 2 && !showTool ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         className: "element-selector-ctrl tc",
         children: /*#__PURE__*/_jsx(Tooltip, {
@@ -199,7 +195,7 @@ const Grid = props => {
     }) : null;
   };
   const GridToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -253,13 +249,19 @@ const Grid = props => {
     className: `grid-container ${grid} has-hover element-root`,
     ...attributes,
     ...sectionId,
-    style: {
+    sx: {
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       background: bgColor,
       alignContent: vertical,
       ...bgImage,
       borderColor: borderColor || "transparent",
       borderWidth: borderWidth || "1px",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       borderStyle: borderStyle || "solid"
     },
     "data-path": path.join(","),

package/dist/Editor/Elements/Grid/GridItem.js

@@ -5,7 +5,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,27 +34,23 @@ const GridItem = props => {
     borderColorHover,
     textColor,
     animation,
-    cellGHeight
+    cellGHeight,
+    xsHidden
   } = element;
   const {
     vertical,
     horizantal,
     flexDirection
   } = alignment || {};
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
     hoverPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
+  const [showTool] = useEditorSelection(editor);
   const GridItemToolbar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
       style: {
@@ -108,12 +104,17 @@ const GridItem = props => {
       height: {
         ...getBreakPointsValue(cellGHeight || "auto")
       },
-      display: "flex",
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
       borderColor: borderColor || "transparent",
       borderWidth: borderWidth || "1px",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -1,5 +1,7 @@
 import React from "react";
 import * as fIcons from "@mui/icons-material";
+import { Box } from "@mui/material";
+import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const InlineIcon = props => {
@@ -21,25 +23,22 @@ const InlineIcon = props => {
     right,
     bottom
   } = bannerSpacing || {};
-  const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
-  } = borderRadius || {};
   const BtnIcon = fIcons["Check"];
-  return /*#__PURE__*/_jsxs("button", {
+  return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "editor-icon-text",
     contentEditable: false,
-    style: {
+    component: "button",
+    sx: {
       display: "inline",
       paddingLeft: `${left}px`,
       paddingRight: `${right}px`,
       paddingTop: `${top}px`,
       paddingBottom: `${bottom}px`,
       border: borderColor ? `1px solid ${borderColor}` : "none",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       background: bgColor || "#CCC",
       color: textColor
     },

package/dist/Editor/Elements/Table/Table.js

@@ -13,8 +13,9 @@ import DeleteCellIcon from "./DeleteCellIcon";
 import DeleteRowIcon from "./DeleteRowIcon";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
-import "./table.css";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
+import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TABLE_MENUS = [{
@@ -91,6 +92,7 @@ const Table = props => {
   const selected = useSelected();
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
+  const [showTool] = useEditorSelection(editor);
   const handleAction = ({
     type,
     position
@@ -125,7 +127,7 @@ const Table = props => {
     setExpandTools(!exandTools);
   };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs(Box, {
+    return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
       component: "div",
       contentEditable: false,
       className: `tableToolBar ${exandTools ? "active" : ""}`,

package/dist/Editor/Elements/Table/TableCell.js

@@ -5,6 +5,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
 import TableStyles from "./Styles";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,6 +46,7 @@ const TableCell = props => {
   } = element;
   const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const path = ReactEditor.findPath(editor, element);
   const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
   const [size, onMouseDown, resizing, onLoad] = useTableResize({
@@ -119,7 +121,7 @@ const TableCell = props => {
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
-    children: [children, isHeader && !readOnly && tableSize?.height ? /*#__PURE__*/_jsx(Resizer, {
+    children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       onMouseDown: onMouseDown,
       height: tableSize?.height

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -73,7 +73,7 @@ const TopBanner = props => {
     ...attributes,
     style: {
       position: "relative",
-      height: "280px",
+      height: "296px",
       textAlign: "center"
     },
     contentEditable: false,
@@ -81,6 +81,7 @@ const TopBanner = props => {
     children: [/*#__PURE__*/_jsx("img", {
       src: url,
       alt: "Top Banner",
+      className: "top-banner-wrpr-ele",
       style: {
         width: "100%",
         height: "280px",

package/dist/Editor/Styles/EditorStyles.js

@@ -28,6 +28,11 @@ const editorStyles = ({
     flexDirection: "column",
     alignItems: "center",
     color: "#0f172a",
+    "& .has-topbanner": {
+      "& .doc-title-ele-wrpr": {
+        marginTop: "12px"
+      }
+    },
     "&.no-color": {
       backgroundColor: theme?.palette?.editor?.background,
       color: theme?.palette?.editor?.textColor,
@@ -206,6 +211,17 @@ const editorStyles = ({
       textAlign: "center",
       border: "1px solid #CFD8F5"
     }
+  },
+  fullScreenWrapper: {
+    "& .MuiPaper-root": {
+      borderRadius: "0px !important",
+      "& .MuiDialogTitle-root": {
+        position: "absolute",
+        top: 0,
+        right: "12px",
+        zIndex: 100
+      }
+    }
   }
 });
 export default editorStyles;

package/dist/Editor/common/Section/index.js

@@ -6,6 +6,7 @@ import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SectionStyle = () => ({
@@ -33,6 +34,7 @@ const Section = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     sectionBgColor,
@@ -42,12 +44,6 @@ const Section = props => {
     sectionGridSize,
     sectionAlignment
   } = element;
-  const {
-    topLeft: ssTopLeft,
-    topRight: ssTopRight,
-    bottomLeft: ssBottomLeft,
-    bottomRight: ssBottomRight
-  } = sectionBorderRadius || {};
   const {
     vertical,
     horizantal,
@@ -58,7 +54,7 @@ const Section = props => {
     setOpenSettings(true);
   };
   const Toolbar = () => {
-    return !readOnly ? /*#__PURE__*/_jsx(Box, {
+    return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "element-toolbar no-border-button ss hr section-tw",
       style: {
@@ -108,7 +104,9 @@ const Section = props => {
       padding: {
         ...getTRBLBreakPoints(sectionBannerSpacing)
       },
-      borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`,
+      borderRadius: {
+        ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+      },
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical
@@ -121,7 +119,7 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly ? /*#__PURE__*/_jsx(DragHandle, {
+      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
         ...props
       }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {

package/dist/Editor/common/StyleBuilder/buttonStyle.js

@@ -62,6 +62,11 @@ const buttonStyle = [{
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Banner Spacing",
     key: "bannerSpacing",
     type: "bannerSpacing"

package/dist/Editor/common/StyleBuilder/embedImageStyle.js

@@ -31,6 +31,11 @@ const embedImageStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

package/dist/Editor/common/StyleBuilder/embedVideoStyle.js

@@ -11,6 +11,11 @@ const embedVideoStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -33,7 +33,7 @@ const BannerSpacing = props => {
     }
     onChange({
       [key]: {
-        ...getBreakPointsValue(val),
+        ...getBreakPointsValue(val, null),
         [size?.device]: {
           ...value,
           ...changeAll,

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -1,12 +1,14 @@
 import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
 const BorderRadius = props => {
   const {
-    value,
+    value: val,
     data,
     onChange,
     elementProps,
@@ -21,6 +23,8 @@ const BorderRadius = props => {
   const {
     key
   } = data;
+  const [size] = useWindowResize();
+  const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};
     if (lockRadius) {
@@ -30,9 +34,11 @@ const BorderRadius = props => {
     }
     onChange({
       [key]: {
-        ...value,
-        [e.target.name]: e.target.value,
-        ...changeAll
+        ...getBreakPointsValue(val, null),
+        [size?.device]: {
+          ...changeAll,
+          [e.target.name]: e.target.value
+        }
       }
     });
   };
@@ -63,15 +69,18 @@ const BorderRadius = props => {
         disabled: !lockRadius,
         className: "spacingSlider",
         defaultValue: value?.topLeft || 0,
+        value: value?.topLeft || 0,
         "aria-label": "Default",
         valueLabelDisplay: "auto",
         max: 100,
+        name: "topLeft",
         onChange: handleChange
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
         value: !lockRadius ? "" : value?.topLeft || 0,
         className: "sliderInput",
+        name: "topLeft",
         disabled: !lockRadius,
         onChange: handleChange
       })]

package/dist/Editor/common/StyleBuilder/gridItemStyle.js

@@ -15,6 +15,11 @@ const gridItemStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

package/dist/Editor/common/StyleBuilder/gridStyle.js

@@ -40,6 +40,11 @@ const gridStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Hide on Mobile",
+    key: "xsHidden",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }, {
     label: "Set Postion (Vertical & Horizantal)",
     key: "alignment",
     type: "alignment"

package/dist/Editor/commonStyle.js

@@ -83,6 +83,11 @@ const useCommonStyle = theme => ({
         }
       }
     }
+  },
+  textOptions: {
+    "& .MuiPopover-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    }
   }
 });
 export default useCommonStyle;

package/dist/Editor/helper/theme.js

@@ -43,6 +43,9 @@ const overrides = {
   },
   overrideReSizeH: val => {
     return `${val?.height}px`;
+  },
+  overrideBorderRadius: val => {
+    return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
   }
 };
 export const getBreakPointsValue = (value, breakpoint, ot = null, ov = false) => {

package/dist/Editor/hooks/useMouseMove.js

@@ -1,7 +1,23 @@
 import { useEffect, useState, createContext, useContext, useMemo } from "react";
+import { getSelectedText } from "../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditorContext = /*#__PURE__*/createContext();
+export const useEditorSelection = editor => {
+  const [textSelected, setTextSelected] = useState(false);
+  useEffect(() => {
+    if (editor?.selection) {
+      const text = getSelectedText(editor);
+      if (text?.length > 0) {
+        setTextSelected(true);
+      } else {
+        setTextSelected(false);
+      }
+    }
+  }, [editor?.selection]);
+  return [textSelected];
+};
 export const EditorProvider = ({
+  editor,
   theme,
   children
 }) => {
@@ -23,7 +39,7 @@ export const EditorProvider = ({
         hoverPath: previous
       };
     }
-  }, [path]);
+  }, [path, editor?.selection]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: {
       ...(value || {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.9.9",
+  "version": "2.0.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"