@flozy/editor 4.0.2 → 4.0.4

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -51,43 +51,51 @@ const insertAtNextLine = (editor, text) => {
   });
 };
 const getNextLine = editor => {
-  const {
-    selection
-  } = editor;
-  const {
-    focus
-  } = selection;
-  const {
-    text = ""
-  } = Node.get(editor, focus.path);
-  let nextLineIndex = 0;
-  let indexOfNextLine = 0;
-  if (text?.length) {
-    // split the text based on caret position
-    const textBeforeCaret = text.substring(0, focus.offset);
-    const textAfterCaret = text.substring(focus.offset);
+  try {
+    const {
+      selection
+    } = editor;
+    const {
+      focus
+    } = selection;
+    if (focus?.path?.length > 0) {
+      const {
+        text = ""
+      } = Node.get(editor, focus.path);
+      let nextLineIndex = 0;
+      let indexOfNextLine = 0;
+      if (text?.length) {
+        // split the text based on caret position
+        const textBeforeCaret = text.substring(0, focus.offset);
+        const textAfterCaret = text.substring(focus.offset);
 
-    // getting the index of the next line after the caret position
-    indexOfNextLine = textAfterCaret?.indexOf("\n");
-    if (indexOfNextLine >= 0) {
-      // index of next line
-      nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
-    } else {
-      nextLineIndex = text?.length;
+        // getting the index of the next line after the caret position
+        indexOfNextLine = textAfterCaret?.indexOf("\n");
+        if (indexOfNextLine >= 0) {
+          // index of next line
+          nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
+        } else {
+          nextLineIndex = text?.length;
+        }
+      }
+      const data = {
+        ...focus,
+        offset: nextLineIndex
+      };
+      const at = {
+        anchor: data,
+        focus: data
+      };
+      return {
+        at,
+        indexOfNextLine
+      };
     }
+    return null;
+  } catch (err) {
+    console.log(err);
+    return null;
   }
-  const data = {
-    ...focus,
-    offset: nextLineIndex
-  };
-  const at = {
-    anchor: data,
-    focus: data
-  };
-  return {
-    at,
-    indexOfNextLine
-  };
 };
 const updateAnchorEl = (setAnchorEl, editor) => {
   try {
@@ -95,18 +103,21 @@ const updateAnchorEl = (setAnchorEl, editor) => {
       return;
     }
     const selection = window.getSelection();
-    if (selection.rangeCount) {
+    if (selection.rangeCount && selection.anchorOffset !== selection.focusOffset) {
       let caret;
       if (getSelectedText(editor)) {
         // selected text as caret
         caret = selection.getRangeAt(0);
       } else {
-        const domElement = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
-        const {
-          textContent,
-          parentElement
-        } = domElement?.commonAncestorContainer || {};
-        caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
+        const sel = getNextLine(editor);
+        if (sel) {
+          const domElement = ReactEditor.toDOMRange(editor, sel.at);
+          const {
+            textContent,
+            parentElement
+          } = domElement?.commonAncestorContainer || {};
+          caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
+        }
       }
 
       const getBoundingClientRect = () => {

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

@@ -1,6 +1,4 @@
 import React from "react";
-import { Box } from "@mui/material";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
@@ -11,27 +9,18 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor,
-    borderRadius,
-    bannerSpacing
+    borderColor
   } = element;
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/_jsx("div", {
     className: `accordion-summary-container`,
     ...attributes,
-    sx: {
+    style: {
       width: "100%",
       position: "relative",
       backgroundColor: bgColor,
       border: `1px solid ${borderColor}`,
-      color: textColor,
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      }
+      color: textColor
     },
-    component: "div",
     children: children
   });
 };

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Transforms, Editor, Element } from "slate";
+import { useTheme } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -16,7 +17,7 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import AppHeaderPopup from "./AppHeaderPopup";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import { handleLinkType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,6 +25,7 @@ import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const drawerWidth = 240;
 function AppHeader(props) {
+  const theme = useTheme();
   const navWrprRef = useRef(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const {
@@ -126,11 +128,6 @@ function AppHeader(props) {
       }
     }
   };
-
-  // const onMenuSettings = (menuItem, i) => (event) => {
-  //   event.preventDefault();
-  // };
-
   const drawer = /*#__PURE__*/_jsxs(Box, {
     onClick: handleDrawerToggle,
     sx: {
@@ -186,15 +183,20 @@ function AppHeader(props) {
     })]
   });
   const container = window !== undefined ? () => window().document.body : undefined;
-  // const elevateStyle = useEleveateScroll({
-  //   ...props,
-  //   parentRef: navWrprRef,
-  //   needElevation: readOnly,
-  // });
-
   const elevateStyle = {
     position: "relative"
   };
+  const appbarSp = groupByBreakpoint({
+    padding: {
+      ...getTRBLBreakPoints(bannerSpacing)
+    }
+  }, theme);
+  const toolbarSp = groupByBreakpoint({
+    flexDirection: {
+      xs: "row-reverse !important",
+      lg: "unset"
+    }
+  }, theme);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       sx: {
@@ -216,13 +218,14 @@ function AppHeader(props) {
             ...elevateStyle,
             background: bgColor,
             boxShadow: "none",
-            padding: {
-              ...getTRBLBreakPoints(bannerSpacing)
-            },
+            ...appbarSp,
             zIndex: 999
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsxs(Toolbar, {
+            sx: {
+              ...toolbarSp
+            },
             style: {
               flexDirection: isLogoRight ? "row-reverse" : "row",
               paddingLeft: "0px",
@@ -239,8 +242,11 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                display: {
-                  sm: "none"
+                [theme.breakpoints.up("sm")]: {
+                  display: "none"
+                },
+                [theme.breakpoints.between("xs", "md")]: {
+                  display: "block"
                 }
               },
               children: /*#__PURE__*/_jsx(MenuIcon, {})
@@ -251,16 +257,21 @@ function AppHeader(props) {
               style: {
                 display: "inline-flex",
                 alignItems: "center",
-                color: textColor || "#000000",
+                color: textColor,
                 fontSize: logoFontSize,
                 fontFamily: titleFontFamily,
                 justifyContent: isLogoRight ? "end" : "start"
               },
               sx: {
                 flexGrow: 1,
-                display: {
-                  xs: "none",
-                  sm: "block"
+                [theme.breakpoints.up("sm")]: {
+                  display: "block"
+                },
+                [theme.breakpoints.between("xs", "md")]: {
+                  display: "none"
+                },
+                "& img": {
+                  marginRight: "7px"
                 }
               },
               className: "app-logo",
@@ -274,9 +285,11 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                display: {
-                  xs: "none",
-                  sm: "block"
+                [theme.breakpoints.up("sm")]: {
+                  display: "block"
+                },
+                [theme.breakpoints.between("xs", "md")]: {
+                  display: "none"
                 }
               },
               children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
@@ -299,7 +312,7 @@ function AppHeader(props) {
                     fontFamily: fontFamily,
                     textTransform: "none",
                     fontSize: fontSize || "16px",
-                    color: textColor || "#000",
+                    color: textColor || "#FFF",
                     background: bgColor || "none",
                     "& .m-settings": {
                       display: "none",
@@ -314,7 +327,7 @@ function AppHeader(props) {
                       background: "#FFF"
                     },
                     "&:hover": {
-                      color: textColorHover || textColor || "#000",
+                      color: textColorHover || textColor || "#FFF",
                       background: bgColorHover || bgColor || "none",
                       "& .m-settings": {
                         display: "block"

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

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { IconButton, Tooltip, Box } from "@mui/material";
-// import * as fIcons from "@mui/icons-material";
+import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
 import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -10,15 +9,13 @@ import LinkIcon from "@mui/icons-material/Link";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
-import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
-import { useEditorTheme } from "../../hooks/useEditorTheme";
-import { getTheme } from "../../theme";
-import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
+  const theme = useTheme();
   const {
     attributes,
     element,
@@ -33,12 +30,6 @@ const EditorButton = props => {
   const path = ReactEditor.findPath(editor, element);
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
-  const {
-    theme
-  } = useEditorTheme();
-  const {
-    buttonTheme
-  } = getTheme(theme);
   const {
     label,
     bgColor,
@@ -52,7 +43,7 @@ const EditorButton = props => {
     fontFamily,
     textColorHover,
     bgColorHover,
-    // buttonIcon,
+    buttonIcon,
     iconPosition = "start",
     borderStyle,
     borderWidth,
@@ -71,15 +62,13 @@ const EditorButton = props => {
   } = actionTrigger || {
     options: []
   };
-  const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
+  const isTrigger = linkType === "actionTrigger";
   const refURl = isTrigger ? buttonLink?.url : url;
-  const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
   const BtnIcon = buttonIcon ? buttonIcon : null;
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
     if (metadata?.buttonLink?.handler) {
-      const response = isTrigger ? linkType : "click";
-      metadata.buttonLink.handler(response);
+      metadata.buttonLink.handler("click");
     } else if (redirectOnURLResult) {
       // call api and redirect based on api result
       const apiResult = await actionButtonRedirect({}, {
@@ -92,7 +81,6 @@ const EditorButton = props => {
     }
   };
   const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
-  console.log(openInNewTab);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -165,21 +153,33 @@ const EditorButton = props => {
   const onClose = () => {
     setEdit(false);
   };
+  const tAlign = alignment || textAlign || "left";
+  const btnSp = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+    },
+    padding: {
+      ...getTRBLBreakPoints(bannerSpacing)
+    }
+  }, theme);
+  const pSp = groupByBreakpoint({
+    display: {
+      xs: xsHidden ? "none" : "inline-block",
+      lg: "inline-block"
+    }
+  }, theme);
   return /*#__PURE__*/_jsxs("div", {
-    className: "editor-btn-wrapper",
+    className: `editor-btn-wrapper`,
     ...attributes,
     style: {
-      textAlign: alignment || textAlign || "left"
+      textAlign: tAlign
     },
     contentEditable: false,
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "editor-btn-wrapper-inner",
       sx: {
-        display: {
-          lg: "inline-block",
-          xs: xsHidden ? "none" : "inline-block"
-        },
+        ...pSp,
         "& .element-toolbar": {
           display: "none"
         },
@@ -195,11 +195,18 @@ const EditorButton = props => {
           display: "inline-block"
         },
         children: [/*#__PURE__*/_jsxs(Box, {
+          className: `btn textAlign-${tAlign}`,
           sx: {
             textDecoration: "none",
+            background: bgColor || "rgb(30, 75, 122)",
             borderBlockStyle: "solid",
+            borderColor: borderColor || "transparent",
             borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
+            ...btnSp,
             borderStyle: borderStyle || "solid",
+            color: `${textColor || "#FFFFFF"}`,
+            fontSize: textSize || "inherit",
+            fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",
             position: "relative",
@@ -207,26 +214,14 @@ const EditorButton = props => {
               display: "none"
             },
             "&:hover": {
-              color: `${textColorHover || textColor}`,
-              background: bgColorHover || bgColor,
+              color: `${textColorHover || textColor || "#FFFFFF"}`,
+              background: bgColorHover || bgColor || "rgb(30, 75, 122)",
               "& .element-toolbar": {
                 display: "flex"
               }
-            },
-            color: `${textColor} !important`,
-            fontSize: `${textSize}px !important`,
-            fontFamily: `${fontFamilyMap[fontFamily] || ""}  !important`,
-            background: `${bgColor} !important`,
-            borderColor: `${borderColor} !important`,
-            borderRadius: {
-              ...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
-            },
-            padding: {
-              ...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
             }
           },
           ...buttonProps,
-          className: "button theme-element",
           children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
             iconName: buttonIcon,
             style: {

package/dist/Editor/Elements/Carousel/CarouselButton.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { insertCarousel } from "../../utils/carousel";
-import { Carousal } from "../../common/iconslist";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import { CarouselElementIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -1,15 +1,11 @@
-import React, { useContext, useState } from "react";
-import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
+import React, { useState } from "react";
+import { Box, IconButton, Popover } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
-import { ThemeContext } from "../../CommonEditor";
-import { useSlateStatic } from "slate-react";
-import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 let c = [];
 const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
   if (i % 7 === 0) {
@@ -113,17 +109,11 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick,
-    disableEditTheme
+    onColorPickerClick
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const theme = useTheme();
-  const editor = useSlateStatic();
-  const {
-    setOpenTheme
-  } = useContext(ThemeContext);
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -136,7 +126,6 @@ const ColorButtons = props => {
   const handleSelect = color => () => {
     onSelect(color);
   };
-  const colorVars = theme?.vars?.colors || {};
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
@@ -153,7 +142,7 @@ const ColorButtons = props => {
           activeColor: activeColor
         }, `si_btn_row1_${m}_${i}`);
       })
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsxs(Popover, {
       open: open || openColorTool,
       anchorEl: anchorEl || openColorTool,
       onClose: handleClose,
@@ -167,39 +156,9 @@ const ColorButtons = props => {
       },
       sx: classes.colorPopper,
       className: "colorPopper",
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
         sx: classes.colorButtonsInner,
-        children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsxs(Box, {
-            component: "div",
-            className: "singleColorTitleWrapper",
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle2",
-              children: "Theme colour"
-            }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
-              className: "editBtn",
-              onClick: () => {
-                Transforms.deselect(editor, {
-                  at: editor.selection
-                });
-                setOpenTheme("editThemeColor");
-              },
-              children: "Edit"
-            })]
-          }), /*#__PURE__*/_jsx(SingleColorButton, {
-            crs: Object.values(colorVars),
-            handleSelect: handleSelect,
-            classes: classes,
-            activeColor: activeColor
-          })]
-        }) : null, /*#__PURE__*/_jsx(Box, {
-          component: "div",
-          className: "singleColorTitleWrapper",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle2",
-            children: "Custom colour"
-          })
-        }), restRows.map((m, i) => {
+        children: restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
             id: `p2_${id}`,
             crs: m,
@@ -208,18 +167,14 @@ const ColorButtons = props => {
             classes: classes,
             activeColor: activeColor
           }, `si_btn_${m}_${i}`);
-        }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
-          onClick: onColorPickerClick,
-          style: {
-            alignSelf: "start",
-            margin: "6px"
-          },
-          children: /*#__PURE__*/_jsx("img", {
-            src: ColorPicker,
-            alt: "color wheel"
-          })
-        }) : null]
-      })
+        })
+      }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
+        onClick: onColorPickerClick,
+        children: /*#__PURE__*/_jsx("img", {
+          src: ColorPicker,
+          alt: "color wheel"
+        })
+      }) : null]
     })]
   });
 };

package/dist/Editor/Elements/Color Picker/ColorPicker.css

@@ -60,28 +60,4 @@
   padding: 0 15px !important;
   width: 60px !important;
   flex-shrink: 0;
-}
-
-
-.singleColorTitleWrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-  width: 100%;
-  border-bottom: 1px solid #DCE4EC;
-}
-
-.singleColorTitleWrapper .MuiTypography-root {
-  font-weight: 600;
-}
-
-.singleColorTitleWrapper .editBtn {
-  text-transform: none;
-  color: #2563EB;
-  text-decoration: underline;
-  padding: 0px;
-  min-width: unset;
-  cursor: pointer;
-  font-size: 14px;
-}
+}

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
 import { Transforms } from "slate";
+import ColorPickerTool from "react-gcolor-picker";
 import { IconButton, Tooltip, Box, Popover } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import ColorButtons from "./ColorButtons";
@@ -8,7 +9,6 @@ import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import CustomColorPicker from "../../common/CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -95,10 +95,10 @@ const ColorPicker = props => {
         horizontal: "top"
       },
       sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(CustomColorPicker, {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,
-        onChange: handleFormSubmit,
-        color: activeColor
+        value: activeColor,
+        onChange: handleFormSubmit
       })
     })]
   });

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -16,8 +16,7 @@ const ColorPickerStyles = theme => ({
     marginTop: "20px",
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      padding: "4px 14px",
-      "@media only screen and (max-width: 600px)": {
+      '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
     }