@flozy/editor 10.2.4 → 10.2.6

package/dist/Editor/CommonEditor.js

@@ -191,6 +191,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       ReactEditor.focus(editor);
     }
   }, [id, content]);
+  useEffect(() => {
+    if (isReadOnly) {
+      const sectionId = window.location.hash.substring(1);
+      const sectionEle = sectionId ? document.getElementById(decodeURIComponent(sectionId)) : null;
+      if (sectionEle) {
+        sectionEle.scrollIntoView({
+          behavior: "smooth"
+        });
+      }
+    }
+  }, []);
   const debounced = useDebouncedCallback(
   // function
   value => {

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

@@ -8,7 +8,8 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
-import { getBorderColor } from "../../helper";
+import { getBorderColor, getTextColor } from "../../helper";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -82,6 +83,12 @@ const Accordion = props => {
     bgColor,
     borderColor
   } = element;
+  const accordionSummary = element?.children?.find(c => c.type === "accordion-summary");
+  const {
+    textColor: childTextColor,
+    borderRadius,
+    bannerSpacing
+  } = accordionSummary || {};
   const borderStyle = getBorderColor(borderColor);
   const {
     theme
@@ -162,18 +169,29 @@ const Accordion = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
-  return /*#__PURE__*/_jsxs("div", {
+  const textStyles = getTextColor(childTextColor);
+  const borderRadiusStyles = {
+    ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+  };
+  const padding = getTRBLBreakPoints(bannerSpacing);
+  return /*#__PURE__*/_jsxs(Box, {
     className: `accordion-container`,
     ...attributes,
     style: {
       position: "relative"
     },
+    component: "div",
+    sx: {
+      background: bgColor,
+      ...borderStyle,
+      borderRadius: borderRadiusStyles,
+      padding,
+      '& span[data-slate-string="true"]': textStyles
+    },
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "accordion-title",
-      style: {
-        background: bgColor,
-        ...borderStyle
-      },
+      className: "accordion-title"
+      // style={{ background: bgColor, ...borderStyle }}
+      ,
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {
         role: "button",
@@ -195,7 +213,8 @@ const Accordion = props => {
           icon: "accordionArrowDown"
         })
       }), children[0]]
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "div",
       className: "accordion-content",
       style: {
         display: toggle ? "block" : "none"

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

@@ -1,7 +1,5 @@
 import React from "react";
-import { getBorderColor, getTextColor } from "../../helper";
 import { Box } from "@mui/material";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
@@ -9,32 +7,12 @@ const AccordionSummary = props => {
     children,
     element
   } = props;
-  const {
-    textColor,
-    bgColor,
-    borderColor,
-    borderRadius,
-    bannerSpacing
-  } = element;
-  const textStyles = getTextColor(textColor);
-  const borderStyle = getBorderColor(borderColor);
   return /*#__PURE__*/_jsx(Box, {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
       width: "100%",
-      position: "relative",
-      background: bgColor,
-      ...borderStyle
-    },
-    sx: {
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      },
-      '& span[data-slate-string="true"]': textStyles
+      position: "relative"
     },
     component: "div",
     children: children

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -18,7 +18,7 @@ import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import AppHeaderPopup from "./AppHeaderPopup";
 import { getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-import { handleLinkType } from "../../utils/helper";
+import { handleLinkType, isHavingColor } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
@@ -45,6 +45,8 @@ function AppHeader(props) {
     bgColorHover,
     textColor,
     textColorHover,
+    borderColor,
+    borderColorHover,
     menuStyle,
     bannerSpacing,
     fontSize,
@@ -149,7 +151,7 @@ function AppHeader(props) {
       }) : appTitle
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
       children: menus.map((item, i) => {
-        const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+        const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank", () => {}, !readOnly, true);
         const onButtonClick = e => {
           closeDrawer();
           setTimeout(() => {
@@ -225,6 +227,7 @@ function AppHeader(props) {
           sx: {
             ...elevateStyle,
             background: bgColor,
+            border: isHavingColor(borderColor) ? `1px solid ${borderColor}` : "none",
             boxShadow: "none",
             ...appbarSp,
             zIndex: 999
@@ -322,6 +325,7 @@ function AppHeader(props) {
                     fontSize: fontSize || "16px",
                     color: textColor || "#000",
                     background: bgColor || "none",
+                    border: borderColorHover ? `1px solid transparent` : "none",
                     "& .m-settings": {
                       display: "none",
                       position: "absolute",
@@ -337,6 +341,7 @@ function AppHeader(props) {
                     "&:hover": {
                       color: textColorHover || textColor || "#000",
                       background: bgColorHover || bgColor || "none",
+                      border: borderColorHover ? `1px solid ${borderColorHover}` : "none",
                       "& .m-settings": {
                         display: "block"
                       }

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

@@ -61,6 +61,7 @@ const EditorButton = props => {
     fontFamily,
     textColorHover,
     bgColorHover,
+    borderColorHover,
     // buttonIcon,
     iconPosition = "start",
     borderStyle,
@@ -105,7 +106,7 @@ const EditorButton = props => {
   };
   const buttonProps = handleLinkType(refURl, linkType, true,
   // button functionalities have to work on both edit mode and normal mode
-  openInNewTab, handleTrigger, metadata);
+  openInNewTab, handleTrigger, metadata, !readOnly);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -279,7 +280,7 @@ const EditorButton = props => {
           sx: {
             textDecoration: "none",
             borderBlockStyle: "solid",
-            borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
+            borderWidth: borderWidth !== undefined ? borderWidth : borderColor || borderColorHover ? "1px" : "0px",
             ...btnSp,
             borderStyle: borderStyle || "solid",
             display: "inline-flex",
@@ -290,8 +291,9 @@ const EditorButton = props => {
               display: "none"
             },
             "&:hover": {
-              color: `${textColorHover || textColor}`,
-              background: bgColorHover || bgColor,
+              color: `${textColorHover || textColor || "#FFFFFF"}`,
+              background: bgColorHover || bgColor || "rgb(30, 75, 122)",
+              borderColor: borderColorHover || borderColor || "",
               "& .element-toolbar": {
                 display: "flex"
               }

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js

@@ -171,11 +171,11 @@ const MultiSelectWithPopover = props => {
         variant: "filled",
         sx: {
           backgroundColor: option?.color,
-          color: '#0F172A',
+          color: "#0F172A",
           "& .MuiChip-deleteIcon": {
             flexShrink: 0,
             "& path": {
-              stroke: '#0F172A !important'
+              stroke: "#0F172A !important"
             }
           },
           "&:hover": {
@@ -222,9 +222,9 @@ const MultiSelectWithPopover = props => {
               maxHeight: "250px",
               overflowY: "auto",
               overflowX: "hidden",
-              pr: '12px',
-              pl: '12px',
-              marginTop: '12px',
+              pr: "12px",
+              pl: "12px",
+              marginTop: "12px",
               ...customScrollStyles
             }
           },
@@ -282,11 +282,11 @@ const MultiSelectWithPopover = props => {
                     "& .MuiSvgIcon-root": {
                       fontSize: 20
                     },
-                    '& rect': {
+                    "& rect": {
                       fill: theme?.palette?.editor?.closeButtonSvgStroke
                     },
-                    '&:hover': {
-                      backgroundColor: 'transparent'
+                    "&:hover": {
+                      backgroundColor: "transparent"
                     }
                   },
                   children: /*#__PURE__*/_jsx(Icon, {
@@ -297,9 +297,9 @@ const MultiSelectWithPopover = props => {
             },
             sx: {
               backgroundColor: "transparent",
-              fontFamily: 'Inter',
+              fontFamily: "Inter",
               fontWeight: 400,
-              fontSize: '12px'
+              fontSize: "12px"
             },
             placeholder: "Create new one..."
           }),
@@ -315,11 +315,11 @@ const MultiSelectWithPopover = props => {
             deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
             sx: {
               backgroundColor: option?.color,
-              color: '#0F172A',
+              color: "#0F172A",
               "& .MuiChip-deleteIcon": {
                 flexShrink: 0,
                 "& path": {
-                  stroke: '#0F172A !important'
+                  stroke: "#0F172A !important"
                 }
               },
               "&:hover": {
@@ -329,13 +329,13 @@ const MultiSelectWithPopover = props => {
           }, index))
         }), /*#__PURE__*/_jsx(Divider, {
           sx: {
-            mt: '12px',
+            mt: "12px",
             borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
             boxShadow: theme?.palette?.editor?.dividerDropShadow
           }
         }), /*#__PURE__*/_jsx(Box, {
           sx: {
-            pl: '4px'
+            pl: "4px"
           },
           children: /*#__PURE__*/_jsxs(List, {
             sx: {
@@ -346,11 +346,11 @@ const MultiSelectWithPopover = props => {
             children: [/*#__PURE__*/_jsx(Typography, {
               sx: {
                 mb: 1,
-                pl: '8px',
+                pl: "8px",
                 color: theme?.palette?.editor?.secondaryTextColor,
-                fontFamily: 'Inter',
+                fontFamily: "Inter",
                 fontWeight: 400,
-                fontSize: '12px'
+                fontSize: "12px"
               },
               children: "Choose an option or create one"
             }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
@@ -363,19 +363,19 @@ const MultiSelectWithPopover = props => {
                 sx: {
                   paddingTop: "4px",
                   paddingBottom: "4px",
-                  justifyContent: 'space-between',
-                  '&:hover': {
-                    '& path': {
+                  justifyContent: "space-between",
+                  "&:hover": {
+                    "& path": {
                       stroke: theme?.palette?.editor?.activeColor
                     },
-                    borderRadius: '12px'
+                    borderRadius: "12px"
                   }
                 },
                 children: [/*#__PURE__*/_jsx(Chip, {
                   label: option?.value,
                   sx: {
                     backgroundColor: option?.color,
-                    color: '#0F172A',
+                    color: "#0F172A",
                     fontWeight: 500,
                     fontSize: "12px",
                     fontFamily: "Inter",
@@ -389,11 +389,11 @@ const MultiSelectWithPopover = props => {
                 }), /*#__PURE__*/_jsx(IconButton, {
                   size: "small",
                   sx: {
-                    '& path': {
+                    "& path": {
                       stroke: theme?.palette?.editor?.closeButtonSvgStroke
                     },
-                    '&:hover': {
-                      backgroundColor: 'transparent'
+                    "&:hover": {
+                      backgroundColor: "transparent"
                     }
                   },
                   onClick: e => handleEditOption(e, index),
@@ -422,7 +422,7 @@ const MultiSelectWithPopover = props => {
                   label: `${inputValue}`,
                   sx: {
                     backgroundColor: chipColor,
-                    color: '#0F172A',
+                    color: "#0F172A",
                     fontWeight: 500,
                     fontSize: "12px",
                     fontFamily: "Inter",

package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js

@@ -13,13 +13,13 @@ const MultiSelectType = props => {
     settings,
     translation
   } = props;
-  const {
-    wrapColumn
-  } = settings;
   const {
     onChange,
     onUpdateProperty
   } = useDataView();
+  const {
+    wrapColumn
+  } = settings;
   const value = Array.isArray(pValue) ? pValue : [];
   const coloredValues = [...(value || [])]?.map(m => {
     return {
@@ -34,11 +34,11 @@ const MultiSelectType = props => {
   };
   const handleUpdate = data => {
     const updateData = {
-      "label": "Multi Select",
-      "visible": true,
-      "key": property,
-      "type": "multi-select",
-      "options": data
+      label: "Multi Select",
+      visible: true,
+      key: property,
+      type: "multi-select",
+      options: data
     };
     onUpdateProperty(updateData);
   };

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

@@ -4,7 +4,6 @@ import { Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
-import BackupIcon from "@mui/icons-material/Backup";
 import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
 import FormPopup from "./FormPopup";
 import ButtonPopup from "../Button/ButtonPopup";
@@ -207,7 +206,7 @@ const Form = props => {
     }, {
       at: path
     });
-    // adding form field style to the current form node 
+    // adding form field style to the current form node
     const currentNode = Node.get(editor, path);
     if (currentNode) {
       currentNode.children.forEach((item, index) => {
@@ -415,7 +414,6 @@ const Form = props => {
           lineHeight: 1.43,
           ...formSX
         },
-        ref: formEle,
         children: [/*#__PURE__*/_jsx(Grid, {
           className: "form-grid",
           item: true,

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

@@ -35,7 +35,6 @@ const FormTextArea = props => {
       onChange: onChange,
       sx: {
         width: "100%",
-        borderWidth: "1px",
         borderBlockStyle: "solid",
         padding: {
           ...getTRBLBreakPoints(bannerSpacing)

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Editor, Path, Transforms } from "slate";
+import { Editor, Path, Range, Transforms } from "slate";
 import { Box, IconButton } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
@@ -150,8 +150,12 @@ const TableCell = props => {
   const isFirstRow = row === 0;
   const isFirstColumn = column === 0;
   const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
-  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag");
-  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag");
+  const {
+    selection
+  } = editor;
+  const isHavingSelection = selection && !Range.isCollapsed(selection);
+  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag") && !isHavingSelection;
+  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag") && !isHavingSelection;
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
   const tableDOM = table.getDOMNode(path, true);

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

@@ -0,0 +1,46 @@
+import { Checkbox as Core, FormControlLabel, IconButton, Typography } from "@mui/material";
+import CheckboxStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { CheckedBoxCheckIcon } from "../iconListV2";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Checkbox(props) {
+  const {
+    value,
+    onChange,
+    label,
+    labelProps,
+    checkboxProps,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = CheckboxStyles(theme);
+  return /*#__PURE__*/_jsx(FormControlLabel, {
+    className: "ccheckbox-primary",
+    sx: {
+      ...classes.customCheckBox
+    },
+    control: /*#__PURE__*/_jsx(Core, {
+      value: value,
+      checked: value,
+      onChange: onChange,
+      checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+        className: "checkedIcon",
+        children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+      }),
+      icon: /*#__PURE__*/_jsx(IconButton, {
+        className: "unCheckedIcon"
+      }),
+      ...(checkboxProps || {})
+    }),
+    label: /*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      sx: classes.label,
+      ...(labelProps || {}),
+      children: label
+    }),
+    ...rest
+  });
+}
+export default Checkbox;

package/dist/Editor/common/Checkbox/styles.js

@@ -0,0 +1,45 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    buttonBorder3,
+    checkedIconBg,
+    tv_text
+  } = theme?.palette?.editor || {};
+  return {
+    customCheckBox: {
+      padding: "0px",
+      marginTop: "8px",
+      "& .MuiCheckbox-root": {
+        padding: "8px 8px 8px 10px",
+        "&:hover": {
+          background: "unset !important"
+        }
+      },
+      "& button": {
+        width: "18px !important",
+        height: "18px !important",
+        borderRadius: "3px",
+        border: `1px solid ${buttonBorder3}`,
+        "& svg": {
+          width: "14px",
+          height: "14px"
+        }
+      },
+      "& .checkedIcon": {
+        background: "#2563EB",
+        borderColor: "#2563EB",
+        padding: "0px"
+      },
+      "& .unCheckedIcon": {
+        background: checkedIconBg
+      },
+      "& p": {
+        margin: "0px !important"
+      }
+    },
+    label: {
+      fontSize: "14px",
+      color: `${tv_text} !important`
+    }
+  };
+};
+export default SelectStyles;

package/dist/Editor/common/ColorPickerButton.js

@@ -39,6 +39,9 @@ const ColorPickerToolComponent = ({
       position: "relative"
     },
     children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        minHeight: "460px"
+      },
       children: /*#__PURE__*/_jsx(CustomColorPicker, {
         gradient: hideGradient ? false : true,
         color: color,