@flozy/editor 4.9.1 → 4.9.2

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";
   };
@@ -334,7 +342,18 @@ const GridItem = props => {
       className: resizing ? "resizing" : "",
       onMouseDown: onMouseDown,
       height: "auto"
-    }) : null]
+    }) : 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"
+        })
+      })]
+    })]
   });
 };
 export default GridItem;

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

@@ -51,6 +51,7 @@ const GridStyles = theme => ({
         },
         "& .gi-inner-cw": {
           overflowX: "auto",
+          wordBreak: "break-word",
           "& .tableToolBar": {
             display: "flex",
             maxWidth: "100%",

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

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