@flozy/editor 9.0.7 → 9.1.0

package/dist/Editor/Elements/Link/Link.js

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Node, Transforms } from "slate";
-import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
@@ -11,62 +11,6 @@ import { getLinkType, handleLinkType } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Toolbar = props => {
-  const {
-    urlPath,
-    linkType,
-    showInNewTab,
-    selected,
-    linkRef,
-    onEditLink,
-    editor
-  } = props;
-  const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
-  const navType = getLinkType(linkType, urlPath);
-  const hideOpenLink = navType === "page" || !navType;
-  return selected ? /*#__PURE__*/_jsx(Popper, {
-    anchorEl: linkRef?.current,
-    open: true,
-    placement: "top-start",
-    className: "hide-popper-on-overlap",
-    contentEditable: false,
-    style: {
-      zIndex: 1000
-    },
-    children: /*#__PURE__*/_jsxs(Box, {
-      className: "element-toolbar hr",
-      style: {
-        width: "150px",
-        display: "flex",
-        position: "unset"
-      },
-      component: "div",
-      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Edit",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onEditLink,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Remove",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => removeLink(editor),
-          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
-        })
-      })]
-    })
-  }) : null;
-};
 const linkStyles = () => ({
   linkBtn: {
     border: "none",
@@ -96,6 +40,7 @@ const Link = props => {
   } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
+  const focused = useFocused();
   const [showInput, setShowInput] = useState(false);
   const [linkData, setLinkData] = useState({
     name: "",
@@ -108,7 +53,6 @@ const Link = props => {
   const showInNewTab = element?.showInNewTab || element?.target;
   const linkType = element?.linkType;
   const classes = linkStyles();
-  const linkRef = useRef(null);
   const updateLink = data => {
     Transforms.setNodes(editor, data, {
       at: path
@@ -133,25 +77,54 @@ const Link = props => {
   const handleClose = () => {
     setShowInput(false);
   };
+  const Toolbar = () => {
+    const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
+    const navType = getLinkType(linkType, urlPath);
+    const hideOpenLink = navType === "page" || !navType;
+    return selected && focused ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
+      contentEditable: false,
+      style: {
+        width: "150px",
+        top: "100%",
+        left: "0px",
+        display: "flex"
+      },
+      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Edit",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEditLink,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    }) : null;
+  };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
-    ref: linkRef,
     children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,
       sx: classes.linkBtn,
       ...buttonProps,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {
-      urlPath: urlPath,
-      linkType: linkType,
-      showInNewTab: showInNewTab,
-      selected: selected,
-      linkRef: linkRef,
-      onEditLink: onEditLink,
-      editor: editor
-    }), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
+    }), /*#__PURE__*/_jsx(Toolbar, {}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
       onSave: ({
         linkType,

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

@@ -5,6 +5,7 @@ import { Box } from "@mui/material";
 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";

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = theme => ({
+const VariableStyles = () => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,34 +37,8 @@ const VariableStyles = theme => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
-    "& .MuiPaper-root": {
-      borderRadius: '8px',
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      marginTop: '5px',
-      "@media only screen and (max-width: 599px)": {
-        padding: '10px 0px'
-      }
-    },
-    "& .MuiList-root": {
-      padding: '0px'
-    },
-    "& .MuiButtonBase-root": {
-      margin: '6px',
-      borderRadius: '8px',
-      padding: '6px 14px',
-      fontSize: '14px',
-      fontWeight: '400',
-      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
-      "&:hover": {
-        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
-      },
-      "@media only screen and (max-width: 599px)": {
-        minHeight: '30px',
-        margin: '0px 6px'
-      }
-    },
     "& .Mui-selected": {
-      backgroundColor: 'unset !important'
+      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,15 +3,11 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
-import { useEditorContext } from "../../hooks/useMouseMove";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const {
-    theme
-  } = useEditorContext();
-  const classes = VariableStyles(theme);
+  const classes = VariableStyles();
   const editor = useSlateStatic();
   const {
     options
@@ -28,7 +24,7 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {

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

@@ -2,6 +2,8 @@ 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 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";

package/dist/Editor/Toolbar/PopupTool/AddTemplates.js

@@ -3,18 +3,17 @@ import { Grid, Tabs, Tab, CircularProgress } from "@mui/material";
 import TemplateCard from "./TemplateCard";
 import FullViewCard from "./FullViewCard";
 import ButtonTemplateCard from "./ButtonTemplatesCard";
-
-// const CATEGORIES_SORT_INDEX = {
-//   Brief: 1,
-//   Buttons: 2,
-//   Banners: 3,
-//   Tables: 4,
-//   Contract: 5,
-//   Proposal: 6,
-// };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const CATEGORIES_SORT_INDEX = {
+  Brief: 1,
+  Buttons: 2,
+  Banners: 3,
+  Tables: 4,
+  Contract: 5,
+  Proposal: 6
+};
 const Categories = props => {
   const {
     value,

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -424,9 +424,12 @@ const usePopupStyle = theme => ({
   fontFamilyListOptions: {
     "& .MuiAutocomplete-listbox": {
       padding: "0px",
-      // "&::-webkit-scrollbar-thumb": {
-      //   background: `none !important`,
-      // },
+      "&::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
       "&::-webkit-scrollbar-thumb": {
         background: `${theme?.palette?.editor?.brainPopupScroll} !important`
       },

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -14,7 +14,7 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
+// import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
 import { getPageSettings } from "../../utils/pageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,7 +36,7 @@ const TextFormat = props => {
   const {
     element: pageSt
   } = getPageSettings(editor) || {};
-  const pageSettingLine = pageSt?.pageProps?.lineHeight;
+  // const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
@@ -44,7 +44,7 @@ const TextFormat = props => {
   const {
     activeBreakPoint
   } = useEditorContext();
-  const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
+  // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -61,8 +61,12 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  let lineSpacingValue = activeMark(editor, 'lineHeight');
-  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
+
+  // let lineSpacingValue = activeMark(editor, "lineHeight");
+  // lineSpacingValue =
+  //   lineSpacingValue?.[breakpoint] !== undefined
+  //     ? lineSpacingValue
+  //     : pageSettingLine;
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -103,13 +107,11 @@ const TextFormat = props => {
       value
     });
   };
-  const handleLineSpacing = data => {
-    const [[format, value]] = Object.entries(data);
-    addMarkData(editor, {
-      format,
-      value
-    });
-  };
+
+  // const handleLineSpacing = (data) => {
+  //   const [[format, value]] = Object.entries(data);
+  //   addMarkData(editor, { format, value });
+  // };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -379,32 +381,6 @@ const TextFormat = props => {
       xs: 12,
       sx: classes.dividerGrid,
       children: /*#__PURE__*/_jsx(Divider, {})
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Line Spacing"
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        className: "typo-icons",
-        sx: classes.evenSpace,
-        children: /*#__PURE__*/_jsx(LineSpacing, {
-          value: lineSpacingValue,
-          onChange: handleLineSpacing,
-          data: {
-            key: 'lineHeight'
-          }
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.dividerGrid,
-      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/common/DnD/Draggable.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { Box } from "@mui/material";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import { SectionDragIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Draggable = props => {

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -5,6 +5,7 @@ const UploadStyles = theme => ({
     borderRadius: "11px",
     boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
     background: theme?.palette?.editor?.uploadFileBg,
+    height: '100%',
     minHeight: '150px',
     height: 'inherit'
   },

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

@@ -171,7 +171,8 @@ export default function LinkSettings(props) {
               value: navValue,
               openInNewTab: openInNewTab,
               onNewTabChange: () => setOpenInNewTab(prev => !prev),
-              services: customProps.services
+              services: customProps.services,
+              classes: classes
             })
           })]
         })

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -53,9 +53,9 @@ const usePopupStyles = theme => ({
     "& button": {
       color: theme?.palette?.editor?.textColor
     },
-    // "@media only screen and (min-width: 899px)": {
-    //   maxHeight: "400px",
-    // },
+    "@media only screen and (min-width: 899px)": {
+      maxHeight: "400px"
+    },
     "&  .orderedListIcon, .bulletedListTextIcon, .checkedListTextIcon, .accordianIconSvgTextFormat": {
       width: "20px !important"
     },

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -2,11 +2,10 @@ import { Transforms, Node, Path } from "slate";
 import { ReactEditor } from "slate-react";
 import { handleNegativeInteger } from "../../../utils/helper";
 export const ROW_HEIGHT = 50;
-
-// const MARGIN_OF = {
-//   xs: 160,
-//   lg: 490,
-// };
+const MARGIN_OF = {
+  xs: 160,
+  lg: 490
+};
 
 /**
  * This method will update the grid template rows of parent section based on height

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

@@ -25,11 +25,13 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }, {
-    label: "Line Spacing",
-    key: "lineHeight",
-    type: "lineSpacing"
-  }]
+  }
+  // {
+  //   label: "Line Spacing",
+  //   key: "lineHeight",
+  //   type: "lineSpacing",
+  // },
+  ]
 }, {
   tab: "Max Width",
   value: "maxWidth",

package/dist/Editor/commonStyle.js

@@ -438,71 +438,16 @@ const useCommonStyle = theme => ({
       width: "100%",
       "& .react-datepicker__input-container": {
         "& .MuiInputBase-root": {
-          backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
           "& .MuiInputBase-input": {
-            backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
-            color: theme?.palette?.editor?.textColor + " !important"
+            background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+            color: `${theme?.palette?.editor?.textColor} !important`
           },
           "& .MuiOutlinedInput-notchedOutline": {
-            border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder || theme?.palette?.divider} !important`,
-            borderRadius: "10px"
-          },
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: theme?.palette?.primary?.main
-          },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: theme?.palette?.primary?.dark
+            border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`
           }
         }
       }
-    },
-    "& .react-datepicker": {
-      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
-      // borderRadius: "10px",
-      border: `1px solid ${theme?.palette?.divider || "#ccc"}`,
-      boxShadow: "2px 4px 8px rgba(0, 0, 0, 0.4)",
-      color: theme?.palette?.editor?.textColor + " !important"
-    },
-    "& .react-datepicker__header": {
-      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
-      borderBottom: `1px solid ${theme?.palette?.divider || "#ddd"}`,
-      color: theme?.palette?.editor?.textColor + " !important"
-    },
-    "& .react-datepicker__day": {
-      color: theme?.palette?.editor?.textColor,
-      "&:hover": {
-        backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground,
-        color: theme?.palette?.editor?.textColor || "#fff"
-      }
-    },
-    "& .react-datepicker__current-month": {
-      color: theme?.palette?.editor?.textColor
-    },
-    "& .react-datepicker__day-name": {
-      color: theme?.palette?.editor?.textColor
-    },
-    "& .react-datepicker__day--selected": {
-      background: theme?.palette?.editor?.activeColor,
-      color: "#fff",
-      "&:hover": {
-        background: theme?.palette?.editor?.activeColor,
-        color: "#fff"
-      }
-    },
-    "& .react-datepicker__day--keyboard-selected": {
-      backgroundColor: "#bad9f1",
-      color: "#000",
-      "&:hover": {
-        backgroundColor: "#bad9f1",
-        color: "#000"
-      }
-    },
-    "& .react-datepicker__day--today": {
-      fontWeight: "bold",
-      borderBottom: `2px solid ${theme?.palette?.editor?.activeColor}`
-    },
-    "& .react-datepicker__triangle": {
-      display: "none"
     }
   },
   signaturePopUpNameField: {

package/dist/Editor/plugins/withHTML.js

@@ -9,7 +9,7 @@ const parseCopiedHTML = html => {
   const parsed = new DOMParser().parseFromString(html, "text/html");
 
   // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
-  parsed.querySelectorAll("li > ul, li > ol, li > table").forEach(list => {
+  parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
     // Find the parent li
     const parentLi = list.parentElement;
 

package/dist/Editor/utils/helper.js

@@ -756,16 +756,4 @@ export const hideSlateSelection = () => {
 };
 export function handleNegativeInteger(val) {
   return val < 0 ? 0 : val;
-}
-export const isEverythingSelected = editor => {
-  const {
-    selection
-  } = editor;
-  if (selection && Range.isExpanded(selection)) {
-    if (Range.includes(selection, Editor.start(editor, [])) && Range.includes(selection, Editor.end(editor, []))) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-};
+}

package/dist/Editor/utils/link.js

@@ -3,7 +3,7 @@ import { isBlockActive } from "./SlateUtilityFunctions";
 export const createLinkNode = (href, showInNewTab, text, linkType) => ({
   type: "link",
   href,
-  target: showInNewTab === "_blank" ? "_blank" : "_self",
+  target: showInNewTab ? "_blank" : "_self",
   linkType,
   children: [{
     text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.0.7",
+  "version": "9.1.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -69,10 +69,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files",
-    "publish:flozy": "./publish-flozy.sh",
-    "publish:flozy2": "./publish-flozy2.sh",
-    "publish:permission": "chmod +x publish-flozy.sh && chmod +x publish-flozy2.sh"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [