@flozy/editor 9.8.5 → 9.8.6

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

@@ -0,0 +1,439 @@
+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] = `${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/Toolbar/PopupTool/index.js

@@ -95,9 +95,9 @@ const PopupTool = props => {
     const isFreeGridEnabled = enable === 1 && isFreeGridElement;
     if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
       setAnchorEl(null);
+      hideSlateSelection(); // removes slate selection background, when there is no selection
     } else {
       updateAnchorEl();
-      hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection, event, selectedElement?.enable]);
   const handleClose = () => {

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -28,16 +28,20 @@ export const toolbarGroups = [[{
   type: "dropdown",
   options: [{
     text: "Normal",
-    value: "normal"
+    value: "normal",
+    numVal: "400"
   }, {
     text: "Bold",
-    value: "bold"
+    value: "bold",
+    numVal: "700"
   }, {
     text: "Bolder",
-    value: "bolder"
+    value: "bolder",
+    numVal: "700"
   }, {
     text: "Lighter",
-    value: "lighter"
+    value: "lighter",
+    numVal: "100"
   }],
   icon: FormatBoldIcon,
   width: "100px"
@@ -46,7 +50,8 @@ export const toolbarGroups = [[{
   format: "bold",
   type: "mark",
   title: "Bold",
-  basic: true
+  basic: true,
+  themeEnabled: true
 }, {
   id: 5,
   format: "underline",
@@ -57,7 +62,8 @@ export const toolbarGroups = [[{
   format: "italic",
   type: "mark",
   title: "Italic",
-  basic: true
+  basic: true,
+  themeEnabled: true
 }, {
   id: 6,
   format: "strikethrough",
@@ -101,6 +107,42 @@ export const toolbarGroups = [[{
   type: "block",
   title: "H3",
   group: "typography"
+}, {
+  id: 39,
+  format: "headingFour",
+  type: "block",
+  title: "H4",
+  group: "typography"
+}, {
+  id: 40,
+  format: "headingFive",
+  type: "block",
+  title: "H5",
+  group: "typography"
+}, {
+  id: 41,
+  format: "headingSix",
+  type: "block",
+  title: "H6",
+  group: "typography"
+}, {
+  id: 42,
+  format: "paragraphOne",
+  type: "block",
+  title: "Paragraph 1",
+  group: "typography"
+}, {
+  id: 43,
+  format: "paragraphTwo",
+  type: "block",
+  title: "Paragraph 2",
+  group: "typography"
+}, {
+  id: 44,
+  format: "paragraphThree",
+  type: "block",
+  title: "Paragraph 3",
+  group: "typography"
 }, {
   id: 14,
   format: "doublequote",

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,23 @@
+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;