@flozy/editor 3.8.7 → 3.8.9

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

@@ -8,7 +8,6 @@ import { Editor, Node, Path, Transforms } from "slate";
 import useWindowResize from "../../hooks/useWindowResize";
 import { MODES } from "./helper";
 import { getSelectedText } from "../../utils/helper";
-import { VoiceToText } from "./VoiceToText";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const scrollToAIInput = () => {
@@ -52,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 {
@@ -96,13 +103,16 @@ 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 {
-        caret = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
+        const sel = getNextLine(editor);
+        if (sel) {
+          caret = ReactEditor.toDOMRange(editor, sel.at);
+        }
       }
       const getBoundingClientRect = () => {
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
@@ -179,11 +189,6 @@ function PopoverAIInput({
       onClickOutside();
       return;
     }
-    if (type === "speech_to_text") {
-      Transforms.insertText(editor, option.text);
-      onClickOutside();
-      return;
-    }
     if (type === "try_again") {
       // resetting the previous option and try again
       option = selectedOption;
@@ -194,7 +199,7 @@ function PopoverAIInput({
     setLoading(true);
     const payload = {
       mode: option.mode || 0,
-      query: option?.inputValue || inputValue
+      query: inputValue
     };
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
@@ -273,19 +278,15 @@ function PopoverAIInput({
       component: "div",
       sx: classes.mobileAIInputWrapper,
       ref: targetRef,
-      children: /*#__PURE__*/_jsx(VoiceToText, {
-        otherProps: otherProps,
+      children: /*#__PURE__*/_jsx(AIInput, {
+        loading: loading,
         onSend: onSend,
-        children: /*#__PURE__*/_jsx(AIInput, {
-          loading: loading,
-          onSend: onSend,
-          generatedText: generatedText,
-          anchorEl: anchorEl,
-          openAI: openAI,
-          inputValue: inputValue,
-          onInputChange: onInputChange,
-          onClickOutside: onClickOutside
-        })
+        generatedText: generatedText,
+        anchorEl: anchorEl,
+        openAI: openAI,
+        inputValue: inputValue,
+        onInputChange: onInputChange,
+        onClickOutside: onClickOutside
       })
     }) : /*#__PURE__*/_jsx(Popper, {
       open: Boolean(openAI),
@@ -306,19 +307,15 @@ function PopoverAIInput({
           sx: getSelectedText(editor) ? {
             marginTop: "6px"
           } : {},
-          children: /*#__PURE__*/_jsx(VoiceToText, {
-            otherProps: otherProps,
+          children: /*#__PURE__*/_jsx(AIInput, {
+            loading: loading,
             onSend: onSend,
-            children: /*#__PURE__*/_jsx(AIInput, {
-              loading: loading,
-              onSend: onSend,
-              generatedText: generatedText,
-              anchorEl: anchorEl,
-              openAI: openAI,
-              inputValue: inputValue,
-              onInputChange: onInputChange,
-              onClickOutside: onClickOutside
-            })
+            generatedText: generatedText,
+            anchorEl: anchorEl,
+            openAI: openAI,
+            inputValue: inputValue,
+            onInputChange: onInputChange,
+            onClickOutside: onClickOutside
           })
         })
       })

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

@@ -167,8 +167,7 @@ const Styles = theme => ({
   sendIconContainer: {
     alignSelf: "flex-end",
     display: "flex",
-    alignItems: "center",
-    gap: "6px"
+    alignItems: "center"
   }
 });
 export default Styles;

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 {
@@ -62,11 +64,6 @@ function AppHeader(props) {
   const handleDrawerToggle = () => {
     setMobileOpen(prevState => !prevState);
   };
-  const closeDrawer = () => {
-    if (mobileOpen) {
-      handleDrawerToggle();
-    }
-  };
   const onSettings = e => {
     if (!readOnly) {
       e.stopPropagation();
@@ -126,11 +123,6 @@ function AppHeader(props) {
       }
     }
   };
-
-  // const onMenuSettings = (menuItem, i) => (event) => {
-  //   event.preventDefault();
-  // };
-
   const drawer = /*#__PURE__*/_jsxs(Box, {
     onClick: handleDrawerToggle,
     sx: {
@@ -153,27 +145,10 @@ function AppHeader(props) {
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
       children: menus.map((item, i) => {
         const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
-        const onTouchEnd = e => {
-          if (buttonProps?.onTouchEnd) {
-            buttonProps?.onTouchEnd(e);
-            closeDrawer();
-          }
-        };
-        const onClick = e => {
-          if (buttonProps?.onClick) {
-            buttonProps?.onClick(e);
-            closeDrawer();
-          }
-        };
-        const props = {
-          ...buttonProps,
-          onTouchEnd,
-          onClick
-        };
         return /*#__PURE__*/_jsx(ListItem, {
           disablePadding: true,
           children: /*#__PURE__*/_jsx(ListItemButton, {
-            ...props,
+            ...buttonProps,
             sx: {
               textAlign: "center"
             },
@@ -186,15 +161,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 +196,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 +220,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 +235,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 +263,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 +290,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 +305,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/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) {
@@ -35,7 +31,9 @@ const SingleColorButton = ({
     style: {
       width: "100%",
       display: "flex",
-      padding: padding || "8px"
+      alignItems: "center",
+      padding: padding || "8px",
+      justifyContent: "center"
     },
     children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
       onClick: handleSelect(m),
@@ -111,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);
   };
@@ -134,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,
@@ -151,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,
@@ -165,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,
@@ -206,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]
     })]
   });
 };