@flozy/editor 5.0.4 → 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,
@@ -138,7 +139,7 @@ const GridItem = props => {
     try {
       if (columnRef?.current && (!parentDOM?.parentDOM || !minWidth || lastChild)) {
         initDoms(lastChild);
-        if (lastChild) {
+        if (lastChild && childCount <= 2) {
           Transforms.setNodes(editor, {
             minWidth: null
           }, {

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/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/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/plugins/withEmbeds.js

@@ -22,7 +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) {
+      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/package.json

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