@flozy/editor 4.9.9 → 5.0.0

package/dist/Editor/Editor.css

@@ -1075,6 +1075,10 @@ blockquote {
   font-size: 14px;
 }
 
+.listItemMargin {
+  margin: 0px;
+}
+
 .content-editable.empty {
   position: relative;
 }

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -9,7 +9,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       marginRight: "8px",
-      border: "1px solid #ccc"
+      border: "unset"
     }
   },
   colorPopper: {
@@ -58,7 +58,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "1px solid #ccc"
+      border: "unset"
     }
   },
   colorPickerIcon: {

package/dist/Editor/Elements/Color Picker/defaultColors.js

@@ -1,4 +1,4 @@
-export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
+export const colors = ["#000000", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
 // "#E6E6E6",
-// "#BEBEBE"
+// "#BEBEBE",
 ];

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

@@ -36,7 +36,7 @@ const SearchAttachment = props => {
       display: "block"
     },
     children: /*#__PURE__*/_jsxs(Card, {
-      style: {
+      sx: {
         display: "flex",
         justifyContent: "flex-start",
         alignItems: "flex-end",
@@ -48,6 +48,10 @@ const SearchAttachment = props => {
         borderRadius: "7px !important",
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
+        "&.MuiPaper-root.MuiPaper-rounded": {
+          borderRadius: "7px !important",
+          paddingTop: '0px !important'
+        },
         "& *::selection": {
           background: "#000"
         }

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

@@ -7,6 +7,7 @@ import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import SearchAndDocList from "./SearchList";
 import { insertBrain } from "../../utils/brains";
 import { useDebounce } from "use-debounce";
+import { Editor, Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -88,6 +89,15 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
     setSkip(0);
   };
   const handleClose = () => {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      const [, currentPath] = Editor.node(editor, selection);
+      Transforms.insertText(editor, '', {
+        at: currentPath
+      });
+    }
     setAnchorEl(null);
   };
   const handleClick = data => {

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

@@ -35,12 +35,12 @@ const SearchAndDocList = ({
         },
         sx: {
           borderRadius: "6px",
-          backgroundColor: theme?.palette?.containers?.bg7,
-          border: theme?.palette?.type === 'dark' ? `1px solid ${theme?.palette?.editor?.popUpBorderColor}` : '',
+          backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+          border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
           padding: "5px",
           "&:hover": {
-            backgroundColor: theme?.palette?.containers?.bg8,
-            background: theme?.palette?.containers?.bg8
+            backgroundColor: theme?.palette?.editor?.sectionSettingIconHover,
+            background: theme?.palette?.editor?.sectionSettingIconHover
           }
         },
         children: /*#__PURE__*/_jsx(Icon, {
@@ -77,6 +77,7 @@ const SearchAndDocList = ({
           "& .MuiOutlinedInput-root": {
             color: theme?.palette?.primary?.main,
             boxShadow: theme?.palette?.shadows?.shadow12,
+            backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
             "&:hover .MuiOutlinedInput-notchedOutline": {
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
@@ -85,7 +86,7 @@ const SearchAndDocList = ({
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-              borderColor: theme?.palette?.primary?.slashBrainBorder
+              borderColor: `${theme?.palette?.primary?.slashBrainBorder} !important`
             }
           },
           '& .MuiOutlinedInput-notchedOutline': {
@@ -113,7 +114,26 @@ const SearchAndDocList = ({
         overflowY: 'auto',
         overflowX: 'hidden',
         padding: '0px 16px 8px',
-        marginBottom: '20px'
+        marginBottom: '20px',
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
+        "&::-webkit-scrollbar": {
+          width: "3px",
+          height: "3px !important",
+          borderRadius: "10px !important"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: theme?.palette?.primary?.slashBrainBorder,
+          borderRadius: "10px !important",
+          width: "3px !important"
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+          backgroundColor: theme?.palette?.primary?.slashBrainBorder
+        },
+        "&::-webkit-scrollbar-track": {
+          background: "transparent",
+          borderRadius: "10px !important"
+        }
       },
       children: [mapData?.map((doc, index) => {
         const title = doc?.title?.trim() === "" ? 'Untitled' : doc?.title;

package/dist/Editor/Styles/EditorStyles.js

@@ -291,9 +291,11 @@ const editorStyles = ({
     }
   },
   fullScreenWrapper: {
+    "& .editor-wrapper": {
+      paddingTop: '20px'
+    },
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
-      paddingTop: "20px",
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

package/dist/Editor/Toolbar/PopupTool/PopperHeader.js

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
-import { Grid, Typography, IconButton, Tooltip, TextField } from "@mui/material";
+import { Grid, Typography, IconButton, Tooltip, TextField, InputAdornment } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import Icon from "../../common/Icon";
 import { ToggleFullScreenIcon } from "../../common/iconListV2";
+import { SearchIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SearchBox = props => {
@@ -17,7 +18,13 @@ const SearchBox = props => {
     sx: classes.searchBox,
     size: "small",
     value: search,
-    onChange: handleChange
+    onChange: handleChange,
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/_jsx(SearchIcon, {})
+      })
+    }
   });
 };
 const PopperHeader = props => {
@@ -63,6 +70,7 @@ const PopperHeader = props => {
           sx: {
             position: 'relative'
           },
+          className: "inputField",
           children: [/*#__PURE__*/_jsx(IconButton, {
             className: openSearch ? 'searchContainer' : '',
             onClick: handleSearchButton,

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -24,6 +24,31 @@ const usePopupStyle = theme => ({
     "& .MuiDialog-paperFullScreen": {
       borderRadius: "0px !important"
     },
+    "& .inputField": {
+      height: '29px',
+      '& .MuiIconButton-root': {
+        padding: '5px'
+      },
+      "& .MuiFormControl-root": {
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "8px",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& .MuiOutlinedInput-input": {
+        padding: "3px 35px 4px 2px !important"
+      },
+      "& .MuiInputBase-adornedStart": {
+        padding: "0px 0px 0px 9px"
+      },
+      '& svg': {
+        '& path': {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    },
     "&.textSettings": {
       "@media only screen and (max-width: 600px)": {
         margin: "4px !important",
@@ -56,6 +81,11 @@ const usePopupStyle = theme => ({
     "& .buttonsWrpr": {
       "& button": {
         color: theme?.palette?.editor?.textColor
+      },
+      "& .more-btn-cbs": {
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        border: `1.5px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        paddingTop: "10px"
       }
     },
     "@media only screen and (max-width: 599px)": {
@@ -596,7 +626,7 @@ const usePopupStyle = theme => ({
     borderRadius: "7px !important",
     "& .buttonsWrpr": {
       "& button": {
-        border: "1px solid #ccc",
+        // border: "1px solid #ccc",
         margin: "4px",
         width: "24px",
         height: "24px",
@@ -652,14 +682,16 @@ const usePopupStyle = theme => ({
       padding: "7px 15px",
       color: "#FFF",
       width: "100px",
-      marginBottom: "10px"
+      marginBottom: "10px",
+      textTransform: "capitalize"
     },
     "& .outlineBtn": {
       border: "1px solid #D7DBEC",
       borderRadius: "7px",
       padding: "7px 15px",
       color: "#FFF",
-      width: "100px"
+      width: "100px",
+      textTransform: "capitalize"
     }
   },
   searchBox: {

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button, ButtonGroup, Divider, Grid, Typography } from "@mui/material";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
 import { toolbarGroups } from "../toolbarGroups";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
@@ -438,8 +438,8 @@ const TextFormat = props => {
           className: "vl"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleColorPicker("bgColor"),
-          className: "colorPicker",
-          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+          className: "colorPicker textFormatMUIIcon",
+          children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
         })]
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
         sx: classes.btnGroup2,
@@ -460,8 +460,8 @@ const TextFormat = props => {
           className: "vl"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleColorPicker("color"),
-          className: "colorPicker",
-          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+          className: "colorPicker textFormatMUIIcon",
+          children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
         })]
       })]
     }), /*#__PURE__*/_jsx(AllColors, {

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

@@ -253,7 +253,7 @@ const StyleBuilder = props => {
       style: {
         zIndex: "1300"
       },
-      sx: classes.bottomBarDrawer,
+      sx: classes.sideBarDrawer,
       children: renderDrawerMenu()
     }) : /*#__PURE__*/_jsx(Drawer, {
       open: true,

package/dist/Editor/commonStyle.js

@@ -162,7 +162,8 @@ const useCommonStyle = theme => ({
         background: `${theme?.palette?.editor?.closeButtonBgColor} !important`
       },
       "& .deleteBtn": {
-        background: "transparent"
+        background: "transparent",
+        margin: '0px !important'
       },
       "& .MuiGrid-container": {
         "& .workFlowButton": {
@@ -170,7 +171,9 @@ const useCommonStyle = theme => ({
           textTransform: "unset !important",
           color: `${theme?.palette?.editor?.textColor} !important`,
           fontSize: "14px !important",
-          fontWeight: "500 !important"
+          fontWeight: "500 !important",
+          borderRadius: "25px",
+          padding: "5px 15px"
         }
       },
       "& .MuiDialogActions-root": {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -369,12 +369,14 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
+        className: "listItemMargin",
         type: "1",
         ...attributes,
         children: children
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
+        className: "listItemMargin",
         ...attributes,
         children: children
       });

package/package.json

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