@flozy/editor 4.9.1 → 4.9.3

package/dist/Editor/Editor.css

@@ -42,7 +42,7 @@ blockquote {
 }
 
 .editor-wrapper table {
-  border-collapse: separate;
+  border-collapse: collapse;
 }
 
 .editor-wrapper .editor-wrapperbutton {
@@ -1234,7 +1234,20 @@ blockquote {
 
 .settingsHeader {
   font-size: 14px !important;
-  font-weight: 600 !important;
-  font-family: Inter, sans-serif;
-  text-transform: uppercase;
+  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/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/Embed/Video.js

@@ -101,6 +101,7 @@ const Video = ({
     horizantal
   } = alignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const hasAspect = url && aspectRatio !== "custom" && aspectRatio;
   const getSize = () => {
     if (element?.size === undefined) {
       return {
@@ -190,10 +191,10 @@ const Video = ({
           width: {
             ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
           },
-          height: url && !aspectRatio ? {
+          height: url && (aspectRatio === "custom" || !aspectRatio) ? {
             ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
           } : "auto",
-          aspectRatio: aspectRatio ? aspectRatio : "auto"
+          aspectRatio: hasAspect ? aspectRatio : "auto"
         }, theme)
       };
     }

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/Grid/GridItem.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useState, useRef } from "react";
-import { useTheme } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, useTheme } from "@mui/material";
 import { Node, Path, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
@@ -83,7 +83,7 @@ const GridItem = props => {
     initColumnWidth,
     updateColumnWidth,
     updateColNodes
-  } = useGrid();
+  } = useGrid() || {};
   const columnRef = useRef(null);
   const theme = useTheme();
   const classes = GridStyles(theme);
@@ -129,6 +129,7 @@ const GridItem = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [parentDOM, setParentDOM] = useState({});
+  const [alert, setAlert] = useState(null);
   const [size, onMouseDown, resizing, onLoad, isDone] = useTableResize({
     ...parentDOM
   });
@@ -216,16 +217,23 @@ const GridItem = props => {
     try {
       const gridPath = Path.parent(path);
       const gridNode = Node.get(editor, gridPath);
-      onAddGridItem({
-        editor,
-        element: gridNode,
-        children: gridNode?.children || [],
-        isColumn: gridNode?.equalItems
-      });
+      if (gridNode?.children?.length === 5) {
+        setAlert("Maximum column limit exceeded");
+      } else {
+        onAddGridItem({
+          editor,
+          element: gridNode,
+          children: gridNode?.children || [],
+          isColumn: gridNode?.equalItems
+        });
+      }
     } catch (err) {
       console.log(err);
     }
   };
+  const handleClose = () => {
+    setAlert(null);
+  };
   const getBorderColor = () => {
     return borderColor || "transparent";
   };
@@ -334,7 +342,18 @@ const GridItem = props => {
       className: resizing ? "resizing" : "",
       onMouseDown: onMouseDown,
       height: "auto"
-    }) : null]
+    }) : null, /*#__PURE__*/_jsxs(Dialog, {
+      open: Boolean(alert),
+      onClose: handleClose,
+      children: [/*#__PURE__*/_jsx(DialogContent, {
+        children: alert
+      }), /*#__PURE__*/_jsx(DialogActions, {
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          children: "Close"
+        })
+      })]
+    })]
   });
 };
 export default GridItem;

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

@@ -51,6 +51,7 @@ const GridStyles = theme => ({
         },
         "& .gi-inner-cw": {
           overflowX: "auto",
+          wordBreak: "break-word",
           "& .tableToolBar": {
             display: "flex",
             maxWidth: "100%",

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

@@ -21,6 +21,7 @@ const SearchAttachment = props => {
   const {
     theme
   } = useEditorContext();
+  const label = Boolean(title?.trim()) ? title : 'Untitled';
   const handleClick = () => {
     if (metadata && metadata?.actionHandler) {
       metadata?.actionHandler(type, element);
@@ -37,26 +38,28 @@ const SearchAttachment = props => {
     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}`,
+        border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
         borderRadius: "7px",
-        background: theme?.palette?.background?.paper,
-        cursor: 'pointer'
+        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",
@@ -77,16 +79,23 @@ const SearchAttachment = props => {
         children: /*#__PURE__*/_jsx(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
         })
       })]
     }), /*#__PURE__*/_jsx("span", {

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