@flozy/editor 10.5.6 → 10.5.7

package/dist/Editor/theme/index.js

@@ -0,0 +1,149 @@
+import { getDevice } from "../helper/theme";
+const themeClassName = ".theme-element";
+function getTextStyles(props) {
+  const {
+    fontSize,
+    textDecoration,
+    color,
+    ...rest
+  } = props;
+  const device = getDevice(window.innerWidth);
+  const fontS = typeof fontSize === "object" ? fontSize[device] : fontSize;
+  return {
+    ...rest,
+    '& span[data-slate-string="true"]': {
+      textDecoration,
+      fontSize: fontS,
+      color: color || "inherit"
+    }
+
+    // "&::after": {
+    //   // for placeholder
+    //   fontSize,
+    // },
+  };
+}
+
+const transformHeading = (props, elementType) => {
+  return {
+    [`& ${elementType}${themeClassName}`]: getTextStyles(props)
+  };
+};
+const transformParagraph = (props, paraType) => {
+  return {
+    [`& p${themeClassName}.${paraType}`]: getTextStyles(props)
+  };
+};
+const transformButton = props => {
+  const {
+    borderRadius,
+    lockRadius,
+    bannerSpacing,
+    buttonIcon,
+    hover,
+    ...classProps
+  } = props;
+  return {
+    [`& .button${themeClassName}`]: {
+      ...classProps,
+      "&:hover": hover
+    },
+    buttonTheme: {
+      borderRadius,
+      lockRadius,
+      bannerSpacing,
+      buttonIcon
+    }
+  };
+};
+const transformProps = (elementType, props) => {
+  let transformedProp = {};
+  let otherProps = {};
+  switch (elementType) {
+    case "h1":
+    case "h2":
+    case "h3":
+    case "h4":
+    case "h5":
+    case "h6":
+      transformedProp = transformHeading(props, elementType);
+      break;
+    case "para1":
+    case "para2":
+    case "para3":
+      transformedProp = transformParagraph(props, elementType);
+      break;
+    case "button":
+      const {
+        buttonTheme,
+        ...classProps
+      } = transformButton(props, elementType);
+      transformedProp = classProps;
+      otherProps = {
+        buttonTheme
+      };
+      break;
+    default:
+  }
+  return {
+    transformedProp,
+    otherProps
+  };
+};
+export const transformTheme = (selectedTheme = {}) => {
+  let sxProps = {};
+  let others = {};
+  const {
+    elementProps
+  } = selectedTheme;
+  if (elementProps) {
+    Object.entries(elementProps).forEach(([key, value]) => {
+      const {
+        transformedProp,
+        otherProps
+      } = transformProps(key, value);
+      sxProps = {
+        ...sxProps,
+        ...transformedProp
+      };
+      others = {
+        ...others,
+        ...otherProps
+      };
+    });
+  }
+  return {
+    sxProps,
+    ...others
+  };
+};
+export const defaultTheme = {
+  theme: {
+    cssVars: {},
+    elementProps: {
+      button: {
+        color: "#FFFFFF",
+        background: "#2563EB",
+        fontFamily: "PoppinsRegular",
+        fontWeight: 400,
+        fontSize: "inherit",
+        borderColor: "transparent",
+        borderRadius: {
+          topLeft: 30,
+          topRight: 30,
+          bottomLeft: 30,
+          bottomRight: 30
+        },
+        bannerSpacing: {
+          left: 16,
+          top: 8,
+          right: 16,
+          bottom: 8
+        }
+      }
+    }
+  }
+};
+export function getTheme(selectedTheme) {
+  return transformTheme(selectedTheme?.theme || defaultTheme.theme);
+}

package/dist/Editor/themeSettings/ActiveTheme.js

@@ -0,0 +1,82 @@
+import { Grid, Link, Typography } from "@mui/material";
+import { useEditorTheme } from "../hooks/useEditorTheme";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function ActiveTheme(props) {
+  const {
+    onExplore
+  } = props;
+  const {
+    theme
+  } = useEditorTheme();
+  const {
+    colors = {}
+  } = theme?.theme?.cssVars || {};
+  const {
+    id,
+    name,
+    mood_name = ""
+  } = theme || {};
+  const themeColors = Object.values(colors || {});
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: "activeThemeInnner",
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      className: "title activeThemeTitle",
+      children: id ? "Active Theme" : "No theme activated"
+    }), /*#__PURE__*/_jsx(Grid, {
+      className: "flexAlign",
+      children: id ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fs-14 flexItem",
+          title: name,
+          children: name
+        }), /*#__PURE__*/_jsxs(Typography, {
+          variant: "body2",
+          className: "fs-12 textSecondary flexItem",
+          style: {
+            marginLeft: id ? "4px" : "0px"
+          },
+          children: ["- ", mood_name]
+        })]
+      }) : /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        className: "fs-12 textSecondary",
+        style: {
+          marginLeft: id ? "4px" : "0px"
+        },
+        children: `Select 'Explore More' to activate a theme and customize your design.`
+      })
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      justifyContent: "space-between",
+      alignItems: "end",
+      sx: {
+        mt: 1
+      },
+      children: [/*#__PURE__*/_jsx(Grid, {
+        className: "flexAlign",
+        sx: {
+          gap: "10px"
+        },
+        children: id ? /*#__PURE__*/_jsx(_Fragment, {
+          children: themeColors?.map((color, i) => {
+            return /*#__PURE__*/_jsx(Grid, {
+              className: "activeColorBox",
+              style: {
+                background: color
+              }
+            }, i);
+          })
+        }) : null
+      }), onExplore && /*#__PURE__*/_jsx(Link, {
+        className: "pointer fs-12 fw-500 exploreBtn",
+        onClick: onExplore,
+        children: "Explore More"
+      })]
+    })]
+  });
+}
+export default ActiveTheme;

package/dist/Editor/themeSettings/buttons/index.js

@@ -0,0 +1,300 @@
+import React, { useRef, useState } from "react";
+import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled, useTheme } from "@mui/material";
+
+// Style
+import Style from "./style";
+import { PenIcon } from "../icons";
+import StyleBuilder from "../../common/StyleBuilder";
+import { fontOptions } from "../../utils/font";
+import { useEditorTheme } from "../../hooks/useEditorTheme";
+import { getBreakPointsValue, getElementProperty, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
+import { KeyboardArrowDownRounded } from "@mui/icons-material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const buttonStyle = [{
+  tab: "General",
+  value: "size",
+  fields: [{
+    label: "Font Family",
+    key: "fontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    webFont: true,
+    width: 7,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }, {
+    label: "Font Size",
+    key: "textSize",
+    type: "fontSize",
+    width: 5,
+    placeholder: "16px or 1em"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text Color",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Button Color",
+    key: "bgColor",
+    type: "color",
+    themeEnabled: true
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border",
+  value: "border",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Hover Text Color",
+    key: "textColorHover",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Hover Button Color",
+    key: "bgColorHover",
+    type: "color"
+  }]
+}];
+function getBtnSxProps(buttonStyle = {}, theme) {
+  let newStyle = {
+    ...buttonStyle
+  };
+  // if (newStyle?.bannerSpacing) {
+  //   newStyle.padding = newStyle?.bannerSpacing;
+  // }
+
+  const btnSp = groupByBreakpoint({
+    borderRadius: {
+      ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
+    }
+    // padding: {
+    //   ...getTRBLBreakPoints(newStyle?.bannerSpacing),
+    // },
+  }, theme);
+  newStyle = {
+    ...newStyle,
+    ...btnSp
+  };
+  delete newStyle?.bannerSpacing;
+  if (newStyle?.hover) {
+    newStyle["&:hover"] = newStyle.hover;
+    delete newStyle.hover;
+  }
+  return newStyle;
+}
+const MAP_HOVER_KEYS = {
+  color: "textColorHover",
+  background: "bgColorHover"
+};
+const MAP_THEME_TO_ELEMENT_KEYS = {
+  color: "textColor",
+  background: "bgColor",
+  fontFamily: (value, prev, buttonEl) => {
+    if (!buttonEl?.current) {
+      return prev;
+    }
+    const val = getElementProperty(buttonEl?.current, "font-family");
+    return {
+      ...prev,
+      fontFamily: val
+    };
+  },
+  fontSize: "textSize",
+  borderRadius: "borderRadius",
+  bannerSpacing: "bannerSpacing",
+  lockRadius: "lockRadius",
+  lockbannerSpacing: "lockbannerSpacing",
+  // fontWeight
+
+  hover: (value = {}, prev = {}) => {
+    const props = getProps(value, MAP_HOVER_KEYS);
+    return {
+      ...prev,
+      ...props
+    };
+  }
+};
+const MAP_ELEMENT_TO_THEME_KEYS = {
+  textSize: "fontSize",
+  textColor: "color",
+  bgColor: "background",
+  bannerSpacing: "bannerSpacing",
+  borderRadius: "borderRadius",
+  lockRadius: "lockRadius",
+  lockbannerSpacing: "lockbannerSpacing",
+  textColorHover: (value, prev) => {
+    const hover = {
+      ...(prev?.hover || {})
+    };
+    hover.color = value;
+    return {
+      ...prev,
+      hover
+    };
+  },
+  bgColorHover: (value, prev) => {
+    const hover = {
+      ...(prev?.hover || {})
+    };
+    hover.background = value;
+    return {
+      ...prev,
+      hover
+    };
+  },
+  fontFamily: "fontFamily"
+};
+function getProps(buttonStyle, MAP_KEYS, buttonEl) {
+  let props = {};
+  Object.entries(buttonStyle).forEach(([key, value]) => {
+    const elementKey = MAP_KEYS[key];
+    if (elementKey) {
+      if (typeof elementKey === "string") {
+        props[elementKey] = value;
+      } else {
+        props = elementKey(value, props, buttonEl);
+      }
+    }
+  });
+  return props;
+}
+function convertThemeToElementProps(button = {}, buttonEl) {
+  const props = getProps(button, MAP_THEME_TO_ELEMENT_KEYS, buttonEl);
+  return props;
+}
+
+// icons
+
+const Buttons = props => {
+  const {
+    className,
+    customProps,
+    openSettings,
+    onSettingsChange,
+    type
+  } = props;
+  const [anchorEl, setAnchorEl] = useState();
+  const theme = useTheme();
+  const {
+    selectedTheme,
+    updateTheme
+  } = useEditorTheme();
+  const {
+    button
+  } = selectedTheme?.elementProps || {};
+  console.log("getBtnSxProps(button, theme)", getBtnSxProps(button, theme));
+  const buttonEl = useRef();
+  const elementProps = convertThemeToElementProps(button, buttonEl);
+
+  // State
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: className,
+    children: [/*#__PURE__*/_jsxs(Accordion, {
+      className: "settingAccordion",
+      onChange: () => onSettingsChange(type),
+      expanded: openSettings === type,
+      children: [/*#__PURE__*/_jsx(AccordionSummary, {
+        expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
+        "aria-controls": "panel1-content",
+        id: "panel1-header",
+        children: "Buttons"
+      }), /*#__PURE__*/_jsx(AccordionDetails, {
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          className: "buttonTypeItem",
+          justifyContent: "space-between",
+          alignItems: "center",
+          wrap: "nowrap",
+          onClick: e => setAnchorEl(e.currentTarget),
+          children: [/*#__PURE__*/_jsxs(Grid, {
+            item: true,
+            size: 8,
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "fw-600 fs-14",
+              style: {
+                marginBottom: "10px"
+              },
+              children: "Theme Button"
+            }), /*#__PURE__*/_jsx(Button, {
+              sx: getBtnSxProps(button, theme),
+              ref: buttonEl,
+              children: "Button"
+            })]
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            size: 4,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              className: "editIcon",
+              children: /*#__PURE__*/_jsx(PenIcon, {})
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      transition: true,
+      sx: {
+        zIndex: "100000",
+        background: "white"
+      },
+      placement: "left-start",
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        timeout: 350,
+        children: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(StyleBuilder, {
+            title: "Button",
+            type: "buttonStyle",
+            element: elementProps,
+            onSave: data => {
+              const props = getProps(data, MAP_ELEMENT_TO_THEME_KEYS);
+              updateTheme(props, {
+                action: "ELEMENT_PROPS_CHANGE",
+                fieldName: "button"
+              });
+              setAnchorEl(null);
+            },
+            onClose: () => {
+              setAnchorEl(null);
+            },
+            renderTabs: buttonStyle,
+            customProps: {
+              disableEditTheme: true,
+              translation: customProps?.translation || (() => {})
+            }
+          })
+        })
+      })
+    })]
+  });
+};
+export default styled(Buttons)(Style);

package/dist/Editor/themeSettings/buttons/style.js

@@ -0,0 +1,23 @@
+const Style = ({
+  appTheme
+}) => ({
+  ".buttonTypeItem": {
+    padding: "8px 10px",
+    width: "calc(100% + 20px)",
+    margin: "0 -10px",
+    "&:hover": {
+      background: appTheme?.palette?.editor?.tv_hover_bg,
+      ".editIcon": {
+        opacity: "1",
+        visibility: "visible"
+      }
+    },
+    ".editIcon": {
+      opacity: "0",
+      visibility: "hidden",
+      width: "30px",
+      height: "30px"
+    }
+  }
+});
+export default Style;