@flozy/editor 9.8.2 → 9.8.3

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

@@ -1,436 +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 { 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.defaultBtn,
-              startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
-              onClick: () => updateSettings({
-                fontFamily: defaultFonts[0]
-              }),
-              children: "Default"
-            })
-          })]
-        }), /*#__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.defaultBtn,
-              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
-              onClick: () => updateSettings({
-                color: "#ddd"
-              }),
-              children: "Default"
-            })
-          })]
-        }), /*#__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: "secondaryBtn",
-        style: {
-          background: "none"
-        },
-        children: "Cancel"
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: onSaveTextSettings,
-        className: "primaryBtn",
-        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] = `${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/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;