@flozy/editor 11.2.2 → 11.2.3

package/dist/Editor/Elements/Button/EditorButton.js

@@ -35,6 +35,11 @@ const EditorButton = props => {
   } = customProps;
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
+
+  // Helper function to detect if a color value is a gradient
+  const isGradientColor = color => {
+    return color && typeof color === "string" && color.includes("gradient");
+  };
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
@@ -76,6 +81,9 @@ const EditorButton = props => {
   const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
   const refURl = isTrigger ? buttonLink?.url : url;
   const BtnIcon = buttonIcon ? buttonIcon : null;
+
+  // Check if borderColor is a gradient
+  const isBorderGradient = isGradientColor(borderColor);
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
     if (!readOnly) {
@@ -201,6 +209,32 @@ const EditorButton = props => {
       ...getTRBLBreakPoints(bannerSpacing)
     }
   }, theme);
+  const btnSp2 = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+    }
+  }, theme);
+  const buttonBoxSx = {
+    position: "relative",
+    display: "inline-block",
+    ...btnSp2,
+    ...(isBorderGradient ? {
+      padding: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
+      background: borderColor,
+      backgroundClip: "padding-box, border-box",
+      boxSizing: "border-box",
+      "&:hover": {
+        background: borderColorHover || borderColor
+      }
+    } : {
+      borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
+      borderStyle: borderStyle || "solid",
+      borderColor: borderColor || "transparent",
+      "&:hover": {
+        borderColor: borderColorHover || borderColor || "transparent"
+      }
+    })
+  };
   const pSp = groupByBreakpoint({
     display: {
       xs: xsHidden ? "none" : "inline-block",
@@ -259,22 +293,16 @@ const EditorButton = props => {
         },
         position: "relative"
       },
-      children: /*#__PURE__*/_jsxs("span", {
-        style: {
-          position: "relative",
-          display: "inline-block"
-        },
+      children: /*#__PURE__*/_jsxs(Box, {
+        component: "span",
+        sx: buttonBoxSx,
         children: [/*#__PURE__*/_jsxs(Box, {
           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 || borderColorHover ? "1px" : "0px",
             ...btnSp,
-            borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,
             fontSize: textSize || "inherit",
             fontFamily: fontFamily || "PoppinsRegular",
@@ -288,7 +316,6 @@ const EditorButton = props => {
             "&:hover": {
               color: `${textColorHover || textColor || "#FFFFFF"}`,
               background: bgColorHover || bgColor || "rgb(30, 75, 122)",
-              borderColor: borderColorHover || borderColor || "transparent",
               "& .element-toolbar": {
                 display: "flex"
               }
@@ -297,7 +324,7 @@ const EditorButton = props => {
           ...buttonProps,
           children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
             ...muiIconProps
-          }), label || translation("My Button"), BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
+          }), label || translation("My Button 12"), BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
             ...muiIconProps
           })]
         }), !readOnly && buttonRef?.current && /*#__PURE__*/_jsx(Popper, {

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

@@ -1,5 +1,16 @@
 import { fontOptions } from "../../utils/font";
+
+// Helper function to detect if a color value is a gradient
 import { jsx as _jsx } from "react/jsx-runtime";
+const isGradientColor = color => {
+  return color && typeof color === 'string' && color.includes('gradient');
+};
+
+// Helper function to check if any color in the element is a gradient
+const hasGradientColors = element => {
+  const colorFields = ['bgColor', 'bgColorHover', 'borderColor', 'borderColorHover', 'textColor', 'textColorHover'];
+  return colorFields.some(field => isGradientColor(element[field]));
+};
 const buttonStyle = [{
   tab: "General",
   value: "size",
@@ -108,7 +119,8 @@ const buttonStyle = [{
       return /*#__PURE__*/_jsx("span", {
         children: translation(option.text)
       });
-    }
+    },
+    condition: element => !hasGradientColors(element)
   }]
 }, {
   tab: "Icon",

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

@@ -35,11 +35,19 @@ export const StyleContent = props => {
     fields: []
   };
   const filteredFields = (hideTools || [])?.length > 0 ? fields.filter(f => (hideTools || []).indexOf(f.key) === -1) : fields;
+
+  // Apply conditional field visibility
+  const conditionallyFilteredFields = filteredFields.filter(field => {
+    if (field.condition && typeof field.condition === 'function') {
+      return field.condition(element);
+    }
+    return true;
+  });
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     spacing: 2,
     className: "sidebar-wrpr-eds",
-    children: [...filteredFields].map((m, i) => {
+    children: [...conditionallyFilteredFields].map((m, i) => {
       const FieldComponent = FieldMap[m.type];
       return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
         data: m,
@@ -210,7 +218,12 @@ const StyleBuilder = props => {
                   sx: {
                     padding: "5px"
                   },
-                  children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
+                  children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).filter(field => {
+                    if (field.condition && typeof field.condition === 'function') {
+                      return field.condition(elementProps);
+                    }
+                    return true;
+                  }).map((field, index) => {
                     return /*#__PURE__*/_jsx(StyleContent, {
                       renderTabs: [field],
                       value: field.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "11.2.2",
+  "version": "11.2.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"