@flozy/editor 4.8.2 → 4.8.4

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

@@ -22,7 +22,8 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     chars,
     mentions,
     setMentions,
-    type
+    type,
+    otherProps
   } = props;
   const classes = usePopupStyle(theme);
   const papperRef = useRef(null);
@@ -102,7 +103,8 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
         children: char.renderComponent ? char.renderComponent({
           ref: index === i ? buttonRef : null,
           selectionTarget: target,
-          theme: theme
+          theme: theme,
+          otherProps
         }) : ListElement ? /*#__PURE__*/_jsx(ListElement, {
           classes: classes,
           data: char,

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Node } from "slate";
 import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
 import SaveAsTemplate from "../../../StyleBuilder/fieldTypes/saveAsTemplate";
 import { CloseIcon } from "../../../iconslist";

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

@@ -12,7 +12,7 @@ const Settings = props => {
     childType,
     open,
     anchorEl,
-    placement,
+    // placement,
     onClose,
     editor,
     classes,

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

@@ -1,10 +1,12 @@
 import React from "react";
 import { Transforms, Node } from "slate";
-import { Box } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, createTheme, ThemeProvider, Typography } from "@mui/material";
 import { StyleContent } from "../../../StyleBuilder";
-import formStyle from "../../../StyleBuilder/formStyle";
+import { formStyle } from "../../../StyleBuilder/formStyle";
 import { ReactEditor } from "slate-react";
+import { ExpandMoreOutlined } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormSettings = props => {
   const {
     editor,
@@ -14,7 +16,10 @@ const FormSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
   const element = Node.get(editor, element_path);
-  const styleMaps = formStyle?.filter(f => !f?.hideOnFGS);
+  const styleMaps = formStyle;
+  const {
+    hideTools
+  } = customProps || {};
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -26,23 +31,150 @@ const FormSettings = props => {
     }, {
       at: [...currentPath, 0]
     });
+    // adding form field style to the current form node
+    const currentNode = Node.get(editor, element_path);
+    if (currentNode) {
+      currentNode?.children[0]?.children?.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : item?.bgColor,
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : item?.borderColor,
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : item?.borderStyle,
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : item?.borderWidth,
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : item?.textColor,
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : item?.fontFamily,
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : item?.textSize,
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : item?.fontWeight
+        }, {
+          at: [...currentPath, 0, index]
+        });
+      });
+    }
   };
   const handleClose = () => {
     console.log("close");
   };
+  const muiTheme = createTheme({
+    components: {
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            padding: "0px",
+            "&.Mui-expanded": {
+              margin: "0"
+            }
+          }
+        },
+        defaultProps: {
+          elevation: 0
+        }
+      }
+    }
+  });
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
     children: styleMaps?.map((m, i) => {
-      return /*#__PURE__*/_jsx(StyleContent, {
-        renderTabs: styleMaps,
-        value: m.value,
-        element: element,
-        customElement: element?.children?.[0] || null,
-        onChange: onChange,
-        customProps: customProps,
-        handleClose: handleClose
-      }, `tab_${m.value}_$${i}`);
+      if (m?.hasChildrenTabs) {
+        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: m?.tab
+              })
+            }), /*#__PURE__*/_jsx(AccordionDetails, {
+              sx: {
+                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);
+              })
+            })]
+          }, `accordion_${i}`)
+        }, i);
+      } else {
+        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: m?.tab
+              })
+            }), /*#__PURE__*/_jsx(AccordionDetails, {
+              sx: {
+                padding: "0px"
+              },
+              children: /*#__PURE__*/_jsx(StyleContent, {
+                renderTabs: styleMaps,
+                value: m.value,
+                element: element,
+                customElement: element?.children?.[0] || null,
+                onChange: onChange,
+                customProps: customProps,
+                handleClose: handleClose
+              }, `tab_${m.value}_$${i}`)
+            })]
+          }, `accordion_${i}`)
+        }, i);
+      }
     })
   });
 };

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -123,8 +123,8 @@ export function onDropItem(props, parentClass) {
       dragOver,
       parentPath,
       path,
-      diffX,
-      x: cx,
+      // diffX,
+      // x: cx,
       breakpoint
       // calX,
     } = props;
@@ -134,7 +134,9 @@ export function onDropItem(props, parentClass) {
     let newPath = [];
     newPath = moveTo;
     const cCalx = isContainerElement(editor, moveTo, props);
-    const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
+    // const posX = parseInt(
+    //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
+    // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();

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

@@ -7,7 +7,7 @@ import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
-import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,9 +16,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const themeReact = useTheme();
-  const {
-    theme
-  } = useEditorContext();
+  const theme = props?.theme;
   const classes = SectionStyle(themeReact, theme);
   const {
     children,

package/dist/Editor/common/Shorthands/elements.js

@@ -13,6 +13,7 @@ import { insertDivider } from "../../utils/divider";
 import { insertFreeGrid } from "../../utils/freegrid";
 import { Transforms } from "slate";
 import { insertInfinityAI } from "../../utils/infinityAI";
+import SearchButton from "../../Elements/Search/SearchButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
   name: "Heading 1",
@@ -149,6 +150,18 @@ const ELEMENTS_LIST = [{
     ...rest,
     icoBtnType: "cmd"
   })
+}, {
+  name: "Brain",
+  group: "Elements",
+  desc: "",
+  type: "search",
+  renderComponent: rest => /*#__PURE__*/_jsx(SearchButton, {
+    ...rest,
+    element: {
+      name: 'Brain'
+    },
+    icoBtnType: "cmd"
+  })
 }, {
   name: "Divider",
   group: "Elements",

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

@@ -9,7 +9,7 @@ const embedVideoStyle = [{
   }]
 }, {
   tab: "Aspect Ratio",
-  value: "Aspect Ratio",
+  value: "AspectRatio",
   hideOnFGS: true,
   fields: [{
     label: "Aspect Ratio",

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -5,6 +5,8 @@ import useWindowResize from "../../../hooks/useWindowResize";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
 import { useSlate } from "slate-react";
+
+// hideMetaDataOptions -- pass true to hide metadata option in select field 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -26,7 +28,8 @@ const TextOptions = props => {
     options,
     renderOption,
     width,
-    webFont = false
+    webFont = false,
+    hideMetaDataOptions = false
   } = data;
   const {
     fontFamilies
@@ -35,7 +38,7 @@ const TextOptions = props => {
   const [size] = useWindowResize();
   const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const metaDataMappingOptions = metaMappings?.boards || [];
-  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
+  const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
     if (isBreakpoint) {
       onChange({