@flozy/editor 4.9.3 → 4.9.5

package/dist/Editor/Editor.css

@@ -622,7 +622,21 @@ blockquote {
 }
 
 .MuiIconButton-root.btnActive {
-  background-color: #ccc;
+  svg path {
+    stroke: #2563EB;
+  }
+
+  svg text,
+  svg circle,
+  .fill-svg,
+  .fill-path,
+  .fill-path path {
+    fill: #2563EB;
+  }
+
+  path.fill-path {
+    stroke: none;
+  }
 }
 
 .embed .element-toolbar {
@@ -1214,14 +1228,6 @@ blockquote {
   position: absolute;
 }
 
-.dividerComponent:hover {
-  padding: 10px 0;
-}
-
-.dividerComponent.readonlyDivider:hover {
-  padding: 0;
-}
-
 .dividerComponent:hover .divider-settings {
   display: block;
 }
@@ -1229,7 +1235,10 @@ blockquote {
 @media (max-width: 899px) {
   .MuiPopover-root {
     z-index: 1302 !important;
-}
+  }
+  canvas {
+    max-width: 100% !important;
+  }
 }
 
 .settingsHeader {
@@ -1250,4 +1259,5 @@ blockquote {
 
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
-}
+}
+

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Styles from "./Styles";
 import { Fade, Paper, Popper } from "@mui/material";
@@ -178,9 +178,9 @@ function PopoverAIInput({
   const selectedEleRef = useRef({});
   const classes = Styles();
   const editor = useSlate();
-  const updateAnchor = () => {
+  const updateAnchor = useCallback(() => {
     updateAnchorEl(setAnchorEl, editor, openAI, selectedEleRef.current);
-  };
+  }, [setAnchorEl, editor, openAI, selectedEleRef.current]);
   useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
     setAnchorEl(null);

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

@@ -142,13 +142,13 @@ const Styles = theme => ({
       gap: "8px"
     },
     "&:hover": {
-      backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
-      "& svg path": {
-        stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
-      },
-      "& svg": {
-        color: `${theme?.palette?.editor?.menuOptionTextColor} !important`
-      }
+      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/Carousel/Carousel.js

@@ -52,10 +52,13 @@ const Carousel = props => {
   useEffect(() => {
     setRefresh(new Date().getTime());
   }, []);
+
+  //comment this for carosul selection on insert 
   useEffect(() => {
     if (!edit) {
       ReactEditor.focus(editor);
       Transforms.select(editor, ReactEditor.findPath(editor, element));
+      Transforms.deselect(editor);
     }
   }, [edit]);
   const onAddSlide = () => {

package/dist/Editor/Elements/Divider/Divider.js

@@ -100,11 +100,12 @@ const Divider = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: `dividerComponent ${readOnly ? 'readonlyDivider' : ''}`,
+    className: `dividerComponent`,
     style: {
       userSelect: "none",
       position: 'relative'
     },
+    contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
@@ -124,7 +125,8 @@ const Divider = props => {
         userSelect: "none",
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
-        height: borderColor?.includes("linear") ? borderWidth : undefined
+        height: borderColor?.includes("linear") ? borderWidth : undefined,
+        marginTop: '15px'
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {

package/dist/Editor/Elements/Link/LinkButton.js

@@ -64,7 +64,7 @@ const LinkButton = props => {
       title: "Link",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: `${showInput ? "clicked" : ""} ${isActive ? "btnActive" : ""}`,
+        className: `${showInput ? "clicked btnActive" : ""} ${isActive ? "btnActive" : ""}`,
         format: "link",
         onClick: toggleLink,
         children: /*#__PURE__*/_jsx(Icon, {

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

@@ -27,7 +27,7 @@ const SearchAttachment = props => {
       metadata?.actionHandler(type, element);
     }
   };
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "attachment-wrpr-ev2",
     ...attributes,
@@ -35,7 +35,7 @@ const SearchAttachment = props => {
     style: {
       display: "block"
     },
-    children: [/*#__PURE__*/_jsxs(Card, {
+    children: /*#__PURE__*/_jsxs(Card, {
       style: {
         display: "flex",
         justifyContent: "flex-start",
@@ -45,7 +45,7 @@ const SearchAttachment = props => {
         padding: "0px 10px",
         boxShadow: "none",
         border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-        borderRadius: "7px",
+        borderRadius: "7px !important",
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
         "& *::selection": {
@@ -76,7 +76,7 @@ const SearchAttachment = props => {
             paddingBottom: '3px'
           }
         },
-        children: /*#__PURE__*/_jsx(Typography, {
+        children: /*#__PURE__*/_jsxs(Typography, {
           sx: {
             fontWeight: "500",
             background: theme?.palette?.text?.slashBrainText,
@@ -95,13 +95,10 @@ const SearchAttachment = props => {
           },
           component: "div",
           variant: "subtitle1",
-          children: label
+          children: [label, children]
         })
       })]
-    }), /*#__PURE__*/_jsx("span", {
-      contentEditable: false,
-      children: children
-    })]
+    })
   });
 };
 export default SearchAttachment;

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

@@ -110,8 +110,8 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
       children: /*#__PURE__*/_jsx(Paper, {
         sx: {
           width: '100%',
-          background: theme?.palette?.background?.paper,
-          borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.primary?.border2 : 'transparent'
+          background: theme?.palette?.editor?.miniToolBarBackground,
+          borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.popUpBorderColor : 'transparent'
         },
         children: /*#__PURE__*/_jsx(SearchAndDocList, {
           mapData: mapData,
@@ -143,9 +143,9 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
         sx: {
           padding: 0,
           width: '330px',
-          background: theme?.palette?.background?.paper,
+          background: theme?.palette?.editor?.miniToolBarBackground,
           border: '1px solid',
-          borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.primary?.border2 : 'transparent',
+          borderColor: theme?.palette?.type === 'dark' ? theme?.palette?.editor?.popUpBorderColor : 'transparent',
           borderRadius: '12px',
           '&.MuiPaper-root-MuiPopover-paper': {
             borderRadius: '12px !important'

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

@@ -36,7 +36,7 @@ const SearchAndDocList = ({
         sx: {
           borderRadius: "6px",
           backgroundColor: theme?.palette?.containers?.bg7,
-          border: theme?.palette?.type === 'dark' ? `1px solid ${theme?.palette?.primary?.border2}` : '',
+          border: theme?.palette?.type === 'dark' ? `1px solid ${theme?.palette?.editor?.popUpBorderColor}` : '',
           padding: "5px",
           "&:hover": {
             backgroundColor: theme?.palette?.containers?.bg8,
@@ -111,24 +111,27 @@ const SearchAndDocList = ({
         maxHeight: '400px',
         minWidth: "275px",
         overflowY: 'auto',
+        overflowX: 'hidden',
         padding: '0px 16px 8px',
         marginBottom: '20px',
         scrollbarWidth: "thin",
         scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
         "&::-webkit-scrollbar": {
           width: "3px",
-          height: "3px !important"
+          height: "3px !important",
+          borderRadius: "10px"
         },
         "&::-webkit-scrollbar-thumb": {
           backgroundColor: theme?.palette?.primary?.slashBrainBorder,
-          borderRadius: "4px",
+          borderRadius: "10px",
           width: "3px !important"
         },
         "&::-webkit-scrollbar-thumb:hover": {
           backgroundColor: theme?.palette?.primary?.slashBrainBorder
         },
         "&::-webkit-scrollbar-track": {
-          background: "transparent"
+          background: "transparent",
+          borderRadius: "10px"
         }
       },
       children: [mapData?.map((doc, index) => {
@@ -206,7 +209,6 @@ const SearchAndDocList = ({
         justifyContent: "center",
         alignItems: 'center',
         sx: {
-          minWidth: "330px",
           minHeight: '400px',
           padding: '0px 16px 8px',
           position: 'absolute'

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -471,7 +471,8 @@ const SignaturePopup = props => {
                     classes: classes,
                     value: brush.color,
                     onSave: onBrushColor,
-                    recentColors: []
+                    recentColors: [],
+                    hideGradient: true
                   }), /*#__PURE__*/_jsx("span", {
                     style: {
                       marginLeft: "10px",

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

@@ -59,11 +59,12 @@ function AddRowCol(props) {
     children: /*#__PURE__*/_jsx(Button, {
       sx: {
         fontSize: "14px",
-        border: "1px dotted #8DA8E3",
-        color: "#2563EB",
+        border: "1px dashed #8DA8E3",
+        color: "#2563EB !important",
         padding: "0px 4px",
         minWidth: "unset",
         lineHeight: "18px",
+        fontWeight: "lighter !important",
         ...buttonStyle,
         opacity: showBtn ? 1 : 0
       },

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

@@ -73,7 +73,7 @@ function DragButton({
       modifiers: [{
         name: "offset",
         options: {
-          offset: [0, -14] // align the drag icon by -8
+          offset: [0, -12]
         }
       }, {
         name: "flip",
@@ -81,7 +81,7 @@ function DragButton({
       }],
 
       disablePortal: dragType !== "row",
-      className: className,
+      className: `${className}`,
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {
@@ -94,6 +94,10 @@ function DragButton({
               sx: dragType === "row" ? {
                 transform: "rotate(90deg)"
               } : {},
+              className: `${showTool ? "active" : ""}`,
+              style: {
+                lineHeight: 0
+              },
               children: /*#__PURE__*/_jsx(IconButton, {
                 onClick: () => {
                   onDragClick();

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

@@ -1,43 +1,69 @@
-const DragStyles = theme => ({
-  popper: {
-    zIndex: 1000,
-    "& .MuiPaper-root": {
-      borderRadius: "4px !important",
-      "&:hover": {
-        border: `1px solid ${theme?.palatte?.editor?.activeColor || "#2563EB"}`
+const DragStyles = theme => {
+  const {
+    containers,
+    editor
+  } = theme?.palette || {};
+  const {
+    buttonBorder,
+    background,
+    activeColor,
+    signaturePopUpTabButtonSelectedBg,
+    signaturePopUpTabButtonSelectedSvg
+  } = editor || {};
+  const onDragActive = {
+    outline: `1.5px solid ${activeColor || "#2563EB"}`,
+    background: `${signaturePopUpTabButtonSelectedBg} !important`,
+    "& svg ellipse": {
+      fill: `${signaturePopUpTabButtonSelectedSvg}`
+    }
+  };
+  return {
+    popper: {
+      zIndex: 1000,
+      "& .MuiPaper-root": {
+        borderRadius: "3px !important",
+        outline: `1.5px solid ${buttonBorder}`,
+        backgroundColor: `${background}`,
+        "&:hover": onDragActive,
+        "&.active": onDragActive
+      },
+      "& .MuiIconButton-root": {
+        padding: "4px 6px",
+        borderRadius: "none",
+        "& .dragIcon": {
+          width: "14px",
+          height: "10px"
+        },
+        "&:hover": {
+          background: "none"
+        }
       }
     },
-    "& .MuiIconButton-root": {
-      padding: "4px 8px",
-      "&:hover": {
-        background: "none"
+    toolPopper: {
+      zIndex: 4001,
+      "& .MuiPaper-root": {
+        borderRadius: "8px"
       }
-    }
-  },
-  toolPopper: {
-    zIndex: 4001,
-    "& .MuiPaper-root": {
-      borderRadius: "8px"
-    }
-  },
-  mobileToolDrawer: {
-    "& .customSelectContainer": {
-      border: "none !important",
-      padding: "0px !important"
-    }
-  },
-  drawerContainer: {
-    "&.MuiDrawer-root": {
-      zIndex: 1301
     },
-    "& .MuiDrawer-paper": {
-      borderTopLeftRadius: 8,
-      borderTopRightRadius: 8,
-      backgroundColor: theme.palette.containers.card
+    mobileToolDrawer: {
+      "& .customSelectContainer": {
+        border: "none !important",
+        padding: "0px !important"
+      }
     },
-    "& .customSelectContainer": {
-      border: "none"
+    drawerContainer: {
+      "&.MuiDrawer-root": {
+        zIndex: 1301
+      },
+      "& .MuiDrawer-paper": {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        backgroundColor: containers?.card
+      },
+      "& .customSelectContainer": {
+        border: "none"
+      }
     }
-  }
-});
+  };
+};
 export default DragStyles;

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

@@ -59,7 +59,7 @@ const TableStyles = theme => ({
     right: "-2px",
     top: 0,
     background: "transparent",
-    width: "4px",
+    width: "3px",
     borderRadius: "0px",
     zIndex: 1,
     "&:hover": {

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

@@ -8,7 +8,7 @@ import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
 import "./table.css";
 import { groupByBreakpoint } from "../../helper/theme";
-import { TableProvider } from "../../hooks/useTable";
+import useTable, { TableProvider } from "../../hooks/useTable";
 import AddRowCol from "./AddRowCol";
 import TableTool from "./TableTool";
 import { useDebouncedCallback } from "use-debounce";
@@ -30,7 +30,11 @@ const ToolBar = props => {
     handleAction,
     exandTools
   } = props;
-  return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
+  const {
+    getSelectedCells
+  } = useTable();
+  const viewTool = selected && !showTool && getSelectedCells()?.length <= 1;
+  return viewTool ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     contentEditable: false,
     className: `tableToolBar ${exandTools ? "active" : ""}`,
@@ -185,7 +189,8 @@ const Table = props => {
   return /*#__PURE__*/_jsxs(TableProvider, {
     editor: editor,
     otherProps: {
-      dragRowBtnCls
+      dragRowBtnCls,
+      tablePath: path
     },
     children: [/*#__PURE__*/_jsxs("div", {
       style: {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Editor, Element, Path, Transforms } from "slate";
 import { Box } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
@@ -190,11 +190,19 @@ const TableCell = props => {
     if (!contentEditable) {
       e.preventDefault();
     }
-    updateTableSelection({
-      startCellPath: path,
-      endCellPath: [],
-      isDragging: true
-    });
+    if (
+    // for shift selection
+    e.shiftKey && startCellPath?.length && startCellPath.toString() !== path.toString()) {
+      updateTableSelection({
+        endCellPath: path
+      });
+    } else {
+      updateTableSelection({
+        startCellPath: path,
+        endCellPath: [],
+        isDragging: true
+      });
+    }
   };
   const onMouseUp = e => {
     if (startCellPath?.length) {
@@ -211,6 +219,7 @@ const TableCell = props => {
     const isCellSelected = selectionPath?.length && Path.equals(selectionPath, path);
     if (!isCellSelected) {
       // focus the clicked cell
+      ReactEditor.focus(editor);
       Transforms.select(editor, {
         anchor: Editor.end(editor, path),
         focus: Editor.end(editor, path)
@@ -225,10 +234,15 @@ const TableCell = props => {
   const cellId = path.toString() + "table-cell";
   const cellRef = document.getElementById(cellId);
   const contentEditable = !readOnly && isCellEditable(startCellPath, path);
-  const commonTdProps = {
-    id: cellId,
-    contentEditable
-  };
+  const commonTdProps = useMemo(() => {
+    const props = {
+      id: cellId
+    };
+    if (!contentEditable) {
+      props.contentEditable = false;
+    }
+    return props;
+  }, [contentEditable, cellId]);
   const handleTouchMove = e => {
     const touch = e.touches[0]; // Get the current touch point
     const element = document.elementFromPoint(touch.clientX, touch.clientY);

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

@@ -0,0 +1,83 @@
+import { getNode } from "../../utils/helper";
+import { serializeToText } from "../../utils/serializeToText";
+export const getRectangleBounds = tableSelection => {
+  const {
+    startCellPath,
+    endCellPath
+  } = tableSelection;
+  if (!startCellPath?.length) return [];
+  const startPath = startCellPath.slice(0, -2);
+  const startCell = startCellPath.slice(-2);
+  const endCell = endCellPath.slice(-2);
+  const [startRow, startCol] = startCell;
+  const [endRow, endCol] = endCell?.length ? endCell : startCell;
+  const minRow = Math.min(startRow, endRow);
+  const maxRow = Math.max(startRow, endRow);
+  const minCol = Math.min(startCol, endCol);
+  const maxCol = Math.max(startCol, endCol);
+  const selectedPaths = [];
+  for (let row = minRow; row <= maxRow; row++) {
+    for (let col = minCol; col <= maxCol; col++) {
+      selectedPaths.push([...startPath, row, col]);
+    }
+  }
+  return selectedPaths;
+};
+export const createCopiedTableStructure = (editor, tableSelection, currentTableNode, tablePath, selectedText) => {
+  const selectedCells = getRectangleBounds(tableSelection);
+  const formattedCells = selectedCells.map(cell => cell.slice(-2));
+  const tableChild = [];
+  const rowIndexes = [...new Set(formattedCells.map(cell => cell[0]))];
+  rowIndexes.forEach((rowIndex, row_i) => {
+    const row = {
+      type: "table-row",
+      children: []
+    };
+
+    // Filter cells that belong to the current row
+    const cellsInRow = formattedCells.filter(cell => cell[0] === rowIndex);
+
+    // Iterate over the columns of the row to create table cells
+    const columnIndexes = [...new Set(cellsInRow.map(cell => cell[1]))];
+    columnIndexes.forEach((columnIndex, col_i) => {
+      const cellPath = [...tablePath, rowIndex, columnIndex];
+      const columnNode = getNode(editor, cellPath);
+      const cellNode = selectedText // we can select text in only one column
+      ? {
+        ...columnNode,
+        type: "table-cell",
+        children: [{
+          type: "paragraph",
+          children: [{
+            text: selectedText
+          }],
+          cellBgColor: "#FFFFFF"
+        }]
+      } : columnNode;
+      row.children.push(cellNode);
+    });
+    tableChild.push(row);
+  });
+  const table = {
+    ...currentTableNode,
+    children: tableChild,
+    rows: rowIndexes?.length,
+    columns: tableChild[0]?.children?.length // first row's children length
+  };
+
+  return table;
+};
+export const tableNodeToDom = (tableNode, selectedText) => {
+  const tableEle = document.createElement("table");
+  tableNode.children?.forEach(row => {
+    const rowEle = document.createElement("tr");
+    row?.children?.forEach(cell => {
+      const cellEle = document.createElement("td");
+      const cellText = selectedText || serializeToText(cell);
+      cellEle.innerHTML = cellText;
+      rowEle.appendChild(cellEle);
+    });
+    tableEle.appendChild(rowEle);
+  });
+  return tableEle;
+};

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

@@ -1,4 +1,4 @@
-import { Button, Fade, Grid, Paper, Popper } from "@mui/material";
+import { Fade, Grid, IconButton, Paper, Popper } from "@mui/material";
 import SelectTypography from "./SelectTypography";
 import SelectList from "./SelectList";
 import { toolbarGroups } from "../../toolbarGroups";
@@ -95,9 +95,9 @@ const MiniTextFormat = props => {
           active: isBlockActive(editor, link.format),
           editor: editor,
           customProps: customProps
-        }, link.id), /*#__PURE__*/_jsx(Button, {
+        }, link.id), /*#__PURE__*/_jsx(IconButton, {
           onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
-          className: "textSettingsIcon",
+          className: `textSettingsIcon ${open ? "btnActive" : ""}`,
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {
           id: id,