@flozy/editor 5.0.3 → 5.0.5

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

@@ -17,6 +17,7 @@ import { useGrid, getChildCount } from "./Providers/GridProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+let TT = null;
 const Resizer = ({
   classes,
   onMouseDown,
@@ -136,13 +137,20 @@ const GridItem = props => {
   const minWidthInPercent = isRightCol ? `${widths?.right}%` : cmWidth;
   useEffect(() => {
     try {
-      if (columnRef?.current && (!parentDOM?.parentDOM || !minWidth)) {
-        initDoms();
+      if (columnRef?.current && (!parentDOM?.parentDOM || !minWidth || lastChild)) {
+        initDoms(lastChild);
+        if (lastChild && childCount <= 2) {
+          Transforms.setNodes(editor, {
+            minWidth: null
+          }, {
+            at: path
+          });
+        }
       }
     } catch (err) {
       console.log(err);
     }
-  }, [columnRef?.current, minWidth, childCount]);
+  }, [columnRef?.current, minWidth, childCount, lastChild]);
   useEffect(() => {
     if (isDone || isRightCol) {
       initDoms();

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

@@ -23,15 +23,6 @@ const GridStyles = (theme, appTheme) => ({
           flexWrap: "wrap"
         }
       },
-      "&.cc-1": {
-        "& .grid-item": {
-          "&:last-child": {
-            "& .col-width-resizer": {
-              display: "block !important"
-            }
-          }
-        }
-      },
       "& .grid-item": {
         minWidth: "var(--minWidth)",
         maxWidth: "var(--minWidth)",

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

@@ -41,13 +41,14 @@ const SearchAttachment = props => {
         justifyContent: "flex-start",
         alignItems: "flex-end",
         width: "fit-content",
-        maxWidth: '194px',
+        maxWidth: '250px',
         padding: "0px 10px",
         boxShadow: "none",
         border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
         borderRadius: "7px !important",
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
+        margin: '4px 0px',
         "&.MuiPaper-root.MuiPaper-rounded": {
           borderRadius: "7px !important",
           paddingTop: '0px !important'
@@ -91,7 +92,7 @@ const SearchAttachment = props => {
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             wordBreak: "break-word",
-            maxWidth: '150px',
+            maxWidth: '210px',
             lineHeight: 1.43,
             "&::selection": {
               WebkitTextFillColor: "#000"

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

@@ -113,7 +113,7 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
         sx: {
           width: '100%',
           background: theme?.palette?.editor?.miniToolBarBackground,
-          borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.popUpBorderColor : 'transparent'
+          boxShadow: 'none'
         },
         children: /*#__PURE__*/_jsx(SearchAndDocList, {
           mapData: mapData,
@@ -149,8 +149,13 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
           border: '1px solid',
           borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.popUpBorderColor : 'transparent',
           borderRadius: '12px',
+          boxShadow: theme?.palette?.type === 'dark' ? 'transparent' : '0px 4px 10px 0px #00000029',
           '&.MuiPaper-root-MuiPopover-paper': {
-            borderRadius: '12px !important'
+            borderRadius: '12px !important',
+            boxShadow: theme?.palette?.type === 'dark' ? 'transparent' : '0px 4px 10px 0px #00000029'
+          },
+          '@media only screen and (min-width: 350px) and (max-width: 599px)': {
+            width: '100%'
           }
         },
         children: /*#__PURE__*/_jsx(SearchAndDocList, {

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

@@ -13,6 +13,7 @@ const SearchAndDocList = ({
   theme,
   handleClose
 }) => {
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
@@ -28,25 +29,29 @@ const SearchAndDocList = ({
           color: theme?.palette?.primary?.main
         },
         children: "Brains"
-      }), /*#__PURE__*/_jsx(IconButton, {
+      }), !isMobile ? /*#__PURE__*/_jsx(IconButton, {
         onClick: e => {
           e.stopPropagation();
           handleClose();
         },
         sx: {
           borderRadius: "6px",
-          backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-          border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-          padding: "5px",
+          backgroundColor: theme?.palette.type === 'dark' ? theme?.palette?.editor?.sectionSettingIconHover : theme?.palette?.editor?.sectionSettingIconHover,
+          padding: "3px",
           "&:hover": {
             backgroundColor: theme?.palette?.editor?.sectionSettingIconHover,
             background: theme?.palette?.editor?.sectionSettingIconHover
+          },
+          '& svg': {
+            '& path': {
+              stroke: theme?.palette?.editor?.closeButtonSvgStroke
+            }
           }
         },
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "closeIcon"
         })
-      })]
+      }) : null]
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
         padding: '0px 16px'
@@ -70,34 +75,48 @@ const SearchAndDocList = ({
           startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
             position: "start",
             children: /*#__PURE__*/_jsx(SearchIcon, {})
-          })
+          }),
+          sx: {
+            color: theme?.palette?.text?.secondary2,
+            fontSize: '14px'
+          }
         },
         sx: {
           borderRadius: "8px",
+          fontSize: '14px',
+          color: theme?.palette?.text?.secondary2,
           "& .MuiOutlinedInput-root": {
-            color: theme?.palette?.primary?.main,
+            color: `${theme?.palette?.text?.secondary2} !important`,
             boxShadow: theme?.palette?.shadows?.shadow12,
-            backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+            backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+            fontSize: '14px',
             "&:hover .MuiOutlinedInput-notchedOutline": {
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
               borderColor: theme?.palette?.primary?.slashBrainBorder
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              color: theme?.palette?.text?.secondary2,
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
               borderColor: `${theme?.palette?.primary?.slashBrainBorder} !important`
             }
           },
           '& .MuiOutlinedInput-notchedOutline': {
+            color: theme?.palette?.text?.secondary2,
             borderRadius: "8px",
             border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-            borderColor: theme?.palette?.primary?.slashBrainBorder
+            borderColor: theme?.palette?.primary?.slashBrainBorder,
+            fontSize: '14px'
           },
           '& .MuiInputBase-root': {
-            borderRadius: '8px'
+            color: theme?.palette?.text?.secondary2,
+            borderRadius: '8px',
+            fontSize: '14px'
           },
           "& svg": {
+            width: '16px',
+            height: '16px',
             "& path": {
               stroke: theme?.palette?.text?.text6
             }
@@ -116,23 +135,25 @@ const SearchAndDocList = ({
         padding: '0px 16px 8px',
         marginBottom: '20px',
         scrollbarWidth: "thin",
-        scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
+        scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
         "&::-webkit-scrollbar": {
-          width: "3px",
+          width: "3px !important",
           height: "3px !important",
           borderRadius: "10px !important"
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: theme?.palette?.primary?.slashBrainBorder,
+          backgroundColor: theme?.palette?.editor?.brainPopupScroll,
           borderRadius: "10px !important",
           width: "3px !important"
         },
         "&::-webkit-scrollbar-thumb:hover": {
-          backgroundColor: theme?.palette?.primary?.slashBrainBorder
+          backgroundColor: theme?.palette?.editor?.brainPopupScroll,
+          width: "3px !important"
         },
         "&::-webkit-scrollbar-track": {
           background: "transparent",
-          borderRadius: "10px !important"
+          borderRadius: "10px !important",
+          width: "3px !important"
         }
       },
       children: [mapData?.map((doc, index) => {
@@ -145,19 +166,29 @@ const SearchAndDocList = ({
             border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
             borderRadius: '8px',
             padding: '6px 10px',
-            cursor: 'pointer'
+            cursor: 'pointer',
+            backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+            '@media only screen and (min-width: 350px) and (max-width: 599px)': {
+              overflow: 'hidden'
+            }
           },
           onClick: () => handleClick(doc),
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
             alignItems: "center",
             justifyContent: 'space-between',
+            sx: {
+              flexWrap: 'nowrap'
+            },
             gap: 1,
             children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
               children: /*#__PURE__*/_jsxs(Grid, {
                 container: true,
                 alignItems: "center",
+                sx: {
+                  flexWrap: 'nowrap'
+                },
                 gap: 1,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   item: true,
@@ -184,7 +215,10 @@ const SearchAndDocList = ({
                       overflow: 'hidden',
                       wordBreak: "break-word",
                       maxWidth: '230px',
-                      textAlign: 'left'
+                      textAlign: 'left',
+                      '@media only screen and (min-width: 350px) and (max-width: 899px)': {
+                        maxWidth: '100%'
+                      }
                     },
                     children: title
                   })

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

@@ -15,7 +15,7 @@ const FontLoader = props => {
     let retryCount = 0;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
-        console.log("All fonts have been loaded");
+        // console.log("All fonts have been loaded");
         return;
       }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);

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

@@ -1,6 +1,7 @@
-import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
+import { Autocomplete, Checkbox, FormControlLabel, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import { useSlate } from "slate-react";
+import Select from "../Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -5,13 +5,14 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Select, Typography } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
 import { useState } from "react";
 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 Select from "../Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -13,13 +13,21 @@ const usePopupStyles = theme => ({
       "& .MuiBox-root": {
         "& .renderComp": {
           padding: "2px 0px 2px 1px",
-          background: "transparent !important"
+          background: "transparent !important",
+          "&:hover": {
+            borderRadius: "10px",
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+          }
         },
         "& button": {
-          padding: "0px 0px 0px 6px",
+          padding: "0px 0px 0px 4px !important",
           "& svg": {
-            // width: "19px !important",
-            paddingRight: "6px"
+            width: "18px !important",
+            margin: "5px 12px 6px 6px !important"
+          },
+          "&:hover": {
+            borderRadius: "10px",
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
           }
         },
         "& .active": {

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

@@ -0,0 +1,20 @@
+import { Select as Core } from "@mui/material";
+import SelectStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Select(props) {
+  const {
+    children,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = SelectStyles(theme);
+  return /*#__PURE__*/_jsx(Core, {
+    MenuProps: classes.MenuProps,
+    ...rest,
+    children: children
+  });
+}
+export default Select;

package/dist/Editor/common/Select/styles.js

@@ -0,0 +1,17 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    textColor,
+    background
+  } = theme?.palette?.editor || {};
+  return {
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          color: textColor,
+          background
+        }
+      }
+    }
+  };
+};
+export default SelectStyles;

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

@@ -6,7 +6,7 @@ const Styles = theme => ({
     "& .MuiDrawer-paper": {
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
-      backgroundColor: theme.palette.containers.card
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     }
   },
   childContainer: {

package/dist/Editor/helper/index.js

@@ -329,14 +329,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);

package/dist/Editor/plugins/withEmbeds.js

@@ -22,8 +22,7 @@ const withEmbeds = editor => {
       const parentNode = Node.get(editor, parentPath);
       const previousPath = Path.previous(parentPath);
       const previousNode = Node.get(editor, previousPath);
-      if (BlockTypes.includes(previousNode?.children[0]?.type) && parentNode?.type?.indexOf("heading") >= 0) {
-        console.log("grid is in previous", parentPath, previousPath, [...args]);
+      if (BlockTypes.includes(previousNode?.children[0]?.type) && parentNode?.type?.indexOf("heading") >= 0 && editor.selection.focus.offset === 0) {
         insertNodes(...[{
           type: "paragraph",
           children: [{

package/dist/Editor/plugins/withLayout.js

@@ -56,8 +56,55 @@ const withLayout = editor => {
           }]
         };
         Transforms.insertNodes(editor, paragraph, {
-          at: path.concat(1)
+          at: [0]
         });
+        return;
+      }
+      const extractFirstText = node => {
+        if (node.text) {
+          return node.text;
+        }
+        if (node.children) {
+          for (const child of node.children) {
+            const text = extractFirstText(child);
+            if (text) {
+              return text;
+            }
+          }
+        }
+        return "";
+      };
+      const extractRemainingNodes = node => {
+        if (!node.children) {
+          return [];
+        }
+        const [, ...remainingChildren] = node.children;
+        return remainingChildren.map(child => ({
+          ...child
+        }));
+      };
+      const firstNode = editor.children[0];
+      const firstContent = extractFirstText(firstNode);
+      if (firstNode.type !== "title") {
+        const titleNode = {
+          type: "title",
+          children: [{
+            text: firstContent
+          }]
+        };
+        Transforms.removeNodes(editor, {
+          at: [0]
+        });
+        Transforms.insertNodes(editor, titleNode, {
+          at: [0],
+          select: true
+        });
+        const remainingNodes = extractRemainingNodes(firstNode);
+        if (remainingNodes.length > 0) {
+          Transforms.insertNodes(editor, remainingNodes, {
+            at: [1]
+          });
+        }
       }
       ORDERS_LAYOUT.forEach((enforce, index) => {
         if (index < editor.children.length) {

package/dist/Editor/utils/helper.js

@@ -1,4 +1,4 @@
-import { Editor, Node, Transforms, Element, Path, Range } from "slate";
+import { Editor, Node, Transforms, Element, Path, Range, Text } from "slate";
 import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
@@ -110,11 +110,34 @@ export const isEmptyNode = (editor, children, path) => {
   }
 };
 export const outsideEditorClickLabel = "handle-outside-editor-click";
+function isLastChildParagraphWithText(node) {
+  try {
+    if (!node || !Array.isArray(node.children)) {
+      return false;
+    }
+
+    // Get the last child node
+    const lastChild = node.children[node.children.length - 1];
+
+    // Check if the last child exists and is of type 'paragraph'
+    if (lastChild && lastChild.type === "paragraph") {
+      // Ensure all children of the paragraph node are text nodes
+      const hasOnlyTextChildren = lastChild.children.every(child => Text.isText(child));
+      console.log(hasOnlyTextChildren);
+      return hasOnlyTextChildren;
+    }
+    return false;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
+}
 const insertNewLineOnColumn = (editor, pathStr) => {
   try {
     const path = pathStr.split(",").map(m => parseInt(m));
     const colNode = Node.get(editor, path);
-    if (colNode?.type === "grid-item") {
+    const isValid = isLastChildParagraphWithText(colNode);
+    if (colNode?.type === "grid-item" && !isValid) {
       const newPath = [...path, colNode?.children.length];
       Transforms.insertNodes(editor, [{
         type: "paragraph",

package/package.json

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