@flozy/editor 4.9.2 → 4.9.4

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

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
-import { useSlate } from "slate-react";
+import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
-import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
 import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
@@ -30,21 +29,22 @@ const PopupTool = props => {
   } = editor;
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
-  const table = new TableUtil(editor);
   const [size] = useWindowResize();
   const {
     selectedElement
   } = useEditorContext();
-  const updateAnchorEl = () => {
+  const updateAnchorEl = useCallback(() => {
     try {
-      const domSelection = window.getSelection();
-      const domRange = domSelection?.getRangeAt(0);
-      const {
-        startOffset,
-        endOffset
-      } = domRange || {};
-      if (startOffset !== endOffset) {
+      const isHavingSelection = selection && !Range.isCollapsed(selection);
+      if (isHavingSelection) {
+        const domRange = ReactEditor.toDOMRange(editor, editor.selection);
+        const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const rect = domRange.getBoundingClientRect();
+        const isOutside = rect.bottom < editorContainer.top || rect.top > editorContainer.bottom;
+        if (isOutside) {
+          rect.y = -500; // hide the popper
+        }
+
         setAnchorEl({
           clientWidth: rect.width,
           clientHeight: rect.height,
@@ -54,19 +54,19 @@ const PopupTool = props => {
     } catch (err) {
       console.log(err);
     }
-  };
+  }, [selection]);
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
 
     if (userStoppedSelection && anchorEl && !open) {
       // for table cell selection
-      const isCellsSelected = table.isCellSelected(editor.selection);
-      if (!isCellsSelected) {
-        setOpen(true);
-        setPopupType("textFormat");
-        setIsTextSelected(true);
-      }
+      // const isCellsSelected = table.isCellSelected(editor.selection);
+      // if (!isCellsSelected) {
+      setOpen(true);
+      setPopupType("textFormat");
+      setIsTextSelected(true);
+      // }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");

package/dist/Editor/assets/svg/DocsIcon.js

@@ -8,30 +8,97 @@ const DocsIcon = props => {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M8.32593 1.07031V4.26079C8.32593 4.47233 8.41151 4.67521 8.56385 4.82479C8.71619 4.97437 8.92281 5.05841 9.13825 5.05841H12.3875",
-      stroke: "#778599",
+      d: "M8.07324 1V4.14286C8.07324 4.35124 8.15602 4.55109 8.30337 4.69844C8.45072 4.84579 8.65057 4.92857 8.85896 4.92857H12.0018",
+      stroke: "url(#paint0_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M10.7626 15.4275H2.63941C2.20853 15.4275 1.7953 15.2594 1.49062 14.9602C1.18594 14.6611 1.01477 14.2553 1.01477 13.8322V2.66555C1.01477 2.24247 1.18594 1.83671 1.49062 1.53755C1.7953 1.23838 2.20853 1.07031 2.63941 1.07031H8.32567L12.3873 5.05841V13.8322C12.3873 14.2553 12.2161 14.6611 11.9114 14.9602C11.6067 15.2594 11.1935 15.4275 10.7626 15.4275Z",
-      stroke: "#778599",
+      d: "M10.4286 15.1429H2.57143C2.15466 15.1429 1.75496 14.9773 1.46026 14.6826C1.16556 14.3879 1 13.9882 1 13.5714V2.57143C1 2.15466 1.16556 1.75496 1.46026 1.46026C1.75496 1.16556 2.15466 1 2.57143 1H8.07143L12 4.92857V13.5714C12 13.9882 11.8344 14.3879 11.5397 14.6826C11.245 14.9773 10.8453 15.1429 10.4286 15.1429Z",
+      stroke: "url(#paint1_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M4.26416 5.85547H5.07648",
-      stroke: "#778599",
+      d: "M4.14014 5.71289H4.92585",
+      stroke: "url(#paint2_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M4.26416 9.04688H9.13809",
-      stroke: "#778599",
+      d: "M4.14014 8.85742H8.85442",
+      stroke: "url(#paint3_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M4.26416 12.2383H9.13809",
-      stroke: "#778599",
+      d: "M4.14014 12H8.85442",
+      stroke: "url(#paint4_linear_6885_49189)",
       strokeLinecap: "round",
       strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint0_linear_6885_49189",
+        x1: "10.0375",
+        y1: "1",
+        x2: "10.0375",
+        y2: "4.92857",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint1_linear_6885_49189",
+        x1: "6.5",
+        y1: "1",
+        x2: "6.5",
+        y2: "15.1429",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint2_linear_6885_49189",
+        x1: "4.53299",
+        y1: "5.71289",
+        x2: "4.53299",
+        y2: "6.71289",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint3_linear_6885_49189",
+        x1: "6.49728",
+        y1: "8.85742",
+        x2: "6.49728",
+        y2: "9.85742",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      }), /*#__PURE__*/_jsxs("linearGradient", {
+        id: "paint4_linear_6885_49189",
+        x1: "6.49728",
+        y1: "12",
+        x2: "6.49728",
+        y2: "13",
+        gradientUnits: "userSpaceOnUse",
+        children: [/*#__PURE__*/_jsx("stop", {
+          stopColor: "#2563EB"
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "1",
+          stopColor: "#8360FD"
+        })]
+      })]
     })]
   });
 };

package/dist/Editor/assets/svg/TableIcons.js

@@ -0,0 +1,220 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function PaintIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M6.42594 16.4984L2.75011 12.8226C1.52177 11.5943 1.52177 10.3751 2.75011 9.14676L8.87344 3.02344L15.6109 9.76097C15.9501 10.1001 15.9501 10.6501 15.6109 10.9893L10.0926 16.5076C8.88261 17.7176 7.65427 17.7176 6.42594 16.4984Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.65405 1.78906L8.88239 3.01736",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M1.89746 10.9253L15.7575 10.3203",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.75 20.168H14.6667",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M17.2791 13.75C17.2791 13.75 15.5833 15.5925 15.5833 16.72C15.5833 17.655 16.3441 18.4158 17.2791 18.4158C18.2141 18.4158 18.9749 17.655 18.9749 16.72C18.9749 15.5925 17.2791 13.75 17.2791 13.75Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function DuplicateIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "19",
+    height: "19",
+    viewBox: "0 0 19 19",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M12.6666 10.2112V13.5362C12.6666 16.307 11.5583 17.4154 8.78742 17.4154H5.46242C2.69159 17.4154 1.58325 16.307 1.58325 13.5362V10.2112C1.58325 7.44036 2.69159 6.33203 5.46242 6.33203H8.78742C11.5583 6.33203 12.6666 7.44036 12.6666 10.2112Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M17.4166 5.4612V8.7862C17.4166 11.557 16.3083 12.6654 13.5374 12.6654H12.6666V10.2112C12.6666 7.44036 11.5583 6.33203 8.78742 6.33203H6.33325V5.4612C6.33325 2.69036 7.44158 1.58203 10.2124 1.58203H13.5374C16.3083 1.58203 17.4166 2.69036 17.4166 5.4612Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function AboveArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M16.5642 8.77344L11 3.20927L5.43588 8.77344",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11 18.793L11 3.36547",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function BelowArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M16.5642 13.2266L11 18.7907L5.43588 13.2266",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M11 3.20703L11 18.6345",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function RightArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M13.2275 16.5625L18.7917 10.9983L13.2275 5.43417",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M3.20825 11H18.6358",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function LeftArrow() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M8.77246 16.5625L3.20829 10.9983L8.77246 5.43417",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18.7917 11L3.36425 11",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function SettingsIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M1.66675 10.7339V9.26718C1.66675 8.40052 2.37508 7.68385 3.25008 7.68385C4.75841 7.68385 5.37508 6.61718 4.61675 5.30885C4.18341 4.55885 4.44175 3.58385 5.20008 3.15052L6.64175 2.32552C7.30008 1.93385 8.15008 2.16718 8.54175 2.82552L8.63341 2.98385C9.38341 4.29218 10.6167 4.29218 11.3751 2.98385L11.4667 2.82552C11.8584 2.16718 12.7084 1.93385 13.3667 2.32552L14.8084 3.15052C15.5667 3.58385 15.8251 4.55885 15.3917 5.30885C14.6334 6.61718 15.2501 7.68385 16.7584 7.68385C17.6251 7.68385 18.3417 8.39218 18.3417 9.26718V10.7339C18.3417 11.6005 17.6334 12.3172 16.7584 12.3172C15.2501 12.3172 14.6334 13.3838 15.3917 14.6922C15.8251 15.4505 15.5667 16.4172 14.8084 16.8505L13.3667 17.6755C12.7084 18.0672 11.8584 17.8339 11.4667 17.1755L11.3751 17.0172C10.6251 15.7089 9.39175 15.7089 8.63341 17.0172L8.54175 17.1755C8.15008 17.8339 7.30008 18.0672 6.64175 17.6755L5.20008 16.8505C4.44175 16.4172 4.18341 15.4422 4.61675 14.6922C5.37508 13.3838 4.75841 12.3172 3.25008 12.3172C2.37508 12.3172 1.66675 11.6005 1.66675 10.7339Z",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function MoreIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "18",
+    height: "4",
+    viewBox: "0 0 18 4",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M9.99846 2.00034C9.99846 1.44825 9.55081 1.00069 8.99862 1.00069C8.44642 1.00069 7.99878 1.44825 7.99878 2.00034C7.99878 2.55244 8.44642 3 8.99862 3C9.55081 3 9.99846 2.55244 9.99846 2.00034Z",
+      fill: "#0F172A",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M16.9972 2.00034C16.9972 1.44825 16.5496 1.00069 15.9974 1.00069C15.4452 1.00069 14.9976 1.44825 14.9976 2.00034C14.9976 2.55244 15.4452 3 15.9974 3C16.5496 3 16.9972 2.55244 16.9972 2.00034Z",
+      fill: "#0F172A",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M2.99968 2.00034C2.99968 1.44825 2.55203 1.00069 1.99984 1.00069C1.44764 1.00069 1 1.44825 1 2.00034C1 2.55244 1.44764 3 1.99984 3C2.55203 3 2.99968 2.55244 2.99968 2.00034Z",
+      fill: "#0F172A",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}

package/dist/Editor/assets/svg/UserIcon.js

@@ -9,12 +9,12 @@ const UserIcon = props => {
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M6 6C7.38071 6 8.5 4.88071 8.5 3.5C8.5 2.11929 7.38071 1 6 1C4.61929 1 3.5 2.11929 3.5 3.5C3.5 4.88071 4.61929 6 6 6Z",
-      stroke: "#84818A",
+      stroke: "#64748B",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M10.295 11C10.295 9.065 8.36995 7.5 5.99995 7.5C3.62995 7.5 1.70496 9.065 1.70496 11",
-      stroke: "#84818A",
+      stroke: "#64748B",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     })]

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

@@ -12,7 +12,7 @@ const usePopupStyles = theme => ({
       background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
       "& .MuiBox-root": {
         "& .renderComp": {
-          padding: "2px 0px",
+          padding: "2px 0px 2px 1px",
           background: "transparent !important"
         },
         "& button": {

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

@@ -128,41 +128,15 @@ const FormSettings = props => {
           }, `accordion_${i}`)
         }, i);
       } else {
-        return /*#__PURE__*/_jsx(ThemeProvider, {
-          theme: muiTheme,
-          children: /*#__PURE__*/_jsxs(Accordion, {
-            defaultExpanded: true,
-            children: [/*#__PURE__*/_jsx(AccordionSummary, {
-              expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-              sx: {
-                padding: "5px"
-              },
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                className: "settingsHeader",
-                color: "primary",
-                style: {
-                  fontSize: "14px !important",
-                  fontWeight: "400"
-                },
-                children: m?.tab
-              })
-            }), /*#__PURE__*/_jsx(AccordionDetails, {
-              sx: {
-                padding: "0px"
-              },
-              children: /*#__PURE__*/_jsx(StyleContent, {
-                renderTabs: styleMaps,
-                value: m.value,
-                element: element,
-                customElement: element?.children?.[0] || null,
-                onChange: onChange,
-                customProps: customProps,
-                handleClose: handleClose
-              }, `tab_${m.value}_$${i}`)
-            })]
-          }, `accordion_${i}`)
-        }, i);
+        return /*#__PURE__*/_jsx(StyleContent, {
+          renderTabs: styleMaps,
+          value: m.value,
+          element: element,
+          customElement: element?.children?.[0] || null,
+          onChange: onChange,
+          customProps: customProps,
+          handleClose: handleClose
+        }, `tab_${m.value}_$${i}`);
       }
     })
   });

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

@@ -174,82 +174,114 @@ export const formStyle = [{
 }, {
   tab: "Field Settings",
   value: "FieldSetting",
-  hasChildrenTabs: false,
+  hasChildrenTabs: true,
   fields: [{
-    label: "Font Family",
-    key: "fieldFontFamily",
-    type: "textOptions",
-    hideMetaDataOptions: true,
-    options: fontOptions,
-    webFont: true,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
-        children: option.text
-      });
-    }
+    tab: "Font Family",
+    value: "FontFamily",
+    fields: [{
+      label: "Font Family",
+      key: "fieldFontFamily",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      options: fontOptions,
+      webFont: true,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontFamily: option.value
+          },
+          children: option.text
+        });
+      }
+    }]
   }, {
-    label: "Font Weight",
-    key: "fieldFontWeight",
-    type: "textOptions",
-    width: 5,
-    options: fontWeightOptions,
-    hideMetaDataOptions: true,
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontWeight: option.value
-        },
-        children: option.text
-      });
-    }
+    tab: "Font Weight",
+    value: "FontWeight",
+    fields: [{
+      label: "Font Weight",
+      key: "fieldFontWeight",
+      type: "textOptions",
+      width: 5,
+      options: fontWeightOptions,
+      hideMetaDataOptions: true,
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          style: {
+            fontWeight: option.value
+          },
+          children: option.text
+        });
+      }
+    }]
   }, {
-    label: "Font Size",
-    key: "fieldTextSize",
-    type: "fontSize",
-    width: 5,
-    placeholder: "16px"
+    tab: "Font Size",
+    value: "FontSize",
+    fields: [{
+      label: "Font Size",
+      key: "fieldTextSize",
+      type: "fontSize",
+      width: 5,
+      placeholder: "16px"
+    }]
   }, {
-    label: "Text Color",
-    key: "fieldTextColor",
-    type: "color",
-    needPreview: true
+    tab: "Text Color",
+    value: "TextColor",
+    fields: [{
+      label: "Text Color",
+      key: "fieldTextColor",
+      type: "color",
+      needPreview: true
+    }]
   }, {
-    label: "Background Color",
-    key: "fieldBgColor",
-    type: "color"
+    tab: "Background Color",
+    value: "BackgroundColor",
+    fields: [{
+      label: "Background Color",
+      key: "fieldBgColor",
+      type: "color"
+    }]
   }, {
-    label: "Border Color",
-    key: "fieldBorderColor",
-    type: "color"
+    tab: "Border Color",
+    value: "BorderColor",
+    fields: [{
+      label: "Border Color",
+      key: "fieldBorderColor",
+      type: "color"
+    }]
   }, {
-    label: "Border Width",
-    key: "fieldBorderWidth",
-    type: "text",
-    width: 5,
-    placeholder: "1px"
+    tab: "Border Width",
+    value: "BorderWidth",
+    fields: [{
+      label: "Border Width",
+      key: "fieldBorderWidth",
+      type: "text",
+      width: 5,
+      placeholder: "1px"
+    }]
   }, {
-    label: "Border Style",
-    key: "fieldBorderStyle",
-    type: "textOptions",
-    hideMetaDataOptions: true,
-    width: 5,
-    options: [{
-      text: "Solid",
-      value: "solid"
-    }, {
-      text: "Dotted",
-      value: "dotted"
-    }, {
-      text: "Dashed",
-      value: "dashed"
-    }],
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        children: option.text
-      });
-    }
+    tab: "Border Style",
+    value: "BorderStyle",
+    fields: [{
+      label: "Border Style",
+      key: "fieldBorderStyle",
+      type: "textOptions",
+      hideMetaDataOptions: true,
+      width: 5,
+      options: [{
+        text: "Solid",
+        value: "solid"
+      }, {
+        text: "Dotted",
+        value: "dotted"
+      }, {
+        text: "Dashed",
+        value: "dashed"
+      }],
+      renderOption: option => {
+        return /*#__PURE__*/_jsx("span", {
+          children: option.text
+        });
+      }
+    }]
   }]
 }];