@flozy/editor 4.8.0 → 4.8.1

package/dist/Editor/CommonEditor.js

@@ -314,7 +314,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     site_id: site_id,
     page_title: page_title,
     isIframe: isIframe,
-    onDrawerOpen: onDrawerOpen
+    onDrawerOpen: onDrawerOpen,
+    ICON_API: "https://assets.agenciflow.com"
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
@@ -534,7 +535,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
-                        decorate: decorators,
+                        decorate: d => decorators(d, editor),
                         onKeyDown: onKeyDown,
                         onSelect: () => handleCursorScroll(editorWrapper.current)
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
@@ -584,8 +585,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
             handleCodeToText: handleCodeToText
-          }), /*#__PURE__*/_jsx(FontLoader, {
-            ...props
           })]
         }, id)
       })

package/dist/Editor/Editor.css

@@ -1225,5 +1225,12 @@ blockquote {
 @media (max-width: 899px) {
   .MuiPopover-root {
     z-index: 1302 !important;
-  }
+}
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  font-family: Inter, sans-serif;
+  text-transform: uppercase;
 }

package/dist/Editor/Elements/AI/AIInput.js

@@ -90,6 +90,7 @@ function AIInput({
     children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
+      ref: refs[0],
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
         style: {
@@ -104,7 +105,6 @@ function AIInput({
         onSubmit: e => {
           e.preventDefault();
         },
-        ref: refs[0],
         children: [/*#__PURE__*/_jsx("div", {
           className: "icon-container icons-elements",
           ref: inputWrapperRef,
@@ -116,22 +116,21 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: fromToolBar ? "" : "Ask AI to write anything...",
+          placeholder: "Ask AI to write anything...",
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
-          disabled: fromToolBar,
           onKeyDown: event => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
+        }), /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
             disabled: loading,
             onClick: () => startRecording(),
             children: /*#__PURE__*/_jsx(ChatMicIcon, {})

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -40,9 +40,11 @@ const scrollToAIInput = editor => {
   }, 200);
 };
 const insertText = (editor, text, options) => {
-  const parsed = new DOMParser().parseFromString(text, "text/html");
-  const fragment = deserialize(parsed.body);
-  Transforms.insertFragment(editor, fragment, options);
+  if (text?.length) {
+    const parsed = new DOMParser().parseFromString(text, "text/html");
+    const fragment = deserialize(parsed.body);
+    Transforms.insertFragment(editor, fragment, options);
+  }
 };
 const insertAtNextLine = (editor, text) => {
   const nextLine = getNextLine(editor);
@@ -199,81 +201,95 @@ function PopoverAIInput({
   useEffect(() => {
     selectedEleRef.current = selectedElement;
   }, [selectedElement]);
-  const onSend = async (type, option) => {
-    if (type === "close") {
-      onClickOutside();
-      return;
-    }
-    if (type === "done") {
-      // Get the current selection point
-      const {
-        anchor
-      } = editor.selection;
-      const {
-        path
-      } = anchor;
-      const {
-        text: selectText
-      } = Node.get(editor, path);
-      if (selectText?.length) {
-        insertAtNextLine(editor, generatedText);
-      } else {
-        insertText(editor, generatedText);
-      }
-      onClickOutside();
-      return;
-    }
-    if (type === "replace_selection") {
-      // replace generated text
-      insertText(editor, generatedText);
-      onClickOutside();
-      return;
-    }
-    if (type === "speech_to_text") {
-      setGeneratedText(option.text);
-      return;
-    }
-    if (type === "try_again") {
-      // resetting the previous option and try again
-      option = selectedOption;
-      type = selectedOption.value;
-    } else {
-      setSelectedOption(option);
-    }
-    setLoading(true);
-    const payload = {
+  const framePayload = (type, option) => {
+    let payload = {
       mode: option.mode || 0,
       query: option?.inputValue || inputValue
     };
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
     }
+    const selectedText = getSelectedText(editor);
+    const textData = generatedText || selectedText;
     if (option.mode) {
-      payload.textData = generatedText || window.getSelection().toString();
+      payload.textData = textData;
+    } else if (selectedText && Number(payload.mode) === 0) {
+      payload.query = `${selectedText} \n ${payload.query}`;
     }
-    const result = await services("infinityAI", payload);
-    setLoading(false);
-    setInputValue("");
-    let {
-      data: text
-    } = result || {};
-    if (!text) {
-      onClickOutside();
-      return;
+    const tryAgain = type === "try_again";
+    if (tryAgain) {
+      // resetting previous payload
+      const prevPayload = selectedOption?.payload || {};
+      payload = prevPayload;
     }
-    if (!option.replace) {
+    return payload;
+  };
+  const onSend = async (type, option) => {
+    try {
+      if (type === "close") {
+        onClickOutside();
+        return;
+      }
+      if (type === "done") {
+        // Get the current selection point
+        const {
+          anchor
+        } = editor.selection;
+        const {
+          path
+        } = anchor;
+        const {
+          text: selectText
+        } = Node.get(editor, path);
+        if (selectText?.length) {
+          insertAtNextLine(editor, generatedText);
+        } else {
+          insertText(editor, generatedText);
+        }
+        onClickOutside();
+        return;
+      }
+      if (type === "replace_selection") {
+        // replace generated text
+        insertText(editor, generatedText);
+        onClickOutside();
+        return;
+      }
+      setLoading(true);
+      const payload = framePayload(type, option);
+      setSelectedOption({
+        ...option,
+        payload
+      });
+      const result = await services("infinityAI", payload);
+      setLoading(false);
+      setInputValue("");
+      let {
+        data: text
+      } = result || {};
+      if (!text) {
+        onClickOutside();
+        return;
+      }
+
+      // if (!option.replace) {
       if (type === "continue_writing") {
         setGeneratedText(generatedText + text);
       } else {
         setGeneratedText(text);
       }
-      return;
-    }
-    insertText(editor, text);
 
-    // scrollToAIInput();
-  };
+      //   return;
+      // }
 
+      // ** we are not using this insertText right now, AI returned response will not insert into the editor immediately, so option.replace will be false always
+      // insertText(editor, text);
+
+      // scrollToAIInput();
+    } catch (err) {
+      console.error("Error on sending/inserting text", err);
+    }
+  };
   const onInputChange = e => {
     setInputValue(e.target.value);
   };

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

@@ -102,6 +102,7 @@ const Styles = theme => ({
   customSelectWrapper: {
     width: "fit-content",
     marginTop: "4px",
+    position: "absolute",
     "@media only screen and (max-width: 600px)": {
       marginBottom: "4px"
     }

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -129,7 +129,6 @@ function AppHeader(props) {
     }
   };
   const drawer = /*#__PURE__*/_jsxs(Box, {
-    onClick: handleDrawerToggle,
     sx: {
       textAlign: "center"
     },
@@ -139,6 +138,7 @@ function AppHeader(props) {
         my: 2,
         color: textColor
       },
+      onClick: closeDrawer,
       children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
         alt: `${appTitle} Logo`,
         style: {
@@ -150,16 +150,20 @@ function AppHeader(props) {
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
       children: menus.map((item, i) => {
         const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+        const onButtonClick = e => {
+          closeDrawer();
+          setTimeout(() => {
+            buttonProps?.onClick(e);
+          }, 200);
+        };
         const onTouchEnd = e => {
           if (buttonProps?.onTouchEnd) {
-            buttonProps?.onTouchEnd(e);
-            closeDrawer();
+            onButtonClick(e);
           }
         };
         const onClick = e => {
           if (buttonProps?.onClick) {
-            buttonProps?.onClick(e);
-            closeDrawer();
+            onButtonClick(e);
           }
         };
         const props = {
@@ -171,6 +175,9 @@ function AppHeader(props) {
           disablePadding: true,
           children: /*#__PURE__*/_jsx(ListItemButton, {
             ...props,
+            component: "button",
+            href: "" // to avoid <a> tag
+            ,
             sx: {
               textAlign: "center"
             },

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

@@ -12,13 +12,19 @@ const EmbedPopup = props => {
     format,
     onDelete
   } = props;
+  const videoStyles = embedVideoStyle?.filter(f => {
+    if (f?.value === "AspectRatio" && format !== "video") {
+      return false;
+    }
+    return true;
+  });
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: format === "image" ? "Image" : format === "video" ? "video" : format === "calendly" ? "calendly" : "Embed",
     type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
+    renderTabs: format === "image" ? embedImageStyle : videoStyles,
     customProps: customProps,
     onDelete: onDelete
   });

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -6,14 +6,16 @@ const EmojiPicker = props => {
   const {
     onEmojiSelect,
     onClose,
-    theme = 'light'
+    theme = 'light',
+    ...rest
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {
       data: data,
       onEmojiSelect: onEmojiSelect,
       onClickOutside: onClose,
-      theme: theme
+      theme: theme,
+      ...rest
     })
   });
 };

package/dist/Editor/Elements/Form/Form.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Transforms } from "slate";
+import { Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -48,7 +49,15 @@ const Form = props => {
     textSize,
     fontFamily,
     textAlign,
-    alignment
+    alignment,
+    fieldFontFamily,
+    fieldFontWeight,
+    fieldTextSize,
+    fieldTextColor,
+    fieldBgColor,
+    fieldBorderColor,
+    fieldBorderWidth,
+    fieldBorderStyle
   } = element;
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
@@ -190,6 +199,24 @@ const Form = props => {
     }, {
       at: path
     });
+    // adding form field style to the current form node 
+    const currentNode = Node.get(editor, path);
+    if (currentNode) {
+      currentNode.children.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : "rgba(255, 255, 255, 1)",
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : "#ccc",
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : "",
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : "",
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : "",
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : "",
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : "",
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : ""
+        }, {
+          at: [...path, index]
+        });
+      });
+    }
     onClose();
   };
   const onClose = () => {
@@ -198,7 +225,16 @@ const Form = props => {
   const onAddFormField = () => {
     try {
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily,
+          fontWeight: fieldFontWeight,
+          textSize: fieldTextSize,
+          textColor: fieldTextColor,
+          bgColor: fieldBgColor,
+          borderColor: fieldBorderColor,
+          borderWidth: fieldBorderWidth,
+          borderStyle: fieldBorderStyle
+        })
       }, {
         at: [...path, children.length]
       });

package/dist/Editor/Elements/Form/FormElements/FormCheckbox.js

@@ -16,6 +16,9 @@ const FormCheckbox = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormCheckbox = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormDate.js

@@ -16,6 +16,9 @@ const FormDate = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormDate = props => {
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent",
-        paddingRight: '85px !important'
+        paddingRight: '85px !important',
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormEmail.js

@@ -16,6 +16,9 @@ const FormEmail = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormEmail = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormNumbers.js

@@ -16,6 +16,9 @@ const FormNumbers = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -63,7 +66,10 @@ const FormNumbers = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormRadioButton.js

@@ -16,6 +16,9 @@ const FormRadioButton = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormRadioButton = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -16,6 +16,9 @@ const FormText = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,10 @@ const FormText = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontSize: textSize || "inherit",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -15,6 +15,9 @@ const FormTextArea = props => {
     borderColor,
     textColor,
     bgColor,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,9 @@ const FormTextArea = props => {
         borderStyle: borderStyle || "solid",
         color: `${textColor || "#000"} !important`,
         background: `${bgColor || "transparent"} !important`,
-        fontSize: '14px'
+        fontSize: textSize || "14px",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormPopup.js

@@ -1,7 +1,8 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
-import formStyle from "../../common/StyleBuilder/formStyle";
+import { formStyle } from "../../common/StyleBuilder/formStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FormPopup = props => {
   const {
     element,
@@ -9,14 +10,16 @@ const FormPopup = props => {
     onClose,
     customProps
   } = props;
-  return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Form",
-    type: "formStyle",
-    element: element,
-    onSave: onSave,
-    onClose: onClose,
-    renderTabs: formStyle,
-    customProps: customProps
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(StyleBuilder, {
+      title: "Form",
+      type: "formStyle",
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      renderTabs: formStyle,
+      customProps: customProps
+    })
   });
 };
 export default FormPopup;

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -144,8 +144,27 @@ const FreeGridItem = props => {
   };
   const onAddFormField = () => {
     try {
+      const {
+        fieldFontFamily,
+        fieldFontWeight,
+        fieldTextSize,
+        fieldTextColor,
+        fieldBgColor,
+        fieldBorderColor,
+        fieldBorderWidth,
+        fieldBorderStyle
+      } = element?.children[0];
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily ? fieldFontFamily : "",
+          fontWeight: fieldFontWeight ? fieldFontWeight : "",
+          textSize: fieldTextSize ? fieldTextSize : "",
+          textColor: fieldTextColor ? fieldTextColor : "",
+          bgColor: fieldBgColor ? fieldBgColor : "",
+          borderColor: fieldBorderColor ? fieldBorderColor : "",
+          borderWidth: fieldBorderWidth ? fieldBorderWidth : "",
+          borderStyle: fieldBorderStyle ? fieldBorderStyle : ""
+        })
       }, {
         at: [...path, 0, 0]
       });

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

@@ -62,7 +62,8 @@ const GridItem = props => {
     textColor,
     animation,
     cellGHeight,
-    xsHidden
+    xsHidden,
+    forceFullWidth
   } = element;
   const {
     vertical,
@@ -105,13 +106,17 @@ const GridItem = props => {
   const getBorderColor = () => {
     return borderColor || "transparent";
   };
+
+  // getting Grid Item Width value
+  const gridWidthBreakPointsValue = getBreakPointsValue(grid, null, "overrideGridSize", true);
   const getBRProps = groupByBreakpoint({
     display: {
       xs: xsHidden ? "none" : "inline-block",
       lg: "inline-block"
     },
     width: {
-      ...getBreakPointsValue(grid, null, "overrideGridSize", true)
+      ...getBreakPointsValue(grid, null, "overrideGridSize", true),
+      xs: forceFullWidth ? "100%" : gridWidthBreakPointsValue?.xs
     },
     height: {
       ...getBreakPointsValue(cellGHeight || "auto")