@flozy/editor 5.5.7 → 5.5.8

package/dist/Editor/Styles/EditorStyles.js

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

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

@@ -2,8 +2,6 @@ import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
 import { toggleBlock, isBlockActive, isMarkActive, toggleMark } from "../../utils/SlateUtilityFunctions.js";
-import usePopupStyle from "../PopupTool/PopupToolStyle";
-import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MARK_TYPES = ["doublequote"];
 const BlockButton = props => {
@@ -14,10 +12,6 @@ const BlockButton = props => {
   } = props;
   const isMark = MARK_TYPES?.indexOf(format) >= 0;
   const isActive = isMark ? isMarkActive(editor, format) : isBlockActive(editor, format);
-  const {
-    theme
-  } = useEditorContext();
-  const classes = usePopupStyle(theme);
   return /*#__PURE__*/_jsx(Button, {
     active: isActive,
     format: format,
@@ -30,10 +24,6 @@ const BlockButton = props => {
       }
     },
     title: title,
-    sx: classes.textAlignButtons,
-    style: {
-      color: "#64748B"
-    },
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   classes,
@@ -23,18 +23,23 @@ const Dropdown = ({
     value: value,
     className: "editor-dd",
     onChange: e => changeMarkData(e, format),
+    style: {
+      fontFamily: fontFamilyMap[value],
+      width: width || "100%",
+      height: "36px",
+      borderRadius: "10px",
+      fontSize: "12px"
+    },
     MenuProps: {
       PaperProps: {
         sx: classes?.textOptions
       }
     },
-    sx: classes.textFormatSelect,
-    IconComponent: KeyboardArrowDownRoundedIcon,
-    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem
-    // style={{ fontFamily: item.text }}
-    , {
+    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+      style: {
+        fontFamily: item.text
+      },
       value: item.value,
-      sx: classes.textFormatSelectOptions,
       children: item.text
     }, index))
   });

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

@@ -1,9 +1,6 @@
 import React from "react";
 import { Autocomplete, TextField } from "@mui/material";
 import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
-import usePopupStyle from "../PopupTool/PopupToolStyle.js";
-import { useEditorContext } from "../../hooks/useMouseMove.js";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const FontFamilyAutocomplete = ({
   editor,
@@ -30,21 +27,17 @@ const FontFamilyAutocomplete = ({
       });
     }
   };
-  const {
-    theme
-  } = useEditorContext();
-  const classes = usePopupStyle(theme);
   return /*#__PURE__*/_jsx(Autocomplete, {
     size: "small",
     style: {
       fontFamily: `${value || ""}`,
-      width: width || "100%"
+      width: width || "100%",
+      height: "36px",
+      borderRadius: "10px",
+      fontSize: "14px"
     },
     value: value || options?.[0],
     className: "editor-dd",
-    sx: {
-      ...classes.autoCompleteaFontFamily
-    },
     onChange: (e, newValue) => changeMarkData(e, newValue, format),
     getOptionLabel: option => {
       return option;
@@ -60,14 +53,6 @@ const FontFamilyAutocomplete = ({
         children: option
       });
     },
-    slotProps: {
-      popper: {
-        sx: {
-          ...classes.fontFamilyListOptions
-        }
-      }
-    },
-    popupIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     renderInput: params => /*#__PURE__*/_jsx(TextField, {
       sx: {
         "& .MuiInputBase-root.MuiOutlinedInput-root": {
@@ -76,13 +61,6 @@ const FontFamilyAutocomplete = ({
       },
       ...params
     })
-    // componentsProps={{
-    //     clearIndicator: {
-    //       style: { display: 'none' },
-    //     },
-    //   }}
-    ,
-    disableClearable: true
   });
 };
 export default FontFamilyAutocomplete;

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

@@ -16,9 +16,6 @@ const MarkButton = ({
       toggleMark(editor, format);
     },
     title: title,
-    style: {
-      color: "#64748B"
-    },
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

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

@@ -2,12 +2,10 @@ 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 { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
 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";
@@ -95,6 +93,8 @@ const TextSize = ({
       inputProps: {
         style: {
           width: fullWidth ? "100%" : "30px",
+          // textAlign: "center",
+          height: "19px",
           fontSize: "12px"
         }
       },
@@ -108,11 +108,11 @@ const TextSize = ({
           children: [/*#__PURE__*/_jsx(IconButton, {
             onClick: onIncreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextSizeUpArrow, {})
+            children: /*#__PURE__*/_jsx(TextPlusIcon, {})
           }), /*#__PURE__*/_jsx(IconButton, {
             onClick: onDecreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextSizeDownArrow, {})
+            children: /*#__PURE__*/_jsx(TextMinusIcon, {})
           })]
         })
       }

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -19,9 +19,9 @@ const POPUP_TYPES = {
   addTemplate: AddTemplates
 };
 const POPUP_OFFSETS = {
-  textFormat: [75, 5],
-  addElement: [40, 5],
-  addTemplate: [10, 5]
+  textFormat: [80, 5],
+  addElement: [60, 5],
+  addTemplate: [20, 5]
 };
 const FULLSCREEN_POPUP = {
   addTemplate: true
@@ -139,17 +139,14 @@ const MiniToolbar = props => {
         icon: Icon
       }) => {
         const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
-        const isFocussed = editor?.selection?.anchor?.path;
-        const disableAddElement = type === "addElement" && !isFocussed;
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""} ${type === "undo" ? canUndo ? "activeUndo" : "disabledUndo" : type === "redo" ? canRedo ? "activeRedo" : "disabledRedo" : ""} ${disableAddElement ? "disableAddElement" : ""}
-                `,
+            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""} ${type === "undo" ? canUndo ? "activeUndo" : "disabledUndo" : type === "redo" ? canRedo ? "activeRedo" : "disabledRedo" : ""}`,
             onClick: handleClick(type),
-            disabled: isDisabled || disableAddElement,
+            disabled: isDisabled,
             children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
               from: "miniToolBar",
               icoBtnType: "mini",
@@ -183,6 +180,9 @@ const MiniToolbar = props => {
       }],
       children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
         className: "papper-wrpr",
+        style: {
+          borderRadius: "10px"
+        },
         children: [/*#__PURE__*/_jsx(PopperHeader, {
           title: POPUP_TITLE[popper],
           classes: popupStyles,

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -39,10 +39,7 @@ const miniToolbarStyles = theme => ({
         },
         "&.active": {
           "& svg": {
-            stroke: theme?.palette?.editor?.activeColor,
-            "& path": {
-              stroke: theme?.palette?.editor?.activeColor
-            }
+            stroke: theme?.palette?.editor?.activeColor
           }
         },
         "&.activeUndo": {
@@ -79,11 +76,6 @@ const miniToolbarStyles = theme => ({
               stroke: theme?.palette?.editor?.svgStrokeDisabled
             }
           }
-        },
-        "&.disableAddElement": {
-          "& svg": {
-            stroke: theme?.palette?.editor?.svgStrokeDisabled
-          }
         }
       }
     }

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/InfinityAITool.js

@@ -1,12 +1,8 @@
 import { Box, IconButton } from "@mui/material";
 import Icon from "../../../common/Icon";
 import { useEditorContext } from "../../../hooks/useMouseMove";
-import { getSelectedText } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
-function InfinityAITool(props) {
-  const {
-    editor
-  } = props;
+function InfinityAITool() {
   const {
     setOpenAI
   } = useEditorContext();
@@ -14,8 +10,8 @@ function InfinityAITool(props) {
     component: "div",
     children: /*#__PURE__*/_jsx(IconButton, {
       onClick: () => {
-        const text = getSelectedText(editor);
-        if (text && text.trim()) {
+        const text = window.getSelection().toString().trim();
+        if (text) {
           setOpenAI("fromToolBar");
         }
       },

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -1,4 +1,4 @@
-import { Fade, Grid, IconButton, Paper, Popper } from "@mui/material";
+import { Button, Fade, Grid, Paper, Popper } from "@mui/material";
 import SelectTypography from "./SelectTypography";
 import SelectList from "./SelectList";
 import { toolbarGroups } from "../../toolbarGroups";
@@ -50,9 +50,7 @@ const MiniTextFormat = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs("div", {
         className: "toolWrapper",
-        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {
-          editor: editor
-        }), /*#__PURE__*/_jsx(SelectTypography, {
+        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
           closeMainPopup: closeMainPopup
@@ -97,9 +95,9 @@ const MiniTextFormat = props => {
           active: isBlockActive(editor, link.format),
           editor: editor,
           customProps: customProps
-        }, link.id), /*#__PURE__*/_jsx(IconButton, {
+        }, link.id), /*#__PURE__*/_jsx(Button, {
           onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
-          className: `textSettingsIcon ${open ? "btnActive" : ""}`,
+          className: "textSettingsIcon",
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {
           id: id,

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

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
-import { Grid, Typography, IconButton, Tooltip, TextField, InputAdornment } from "@mui/material";
+import { Grid, Typography, IconButton, Tooltip, TextField } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import Icon from "../../common/Icon";
-import { ToggleFullScreenIcon } from "../../common/iconListV2";
-import { SearchIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SearchBox = props => {
@@ -17,13 +16,7 @@ const SearchBox = props => {
     sx: classes.searchBox,
     size: "small",
     value: search,
-    onChange: handleChange,
-    InputProps: {
-      startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-        position: "start",
-        children: /*#__PURE__*/_jsx(SearchIcon, {})
-      })
-    }
+    onChange: handleChange
   });
 };
 const PopperHeader = props => {
@@ -46,14 +39,18 @@ const PopperHeader = props => {
     padding: 2,
     className: "headerContainer",
     style: {
-      paddingTop: "5px"
+      paddingTop: "2px"
     },
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
+      style: {
+        display: "flex",
+        borderBottom: "1px solid #DCE4EC"
+      },
       justifyContent: "space-between",
       alignItems: "center",
-      sx: classes.textSettingHeader,
+      className: "textSettingHeader",
       children: [/*#__PURE__*/_jsx(Typography, {
         color: "primary",
         sx: {
@@ -67,14 +64,13 @@ const PopperHeader = props => {
         justifyContent: "end",
         children: [needFullscreen ? /*#__PURE__*/_jsxs(Grid, {
           sx: {
-            position: "relative"
+            position: 'relative'
           },
-          className: "inputField",
           children: [/*#__PURE__*/_jsx(IconButton, {
-            className: openSearch ? "searchContainer" : "",
+            className: openSearch ? 'searchContainer' : '',
             onClick: handleSearchButton,
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: openSearch ? "closeIcon" : "SearchIcon"
+              icon: openSearch ? 'closeIcon' : 'SearchIcon'
             })
           }), openSearch && /*#__PURE__*/_jsx(SearchBox, {
             classes: classes,
@@ -87,11 +83,11 @@ const PopperHeader = props => {
           children: /*#__PURE__*/_jsx(IconButton, {
             style: {
               marginRight: "8px",
-              marginLeft: "4px"
+              marginLeft: "8px"
             },
-            className: "close-popupbtn toogleFullScreenBtn",
+            className: "close-popupbtn",
             onClick: toggleFullscreen,
-            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(ToggleFullScreenIcon, {})
+            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(OpenInFullIcon, {})
           })
         }) : null, /*#__PURE__*/_jsx(Tooltip, {
           title: "Close",