@flozy/editor 4.1.3 → 4.1.5

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

@@ -923,7 +923,7 @@ blockquote {
 }
 
 .sliderInput {
-  width: 30px;
+  width: 66px !important;
   padding: 2px 10px;
   margin-left: 18px;
   box-shadow: 0px 4px 16px 0px #0000000d;

package/dist/Editor/Elements/AI/Styles.js

@@ -32,6 +32,9 @@ const Styles = theme => ({
       color: "#000",
       fontSize: "14px !important",
       fontFamily: '"Inter", sans-serif',
+      "&:focus-visible": {
+        border: "none !important"
+      },
       "&::placeholder": {
         color: "#94A3B8",
         opacity: 1 /* Firefox */,

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 */
@@ -206,6 +211,11 @@ const useFreeGridStyles = ({
           backgroundColor: "#FFF",
           overflow: "hidden"
         },
+        "& .fgi_type_text": {
+          "& .edt-headings": {
+            margin: "0px"
+          }
+        },
         /** element toolbar hide */
         "& .element-toolbar": {
           display: "none"

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

@@ -35,7 +35,7 @@ const FullViewCard = props => {
       sx: classes.paperOverrides,
       className: "paperOverrides",
       children: /*#__PURE__*/_jsx(Box, {
-        sx: classes.buttonCardMediaWrpr,
+        sx: classes.fullViewCardMediaWrpr,
         onClick: onSelectTemplate(m),
         children: /*#__PURE__*/_jsx("div", {
           className: "img-wrapper",

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

@@ -511,17 +511,17 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: "5px",
+    padding: '5px',
     position: "relative",
     margin: "8px",
-    marginBottom: "0px",
-    "& .img-wrapper": {
+    height: "50px",
+    '& .img-wrapper': {
       "&:hover": {
-        padding: "0px 2px 0px 2px",
-        backgroundColor: "#E9F3FE",
-        border: "1px solid #2563EB40",
-        borderRadius: "5px",
-        height: "100%",
+        padding: '0px 2px 0px 2px',
+        backgroundColor: '#E9F3FE',
+        border: '1px solid #2563EB40',
+        borderRadius: '5px',
+        // height: "100%",
         margin: "0px"
         // "& .template-card-action": {
         //   display: "flex",
@@ -643,6 +643,21 @@ const usePopupStyle = theme => ({
     "& fieldset": {
       border: "none !important"
     }
+  },
+  fullViewCardMediaWrpr: {
+    padding: '5px',
+    position: "relative",
+    margin: "8px",
+    height: "140px",
+    '& .img-wrapper': {
+      "&:hover": {
+        padding: '0px 2px 0px 2px',
+        backgroundColor: '#E9F3FE',
+        border: '1px solid #2563EB40',
+        borderRadius: '5px',
+        margin: "0px"
+      }
+    }
   }
 });
 export default usePopupStyle;

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

@@ -14,11 +14,11 @@ const FontLoader = props => {
     let currentIndex = 0;
     let retryCount = 0;
     function loadNextBatch() {
-      if (currentIndex >= families.length) {
+      if (currentIndex >= families?.length) {
         console.log('All fonts have been loaded');
         return;
       }
-      const batch = families.slice(currentIndex, currentIndex + batchSize);
+      const batch = families?.slice(currentIndex, currentIndex + batchSize);
       const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
       WebFont.load({
         google: {
@@ -52,11 +52,11 @@ const FontLoader = props => {
     return fontFamily.replace(/\\/g, '').replace(/['"]/g, '');
   };
   useEffect(() => {
-    let families = ["PoppinsRegular"];
+    let families = [...defaultFonts];
     if (!readOnly) {
-      otherProps.services("listGoogleFont", []).then(data => {
-        families = [...defaultFonts, ...(data?.data || ['PoppinsRegular'])];
-        const filteredfamilies = families.filter(font => !font.includes("Material"));
+      otherProps?.services("listGoogleFont", []).then(data => {
+        families = [...families, ...(data?.data || [])];
+        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
         setFontFamilies({
           id: 1,
           format: "fontFamily",
@@ -68,11 +68,11 @@ const FontLoader = props => {
         console.log(err);
       });
     } else {
-      const elements = Array.from(document.querySelectorAll("*"));
+      const elements = Array.from(document?.querySelectorAll("*"));
       const fontSet = new Set();
       elements.forEach(element => {
-        const computedStyles = window.getComputedStyle(element);
-        fontSet.add(sanitizeFontFamily(computedStyles.fontFamily));
+        const computedStyles = window?.getComputedStyle(element);
+        fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
       });
       families = Array.from(fontSet);
       loadFontsInBatches(families);

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/VirtualElement/index.js

@@ -18,43 +18,54 @@ const VirtualElement = props => {
   useEffect(() => {
     if (virtualRef?.current) {
       setTimeout(() => {
-        calculateProps();
+        const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
+        console.log(allData);
+        // it should trigger by auto alignment or on clicking mobile view change
+        updateAutoProps(editor, allData, "xs");
       }, 0);
     }
   }, [updated_at, virtualRef?.current]);
-  const calculateProps = () => {
-    const rect = virtualRef?.current?.getBoundingClientRect();
+  const calculateProps = (curPath, dom, domClass, allData) => {
+    const rect = dom?.getBoundingClientRect();
+    const sectionRect = virtualRef?.current?.getBoundingClientRect();
     const sectionProps = {
-      path,
+      path: curPath,
       props: {
         height: rect.height
       }
     };
     const itemsData = [];
-    const items = virtualRef?.current?.querySelectorAll(ROOT_ITEM_CLASS);
+    const items = dom.querySelectorAll(domClass);
     let sectionHeight = 0;
     for (let i = 0; i < items.length; i++) {
       const itemRect = items[i]?.getBoundingClientRect();
-      const y = Math.abs(rect.top - itemRect?.top);
-      itemsData.push({
-        path: items[i]?.dataset.path,
-        props: {
-          top: y,
-          left: 24,
-          marginTop: 12,
-          width: itemRect?.width,
-          height: itemRect?.height,
-          gridArea: calculateGridArea(y)
-        }
-      });
-      sectionHeight += itemRect?.height;
+      if (items[i]?.classList.contains("type_box")) {
+        allData = calculateProps(items[i]?.dataset.path, items[i], ".freegrid-item", allData);
+      } else {
+        const y = Math.abs(rect.top - itemRect?.top);
+        itemsData.push({
+          path: items[i]?.dataset.path,
+          props: {
+            top: y,
+            left: 24,
+            marginTop: 12,
+            width: itemRect?.width,
+            height: itemRect?.height,
+            gridArea: calculateGridArea(y)
+          }
+        });
+        sectionHeight += itemRect?.height;
+      }
+    }
+    if (dom?.classList.contains("type_box")) {
+      const y = Math.abs(sectionRect.top - rect?.top);
+      sectionProps.props.gridArea = calculateGridArea(y);
     }
     if (sectionHeight > sectionProps?.props?.height) {
       sectionProps.props.height = sectionHeight;
     }
-    const allData = [sectionProps, itemsData]?.flat();
-    // it should trigger by auto alignment or on clicking mobile view change
-    updateAutoProps(editor, allData, "xs");
+    allData = [sectionProps, [...allData, ...itemsData]]?.flat();
+    return allData;
   };
   const getItems = () => {
     const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];

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/fieldTypes/bannerSpacing.js

@@ -136,7 +136,7 @@ const BannerSpacing = props => {
                 type: "number",
                 name: "top",
                 value: pro_value?.top,
-                className: "borderInput",
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.topRight
                 },
@@ -149,7 +149,7 @@ const BannerSpacing = props => {
                 type: "number",
                 name: "right",
                 value: pro_value?.right,
-                className: "borderInput",
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomLeft
                 },
@@ -162,7 +162,7 @@ const BannerSpacing = props => {
                 type: "number",
                 name: "bottom",
                 value: pro_value?.bottom,
-                className: "borderInput",
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomRight
                 },
@@ -174,8 +174,8 @@ const BannerSpacing = props => {
               children: /*#__PURE__*/_jsx("input", {
                 type: "number",
                 name: "left",
-                className: "borderInput",
                 value: pro_value?.left,
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.topLeft
                 },

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -257,7 +257,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("h1", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 1",
         children: children
       });
@@ -265,7 +265,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("h2", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 2",
         children: children
       });
@@ -273,7 +273,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("h3", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 3",
         children: children
       });

package/package.json

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