@flozy/editor 11.2.1 → 11.2.2

package/package.json

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

package/dist/Editor/Elements/Attachments/AttachmentStyles.js

@@ -1,16 +0,0 @@
-const useAttachmentStyle = theme => ({
-  attachmentRoot: {
-    "& .uploadinDetails": {
-      display: "flex",
-      gap: "10px",
-      "& .MuiCircularProgress-root": {
-        width: "15px !important",
-        height: "15px !important"
-      }
-    },
-    "& .cancelBtn": {
-      display: "contents"
-    }
-  }
-});
-export default useAttachmentStyle;

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

@@ -1,194 +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 elementValues = {
-  [ELEMENT_CASE.ADD_TEXT]: {
-    gridArea: "3 / 1 / 4 / 2",
-    left: 50,
-    marginTop: 0,
-    top: 0,
-    width: 170,
-    height: 30,
-    height_xs: 50,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_BUTTON]: {
-    gridArea: "3 / 1 / 4 / 2",
-    left: 50,
-    marginTop: 0,
-    top: 0,
-    width: 143,
-    height: 50,
-    height_xs: 50,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_SIGNATURE]: {
-    left: 50,
-    marginTop: 0,
-    top: 0,
-    width: 217,
-    height: 173,
-    height_xs: 173,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_IMAGE]: {
-    gridArea: "3 / 1 / 4 / 2",
-    left: 50,
-    marginTop: 0,
-    top: 0,
-    width: 170,
-    height: 80,
-    height_xs: 80,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_VIDEO]: {
-    height: 370,
-    width: 650,
-    height_xs: 300,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_TABLE]: {
-    height: 150,
-    width: 400,
-    height_xs: 165,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_CODE]: {
-    gridArea: "3 / 1 / 4 / 2",
-    left: 50,
-    marginTop: 0,
-    top: 0,
-    width: 400,
-    height: 300,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_BOX]: {
-    height_xs: 300,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_FORM]: {
-    height: 92,
-    width: 400,
-    height_xs: 80,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_APP_HEADER]: {
-    height: 60,
-    width: 400,
-    height_xs: 80,
-    ...commonXsValues
-  },
-  [ELEMENT_CASE.ADD_DIVIDER]: {
-    gridArea: "3 / 1 / 4 / 2",
-    left: 50,
-    marginTop: 0,
-    top: 0,
-    width: 170,
-    height: 30,
-    height_xs: 24,
-    ...commonXsValues
-  }
-};
-export const findMaxYValue = (sectionItems, breakpoint) => {
-  let maxY = 0;
-  sectionItems.forEach(item => {
-    if (!item?.type) {
-      return;
-    }
-    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
-  };
-};
-const BUFFER_MARGIN_TOP = 12;
-const getInsertValues = (sectionItems, breakpoint, elValues) => {
-  const y_xs = sectionItems?.length ? findMaxYValue(sectionItems, breakpoint) : 0;
-  const {
-    gridArea,
-    marginTop
-  } = convertToGridArea(y_xs);
-  const appendBp = breakpoint === "lg" ? "" : "_xs";
-  const insertPos = {
-    [`gridArea${appendBp}`]: gridArea,
-    [`marginTop${appendBp}`]: marginTop + BUFFER_MARGIN_TOP
-  };
-  const sectionHeight = y_xs + elValues[`height${appendBp}`] + BUFFER_MARGIN_TOP + 12;
-  return {
-    insertPos,
-    sectionHeight
-  };
-};
-export const getElementValues = (type, sectionItems, breakpoint) => {
-  const elValues = elementValues[type] || {};
-  let elInsertPos = {};
-  let sectionVal = {};
-
-  // insert element on xs
-  const {
-    insertPos: insertPos_xs,
-    sectionHeight: sectionHeight_xs
-  } = getInsertValues(sectionItems, "xs", elValues);
-  elInsertPos = {
-    ...insertPos_xs
-  };
-  sectionVal.height_xs = sectionHeight_xs;
-
-  // if user in xs, auto-align lg
-  if (breakpoint === "xs") {
-    const {
-      insertPos: insertPos_lg,
-      sectionHeight
-    } = getInsertValues(sectionItems, "lg", elValues);
-    elInsertPos = {
-      ...elInsertPos,
-      ...insertPos_lg
-    };
-    sectionVal.height = sectionHeight;
-  }
-  return {
-    elValues: {
-      ...elValues,
-      ...elInsertPos
-    },
-    sectionVal
-  };
-};

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;