@flozy/editor 4.1.1 → 4.1.3

package/dist/Editor/CommonEditor.js

@@ -366,9 +366,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else if (event.key === "Enter") {
       enterEvent(event, editor, customProps?.isMobile);
-    } else if (event.key === 'Backspace') {
-      event.preventDefault();
-      editor.deleteBackward();
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;

package/dist/Editor/Editor.css

@@ -401,6 +401,18 @@ blockquote {
   position: relative;
 }
 
+.editor-btn-wrapper .moreBtnShow {
+  opacity: 0;
+}
+
+.editor-btn-wrapper:hover .moreBtnShow {
+  opacity: 1;
+}
+
+.editor-btn-wrapper .activeBtnShow {
+  opacity: 1;
+}
+
 .editor-btn {
   opacity: 1;
 }

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

@@ -199,6 +199,7 @@ function AppHeader(props) {
   }, theme);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
+      className: "app-h-wrpr",
       sx: {
         display: "flex",
         position: "relative"

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

@@ -3,15 +3,14 @@ import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
 import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
-import SettingsIcon from "@mui/icons-material/Settings";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import LinkIcon from "@mui/icons-material/Link";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
+import Icon from "../../common/Icon";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -30,6 +29,7 @@ const EditorButton = props => {
   const path = ReactEditor.findPath(editor, element);
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
+  const [openMoreOptions, setOpenMoreOptions] = useState(false);
   const {
     label,
     bgColor,
@@ -106,7 +106,7 @@ const EditorButton = props => {
       className: "element-toolbar hr",
       style: {
         width: "max-content",
-        top: "-12px",
+        top: "-33px",
         alignItems: "center",
         cursor: "pointer"
       },
@@ -115,14 +115,18 @@ const EditorButton = props => {
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onMenuClick("edit"),
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "pagesSettings"
+          })
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Nav Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onMenuClick("nav"),
-          children: /*#__PURE__*/_jsx(LinkIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "link"
+          })
         })
       }), hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
         title: "Open Link",
@@ -130,11 +134,15 @@ const EditorButton = props => {
         children: /*#__PURE__*/_jsx(Box, {
           sx: {
             display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
+            color: "rgba(0, 0, 0, 0.54)",
+            borderRadius: '50% !important',
+            border: 'none !important'
           },
           ...btnProps,
           target: openInNewTab ? "_blank" : "_self",
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "openLinkIcon"
+          })
         })
       })]
     }) : null;
@@ -169,11 +177,19 @@ const EditorButton = props => {
       lg: "inline-block"
     }
   }, theme);
+  const handleMoreBtn = () => {
+    setOpenMoreOptions(!openMoreOptions);
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: `editor-btn-wrapper`,
     ...attributes,
     style: {
-      textAlign: tAlign
+      textAlign: tAlign,
+      "&:hover": {
+        "& .moreBtnShow": {
+          opacity: 1
+        }
+      }
     },
     contentEditable: false,
     children: [/*#__PURE__*/_jsx(Box, {
@@ -182,13 +198,25 @@ const EditorButton = props => {
       sx: {
         ...pSp,
         "& .element-toolbar": {
-          display: "none"
-        },
-        "&:hover": {
-          "& .element-toolbar": {
-            display: "flex"
+          display: openMoreOptions ? "flex" : "none",
+          alignItems: "center",
+          "&:hover": {
+            display: openMoreOptions ? "flex" : "none",
+            "& .moreBtnShow": {
+              opacity: 1
+            }
+          },
+          "& svg": {
+            "& path": {
+              stroke: theme.palette.text.primary
+            }
+          },
+          "& button": {
+            borderRadius: "50%",
+            border: "none"
           }
-        }
+        },
+        position: "relative"
       },
       children: /*#__PURE__*/_jsxs("span", {
         style: {
@@ -237,6 +265,20 @@ const EditorButton = props => {
               paddingRight: "4px"
             },
             props: customProps
+          }), !readOnly && /*#__PURE__*/_jsx(IconButton, {
+            className: `moreBtnShow ${openMoreOptions && "activeBtnShow"}`,
+            sx: {
+              position: "absolute",
+              right: '-42px',
+              stroke: '#fff',
+              "& path": {
+                fill: openMoreOptions ? theme.palette.text.blueText : ""
+              }
+            },
+            onClick: handleMoreBtn,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "moreVertical"
+            })
           })]
         }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
           className: "workflow-icon-btn",

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -160,6 +160,14 @@ const useFreeGridStyles = ({
           }
         },
         "& .fgi_type_appHeader": {
+          maxWidth: "100%",
+          maxHeight: "100%",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          "& .app-h-wrpr": {
+            width: "100%"
+          },
           "& .MuiAppBar-root": {
             zIndex: 100
           },
@@ -168,10 +176,11 @@ const useFreeGridStyles = ({
             paddingRight: "0px !important",
             "& .app-drawer-btn": {
               marginRight: "0px",
-              width: "100%",
+              paddingTop: "12px",
+              // width: "100%",
               "& svg": {
-                width: "100%",
-                height: "100%"
+                // width: "100%",
+                // height: "100%",
               }
             }
           }

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -52,7 +52,9 @@ const MiniToolbar = props => {
   const boxRef = useRef(null); // Add ref to get the Box element
   const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
   const {
-    popupType
+    popupType,
+    selectedElement,
+    setSelectedElement
   } = useEditorContext();
   const canUndo = editor.history.undos.length > 0;
   const canRedo = editor.history.redos.length > 0;
@@ -75,6 +77,11 @@ const MiniToolbar = props => {
     }
     setPopper(type);
     setAnchorEl(e.currentTarget);
+    setSelectedElement({
+      ...selectedElement,
+      enable: 1,
+      selectedAction: null
+    });
   };
   const onClose = () => {
     setPopper(null);
@@ -116,13 +123,14 @@ const MiniToolbar = props => {
         label,
         icon: Icon
       }) => {
-        const isDisabled = popupType === type || type === 'undo' ? !canUndo : type === 'redo' ? !canRedo : false;
+        const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
+
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: `${type === popper ? "active" : ""} ${type === 'undo' && !canUndo || type === 'redo' && !canRedo ? "disabled" : ""}`,
+            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""}`,
             onClick: handleClick(type),
             disabled: isDisabled,
             children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {

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

@@ -591,8 +591,9 @@ const usePopupStyle = theme => ({
       border: "1px solid #E4E8EB",
       maxHeight: "140px",
       background: theme?.palette?.editor?.background,
-      overflowY: "hidden",
+      // overflowY: "hidden",
       padding: "6px 12px 6px 0px",
+      overflowY: "scroll",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }

package/dist/Editor/assets/svg/OpenLinkIcon.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const OpenLinkIcon = props => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M7.58325 6.41615L12.3666 1.63281",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12.8334 3.96602V1.16602H10.0334",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M6.41675 1.16602H5.25008C2.33341 1.16602 1.16675 2.33268 1.16675 5.24935V8.74935C1.16675 11.666 2.33341 12.8327 5.25008 12.8327H8.75008C11.6667 12.8327 12.8334 11.666 12.8334 8.74935V7.58268",
+      stroke: "#0F172A",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default OpenLinkIcon;

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
+const defaultFonts = ['PoppinsRegular', 'PoppinsBold', 'Helvetica', 'Georgia', 'Times New Roman', 'Monaco', 'Courier New', 'Qwitcher Grypen', 'EB Garamond', 'Anton', 'DM Serif Text', 'Libre Baskerville', 'Montserrat', 'Open Sans', 'Public Sans', 'Raleway', 'Space Mono', 'Bulgarian Garamond', 'Impact', 'Redacted Script', 'Great Vibes', 'Zeyada', 'Allura', 'Pinyon Script', 'Herr Von Muellerhoff', 'Dawning of a New Day', 'Coming Soon', 'Dancing Script', 'Engagement', 'Gaegu', 'Ingrid Darling', 'Kite One', 'La Belle Aurore', 'Mea Culpa', 'Meddon', 'Merriweather', 'The Girl Next Door'];
 const FontLoader = props => {
   const {
     otherProps,
@@ -9,8 +10,9 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
-  const loadFontsInBatches = (families, batchSize = 5) => {
+  const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
+    let retryCount = 0;
     function loadNextBatch() {
       if (currentIndex >= families.length) {
         console.log('All fonts have been loaded');
@@ -25,10 +27,22 @@ const FontLoader = props => {
         active: () => {
           console.log(`Fonts loaded successfully: ${batch}`);
           currentIndex += batchSize;
+          retryCount = 0; // Reset retry count for the next batch
           loadNextBatch();
         },
         inactive: () => {
           console.log(`Font loading failed for: ${batch}`);
+          if (retryCount < maxRetries) {
+            retryCount++;
+            console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
+            // Retry loading the same batch
+            loadNextBatch();
+          } else {
+            console.log(`Max retries reached for batch: ${batch}. Moving to the next batch.`);
+            currentIndex += batchSize;
+            retryCount = 0; // Reset retry count for the next batch
+            loadNextBatch();
+          }
         }
       });
     }
@@ -38,15 +52,16 @@ const FontLoader = props => {
     return fontFamily.replace(/\\/g, '').replace(/['"]/g, '');
   };
   useEffect(() => {
-    let families = [];
+    let families = ["PoppinsRegular"];
     if (!readOnly) {
       otherProps.services("listGoogleFont", []).then(data => {
-        families = data?.data.map(sanitizeFontFamily);
+        families = [...defaultFonts, ...(data?.data || ['PoppinsRegular'])];
+        const filteredfamilies = families.filter(font => !font.includes("Material"));
         setFontFamilies({
           id: 1,
           format: "fontFamily",
           type: "fontfamilydropdown",
-          options: families || []
+          options: filteredfamilies || []
         });
         loadFontsInBatches(families);
       }).catch(err => {
@@ -62,7 +77,7 @@ const FontLoader = props => {
       families = Array.from(fontSet);
       loadFontsInBatches(families);
     }
-  }, []);
+  }, [readOnly, otherProps, setFontFamilies]);
   return null;
 };
 export default FontLoader;

package/dist/Editor/common/Icon.js

@@ -13,12 +13,14 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon } from "./iconListV2";
+import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
 import RedoIcon from "../assets/svg/RedoIcon";
 import TextIcon from "../assets/svg/TextIcon";
 import AddElementIcon from "../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
+import OpenLinkIcon from "../assets/svg/OpenLinkIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -207,6 +209,7 @@ const iconList = {
     },
     size: 20
   }),
+  moreVertical: /*#__PURE__*/_jsx(MoreVertRoundedIcon, {}),
   leftArrow: /*#__PURE__*/_jsx(LeftArrow, {}),
   rightArrow: /*#__PURE__*/_jsx(RightArrow, {}),
   checkListButton: /*#__PURE__*/_jsx(CheckListButton, {}),
@@ -266,7 +269,8 @@ const iconList = {
   redoIcon: /*#__PURE__*/_jsx(RedoIcon, {}),
   textIcon: /*#__PURE__*/_jsx(TextIcon, {}),
   addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
-  addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
+  addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
+  openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {})
 };
 export const icons = {
   ...iconList

package/dist/Editor/common/RnD/index.js

@@ -22,6 +22,7 @@ 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 ITEM_TYPES = ["child", "parent-container"];
+const EDIT_MODES = ["text", "form"];
 let hover_on = new Set();
 const RnD = props => {
   const rndRef = useRef(null);
@@ -180,7 +181,7 @@ const RnD = props => {
           });
           setSelectedElement({
             path: str_path,
-            enable: 2,
+            enable: EDIT_MODES.includes(childType) ? 2 : 1,
             cursor: "auto",
             anchorEl: rndRef?.current
           });

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

@@ -13,6 +13,7 @@ const appHeaderStyle = [{
     key: "titleFontFamily",
     type: "textOptions",
     options: fontOptions,
+    webFont: true,
     width: 7,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

package/dist/Editor/utils/events.js

@@ -80,7 +80,9 @@ export const commands = props => {
       RnDCtrlCmds[event.key](event, {
         editor
       });
-    } else if (EDITORCMDS[event.key]) {
+    }
+    // for select all
+    if (EDITORCMDS[event.key]) {
       EDITORCMDS[event.key](event, {
         editor,
         needLayout
@@ -236,9 +238,9 @@ export const enterEvent = (e, editor, isMobile) => {
             if (isAtEnd) {
               e.preventDefault();
               Transforms.insertNodes(editor, {
-                type: 'paragraph',
+                type: "paragraph",
                 children: [{
-                  text: ''
+                  text: ""
                 }]
               });
               const newLocation = Editor.after(editor, selection);
@@ -249,7 +251,7 @@ export const enterEvent = (e, editor, isMobile) => {
               e.preventDefault();
               Transforms.splitNodes(editor);
               Transforms.setNodes(editor, {
-                type: 'paragraph'
+                type: "paragraph"
               }, {
                 at: Editor.after(editor, selection)
               });
@@ -260,9 +262,9 @@ export const enterEvent = (e, editor, isMobile) => {
             } else if (isAtStart) {
               e.preventDefault();
               Transforms.insertNodes(editor, {
-                type: 'paragraph',
+                type: "paragraph",
                 children: [{
-                  text: ''
+                  text: ""
                 }]
               }, {
                 at: Editor.before(editor, selection)

package/dist/Editor/utils/helper.js

@@ -115,6 +115,10 @@ export const handleInsertLastElement = (event, editor) => {
     return;
   }
   const lastElement = editor.children[editor.children?.length - 1];
+  const isFreeGrid = lastElement?.type === "freegrid" || lastElement?.children[0]?.type === "freegrid";
+  if (isFreeGrid) {
+    return;
+  }
   const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => c.type === "grid");
   if (!ReactEditor.isFocused(editor)) {
     if (isLastElementEmpty) {

package/dist/Editor/utils/pageSettings.js

@@ -20,7 +20,7 @@ export const getPageSettings = editor => {
     const [pageSettingsNode] = Editor.nodes(editor, {
       at: [],
       match: n => {
-        return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
+        return n.type === "page-settings";
       }
     });
     if (pageSettingsNode && pageSettingsNode[0] && pageSettingsNode[1]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"