@flozy/editor 3.9.0 → 3.9.1

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

@@ -0,0 +1,290 @@
+import React from "react";
+import { Accordion, AccordionDetails, AccordionSummary, Divider, FormControlLabel, Grid, IconButton, Radio, RadioGroup, ToggleButton, ToggleButtonGroup, Typography, styled } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+// Style
+import Style from "./style";
+
+// icons
+import { ChevronLeft } from "@mui/icons-material";
+import { EditIcon } from "../icons";
+import ColorPickerButton from "../../common/ColorPickerButton";
+import { getContrastColor } from "../../utils/helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ColorTheme = props => {
+  const {
+    className,
+    colors,
+    onColorChange,
+    openDefault
+  } = props;
+  const {
+    primaryColors,
+    otherColors = []
+  } = colors || {};
+
+  // State
+  const [customizeTheme, setCustomizeTheme] = React.useState(false);
+  const [buttonType, setButtonType] = React.useState("regular");
+  const customTheme = [{
+    title: "Text & Line Colors",
+    data: [{
+      title: "Headings",
+      color: "#ccc"
+    }, {
+      title: "Subheading text",
+      color: "#ccc"
+    }, {
+      title: "Body text",
+      color: "#ccc"
+    }, {
+      title: "Subtext",
+      color: "#ccc"
+    }, {
+      title: "Lines & dividers",
+      color: "#ccc"
+    }]
+  }, {
+    title: "Background Colors",
+    data: [{
+      title: "Primary background color",
+      color: "#ccc"
+    }, {
+      title: "Secondary background color",
+      color: "#ccc"
+    }]
+  }];
+  const buttonData = [{
+    title: "Button background",
+    color: "#ccc"
+  }, {
+    title: "Button text",
+    color: "#ccc"
+  }, {
+    title: "Button border",
+    color: "#ccc"
+  }];
+
+  //button
+  const handleButtonType = (event, buttonType) => {
+    if (buttonType !== null) {
+      setButtonType(buttonType);
+    }
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    className: className,
+    children: !customizeTheme ? /*#__PURE__*/_jsxs(Accordion, {
+      className: "settingAccordion",
+      defaultExpanded: openDefault,
+      children: [/*#__PURE__*/_jsx(AccordionSummary, {
+        expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+        "aria-controls": "panel1-content",
+        id: "panel1-header",
+        children: "Color Theme"
+      }), /*#__PURE__*/_jsxs(AccordionDetails, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            pb: 1
+          },
+          className: "fs-12 fw-600",
+          children: "Primary Color"
+        }), /*#__PURE__*/_jsx(Grid, {
+          container: true,
+          spacing: 1,
+          sx: {
+            pb: 2
+          },
+          className: "primaryColorBoxes",
+          wrap: "nowrap",
+          children: primaryColors?.map((color, i) => {
+            const textColor = getContrastColor(color);
+            return /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 6,
+              children: /*#__PURE__*/_jsx(ColorPickerButton, {
+                onSave: selectedColor => {
+                  onColorChange(selectedColor, i);
+                },
+                hideThemeColors: true,
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  className: "pmBox",
+                  style: {
+                    backgroundColor: color
+                  },
+                  children: [/*#__PURE__*/_jsx(IconButton, {
+                    className: "editBtn",
+                    children: /*#__PURE__*/_jsx(EditIcon, {})
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    variant: "body2",
+                    className: "fs-12 valyeText",
+                    style: {
+                      color: textColor
+                    },
+                    children: color
+                  })]
+                })
+              })
+            }, i);
+          })
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            pb: 1
+          },
+          className: "fs-12 fw-600",
+          children: "Secondary Colors"
+        }), /*#__PURE__*/_jsx(Grid, {
+          container: true,
+          className: "secondaryColorBoxes",
+          wrap: "nowrap",
+          sx: {
+            mb: 1
+          },
+          children: otherColors?.slice(0, 4)?.map((color, i) => {
+            const noOfPrimaryColors = 2;
+            const colorIndex = noOfPrimaryColors + i;
+            const textColor = getContrastColor(color);
+            return /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 6,
+              children: /*#__PURE__*/_jsx(ColorPickerButton, {
+                onSave: selectedColor => {
+                  onColorChange(selectedColor, colorIndex);
+                },
+                hideThemeColors: true,
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  className: "sdBox",
+                  style: {
+                    backgroundColor: color
+                  },
+                  children: [/*#__PURE__*/_jsx(IconButton, {
+                    className: "editBtn",
+                    children: /*#__PURE__*/_jsx(EditIcon, {})
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    variant: "body2",
+                    className: "fs-12 valyeText",
+                    style: {
+                      color: textColor
+                    },
+                    children: color
+                  })]
+                })
+              })
+            }, i);
+          })
+        })]
+      })]
+    }) : /*#__PURE__*/_jsxs(Grid, {
+      className: "sectionDetail",
+      children: [/*#__PURE__*/_jsxs(Typography, {
+        variant: "body1",
+        className: "sectionTitle flexAlign",
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          onClick: () => setCustomizeTheme(false),
+          children: /*#__PURE__*/_jsx(ChevronLeft, {})
+        }), "Customize Theme settings"]
+      }), customTheme.map((item, index) => /*#__PURE__*/_jsxs(Grid, {
+        className: "settingsSection",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "sectionTitle",
+          sx: {
+            pb: 1
+          },
+          children: item.title
+        }), item.data.map((childitem, childIndex) => /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "space-between",
+          sx: {
+            pt: 2
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            className: "fs-14",
+            children: childitem.title
+          }), /*#__PURE__*/_jsx(Grid, {
+            className: "xsColorBox",
+            sx: {
+              background: childitem.color
+            }
+          })]
+        }, childIndex))]
+      }, index)), /*#__PURE__*/_jsxs(Grid, {
+        className: "settingsSection",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "sectionTitle",
+          sx: {
+            pb: 1
+          },
+          children: "Button Colors"
+        }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
+          sx: {
+            mt: 2
+          },
+          className: "toggleType",
+          value: buttonType,
+          exclusive: true,
+          onChange: handleButtonType,
+          children: [/*#__PURE__*/_jsx(ToggleButton, {
+            value: "regular",
+            "aria-label": "regulard",
+            children: "Regular"
+          }), /*#__PURE__*/_jsx(ToggleButton, {
+            value: "hover",
+            "aria-label": "hover",
+            children: "Hover"
+          })]
+        }), /*#__PURE__*/_jsx(Divider, {
+          sx: {
+            mt: 2,
+            mb: 1
+          }
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          sx: {
+            mt: 1
+          },
+          "aria-labelledby": "demo-radio-buttons-group-label",
+          defaultValue: "primary",
+          name: "radio-buttons-group",
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "primary",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "fs-14",
+              children: "Primary button"
+            })
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "secondary",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              className: "fs-14",
+              children: "Secondary button"
+            })
+          })]
+        }), buttonData.map((item, Index) => /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "space-between",
+          sx: {
+            pt: 2
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            className: "fs-14",
+            children: item.title
+          }), /*#__PURE__*/_jsx(Grid, {
+            className: "xsColorBox",
+            sx: {
+              background: item.color
+            }
+          })]
+        }, Index))]
+      })]
+    })
+  });
+};
+export default styled(ColorTheme)(Style);

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

@@ -0,0 +1,77 @@
+const Style = () => ({
+  ".primaryColorBoxes": {
+    ".pmBox": {
+      border: "1px solid #D1D1D1",
+      height: "65px",
+      borderRadius: "4px",
+      position: "relative",
+      flexShrink: 0,
+      "&:hover": {
+        ".editBtn": {
+          opacity: "1",
+          visibility: "visible"
+        }
+      }
+    }
+  },
+  ".secondaryColorBoxes": {
+    gap: "10px",
+    ".sdBox": {
+      border: "1px solid #D1D1D1",
+      height: "60px",
+      borderRadius: "4px",
+      width: "100%",
+      flexShrink: 0,
+      position: "relative",
+      "&:hover": {
+        ".editBtn": {
+          opacity: "1",
+          visibility: "visible"
+        }
+      }
+    }
+  },
+  ".valyeText": {
+    position: "absolute",
+    right: "5px",
+    bottom: "5px"
+  },
+  ".editBtn": {
+    position: "absolute",
+    right: "2px",
+    top: "2px",
+    padding: "2px",
+    opacity: "0",
+    visibility: "hidden"
+  },
+  ".settingsSection": {
+    background: "#FFFFFF",
+    border: "1px solid #E4E6E9",
+    padding: "12px",
+    marginTop: "10px",
+    borderRadius: "7px"
+  },
+  ".toggleType": {
+    width: "100%",
+    border: "1px solid #2563EB",
+    background: "#F5F6F9",
+    borderRadius: "8px",
+    padding: "3px",
+    height: "40px",
+    ".MuiToggleButton-root": {
+      padding: "10px",
+      width: "50%",
+      border: "none",
+      textTransform: "unset",
+      fontSize: "14px",
+      color: "#64748B",
+      "&.Mui-selected": {
+        borderRadius: "8px",
+        background: "#2563EB",
+        color: "#fff",
+        fontWeight: "700"
+      }
+    }
+  }
+});
+export default Style;

package/dist/Editor/themeSettings/fonts/PreviewElement.js

@@ -0,0 +1,123 @@
+import { Grid, IconButton, Typography } from "@mui/material";
+import { useEditorTheme } from "../../hooks/useEditorTheme";
+import { PenIcon } from "../icons";
+import useWindowResize from "../../hooks/useWindowResize";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MAP_TEXT_PLACEHOLDER = {
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6",
+  para1: "Paragraph 1",
+  para2: "Paragraph 2",
+  para3: "Paragraph 3"
+};
+const MAP_COMP = {
+  para1: "p",
+  para2: "p",
+  para3: "p"
+};
+function getPreviewElementStyle(styleProperty, elementId) {
+  const element = document.getElementById(elementId);
+  if (element) {
+    const computedStyle = window.getComputedStyle(element);
+    return computedStyle.getPropertyValue(styleProperty) || "";
+  }
+}
+function getTextSettings(elementId, otherStyles = {}) {
+  return {
+    fontFamily: getPreviewElementStyle("font-family", elementId),
+    fontSize: getPreviewElementStyle("font-size", elementId),
+    fontWeight: getPreviewElementStyle("font-weight", elementId),
+    fontStyle: getPreviewElementStyle("font-style", elementId),
+    textDecoration: getPreviewElementStyle("text-decoration", elementId),
+    ...otherStyles
+  };
+}
+function getFontSize(fontSize = "", windowSize) {
+  let size = "";
+  if (typeof fontSize === "string") {
+    size = fontSize;
+  } else if (typeof fontSize === "object") {
+    size = fontSize[windowSize?.device];
+  }
+  return size?.includes("px") ? size : size + "px";
+}
+function PreviewElement(props) {
+  const {
+    field,
+    selectedField,
+    setSelectedField,
+    settings,
+    setSettings,
+    setAnchorEl
+  } = props;
+  const {
+    selectedTheme
+  } = useEditorTheme();
+  const {
+    elementProps = {}
+  } = selectedTheme || {};
+  const previewElementId = `theme-heading-element-preview-${field}`;
+  const Comp = MAP_COMP[field] || field;
+  const selectedSettings = selectedField === field ? settings : {};
+  const themeStyles = elementProps[field] || {};
+  const placeholder = MAP_TEXT_PLACEHOLDER[field];
+  const [windowSize] = useWindowResize();
+  const fontFamily = getPreviewElementStyle("font-family", previewElementId);
+  const {
+    fontSize = "",
+    color
+  } = themeStyles;
+  const size = getFontSize(fontSize, windowSize);
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    className: "fontTypeItem",
+    justifyContent: "space-between",
+    alignItems: "center",
+    wrap: "nowrap",
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        children: /*#__PURE__*/_jsx(Comp, {
+          id: previewElementId,
+          style: {
+            ...themeStyles,
+            ...selectedSettings,
+            fontSize: size
+          },
+          className: "preview-theme-text",
+          children: placeholder
+        })
+      }), /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        className: "flexAlign typeValue",
+        children: [/*#__PURE__*/_jsx(Grid, {
+          component: "span",
+          className: "dotColor",
+          style: {
+            background: selectedSettings?.color || color
+          }
+        }), /*#__PURE__*/_jsxs(Grid, {
+          component: "span",
+          children: [fontFamily, ",", size]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(IconButton, {
+      className: "editIcon",
+      onClick: e => {
+        setSettings(getTextSettings(previewElementId, {
+          color
+        }));
+        setSelectedField(field);
+        setAnchorEl(e.currentTarget);
+      },
+      children: /*#__PURE__*/_jsx(PenIcon, {})
+    })]
+  });
+}
+export default PreviewElement;

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

@@ -0,0 +1,213 @@
+import React from "react";
+import { Accordion, AccordionDetails, AccordionSummary, Checkbox, Divider, Fade, FormControlLabel, Grid, Paper, Popper, Typography, styled } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+// Style
+import Style from "./style";
+import ThemeTextFormat from "../../Toolbar/PopupTool/ThemeTextFormat";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import usePopupStyle from "../../Toolbar/PopupTool/PopupToolStyle";
+import useWindowResize from "../../hooks/useWindowResize";
+import PopperHeader from "../../Toolbar/PopupTool/PopperHeader";
+import { useEditorTheme } from "../../hooks/useEditorTheme";
+import { fontOptions } from "../../utils/font";
+import CustomSelect from "../../common/CustomSelect";
+import { HEADING_THEME_FIELDS, PARAGRAPH_THEME_FIELDS } from "../../helper/theme";
+import PreviewElement from "./PreviewElement";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Fonts = props => {
+  const {
+    className
+  } = props;
+  const [anchorEl, setAnchorEl] = React.useState();
+  const [selectedField, setSelectedField] = React.useState("");
+  const [settings, setSettings] = React.useState({});
+  const updateSettings = update => {
+    setSettings(prev => {
+      return {
+        ...prev,
+        ...update
+      };
+    });
+  };
+  const onClose = () => {
+    setAnchorEl(null);
+    setSelectedField("");
+    setSettings({});
+  };
+  const {
+    theme
+  } = useEditorContext();
+  const classes = usePopupStyle(theme);
+  const [size] = useWindowResize();
+  const {
+    selectedTheme,
+    updateTheme
+  } = useEditorTheme();
+  const {
+    otherProps = {}
+  } = selectedTheme || {};
+  const {
+    isHeadingCustomized,
+    headingFontFamily,
+    isParagraphCustomized,
+    paragraphFontFamily
+  } = otherProps;
+  const onSaveTextSettings = () => {
+    updateTheme(settings, {
+      action: "ELEMENT_PROPS_CHANGE",
+      fieldName: selectedField
+    });
+    onClose();
+  };
+  const updateOtherThemeProps = update => {
+    updateTheme(update, {
+      action: "OTHER_PROPS_CHANGE"
+    });
+  };
+  const updateFont = (update, fieldType) => {
+    updateTheme(update, {
+      action: "FONT_CHANGE",
+      fieldType
+    });
+  };
+  const tabs = [{
+    title: "Heading Font family",
+    onFontFamilyChange: e => {
+      const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
+      updateFont({
+        fontFamily
+      }, "HEADING");
+      updateSettings({
+        fontFamily
+      });
+    },
+    fontFamily: headingFontFamily ? fontOptions?.find(f => f.text === headingFontFamily)?.value : fontOptions[0].value,
+    isCustomized: isHeadingCustomized,
+    onCustomizeClick: event => {
+      updateOtherThemeProps({
+        isHeadingCustomized: event.target.checked
+      });
+    },
+    fields: HEADING_THEME_FIELDS
+  }, {
+    title: "Paragraph Font family",
+    onFontFamilyChange: e => {
+      const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
+      updateFont({
+        fontFamily
+      }, "PARAGRAPH");
+      updateSettings({
+        fontFamily
+      });
+    },
+    fontFamily: paragraphFontFamily ? fontOptions?.find(f => f.text === paragraphFontFamily)?.value : fontOptions[0].value,
+    isCustomized: isParagraphCustomized,
+    onCustomizeClick: event => {
+      updateOtherThemeProps({
+        isParagraphCustomized: event.target.checked
+      });
+    },
+    fields: PARAGRAPH_THEME_FIELDS
+  }];
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: className,
+    children: [/*#__PURE__*/_jsxs(Accordion, {
+      className: "settingAccordion",
+      children: [/*#__PURE__*/_jsx(AccordionSummary, {
+        expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+        "aria-controls": "panel1-content",
+        id: "panel1-header",
+        children: "Fonts"
+      }), /*#__PURE__*/_jsx(AccordionDetails, {
+        children: tabs?.map((tab, i) => {
+          const {
+            title,
+            onFontFamilyChange,
+            fontFamily,
+            isCustomized = "",
+            onCustomizeClick,
+            fields
+          } = tab;
+          return /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [/*#__PURE__*/_jsxs(Grid, {
+              sx: {
+                pt: 2
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                sx: {
+                  pb: 1
+                },
+                className: "fs-14 fw-500",
+                children: title
+              }), /*#__PURE__*/_jsx(CustomSelect, {
+                options: fontOptions,
+                onChange: onFontFamilyChange,
+                value: fontFamily
+              }), /*#__PURE__*/_jsx(FormControlLabel, {
+                control: /*#__PURE__*/_jsx(Checkbox, {
+                  checked: isCustomized,
+                  onChange: onCustomizeClick,
+                  size: "small"
+                }),
+                label: /*#__PURE__*/_jsx(Typography, {
+                  variant: "body2",
+                  className: "fs-12",
+                  children: "Customize Font style"
+                })
+              }), isCustomized && /*#__PURE__*/_jsx(Grid, {
+                ref: anchorEl,
+                children: fields.map((field, index) => {
+                  return /*#__PURE__*/_jsx(PreviewElement, {
+                    field: field,
+                    settings: settings,
+                    setSettings: setSettings,
+                    setAnchorEl: setAnchorEl,
+                    selectedField: selectedField,
+                    setSelectedField: setSelectedField
+                  }, index);
+                })
+              })]
+            }), i === 0 && /*#__PURE__*/_jsx(Divider, {
+              sx: {
+                mt: 1,
+                mb: 1
+              }
+            })]
+          }, i);
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      transition: true,
+      placement: "left-start",
+      sx: classes.popupWrapper,
+      className: `tools-drawer ${size?.device} textSettings`,
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        children: /*#__PURE__*/_jsxs(Paper, {
+          style: {
+            borderRadius: "10px",
+            position: "relative"
+          },
+          children: [/*#__PURE__*/_jsx(PopperHeader, {
+            title: "Text Settings",
+            classes: classes,
+            onClose: onClose
+          }), /*#__PURE__*/_jsx(ThemeTextFormat, {
+            settings: settings,
+            updateSettings: updateSettings,
+            onSaveTextSettings: onSaveTextSettings,
+            onClose: onClose
+          })]
+        })
+      })
+    })]
+  });
+};
+export default styled(Fonts)(Style);