@flozy/editor 7.0.8 → 7.0.9

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef } from "react";
-import { Editable, Slate, ReactEditor } from "slate-react";
-import { createEditor, Transforms, Editor } from "slate";
+import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
+import { Editable, Slate, ReactEditor } from 'slate-react';
+import { createEditor, Transforms, Editor } from 'slate';
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
@@ -35,13 +35,13 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
     data: content && content?.length > 0 ? content : [{
-      type: "paragraph",
+      type: 'paragraph',
       children: [{
-        text: ""
+        text: ''
       }]
     }]
   });
-  const [value] = useState(convertedContent);
+  const [value, setValue] = useState(convertedContent);
   const debouncedValue = useRef(value);
   const debounced = useDebouncedCallback(
   // function
@@ -216,7 +216,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === "paragraph" && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === "";
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
       if (isEmpty) {
         event.preventDefault();
         return;

package/dist/Editor/CommonEditor.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
+import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
 import { createEditor, Range, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
@@ -17,7 +17,7 @@ import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
-import { Box, Typography, useTheme, IconButton } from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -26,12 +26,9 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints, getVariableValue, getBreakpointLineSpacing } from "./helper/theme";
+import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
 import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
-import { getTheme } from "./theme";
-import ThemeSettings from "./themeSettings";
-import ThemeSettingsAI from "./themeSettingsAI";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
@@ -40,10 +37,8 @@ import "./font.css";
 import "./Editor.css";
 import "animate.css";
 import FontLoader from "./common/FontLoader/FontLoader";
-import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const ThemeContext = /*#__PURE__*/createContext(null);
 const Item = /*#__PURE__*/forwardRef(({
   children,
   ...props
@@ -59,14 +54,13 @@ const Item = /*#__PURE__*/forwardRef(({
   });
 });
 Item.displayName = "Item";
-const Element = /*#__PURE__*/React.memo(props => {
+const Element = props => {
   return /*#__PURE__*/_jsx(Section, {
     ...props,
     children: getBlock(props)
   });
-});
-Element.displayName = "Element";
-const Leaf = /*#__PURE__*/React.memo(({
+};
+const Leaf = ({
   attributes,
   children,
   leaf
@@ -77,13 +71,12 @@ const Leaf = /*#__PURE__*/React.memo(({
     ...attributes,
     children: children
   });
-});
-Leaf.displayName = "Leaf";
+};
 const updateTopBanner = (content = [], setTopBanner) => {
-  // setTopBanner(() => {
-  //   const firstNode = content ? content[0] : {};
-  //   return firstNode?.type === "topbanner" ? firstNode : null;
-  // });
+  setTopBanner(() => {
+    const firstNode = content ? content[0] : {};
+    return firstNode?.type === "topbanner" ? firstNode : null;
+  });
 };
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -98,14 +91,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     otherProps,
     isIframe,
     theme,
-    showThemeButtons,
-    showViewport = false
+    showViewport = false,
+    overrideWrapperStyles = {}
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
   const convertedContent = draftToSlate({
-    data: content,
-    needLayout: otherProps?.needLayout
+    data: content
   });
   const [value, setValue] = useState(convertedContent);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -145,11 +137,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     bannerSpacing,
     pageBgImage,
-    pageColor = "",
+    pageColor,
     color: pageTextColor,
     pageWidth,
     maxWidth: pageMaxWidth,
-    theme: selectedTheme,
     lineHeight
   } = pageSt?.pageProps || {
     bannerSpacing: {
@@ -161,16 +152,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 20,
-    placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
-    theme
+    placeHolderColor: invertColor(pageColor || "#FFF"),
+    theme,
+    overrideWrapperStyles
   });
-  const [openTheme, setOpenTheme] = useState(false);
-  const [openAITheme, setOpenAITheme] = useState(false);
-  const [, setThemeUpdated] = useState(0);
-  const triggerRender = () => {
-    setThemeUpdated(prev => prev + 1); // Incrementing forces a re-render while updating theme
-  };
-
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {
     setValue(draftToSlate({
@@ -184,11 +169,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const debounced = useDebouncedCallback(
   // function
   value => {
-    debouncedValue.current = value;
     const {
       value: strVal,
       ...restVal
     } = getOnSaveData(value);
+    debouncedValue.current = value;
     onSave(strVal, restVal);
   },
   // delay in ms
@@ -199,7 +184,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serializeToText(title?.children) || ""
+      title: serializeToText(title?.children) || "Untitled"
     };
   };
   const getPreviewImage = async (needBackground = false, options = {}) => {
@@ -298,12 +283,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     redo() {
       editor?.redo();
     },
-    toggleTheme() {
-      setOpenTheme(!openTheme);
-    },
-    toggleAITheme() {
-      setOpenAITheme(!openAITheme);
-    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
@@ -335,7 +314,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       updateTopBanner(newValue, setTopBanner);
       debounced(newValue);
       if (!isInteracted) {
-        // setIsInteracted(true);
+        setIsInteracted(true);
       }
     }
   };
@@ -479,7 +458,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
-  const themeProps = getTheme(selectedTheme);
 
   // const handleContextMenu = (e) => {
   //   if (!readOnly) {
@@ -509,30 +487,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       console.log("handleCursorScroll", err);
     }
   };
-  return /*#__PURE__*/_jsxs(EditorProvider, {
+  return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
-    openTheme: openTheme,
-    setOpenTheme: setOpenTheme,
-    triggerRender: triggerRender,
-    children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
-      className: "theme-buttons",
-      children: [/*#__PURE__*/_jsx(IconButton, {
-        onClick: () => setOpenTheme(true),
-        children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
-      }), /*#__PURE__*/_jsx(IconButton, {
-        onClick: () => setOpenAITheme(true),
-        style: {
-          marginTop: "4px"
-        },
-        children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
-      })]
-    }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
+    children: /*#__PURE__*/_jsx(DialogWrapper, {
       classes: classes,
       ...props,
       fullScreen: fullScreen,
       footer: footer || "",
-      selectedTheme: selectedTheme,
       children: /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
@@ -562,7 +524,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
-                  sx: themeProps?.sxProps || {},
                   "data-info": outsideEditorClickLabel,
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
@@ -629,15 +590,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     "data-info": outsideEditorClickLabel,
                     onClick: handleFooterClick,
                     children: footer
-                  }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
-                    open: openTheme,
-                    setOpen: setOpenTheme,
-                    editor: editor,
-                    services: otherProps?.services
-                  }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
-                    openAITheme: openAITheme,
-                    setOpenAITheme: setOpenAITheme,
-                    onSaveTheme: otherProps?.onSaveTheme
                   })]
                 })
               }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
@@ -646,9 +598,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
-                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })
@@ -660,7 +611,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           })]
         }, id)
       })
-    })]
+    })
   });
 });
 CommonEditor.displayName = "CommonEditor";

package/dist/Editor/DialogWrapper.js

@@ -2,7 +2,6 @@ import React from "react";
 import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import ViewportStimulator from "./common/RnD/Theme/ViewportStimulator";
-import MainThemeProvider from "./common/RnD/Theme/MainThemeProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -10,45 +9,40 @@ const DialogWrapper = props => {
     fullScreen,
     onClose,
     children,
-    classes,
-    selectedTheme
+    classes
   } = props;
-  return fullScreen ? /*#__PURE__*/_jsx(MainThemeProvider, {
-    userSelectedTheme: selectedTheme,
-    children: /*#__PURE__*/_jsxs(Dialog, {
-      className: `dialogComp`,
-      open: fullScreen,
-      fullScreen: fullScreen,
-      onClose: onClose,
+  return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
+    className: `dialogComp`,
+    open: fullScreen,
+    fullScreen: fullScreen,
+    onClose: onClose,
+    style: {
+      zIndex: 1000
+    },
+    sx: classes.fullScreenWrapper,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
       style: {
-        zIndex: 1000
+        padding: "6px 8px"
       },
-      sx: classes.fullScreenWrapper,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        style: {
-          padding: "6px 8px"
-        },
+      children: /*#__PURE__*/_jsx(Grid, {
         children: /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Grid, {
+          style: {
+            display: "flex",
+            justifyContent: "end"
+          },
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onClose,
             style: {
-              display: "flex",
-              justifyContent: "end"
+              background: "rgba(255,255,255,0.5)"
             },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: onClose,
-              style: {
-                background: "rgba(255,255,255,0.5)"
-              },
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
-            })
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
           })
         })
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: children
-      })]
-    })
+      })
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: children
+    })]
   }) : /*#__PURE__*/_jsx(ViewportStimulator, {
-    selectedTheme: selectedTheme,
     children: children
   });
 };

package/dist/Editor/Editor.css

@@ -1263,19 +1263,6 @@ blockquote {
   pointer-events: auto;
 }
 
-@media (max-width: 899px) {
-  .MuiPopover-root {
-    z-index: 1302 !important;
-  }
-  canvas {
-    max-width: 100% !important;
-  }
-}
-
-.settingsHeader {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-}
 .hideScroll {
   overflow-anchor: none;
 }
@@ -1291,6 +1278,21 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
+@media (max-width: 899px) {
+  /* Qa validation required */
+    /* .MuiPopover-root {
+      z-index: 1302 !important;
+  } */
+
+  canvas {
+    max-width: 100% !important;
+  }
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
 
 .custom-scroll::-webkit-scrollbar {
   height: .6rem; 
@@ -1337,22 +1339,4 @@ code.markcode {
   display: block;
   background-color: #f3f3f3;
   font-family: 'Source Code Pro' !important;
-}
-
-/* Hide the popper when the reference is hidden */
-.hide-popper-on-overlap[data-popper-escaped],
-.hide-popper-on-overlap[data-popper-reference-hidden] {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.theme-buttons {
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  margin: auto;
-  position: absolute;
-  top: 60px;
-  right: 20px;
-  z-index: 1000;
-}
+}

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -265,7 +265,7 @@ function AppHeader(props) {
               style: {
                 display: "inline-flex",
                 alignItems: "center",
-                color: textColor || "#000000",
+                color: textColor,
                 fontSize: logoFontSize,
                 fontFamily: titleFontFamily,
                 justifyContent: isLogoRight ? "end" : "start"
@@ -320,7 +320,7 @@ function AppHeader(props) {
                     fontFamily: fontFamily,
                     textTransform: "none",
                     fontSize: fontSize || "16px",
-                    color: textColor || "#000",
+                    color: textColor || "#FFF",
                     background: bgColor || "none",
                     "& .m-settings": {
                       display: "none",
@@ -335,7 +335,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

@@ -9,8 +9,6 @@ import { WorkflowIcon } from "../../common/iconslist";
 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 Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import useCommonStyle from "../../commonStyle";
@@ -40,12 +38,6 @@ const EditorButton = props => {
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
   const classes = useCommonStyle(appTheme);
-  const {
-    theme: selectedTheme
-  } = useEditorTheme();
-  const {
-    buttonTheme
-  } = getTheme(selectedTheme);
   const {
     label,
     bgColor,
@@ -59,7 +51,7 @@ const EditorButton = props => {
     fontFamily,
     textColorHover,
     bgColorHover,
-    // buttonIcon,
+    buttonIcon,
     iconPosition = "start",
     borderStyle,
     borderWidth,
@@ -80,7 +72,6 @@ const EditorButton = props => {
   };
   const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
   const refURl = isTrigger ? buttonLink?.url : url;
-  const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
   const BtnIcon = buttonIcon ? buttonIcon : null;
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
@@ -171,7 +162,6 @@ const EditorButton = props => {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
                 marginBottom: "0px !important",
-                ...classes.buttonMoreOption,
                 ...classes.buttonMoreOption3
               },
               ...btnProps,
@@ -263,14 +253,19 @@ const EditorButton = props => {
           display: "inline-block"
         },
         children: [/*#__PURE__*/_jsxs(Box, {
-          className: `btn textAlign-${tAlign} button theme-element`,
           ref: buttonRef,
+          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",
@@ -279,22 +274,11 @@ 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 ? `${textColor} !important` : "#FFFFFF",
-            fontSize: textSize ? `${textSize}px !important` : "inherit",
-            fontFamily: fontFamily ? `${fontFamily}  !important` : "PoppinsRegular",
-            background: `${bgColor} !important`,
-            borderColor: `${borderColor} !important`,
-            borderRadius: {
-              ...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
-            },
-            padding: {
-              ...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
             }
           },
           ...buttonProps,

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -1,15 +1,11 @@
 import React, { useState } from "react";
-import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
+import { Box, IconButton, Popover } from "@mui/material";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
-import { useSlateStatic } from "slate-react";
-import { Transforms } from "slate";
-import { useEditorContext } from "../../hooks/useMouseMove";
 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) {
@@ -114,18 +110,12 @@ const ColorButtons = props => {
     openColorTool,
     onClose,
     onColorPickerClick,
-    disableEditTheme,
     defaultColors = []
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const firstRow = defaultColors?.length ? defaultColors : row1;
-  const theme = useTheme();
-  const editor = useSlateStatic();
-  const {
-    setOpenTheme
-  } = useEditorContext();
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -138,7 +128,6 @@ const ColorButtons = props => {
   const handleSelect = color => () => {
     onSelect(color);
   };
-  const colorVars = theme?.vars?.colors || {};
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
@@ -155,7 +144,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,
@@ -169,39 +158,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 colours"
-            }), 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,
@@ -210,18 +169,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]
     })]
   });
 };