@flozy/editor 2.1.1 → 2.1.2

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

@@ -1,419 +0,0 @@
-import React, { useState } from "react";
-import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
-import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
-import WidthFullIcon from "@mui/icons-material/WidthFull";
-import WidthNormalIcon from "@mui/icons-material/WidthNormal";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import FormatClearIcon from "@mui/icons-material/FormatClear";
-import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
-import { toolbarGroups } from "../toolbarGroups";
-import ColorPicker from "../../Elements/Color Picker/ColorPicker";
-import { activeMark, isBlockActive, toggleBlock, getBlockActive, upateBlockActive, addMarkData } from "../../utils/SlateUtilityFunctions";
-import LinkButton from "../../Elements/Link/LinkButton";
-import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
-import { AllColors } from "../../Elements/Color Picker/ColorButtons";
-import { fontFamilyMap } from "../../utils/font";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const allTools = toolbarGroups.flat();
-const ButtonComp = {
-  AccordionButton: AccordionButton
-};
-const MiniTextFormat = props => {
-  const {
-    classes,
-    editor
-  } = props;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [type, setType] = useState(null);
-  const open = Boolean(anchorEl);
-  const fontFamily = allTools.find(f => f.format === "fontFamily");
-  const fontWeight = allTools.find(f => f.format === "fontWeight");
-  const fontStyle = allTools.filter(f => f.type === "mark");
-  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
-  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
-  const lists = allTools.filter(f => f.group?.indexOf("list") >= 0);
-  const typo = allTools.filter(f => f.group?.indexOf("typography") >= 0);
-  const {
-    pageProps
-  } = getPageSettings(editor)?.element || {};
-  const {
-    pageWidth
-  } = pageProps;
-  const {
-    isActive: isBlockQuoteActive,
-    props: bqProps
-  } = getBlockActive(editor, "blockquote");
-  const {
-    color: bqColor,
-    bgColor: bqBgColor
-  } = bqProps || {
-    color: "",
-    bgColor: ""
-  };
-  const handlePageWidth = width => () => {
-    updatePageSettings(editor, {
-      ...(pageProps || {}),
-      pageWidth: width
-    });
-  };
-  const handleColorPicker = type => e => {
-    setType(type);
-    setAnchorEl(e.currentTarget);
-  };
-  const updateBlockQuote = attr => {
-    const upAttr = {
-      ...(bqProps || {}),
-      ...attr
-    };
-    delete upAttr.children;
-    delete upAttr.type;
-    if (isBlockQuoteActive && (upAttr.color || upAttr.bgColor)) {
-      upateBlockActive(editor, "blockquote", upAttr);
-    } else {
-      toggleBlock(editor, "blockquote", editor.selection, upAttr);
-    }
-  };
-  const onSelectColor = color => () => {
-    const attr = {
-      [type]: color
-    };
-    updateBlockQuote(attr);
-  };
-  const handleQuote = attr => () => {
-    updateBlockQuote(attr);
-  };
-  const onClosePicker = () => {
-    setAnchorEl(null);
-  };
-  const handleDefault = ({
-    format,
-    val
-  }) => () => {
-    const value = val ? val : "inherit";
-    addMarkData(editor, {
-      format,
-      value
-    });
-  };
-  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: handleDefault({
-              format: "fontFamily",
-              val: Object.values(fontFamilyMap)[0]
-            }),
-            children: "Default"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatField,
-        children: /*#__PURE__*/_jsx(Dropdown, {
-          classes: classes,
-          ...fontFamily,
-          editor: editor
-        })
-      })]
-    }), /*#__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(Dropdown, {
-            classes: classes,
-            ...fontWeight,
-            editor: editor,
-            width: "100%"
-          })
-        })]
-      }), /*#__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,
-            format: "fontSize",
-            activeMark: activeMark,
-            editor: editor,
-            fullWidth: true
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.textFormatField,
-      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: handleDefault({
-              format: "color"
-            }),
-            children: "Default"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        sx: classes.textFormatColorWrpr,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          format: "color",
-          activeMark: activeMark,
-          editor: editor,
-          showHex: false,
-          rounded: true,
-          title: "Text Color",
-          id: "11_cc",
-          classes: classes
-        }, "11_cc")
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.textFormatField,
-      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 Background Color"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn,
-              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
-              onClick: handleDefault({
-                format: "bgColor"
-              }),
-              children: "Default"
-            })
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatColorWrpr,
-        children: /*#__PURE__*/_jsx(ColorPicker, {
-          format: "bgColor",
-          activeMark: activeMark,
-          editor: editor,
-          showHex: false,
-          rounded: true,
-          title: "Text Background Color",
-          classes: classes,
-          id: "12_cc"
-        }, "12_cc")
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 6,
-      sx: classes.textFormatField,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Text Alignment"
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatCG,
-        children: fontAlign?.map((m, i) => {
-          return /*#__PURE__*/_jsx(BlockButton, {
-            editor: editor,
-            ...m
-          }, `pptool_block_${i}_${m.id}`);
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 6,
-      sx: classes.textFormatField,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Lists"
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatCG,
-        children: lists?.map((m, i) => {
-          const Comp = ButtonComp[m?.component] || BlockButton;
-          return /*#__PURE__*/_jsx(Comp, {
-            editor: editor,
-            ...m
-          }, `pptool_block_${i}_${m.id}`);
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Typography"
-      }), /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        className: "typo-icons",
-        sx: classes.evenSpace,
-        children: [typo?.map((m, i) => {
-          return /*#__PURE__*/_jsx(BlockButton, {
-            editor: editor,
-            ...m
-          }, `pptool_mark_${i}_${m.id}`);
-        }), fontStyle?.map((m, i) => {
-          return /*#__PURE__*/_jsx(MarkButton, {
-            editor: editor,
-            ...m
-          }, `pptool_mark_${i}_${m.id}`);
-        }), /*#__PURE__*/_jsx(LinkButton, {
-          active: isBlockActive(editor, link.format),
-          editor: editor
-        }, link.id)]
-      })]
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.evenSpace,
-      style: {
-        justifyContent: "space-between"
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Decorations"
-      })
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.evenSpace,
-      style: {
-        justifyContent: "space-between"
-      },
-      className: "text-decorations-wrpr",
-      children: [/*#__PURE__*/_jsxs(ButtonGroup, {
-        sx: classes.btnGroup,
-        children: [/*#__PURE__*/_jsx(Button, {
-          className: `no-hover ${bqBgColor ? "active" : ""}`,
-          onClick: handleQuote({
-            bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
-          }),
-          style: {
-            background: bqBgColor
-          },
-          children: "Colorbox"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleColorPicker("bgColor"),
-          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
-        })]
-      }), /*#__PURE__*/_jsxs(ButtonGroup, {
-        sx: classes.btnGroup,
-        children: [/*#__PURE__*/_jsx(Button, {
-          className: `no-hover ${bqColor ? "active" : ""}`,
-          onClick: handleQuote({
-            color: !bqColor ? "rgb(47, 94, 188)" : null
-          }),
-          children: /*#__PURE__*/_jsx("span", {
-            style: {
-              borderLeft: `3px solid ${bqColor || "rgb(47, 94, 188)"}`,
-              paddingLeft: "12px"
-            },
-            children: "Quote"
-          })
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleColorPicker("color"),
-          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
-        })]
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: handlePageWidth("fixed"),
-        startIcon: /*#__PURE__*/_jsx(WidthNormalIcon, {}),
-        sx: classes.pageWidthBtn,
-        className: pageWidth === "fixed" || !pageWidth ? "active" : "",
-        style: {
-          width: "45%"
-        },
-        children: "Centered"
-      }), /*#__PURE__*/_jsx(Button, {
-        sx: classes.pageWidthBtn,
-        className: pageWidth === "full" ? "active" : "",
-        onClick: handlePageWidth("full"),
-        startIcon: /*#__PURE__*/_jsx(WidthFullIcon, {}),
-        style: {
-          width: "45%"
-        },
-        children: "Full width"
-      })]
-    }), /*#__PURE__*/_jsx(AllColors, {
-      open: open,
-      anchorEl: anchorEl,
-      onClose: onClosePicker,
-      classes: classes,
-      onSelect: onSelectColor,
-      id: "all_1"
-    })]
-  });
-};
-export default MiniTextFormat;