@flozy/editor 4.1.3 → 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/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 */

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/package.json

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