@flozy/editor 4.0.2 → 4.0.4

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

@@ -2,11 +2,8 @@ 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, isTextCustomized as isCustomized, textThemeFields as themeFields } from "../../../helper/theme";
+import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
 import { sizeMap } from "../../../utils/font";
-import { Editor } from "slate";
-import { MenuItem, Select } from "@mui/material";
-import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function Label({
@@ -20,194 +17,93 @@ function Label({
   });
 }
 function DisplayHeaderLabel({
-  type,
-  isCustomized,
-  isPara = false
+  type
 }) {
   return /*#__PURE__*/_jsxs("div", {
-    children: [isCustomized ? "*" : "", isPara ? "P" : "H", /*#__PURE__*/_jsx("sub", {
+    children: ["H", /*#__PURE__*/_jsx("sub", {
       children: type
     })]
   });
 }
-function getTypographyOptions(isCustomized) {
-  const typographyOptions = [{
-    id: 11,
-    format: "headingOne",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "H1",
-      type: "Heading"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 1,
-      isCustomized: isCustomized
-    }),
-    group: "typography",
-    value: "headingOne"
-  }, {
-    id: 12,
-    format: "headingTwo",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "H2",
-      type: "Heading"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 2,
-      isCustomized: isCustomized
-    }),
-    group: "typography",
-    value: "headingTwo"
-  }, {
-    id: 13,
-    format: "headingThree",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "H3",
-      type: "Heading"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 3,
-      isCustomized: isCustomized
-    }),
-    group: "typography",
-    value: "headingThree"
-  }, {
-    id: 17,
-    format: "headingFour",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "H4",
-      type: "Heading"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 4,
-      isCustomized: isCustomized
-    }),
-    group: "typography",
-    value: "headingFour"
-  }, {
-    id: 18,
-    format: "headingFive",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "H5",
-      type: "Heading"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 5,
-      isCustomized: isCustomized
-    }),
-    group: "typography",
-    value: "headingFive"
-  }, {
-    id: 19,
-    format: "headingSix",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "H6",
-      type: "Heading"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 6,
-      isCustomized: isCustomized
-    }),
-    group: "typography",
-    value: "headingSix"
-  }, {
-    id: 20,
-    format: "paragraphOne",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "P1",
-      type: "Paragraph"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 1,
-      isCustomized: isCustomized,
-      isPara: true
-    }),
-    group: "typography",
-    value: "paragraphOne"
-  }, {
-    id: 21,
-    format: "paragraphTwo",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "P2",
-      type: "Paragraph"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 2,
-      isCustomized: isCustomized,
-      isPara: true
-    }),
-    group: "typography",
-    value: "paragraphTwo"
-  }, {
-    id: 22,
-    format: "paragraphThree",
-    type: "block",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "P3",
-      type: "Paragraph"
-    }),
-    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-      type: 3,
-      isCustomized: isCustomized,
-      isPara: true
-    }),
-    group: "typography",
-    value: "paragraphThree"
-  }, {
-    id: 14,
-    format: "fontSize",
-    type: "mark",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "L",
-      type: "Large"
-    }),
+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",
-    group: "typography",
-    value: "huge"
-  }, {
-    id: 15,
-    format: "fontSize",
-    type: "mark",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "M",
-      type: "Medium"
-    }),
+    type: "Large"
+  }),
+  label: "L",
+  group: "typography",
+  value: "huge"
+}, {
+  id: 15,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
     label: "M",
-    group: "typography",
-    value: "medium"
-  }, {
-    id: 16,
-    format: "fontSize",
-    type: "mark",
-    title: /*#__PURE__*/_jsx(Label, {
-      label: "S",
-      type: "Small"
-    }),
+    type: "Medium"
+  }),
+  label: "M",
+  group: "typography",
+  value: "medium"
+}, {
+  id: 16,
+  format: "fontSize",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
     label: "S",
-    group: "typography",
-    value: "small"
-  }];
-  return typographyOptions;
-}
+    type: "Small"
+  }),
+  label: "S",
+  group: "typography",
+  value: "small"
+}];
 function SelectTypography({
   editor,
   classes,
-  closeMainPopup,
-  type
+  closeMainPopup
 }) {
   const [size] = useWindowResize();
-  const {
-    theme
-  } = useEditorTheme();
-  const isTextCustomized = theme?.id ? isCustomized(editor) : false;
-  const typographyOptions = getTypographyOptions(isTextCustomized);
   const updateMarkData = newVal => {
     const val = activeMark(editor, "fontSize");
     let upData = {
@@ -252,49 +148,26 @@ function SelectTypography({
     });
   }, [typographyOptions, activeMark, isBlockActive, editor]);
   const onChange = (format, option) => {
+    // add/reset block elements
+    toggleBlock(editor, format);
     if (option.type === "block") {
-      themeFields.forEach(field => {
-        Editor.removeMark(editor, field);
+      // reset old font size
+      addMarkData(editor, {
+        format: "fontSize",
+        value: {}
       });
-
-      // add/reset block elements
-      toggleBlock(editor, format);
     } else if (option.type === "mark") {
       const size = sizeMap[option.value] || "";
       const [sizeInNumber] = size.split("px");
       updateMarkData(Number(sizeInNumber));
     }
   };
-  const typographyValue = selectedBlock?.value || "headingOne";
-  if (type === "miniToolBar") {
-    return /*#__PURE__*/_jsx(CustomSelectTool, {
-      options: typographyOptions,
-      editor: editor,
-      onChange: onChange,
-      value: typographyValue,
-      classes: classes
-    });
-  }
-  return /*#__PURE__*/_jsx(Select, {
-    value: typographyValue,
-    className: "editor-dd",
-    onChange: e => {
-      const {
-        value
-      } = e.target;
-      const option = typographyOptions?.find(o => o.value === value);
-      onChange(value, option);
-    },
-    style: {
-      width: "100%",
-      height: "36px",
-      borderRadius: "10px",
-      fontSize: "14px"
-    },
-    children: typographyOptions.map((item, index) => /*#__PURE__*/_jsxs(MenuItem, {
-      value: item.value,
-      children: [item.title, " ", isTextCustomized && item.value === typographyValue ? " *" : ""]
-    }, index))
+  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

@@ -53,8 +53,7 @@ const MiniTextFormat = props => {
         children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
-          closeMainPopup: closeMainPopup,
-          type: "miniToolBar"
+          closeMainPopup: closeMainPopup
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine"
         }), /*#__PURE__*/_jsx(SelectList, {

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

@@ -4,9 +4,8 @@ const usePopupStyle = theme => ({
     zIndex: 1300,
     marginBottom: "12px !important",
     border: "1px solid #D8DDE1",
-    borderRadius: "10px",
-    maxWidth: "100%",
-    // maxHeight: "40px",
+    borderRadius: "6px",
+    maxWidth: "96%",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -107,7 +106,6 @@ const usePopupStyle = theme => ({
       boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
     },
     "& .mini": {
-      borderRadius: "0px",
       width: "100%",
       justifyContent: "start",
       borderRadius: "10px !important",
@@ -224,8 +222,7 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
-    fontWeight: 500,
-    color: "#000000"
+    fontWeight: 500
   },
   typoLabel2: {
     fontSize: "14px",
@@ -390,13 +387,8 @@ const usePopupStyle = theme => ({
     padding: "0px 10px"
   },
   defaultBtn: {
-    color: "#2563EB !important",
-    textTransform: "none",
-    textDecoration: "underline",
-    "&.Mui-disabled": {
-      color: "#A0AEC0 !important",
-      textDecoration: "none"
-    }
+    color: "#0F172A",
+    textTransform: "none"
   },
   templateCardBtnGrp: {
     display: "none",
@@ -482,7 +474,6 @@ const usePopupStyle = theme => ({
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
-      padding: "4px 14px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
@@ -595,13 +586,13 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
-      maxHeight: 'fit-content',
       // minWidth: "130px",
       border: "1px solid #E4E8EB",
-      // background: theme?.palette?.editor?.background,
-      overflowY: 'hidden',
+      background: theme?.palette?.editor?.background,
+      overflowY: "hidden",
       padding: "6px 12px 6px 0px",
-      '@media only screen and (max-width: 600px)': {
+      maxHeight: "140px",
+      "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     },
@@ -617,16 +608,13 @@ const usePopupStyle = theme => ({
       // background: theme?.palette?.editor?.background || "#fff",
       overflowY: "hidden",
       "&:hover": {
-        background: `#E9F3FE !important`,
-        color: `#2563EB !important`
+        background: `${theme?.palette?.action?.selected} !important`
+      },
+      "&.selected": {
+        color: `${theme?.palette?.primary?.main} !important`,
+        background: `${theme?.palette?.action?.selected} !important`
       }
-
-      // "&.selected": {
-      //   color: `#2563EB !important`,
-      //   background:  `${theme?.palette?.action?.selected} !important`
-      // }
     },
-
     "& .menuOptions": {
       display: "flex",
       alignItems: "center",

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

@@ -1,22 +1,15 @@
 import React, { useState } from "react";
 import { Button, ButtonGroup, Divider, 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 { getBorderColor } from "../../utils/helper";
 import SelectTypography from "./MiniTextFormat/SelectTypography";
-import { isTextCustomized, saveToTheme } from "../../helper/theme";
-import { useEditorTheme } from "../../hooks/useEditorTheme";
 import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,16 +31,10 @@ const TextFormat = props => {
   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" && f.format != "strikethrough" && f.format != "superscript" && f.format != "subscript");
+  const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   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 {
-    pageProps
-  } = getPageSettings(editor)?.element || {};
-  const {
-    pageWidth
-  } = pageProps;
   const {
     isActive: isBlockQuoteActive,
     props: bqProps
@@ -59,17 +46,6 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  const {
-    theme,
-    updateTheme
-  } = useEditorTheme();
-  const customized = isTextCustomized(editor);
-  const handlePageWidth = width => () => {
-    updatePageSettings(editor, {
-      ...(pageProps || {}),
-      pageWidth: width
-    });
-  };
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -112,50 +88,8 @@ const TextFormat = props => {
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
+    className: "text-formatter-popup",
     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: "Theme Style"
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: theme?.id ? /*#__PURE__*/_jsx(Button, {
-            sx: classes.defaultBtn,
-            onClick: () => {
-              const {
-                field,
-                theme
-              } = saveToTheme(editor) || {};
-              updateTheme(theme, {
-                action: "ELEMENT_PROPS_CHANGE",
-                fieldName: field
-              });
-            },
-            disabled: !customized,
-            children: "Save to theme"
-          }) : null
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        sx: classes.textFormatField,
-        children: /*#__PURE__*/_jsx(SelectTypography, {
-          editor: editor,
-          classes: classes,
-          closeMainPopup: () => {}
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       children: [/*#__PURE__*/_jsxs(Grid, {

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

@@ -30,6 +30,9 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
+  const {
+    selectedElement
+  } = useEditorContext();
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
 
@@ -54,6 +57,11 @@ const PopupTool = props => {
       updateAnchorEl();
     }
   }, [selection]);
+  useEffect(() => {
+    if (selectedElement?.enable === 1) {
+      setAnchorEl(null);
+    }
+  }, [selection, selectedElement?.path, selectedElement?.enable]);
   const updateAnchorEl = () => {
     try {
       const domSelection = window.getSelection();

package/dist/Editor/Toolbar/Toolbar.js

@@ -31,6 +31,7 @@ import AttachmentsButton from "../Elements/Attachments/AttachmentsButton";
 import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
 import DividerButton from "../Elements/Divider/DividerButton.js";
 import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
+import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const RenderToolbarIcon = props => {
@@ -133,6 +134,12 @@ export const RenderToolbarIcon = props => {
           customProps: customProps,
           icoBtnType: icoBtnType
         }, element.id);
+      case "freegrid":
+        return /*#__PURE__*/_jsx(FreeGridButton, {
+          editor: editor,
+          customProps: customProps,
+          icoBtnType: icoBtnType
+        }, element.id);
       case "newLine":
         return /*#__PURE__*/_jsx(NewLineButton, {
           editor: editor,