@flozy/editor 4.9.2 → 4.9.4

package/dist/Editor/Editor.css

@@ -42,7 +42,7 @@ blockquote {
 }
 
 .editor-wrapper table {
-  border-collapse: separate;
+  border-collapse: collapse;
 }
 
 .editor-wrapper .editor-wrapperbutton {
@@ -1214,14 +1214,6 @@ blockquote {
   position: absolute;
 }
 
-.dividerComponent:hover {
-  padding: 10px 0;
-}
-
-.dividerComponent.readonlyDivider:hover {
-  padding: 0;
-}
-
 .dividerComponent:hover .divider-settings {
   display: block;
 }
@@ -1235,4 +1227,19 @@ blockquote {
 .settingsHeader {
   font-size: 14px !important;
   font-weight: 500 !important;
+}
+.hideScroll {
+  overflow-anchor: none;
+}
+
+.hideScroll::-webkit-scrollbar-track {
+  background: none !important;
+}
+
+.hideScroll::-webkit-scrollbar-thumb {
+  background: none !important;
+}
+
+.hideScroll::-webkit-scrollbar-thumb:hover {
+  background: none !important;
 }

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

@@ -8,12 +8,14 @@ function CustomSelect({
   classes,
   options,
   onSend,
-  show
+  show,
+  btnProps = {}
 }) {
   if (show) {
     return /*#__PURE__*/_jsx(Box, {
       component: "div",
       sx: classes.customSelectContainer,
+      className: "customSelectContainer",
       children: options?.map((groupOption, index) => {
         const {
           options,
@@ -28,7 +30,8 @@ function CustomSelect({
             return /*#__PURE__*/_jsx(DisplayOption, {
               option: option,
               classes: classes,
-              onSend: onSend
+              onSend: onSend,
+              btnProps: btnProps
             }, i);
           })]
         }, index);
@@ -42,15 +45,18 @@ export default CustomSelect;
 function DisplayOption({
   option,
   classes,
-  onSend
+  onSend,
+  btnProps = {}
 }) {
   const {
-    Icon
+    Icon,
+    Component
   } = option;
   const [open, setOpen] = useState(false);
   const optionRef = useRef();
+  const showChild = option.options?.length || Component;
   const openOptions = e => {
-    if (option.options?.length && !open) {
+    if (showChild && !open) {
       setOpen(e.currentTarget);
       return;
     }
@@ -66,7 +72,7 @@ function DisplayOption({
         e.stopPropagation();
 
         // is having child options
-        if (option.options?.length) {
+        if (showChild) {
           openOptions(e);
           return;
         }
@@ -75,18 +81,19 @@ function DisplayOption({
       },
       id: "infinity-select-popover",
       className: open ? "active" : "",
+      ...btnProps,
       children: [/*#__PURE__*/_jsxs("div", {
         className: "option-label",
         id: "infinity-select-popover",
         children: [Icon && /*#__PURE__*/_jsx(Icon, {}), option.label]
-      }), option.options?.length && /*#__PURE__*/_jsx(IconButton, {
+      }), showChild ? /*#__PURE__*/_jsx(IconButton, {
         children: /*#__PURE__*/_jsx(FaChevronRight, {
           color: "#94A3B8",
           size: 12
         })
-      })]
+      }) : null]
     }), /*#__PURE__*/_jsx(Popper, {
-      open: open && option.options,
+      open: open && showChild,
       anchorEl: open,
       sx: {
         zIndex: 9001,
@@ -96,7 +103,7 @@ function DisplayOption({
         setOpen(null);
       },
       placement: "right-start",
-      children: /*#__PURE__*/_jsx(Box, {
+      children: Component ? /*#__PURE__*/_jsx(Component, {}) : /*#__PURE__*/_jsx(Box, {
         children: /*#__PURE__*/_jsx(CustomSelect, {
           options: option.options,
           onSend: onSend,

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Styles from "./Styles";
 import { Fade, Paper, Popper } from "@mui/material";
@@ -178,9 +178,9 @@ function PopoverAIInput({
   const selectedEleRef = useRef({});
   const classes = Styles();
   const editor = useSlate();
-  const updateAnchor = () => {
+  const updateAnchor = useCallback(() => {
     updateAnchorEl(setAnchorEl, editor, openAI, selectedEleRef.current);
-  };
+  }, [setAnchorEl, editor, openAI, selectedEleRef.current]);
   useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
     setAnchorEl(null);

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

@@ -142,7 +142,13 @@ const Styles = theme => ({
       gap: "8px"
     },
     "&:hover": {
-      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
+      backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+      "& svg path": {
+        stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+      },
+      "& svg": {
+        color: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+      }
     },
     "&.active": {
       background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`,

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -52,10 +52,13 @@ const Carousel = props => {
   useEffect(() => {
     setRefresh(new Date().getTime());
   }, []);
+
+  //comment this for carosul selection on insert 
   useEffect(() => {
     if (!edit) {
       ReactEditor.focus(editor);
       Transforms.select(editor, ReactEditor.findPath(editor, element));
+      Transforms.deselect(editor);
     }
   }, [edit]);
   const onAddSlide = () => {

package/dist/Editor/Elements/Divider/Divider.js

@@ -100,11 +100,12 @@ const Divider = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: `dividerComponent ${readOnly ? 'readonlyDivider' : ''}`,
+    className: `dividerComponent`,
     style: {
       userSelect: "none",
       position: 'relative'
     },
+    contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
@@ -124,7 +125,8 @@ const Divider = props => {
         userSelect: "none",
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
-        height: borderColor?.includes("linear") ? borderWidth : undefined
+        height: borderColor?.includes("linear") ? borderWidth : undefined,
+        marginTop: '15px'
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {

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

@@ -276,7 +276,7 @@ const FreeGrid = props => {
           ...insertFreeGridItem("table", {
             ...DEFAULT_TABLE_NODE()
           }, {
-            height: 130,
+            height: 150,
             width: 400
           })
         }], {

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -21,12 +21,13 @@ const SearchAttachment = props => {
   const {
     theme
   } = useEditorContext();
+  const label = Boolean(title?.trim()) ? title : 'Untitled';
   const handleClick = () => {
     if (metadata && metadata?.actionHandler) {
       metadata?.actionHandler(type, element);
     }
   };
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "attachment-wrpr-ev2",
     ...attributes,
@@ -34,29 +35,31 @@ const SearchAttachment = props => {
     style: {
       display: "block"
     },
-    children: [/*#__PURE__*/_jsxs(Card, {
+    children: /*#__PURE__*/_jsxs(Card, {
       style: {
         display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        maxWidth: '200px',
-        padding: "2px",
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        width: "fit-content",
+        maxWidth: '194px',
+        padding: "0px 10px",
         boxShadow: "none",
-        border: `1px solid ${theme?.palette?.primary?.border2}`,
-        borderRadius: "7px",
-        background: theme?.palette?.background?.paper,
-        cursor: 'pointer'
+        border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
+        borderRadius: "7px !important",
+        background: theme?.palette?.containers?.slashBrainCardBg,
+        cursor: 'pointer',
+        "& *::selection": {
+          background: "#000"
+        }
       },
       onClick: handleClick,
       children: [/*#__PURE__*/_jsx(CardMedia, {
         sx: {
           "& svg": {
             '& path': {
-              stroke: '#2563EB'
+              stroke: theme?.palette?.text?.slashBrainText
             }
-          },
-          marginTop: '3px'
+          }
         },
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "docsIcon"
@@ -64,9 +67,8 @@ const SearchAttachment = props => {
       }), /*#__PURE__*/_jsx(CardContent, {
         sx: {
           display: "flex",
-          justifyContent: "center",
-          alignItems: "start",
-          padding: "3px 5px",
+          alignItems: "center",
+          padding: "3px 0px 3px 5px",
           textDecoration: "none",
           flexDirection: "column",
           color: "#2563EB",
@@ -74,25 +76,29 @@ const SearchAttachment = props => {
             paddingBottom: '3px'
           }
         },
-        children: /*#__PURE__*/_jsx(Typography, {
+        children: /*#__PURE__*/_jsxs(Typography, {
           sx: {
             fontWeight: "500",
-            color: "#2563EB",
-            fontSize: "12px",
+            background: theme?.palette?.text?.slashBrainText,
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: 'transparent',
+            fontSize: "14px",
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             wordBreak: "break-word",
-            maxWidth: '150px'
+            maxWidth: '150px',
+            lineHeight: 1.43,
+            "&::selection": {
+              WebkitTextFillColor: "#000"
+            }
           },
           component: "div",
-          children: title
+          variant: "subtitle1",
+          children: [label, children]
         })
       })]
-    }), /*#__PURE__*/_jsx("span", {
-      contentEditable: false,
-      children: children
-    })]
+    })
   });
 };
 export default SearchAttachment;

package/dist/Editor/Elements/Search/SearchButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
 import { Paper, Popover } from "@mui/material";
@@ -6,6 +6,7 @@ import { ReactEditor, useSlateStatic } from "slate-react";
 import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import SearchAndDocList from "./SearchList";
 import { insertBrain } from "../../utils/brains";
+import { useDebounce } from "use-debounce";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,6 +23,22 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
   const [target, setTarget] = useState(selectionTarget);
   const open = Boolean(anchorEl);
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  const [mapData, setMapData] = useState([]);
+  const [skip, setSkip] = useState(0);
+  const [search, setSearch] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [debouncedSearch] = useDebounce(search, 300);
+  const limit = 20;
+  const observer = useRef();
+  const lastDocRef = useCallback(node => {
+    if (observer.current) observer.current.disconnect();
+    observer.current = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        setSkip(prevSkip => prevSkip + limit);
+      }
+    });
+    if (node) observer.current.observe(node);
+  }, []);
   useImperativeHandle(ref, () => ({
     triggerClick: target => {
       setTarget(target);
@@ -42,6 +59,34 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
       console.log(err);
     }
   };
+  useEffect(() => {
+    getDocs({
+      debouncedSearch,
+      skip,
+      limit
+    });
+  }, [skip, debouncedSearch]);
+  const getDocs = async () => {
+    setIsLoading(true);
+    try {
+      if (otherProps?.services) {
+        const result = await otherProps?.services("getDocs", {
+          skip,
+          limit,
+          search
+        });
+        setMapData(prev => skip === 0 ? result.data : [...prev, ...result.data]);
+      }
+    } catch (error) {
+      console.error("Error fetching documents:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const onSearchChange = value => {
+    setSearch(value);
+    setSkip(0);
+  };
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -52,9 +97,7 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: element?.name,
-      onClick: () => {
-        onClick();
-      },
+      onClick: onClick,
       icon: /*#__PURE__*/_jsx(Icon, {
         icon: element?.name?.toLowerCase()
       }),
@@ -71,7 +114,10 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
           borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.primary?.border2 : 'transparent'
         },
         children: /*#__PURE__*/_jsx(SearchAndDocList, {
-          otherProps: otherProps,
+          mapData: mapData,
+          isLoading: isLoading,
+          lastDocRef: lastDocRef,
+          onSearchChange: onSearchChange,
           handleClick: handleClick,
           theme: theme,
           handleClose: handleClose
@@ -88,17 +134,28 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
         horizontal: "left"
       },
       onClose: handleClose,
+      sx: {
+        '& .MuiPaper-root': {
+          borderRadius: '12px !important'
+        }
+      },
       children: /*#__PURE__*/_jsx(Paper, {
         sx: {
-          padding: "8px",
-          maxWidth: '330px',
+          padding: 0,
+          width: '330px',
           background: theme?.palette?.background?.paper,
           border: '1px solid',
           borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.primary?.border2 : 'transparent',
-          borderRadius: '7px'
+          borderRadius: '12px',
+          '&.MuiPaper-root-MuiPopover-paper': {
+            borderRadius: '12px !important'
+          }
         },
         children: /*#__PURE__*/_jsx(SearchAndDocList, {
-          otherProps: otherProps,
+          mapData: mapData,
+          isLoading: isLoading,
+          lastDocRef: lastDocRef,
+          onSearchChange: onSearchChange,
           handleClick: handleClick,
           theme: theme,
           handleClose: handleClose