@flozy/editor 2.1.0 → 2.1.2

package/dist/Editor/Toolbar/Basic/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useSlateStatic } from "slate-react";
-import { Box, Tooltip } from "@mui/material";
+import { Box, Divider, Grid, Tooltip } from "@mui/material";
 import { toolbarGroups } from "../toolbarGroups";
 import { MarkButton } from "../FormatTools";
 import LinkButton from "../../Elements/Link/LinkButton";
@@ -17,13 +17,14 @@ const BasicToolbar = props => {
   // props
   const {
     otherProps: {
-      variableOptions
+      variableOptions,
+      fontStyleOptions
     }
   } = props;
 
   // state
   const [activeColor, setActiveColor] = useState("#000000");
-  const fontStyle = allTools.filter(f => f.basic);
+  const fontStyle = allTools.filter(f => f.basic || fontStyleOptions?.includes(f.format));
   const link = allTools.find(f => f.format?.indexOf("link") >= 0);
   const handleTextColor = color => {
     setActiveColor(color);
@@ -35,32 +36,60 @@ const BasicToolbar = props => {
   return /*#__PURE__*/_jsxs(Box, {
     component: 'div',
     className: "basic-toolbar",
-    children: [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(Tooltip, {
-      title: "Font Color",
-      children: /*#__PURE__*/_jsx(ColorPickerButton, {
-        value: activeColor || "#0000",
-        onSave: color => {
-          handleTextColor(color);
-        },
-        defaultColors: colors
-      })
-    }), variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
-      placeholder: "Variables",
-      options: variableOptions
-    })]
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      sx: {
+        padding: '10px'
+      },
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      children: [/*#__PURE__*/_jsx(Grid, {
+        item: true,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          alignItems: 'center',
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: fontStyle?.map((m, i) => {
+              return /*#__PURE__*/_jsx(MarkButton, {
+                editor: editor,
+                ...m
+              }, `pptool_mark_${i}_${m.id}`);
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(LinkButton, {
+              active: isBlockActive(editor, link.format),
+              editor: editor
+            }, link.id)
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(Tooltip, {
+              title: "Font Color",
+              children: /*#__PURE__*/_jsx(ColorPickerButton, {
+                value: activeColor || "#0000",
+                onSave: color => {
+                  handleTextColor(color);
+                },
+                defaultColors: colors
+              })
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
+          placeholder: "Variables",
+          options: variableOptions
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Divider, {})]
   });
 };
 BasicToolbar.defaultProps = {
   otherProps: {
-    variableOptions: []
+    variableOptions: [],
+    fontStyleOptions: []
   }
 };
 export default BasicToolbar;

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

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
+import { Button, Popover } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const CustomSelectTool = ({
+  classes,
+  value,
+  options = [],
+  onChange
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const selected = options?.find(o => o.value === value);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Button, {
+      className: `customSelectTool`,
+      onClick: e => {
+        e.preventDefault();
+        setAnchorEl(e.currentTarget);
+      },
+      children: [selected?.label || selected?.title, " ", /*#__PURE__*/_jsx(DownArrowIcon, {})]
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: () => setAnchorEl(null),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      sx: classes.customSelectPopoverWrapper,
+      children: options.map((option, i) => {
+        return /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            className: `customSelectOptionLabel ${value === option.value ? "selected" : ""}`,
+            onClick: () => {
+              onChange(option.value, option);
+            },
+            children: option.title
+          })
+        }, i);
+      })
+    })]
+  });
+};
+export default CustomSelectTool;

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

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Button } from "@mui/material";
+import PaintIcon from "../../../assets/svg/PaintIcon";
+import ColorPicker from "../../../Elements/Color Picker/ColorPicker";
+import { activeMark } from "../../../utils/SlateUtilityFunctions";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function MiniColorPicker(props) {
+  const {
+    activeColor,
+    format,
+    classes,
+    id,
+    editor
+  } = props;
+  const [openColorTool, setOpenColorTool] = useState(null);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Button, {
+      className: "fontColorBtn",
+      onClick: e => setOpenColorTool(e.currentTarget),
+      children: [format === "color" ? "A" : /*#__PURE__*/_jsx(PaintIcon, {}), /*#__PURE__*/_jsx("div", {
+        className: "selectedColor",
+        style: {
+          background: activeColor
+        }
+      })]
+    }), /*#__PURE__*/_jsx(ColorPicker, {
+      format: format,
+      activeMark: activeMark,
+      editor: editor,
+      showHex: false,
+      title: "Text Color",
+      id: id,
+      classes: classes,
+      forMiniTool: true,
+      openColorTool: openColorTool,
+      closeColorTool: () => setOpenColorTool(null)
+    }, id)]
+  });
+}
+export default MiniColorPicker;

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

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import Icon from "../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  icon,
+  label
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    className: "menuOptions",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }), " ", label]
+  });
+}
+const alignmentOptions = [{
+  id: 17,
+  value: "alignLeft",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "alignLeft",
+    label: "Left Align"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "alignLeft"
+  })
+}, {
+  id: 18,
+  value: "alignCenter",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "alignCenter",
+    label: "Center Align"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "alignCenter"
+  })
+}, {
+  id: 19,
+  value: "alignRight",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "alignRight",
+    label: "Right Align"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "alignRight"
+  })
+}];
+function SelectAlignment({
+  editor,
+  classes
+}) {
+  const selected = useMemo(() => {
+    return alignmentOptions.find(t => isBlockActive(editor, t.value));
+  }, [alignmentOptions, isBlockActive, editor]);
+  const onChange = (format, option) => {
+    if (option.type === "block") {
+      toggleBlock(editor, format);
+    }
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: alignmentOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selected?.value || "alignLeft",
+    classes: classes
+  });
+}
+export default SelectAlignment;

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

@@ -0,0 +1,92 @@
+import { useMemo } from "react";
+import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import Icon from "../../../common/Icon";
+import { insertAccordion } from "../../../utils/accordion";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  icon,
+  label
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    className: "menuOptions",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }), " ", label]
+  });
+}
+const listOptions = [{
+  id: 15,
+  value: "orderedList",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "orderedList",
+    label: "Ordered List"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "orderedList"
+  }),
+  group: "list"
+}, {
+  id: 16,
+  value: "unorderedList",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "unorderedList",
+    label: "Bulleted List"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "unorderedList"
+  }),
+  group: "list"
+}, {
+  id: 43,
+  value: "check-list-item",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "check-list-item",
+    label: "Check List"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "check-list-item"
+  }),
+  group: "list"
+}, {
+  id: 30,
+  value: "accordion",
+  type: "accordion",
+  group: "list",
+  component: "AccordionButton",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "accordion",
+    label: "Accordion"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "accordion"
+  })
+}];
+function SelectList({
+  editor,
+  classes
+}) {
+  const selectedList = useMemo(() => {
+    return listOptions.find(t => isBlockActive(editor, t.value));
+  }, [listOptions, isBlockActive, editor]);
+  const onChange = (format, option) => {
+    if (option.type === "block") {
+      toggleBlock(editor, format);
+    } else if (option.type === "accordion") {
+      toggleBlock(editor, format);
+      insertAccordion(editor);
+    }
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: listOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selectedList?.value || "orderedList",
+    classes: classes
+  });
+}
+export default SelectList;

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

@@ -0,0 +1,172 @@
+import { useMemo } from "react";
+import { activeMark, addMarkData, isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
+import { sizeMap } from "../../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  label,
+  type
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    children: [/*#__PURE__*/_jsx("strong", {
+      children: label
+    }), " ", type]
+  });
+}
+function DisplayHeaderLabel({
+  type
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    children: ["H", /*#__PURE__*/_jsx("sub", {
+      children: type
+    })]
+  });
+}
+const typographyOptions = [{
+  id: 11,
+  format: "headingOne",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "H1",
+    type: "Header"
+  }),
+  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+    type: 1
+  }),
+  group: "typography",
+  value: "headingOne"
+}, {
+  id: 12,
+  format: "headingTwo",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "H2",
+    type: "Header"
+  }),
+  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+    type: 2
+  }),
+  group: "typography",
+  value: "headingTwo"
+}, {
+  id: 13,
+  format: "headingThree",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "H3",
+    type: "Header"
+  }),
+  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+    type: 3
+  }),
+  group: "typography",
+  value: "headingThree"
+}, {
+  id: 14,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "L",
+    type: "Large"
+  }),
+  label: "L",
+  group: "typography",
+  value: "huge"
+}, {
+  id: 15,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "M",
+    type: "Medium"
+  }),
+  label: "M",
+  group: "typography",
+  value: "medium"
+}, {
+  id: 16,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "S",
+    type: "Small"
+  }),
+  label: "S",
+  group: "typography",
+  value: "small"
+}];
+function SelectTypography({
+  editor,
+  classes,
+  closeMainPopup
+}) {
+  const [size] = useWindowResize();
+  const updateMarkData = newVal => {
+    const val = activeMark(editor, "fontSize");
+    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;
+      }, {});
+    }
+    addMarkData(editor, {
+      format: "fontSize",
+      value: {
+        ...upData
+      }
+    });
+    closeMainPopup();
+  };
+  const selectedBlock = useMemo(() => {
+    return typographyOptions.find(t => {
+      if (t.type === "block") {
+        return isBlockActive(editor, t.format);
+      } else if (t.type === "mark") {
+        const val = activeMark(editor, t.format);
+        if (val) {
+          const value = getBreakPointsValue(val, size?.device);
+          let selected;
+          Object.entries(sizeMap).forEach(([key, v]) => {
+            if (v === value) {
+              selected = key;
+            }
+          });
+          return selected === t.value;
+        }
+      }
+    });
+  }, [typographyOptions, activeMark, isBlockActive, editor]);
+  const onChange = (format, option) => {
+    // add/reset block elements
+    toggleBlock(editor, format);
+    if (option.type === "block") {
+      // reset old font size
+      addMarkData(editor, {
+        format: "fontSize",
+        value: {}
+      });
+    } else if (option.type === "mark") {
+      const size = sizeMap[option.value] || "";
+      const [sizeInNumber] = size.split("px");
+      updateMarkData(Number(sizeInNumber));
+    }
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: typographyOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selectedBlock?.value || "headingOne",
+    classes: classes
+  });
+}
+export default SelectTypography;

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

@@ -0,0 +1,124 @@
+import { Button, Fade, Grid, Paper, Popper } from "@mui/material";
+import SelectTypography from "./SelectTypography";
+import SelectList from "./SelectList";
+import { toolbarGroups } from "../../toolbarGroups";
+import { MarkButton } from "../../FormatTools";
+import { activeMark, isBlockActive } from "../../../utils/SlateUtilityFunctions";
+import LinkButton from "../../../Elements/Link/LinkButton";
+import TextToolIcon from "../../../assets/svg/TextToolIcon";
+import TextFormat from "../TextFormat";
+import { useState } from "react";
+import useWindowResize from "../../../hooks/useWindowResize";
+import PopperHeader from "../PopperHeader";
+import MiniColorPicker from "./MiniColorPicker";
+import SelectAlignment from "./SelectAlignment";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_COLOR = {
+  color: "#000000",
+  bgcolor: "#FFFFFF"
+};
+const textColorFormat = "color";
+const textBgFormat = "bgColor";
+const allTools = toolbarGroups.flat();
+const MiniTextFormat = props => {
+  const {
+    classes,
+    editor,
+    closeMainPopup
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const id = open ? "popup-edit-tool" : "";
+  const [size] = useWindowResize();
+  const removeFontStyles = ["superscript", "subscript"];
+  const fontStyle = allTools.filter(f => f.type === "mark" && !removeFontStyles.includes(f.format));
+  const link = allTools.find(f => f.format?.indexOf("link") >= 0);
+  const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
+  const activeColor = activeMark(editor, textColorFormat) || DEFAULT_COLOR[textColorFormat];
+  const activeBg = activeMark(editor, textBgFormat) || DEFAULT_COLOR[textBgFormat];
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    sx: classes.miniTextFormatWrapper,
+    alignItems: "center",
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "toolWrapper",
+        children: [/*#__PURE__*/_jsx(SelectTypography, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine"
+        }), /*#__PURE__*/_jsx(SelectList, {
+          classes: classes,
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine mr-1"
+        }), /*#__PURE__*/_jsx(SelectAlignment, {
+          fontAlign: fontAlign,
+          classes: classes,
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine mr-1"
+        }), fontStyle?.map((m, i) => {
+          return /*#__PURE__*/_jsx(MarkButton, {
+            editor: editor,
+            ...m
+          }, `pptool_mark_${i}_${m.id}`);
+        }), /*#__PURE__*/_jsx(MiniColorPicker, {
+          format: textColorFormat,
+          classes: classes,
+          activeColor: activeColor,
+          id: "11_cc",
+          editor: editor
+        }), /*#__PURE__*/_jsx(MiniColorPicker, {
+          format: textBgFormat,
+          classes: classes,
+          activeColor: activeBg,
+          id: "12_cc",
+          editor: editor
+        }), /*#__PURE__*/_jsx("div", {
+          className: "verticalLine ml-1 mr-1"
+        }), /*#__PURE__*/_jsx(LinkButton, {
+          active: isBlockActive(editor, link.format),
+          editor: editor
+        }, link.id), /*#__PURE__*/_jsx(Button, {
+          onClick: e => setAnchorEl(e.currentTarget),
+          className: "textSettingsIcon",
+          children: /*#__PURE__*/_jsx(TextToolIcon, {})
+        }), /*#__PURE__*/_jsx(Popper, {
+          id: id,
+          open: open,
+          anchorEl: anchorEl,
+          transition: true,
+          placement: "auto-end",
+          sx: classes.popupWrapper,
+          className: `tools-drawer ${size?.device}`,
+          children: ({
+            TransitionProps
+          }) => /*#__PURE__*/_jsx(Fade, {
+            ...TransitionProps,
+            timeout: 350,
+            children: /*#__PURE__*/_jsxs(Paper, {
+              style: {
+                borderRadius: "10px"
+              },
+              children: [/*#__PURE__*/_jsx(PopperHeader, {
+                title: "Text Settings",
+                classes: classes,
+                onClose: () => setAnchorEl(null)
+              }), /*#__PURE__*/_jsx(TextFormat, {
+                editor: editor,
+                classes: classes
+              })]
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+export default MiniTextFormat;