@flozy/editor 4.2.8 → 4.3.0

package/dist/Editor/CommonEditor.js

@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upArrowEvent, downArrowEvent } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -379,10 +379,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           });
         }
       }
-    } else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
-      upArrowEvent(event, editor);
-    } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
-      downArrowEvent(event, editor);
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -447,10 +443,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const selection = window?.getSelection();
         if (selection && selection.rangeCount > 0) {
           const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
-          const containerBottom = container?.getBoundingClientRect()?.bottom;
+          const containerRect = container?.getBoundingClientRect();
+          const containerBottom = containerRect?.bottom;
           if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
+            // Calculate dynamic scroll based on remaining space
+            const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
             container?.scrollBy({
-              top: 200,
+              top: scrollAmount,
               behavior: "smooth"
             });
           }
@@ -545,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)",
@@ -563,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/Emoji/EmojiButton.js

@@ -12,7 +12,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     icoBtnType,
-    selectionTarget
+    selectionTarget,
+    theme = 'light'
   } = props;
   const editor = useSlateStatic();
   const [anchorEl, setAnchorEl] = useState(null);
@@ -67,7 +68,8 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Paper, {
         children: /*#__PURE__*/_jsx(EmojiPicker, {
           data: data,
-          onEmojiSelect: onEmojiSelect
+          onEmojiSelect: onEmojiSelect,
+          theme: theme?.palette?.type
         })
       })
     })]

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

@@ -6,7 +6,7 @@ const EmojiPicker = props => {
   const {
     onEmojiSelect,
     onClose,
-    theme = 'dark'
+    theme = 'light'
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -2,6 +2,7 @@ const commonOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const textOptions = ["edit", "settings", "link", "saveAsTemplate", "close"];
 const buttonOptions = ["settings", "link", "saveAsTemplate", "close"];
 const imageOptions = ["settings", "link", "imageFrame", "saveAsTemplate", "close"];
+const videoOptions = ["settings", "saveAsTemplate", "close"];
 const boxOptions = ["settings", "link", "saveAsTemplate", "close"];
 const appHeaderOptions = ["settings", "saveAsTemplate", "close"];
 const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
@@ -18,6 +19,7 @@ const itemOptions = {
   form: formOptions,
   section: sectionOptions,
   table: tableOptions,
-  embedScript: embedScriptOptions
+  embedScript: embedScriptOptions,
+  video: videoOptions
 };
 export default itemOptions;

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

@@ -87,7 +87,8 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
         ref: i === index ? papperRef : null,
         children: char.renderComponent ? char.renderComponent({
           ref: index === i ? buttonRef : null,
-          selectionTarget: target
+          selectionTarget: target,
+          theme: theme
         }) : ListElement ? /*#__PURE__*/_jsx(ListElement, {
           classes: classes,
           data: char,

package/dist/Editor/helper/index.js

@@ -299,9 +299,12 @@ export const getTextColor = (color = "") => {
   return color?.indexOf("gradient") >= 0 ? {
     background: color?.concat("text"),
     WebkitBackgroundClip: "text",
-    WebkitTextFillColor: "transparent",
-    color: "transparent",
-    caretColor: "black"
+    WebkitTextFillColor: "transparent !important",
+    color: "transparent !important",
+    caretColor: "black",
+    '& span': {
+      color: "transparent !important"
+    }
   } : {
     color
   };

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/dist/Editor/utils/events.js

@@ -285,40 +285,4 @@ export const enterEvent = (e, editor, isMobile) => {
   } catch (err) {
     console.log(err);
   }
-};
-export const upArrowEvent = (e, editor) => {
-  try {
-    const {
-      selection
-    } = editor;
-    if (!selection) return;
-    const prevNodePath = Editor.before(editor, selection, {
-      unit: "line"
-    });
-    if (prevNodePath) {
-      e.preventDefault();
-      Transforms.select(editor, prevNodePath);
-      ReactEditor.focus(editor);
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-export const downArrowEvent = (e, editor) => {
-  try {
-    const {
-      selection
-    } = editor;
-    if (!selection) return;
-    const nextNodePath = Editor.after(editor, selection, {
-      unit: "line"
-    });
-    if (nextNodePath) {
-      e.preventDefault();
-      Transforms.select(editor, nextNodePath);
-      ReactEditor.focus(editor);
-    }
-  } catch (err) {
-    console.log(err);
-  }
 };

package/package.json

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