@flozy/editor 4.1.2 → 4.1.4

package/dist/Editor/CommonEditor.js

@@ -426,16 +426,21 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const handleCursorScroll = container => {
     try {
-      const cursorPosition = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
-      const containerBottom = container.getBoundingClientRect().bottom;
-      if (cursorPosition?.bottom > containerBottom - 250) {
-        container.scrollBy({
-          top: 200,
-          behavior: "smooth"
-        });
+      const selection = window?.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
+        const containerBottom = container?.getBoundingClientRect()?.bottom;
+        if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
+          container?.scrollBy({
+            top: 200,
+            behavior: "smooth"
+          });
+        }
+      } else {
+        console.warn('No valid selection range found');
       }
     } catch (err) {
-      console.log(err);
+      console.log('handleCursorScroll', err);
     }
   };
   return /*#__PURE__*/_jsx(EditorProvider, {

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/Embed/Frames/ImageFrame.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from "react";
-import useDragDom from "../../../hooks/useDragDom";
 import { IconButton, Popper } from "@mui/material";
 import Box from "@mui/material/Box";
 import ContinuousSlider from "./Slider";
-import frames from ".";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import { CloseIcon } from "../../../common/iconslist";
+import useDragDom from "../../../hooks/useDragDom";
 import FramesStyles from "./Styles";
+import frames from ".";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -48,18 +48,28 @@ const ImageFrame = props => {
   const SVGFrame = frame ? frames[frame] : null;
   const {
     selectedPath,
-    setSelectedPath
-  } = useEditorContext();
-  const open = selectedPath === id && Boolean(anchorEl);
-  const {
-    theme
+    setSelectedPath,
+    selectedElement,
+    theme,
+    setSelectedElement
   } = useEditorContext();
+  const freeGridItemPath = `${selectedElement?.path?.split("|")?.join(",")},0`;
+  const isFreegridSelection = freeGridItemPath === id;
+  const open = (selectedPath === id || isFreegridSelection) && Boolean(anchorEl);
   const classes = FramesStyles(theme);
   useEffect(() => {
     if (imageRef?.current && !readOnly) {
       setDOM(dom);
     }
   }, [imageRef]);
+  useEffect(() => {
+    if (svgRef?.current && selectedElement?.selectedAction === "imageFrame") {
+      const imageFrameDom = document.getElementById(`opt_ref_${selectedElement?.path}`);
+      setAnchorEl(imageFrameDom);
+    } else {
+      setAnchorEl(null);
+    }
+  }, [isFreegridSelection, svgRef?.current, selectedElement?.selectedAction]);
   useEffect(() => {
     if (event === "end" && !readOnly) {
       onChange({
@@ -97,6 +107,11 @@ const ImageFrame = props => {
   const handleClose = () => {
     setAnchorEl(null);
     setSelectedPath(null);
+    setSelectedElement({
+      ...selectedElement,
+      enable: 1,
+      selectedAction: null
+    });
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(SVGFrame, {
@@ -118,8 +133,8 @@ const ImageFrame = props => {
       sx: {
         zIndex: 100
       },
-      placement: "top",
-      disablePortal: true,
+      placement: isFreegridSelection ? "bottom" : "top",
+      disablePortal: false,
       children: /*#__PURE__*/_jsxs(Box, {
         sx: classes?.sliderContainer,
         children: [/*#__PURE__*/_jsx(ContinuousSlider, {

package/dist/Editor/Elements/Embed/Image.js

@@ -295,6 +295,7 @@ const Image = ({
           id: path.join(","),
           onChange: onPosChange,
           readOnly: readOnly,
+          editor: editor,
           handleImageClick: handleImageClick
         })
       }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -1,7 +1,7 @@
 const commonOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const textOptions = ["edit", "settings", "link", "saveAsTemplate", "close"];
 const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
-const imageOptions = ["settings", "link", "saveAsTemplate", "close"];
+const imageOptions = ["settings", "link", "imageFrame", "saveAsTemplate", "close"];
 const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
 const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
 const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];

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

@@ -96,6 +96,11 @@ const useFreeGridStyles = ({
             "& .default-toolbar": {
               display: "block"
             }
+          },
+          "& .fgi_type_image": {
+            "& .visible-on-hover": {
+              display: "none !important"
+            }
           }
         },
         /** for element items */
@@ -163,6 +168,11 @@ const useFreeGridStyles = ({
           maxWidth: "100%",
           maxHeight: "100%",
           overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          "& .app-h-wrpr": {
+            width: "100%"
+          },
           "& .MuiAppBar-root": {
             zIndex: 100
           },

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/ElementOptions/Actions.js

@@ -11,6 +11,7 @@ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import SaveIcon from "@mui/icons-material/Save";
 import LinkIcon from "./Icons/LinkIcon";
 import CodeIcon from "@mui/icons-material/Code";
+import FilterFramesIcon from "@mui/icons-material/FilterFrames";
 import { GridAddSectionIcon, WorkflowIcon } from "../../iconslist";
 const Actions = {
   ai: {
@@ -104,6 +105,12 @@ const Actions = {
     Button: IconButton,
     Icon: SaveIcon,
     title: "Save As Template"
+  },
+  imageFrame: {
+    type: "imageFrame",
+    Button: IconButton,
+    Icon: FilterFramesIcon,
+    title: "Image Frame Settings"
   }
 };
 export default Actions;

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

@@ -236,6 +236,14 @@ const RnD = props => {
             selectedActionPath: path
           });
           break;
+        case "imageFrame":
+          setSelectedElement({
+            ...selectedElementProps,
+            enable: 2,
+            selectedAction: actionType,
+            selectedActionPath: path
+          });
+          break;
         case "saveAsTemplate":
           const curPath = type === "parent" ? Path.parent(path) : path;
           const currentNode = Node.get(editor, curPath);

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.2",
+  "version": "4.1.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"