@flozy/editor 5.4.7 → 5.4.9

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

@@ -25,7 +25,8 @@ const FreeGridBox = props => {
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
-    readOnly
+    readOnly,
+    hideTools
   } = customProps;
   const {
     updated_at,
@@ -147,12 +148,13 @@ const FreeGridBox = props => {
     }
   };
   const repeatTimes = Math.floor(height / ROW_HEIGHT);
+  const sectionTypeOptions = (itemOptions?.box || []).filter(f => (hideTools || []).indexOf(f) === -1);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
     className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
     editor: editor,
     path: path,
-    actions: itemOptions?.box,
+    actions: sectionTypeOptions,
     settingsProps: {
       settings: "freegridBoxItem",
       onChange: onChangeSettings,

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

@@ -171,7 +171,6 @@ const useFreeGridStyles = ({
           height: "100%",
           "& .signature-container": {
             height: "100%",
-            LineHeight: 1.43,
             "& .signature-btn-container": {
               height: "100%",
               display: "flex",

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

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

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

@@ -49,7 +49,6 @@ 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/SimpleText/index.js

@@ -5,7 +5,6 @@ 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";
@@ -21,8 +20,7 @@ const SimpleText = props => {
     attributes,
     children,
     customProps,
-    isEmpty,
-    isChatEditor = false
+    isEmpty
   } = props;
   const {
     readOnly,
@@ -34,18 +32,12 @@ 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",
-    lineHeight: lineH
+    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
-  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty && !isChatEditor;
+  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
   const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
   const opacity = !isTextSelected(editor?.selection);
   const nextType = element?.children[0]?.type;

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

@@ -1,12 +1,10 @@
 import { invertColor } from "../../helper";
 const SimpleTextStyle = ({
-  pageColor,
-  lineHeight
+  pageColor
 }) => ({
   root: {
     position: "relative",
     padding: "0px",
-    lineHeight: lineHeight,
     "&.dataView": {
       "& .placeholder-simple-text": {
         opacity: 0
@@ -35,8 +33,6 @@ 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/Toolbar/Mini/MiniToolbar.js

@@ -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",

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

@@ -79,11 +79,6 @@ const miniToolbarStyles = theme => ({
               stroke: theme?.palette?.editor?.svgStrokeDisabled
             }
           }
-        },
-        "&.disableAddElement": {
-          "& svg": {
-            stroke: theme?.palette?.editor?.svgStrokeDisabled
-          }
         }
       }
     }

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

@@ -185,11 +185,6 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       borderRadius: "10px !important",
       transition: "background-color 0.3s ease",
-      // "& .colorBoxElementIcon": {
-      //   "& path": {
-      //     fill: theme?.palette?.type === "dark" ? "none" : "",
-      //   },
-      // },
       "& .signatureElementIcon": {
         "& path": {
           fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
@@ -416,11 +411,6 @@ const usePopupStyle = theme => ({
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
-    '& .MuiInputBase-root': {
-      '& input': {
-        border: "none !important"
-      }
-    },
     "& svg": {
       width: "20px",
       height: "24px"
@@ -939,7 +929,8 @@ const usePopupStyle = theme => ({
   },
   colorPopper: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      background: `${theme?.palette?.editor?.miniToolBarBackground}`,
       borderRadius: "7px !important",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"

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

@@ -14,8 +14,6 @@ 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 { getPageSettings } from "../../utils/pageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -33,18 +31,10 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-  const {
-    element: pageSt
-  } = getPageSettings(editor) || {};
-  const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
-  const {
-    activeBreakPoint
-  } = useEditorContext();
-  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 +51,6 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  let lineSpacingValue = activeMark(editor, 'lineHeight');
-  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -103,13 +91,6 @@ const TextFormat = props => {
       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 +360,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/assets/svg/PlusIcon.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PlusIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "18",
-    height: "18",
+    width: "22",
+    height: "22",
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -41,9 +41,9 @@ const FontLoader = props => {
             // Retry loading the same batch
             loadNextBatch();
           } else {
-            // console.log(
-            //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
-            // );
+            console.log(
+              // `Max retries reached for batch: ${batch}. Moving to the next batch.`
+            );
             currentIndex += batchSize;
             retryCount = 0; // Reset retry count for the next batch
             loadNextBatch();
@@ -67,7 +67,7 @@ const FontLoader = props => {
         });
         loadFontsInBatches(families);
       }).catch(err => {
-        // console.log(err);
+        console.log(err);
       });
     } else {
       function correctFontArray(fontString) {

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

@@ -3,7 +3,6 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
-    // padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
     overflow: "hidden",
     // padding: "8px 0px !important",

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -62,7 +62,6 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
-            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -3,35 +3,24 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange,
-    show
+    onChange
   } = props;
   const classes = useSwitchViewport();
-  const {
-    setSelectedElement,
-    setActiveBreakPoint
-  } = useEditorContext();
   useEffect(() => {
-    // to reset selection on viewport changes - FS-6589
-    setSelectedElement({});
+    console.log(breakpoint);
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
-    style: {
-      display: show ? "block" : "none"
-    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -41,7 +30,6 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

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

@@ -1,6 +1,5 @@
 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,
@@ -76,7 +75,7 @@ const reRenderChildNodes = (editor, path) => {
     console.log(err);
   }
 };
-function isContainerElement(editor, moveTopath, props, appenBp) {
+function isContainerElement(editor, moveTopath, props) {
   try {
     const {
       path,
@@ -92,7 +91,6 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
       parentNode = Node.get(editor, Path.parent(dragItemPath));
     }
     const moveToNode = Node.get(editor, moveTopath);
-    const leftOfMoveToNode = moveToNode[`left${appenBp}`];
     if (moveToNode.type === "freegridBox") {
       if (parentNode.type === "freegridBox") {
         // same box
@@ -100,10 +98,10 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
           return props.calX;
         } else {
           // for different box
-          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
+          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
         }
       } else {
-        return props.calX - leftOfMoveToNode;
+        return props.calX - moveToNode?.left;
       }
     } else if (moveToNode.type === "freegrid") {
       if (parentNode.type === "freegridBox") {
@@ -135,16 +133,14 @@ export function onDropItem(props, parentClass) {
     const from = parentPath.split("|").map(m => parseInt(m));
     let newPath = [];
     newPath = moveTo;
-    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
-    const cCalx = isContainerElement(editor, moveTo, props, appenBp);
-
+    const cCalx = isContainerElement(editor, moveTo, props);
     // const posX = parseInt(
     //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
     // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();
-    const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
+    const y = endPosition.y - startPosition.diffY - rect.top;
 
     // Calculate grid position
     const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -154,6 +150,7 @@ export function onDropItem(props, parentClass) {
 
     // Update grid area
     const gridArea = `${row} / 1 / ${row + 1} / 2`;
+    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
     Transforms.setNodes(editor, {
       [`gridArea${appenBp}`]: gridArea,
       [`left${appenBp}`]: cCalx,

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -73,11 +73,6 @@ const BackgroundImage = props => {
             children: "REMOVE"
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              padding: 0,
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/common/StyleBuilder/fieldTypes/card.js

@@ -1,7 +1,6 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,10 +15,7 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px",
-      '& .MuiCheckbox-root svg': {
-        fill: 'unset !important'
-      }
+      padding: "10px"
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -85,9 +81,6 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
-  const {
-    theme
-  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -106,8 +99,7 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        background: theme?.palette?.editor?.miniToolBarBackground,
-        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -18,7 +18,6 @@ import FontSize from "./fontSize";
 import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
-import LineSpacing from "./lineSpacing";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -39,7 +38,6 @@ const FieldMap = {
   fontSize: FontSize,
   selectSwitch: SelectSwitch,
   card: CardsMapping,
-  metadatamapping: MetaDataMapping,
-  lineSpacing: LineSpacing
+  metadatamapping: MetaDataMapping
 };
 export default FieldMap;

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

@@ -25,10 +25,6 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }, {
-    label: "Line Spacing",
-    key: "lineHeight",
-    type: "lineSpacing"
   }]
 }, {
   tab: "Max Width",

package/dist/Editor/common/Uploader.js

@@ -4,7 +4,6 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
-import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,9 +18,6 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
-  const {
-    theme
-  } = useEditorContext();
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -103,10 +99,6 @@ const Uploader = props => {
           className: "uploadImageSection",
           children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/commonStyle.js

@@ -205,7 +205,7 @@ const useCommonStyle = theme => ({
   colorPickerPopup: {
     "& .MuiPaper-root": {
       overflow: "auto",
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .popup_tabs": {
       backgroundColor: theme?.palette?.editor?.background,
@@ -221,7 +221,7 @@ const useCommonStyle = theme => ({
       }
     },
     "& .colorpicker": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .default-color-panel": {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, 20px)",
@@ -239,11 +239,11 @@ const useCommonStyle = theme => ({
       }
     },
     "& .color-picker-panel": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .input_rgba": {
       "& input": {
-        backgroundColor: theme?.palette?.editor?.background,
+        backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
         color: theme?.palette?.editor?.textColor
       }
     }
@@ -464,6 +464,10 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -476,10 +480,6 @@ const useCommonStyle = theme => ({
       }
     }
   },
-  pageSettingPopUpRoot: {
-    padding: "16px 8px 16px 10px!important",
-    height: "100%"
-  },
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,