@flozy/editor 5.3.6 → 5.3.7

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

@@ -11,6 +11,8 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VideoContent = props => {
@@ -68,12 +70,16 @@ const VideoPlaceholder = props => {
   const {
     url,
     readOnly,
-    onSettings
+    onSettings,
+    classes
   } = props;
   return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     onClick: onSettings,
+    sx: {
+      ...classes.emptyThumbBtn
+    },
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "video"
     }), "Embed Video or Other"]
@@ -121,6 +127,10 @@ const Video = ({
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
   const hasAspect = url && aspectRatio !== "custom" && aspectRatio;
+  const {
+    theme: appTheme
+  } = useEditorContext();
+  const classes = useCommonStyle(appTheme);
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -267,7 +277,8 @@ const Video = ({
         videoSX: videoSX,
         url: url,
         readOnly: readOnly,
-        resizing: resizing
+        resizing: resizing,
+        classes: classes
       }), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {

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

@@ -402,6 +402,7 @@ const Form = props => {
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         position: "relative",
+        lineHeight: 1.43,
         ...formSX
       },
       ref: formEle,

package/dist/Editor/Elements/FreeGrid/breakpointConstants.js

@@ -47,22 +47,22 @@ export function wrapThemeBreakpoints(sxProp, prop, theme) {
     const formatedSxProp = Object.keys(sxProp).reduce((a, b) => {
       switch (b) {
         case "md":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["md"] || sxProp["lg"]
           };
           break;
         case "sm":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["sm"] || sxProp["lg"]
           };
           break;
         case "xs":
-          a[theme.breakpoints.between("xs", "md")] = {
+          a[theme?.breakpoints?.between("xs", "md")] = {
             [prop]: sxProp["xs"] || sxProp["lg"]
           };
           break;
         default:
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["lg"]
           };
       }

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -171,6 +171,7 @@ const useFreeGridStyles = ({
           height: "100%",
           "& .signature-container": {
             height: "100%",
+            LineHeight: 1.43,
             "& .signature-btn-container": {
               height: "100%",
               display: "flex",
@@ -318,7 +319,7 @@ const useFreeGridStyles = ({
         "& .element-toolbar": {
           display: "none"
         },
-        [theme.breakpoints.between("xs", "md")]: {
+        [theme?.breakpoints?.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
       },

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

@@ -61,6 +61,7 @@ const GridItemToolbar = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
+          sx: classes.groupIcons,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -69,6 +70,7 @@ const GridItemToolbar = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onAddColumn,
+          sx: classes.groupIcons2,
           children: /*#__PURE__*/_jsx(AddIcon, {})
         })
       })]

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

@@ -112,6 +112,50 @@ const GridStyles = (theme, appTheme) => ({
       background: appTheme?.palette?.editor?.background,
       color: appTheme?.palette?.editor?.textColor
     }
+  },
+  groupIcons: {
+    background: appTheme?.palette?.editor?.aiInputBackground,
+    border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
+        stroke: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    },
+    '&:hover': {
+      background: `${appTheme?.palette?.editor?.aiInputBackground} !important`,
+      border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+      '& svg': {
+        '& path': {
+          stroke: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    }
+  },
+  groupIcons2: {
+    background: appTheme?.palette?.editor?.aiInputBackground,
+    border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
+        fill: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    },
+    '&:hover': {
+      background: `${appTheme?.palette?.editor?.aiInputBackground} !important`,
+      border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
+      '& svg': {
+        '& path': {
+          fill: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    }
   }
 });
 export default GridStyles;

package/dist/Editor/Elements/List/CheckList.js

@@ -39,7 +39,8 @@ const CheckList = ({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        ...(style || {})
+        ...(style || {}),
+        lineHeight: 1.43
       },
       children: [/*#__PURE__*/_jsxs("div", {
         contentEditable: false,

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -49,6 +49,7 @@ const SearchAttachment = props => {
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
         margin: '4px 0px',
+        lineHeight: 1.43,
         "&.MuiPaper-root.MuiPaper-rounded": {
           borderRadius: "7px !important",
           paddingTop: '0px !important'

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -147,7 +147,7 @@ const SignaturePopup = props => {
         style: {
           width: "fit-content"
         },
-        children: "Sign Here"
+        children: "Sign here"
       })]
     }), /*#__PURE__*/_jsx(Dialog, {
       className: `${className} dialogComp`,
@@ -294,7 +294,7 @@ const SignaturePopup = props => {
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "46px"
+                    minWidth: "49px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
@@ -420,7 +420,7 @@ const SignaturePopup = props => {
                 xs: 12,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "46px"
+                    minWidth: "49px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
@@ -492,7 +492,7 @@ const SignaturePopup = props => {
                     return /*#__PURE__*/_jsx(IconButton, {
                       onClick: onBrushSize(m),
                       disableRipple: true,
-                      className: brush.size === m ? "activeBrush" : "",
+                      className: `${brush.size === m ? "activeBrush" : ""} brushIcon`,
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
                           width: 17 + m,

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,6 +5,7 @@ import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
+import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,8 +33,14 @@ const SimpleText = props => {
   const {
     pageColor
   } = pageSt?.pageProps || {};
+  const {
+    activeBreakPoint
+  } = useEditorContext();
+  const lineHeight = element?.children[0]?.lineHeight;
+  const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
+    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
+    lineHeight: lineH
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Elements/SimpleText/style.js

@@ -1,10 +1,17 @@
 import { invertColor } from "../../helper";
 const SimpleTextStyle = ({
-  pageColor
+  pageColor,
+  lineHeight
 }) => ({
   root: {
     position: "relative",
     padding: "0px",
+    lineHeight: lineHeight,
+    "&.dataView": {
+      "& .placeholder-simple-text": {
+        opacity: 0
+      }
+    },
     "&.signature": {
       "& .placeholder-simple-text": {
         opacity: 0
@@ -28,6 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
+      display: "inline-flex",
+      alignItems: "center",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

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

@@ -150,8 +150,6 @@ const Table = props => {
   const tableRef = useRef(null);
   const containerRef = useRef(null);
   const path = ReactEditor.findPath(editor, element);
-  const isValidPath = path && Editor.hasPath(editor, path); // getting cannot find the descendant path error while deleting table from free grid on right click
-
   const dragRowBtnCls = `table-${path?.toString()?.replaceAll(",", "-")}-row-drag-btn`;
   const handleAction = type => {
     Transforms.select(editor, editor.selection);
@@ -267,7 +265,7 @@ const Table = props => {
       openSetttings,
       exandTools
     },
-    children: [isValidPath ? /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       style: {
         minWidth: "100%",
         maxWidth: "100%",
@@ -307,7 +305,7 @@ const Table = props => {
         addType: "col",
         onAdd: addCol
       })]
-    }) : null, /*#__PURE__*/_jsx(AddRowCol, {
+    }), /*#__PURE__*/_jsx(AddRowCol, {
       ...commonAddBtnProps,
       addType: "row",
       onAdd: addRow

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { Editor, Element, Path, Transforms } from "slate";
+import { Editor, Path, Transforms } from "slate";
 import { Box } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
@@ -11,6 +11,7 @@ import DragButton from "./DragButton";
 import TablePopup from "./TablePopup";
 import { Droppable } from "./Droppable";
 import { useDndContext } from "@dnd-kit/core";
+import { getNodeWithType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -97,14 +98,8 @@ const TableCell = props => {
   const [openSettings, setOpenSettings] = useState(false);
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
-  const [tableNode] = Editor.nodes(editor, {
-    at: path,
-    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-  });
-  const [rowNode] = Editor.nodes(editor, {
-    at: path,
-    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
-  });
+  const [tableNode] = getNodeWithType(editor, "table", path); // getting cannot find the descendant path error, while deleting table because of unknown re-render issue, so wrapping it with try catch
+  const [rowNode] = getNodeWithType(editor, "table-row", path);
   const currentPath = path.slice(-2) || []; // getting last 2 items from path, which gives row and column position of the cell
   const [row, column] = currentPath;
   const isFirstRow = row === 0;
@@ -424,7 +419,7 @@ const TableCell = props => {
       }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
         classes: classes,
         onMouseDown: onMouseDown,
-        height: tableDOM.getBoundingClientRect()?.height
+        height: tableDOM?.getBoundingClientRect()?.height
       }) : null, hasSelected && !readOnly && !tableResizing ? /*#__PURE__*/_jsx("div", {
         className: "selection-area-tc",
         contentEditable: false

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

@@ -77,6 +77,7 @@ const TopBanner = props => {
     theme
   } = useEditorContext();
   const classes = TopBannerStyles(theme);
+  const renderHeaderAboveBanner = customProps?.metadata?.renderHeader ? customProps.metadata.renderHeader() : null;
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     ...attributes,
@@ -87,7 +88,7 @@ const TopBanner = props => {
     },
     contentEditable: false,
     sx: classes.root,
-    children: [/*#__PURE__*/_jsx("img", {
+    children: [renderHeaderAboveBanner, /*#__PURE__*/_jsx("img", {
       src: url,
       alt: "Top Banner",
       className: "top-banner-wrpr-ele",

package/dist/Editor/MiniEditor.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, useEffect } from "react";
-import { createEditor } from "slate";
+import { createEditor, Range } from "slate";
 import { Slate, Editable } from "slate-react";
 import { useDebounce } from "use-debounce";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
@@ -115,6 +115,20 @@ const MiniEditor = props => {
         event,
         editor
       });
+    } else if (event.key === "Backspace") {
+      const {
+        selection
+      } = editor;
+      event.preventDefault();
+      if (selection) {
+        if (!Range.isCollapsed(selection)) {
+          editor.deleteFragment();
+        } else {
+          editor.deleteBackward({
+            unit: "character"
+          });
+        }
+      }
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const renderElement = useCallback(props => {

package/dist/Editor/Styles/EditorStyles.js

@@ -129,7 +129,8 @@ const editorStyles = ({
       }
     },
     "& .accordion-summary-collapse-btn": {
-      padding: "4px"
+      padding: "4px",
+      width: '5px'
     },
     "& .workflow-icon-btn": {
       pointerEvents: "none",
@@ -238,6 +239,7 @@ const editorStyles = ({
       }
     },
     "& .section-tw": {
+      background: 'transparent !important',
       "& button": {
         padding: "2px",
         borderRadius: "0px",
@@ -286,8 +288,8 @@ const editorStyles = ({
       }
     },
     "& ::selection": {
-      color: "inherit",
-      background: "#EAEBFE"
+      background: 'rgba(35, 131, 226, 0.35)!important',
+      color: 'inherit'
     },
     "&.readOnlyContainer": {
       "& .max-content": {

package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js

@@ -42,7 +42,9 @@ const FontFamilyAutocomplete = ({
     },
     value: value || options?.[0],
     className: "editor-dd",
-    sx: classes.autoCompleteaFontFamily,
+    sx: {
+      ...classes.autoCompleteaFontFamily
+    },
     onChange: (e, newValue) => changeMarkData(e, newValue, format),
     getOptionLabel: option => {
       return option;
@@ -58,6 +60,13 @@ const FontFamilyAutocomplete = ({
         children: option
       });
     },
+    slotProps: {
+      popper: {
+        sx: {
+          ...classes.fontFamilyListOptions
+        }
+      }
+    },
     popupIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     renderInput: params => /*#__PURE__*/_jsx(TextField, {
       sx: {
@@ -67,6 +76,13 @@ const FontFamilyAutocomplete = ({
       },
       ...params
     })
+    // componentsProps={{
+    //     clearIndicator: {
+    //       style: { display: 'none' },
+    //     },
+    //   }}
+    ,
+    disableClearable: true
   });
 };
 export default FontFamilyAutocomplete;

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -2,10 +2,12 @@ import React, { useEffect, useRef, useState } from "react";
 import { TextField, IconButton } from "@mui/material";
 import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
 import { headingMap, sizeMap } from "../../utils/font.js";
-import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
+import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded";
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import { getBreakPointsValue } from "../../helper/theme.js";
 import useWindowResize from "../../hooks/useWindowResize.js";
 import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
+import { TextSizeDownArrow, TextSizeUpArrow } from "../../common/iconListV2.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -106,11 +108,11 @@ const TextSize = ({
           children: [/*#__PURE__*/_jsx(IconButton, {
             onClick: onIncreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextPlusIcon, {})
+            children: /*#__PURE__*/_jsx(TextSizeUpArrow, {})
           }), /*#__PURE__*/_jsx(IconButton, {
             onClick: onDecreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextMinusIcon, {})
+            children: /*#__PURE__*/_jsx(TextSizeDownArrow, {})
           })]
         })
       }