@flozy/editor 3.6.8 → 3.7.0

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -146,21 +146,19 @@ function AppHeader(props) {
         src: appLogo
       }) : appTitle
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
-      children: menus.map((item, i) => {
-        const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
-        return /*#__PURE__*/_jsx(ListItem, {
-          disablePadding: true,
-          children: /*#__PURE__*/_jsx(ListItemButton, {
-            ...buttonProps,
-            sx: {
-              textAlign: "center"
-            },
-            children: /*#__PURE__*/_jsx(ListItemText, {
-              primary: item.text
-            })
+      children: menus.map((item, i) => /*#__PURE__*/_jsx(ListItem, {
+        disablePadding: true,
+        children: /*#__PURE__*/_jsx(ListItemButton, {
+          component: "a",
+          href: item.url,
+          sx: {
+            textAlign: "center"
+          },
+          children: /*#__PURE__*/_jsx(ListItemText, {
+            primary: item.text
           })
-        }, `${item.text}_${i}`);
-      })
+        })
+      }, `${item.text}_${i}`))
     })]
   });
   const container = window !== undefined ? () => window().document.body : undefined;

package/dist/Editor/Elements/Button/EditorButton.js

@@ -2,8 +2,7 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { IconButton, Tooltip, Box } from "@mui/material";
-// import * as fIcons from "@mui/icons-material";
-import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
+import * as fIcons from "@mui/icons-material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import LinkIcon from "@mui/icons-material/Link";
@@ -64,7 +63,7 @@ const EditorButton = props => {
   };
   const isTrigger = linkType === "actionTrigger";
   const refURl = isTrigger ? buttonLink?.url : url;
-  const BtnIcon = buttonIcon ? buttonIcon : null;
+  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
     if (metadata?.buttonLink?.handler) {
@@ -81,7 +80,6 @@ const EditorButton = props => {
     }
   };
   const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
-  console.log(openInNewTab);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -133,7 +131,6 @@ const EditorButton = props => {
             color: "rgba(0, 0, 0, 0.54)"
           },
           ...btnProps,
-          target: openInNewTab ? "_blank" : "_self",
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
       })]
@@ -215,14 +212,12 @@ const EditorButton = props => {
             }
           },
           ...buttonProps,
-          children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
-            iconName: buttonIcon,
+          children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"
             }
-          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
-            iconName: buttonIcon,
+          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
+import * as fIcons from "@mui/icons-material";
 import { Box } from "@mui/material";
 import ChipTextPopup from "./ChipTextPopup";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
-import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipText = props => {
@@ -26,6 +26,7 @@ const ChipText = props => {
     buttonIcon,
     textSize
   } = element;
+  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -81,8 +82,7 @@ const ChipText = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: [/*#__PURE__*/_jsx(MUIIcon, {
-      iconName: buttonIcon || "Check",
+    children: [/*#__PURE__*/_jsx(BtnIcon, {
       style: {
         fontSize: textSize || "16px",
         lineHeight: textSize || "16px",

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -2,10 +2,10 @@ import React, { useState, forwardRef, useImperativeHandle } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Paper, Popover } from "@mui/material";
 import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
 import { insertEmoji } from "../../utils/emoji";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
-import EmojiPicker from "./EmojiPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,7 +61,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
       },
       onClose: handleClose,
       children: /*#__PURE__*/_jsx(Paper, {
-        children: /*#__PURE__*/_jsx(EmojiPicker, {
+        children: /*#__PURE__*/_jsx(Picker, {
           data: data,
           onEmojiSelect: onEmojiSelect
         })

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -1,16 +0,0 @@
-import data from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const EmojiPicker = props => {
-  const {
-    onEmojiSelect
-  } = props;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Picker, {
-      data: data,
-      onEmojiSelect: onEmojiSelect
-    })
-  });
-};
-export default EmojiPicker;

package/dist/Editor/Elements/Grid/Grid.js

@@ -277,7 +277,7 @@ const Grid = props => {
   } = getBreakPointsValue(borderRadius, size?.device) || {};
   return /*#__PURE__*/_jsxs(GridContainer, {
     container: true,
-    className: `grid-container ${grid} has-hover element-root dpath`,
+    className: `grid-container ${grid} has-hover element-root`,
     ...attributes,
     ...sectionId,
     sx: {

package/dist/Editor/Elements/Grid/GridItem.js

@@ -105,7 +105,7 @@ const GridItem = props => {
   return /*#__PURE__*/_jsxs(Item, {
     item: true,
     component: "div",
-    className: `grid-item element-root gi-top-wrpr dpath`,
+    className: `grid-item element-root gi-top-wrpr`,
     ...attributes,
     sx: {
       width: {

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
+import * as fIcons from "@mui/icons-material";
 import { Box } from "@mui/material";
-import Check from "@mui/icons-material/Check";
 import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,6 +23,7 @@ const InlineIcon = props => {
     right,
     bottom
   } = bannerSpacing || {};
+  const BtnIcon = fIcons["Check"];
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "editor-icon-text",
@@ -41,7 +42,7 @@ const InlineIcon = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: [/*#__PURE__*/_jsx(Check, {}), /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
       contentEditable: true,
       children: children
     })]

package/dist/Editor/Elements/List/CheckList.js

@@ -11,9 +11,7 @@ const CheckList = ({
   attributes,
   children,
   element,
-  isEmpty,
-  className,
-  style
+  isEmpty
 }) => {
   const editor = useSlateStatic();
   const readOnly = useReadOnly();
@@ -32,14 +30,12 @@ const CheckList = ({
   const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: className || "",
       ...attributes,
       style: {
         textAlign: element.alignment || "left",
         display: "flex",
         justifyContent: "center",
-        alignItems: "center",
-        ...(style || {})
+        alignItems: "center"
       },
       children: [/*#__PURE__*/_jsxs("div", {
         contentEditable: false,

package/dist/Editor/Styles/EditorStyles.js

@@ -188,7 +188,6 @@ const editorStyles = ({
       }
     },
     "& .checkbox-edit": {
-      alignSelf: "flex-start",
       "& .MuiFormControlLabel-root": {
         marginRight: "0px"
       },
@@ -213,7 +212,7 @@ const editorStyles = ({
         "& svg": {
           width: "17px",
           height: "18px",
-          marginTop: "-1px"
+          marginTop: '-1px'
         }
       }
     },
@@ -274,7 +273,7 @@ const editorStyles = ({
   },
   cardsTypo: {
     color: theme?.palette?.editor?.textColor,
-    fontSize: "14px !important"
+    fontSize: '14px !important'
   }
 });
 export default editorStyles;

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,7 +78,14 @@ 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, {

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",

package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js

@@ -1,10 +1,29 @@
 import React, { useState } from "react";
 import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
-import MUIIcon from "./loadIcon";
-import MUIFilledIcons from "./mui_filled_icons";
+import * as fIcons from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
+  if (b.indexOf("Outlined") > -1) {
+    a.outlined.push(b);
+  } else if (b.indexOf("Rounded") > -1) {
+    a.rounded.push(b);
+  } else if (b.indexOf("Sharp") > -1) {
+    a.sharp.push(b);
+  } else if (b.indexOf("TwoTone") > -1) {
+    a.tt.push(b);
+  } else {
+    a.filled.push(b);
+  }
+  return a;
+}, {
+  filled: [],
+  outlined: [],
+  rounded: [],
+  tt: [],
+  sharp: []
+});
 const Icons = props => {
   const {
     value,
@@ -15,7 +34,7 @@ const Icons = props => {
     key
   } = data;
   const [val, setVal] = useState("");
-  const [list, setList] = useState(MUIFilledIcons.slice(0, 90));
+  const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
   const onSelectIcon = ico => () => {
     onChange({
       [key]: ico
@@ -25,11 +44,11 @@ const Icons = props => {
     const keyVal = e.target.value?.toLowerCase();
     setVal(keyVal);
     if (keyVal) {
-      setList(MUIFilledIcons.filter(f => {
+      setList(MUIIcons.filled.filter(f => {
         return f.toLowerCase().indexOf(keyVal) > -1;
       }).slice(0, 90));
     } else {
-      setList(MUIFilledIcons.slice(0, 90));
+      setList(MUIIcons.filled.slice(0, 90));
     }
   };
   const onRemoveIcon = () => {
@@ -37,7 +56,7 @@ const Icons = props => {
       [key]: null
     });
   };
-  const SelectedIcon = value ? value : null;
+  const SelectedIcon = value ? fIcons[value] : null;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -73,9 +92,7 @@ const Icons = props => {
             arrow: true,
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: onRemoveIcon,
-              children: /*#__PURE__*/_jsx(MUIIcon, {
-                iconName: value
-              })
+              children: /*#__PURE__*/_jsx(SelectedIcon, {})
             })
           }) : ""
         })]
@@ -90,14 +107,13 @@ const Icons = props => {
         paddingTop: "5px"
       },
       children: list.map(m => {
+        const Ico = fIcons[m];
         return /*#__PURE__*/_jsx(Tooltip, {
           title: m,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
-            children: /*#__PURE__*/_jsx(MUIIcon, {
-              iconName: m
-            })
+            children: /*#__PURE__*/_jsx(Ico, {})
           })
         }, `mui_ico_${m}`);
       })

package/dist/Editor/helper/index.js

@@ -139,19 +139,4 @@ export const isEmptyTextNode = element => {
     console.log(err);
     return false;
   }
-};
-export const debounce = function (func, wait, immediate) {
-  let timeout;
-  return function () {
-    const context = this,
-      args = arguments,
-      later = function () {
-        timeout = null;
-        if (!immediate) func.apply(context, args);
-      },
-      callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
 };

package/dist/Editor/hooks/useMouseMove.js

@@ -1,6 +1,5 @@
 import { useEffect, useState, createContext, useContext, useMemo } from "react";
 import { getSelectedText } from "../utils/helper";
-import { debounce } from "../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditorContext = /*#__PURE__*/createContext();
 export const useEditorSelection = editor => {
@@ -74,21 +73,15 @@ const useMouseMove = () => {
     };
   }, []);
   const onMouseMove = e => {
-    const dpath = e?.target?.closest(".dpath");
-    console.log(dpath);
-    if (dpath) {
-      console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
-      setEvent({
-        target: dpath
-      });
-    }
+    setEvent({
+      target: e.target
+    });
   };
-  const debounceMouseMove = debounce(onMouseMove, 100);
   const addListener = () => {
-    document.addEventListener("mousemove", debounceMouseMove);
+    document.addEventListener("mousemove", onMouseMove);
   };
   const removeListener = () => {
-    document.removeEventListener("mousemove", debounceMouseMove);
+    document.removeEventListener("mousemove", onMouseMove);
   };
   return [event];
 };