@flozy/editor 10.5.0 → 10.5.1

package/dist/Editor/Elements/FreeGrid/helper.js

@@ -1,115 +0,0 @@
-import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
-import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
-import { RND_ITEMS } from "../../helper";
-export const ELEMENT_CASE = {
-  ADD_TEXT: "addText",
-  ADD_BUTTON: "addButton",
-  ADD_SIGNATURE: "addSignature",
-  ADD_IMAGE: "addImage",
-  ADD_VIDEO: "addVideo",
-  ADD_TABLE: "addTable",
-  ADD_CODE: "addCode",
-  ADD_BOX: "addBox",
-  ADD_FORM: "addForm",
-  ADD_APP_HEADER: "addAppHeader",
-  ADD_DIVIDER: "addDivider"
-};
-const commonXsValues = {
-  top_xs: 0,
-  marginTop_xs: 12,
-  left_xs: 24,
-  width_xs: 272,
-  xs_updatedOn: new Date().getTime()
-};
-const elementXsValues = {
-  [ELEMENT_CASE.ADD_TEXT]: {
-    ...commonXsValues,
-    height_xs: 50
-  },
-  [ELEMENT_CASE.ADD_BUTTON]: {
-    ...commonXsValues,
-    height_xs: 50
-  },
-  [ELEMENT_CASE.ADD_SIGNATURE]: {
-    ...commonXsValues,
-    height_xs: 173
-  },
-  [ELEMENT_CASE.ADD_IMAGE]: {
-    ...commonXsValues,
-    height_xs: 80
-  },
-  [ELEMENT_CASE.ADD_VIDEO]: {
-    ...commonXsValues,
-    height_xs: 300
-  },
-  [ELEMENT_CASE.ADD_TABLE]: {
-    ...commonXsValues,
-    height_xs: 165
-  },
-  [ELEMENT_CASE.ADD_CODE]: {
-    ...commonXsValues,
-    height: 300
-  },
-  [ELEMENT_CASE.ADD_BOX]: {
-    ...commonXsValues,
-    height_xs: 300
-  },
-  [ELEMENT_CASE.ADD_FORM]: {
-    ...commonXsValues,
-    height_xs: 80
-  },
-  [ELEMENT_CASE.ADD_APP_HEADER]: {
-    ...commonXsValues,
-    height_xs: 80
-  },
-  [ELEMENT_CASE.ADD_DIVIDER]: {
-    ...commonXsValues,
-    height_xs: 24
-  }
-};
-export const findMaxYValue = (sectionItems, breakpoint) => {
-  let maxY = 0;
-  sectionItems.forEach(item => {
-    const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
-    if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
-      const {
-        bottom
-      } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
-      maxY = Math.max(maxY, bottom);
-    }
-  });
-  return maxY;
-};
-export const convertToGridArea = y => {
-  // Calculate grid position
-  const row = Math.floor(y / ROW_HEIGHT) + 1;
-
-  // to calculate difference inside the grid
-  const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
-
-  // Update grid area
-  const gridArea = `${row} / 1 / ${row + 1} / 2`;
-  return {
-    gridArea,
-    marginTop
-  };
-};
-export const getNewElementXsValues = (type, sectionItems) => {
-  const values = elementXsValues[type] || {};
-  const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
-  const {
-    gridArea,
-    marginTop
-  } = convertToGridArea(y);
-  const BUFFER_MARGIN_TOP = 12;
-  const xsVal = {
-    ...values,
-    gridArea_xs: gridArea,
-    marginTop_xs: marginTop + BUFFER_MARGIN_TOP
-  };
-  const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
-  return {
-    xsVal,
-    sectionHeightXs
-  };
-};

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

@@ -1,439 +0,0 @@
-import { Box, Button, Divider, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
-import { useEditorContext } from "../../hooks/useMouseMove";
-// import FormatClearIcon from "@mui/icons-material/FormatClear";
-import usePopupStyles from "../PopupTool/PopupToolStyle";
-import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist";
-import { BREAKPOINTS_DEVICES, getBreakPointsValue, getVariableValue } from "../../helper/theme";
-import useWindowResize from "../../hooks/useWindowResize";
-import { toolbarGroups } from "../toolbarGroups";
-import Icon from "../../common/Icon";
-import { useMemo, useState } from "react";
-import CommonButton from "../../common/Button";
-import CustomSelect from "../../common/CustomSelect";
-import ColorButtons from "../../Elements/Color Picker/ColorButtons";
-// import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
-import ColorPickerStyles from "../../Elements/Color Picker/Styles";
-import colorWheel from "../../Elements/Color Picker/colorWheel.png";
-import CustomColorPicker from "../../common/CustomColorPicker";
-import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
-import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList";
-import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
-import { fontFamilyMap } from "../../utils/font";
-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 getFontStyleProps(settings = {}, format) {
-  const {
-    fontWeight,
-    fontStyle
-  } = settings;
-  let isActive;
-  let onClick;
-  switch (format) {
-    case "bold":
-      isActive = fontWeight === "bold" || fontWeight === "700";
-      onClick = () => {
-        return {
-          fontWeight: isActive ? "normal" : "bold"
-        };
-      };
-      break;
-    case "italic":
-      isActive = fontStyle === "italic";
-      onClick = () => {
-        return {
-          fontStyle: isActive ? "unset" : "italic"
-        };
-      };
-      break;
-
-    // case "underline":
-    //   isActive = textDecoration.includes("underline");
-    //   onClick = () => {
-    //     let otherTextDecoration = textDecoration?.includes("line-through")
-    //       ? "line-through"
-    //       : "";
-
-    //     otherTextDecoration += isActive ? "" : " underline";
-
-    //     return { textDecoration: otherTextDecoration };
-    //   };
-    //   break;
-    // case "strikethrough":
-    //   isActive = textDecoration.includes("line-through");
-    //   onClick = () => {
-    //     let otherTextDecoration = textDecoration?.includes("underline")
-    //       ? "underline"
-    //       : "";
-
-    //     otherTextDecoration += isActive ? "" : " line-through";
-
-    //     return { textDecoration: otherTextDecoration };
-    //   };
-    //   break;
-
-    default:
-      isActive = false;
-      onClick = () => {};
-      break;
-  }
-  return {
-    isActive,
-    onClick
-  };
-}
-const allTools = toolbarGroups.flat();
-function ThemeTextFormat(props) {
-  const {
-    settings,
-    updateSettings,
-    onSaveTextSettings,
-    onClose
-  } = props;
-  const {
-    theme,
-    fontFamilies
-  } = useEditorContext();
-  const classes = usePopupStyles(theme);
-  const pickerStyles = ColorPickerStyles(theme);
-  const fontStyle = allTools.filter(f => f.type === "mark" && f.themeEnabled);
-  const fontWeight = allTools.find(f => f.format === "fontWeight");
-  const fontFamilyVal = useMemo(() => {
-    const {
-      fontFamily = ""
-    } = settings;
-    let font = fontFamily.startsWith("var") ? getVariableValue(fontFamily) : fontFamily;
-    return font;
-  }, [settings]);
-  const fontWeightVal = useMemo(() => {
-    const {
-      options
-    } = fontWeight || {};
-    const selected = options?.find(o => o.value === settings?.fontWeight || o.numVal === settings?.fontWeight);
-    return selected?.value;
-  }, [settings?.fontWeight]);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: classes.textFormatContainer,
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      sx: classes.textFormatWrapper,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        children: [/*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          justifyContent: "space-between",
-          alignItems: "center",
-          children: [/*#__PURE__*/_jsx(Grid, {
-            item: true,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              color: "primary",
-              sx: classes.typoLabel,
-              children: "Font Family"
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn1,
-              startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
-              onClick: () => updateSettings({
-                fontFamily: Object.values(fontFamilyMap)[0]
-              }),
-              className: "npr-0",
-              children: "Default Text"
-            })
-          })]
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          sx: classes.textFormatField,
-          children: /*#__PURE__*/_jsx(FontFamilyAutocomplete, {
-            editor: {},
-            format: "fontFamily",
-            options: fontFamilies?.options,
-            width: "100%",
-            onChange: updateSettings,
-            val: fontFamilyVal || defaultFonts[0],
-            webFont: true
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        children: [/*#__PURE__*/_jsxs(Grid, {
-          item: true,
-          xs: 6,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            sx: classes.typoLabel,
-            children: "Font Weight"
-          }), /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: 12,
-            sx: classes.textFormatField,
-            children: /*#__PURE__*/_jsx(CustomSelect, {
-              options: fontWeight?.options || [],
-              classes: classes,
-              onChange: e => {
-                updateSettings({
-                  fontWeight: e.target.value
-                });
-              },
-              value: fontWeightVal
-            })
-          })]
-        }), /*#__PURE__*/_jsxs(Grid, {
-          item: true,
-          xs: 6,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            sx: classes.typoLabel,
-            children: "Font Size"
-          }), /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: 12,
-            sx: classes.textFormatCG,
-            children: /*#__PURE__*/_jsx(TextSize, {
-              classes: classes,
-              value: settings?.fontSize || 16,
-              onChange: fontSize => updateSettings({
-                fontSize
-              }),
-              fullWidth: true
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.dividerGrid,
-        children: /*#__PURE__*/_jsx(Divider, {})
-      }), /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        children: [/*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          justifyContent: "space-between",
-          alignItems: "center",
-          children: [/*#__PURE__*/_jsx(Grid, {
-            item: true,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body1",
-              color: "primary",
-              sx: classes.typoLabel,
-              children: "Text Color"
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn1,
-              startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
-              onClick: () => updateSettings({
-                color: "#ddd"
-              }),
-              children: "Default Color"
-            })
-          })]
-        }), /*#__PURE__*/_jsx(Grid, {
-          sx: classes.textFormatColorWrpr,
-          children: /*#__PURE__*/_jsx(ColorPicker, {
-            classes: classes,
-            pickerStyles: pickerStyles,
-            onChange: color => updateSettings({
-              color
-            }),
-            color: settings?.color,
-            disableEditTheme: true
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.dividerGrid,
-        children: /*#__PURE__*/_jsx(Divider, {})
-      }), /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "primary",
-          sx: classes.typoLabel,
-          children: "Typography"
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          className: "typo-icons",
-          sx: classes.evenSpace,
-          children: fontStyle?.map((m, i) => {
-            const {
-              isActive,
-              onClick
-            } = getFontStyleProps(settings, m.format) || {};
-            return /*#__PURE__*/_jsx(CommonButton, {
-              active: isActive,
-              onClick: () => {
-                const style = onClick();
-                updateSettings(style);
-              },
-              children: /*#__PURE__*/_jsx(Icon, {
-                icon: m.format
-              })
-            }, i);
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "saveThemeBtnsWrapper",
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: onClose,
-        className: "closeBtn",
-        style: {
-          background: "none"
-        },
-        children: "Cancel"
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: onSaveTextSettings,
-        className: "confirmBtn",
-        children: "Save"
-      })]
-    })]
-  });
-}
-export default ThemeTextFormat;
-function TextSize(props) {
-  const {
-    classes,
-    value: val,
-    onChange,
-    fullWidth
-  } = props;
-  const [size] = useWindowResize();
-  const value = getBreakPointsValue(val, size?.device);
-  const updateMarkData = newVal => {
-    let upData = {
-      ...getBreakPointsValue(val),
-      [size?.device]: `${newVal}px`
-    };
-
-    // if desktop update to all other devices
-    // to avoid default normal size
-    if (size?.device === "lg") {
-      upData = BREAKPOINTS_DEVICES.reduce((a, b) => {
-        a[b] = upData[b] || `${newVal}px`;
-        return a;
-      }, {});
-    }
-    onChange(upData);
-  };
-  const onChangeSize = e => {
-    let inc = parseInt(e.target.value) || 8;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc || 8);
-  };
-  const getSizeVal = () => {
-    try {
-      return parseInt(value);
-    } catch (err) {
-      return "";
-    }
-  };
-  const combinedOldVal = getSizeVal();
-  const onIncreaseSize = () => {
-    let inc = (combinedOldVal || 0) + 1;
-    inc = inc > 200 ? 200 : inc;
-    updateMarkData(inc);
-  };
-  const onDecreaseSize = () => {
-    const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
-    updateMarkData(newVal);
-  };
-  return /*#__PURE__*/_jsx(TextField, {
-    sx: classes?.textSize,
-    value: combinedOldVal,
-    onChange: onChangeSize,
-    size: "small",
-    inputProps: {
-      style: {
-        width: fullWidth ? "100%" : "30px",
-        textAlign: "center",
-        height: "19px",
-        fontSize: "14px"
-      }
-    },
-    fullWidth: fullWidth,
-    InputProps: {
-      style: {
-        borderRadius: "8px"
-      },
-      endAdornment: /*#__PURE__*/_jsxs("div", {
-        className: "textFontArrows",
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          onClick: onIncreaseSize,
-          size: "small",
-          children: /*#__PURE__*/_jsx(TextPlusIcon, {})
-        }), /*#__PURE__*/_jsx(IconButton, {
-          onClick: onDecreaseSize,
-          size: "small",
-          children: /*#__PURE__*/_jsx(TextMinusIcon, {})
-        })]
-      })
-    }
-  });
-}
-function ColorPicker(props) {
-  const {
-    classes,
-    pickerStyles,
-    onChange,
-    color,
-    disableEditTheme
-  } = props;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: "",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        sx: pickerStyles.colorPickerIcon,
-        onClick: e => {
-          setAnchorEl(e.currentTarget);
-        },
-        children: /*#__PURE__*/_jsx("img", {
-          src: colorWheel,
-          alt: "color wheel"
-        })
-      })
-    }), /*#__PURE__*/_jsx(ColorButtons, {
-      classes: pickerStyles,
-      onSelect: onChange,
-      activeColor: color,
-      disableEditTheme: disableEditTheme
-    }), /*#__PURE__*/_jsx(Popover, {
-      open: open,
-      anchorEl: anchorEl,
-      onClose: handleClose,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "bottom",
-        horizontal: "top"
-      },
-      sx: classes.colorPickerPopup,
-      children: /*#__PURE__*/_jsx(CustomColorPicker, {
-        gradient: true,
-        onChange: onChange,
-        color: color,
-        disableEditTheme: disableEditTheme
-      })
-    })]
-  });
-}

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

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function BackIcon() {
-  return /*#__PURE__*/_jsx("svg", {
-    width: "8",
-    height: "12",
-    viewBox: "0 0 6 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /*#__PURE__*/_jsx("path", {
-      d: "M4.75 1.5L1.25 5L4.75 8.5",
-      stroke: "#94A3B8",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export default BackIcon;

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

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ClearAllIcon = () => /*#__PURE__*/_jsxs("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "20",
-  height: "20",
-  viewBox: "0 0 20 20",
-  children: [/*#__PURE__*/_jsx("rect", {
-    x: "4",
-    y: "5",
-    width: "12",
-    height: "2",
-    rx: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/_jsx("rect", {
-    x: "4",
-    y: "9",
-    width: "10",
-    height: "2",
-    rx: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/_jsx("rect", {
-    x: "4",
-    y: "13",
-    width: "12",
-    height: "2",
-    rx: "1",
-    fill: "currentColor"
-  })]
-});
-export default ClearAllIcon;

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

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ResetIconNew = () => {
-  return /*#__PURE__*/_jsxs("svg", {
-    width: "17",
-    height: "17",
-    viewBox: "0 0 17 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/_jsx("circle", {
-      cx: "8.10105",
-      cy: "8.10234",
-      r: "8",
-      transform: "rotate(-89.2717 8.10105 8.10234)",
-      fill: "#2563EB",
-      fillOpacity: "0.16"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M12.7169 8.22222V8.22222C12.7168 8.2323 12.7289 8.23752 12.7361 8.2305L13.3823 7.6035C13.6597 7.33434 14.0843 7.33974 14.3547 7.61586C14.6252 7.89199 14.6198 8.31458 14.3424 8.58375L12.6992 10.1595C12.3035 10.5389 11.6762 10.5291 11.2926 10.1375L9.71318 8.5249C9.57796 8.38683 9.51173 8.20874 9.51381 8.04516C9.51606 7.86794 9.58679 7.69159 9.72531 7.57064C10.0027 7.30148 10.4273 7.30688 10.6977 7.583L11.3182 8.21649C11.3288 8.22729 11.3471 8.21993 11.3473 8.20481V8.20481C11.374 6.10545 9.67017 4.36586 7.56099 4.33905C5.45182 4.31224 3.70429 6.00795 3.6776 8.10731C3.65091 10.2067 5.35477 11.9463 7.46394 11.9731C7.84743 11.9779 8.14493 12.2817 8.14007 12.6634C8.13522 13.0451 7.8301 13.3412 7.44661 13.3363C4.57046 13.2997 2.27161 10.9527 2.30801 8.0899C2.3444 5.22714 4.70217 2.93927 7.57832 2.97583C10.4408 3.01222 12.7533 5.35946 12.7169 8.22222Z",
-      fill: "#2563EB"
-    })]
-  });
-};
-export default ResetIconNew;