@flozy/editor 4.2.9 → 4.3.0

package/dist/Editor/CommonEditor.js

@@ -544,7 +544,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     customProps: customProps,
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
-                    otherProps: otherProps || {}
+                    otherProps: otherProps || {},
+                    editorWrapper: editorWrapper
                   }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",
@@ -562,7 +563,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 onDrawerOpen: onDrawerOpen,
                 theme: theme,
                 setIsTextSelected: setIsTextSelected,
-                customProps: customProps
+                customProps: customProps,
+                editorWrapper: editorWrapper
               }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
                 onChange: b => onSwitchBreakpoint(b)

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

@@ -9,6 +9,7 @@ import { MODES } from "./helper";
 import { getSelectedText } from "../../utils/helper";
 import { VoiceToText } from "./VoiceToText";
 import deserialize from "../../helper/deserialize";
+import useEditorScroll from "../../hooks/useEditorScroll";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getInputWidth = selectedElement => {
@@ -154,7 +155,10 @@ const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
   }
 };
 function PopoverAIInput({
-  otherProps
+  otherProps,
+  editorWrapper = {
+    current: null
+  }
 }) {
   const {
     services
@@ -171,6 +175,10 @@ function PopoverAIInput({
   const [selectedOption, setSelectedOption] = useState();
   const classes = Styles();
   const editor = useSlate();
+  const updateAnchor = () => {
+    updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
+  };
+  useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
     setAnchorEl(null);
     setOpenAI("");
@@ -181,9 +189,7 @@ function PopoverAIInput({
     ReactEditor.focus(editor);
     Transforms.deselect(editor);
   };
-  useEffect(() => {
-    updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
-  }, [openAI, editor.selection]);
+  useEffect(updateAnchor, [openAI, editor.selection]);
   useEffect(() => {
     if (openAI) {
       scrollToAIInput(editor);

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

@@ -1,6 +1,7 @@
 const Styles = theme => ({
   aiContainer: {
     background: "#FCFAFF",
+    background: theme?.palette?.editor?.aiInputBackground,
     border: "1px solid #8360FD",
     borderRadius: "6px",
     boxShadow: "0px 4px 10px 0px #00000029"
@@ -12,7 +13,7 @@ const Styles = theme => ({
     padding: "0px 4px 0px 12px",
     minHeight: "36px",
     position: "relative",
-    background: "#FCFAFF",
+    background: theme?.palette?.editor?.aiInputBackground,
     borderRadius: "5px",
     "& .icon-container": {
       display: "flex",
@@ -29,7 +30,7 @@ const Styles = theme => ({
       background: "transparent",
       resize: "none",
       alignSelf: "center",
-      color: "#000",
+      color: theme?.palette?.editor?.textColor,
       fontSize: "14px !important",
       fontFamily: '"Inter", sans-serif',
       "&:focus-visible": {
@@ -81,6 +82,7 @@ const Styles = theme => ({
   },
   sendBtnDisabled: {
     background: "#C0C9D6",
+    opacity: "0.5",
     "&:hover": {
       background: "#C0C9D6"
     }

package/dist/Editor/Elements/AI/VoiceToText/index.js

@@ -4,6 +4,7 @@ import STTStyles from "./style";
 import { Grid, IconButton, Box } from "@mui/material";
 import { AudioWave } from "./AudioWave";
 import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function STT(props) {
@@ -15,7 +16,10 @@ function STT(props) {
   const {
     services
   } = otherProps;
-  const classes = STTStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = STTStyles(theme);
   const [mediaRecorder, setMediaRecorder] = useState(null);
   const [audioChunks, setAudioChunks] = useState([]);
   const [chunkIndex, setChunkIndex] = useState(0);
@@ -127,6 +131,7 @@ function STT(props) {
       children: [/*#__PURE__*/_jsx(Box, {
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: closeRecording,
+          className: "ai-icon",
           children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
         })
       }), /*#__PURE__*/_jsx(Box, {
@@ -137,6 +142,7 @@ function STT(props) {
       }), /*#__PURE__*/_jsx(Box, {
         children: showPause ? /*#__PURE__*/_jsx(IconButton, {
           onClick: stopRecording,
+          className: "ai-icon",
           children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
         }) : /*#__PURE__*/_jsx(IconButton, {
           onClick: sendToInfiniti,

package/dist/Editor/Elements/AI/VoiceToText/style.js

@@ -1,4 +1,4 @@
-const styles = () => ({
+const styles = theme => ({
   SttContainer: {
     display: "flex",
     width: "100%",
@@ -12,17 +12,25 @@ const styles = () => ({
       borderColor: "#2563EB"
     },
     "&& .MuiOutlinedInput-root": {
-      background: "rgba(252, 250, 255, 1)"
+      background: theme?.palette?.editor?.aiInputBackground
     }
   },
   AudioVizualizerContainer: {
     width: "100%",
     display: "flex",
-    background: "rgba(252, 250, 255, 1)",
+    background: theme?.palette?.editor?.aiInputBackground,
     borderRadius: "8px",
     border: "1px solid #2563EB",
     alignItems: "center",
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    "& .ai-icon": {
+      "& circle": {
+        fill: theme?.palette?.editor?.aiInputBackground
+      },
+      "& rect": {
+        fill: theme?.palette?.editor?.aiInputBackground
+      }
+    }
   },
   AudioVizualizerContent: {
     display: "flex",

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -26,7 +26,13 @@ const VariableButton = props => {
     onChange: updateVariable,
     IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
     MenuProps: {
-      sx: classes.variableMenuItem
+      sx: classes.variableMenuItem,
+      PaperProps: {
+        style: {
+          maxHeight: 300,
+          overflowY: "auto"
+        }
+      }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {
       value: "",

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

@@ -8,12 +8,14 @@ import useWindowResize from "../../hooks/useWindowResize";
 import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
+import useEditorScroll from "../../hooks/useEditorScroll";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
     setIsTextSelected,
-    customProps
+    customProps,
+    editorWrapper
   } = props;
   const classes = usePopupStyles(theme);
   const {
@@ -33,6 +35,27 @@ const PopupTool = props => {
   const {
     selectedElement
   } = useEditorContext();
+  const updateAnchorEl = () => {
+    try {
+      const domSelection = window.getSelection();
+      const domRange = domSelection?.getRangeAt(0);
+      const {
+        startOffset,
+        endOffset
+      } = domRange || {};
+      if (startOffset !== endOffset) {
+        const rect = domRange.getBoundingClientRect();
+        setAnchorEl({
+          clientWidth: rect.width,
+          clientHeight: rect.height,
+          getBoundingClientRect: () => rect
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
 
@@ -57,36 +80,16 @@ const PopupTool = props => {
       updateAnchorEl();
     }
   }, [selection]);
-  useEffect(() => {
-    if (selectedElement?.enable === 1) {
-      setAnchorEl(null);
-    }
-  }, [selection, selectedElement?.path, selectedElement?.enable]);
-  const updateAnchorEl = () => {
-    try {
-      const domSelection = window.getSelection();
-      const domRange = domSelection?.getRangeAt(0);
-      const {
-        startOffset,
-        endOffset
-      } = domRange || {};
-      if (startOffset !== endOffset) {
-        const rect = domRange.getBoundingClientRect();
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  };
   const handleClose = () => {
     setAnchorEl(null);
     setOpen(false);
     setPopupType("");
   };
+  useEffect(() => {
+    if (selectedElement?.enable === 1) {
+      setAnchorEl(null);
+    }
+  }, [selection, selectedElement?.path, selectedElement?.enable]);
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)

package/dist/Editor/assets/svg/AIIcons.js

@@ -503,6 +503,10 @@ export const CloseGreyCircle = () => /*#__PURE__*/_jsxs("svg", {
   viewBox: "0 0 30 30",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
+  style: {
+    border: "1.3px solid #2563EB",
+    borderRadius: "50%"
+  },
   children: [/*#__PURE__*/_jsx("rect", {
     width: "30",
     height: "30",

package/dist/Editor/hooks/useEditorScroll.js

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+function useEditorScroll(editorWrapper = {
+  current: null
+}, callback) {
+  useEffect(() => {
+    const handleScroll = () => {
+      if (editorWrapper.current) {
+        callback();
+      }
+    };
+    const currentEditorWrapper = editorWrapper.current;
+    if (currentEditorWrapper) {
+      currentEditorWrapper.addEventListener("scroll", handleScroll);
+    }
+
+    // Cleanup the event listener on component unmount
+    return () => {
+      if (currentEditorWrapper) {
+        currentEditorWrapper.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [editorWrapper.current]);
+}
+export default useEditorScroll;

package/package.json

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