@flozy/editor 4.9.0 → 4.9.2

package/dist/Editor/CommonEditor.js

@@ -579,8 +579,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
+                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -1234,7 +1234,5 @@ blockquote {
 
 .settingsHeader {
   font-size: 14px !important;
-  font-weight: 600 !important;
-  font-family: Inter, sans-serif;
-  text-transform: uppercase;
+  font-weight: 500 !important;
 }

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

@@ -101,6 +101,7 @@ const Video = ({
     horizantal
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const hasAspect = url && aspectRatio !== "custom" && aspectRatio;
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -190,10 +191,10 @@ const Video = ({
           width: {
             ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
           },
-          height: url && !aspectRatio ? {
+          height: url && (aspectRatio === "custom" || !aspectRatio) ? {
             ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
           } : "auto",
-          aspectRatio: aspectRatio ? aspectRatio : "auto"
+          aspectRatio: hasAspect ? aspectRatio : "auto"
         }, theme)
       };
     }

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useState, useRef } from "react";
-import { useTheme } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, useTheme } from "@mui/material";
 import { Node, Path, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
@@ -83,7 +83,7 @@ const GridItem = props => {
     initColumnWidth,
     updateColumnWidth,
     updateColNodes
-  } = useGrid();
+  } = useGrid() || {};
   const columnRef = useRef(null);
   const theme = useTheme();
   const classes = GridStyles(theme);
@@ -129,6 +129,7 @@ const GridItem = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [parentDOM, setParentDOM] = useState({});
+  const [alert, setAlert] = useState(null);
   const [size, onMouseDown, resizing, onLoad, isDone] = useTableResize({
     ...parentDOM
   });
@@ -216,16 +217,23 @@ const GridItem = props => {
     try {
       const gridPath = Path.parent(path);
       const gridNode = Node.get(editor, gridPath);
-      onAddGridItem({
-        editor,
-        element: gridNode,
-        children: gridNode?.children || [],
-        isColumn: gridNode?.equalItems
-      });
+      if (gridNode?.children?.length === 5) {
+        setAlert("Maximum column limit exceeded");
+      } else {
+        onAddGridItem({
+          editor,
+          element: gridNode,
+          children: gridNode?.children || [],
+          isColumn: gridNode?.equalItems
+        });
+      }
     } catch (err) {
       console.log(err);
     }
   };
+  const handleClose = () => {
+    setAlert(null);
+  };
   const getBorderColor = () => {
     return borderColor || "transparent";
   };
@@ -315,7 +323,8 @@ const GridItem = props => {
         ...giInProps,
         width: "100%",
         height: "100%",
-        color: textColor || "#000",
+        // dark theme default color effect - FS-6961
+        color: textColor || "inherit",
         "&:hover": {
           borderColor: borderColorHover || borderColor || "transparent"
         }
@@ -328,11 +337,22 @@ const GridItem = props => {
       onClose: onClose,
       onDelete: onDelete,
       customProps: customProps
-    }) : null, /*#__PURE__*/_jsx(Resizer, {
+    }) : null, !readOnly ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       className: resizing ? "resizing" : "",
       onMouseDown: onMouseDown,
       height: "auto"
+    }) : null, /*#__PURE__*/_jsxs(Dialog, {
+      open: Boolean(alert),
+      onClose: handleClose,
+      children: [/*#__PURE__*/_jsx(DialogContent, {
+        children: alert
+      }), /*#__PURE__*/_jsx(DialogActions, {
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          children: "Close"
+        })
+      })]
     })]
   });
 };

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

@@ -38,14 +38,25 @@ const GridStyles = theme => ({
           }
         },
         flex: "1 1 0",
+        height: "100%",
         [theme?.breakpoints?.between("xs", "md")]: {
           flex: "1 1 100%",
+          height: "auto",
           padding: "0px !important",
           minWidth: "100% !important",
           maxWidth: "100% !important",
           "& .col-width-resizer": {
             display: "none !important"
           }
+        },
+        "& .gi-inner-cw": {
+          overflowX: "auto",
+          wordBreak: "break-word",
+          "& .tableToolBar": {
+            display: "flex",
+            maxWidth: "100%",
+            overflowX: "auto"
+          }
         }
       },
       "& .col-width-resizer": {

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

@@ -14,10 +14,10 @@ const default_grid = [{
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {
-      top: "0",
+      top: "8",
       left: "0",
       right: "0",
-      bottom: "0"
+      bottom: "16"
     },
     alignment: {
       horizantal: "center"
@@ -36,10 +36,10 @@ const default_grid = [{
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {
-      top: "0",
+      top: "8",
       left: "0",
       right: "0",
-      bottom: "0"
+      bottom: "16"
     },
     forceFullWidth: true,
     borderWidth: "0px"

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -5,6 +5,7 @@ import { StyleContent } from "../../../StyleBuilder";
 import { formStyle } from "../../../StyleBuilder/formStyle";
 import { ReactEditor } from "slate-react";
 import { ExpandMoreOutlined } from "@mui/icons-material";
+import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormSettings = props => {
@@ -20,6 +21,9 @@ const FormSettings = props => {
   const {
     hideTools
   } = customProps || {};
+  const {
+    theme
+  } = useEditorContext();
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -58,6 +62,17 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            "& .MuiAccordionSummary-root": {
+              flexDirection: "row-reverse",
+              "& .MuiSvgIcon-root": {
+                color: theme?.palette?.primary?.main
+              },
+              "& .Mui-expanded": {
+                "& .MuiSvgIcon-root": {
+                  color: theme?.palette?.text?.blueText
+                }
+              }
+            },
             padding: "0px",
             "&.Mui-expanded": {
               margin: "0"
@@ -85,7 +100,7 @@ const FormSettings = props => {
                 padding: "0px"
               },
               children: /*#__PURE__*/_jsx(Typography, {
-                variant: "h3",
+                variant: "body1",
                 className: "settingsHeader",
                 color: "primary",
                 style: {
@@ -99,41 +114,15 @@ const FormSettings = props => {
                 padding: "5px"
               },
               children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
-                return /*#__PURE__*/_jsx(ThemeProvider, {
-                  theme: muiTheme,
-                  children: /*#__PURE__*/_jsxs(Accordion, {
-                    defaultExpanded: true,
-                    children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                      expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-                      sx: {
-                        padding: "0px"
-                      },
-                      children: /*#__PURE__*/_jsx(Typography, {
-                        variant: "h3",
-                        className: "settingsHeader",
-                        color: "primary",
-                        style: {
-                          fontSize: "14px !important",
-                          fontWeight: "400"
-                        },
-                        children: field?.tab
-                      })
-                    }), /*#__PURE__*/_jsx(AccordionDetails, {
-                      sx: {
-                        padding: "0px"
-                      },
-                      children: /*#__PURE__*/_jsx(StyleContent, {
-                        renderTabs: [field],
-                        value: field.value,
-                        element: element,
-                        onChange: onChange,
-                        customElement: element?.children?.[0] || null,
-                        customProps: customProps,
-                        handleClose: handleClose
-                      }, `tab_${field.value}_${index}`)
-                    })]
-                  }, `accordion_${index}`)
-                }, index);
+                return /*#__PURE__*/_jsx(StyleContent, {
+                  renderTabs: [field],
+                  value: field.value,
+                  element: element,
+                  onChange: onChange,
+                  customElement: element?.children?.[0] || null,
+                  customProps: customProps,
+                  handleClose: handleClose
+                }, `tab_${field.value}_${index}`);
               })
             })]
           }, `accordion_${i}`)
@@ -146,10 +135,10 @@ const FormSettings = props => {
             children: [/*#__PURE__*/_jsx(AccordionSummary, {
               expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
               sx: {
-                padding: "0px"
+                padding: "5px"
               },
               children: /*#__PURE__*/_jsx(Typography, {
-                variant: "h3",
+                variant: "body1",
                 className: "settingsHeader",
                 color: "primary",
                 style: {

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

@@ -3,19 +3,28 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange
+    onChange,
+    show
   } = props;
   const classes = useSwitchViewport();
+  const {
+    setSelectedElement
+  } = useEditorContext();
   useEffect(() => {
-    console.log(breakpoint);
+    // to reset selection on viewport changes - FS-6589
+    setSelectedElement({});
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
+    style: {
+      display: show ? "block" : "none"
+    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {

package/dist/Editor/common/StyleBuilder/embedVideoStyle.js

@@ -23,7 +23,7 @@ const embedVideoStyle = [{
       value: "9 / 16"
     }, {
       text: "Custom",
-      value: ""
+      value: "custom"
     }],
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

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

@@ -5,27 +5,10 @@ import CloseIcon from "@mui/icons-material/Close";
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { ThemeProvider } from "@mui/material/styles";
-import { ExpandMoreOutlined, Height } from "@mui/icons-material";
+import { ExpandMoreOutlined, ExpandMoreSharp } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const muiTheme = createTheme({
-  components: {
-    MuiAccordion: {
-      styleOverrides: {
-        root: {
-          padding: "0px",
-          "&.Mui-expanded": {
-            margin: "0"
-          }
-        }
-      },
-      defaultProps: {
-        elevation: 0
-      }
-    }
-  }
-});
 export const StyleContent = props => {
   const {
     value,
@@ -95,6 +78,34 @@ const StyleBuilder = props => {
   const {
     hideTools
   } = customProps || {};
+  const muiTheme = createTheme({
+    components: {
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            "& .MuiAccordionSummary-root": {
+              flexDirection: "row-reverse",
+              "& .MuiSvgIcon-root": {
+                color: theme?.palette?.primary?.main
+              },
+              "& .Mui-expanded": {
+                "& .MuiSvgIcon-root": {
+                  color: theme?.palette?.text?.blueText
+                }
+              }
+            },
+            padding: "0px",
+            "&.Mui-expanded": {
+              margin: "0"
+            }
+          }
+        },
+        defaultProps: {
+          elevation: 0
+        }
+      }
+    }
+  });
   useEffect(() => {
     if (customProps?.onDrawerOpen) {
       customProps?.onDrawerOpen(true);
@@ -171,17 +182,17 @@ const StyleBuilder = props => {
               children: /*#__PURE__*/_jsxs(Accordion, {
                 defaultExpanded: true,
                 children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
+                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreSharp, {}),
                   sx: {
                     padding: "0px"
                   },
                   children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "h3",
+                    variant: "body1",
                     className: "settingsHeader",
                     color: "primary",
                     style: {
                       fontSize: "14px !important",
-                      fontWeight: "400"
+                      fontWeight: "400 !important"
                     },
                     children: m?.tab
                   })
@@ -190,40 +201,14 @@ const StyleBuilder = props => {
                     padding: "5px"
                   },
                   children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
-                    return /*#__PURE__*/_jsx(ThemeProvider, {
-                      theme: muiTheme,
-                      children: /*#__PURE__*/_jsxs(Accordion, {
-                        defaultExpanded: true,
-                        children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                          expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-                          sx: {
-                            padding: "0px"
-                          },
-                          children: /*#__PURE__*/_jsx(Typography, {
-                            variant: "h3",
-                            className: "settingsHeader",
-                            color: "primary",
-                            style: {
-                              fontSize: "14px !important",
-                              fontWeight: "400"
-                            },
-                            children: field?.tab
-                          })
-                        }), /*#__PURE__*/_jsx(AccordionDetails, {
-                          sx: {
-                            padding: "0px"
-                          },
-                          children: /*#__PURE__*/_jsx(StyleContent, {
-                            renderTabs: [field],
-                            value: field.value,
-                            element: elementProps,
-                            onChange: onElementPropsChange,
-                            customProps: customProps,
-                            handleClose: handleClose
-                          }, `tab_${field.value}_${index}`)
-                        })]
-                      }, `accordion_${index}`)
-                    }, index);
+                    return /*#__PURE__*/_jsx(StyleContent, {
+                      renderTabs: [field],
+                      value: field.value,
+                      element: elementProps,
+                      onChange: onElementPropsChange,
+                      customProps: customProps,
+                      handleClose: handleClose
+                    }, `tab_${field.value}_${index}`);
                   })
                 })]
               }, `accordion_${i}`)
@@ -239,7 +224,7 @@ const StyleBuilder = props => {
                     padding: "0px"
                   },
                   children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "h3",
+                    variant: "body1",
                     className: "settingsHeader",
                     color: "primary",
                     style: {
@@ -250,7 +235,7 @@ const StyleBuilder = props => {
                   })
                 }), /*#__PURE__*/_jsx(AccordionDetails, {
                   sx: {
-                    padding: "0px"
+                    padding: "5px"
                   },
                   children: /*#__PURE__*/_jsx(StyleContent, {
                     renderTabs: renderTabs,
@@ -269,6 +254,7 @@ const StyleBuilder = props => {
         sx: {
           p: 0,
           pt: 2,
+          pl: 1,
           justifyContent: "space-between"
         },
         children: [onDelete ? /*#__PURE__*/_jsx(Button, {

package/dist/Editor/utils/gridItem.js

@@ -45,15 +45,19 @@ export const onAddGridItem = ({
   if (insertPath) {
     insertPath[insertPath.length - 1] = element.children.length;
     const lp = ReactEditor.findPath(editor, element);
-    const lastElement = {
-      ...element.children[element.children.length - 1]
-    };
+    // const lastElement = { ...element.children[element.children.length - 1] };
     if (isColumn && children?.length - 1 > 0) {
       updateLastSiblingWidths(editor, [...lp, children.length - 1]);
     }
     Transforms.insertNodes(editor, gridItem({
-      ...(lastElement || {}),
+      // ...(lastElement || {}),
       minWidth: null,
+      bannerSpacing: {
+        top: "8",
+        left: "0",
+        right: "0",
+        bottom: "16"
+      },
       children: [{
         type: "paragraph",
         children: [{

package/package.json

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