@flozy/editor 4.9.8 → 4.9.9

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -24,6 +24,13 @@ const VideoContent = props => {
     alt,
     videoSX
   } = props;
+  const iframeRef = useRef(null);
+  useEffect(() => {
+    if (iframeRef.current) {
+      iframeRef.current.src = "about:blank"; // reloading the iframe
+      iframeRef.current.src = embedURL;
+    }
+  }, [embedURL, iframeRef.current]);
   return resizing ? /*#__PURE__*/_jsx("div", {
     style: {
       width: "100%",
@@ -37,6 +44,7 @@ const VideoContent = props => {
       icon: "videoPlayer"
     })
   }) : /*#__PURE__*/_jsx(Box, {
+    ref: iframeRef,
     component: "iframe",
     className: "embedd-iframe",
     sx: {
@@ -52,7 +60,6 @@ const VideoContent = props => {
       background: bgColor || "transparent",
       ...videoSX
     },
-    src: embedURL,
     title: alt,
     allowFullScreen: true
   });

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useState, useRef } from "react";
-import { Button, Dialog, DialogActions, DialogContent, useTheme } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, useTheme, Popper } from "@mui/material";
 import { Node, Path, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
@@ -37,27 +37,23 @@ const Resizer = ({
 };
 const GridItemToolbar = props => {
   const {
+    classes,
     selected,
     showTool,
     onSettings,
-    onAddColumn
+    onAddColumn,
+    columnRef
   } = props;
-  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
-    contentEditable: false,
-    className: "grid-item-toolbar",
-    style: {
-      top: "-34px",
-      left: "calc(100% - 68px)",
-      display: "flex",
-      flexDirection: "row"
-    },
+  return selected && !showTool ? /*#__PURE__*/_jsxs(Popper, {
+    anchorEl: columnRef?.current,
+    open: true,
+    placement: "top-end",
+    sx: classes.popTools,
+    className: "gi-tool-pp",
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Column Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          marginRight: "4px"
-        },
         size: "small",
         onClick: onSettings,
         children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
@@ -66,9 +62,6 @@ const GridItemToolbar = props => {
       title: "Add Column",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          marginRight: "4px"
-        },
         size: "small",
         onClick: onAddColumn,
         children: /*#__PURE__*/_jsx(AddIcon, {})
@@ -84,9 +77,13 @@ const GridItem = props => {
     updateColumnWidth,
     updateColNodes
   } = useGrid() || {};
+  const {
+    hoverPath,
+    theme: appTheme
+  } = useEditorContext();
   const columnRef = useRef(null);
   const theme = useTheme();
-  const classes = GridStyles(theme);
+  const classes = GridStyles(theme, appTheme);
   const {
     attributes,
     children,
@@ -123,9 +120,6 @@ const GridItem = props => {
   } = alignment || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
-  const {
-    hoverPath
-  } = useEditorContext();
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [parentDOM, setParentDOM] = useState({});
@@ -308,10 +302,12 @@ const GridItem = props => {
         className: "element-selector-dots br",
         children: " "
       }), /*#__PURE__*/_jsx(GridItemToolbar, {
+        classes: classes,
         selected: selected,
         showTool: showTool,
         onSettings: onSettings,
-        onAddColumn: onAddColumn
+        onAddColumn: onAddColumn,
+        columnRef: columnRef
       })]
     }), /*#__PURE__*/_jsx(Box, {
       ref: columnRef,

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

@@ -1,4 +1,4 @@
-const GridStyles = theme => ({
+const GridStyles = (theme, appTheme) => ({
   gridButton: {
     background: "#007FFF",
     color: "#fff",
@@ -86,6 +86,32 @@ const GridStyles = theme => ({
         }
       }
     }
+  },
+  popTools: {
+    zIndex: 1000,
+    "& button": {
+      borderRadius: "8px",
+      marginRight: "4px",
+      border: "1px solid rgba(37, 99, 235, 0.32)",
+      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+      background: appTheme?.palette?.editor?.background,
+      color: "#64748B",
+      "& svg": {
+        width: "16px",
+        height: "16px",
+        "& .fillStroke": {
+          stroke: "#64748B"
+        }
+      },
+      "&:hover": {
+        background: appTheme?.palette?.editor?.background,
+        border: "1px solid #2684ff",
+        color: "#2684ff",
+        "& .fillStroke": {
+          stroke: "#2684ff"
+        }
+      }
+    }
   }
 });
 export default GridStyles;

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

@@ -9,7 +9,7 @@ import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../.
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
-// import useWindowResize from "../../hooks/useWindowResize"; //commenting for ui demo if okay remove this comment before dev
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -45,11 +45,8 @@ const Section = props => {
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
   const popperEl = useRef(null);
-
-  // const [size] = useWindowResize();
-  // const isSectionFullWidth =
-  //   sectionGridSize && sectionGridSize[size?.device] >= 12;
-
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
   const [isHovering, setIsHovering] = useState(false);
   const onMouseEnter = () => {
     setIsHovering(true);
@@ -80,9 +77,6 @@ const Section = props => {
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
-          sx: {
-            marginBottom: '25px !important'
-          },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(TuneIcon, {})
         })
@@ -155,16 +149,11 @@ const Section = props => {
       className: "ed-section-inner",
       sx: {
         position: "relative",
-        ...edInnerSp,
-        outline: isHovering ? `1px dashed ${theme?.palette?.editor?.inputFieldBorder}` : 'none'
-        // borderRadius: '5px'
+        ...edInnerSp
       },
-
       ref: anchorEl,
-      children: [isHovering ? /*#__PURE__*/_jsx(Popper, {
-        open: isHovering
-        // open={isHovering && isSectionFullWidth}  //commenting for ui demo if okay remove this comment before dev
-        ,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
         anchorEl: anchorEl?.current,
         placement: "top-start",
         sx: {
@@ -187,7 +176,11 @@ const Section = props => {
             fromPopper: true
           })]
         })
-      }) : /*#__PURE__*/_jsx(_Fragment, {}), children]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

package/dist/Editor/common/iconslist.js

@@ -1274,6 +1274,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z",
     stroke: "#64748B",
+    className: "fillStroke",
     strokeWidth: "1.5",
     strokeMiterlimit: "10",
     strokeLinecap: "round",
@@ -1281,6 +1282,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   }), /*#__PURE__*/_jsx("path", {
     d: "M1.8335 11.8066V10.1933C1.8335 9.23998 2.61266 8.45165 3.57516 8.45165C5.23433 8.45165 5.91266 7.27832 5.0785 5.83915C4.60183 5.01415 4.886 3.94165 5.72016 3.46498L7.306 2.55748C8.03016 2.12665 8.96516 2.38332 9.396 3.10748L9.49683 3.28165C10.3218 4.72082 11.6785 4.72082 12.5127 3.28165L12.6135 3.10748C13.0443 2.38332 13.9793 2.12665 14.7035 2.55748L16.2893 3.46498C17.1235 3.94165 17.4077 5.01415 16.931 5.83915C16.0968 7.27832 16.7752 8.45165 18.4343 8.45165C19.3877 8.45165 20.176 9.23082 20.176 10.1933V11.8066C20.176 12.76 19.3968 13.5483 18.4343 13.5483C16.7752 13.5483 16.0968 14.7216 16.931 16.1608C17.4077 16.995 17.1235 18.0583 16.2893 18.535L14.7035 19.4425C13.9793 19.8733 13.0443 19.6166 12.6135 18.8925L12.5127 18.7183C11.6877 17.2791 10.331 17.2791 9.49683 18.7183L9.396 18.8925C8.96516 19.6166 8.03016 19.8733 7.306 19.4425L5.72016 18.535C4.886 18.0583 4.60183 16.9858 5.0785 16.1608C5.91266 14.7216 5.23433 13.5483 3.57516 13.5483C2.61266 13.5483 1.8335 12.76 1.8335 11.8066Z",
     stroke: "#64748B",
+    className: "fillStroke",
     strokeWidth: "1.5",
     strokeMiterlimit: "10",
     strokeLinecap: "round",

package/package.json

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