@flozy/editor 3.6.9 → 3.7.0

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

@@ -14,9 +14,6 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -37,6 +34,7 @@ const TextFormat = props => {
   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 || {};
@@ -54,11 +52,6 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  const {
-    theme,
-    updateTheme
-  } = useEditorTheme();
-  const customized = isTextCustomized(editor);
   const handlePageWidth = width => () => {
     updatePageSettings(editor, {
       ...(pageProps || {}),
@@ -108,49 +101,6 @@ const TextFormat = props => {
     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: "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, {
@@ -369,7 +319,12 @@ const TextFormat = props => {
         xs: 12,
         className: "typo-icons",
         sx: classes.evenSpace,
-        children: [fontStyle?.map((m, i) => {
+        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

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Popper, Fade, Paper } from "@mui/material";
+import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
 import { useSlate, useFocused } from "slate-react";
 import useDrag from "../../hooks/useDrag";
@@ -9,7 +9,6 @@ import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
@@ -32,11 +31,6 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
-  useEffect(() => {
-    if (!inFocus) {
-      setAnchorEl(null);
-    }
-  }, [inFocus]);
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
@@ -84,15 +78,21 @@ const PopupTool = props => {
     setOpen(false);
     setPopupType("");
   };
-  return open && !openAI ? /*#__PURE__*/_jsx(_Fragment, {
+  return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
+    onClickAway: e => {
+      // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
+      if (e.target !== document.body) {
+        // e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close
+        handleClose();
+      }
+    },
     children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
       className: "mobileMiniTextWrapper",
       children: /*#__PURE__*/_jsx(MiniTextFormat, {
         editor: editor,
         classes: classes,
         closeMainPopup: handleClose,
-        customProps: customProps,
-        theme: theme
+        customProps: customProps
       })
     }) : /*#__PURE__*/_jsx(Popper, {
       id: id,
@@ -114,8 +114,7 @@ const PopupTool = props => {
             editor: editor,
             classes: classes,
             closeMainPopup: handleClose,
-            customProps: customProps,
-            theme: theme
+            customProps: customProps
           })
         })
       })

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -28,20 +28,16 @@ export const toolbarGroups = [[{
   type: "dropdown",
   options: [{
     text: "Normal",
-    value: "normal",
-    numVal: "400"
+    value: "normal"
   }, {
     text: "Bold",
-    value: "bold",
-    numVal: "700"
+    value: "bold"
   }, {
     text: "Bolder",
-    value: "bolder",
-    numVal: "700"
+    value: "bolder"
   }, {
     text: "Lighter",
-    value: "lighter",
-    numVal: "100"
+    value: "lighter"
   }],
   icon: FormatBoldIcon,
   width: "100px"
@@ -50,15 +46,13 @@ export const toolbarGroups = [[{
   format: "bold",
   type: "mark",
   title: "Bold",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 4,
   format: "italic",
   type: "mark",
   title: "Italic",
-  basic: true,
-  themeEnabled: true
+  basic: true
 }, {
   id: 5,
   format: "underline",
@@ -107,42 +101,6 @@ 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/common/ColorPickerButton.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
+import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
-import CustomColorPicker from "./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";
@@ -9,12 +9,9 @@ const ColorPickerButton = props => {
   const {
     value,
     onSave,
+    defaultColors = [],
     classes = {},
-    recentColors = [],
-    children,
-    handleClose: closeDrawer,
-    hideThemeColors,
-    disableEditTheme
+    recentColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -33,13 +30,7 @@ const ColorPickerButton = props => {
     setColor(color);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [children ? /*#__PURE__*/_jsx("div", {
-      onClick: handleColorPicker,
-      style: {
-        cursor: "pointer"
-      },
-      children: children
-    }) : /*#__PURE__*/_jsx(Button, {
+    children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
         height: "22px",
@@ -69,24 +60,17 @@ const ColorPickerButton = props => {
           item: true,
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(CustomColorPicker, {
+            children: /*#__PURE__*/_jsx(ColorPickerTool, {
               gradient: true,
-              color: color,
+              value: color,
               onChange: handleColorChange,
-              recentColors: recentColors,
-              closeDrawer: closeDrawer,
-              hideThemeColors: hideThemeColors,
-              disableEditTheme: disableEditTheme
+              defaultColors: [...recentColors, ...defaultColors] || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {
               display: "flex",
-              justifyContent: "flex-end",
-              padding: "8px",
-              background: "white",
-              position: "sticky",
-              bottom: 0,
-              boxShadow: "0 -1px 5px rgba(0,0,0,0.1)"
+              justifyContent: "end",
+              margin: "8px"
             },
             children: [/*#__PURE__*/_jsx(Button, {
               onClick: handleClose,

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -7,7 +7,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
+const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
 const DragHandleStyle = () => ({
   dragHandle: {
     opacity: 0,

package/dist/Editor/common/Icon.js

@@ -10,20 +10,10 @@ import { IoIosImage } from "react-icons/io";
 import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const HeadingIcon = ({
-  variant
-}) => {
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      color: "#64748B"
-    },
-    children: variant
-  });
-};
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
     size: 20
@@ -59,24 +49,6 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
-  headingFour: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H4"
-  }),
-  headingFive: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H5"
-  }),
-  headingSix: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "H6"
-  }),
-  paragraphOne: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P1"
-  }),
-  paragraphTwo: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P2"
-  }),
-  paragraphThree: /*#__PURE__*/_jsx(HeadingIcon, {
-    variant: "P3"
-  }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
     fill: "#64748B"

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -1,24 +1,8 @@
 import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
-import { useSlate } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const sectionTypes = ["grid"];
-const loopChildren = (children = [], sections) => {
-  if (!children?.length) {
-    return sections;
-  }
-  for (let child of children) {
-    if (sectionTypes.includes(child?.type)) {
-      if (child.id) {
-        sections.push(child.id);
-      }
-    }
-    sections = loopChildren(child.children, sections);
-  }
-  return sections;
-};
 const OpenInNewTab = props => {
   const {
     nav,
@@ -58,35 +42,21 @@ export const SelectPage = props => {
     services
   } = props;
   const [pages, setPages] = useState([]);
-  const editor = useSlate();
   const getPages = async () => {
     const result = await services("getPages", {});
-    if (result?.data?.length) {
-      const refactor = result?.data?.map(r => {
-        const {
-          title,
-          url_name,
-          ...rest
-        } = r;
-        return {
-          label: url_name,
-          value: url_name,
-          ...rest
-        };
-      });
-      setPages(refactor);
-    } else {
-      const currentPage = {
-        label: "Current Page",
-        value: "_currentPage",
-        is_current_page: 1,
-        sections: loopChildren(editor.children, [])
+    const refactor = result?.data?.map(r => {
+      const {
+        title,
+        url_name,
+        ...rest
+      } = r;
+      return {
+        label: url_name,
+        value: url_name,
+        ...rest
       };
-      setPages([currentPage]);
-      if (!value) {
-        onChange(currentPage.value);
-      }
-    }
+    });
+    setPages(refactor);
   };
   useEffect(() => {
     getPages();
@@ -106,14 +76,12 @@ export const SelectPage = props => {
     }
     return [];
   }, [value, pages]);
-  const isCurrentPage = page?.value === "_currentPage";
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
       label: page?.label,
-      setValue: val => onChange(val?.value || ""),
+      setValue: val => onChange(val?.value),
       placeholder: "Select Page",
-      options: pages,
-      disabled: isCurrentPage
+      options: pages
     }), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
       label: section?.label,
       setValue: val => {
@@ -128,7 +96,7 @@ export const SelectPage = props => {
         label: p,
         value: p
       }))
-    }), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
+    }), /*#__PURE__*/_jsx(OpenInNewTab, {
       ...props
     })]
   });
@@ -181,8 +149,7 @@ export function FreeSoloCreateOption({
   label,
   setValue,
   options = [],
-  placeholder = "",
-  disabled = false
+  placeholder = ""
 }) {
   return /*#__PURE__*/_jsx(Autocomplete, {
     freeSolo: true,
@@ -197,7 +164,7 @@ export function FreeSoloCreateOption({
       children: option.label
     }),
     onChange: (event, newValue) => {
-      if (typeof newValue === "string") {
+      if (typeof newValue === 'string') {
         setValue({
           value: newValue
         });
@@ -222,7 +189,7 @@ export function FreeSoloCreateOption({
       } = params;
       // Suggest the creation of a new value
       const isExisting = options.some(option => inputValue === option.label);
-      if (inputValue !== "" && !isExisting) {
+      if (inputValue !== '' && !isExisting) {
         filtered.push({
           inputValue,
           label: `Add "${inputValue}"`
@@ -235,7 +202,7 @@ export function FreeSoloCreateOption({
     handleHomeEndKeys: true,
     getOptionLabel: option => {
       // Value selected with enter, right from the input
-      if (typeof option === "string") {
+      if (typeof option === 'string') {
         return option;
       }
       // Add "xxx" option created dynamically
@@ -247,7 +214,6 @@ export function FreeSoloCreateOption({
     },
     sx: {
       marginTop: "10px"
-    },
-    disabled: disabled
+    }
   });
 }

package/dist/Editor/common/MentionsPopup/MentionsListCard.js

@@ -13,8 +13,7 @@ const MentionsListCard = props => {
   } = props;
   const {
     name,
-    email,
-    avatar_filename = null
+    email
   } = data;
   return /*#__PURE__*/_jsxs(Card, {
     sx: {
@@ -38,9 +37,7 @@ const MentionsListCard = props => {
         alignItems: "center"
       },
       alt: name,
-      children: /*#__PURE__*/_jsx(Avatar, {
-        src: avatar_filename
-      })
+      children: /*#__PURE__*/_jsx(Avatar, {})
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
         display: "flex",

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -10,7 +10,7 @@ const usePopupStyles = theme => ({
   papper: {
     boxShadow: "none",
     width: "300px",
-    height: "auto",
+    height: "300px",
     overflow: "auto",
     padding: "8px",
     margin: "0px",
@@ -39,13 +39,10 @@ const usePopupStyles = theme => ({
       color: theme?.palette?.editor?.textColor
     },
     "&.active": {
-      background: `#2563EB2B`,
-      "& .MuiTypography-root": {
-        color: `${theme?.palette?.editor?.activeColor} !important`
-      }
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&:hover": {
-      background: theme?.palette?.action?.hover || `#F4F4F4`
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&.renderComp": {
       padding: "0px",

package/dist/Editor/common/Shorthands/elements.js

@@ -40,60 +40,6 @@ const ELEMENTS_LIST = [{
     icon: "headingThree"
   }),
   onInsert: editor => toggleBlock(editor, "headingThree", false)
-}, {
-  name: "Heading 4",
-  desc: "",
-  group: "Text",
-  type: "headingFour",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFour"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFour", false)
-}, {
-  name: "Heading 5",
-  desc: "",
-  group: "Text",
-  type: "headingFive",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFive"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFive", false)
-}, {
-  name: "Heading 6",
-  desc: "",
-  group: "Text",
-  type: "headingSix",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingSix"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingSix", false)
-}, {
-  name: "Paragraph 1",
-  desc: "",
-  group: "Text",
-  type: "paragraphOne",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphOne"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphOne", false)
-}, {
-  name: "Paragraph 2",
-  desc: "",
-  group: "Text",
-  type: "paragraphTwo",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphTwo"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
-}, {
-  name: "Paragraph 3",
-  desc: "",
-  group: "Text",
-  type: "paragraphThree",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphThree"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphThree", false)
 }, {
   name: "Quote",
   desc: "",

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -1,18 +1,18 @@
 const accordionTitleBtnStyle = [{
   tab: "Colors",
-  value: "accordionColor",
+  value: "colors",
   fields: [{
-    label: "Accordion Color",
-    key: "accordionTextColor",
+    label: "Text Color",
+    key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Accordion Background Color",
-    key: "accordionBgColor",
+    label: "Background Color",
+    key: "bgColor",
     type: "color"
   }, {
-    label: "Accordion Border Color",
-    key: "accordionBorderColor",
+    label: "Border Color",
+    key: "borderColor",
     type: "color"
   }]
 }];

package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js

@@ -1,4 +1,20 @@
 const accordionTitleStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
   tab: "Colors",
   value: "colors",
   fields: [{
@@ -15,21 +31,5 @@ const accordionTitleStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border Radius",
-  value: "borderRadius",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
-  }]
 }];
 export default accordionTitleStyle;