@flozy/editor 3.2.6 → 3.2.8

package/dist/Editor/Elements/Embed/Frames/DarkFrame.js

@@ -8,7 +8,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -41,7 +42,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
         fill: `url(#imageSource_${id})`,
         ref: imageRef,
         style: {
-          cursor: "move"
+          cursor: readOnly ? "pointer" : "move"
         }
       })
     }), /*#__PURE__*/_jsxs("defs", {

package/dist/Editor/Elements/Embed/Frames/ImageFrame.js

@@ -16,7 +16,8 @@ const ImageFrame = props => {
     id,
     framePos,
     onChange,
-    readOnly
+    readOnly,
+    handleImageClick
   } = props;
   const svgRef = useRef();
   const [dom, setDOM] = useState(null);
@@ -75,6 +76,8 @@ const ImageFrame = props => {
     if (!readOnly) {
       setSelectedPath(id);
       setAnchorEl(svgRef?.current);
+    } else {
+      handleImageClick();
     }
   };
   const onClose = () => {

package/dist/Editor/Elements/Embed/Frames/InstaFrame.js

@@ -8,7 +8,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -98,7 +99,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
       strokeWidth: "5",
       fill: `url(#imageSource_${id})`,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       },
       ref: imageRef
     }), /*#__PURE__*/_jsx("defs", {

package/dist/Editor/Elements/Embed/Frames/InstaFrameDark.js

@@ -8,7 +8,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -98,7 +99,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
       fill: `url(#imageSource_${id})`,
       ref: imageRef,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {

package/dist/Editor/Elements/Embed/Frames/LiteFrame.js

@@ -8,7 +8,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -44,7 +45,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
         fill: `url(#imageSource_${id})`,
         ref: imageRef,
         style: {
-          cursor: "move"
+          cursor: readOnly ? "pointer" : "move"
         }
       })
     }), /*#__PURE__*/_jsxs("defs", {

package/dist/Editor/Elements/Embed/Frames/RoundedDark.js

@@ -8,7 +8,8 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -42,7 +43,7 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
         fill: `url(#imageSource_${id})`,
         ref: imageRef,
         style: {
-          cursor: "move"
+          cursor: readOnly ? "pointer" : "move"
         }
       })
     }), /*#__PURE__*/_jsxs("defs", {

package/dist/Editor/Elements/Embed/Frames/RoundedLight.js

@@ -8,7 +8,8 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -39,7 +40,7 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
       fill: `url(#imageSource_${id})`,
       ref: imageRef,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {

package/dist/Editor/Elements/Embed/Frames/RoundedLightB2.js

@@ -8,7 +8,8 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
     imagePos,
     handleClick,
     imageRef,
-    defaultScale
+    defaultScale,
+    readOnly
   } = props;
   const {
     calX,
@@ -39,7 +40,7 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
       fill: `url(#imageSource_${id})`,
       ref: imageRef,
       style: {
-        cursor: "move"
+        cursor: readOnly ? "pointer" : "move"
       }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {

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

@@ -15,6 +15,90 @@ import LinkSettings from "../../common/LinkSettings";
 import { handleLinkType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const ToolBar = ({
+  isEmpty,
+  onSettings,
+  setOpenNav
+}) => {
+  return !isEmpty ? /*#__PURE__*/_jsxs("div", {
+    className: "element-toolbar visible-on-hover",
+    contentEditable: false,
+    style: {
+      top: "0px",
+      right: "0px",
+      left: "auto",
+      margin: "0px"
+    },
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Image Settings",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Link Settings",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setOpenNav(true),
+        children: /*#__PURE__*/_jsx(LinkIcon, {})
+      })
+    })]
+  }) : null;
+};
+const ImageContent = ({
+  readOnly,
+  setOpenSettings,
+  element,
+  handleImageClick,
+  onTouchEnd,
+  path
+}) => {
+  const {
+    alt,
+    url,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    boxShadow,
+    frame = null,
+    objectFit,
+    webAddress
+  } = element;
+  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+    component: "button",
+    className: "element-empty-btn",
+    contentEditable: false,
+    onClick: () => {
+      setOpenSettings(true);
+    },
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "image"
+    }), "Add Image"]
+  }) : /*#__PURE__*/_jsx(Box, {
+    component: "img",
+    className: "emb-img",
+    sx: {
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
+      objectFit: "cover",
+      boxShadow: boxShadow || "none",
+      height: objectFit ? "100%" : "auto",
+      opacity: frame ? 0 : 1,
+      cursor: webAddress ? "pointer" : "",
+      border: `1px solid ${borderColor}`,
+      borderWidth: `${borderWidth}`?.includes("px") ? borderWidth : `${borderWidth}px`
+    },
+    alt: alt,
+    src: url,
+    onClick: handleImageClick,
+    onTouchEnd: onTouchEnd // for mobile
+    ,
+    "data-path": path.join(","),
+    draggable: false
+  });
+};
 const Image = ({
   attributes,
   element,
@@ -23,14 +107,9 @@ const Image = ({
 }) => {
   const {
     url,
-    alt,
     bannerSpacing,
     alignment,
     bgColor,
-    borderColor,
-    borderRadius,
-    borderWidth,
-    boxShadow,
     width: oldWidth,
     xsHidden,
     objectFit,
@@ -132,67 +211,6 @@ const Image = ({
   const onPosChange = data => {
     onSave(data);
   };
-  const ToolBar = () => {
-    return !isEmpty ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar visible-on-hover",
-      contentEditable: false,
-      style: {
-        top: "0px",
-        right: "0px",
-        left: "auto",
-        margin: "0px"
-      },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Image Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Link Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => setOpenNav(true),
-          children: /*#__PURE__*/_jsx(LinkIcon, {})
-        })
-      })]
-    }) : null;
-  };
-  const ImageContent = () => {
-    return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
-      component: "button",
-      className: "element-empty-btn",
-      contentEditable: false,
-      onClick: () => {
-        setOpenSettings(true);
-      },
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: "image"
-      }), "Add Image"]
-    }) : /*#__PURE__*/_jsx(Box, {
-      component: "img",
-      className: "emb-img",
-      sx: {
-        borderRadius: {
-          ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-        },
-        objectFit: "cover",
-        boxShadow: boxShadow || "none",
-        height: objectFit ? "100%" : "auto",
-        opacity: frame ? 0 : 1,
-        cursor: webAddress ? "pointer" : "",
-        border: `1px solid ${borderColor}`,
-        borderWidth: `${borderWidth}`?.includes('px') ? borderWidth : `${borderWidth}px`
-      },
-      alt: alt,
-      src: url,
-      onClick: handleImageClick,
-      onTouchEnd: onTouchEnd,
-      "data-path": path.join(","),
-      draggable: false
-    });
-  };
   const getWidth = () => {
     if (resizing) {
       return {
@@ -246,7 +264,18 @@ const Image = ({
         position: "relative",
         ...getWidth()
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {
+        isEmpty: isEmpty,
+        onSettings: onSettings,
+        setOpenNav: setOpenNav
+      }), /*#__PURE__*/_jsx(ImageContent, {
+        readOnly: readOnly,
+        setOpenSettings: setOpenSettings,
+        element: element,
+        handleImageClick: handleImageClick,
+        onTouchEnd: onTouchEnd,
+        path: path
+      }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",
         "data-path": path.join(","),
@@ -256,7 +285,8 @@ const Image = ({
           href: url,
           id: path.join(","),
           onChange: onPosChange,
-          readOnly: readOnly
+          readOnly: readOnly,
+          handleImageClick: handleImageClick
         })
       }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

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

@@ -22,6 +22,58 @@ const GridSettingsPoupComp = {
   section: SectionPopup,
   grid: GridPopup
 };
+const GridToolBar = ({
+  selected,
+  showTool,
+  onSettings,
+  onAddGridItem,
+  onAddSection,
+  onMoveSection,
+  path
+}) => {
+  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
+    className: "grid-container-toolbar",
+    contentEditable: false,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Grid Settings",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Add Grid Item",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onAddGridItem,
+        children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Duplicate",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onAddSection(),
+        children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
+      })
+    }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Move Up",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMoveSection("up"),
+          children: /*#__PURE__*/_jsx(ArrowUpwardIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Move Down",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMoveSection("down"),
+          children: /*#__PURE__*/_jsx(ArrowDownwardIcon, {})
+        })
+      })]
+    }) : null]
+  }) : null;
+};
 const Grid = props => {
   const {
     attributes,
@@ -211,50 +263,6 @@ const Grid = props => {
       })]
     }) : null;
   };
-  const GridToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
-      className: "grid-container-toolbar",
-      contentEditable: false,
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Grid Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Add Grid Item",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onAddGridItem,
-          children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Duplicate",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onAddSection(),
-          children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
-        })
-      }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: "Move Up",
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onMoveSection("up"),
-            children: /*#__PURE__*/_jsx(ArrowUpwardIcon, {})
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: "Move Down",
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onMoveSection("down"),
-            children: /*#__PURE__*/_jsx(ArrowDownwardIcon, {})
-          })
-        })]
-      }) : null]
-    }) : null;
-  };
   const sectionId = id ? {
     id
   } : {};
@@ -312,7 +320,15 @@ const Grid = props => {
       }), /*#__PURE__*/_jsx("div", {
         className: "element-selector-dots br",
         children: " "
-      }), /*#__PURE__*/_jsx(GridToolBar, {})]
+      }), /*#__PURE__*/_jsx(GridToolBar, {
+        selected: selected,
+        showTool: showTool,
+        onSettings: onSettings,
+        onAddGridItem: onAddGridItem,
+        onAddSection: onAddSection,
+        onMoveSection: onMoveSection,
+        path: path
+      })]
     }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
       element: element,
       onSave: onSave,

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

@@ -10,6 +10,29 @@ import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { isEmptyNode } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridItemToolbar = ({
+  selected,
+  showTool,
+  onSettings
+}) => {
+  return selected && !showTool ? /*#__PURE__*/_jsx("div", {
+    contentEditable: false,
+    className: "grid-item-toolbar",
+    style: {
+      top: "-14px",
+      left: "-14px"
+    },
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: "Grid Item Settings",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+      })
+    })
+  }) : null;
+};
 const GridItem = props => {
   const {
     attributes,
@@ -51,25 +74,6 @@ const GridItem = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
-  const GridItemToolbar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
-      contentEditable: false,
-      className: "grid-item-toolbar",
-      style: {
-        top: "-14px",
-        left: "-14px"
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Grid Item Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    }) : null;
-  };
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -153,7 +157,11 @@ const GridItem = props => {
       }), /*#__PURE__*/_jsx("div", {
         className: "element-selector-dots br",
         children: " "
-      }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
+      }), /*#__PURE__*/_jsx(GridItemToolbar, {
+        selected: selected,
+        showTool: showTool,
+        onSettings: onSettings
+      })]
     }), /*#__PURE__*/_jsx(Box, {
       className: `gi-inner-cw ${animation || ""} content-editable ${isEmpty} np`,
       component: "div",

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

@@ -55,10 +55,6 @@ const PopupTool = props => {
   const updateAnchorEl = () => {
     try {
       const domSelection = window.getSelection();
-      if (!domSelection?.anchorOffset) {
-        // no selection
-        return;
-      }
       const domRange = domSelection?.getRangeAt(0);
       const {
         startOffset,

package/dist/Editor/plugins/withHTML.js

@@ -83,6 +83,17 @@ const withHtml = editor => {
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
+      const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
+      if (isGoogleSheet) {
+        const table = parsed.body.querySelector("table");
+        const colGrp = table.querySelector("colgroup");
+        if (colGrp) {
+          colGrp.remove();
+        }
+        const fragment = deserialize(table);
+        Transforms.insertFragment(editor, [fragment]);
+        return;
+      }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
       Transforms.insertFragment(editor, formattedFragment);

package/dist/Editor/utils/helper.js

@@ -204,6 +204,9 @@ export const decodeAndParseBase64 = encodedString => {
   const jsonData = JSON.parse(decodedURLString);
   return jsonData;
 };
+const hasVerticalScrollbar = (element = {}) => {
+  return element.scrollHeight > element.clientHeight;
+};
 export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
   const props = {};
   if (!readOnly) {
@@ -252,15 +255,17 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
     case "scrollTopOrBottom":
       props.component = "button";
       props.onClick = () => {
-        const scrollEle = document.getElementById("slate-wrapper-scroll-container");
-        if (scrollEle) {
-          if (url === "top") {
-            // top of the page
-            scrollEle.scrollTo(0, 0);
-          } else if (url === "bottom") {
-            // bottom of the page
-            scrollEle.scrollTo(0, scrollEle.scrollHeight);
-          }
+        const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
+        const isSlateWrapperScroll = hasVerticalScrollbar(slateWrapper);
+        const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
+        if (url === "top") {
+          // top of the page
+          scrollFrom.scrollTo(0, 0);
+        } else if (url === "bottom") {
+          const pageHeight = isSlateWrapperScroll ? slateWrapper.scrollHeight : document.body.scrollHeight;
+
+          // bottom of the page
+          scrollFrom.scrollTo(0, pageHeight);
         }
       };
       break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.2.6",
+  "version": "3.2.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -63,7 +63,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [