@flozy/editor 4.9.4 → 4.9.6

package/dist/Editor/ChatEditor.js

@@ -1,9 +1,8 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
 import { createEditor, Transforms, Editor } from 'slate';
-import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
-import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
+import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
 import { commands, mentionsEvent } from "./utils/events";
 import { insertEmoji } from "./utils/emoji";
@@ -15,6 +14,7 @@ import Shorthands from "./common/Shorthands";
 import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
 import { EditorProvider } from "./hooks/useMouseMove";
 import decorators from "./utils/Decorators";
+import { useDebouncedCallback } from "use-debounce";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
@@ -42,8 +42,18 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
-  const [loadedValue] = useState(value);
-  const [deboundedValue] = useDebounce(value, 500);
+  const debouncedValue = useRef(value);
+  const debounced = useDebouncedCallback(
+  // function
+  value => {
+    const {
+      value: strVal,
+      ...restVal
+    } = getOnSaveData(value);
+    onSave(strVal, restVal);
+  },
+  // delay in ms
+  500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
       needLayout,
@@ -63,7 +73,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       const {
         value: strVal,
         ...restVal
-      } = getOnSaveData(value);
+      } = getOnSaveData(debouncedValue?.current);
       onsubmit(false, {
         strVal,
         restVal
@@ -99,7 +109,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const newValue = draftToSlate({
           data: content
         });
-        setValue(newValue);
+        debounced(newValue);
+
         // setTimeout(() => {
         if (editor.children.length === 0) {
           Transforms.insertNodes(editor, newValue);
@@ -112,27 +123,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }));
-
-  // useEffect(() => {
-  //     setIsExternalUpdate(true);
-  //     setValue(draftToSlate({ data: content }));
-  // }, [content]);
-
-  useEffect(() => {
-    if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(deboundedValue);
-      onSave(strVal, restVal);
-    }
-  }, [deboundedValue]);
   const getOnSaveData = val => {
     const text = serializeToText(val);
+    const mentions = serializeMentions(val);
     const title = val?.find(f => f.type === "title");
     return {
       value: JSON.stringify(val),
       text: text,
+      mentions: mentions,
       title: serializeToText(title?.children) || "Untitled"
     };
   };
@@ -180,15 +178,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    const value_txt = serializeToText(value);
-    if (!value_txt) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(newValue);
-      onSave(strVal, restVal);
-    }
-    setValue(newValue);
+    debounced(newValue);
+    debouncedValue.current = newValue;
     if (!isInteracted) {
       setIsInteracted(true);
     }
@@ -228,7 +219,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
       if (isEmpty) {
         event.preventDefault();
         return;
@@ -237,7 +228,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const {
           value: strVal,
           ...restVal
-        } = getOnSaveData(value);
+        } = getOnSaveData(debouncedValue?.current);
         onsubmit(false, {
           strVal,
           restVal
@@ -251,7 +242,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     const {
       value: strVal,
       ...restVal
-    } = getOnSaveData(value);
+    } = getOnSaveData(debouncedValue?.current);
     onBlur({
       strVal,
       restVal
@@ -272,7 +263,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editor: editor,
     children: /*#__PURE__*/_jsxs(Slate, {
       editor: editor,
-      initialValue: value,
+      initialValue: debouncedValue?.current,
       onChange: handleEditorChange,
       children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
         classes: classes,

package/dist/Editor/Editor.css

@@ -399,7 +399,7 @@ blockquote {
   align-items: center;
   border-width: 0px, 0px, 0px, 0px;
   border-style: solid;
-  border-color: #2563EB;
+  border-color: #2563EB66;
   justify-content: center;
   flex-direction: column;
   width: 100%;
@@ -492,9 +492,9 @@ blockquote {
 
 .MuiButton-root.primaryBtn.disabled,
 .MuiButton-root.secondaryBtn.disabled {
-  background: #eee !important;
-  color: #ccc !important;
-  border: 1px solid #ccc !important;
+  background: #eee;
+  color: #ccc;
+  border: 1px solid #ccc;
 }
 
 .MuiButton-root.secondaryBtn {
@@ -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 {
@@ -1221,7 +1235,10 @@ blockquote {
 @media (max-width: 899px) {
   .MuiPopover-root {
     z-index: 1302 !important;
-}
+  }
+  canvas {
+    max-width: 100% !important;
+  }
 }
 
 .settingsHeader {
@@ -1242,4 +1259,5 @@ blockquote {
 
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
-}
+}
+

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

@@ -71,7 +71,6 @@ function AIInput({
   }, [openAI]);
   const isSendBtnDisabled = !inputValue || loading;
   const props = getProps(openAI, generatedText) || {};
-  const fromToolBar = openAI === "fromToolBar";
   const handleSendBtnClick = () => {
     if (isSendBtnDisabled) {
       return;

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/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/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",
@@ -515,7 +516,7 @@ const SignaturePopup = props => {
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn actionBtn ${isEmpty ? "disabled" : ""}`,
+                className: `primaryBtn actionBtn ${isEmpty ? "disabled disabledSaveBtn" : ""}`,
                 disabled: isEmpty,
                 children: "Save"
               })]

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;
+};