@flozy/editor 5.0.1 → 5.0.3

package/dist/Editor/Editor.css

@@ -622,21 +622,7 @@ blockquote {
 }
 
 .MuiIconButton-root.btnActive {
-  svg path {
-    stroke: #2563EB;
-  }
-
-  svg text,
-  svg circle,
-  .fill-svg,
-  .fill-path,
-  .fill-path path {
-    fill: #2563EB;
-  }
-
-  path.fill-path {
-    stroke: none;
-  }
+  color: #2563EB !important;
 }
 
 .embed .element-toolbar {

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

@@ -121,7 +121,7 @@ const Carousel = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "sliderBg",
+    className: `sliderBg ${edit ? "carousel_slider_edit" : ""}`,
     style: {
       backgroundColor: "transparent",
       position: "relative"
@@ -136,6 +136,7 @@ const Carousel = props => {
       style: {
         padding: "12px"
       },
+      contentEditable: false,
       children: /*#__PURE__*/_jsx(Slider, {
         ...settings,
         children: children.map((m, i) => {

package/dist/Editor/Elements/Carousel/slick.min.css

@@ -13,9 +13,9 @@
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
+  user-select: none;
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;

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

@@ -7,7 +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 { clearBrainText } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -89,15 +89,7 @@ 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
-      });
-    }
+    clearBrainText(editor);
     setAnchorEl(null);
   };
   const handleClick = data => {

package/dist/Editor/Elements/Table/TableCell.js

@@ -166,7 +166,7 @@ const TableCell = props => {
     if (!resizing && tableResizing) {
       table.resizeTableCell({
         "col.size": size
-      }, rowNode);
+      }, path);
     }
     if (resizing) {
       setTableResizing(currentPath);
@@ -205,9 +205,8 @@ const TableCell = props => {
       });
     }
   };
-  const onMouseUp = e => {
+  const onMouseUp = () => {
     if (startCellPath?.length) {
-      e.preventDefault();
       updateTableSelection({
         endCellPath: path,
         isDragging: false
@@ -232,7 +231,7 @@ const TableCell = props => {
       });
     }
   };
-  const cellId = path.toString() + "table-cell";
+  const cellId = "table-cell" + path.toString();
   const cellRef = document.getElementById(cellId);
   const contentEditable = !readOnly && isCellEditable(startCellPath, path);
   const commonTdProps = useMemo(() => {
@@ -281,7 +280,7 @@ const TableCell = props => {
   const isCellDragging = active?.id && active?.id === cellId;
   const isRowDragging = isCellDragging && currentDraggingType === "row";
   const isColDragging = isCellDragging && currentDraggingType === "col";
-  const width = size?.width || tableSize?.cellWidth;
+  const width = isHeader ? size?.width || tableSize?.cellWidth : "0px";
   const sizeProps = {
     minWidth: width,
     maxWidth: width

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

@@ -1,4 +1,4 @@
-const TopBannerStyles = () => ({
+const TopBannerStyles = theme => ({
   root: {
     "&:hover": {
       "& .tb-toolbar": {
@@ -9,23 +9,29 @@ const TopBannerStyles = () => ({
   toolbar: {
     position: "absolute",
     width: "auto",
-    bottom: "8px",
-    left: 0,
+    bottom: "23px",
     right: 0,
     margin: "auto",
     display: "none",
     "& button": {
-      background: "#FFF",
-      border: "1px solid #ccc",
-      borderRadius: "6px",
-      color: "#373232",
+      background: theme?.palette?.editor?.background,
+      border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
+      borderRadius: "50%",
+      color: "#000",
       marginRight: "8px",
-      padding: "4px 8px",
-      textTransform: "capitalize",
-      fontSize: "14px",
+      padding: "4px",
+      boxShadow: '0px 0px 32px rgba(255, 255, 255, 0.12)',
       "&:hover": {
-        background: "#ccc",
-        color: "#373232"
+        background: theme?.palette?.editor?.background,
+        border: `1px solid ${theme?.palette?.editor?.activeColor}`,
+        "& svg": {
+          fill: theme?.palette?.editor?.activeColor
+        }
+      },
+      "& svg": {
+        width: '20px',
+        height: '20px',
+        fill: theme?.palette?.editor?.menuOptionTextColor
       }
     }
   }

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
-import { Box, Button } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import { updateTopBanner, removeTopBanner } from "../../utils/topBanner";
 import ImageSelector from "../../common/ImageSelector/ImageSelector";
 import TopBannerStyles from "./Styles";
+import Icon from "../../common/Icon";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -39,12 +41,16 @@ export const TopBannerToolbar = props => {
       component: "div",
       className: "tb-toolbar",
       sx: classes.toolbar,
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
         onClick: handleClick("change"),
-        children: "Change Image"
-      }), /*#__PURE__*/_jsx(Button, {
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "editIcon"
+        })
+      }), /*#__PURE__*/_jsx(IconButton, {
         onClick: handleClick("remove"),
-        children: "Remove"
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "deleteIcon"
+        })
       })]
     }), /*#__PURE__*/_jsx(ImageSelector, {
       open: open,
@@ -67,7 +73,10 @@ const TopBanner = props => {
   const {
     url
   } = element;
-  const classes = TopBannerStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = TopBannerStyles(theme);
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     ...attributes,

package/dist/Editor/Toolbar/FormatTools/BlockButton.js

@@ -31,6 +31,9 @@ const BlockButton = props => {
     },
     title: title,
     sx: classes.textAlignButtons,
+    style: {
+      color: "#64748B"
+    },
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

package/dist/Editor/Toolbar/FormatTools/MarkButton.js

@@ -16,6 +16,9 @@ const MarkButton = ({
       toggleMark(editor, format);
     },
     title: title,
+    style: {
+      color: "#64748B"
+    },
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

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

@@ -145,7 +145,10 @@ const usePopupStyle = theme => ({
         background: "#2563EB"
       },
       "& .MuiTabScrollButton-horizontal": {
-        borderBottom: "unset !important"
+        borderBottom: "unset !important",
+        "& svg": {
+          color: theme?.palette?.editor?.closeButtonSvgStroke
+        }
       },
       "@media only screen and (max-width: 599px)": {
         width: "330px"
@@ -336,50 +339,50 @@ const usePopupStyle = theme => ({
     marginBottom: "16px"
   },
   textAlignButtons: {
-    "& .justifyIcon": {
-      "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      }
-    },
-    "& .textAlignIconSameStyles": {
-      "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      }
-    },
-    "& .orderedListIcon": {
-      "& path": {
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      },
-      "& text": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      }
-    },
-    "& .bulletedListTextIcon": {
-      "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      },
-      "& circle": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      }
-    },
-    "& .checkedListTextIcon": {
-      "& path": {
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      }
-    },
-    "& .accordianListTextIcon": {
-      // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-      "& svg": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      },
-      "& path": {
-        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`
-      }
-    }
+    // "& .justifyIcon": {
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .textAlignIconSameStyles": {
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .orderedListIcon": {
+    //   "& path": {
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    //   "& text": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .bulletedListTextIcon": {
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    //   "& circle": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .checkedListTextIcon": {
+    //   "& path": {
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .accordianListTextIcon": {
+    //   // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+    //   "& svg": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
   },
   autoCompleteaFontFamily: {
     "& .MuiOutlinedInput-root": {

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
-import { Editor, Range } from "slate";
+import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -8,6 +8,7 @@ import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
+import { isCarouselSelected } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -63,10 +64,15 @@ const PopupTool = props => {
       // for table cell selection
       // const isCellsSelected = table.isCellSelected(editor.selection);
       // if (!isCellsSelected) {
-      setOpen(true);
-      setPopupType("textFormat");
-      setIsTextSelected(true);
       // }
+      const isCarouselEdit = isCarouselSelected(editor);
+      if (isCarouselEdit) {
+        Transforms.deselect(editor);
+      } else {
+        setOpen(true);
+        setPopupType("textFormat");
+        setIsTextSelected(true);
+      }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");

package/dist/Editor/common/Icon.js

@@ -23,6 +23,8 @@ import OpenLinkIcon from "../assets/svg/OpenLinkIcon";
 import { BrainIcon } from "../assets/svg/BrainIcon";
 import DocsIcon from "../assets/svg/DocsIcon";
 import UserIcon from "../assets/svg/UserIcon";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from '@mui/icons-material/Delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -270,7 +272,9 @@ const iconList = {
   openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
-  userIcon: /*#__PURE__*/_jsx(UserIcon, {})
+  userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
+  editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
+  deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {})
 };
 export const icons = {
   ...iconList

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

@@ -18,7 +18,7 @@ const usePopupStyles = theme => ({
         "& button": {
           padding: "0px 0px 0px 6px",
           "& svg": {
-            width: "19px !important",
+            // width: "19px !important",
             paddingRight: "6px"
           }
         },
@@ -215,7 +215,8 @@ const usePopupStyles = theme => ({
     margin: "8px",
     display: "flex",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    color: "#64748B"
   }
 });
 export default usePopupStyles;

package/dist/Editor/common/iconListV2.js

@@ -462,19 +462,19 @@ export const OrderedListTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
   className: "orderedListIcon",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 19.8564H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M11 12.8564H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M11 5.85645H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -482,19 +482,19 @@ export const OrderedListTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
     x: "3",
     y: "8",
     fontSize: "5",
-    fill: "#64748B",
+    fill: "currentColor",
     children: "1"
   }), /*#__PURE__*/_jsx("text", {
     x: "3",
     y: "14",
     fontSize: "5",
-    fill: "#64748B",
+    fill: "currentColor",
     children: "2"
   }), /*#__PURE__*/_jsx("text", {
     x: "3",
     y: "21",
     fontSize: "5",
-    fill: "#64748B",
+    fill: "currentColor",
     children: "3"
   })]
 });
@@ -507,19 +507,19 @@ export const BulletedListTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
   className: "bulletedListTextIcon",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 19.8564H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M11 12.8564H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M11 5.85645H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -527,17 +527,17 @@ export const BulletedListTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
     cx: "5.25",
     cy: "5.80664",
     r: "1.25",
-    fill: "#64748B"
+    fill: "currentColor"
   }), /*#__PURE__*/_jsx("circle", {
     cx: "5.25",
     cy: "12.8066",
     r: "1.25",
-    fill: "#64748B"
+    fill: "currentColor"
   }), /*#__PURE__*/_jsx("circle", {
     cx: "5.25",
     cy: "19.8066",
     r: "1.25",
-    fill: "#64748B"
+    fill: "currentColor"
   })]
 });
 export const CheckListTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
@@ -549,37 +549,37 @@ export const CheckListTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
   className: "checkedListTextIcon",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 19.8564H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M11 12.8564H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M11 5.85645H21",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M3 5.85645L4 6.85645L7 3.85645",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M3 12.8564L4 13.8564L7 10.8564",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M3 19.8564L4 20.8564L7 17.8564",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -628,10 +628,9 @@ export const BoldTextFormatIcon = props => /*#__PURE__*/_jsx("svg", {
   viewBox: "0 0 12 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
-  className: "fill-path",
   children: /*#__PURE__*/_jsx("path", {
     d: "M0.598011 15.3564V0.81099H5.92472C6.95691 0.81099 7.81155 0.981445 8.48864 1.32235C9.16572 1.65853 9.67235 2.11544 10.0085 2.69309C10.3447 3.26601 10.5128 3.91232 10.5128 4.63201C10.5128 5.23807 10.4015 5.74944 10.179 6.1661C9.95644 6.57804 9.65814 6.90948 9.28409 7.16042C8.91477 7.40663 8.50758 7.58656 8.0625 7.7002V7.84224C8.54545 7.86591 9.01657 8.02216 9.47585 8.31099C9.93987 8.59508 10.3234 8.99991 10.6264 9.52548C10.9295 10.051 11.081 10.6903 11.081 11.4431C11.081 12.1865 10.9058 12.8541 10.5554 13.4459C10.2098 14.0331 9.67472 14.4994 8.95028 14.8451C8.22585 15.186 7.30019 15.3564 6.1733 15.3564H0.598011ZM2.79261 13.4743H5.96023C7.01136 13.4743 7.7642 13.2707 8.21875 12.8635C8.6733 12.4564 8.90057 11.9474 8.90057 11.3366C8.90057 10.8773 8.78456 10.4559 8.55256 10.0724C8.32055 9.68883 7.98911 9.38343 7.55824 9.15616C7.1321 8.92889 6.62547 8.81525 6.03835 8.81525H2.79261V13.4743ZM2.79261 7.1036H5.73295C6.22538 7.1036 6.66809 7.00891 7.06108 6.81951C7.45881 6.63012 7.77367 6.36497 8.00568 6.02406C8.24242 5.67841 8.3608 5.27122 8.3608 4.80247C8.3608 4.20114 8.15009 3.69688 7.72869 3.28968C7.30729 2.88249 6.66099 2.67889 5.78977 2.67889H2.79261V7.1036Z",
-    fill: "#64748B"
+    fill: "currentColor"
   })
 });
 export const UnderlineTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
@@ -642,13 +641,13 @@ export const UnderlineTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M3.41406 1.58301V6.16634C3.41406 7.38192 3.89695 8.54771 4.75649 9.40725C5.61603 10.2668 6.78182 10.7497 7.9974 10.7497C9.21297 10.7497 10.3788 10.2668 11.2383 9.40725C12.0978 8.54771 12.5807 7.38192 12.5807 6.16634V1.58301",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M1.58203 14.416H14.4154",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -662,19 +661,19 @@ export const ItalicTextFormatIcon = props => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   children: [/*#__PURE__*/_jsx("path", {
     d: "M4.71094 1.45801H9.46094",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M1.54297 12.541H6.29297",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
     d: "M7.08464 1.45801L3.91797 12.5413",
-    stroke: "#64748B",
+    stroke: "currentColor",
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -951,16 +950,16 @@ export function LeftAlignTextFormat() {
     className: "textAlignIconSameStyles",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M17.5 5.60547H2.5C2.15833 5.60547 1.875 5.26547 1.875 4.85547C1.875 4.44547 2.15833 4.10547 2.5 4.10547H17.5C17.8417 4.10547 18.125 4.44547 18.125 4.85547C18.125 5.26547 17.8417 5.60547 17.5 5.60547Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M10.3917 10.6055H2.5C2.15833 10.6055 1.875 10.2655 1.875 9.85547C1.875 9.44547 2.15833 9.10547 2.5 9.10547H10.3917C10.7333 9.10547 11.0167 9.44547 11.0167 9.85547C11.0167 10.2655 10.7417 10.6055 10.3917 10.6055Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M17.5 15.6055H2.5C2.15833 15.6055 1.875 15.2655 1.875 14.8555C1.875 14.4455 2.15833 14.1055 2.5 14.1055H17.5C17.8417 14.1055 18.125 14.4455 18.125 14.8555C18.125 15.2655 17.8417 15.6055 17.5 15.6055Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M10.3917 20.6055H2.5C2.15833 20.6055 1.875 20.2655 1.875 19.8555C1.875 19.4455 2.15833 19.1055 2.5 19.1055H10.3917C10.7333 19.1055 11.0167 19.4455 11.0167 19.8555C11.0167 20.2655 10.7417 20.6055 10.3917 20.6055Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     })]
   });
 }
@@ -974,16 +973,16 @@ export function CenterAlignTextFormat() {
     className: "textAlignIconSameStyles",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M17.5 5.60547H2.5C2.15833 5.60547 1.875 5.26547 1.875 4.85547C1.875 4.44547 2.15833 4.10547 2.5 4.10547H17.5C17.8417 4.10547 18.125 4.44547 18.125 4.85547C18.125 5.26547 17.8417 5.60547 17.5 5.60547Z",
-      fill: "#8F9CAE"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M13.9508 10.6055H6.05078C5.70911 10.6055 5.42578 10.2655 5.42578 9.85547C5.42578 9.44547 5.70911 9.10547 6.05078 9.10547H13.9424C14.2841 9.10547 14.5674 9.44547 14.5674 9.85547C14.5674 10.2655 14.2924 10.6055 13.9508 10.6055Z",
-      fill: "#8F9CAE"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M17.5 15.6055H2.5C2.15833 15.6055 1.875 15.2655 1.875 14.8555C1.875 14.4455 2.15833 14.1055 2.5 14.1055H17.5C17.8417 14.1055 18.125 14.4455 18.125 14.8555C18.125 15.2655 17.8417 15.6055 17.5 15.6055Z",
-      fill: "#8F9CAE"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M13.9508 20.6055H6.05078C5.70911 20.6055 5.42578 20.2655 5.42578 19.8555C5.42578 19.4455 5.70911 19.1055 6.05078 19.1055H13.9424C14.2841 19.1055 14.5674 19.4455 14.5674 19.8555C14.5674 20.2655 14.2924 20.6055 13.9508 20.6055Z",
-      fill: "#8F9CAE"
+      fill: "currentColor"
     })]
   });
 }
@@ -997,16 +996,16 @@ export function RightAlignTextFormat() {
     className: "textAlignIconSameStyles",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M17.5 5.60547H2.5C2.15833 5.60547 1.875 5.26547 1.875 4.85547C1.875 4.44547 2.15833 4.10547 2.5 4.10547H17.5C17.8417 4.10547 18.125 4.44547 18.125 4.85547C18.125 5.26547 17.8417 5.60547 17.5 5.60547Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M17.4991 10.6055H9.60742C9.26576 10.6055 8.98242 10.2655 8.98242 9.85547C8.98242 9.44547 9.26576 9.10547 9.60742 9.10547H17.4991C17.8408 9.10547 18.1241 9.44547 18.1241 9.85547C18.1241 10.2655 17.8408 10.6055 17.4991 10.6055Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M17.5 15.6055H2.5C2.15833 15.6055 1.875 15.2655 1.875 14.8555C1.875 14.4455 2.15833 14.1055 2.5 14.1055H17.5C17.8417 14.1055 18.125 14.4455 18.125 14.8555C18.125 15.2655 17.8417 15.6055 17.5 15.6055Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     }), /*#__PURE__*/_jsx("path", {
       d: "M17.4991 20.6055H9.60742C9.26576 20.6055 8.98242 20.2655 8.98242 19.8555C8.98242 19.4455 9.26576 19.1055 9.60742 19.1055H17.4991C17.8408 19.1055 18.1241 19.4455 18.1241 19.8555C18.1241 20.2655 17.8408 20.6055 17.4991 20.6055Z",
-      fill: "#94A3B8"
+      fill: "currentColor"
     })]
   });
 }
@@ -1021,25 +1020,25 @@ export function JustifyTextFormat() {
     className: "justifyIcon",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M2.5 4.85547H17.5",
-      stroke: "#8F9CAE",
+      stroke: "currentColor",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M2.5 9.85547H17.5",
-      stroke: "#8F9CAE",
+      stroke: "currentColor",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M2.5 14.8555H17.5",
-      stroke: "#8F9CAE",
+      stroke: "currentColor",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M2.5 19.8555H17.5",
-      stroke: "#8F9CAE",
+      stroke: "currentColor",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"

package/dist/Editor/common/iconslist.js

@@ -135,12 +135,11 @@ export const StrikethroughIcon = props => /*#__PURE__*/_jsx("svg", {
   height: "15",
   viewBox: "0 0 15 15",
   fill: "none",
-  className: "fill-path",
   children: /*#__PURE__*/_jsx("path", {
     className: "strokeFillPath",
     d: "M2.7607 11.125C2.7607 13.0718 4.33885 14.65 6.28568 14.65H8.21432C10.1611 14.65 11.7393 13.0718 11.7393 11.125V10.6429C11.7393 9.78254 11.4309 8.99403 10.9189 8.38214H13.5179C13.867 8.38214 14.15 8.0991 14.15 7.75C14.15 7.4009 13.867 7.11786 13.5179 7.11786H8.21597H8.21435H6.28579C5.03727 7.11786 4.02509 6.10568 4.02509 4.85714V4.375C4.02509 3.12647 5.03727 2.11429 6.28579 2.11429H8.21435C9.46288 2.11429 10.4751 3.12647 10.4751 4.375V4.84874C10.4751 5.19784 10.7581 5.48088 11.1072 5.48088C11.4563 5.48088 11.7393 5.19784 11.7393 4.84874V4.375C11.7393 2.42817 10.1612 0.85 8.21435 0.85H6.28579C4.33897 0.85 2.76081 2.42817 2.76081 4.375V4.85714C2.76081 5.71746 3.06916 6.50597 3.58108 7.11786H0.982141C0.633044 7.11786 0.35 7.4009 0.35 7.75C0.35 8.0991 0.633044 8.38214 0.982141 8.38214H8.21424L8.21556 8.38214C8.21559 8.38214 8.21562 8.38214 8.21564 8.38214C9.46353 8.38289 10.4749 9.39474 10.4749 10.6429V11.125C10.4749 12.3735 9.46276 13.3857 8.21424 13.3857H6.28568C5.03715 13.3857 4.02498 12.3735 4.02498 11.125V10.6429C4.02498 10.2938 3.74193 10.0107 3.39284 10.0107C3.04374 10.0107 2.7607 10.2938 2.7607 10.6429V11.125Z",
-    fill: "#64748B",
-    stroke: "#64748B",
+    fill: "currentColor",
+    stroke: "currentColor",
     strokeWidth: "0.3"
   })
 });

package/dist/Editor/helper/deserialize/index.js

@@ -14,7 +14,10 @@ const handleTableCell = (el, children) => {
   });
   return {
     type: "table-cell",
-    overwriteChild: wrapChild
+    overwriteChild: wrapChild,
+    size: {
+      width: 120
+    }
   };
 };
 const ELEMENT_TAGS = {

package/dist/Editor/helper/index.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Path } from "slate";
+import { Editor, Transforms, Path, Element } from "slate";
 import { ReactEditor } from "slate-react";
 import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
@@ -322,4 +322,40 @@ export const getBorderColor = (borderColor = "") => {
     borderStyle.borderColor = borderColor;
   }
   return borderStyle;
+};
+export const isCarouselSelected = editor => {
+  try {
+    if (!editor.selection) {
+      return false;
+    }
+    const [nodeEntry] = Editor.nodes(editor, {
+      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');
+    return !isEdit;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
+};
+export const clearBrainText = editor => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      const [currentNode, currentPath] = Editor.node(editor, selection);
+      const cleanedText = Node.string(currentNode).replace(/\/b(?:rain|r|ra|rai)?/g, "").trim();
+      Transforms.insertText(editor, cleanedText, {
+        at: currentPath
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/hooks/useTable.js

@@ -2,11 +2,12 @@ import { ClickAwayListener } from "@mui/material";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { clearCellText } from "../utils/table";
 import { Editor, Element, Transforms, Range } from "slate";
-import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { encodeToBase64 } from "../utils/helper";
 import { serializeToText } from "../utils/serializeToText";
 import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const handleDragEnd = (dragData, editor, resetAll) => {
   const {
     active,
@@ -157,15 +158,15 @@ export const TableProvider = ({
   }, [openSetttings]);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
-    children: /*#__PURE__*/_jsx(DndContext, {
+    children: /*#__PURE__*/_jsxs(DndContext, {
       sensors: sensors,
       onDragEnd: data => handleDragEnd(data, editor, resetAll),
-      children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      children: [/*#__PURE__*/_jsx(ClickAwayListener, {
         onClickAway: () => setTableSelection(getDefaultTableSelection()),
         children: /*#__PURE__*/_jsx("div", {
           children: children
         })
-      })
+      }), /*#__PURE__*/_jsx(DragOverlay, {})]
     })
   });
 };

package/dist/Editor/utils/table.js

@@ -246,7 +246,7 @@ export class TableUtil {
         const isDuplicate = action === "duplicate";
         const isInsertNext = action === "after" || isDuplicate;
         const path = isInsertNext ? Path.next(currentRow) : currentRow;
-        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRow(Array(table.columns).fill(""));
+        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRowOnInsertAbove(currentRowData, currentRow, this.editor);
         Transforms.insertNodes(this.editor, insertData, {
           at: path
         });
@@ -492,16 +492,12 @@ export class TableUtil {
       console.log(err);
     }
   };
-  resizeTableCell = (styleProps, rowNode) => {
+  resizeTableCell = (styleProps, path) => {
     const cellProps = parseByPrefixKey(styleProps, "col.");
-    const [rowData, rowPath] = rowNode;
-    rowData?.children.forEach((_, i) => {
-      const cellPath = [...rowPath, i];
-      Transforms.setNodes(this.editor, {
-        ...cellProps
-      }, {
-        at: cellPath
-      });
+    Transforms.setNodes(this.editor, {
+      ...cellProps
+    }, {
+      at: path
     });
   };
   getTableProps = () => {
@@ -626,14 +622,14 @@ export class TableUtil {
     }
   };
 }
-const createRow = cellText => {
-  const newRow = Array.from(cellText, value => createTableCell(value));
+const createRow = (cellText, other) => {
+  const newRow = Array.from(cellText, value => createTableCell(value, other));
   return {
     type: "table-row",
     children: newRow
   };
 };
-export const createTableCell = text => {
+export const createTableCell = (text, other = {}) => {
   return {
     type: "table-cell",
     children: [{
@@ -644,7 +640,32 @@ export const createTableCell = text => {
     }],
     size: {
       width: 120
+    },
+    ...other
+  };
+};
+const createRowOnInsertAbove = (currentRow, currRowPath, editor) => {
+  const isFirstRow = currRowPath[currRowPath?.length - 1] === 0;
+  const rowChild = currentRow?.children?.map((cell, i) => {
+    let other = {};
+
+    // remove the current row's size and add it on the currently inserting cell
+    if (isFirstRow) {
+      const cellPath = [...currRowPath, i];
+      Transforms.setNodes(editor, {
+        size: null
+      }, {
+        at: cellPath
+      });
+      other = {
+        size: cell?.size
+      };
     }
+    return createTableCell("", other);
+  });
+  return {
+    type: "table-row",
+    children: rowChild
   };
 };
 

package/package.json

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