@flozy/editor 3.8.1 → 3.8.2

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

@@ -1,438 +0,0 @@
-import { Button, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import { fontFamilyMap, fontOptions } from "../../utils/font";
-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 { 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
-  } = 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 fontOptions?.find(f => f.text === font)?.value;
-  }, [settings, fontOptions]);
-  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(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: Object.values(fontFamilyMap)[0]
-            }),
-            children: "Default"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatField,
-        children: /*#__PURE__*/_jsx(CustomSelect, {
-          options: fontOptions,
-          classes: classes,
-          onChange: e => {
-            const fontFamily = fontOptions.find(f => f.value === e.target.value)?.text;
-            updateSettings({
-              fontFamily
-            });
-          },
-          value: fontFamilyVal || fontOptions[0].value
-        })
-      })]
-    }), /*#__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__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.textFormatField,
-      style: {
-        marginTop: "14px"
-      },
-      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__*/_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__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: {
-        mt: 2
-      },
-      children: /*#__PURE__*/_jsxs("div", {
-        style: {
-          display: "flex",
-          justifyContent: "end",
-          margin: "8px",
-          position: "absolute",
-          bottom: 0,
-          right: 0
-        },
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: onClose,
-          className: "secondaryBtn",
-          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
-      })
-    })]
-  });
-}