@flozy/editor 3.9.0 → 3.9.1

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
 import { Transforms } from "slate";
-import ColorPickerTool from "react-gcolor-picker";
 import { IconButton, Tooltip, Box, Popover } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import ColorButtons from "./ColorButtons";
@@ -9,6 +8,7 @@ import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import CustomColorPicker from "../../common/CustomColorPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -95,10 +95,10 @@ const ColorPicker = props => {
         horizontal: "top"
       },
       sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+      children: /*#__PURE__*/_jsx(CustomColorPicker, {
         gradient: true,
-        value: activeColor,
-        onChange: handleFormSubmit
+        onChange: handleFormSubmit,
+        color: activeColor
       })
     })]
   });

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

@@ -15,7 +15,8 @@ const ColorPickerStyles = theme => ({
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      '@media only screen and (max-width: 600px)': {
+      padding: "4px 14px",
+      "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     }

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

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsx(RadioGroup, {
+          children: /*#__PURE__*/_jsxs(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: /*#__PURE__*/_jsx(FormControlLabel, {
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            })
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "after",
+              label: "After",
+              onChange: () => {
+                setSchedule("after");
+              },
+              control: /*#__PURE__*/_jsx(Radio, {
+                size: "small"
+              })
+            })]
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

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

@@ -39,7 +39,8 @@ const UserInputs = props => {
           fontStyleOptions: ['underline'],
           hideLink: true,
           hideTextColor: true
-        }
+        },
+        theme: theme
       })
     })
   });

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { Transforms, Path } from "slate";
+import { Transforms, Path, Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -15,6 +15,7 @@ import { gridItem } from "../../utils/gridItem";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import useWindowResize from "../../hooks/useWindowResize";
+import { useTheme } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,11 +30,16 @@ const GridToolBar = ({
   onAddGridItem,
   onAddSection,
   onMoveSection,
-  path
+  path,
+  isSectionFullWidth
 }) => {
   return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
     className: "grid-container-toolbar",
     contentEditable: false,
+    style: isSectionFullWidth ? {
+      right: "4px",
+      top: "4px"
+    } : {},
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Grid Settings",
       arrow: true,
@@ -74,7 +80,19 @@ const GridToolBar = ({
     }) : null]
   }) : null;
 };
+const getParentEl = (editor, path) => {
+  try {
+    if (path?.length) {
+      return Node.parent(editor, path);
+    } else {
+      return null;
+    }
+  } catch (err) {
+    return null;
+  }
+};
 const Grid = props => {
+  const theme = useTheme();
   const {
     attributes,
     children,
@@ -113,6 +131,11 @@ const Grid = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [size] = useWindowResize();
+  const parentElement = getParentEl(editor, path);
+  const {
+    sectionGridSize
+  } = parentElement || {};
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -327,7 +350,8 @@ const Grid = props => {
         onAddGridItem: onAddGridItem,
         onAddSection: onAddSection,
         onMoveSection: onMoveSection,
-        path: path
+        path: path,
+        isSectionFullWidth: isSectionFullWidth
       })]
     }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
       element: element,

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

@@ -8,6 +8,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { isEmptyNode } from "../../utils/helper";
+import { useTheme } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItemToolbar = ({
@@ -34,6 +35,7 @@ const GridItemToolbar = ({
   }) : null;
 };
 const GridItem = props => {
+  const theme = useTheme();
   const {
     attributes,
     children,
@@ -119,7 +121,7 @@ const GridItem = props => {
         xs: xsHidden ? "none" : "flex"
       },
       flexDirection: flexDirection || "column",
-      background: bgColor || "transparent",
+      background: bgColor,
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderRadius: {

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

@@ -9,6 +9,7 @@ import { removeLink } from "../../utils/link";
 import LinkPopup from "./LinkPopup";
 import "./styles.css";
 import { absoluteLink } from "../../utils/helper";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = props => {
@@ -29,6 +30,9 @@ const Link = props => {
   const path = ReactEditor.findPath(editor, element);
   const urlPath = element.url || element.href;
   const absLink = absoluteLink(urlPath);
+  const {
+    theme
+  } = useEditorContext();
   const updateLink = () => {
     Transforms.setNodes(editor, {
       href: linkData?.url,
@@ -107,7 +111,8 @@ const Link = props => {
       linkData: linkData,
       handleClose: handleClose,
       handleInputChange: handleInputChange,
-      handleInsertLink: updateLink
+      handleInsertLink: updateLink,
+      theme: theme
     })]
   });
 };

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

@@ -9,7 +9,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
   const {
-    editor
+    editor,
+    theme
   } = props;
   const linkInputRef = useRef(null);
   const [showInput, setShowInput] = useState(false);
@@ -77,7 +78,8 @@ const LinkButton = props => {
       linkData: linkData,
       handleClose: handleClose,
       handleInputChange: handleInputChange,
-      handleInsertLink: handleInsertLink
+      handleInsertLink: handleInsertLink,
+      theme: theme
     })]
   });
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import LinkPopupStyles from "./LinkPopupStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkPopup = props => {
@@ -9,8 +10,11 @@ const LinkPopup = props => {
     handleClose,
     linkData,
     handleInputChange,
-    handleInsertLink
+    handleInsertLink,
+    theme
   } = props;
+  const themeType = localStorage.getItem("themeType");
+  const classes = LinkPopupStyles(themeType);
   return /*#__PURE__*/_jsxs(Dialog, {
     fullWidth: true,
     open: open,
@@ -44,13 +48,15 @@ const LinkPopup = props => {
         style: {
           paddingTop: "12px"
         },
+        className: classes.titleTypo,
         children: /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           value: linkData?.name,
           name: "name",
           placeholder: "Link Title",
-          onChange: handleInputChange
+          onChange: handleInputChange,
+          sx: classes.addLinkField
         })
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -64,7 +70,8 @@ const LinkPopup = props => {
           name: "url",
           value: linkData?.url,
           placeholder: "https://google.com",
-          onChange: handleInputChange
+          onChange: handleInputChange,
+          sx: classes.addLinkField
         })
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,

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

@@ -0,0 +1,28 @@
+const LinkPopupStyles = themeType => ({
+  addLinkField: {
+    "& .MuiOutlinedInput-input": {
+      fontSize: "12px",
+      fontWeight: 500,
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
+    },
+    "& .MuiFormHelperText-root": {
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
+    },
+    "& .MuiOutlinedInput-root": {
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
+      borderRadius: "7px",
+      "& fieldset": {
+        borderColor: "#D8DDE1"
+      },
+      "&:hover fieldset": {
+        borderColor: "#64748B"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#2563EB"
+      },
+      "& .MuiFormLabel-root": {}
+    }
+  }
+});
+export default LinkPopupStyles;

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { useSlateStatic } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
-import { PageSettings } from "../../common/iconslist";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
+import SettingsIcon from "../../assets/svg/SettingsIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,13 +45,13 @@ const PageSettingsButton = props => {
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
+    children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(SettingsIcon, {
       onClick: onSettings,
       className: "removeDefaultSvgCls"
     }) : /*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Page Settings",
       onClick: onSettings,
-      icon: /*#__PURE__*/_jsx(PageSettings, {}),
+      icon: /*#__PURE__*/_jsx(SettingsIcon, {}),
       icoBtnType: icoBtnType
     }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
       element: openSetttings?.element || {},

package/dist/Editor/Elements/Redo/RedoButton.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { useSlateStatic } from "slate-react";
+import RedoIcon from "../../assets/svg/RedoIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RedoButton = () => {
+  const editor = useSlateStatic();
+  const onRedo = () => {
+    editor?.redo();
+  };
+  return /*#__PURE__*/_jsx(RedoIcon, {
+    onClick: onRedo
+  });
+};
+export default RedoButton;

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

@@ -263,7 +263,12 @@ const SignaturePopup = props => {
                     name: "signedBy",
                     placeholder: "Enter Name",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#ccc'
+                      }
+                    }
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -311,7 +316,8 @@ const SignaturePopup = props => {
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   style: {
-                    marginRight: "8px"
+                    marginRight: "8px",
+                    minWidth: '44px'
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
@@ -326,7 +332,12 @@ const SignaturePopup = props => {
                     name: "signedByEmail",
                     placeholder: "Enter Email",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#ccc'
+                      }
+                    }
                   })
                 })]
               })]

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

@@ -1,4 +1,4 @@
-const TableStyles = () => ({
+const TableStyles = themeType => ({
   tableToolBar: {
     position: "absolute",
     top: "-34px",
@@ -61,6 +61,28 @@ const TableStyles = () => ({
     "&:hover": {
       background: "#ccc"
     }
+  },
+  deleteCellsPopUp: {
+    backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
+    borderRadius: "7px !important",
+    border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
+    zIndex: 100,
+    minWidth: "186px !important"
+  },
+  menuItemPopUp: {
+    padding: "5px 7px !important",
+    margin: "6px !important",
+    borderRadius: 1,
+    userSelect: "none",
+    color: themeType === "dark" ? "#2563EB" : "#0F172A",
+    "&:hover": {
+      // backgroundColor: "rgba(0, 123, 255, 0.1)",
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
+    },
+    "&.Mui-selected": {
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
+      color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
+    }
   }
 });
 export default TableStyles;

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } from "@mui/material";
 import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
 import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
 import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -15,6 +15,7 @@ import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
+import useClickOutside from "../../hooks/useClickOutside";
 import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Editor, Element } from "slate";
-import { Box } from "@mui/material";
+import { Editor, Element, Transforms } from "slate";
+import { Box, MenuItem, Popper, Typography } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
 import TableStyles from "./Styles";
 import { useEditorSelection } from "../../hooks/useMouseMove";
+import useClickOutside from "../../hooks/useClickOutside";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +29,8 @@ const Resizer = ({
   });
 };
 const TableCell = props => {
-  const classes = TableStyles();
+  const themeType = localStorage.getItem("themeType");
+  const classes = TableStyles(themeType);
   const {
     element,
     attributes,
@@ -69,6 +71,42 @@ const TableCell = props => {
   const tableDOM = table.getDOMNode(path, true);
   const isCellSelected = table.isCellSelected(editor.selection);
   const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const popperOptions = [{
+    value: "Delete Row"
+  }, {
+    value: "Delete Column"
+  }];
+  const onRightClick = e => {
+    e.preventDefault();
+    if (hasSelected) {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  const closePoper = () => {
+    setAnchorEl(null);
+  };
+  const handleMenuItemClick = value => {
+    Transforms.select(editor, editor.selection);
+    switch (value) {
+      case "Delete Row":
+        table.deleteRow();
+        break;
+      case "Delete Column":
+        table.deleteColumn();
+        break;
+      default:
+        return;
+    }
+    // closePoper();
+  };
+
+  // Use the useClickOutside hook
+  const popperRef = useClickOutside({
+    onClickOutside: closePoper,
+    refCount: 1
+  })[0];
   useEffect(() => {
     if (tableDOM) {
       const {
@@ -89,7 +127,7 @@ const TableCell = props => {
         cellWidth: parentWidth / columns
       });
     }
-  }, [tableDOM]);
+  }, [tableDOM, anchorEl]);
   useEffect(() => {
     if (editor && element && tableSize) {
       const dom = ReactEditor.toDOMNode(editor, element);
@@ -99,14 +137,37 @@ const TableCell = props => {
         height: 100
       });
     }
-  }, [tableSize]);
+  }, [tableSize, anchorEl]);
   useEffect(() => {
     if (!resizing && tableProps) {
       table.updateTableStyle({
         "col.size": size
       }, tableProps);
     }
-  }, [resizing]);
+  }, [resizing, anchorEl]);
+  const poperForDeltion = () => {
+    return /*#__PURE__*/_jsx(Popper, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: "bottom-start",
+      disablePortal: true,
+      ref: popperRef,
+      sx: classes.deleteCellsPopUp,
+      children: popperOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
+        value: option.value,
+        onClick: () => handleMenuItemClick(option.value),
+        contentEditable: false,
+        sx: classes.menuItemPopUp,
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: "12px",
+            userSelect: "none"
+          },
+          children: option.value
+        })
+      }, option.value))
+    });
+  };
   const sizeProps = isHeader ? {
     width: size?.width || tableSize?.cellWidth
   } : {};
@@ -121,6 +182,7 @@ const TableCell = props => {
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
+    onContextMenu: onRightClick,
     children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       onMouseDown: onMouseDown,
@@ -128,7 +190,7 @@ const TableCell = props => {
     }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
       className: "selection-area-tc",
       contentEditable: false
-    }) : null]
+    }) : null, poperForDeltion()]
   });
 };
 export default TableCell;

package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js

@@ -8,6 +8,7 @@ import { ReactEditor } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableContextMenu = props => {
+  console.log("Table context menu :", props);
   const {
     editor
   } = props;

package/dist/Editor/Elements/Undo/UndoButton.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { useSlateStatic } from "slate-react";
+import UndoIcon from "../../assets/svg/UndoIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const UndoButton = () => {
+  const editor = useSlateStatic();
+  const onUndo = () => {
+    editor?.undo();
+  };
+  return /*#__PURE__*/_jsx(UndoIcon, {
+    onClick: onUndo
+  });
+};
+export default UndoButton;

package/dist/Editor/MiniEditor.js

@@ -23,7 +23,8 @@ const MiniEditor = props => {
     miniEditorPlaceholder,
     className,
     otherProps,
-    onSave
+    onSave,
+    theme
   } = props;
   const {
     CHARACTERS = []
@@ -132,6 +133,7 @@ const MiniEditor = props => {
     editor: editor,
     initialValue: content,
     onChange: onChange,
+    theme: theme,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
       ...props
     }), /*#__PURE__*/_jsx(Editable, {

package/dist/Editor/Styles/EditorStyles.js

@@ -60,7 +60,7 @@ const editorStyles = ({
       display: "flex",
       flex: 1,
       flexDirection: "column",
-      paddingBottom: "18px"
+      paddingBottom: "25px !important"
     },
     "& .scroll-area": {
       display: "flex",

package/dist/Editor/Toolbar/Basic/index.js

@@ -25,7 +25,8 @@ const BasicToolbar = props => {
       hideTextColor = false,
       hideResetIcon = true,
       onResetClick = () => {}
-    }
+    },
+    theme
   } = props;
   // state
   const [activeColor, setActiveColor] = useState("#000000");
@@ -65,7 +66,8 @@ const BasicToolbar = props => {
             item: true,
             children: /*#__PURE__*/_jsx(LinkButton, {
               active: isBlockActive(editor, link.format),
-              editor: editor
+              editor: editor,
+              theme: theme
             }, link.id)
           }), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
             item: true,