@flozy/editor 4.3.1 → 4.3.3

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

@@ -42,7 +42,8 @@ function AIInput({
   onInputChange,
   onClickOutside,
   startRecording,
-  loading
+  loading,
+  isMobile
 }, ref) {
   const {
     theme
@@ -130,7 +131,7 @@ function AIInput({
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [/*#__PURE__*/_jsx(IconButton, {
+          children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
             disabled: loading,
             onClick: () => startRecording(),
             children: /*#__PURE__*/_jsx(ChatMicIcon, {})

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Styles from "./Styles";
 import { Fade, Paper, Popper } from "@mui/material";
@@ -173,10 +173,11 @@ function PopoverAIInput({
   const [generatedText, setGeneratedText] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [selectedOption, setSelectedOption] = useState();
+  const selectedEleRef = useRef({});
   const classes = Styles();
   const editor = useSlate();
   const updateAnchor = () => {
-    updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
+    updateAnchorEl(setAnchorEl, editor, openAI, selectedEleRef.current);
   };
   useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
@@ -195,6 +196,9 @@ function PopoverAIInput({
       scrollToAIInput(editor);
     }
   }, [openAI]);
+  useEffect(() => {
+    selectedEleRef.current = selectedElement;
+  }, [selectedElement]);
   const onSend = async (type, option) => {
     if (type === "close") {
       onClickOutside();
@@ -303,7 +307,8 @@ function PopoverAIInput({
               openAI: openAI,
               inputValue: inputValue,
               onInputChange: onInputChange,
-              onClickOutside: onClickOutside
+              onClickOutside: onClickOutside,
+              isMobile: otherProps?.isMobile
             })
           })
         })

package/dist/Editor/Elements/Button/EditorButton.js

@@ -10,7 +10,6 @@ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../.
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
-import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {

package/dist/Editor/Elements/Mentions/Mentions.js

@@ -14,9 +14,10 @@ const Mentions = ({
     verticalAlign: "baseline",
     display: "inline-block",
     borderRadius: "4px",
-    backgroundColor: "#eee",
+    backgroundColor: "#2563EB",
     fontSize: "0.9em",
-    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none"
+    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none",
+    color: "#FFF"
   };
   // See if our empty text child has any styling marks applied and apply those
   if (element.children[0].bold) {

package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js

@@ -1,27 +1,22 @@
 import React from "react";
-import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
+import { Box, Card, CardMedia, Grid } from "@mui/material";
+
+// const Select = (props) => {
+//     const { classes, data, onSelectTemplate } = props;
+//     return (
+//         <Box
+//             className="template-card-action"
+//             component={"div"}
+//             sx={classes.templateCardBtnGrp}
+//             style={{ padding: 0, background: "transparent"}}
+//         >
+//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
+//                 Select
+//             </Button>
+//         </Box>
+//     );
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
-const Select = props => {
-  const {
-    classes,
-    data,
-    onSelectTemplate
-  } = props;
-  return /*#__PURE__*/_jsx(Box, {
-    className: "template-card-action",
-    component: "div",
-    sx: classes.templateCardBtnGrp,
-    style: {
-      padding: 0,
-      background: "transparent"
-    },
-    children: /*#__PURE__*/_jsx(Button, {
-      className: "blueBtn",
-      onClick: onSelectTemplate(data),
-      children: "Select"
-    })
-  });
-};
 const ButtonTemplateCard = props => {
   const {
     classes,

package/dist/Editor/Toolbar/PopupTool/FullViewCard.js

@@ -1,26 +1,22 @@
 import React from "react";
-import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
+import { Box, Card, CardMedia, Grid } from "@mui/material";
+
+// const Select = (props) => {
+//     const { classes, data, onSelectTemplate } = props;
+//     return (
+//         <Box
+//             className="template-card-action"
+//             component={"div"}
+//             sx={classes.templateCardBtnGrp}
+//             style={{background: "transparent"}}
+//         >
+//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
+//                 Select
+//             </Button>
+//         </Box>
+//     );
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
-const Select = props => {
-  const {
-    classes,
-    data,
-    onSelectTemplate
-  } = props;
-  return /*#__PURE__*/_jsx(Box, {
-    className: "template-card-action",
-    component: "div",
-    sx: classes.templateCardBtnGrp,
-    style: {
-      background: "transparent"
-    },
-    children: /*#__PURE__*/_jsx(Button, {
-      className: "blueBtn",
-      onClick: onSelectTemplate(data),
-      children: "Select"
-    })
-  });
-};
 const FullViewCard = props => {
   const {
     classes,

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -50,9 +50,6 @@ const FontLoader = props => {
     }
     loadNextBatch();
   };
-  const sanitizeFontFamily = fontFamily => {
-    return fontFamily.replace(/\\/g, '').replace(/['"]/g, '');
-  };
   useEffect(() => {
     let families = [...defaultFonts];
     if (!readOnly) {
@@ -70,13 +67,23 @@ const FontLoader = props => {
         console.log(err);
       });
     } else {
+      function correctFontArray(fontString) {
+        let fontsArray = fontString.split(',');
+        let cleanedFontsArray = [...new Set(fontsArray.map(font => font.trim()))];
+        return cleanedFontsArray;
+      }
+      function sanitizeFontFamily(fontFamily) {
+        const correctedFonts = correctFontArray(fontFamily);
+        return correctedFonts.join(', ');
+      }
       const elements = Array.from(document?.querySelectorAll("*"));
       const fontSet = new Set();
       elements.forEach(element => {
         const computedStyles = window?.getComputedStyle(element);
         fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
       });
-      families = Array.from(fontSet);
+      let families = Array.from(fontSet);
+      families = correctFontArray(families.join(', '));
       loadFontsInBatches(families);
     }
   }, []);

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

@@ -11,6 +11,7 @@ import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
 import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents";
 import SwipeableDrawer from "../SwipeableDrawer";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -30,18 +31,20 @@ function getNav(navType, navOptions) {
   };
 }
 export default function LinkSettings(props) {
+  const {
+    theme
+  } = useEditorContext();
   const {
     handleClose,
     onSave,
     customProps,
     navType
   } = props;
-  const themeType = localStorage.getItem("themeType");
   const {
     isMobile
   } = customProps;
   const navOptions = getNavOptions(customProps.hideTools);
-  const classes = LinkSettingsStyles(themeType);
+  const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");
   const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);

package/dist/Editor/common/LinkSettings/style.js

@@ -1,8 +1,5 @@
-const ButtonNavSettingsStyles = themeType => ({
+const ButtonNavSettingsStyles = theme => ({
   dialogContainer: {
-    "& .MuiPaper-root": {
-      background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
-    },
     "& .MuiDialogContent-root": {
       padding: "0px 20px"
     },
@@ -19,6 +16,23 @@ const ButtonNavSettingsStyles = themeType => ({
     },
     "& .MuiGrid-item": {
       padding: "14px"
+    },
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background,
+      "& .MuiTypography-root": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiInputBase-root": {
+        border: `1px solid ${theme?.palette?.editor?.textColor}`,
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiSvgIcon-root": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiFormLabel-root": {
+        color: theme?.palette?.editor?.textColor,
+        backgroundColor: theme?.palette?.editor?.background
+      }
     }
   },
   saveBtn: {
@@ -49,7 +63,7 @@ const ButtonNavSettingsStyles = themeType => ({
     position: "absolute",
     right: 8,
     top: 8,
-    color: theme => theme.palette.grey[500]
+    color: theme?.palette?.grey[500]
   },
   gridDivider: {
     borderRight: "1px solid rgba(0, 0, 0, 0.12)"
@@ -60,7 +74,7 @@ const ButtonNavSettingsStyles = themeType => ({
     gap: "8px",
     paddingTop: "14px",
     marginTop: "14px",
-    borderTop: theme => `1px solid ${theme.palette.grey[300]}`
+    borderTop: `1px solid ${theme?.palette?.grey[300]}`
   }
 });
 export default ButtonNavSettingsStyles;

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

@@ -11,7 +11,8 @@ const Link = props => {
     customProps,
     editor,
     path,
-    childType
+    childType,
+    theme
   } = props;
   const pPath = path?.split("|")?.map(m => parseInt(m));
   const element_path = [...pPath, 0];
@@ -137,7 +138,7 @@ const Link = props => {
       console.log(err);
     }
   };
-  return blockProps?.navType !== undefined ? /*#__PURE__*/_jsx(LinkSettings, {
+  return /*#__PURE__*/_jsx(LinkSettings, {
     handleClose: onClose,
     onSave: d => {
       const upData = getTransformedData(d);
@@ -147,7 +148,8 @@ const Link = props => {
       onClose();
     },
     ...(blockProps || {}),
-    customProps: customProps
-  }) : null;
+    customProps: customProps,
+    theme: theme
+  });
 };
 export default Link;

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/index.js

@@ -416,7 +416,9 @@ const RnD = props => {
     }
   };
   const onMouseOver = e => {
-    e.stopPropagation();
+    if (type !== "child") {
+      e.stopPropagation();
+    }
     if (type !== "child") {
       updateDragging({
         dragOver: str_path
@@ -546,7 +548,7 @@ const RnD = props => {
       contextMenu: contextMenu,
       handleClose: handleClose,
       theme: theme
-    }), type === "parent" && breakpoint === "lg" ? /*#__PURE__*/_jsx(VirtualElement, {
+    }), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
       parentEle: positionRef?.current?.resizableElement?.current,
       updated_at: updated_at,
       path: str_path,

package/package.json

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