@flozy/editor 5.3.9 → 5.4.0

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

@@ -0,0 +1,71 @@
+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) => {
+  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);
+      row.children.push(columnNode);
+    });
+    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 => {
+  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 = serializeToText(cell);
+      cellEle.innerHTML = cellText;
+      rowEle.appendChild(cellEle);
+    });
+    tableEle.appendChild(rowEle);
+  });
+  return tableEle;
+};

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

@@ -77,6 +77,7 @@ const TopBanner = props => {
     theme
   } = useEditorContext();
   const classes = TopBannerStyles(theme);
+  const renderHeaderAboveBanner = customProps?.metadata?.renderHeader ? customProps.metadata.renderHeader() : null;
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     ...attributes,
@@ -87,7 +88,7 @@ const TopBanner = props => {
     },
     contentEditable: false,
     sx: classes.root,
-    children: [/*#__PURE__*/_jsx("img", {
+    children: [renderHeaderAboveBanner, /*#__PURE__*/_jsx("img", {
       src: url,
       alt: "Top Banner",
       className: "top-banner-wrpr-ele",

package/dist/Editor/MiniEditor.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, useEffect } from "react";
-import { createEditor } from "slate";
+import { createEditor, Range } from "slate";
 import { Slate, Editable } from "slate-react";
 import { useDebounce } from "use-debounce";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
@@ -115,6 +115,20 @@ const MiniEditor = props => {
         event,
         editor
       });
+    } else if (event.key === "Backspace") {
+      const {
+        selection
+      } = editor;
+      event.preventDefault();
+      if (selection) {
+        if (!Range.isCollapsed(selection)) {
+          editor.deleteFragment();
+        } else {
+          editor.deleteBackward({
+            unit: "character"
+          });
+        }
+      }
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const renderElement = useCallback(props => {

package/dist/Editor/Styles/EditorStyles.js

@@ -129,7 +129,8 @@ const editorStyles = ({
       }
     },
     "& .accordion-summary-collapse-btn": {
-      padding: "4px"
+      padding: "4px",
+      width: '5px'
     },
     "& .workflow-icon-btn": {
       pointerEvents: "none",
@@ -238,6 +239,7 @@ const editorStyles = ({
       }
     },
     "& .section-tw": {
+      background: 'transparent !important',
       "& button": {
         padding: "2px",
         borderRadius: "0px",
@@ -286,14 +288,21 @@ const editorStyles = ({
       }
     },
     "& ::selection": {
-      color: "inherit",
-      background: "#EAEBFE"
+      background: 'rgba(35, 131, 226, 0.35)!important',
+      color: 'inherit'
+    },
+    "&.readOnlyContainer": {
+      "& .max-content": {
+        paddingBottom: "0px !important"
+      }
     }
   },
   fullScreenWrapper: {
+    "& .editor-wrapper": {
+      paddingTop: '20px'
+    },
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
-      paddingTop: "20px",
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

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

@@ -2,6 +2,8 @@ import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
 import { toggleBlock, isBlockActive, isMarkActive, toggleMark } from "../../utils/SlateUtilityFunctions.js";
+import usePopupStyle from "../PopupTool/PopupToolStyle";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MARK_TYPES = ["doublequote"];
 const BlockButton = props => {
@@ -12,6 +14,10 @@ const BlockButton = props => {
   } = props;
   const isMark = MARK_TYPES?.indexOf(format) >= 0;
   const isActive = isMark ? isMarkActive(editor, format) : isBlockActive(editor, format);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = usePopupStyle(theme);
   return /*#__PURE__*/_jsx(Button, {
     active: isActive,
     format: format,
@@ -24,6 +30,10 @@ const BlockButton = props => {
       }
     },
     title: title,
+    sx: classes.textAlignButtons,
+    style: {
+      color: "#64748B"
+    },
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
-import { fontFamilyMap } from "../../utils/font";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   classes,
@@ -23,23 +23,18 @@ const Dropdown = ({
     value: value,
     className: "editor-dd",
     onChange: e => changeMarkData(e, format),
-    style: {
-      fontFamily: fontFamilyMap[value],
-      width: width || "100%",
-      height: "36px",
-      borderRadius: "10px",
-      fontSize: "12px"
-    },
     MenuProps: {
       PaperProps: {
         sx: classes?.textOptions
       }
     },
-    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
-      style: {
-        fontFamily: item.text
-      },
+    sx: classes.textFormatSelect,
+    IconComponent: KeyboardArrowDownRoundedIcon,
+    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem
+    // style={{ fontFamily: item.text }}
+    , {
       value: item.value,
+      sx: classes.textFormatSelectOptions,
       children: item.text
     }, index))
   });

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

@@ -1,6 +1,9 @@
 import React from "react";
 import { Autocomplete, TextField } from "@mui/material";
 import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
+import usePopupStyle from "../PopupTool/PopupToolStyle.js";
+import { useEditorContext } from "../../hooks/useMouseMove.js";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const FontFamilyAutocomplete = ({
   editor,
@@ -27,17 +30,21 @@ const FontFamilyAutocomplete = ({
       });
     }
   };
+  const {
+    theme
+  } = useEditorContext();
+  const classes = usePopupStyle(theme);
   return /*#__PURE__*/_jsx(Autocomplete, {
     size: "small",
     style: {
       fontFamily: `${value || ""}`,
-      width: width || "100%",
-      height: "36px",
-      borderRadius: "10px",
-      fontSize: "14px"
+      width: width || "100%"
     },
     value: value || options?.[0],
     className: "editor-dd",
+    sx: {
+      ...classes.autoCompleteaFontFamily
+    },
     onChange: (e, newValue) => changeMarkData(e, newValue, format),
     getOptionLabel: option => {
       return option;
@@ -53,6 +60,14 @@ const FontFamilyAutocomplete = ({
         children: option
       });
     },
+    slotProps: {
+      popper: {
+        sx: {
+          ...classes.fontFamilyListOptions
+        }
+      }
+    },
+    popupIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     renderInput: params => /*#__PURE__*/_jsx(TextField, {
       sx: {
         "& .MuiInputBase-root.MuiOutlinedInput-root": {
@@ -61,6 +76,13 @@ const FontFamilyAutocomplete = ({
       },
       ...params
     })
+    // componentsProps={{
+    //     clearIndicator: {
+    //       style: { display: 'none' },
+    //     },
+    //   }}
+    ,
+    disableClearable: true
   });
 };
 export default FontFamilyAutocomplete;

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/FormatTools/TextSize.js

@@ -2,10 +2,12 @@ import React, { useEffect, useRef, useState } from "react";
 import { TextField, IconButton } from "@mui/material";
 import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
 import { headingMap, sizeMap } from "../../utils/font.js";
-import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
+import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded";
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import { getBreakPointsValue } from "../../helper/theme.js";
 import useWindowResize from "../../hooks/useWindowResize.js";
 import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
+import { TextSizeDownArrow, TextSizeUpArrow } from "../../common/iconListV2.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -93,8 +95,6 @@ const TextSize = ({
       inputProps: {
         style: {
           width: fullWidth ? "100%" : "30px",
-          // textAlign: "center",
-          height: "19px",
           fontSize: "12px"
         }
       },
@@ -108,11 +108,11 @@ const TextSize = ({
           children: [/*#__PURE__*/_jsx(IconButton, {
             onClick: onIncreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextPlusIcon, {})
+            children: /*#__PURE__*/_jsx(TextSizeUpArrow, {})
           }), /*#__PURE__*/_jsx(IconButton, {
             onClick: onDecreaseSize,
             size: "small",
-            children: /*#__PURE__*/_jsx(TextMinusIcon, {})
+            children: /*#__PURE__*/_jsx(TextSizeDownArrow, {})
           })]
         })
       }

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -19,9 +19,9 @@ const POPUP_TYPES = {
   addTemplate: AddTemplates
 };
 const POPUP_OFFSETS = {
-  textFormat: [80, 5],
-  addElement: [60, 5],
-  addTemplate: [20, 5]
+  textFormat: [75, 5],
+  addElement: [40, 5],
+  addTemplate: [10, 5]
 };
 const FULLSCREEN_POPUP = {
   addTemplate: true
@@ -180,9 +180,6 @@ const MiniToolbar = props => {
       }],
       children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
         className: "papper-wrpr",
-        style: {
-          borderRadius: "10px"
-        },
         children: [/*#__PURE__*/_jsx(PopperHeader, {
           title: POPUP_TITLE[popper],
           classes: popupStyles,

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -39,7 +39,10 @@ const miniToolbarStyles = theme => ({
         },
         "&.active": {
           "& svg": {
-            stroke: theme?.palette?.editor?.activeColor
+            stroke: theme?.palette?.editor?.activeColor,
+            "& path": {
+              stroke: theme?.palette?.editor?.activeColor
+            }
           }
         },
         "&.activeUndo": {

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

@@ -1,8 +1,12 @@
 import { Box, IconButton } from "@mui/material";
 import Icon from "../../../common/Icon";
 import { useEditorContext } from "../../../hooks/useMouseMove";
+import { getSelectedText } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
-function InfinityAITool() {
+function InfinityAITool(props) {
+  const {
+    editor
+  } = props;
   const {
     setOpenAI
   } = useEditorContext();
@@ -10,8 +14,8 @@ function InfinityAITool() {
     component: "div",
     children: /*#__PURE__*/_jsx(IconButton, {
       onClick: () => {
-        const text = window.getSelection().toString().trim();
-        if (text) {
+        const text = getSelectedText(editor);
+        if (text && text.trim()) {
           setOpenAI("fromToolBar");
         }
       },

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";
@@ -50,7 +50,9 @@ const MiniTextFormat = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs("div", {
         className: "toolWrapper",
-        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
+        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {
+          editor: editor
+        }), /*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
           closeMainPopup: closeMainPopup
@@ -95,9 +97,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,

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

@@ -1,9 +1,10 @@
 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 => {
@@ -16,7 +17,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 => {
@@ -39,18 +46,14 @@ const PopperHeader = props => {
     padding: 2,
     className: "headerContainer",
     style: {
-      paddingTop: "2px"
+      paddingTop: "5px"
     },
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      style: {
-        display: "flex",
-        borderBottom: "1px solid #DCE4EC"
-      },
       justifyContent: "space-between",
       alignItems: "center",
-      className: "textSettingHeader",
+      sx: classes.textSettingHeader,
       children: [/*#__PURE__*/_jsx(Typography, {
         color: "primary",
         sx: {
@@ -64,13 +67,14 @@ const PopperHeader = props => {
         justifyContent: "end",
         children: [needFullscreen ? /*#__PURE__*/_jsxs(Grid, {
           sx: {
-            position: 'relative'
+            position: "relative"
           },
+          className: "inputField",
           children: [/*#__PURE__*/_jsx(IconButton, {
-            className: openSearch ? 'searchContainer' : '',
+            className: openSearch ? "searchContainer" : "",
             onClick: handleSearchButton,
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: openSearch ? 'closeIcon' : 'SearchIcon'
+              icon: openSearch ? "closeIcon" : "SearchIcon"
             })
           }), openSearch && /*#__PURE__*/_jsx(SearchBox, {
             classes: classes,
@@ -83,11 +87,11 @@ const PopperHeader = props => {
           children: /*#__PURE__*/_jsx(IconButton, {
             style: {
               marginRight: "8px",
-              marginLeft: "8px"
+              marginLeft: "4px"
             },
-            className: "close-popupbtn",
+            className: "close-popupbtn toogleFullScreenBtn",
             onClick: toggleFullscreen,
-            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(OpenInFullIcon, {})
+            children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(ToggleFullScreenIcon, {})
           })
         }) : null, /*#__PURE__*/_jsx(Tooltip, {
           title: "Close",