@flozy/editor 5.1.5 → 5.1.7

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/Styles/EditorStyles.js

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

package/dist/Editor/Toolbar/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,19 @@ 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 +58,7 @@ const FontFamilyAutocomplete = ({
         children: option
       });
     },
+    popupIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     renderInput: params => /*#__PURE__*/_jsx(TextField, {
       sx: {
         "& .MuiInputBase-root.MuiOutlinedInput-root": {

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

@@ -93,8 +93,6 @@ const TextSize = ({
       inputProps: {
         style: {
           width: fullWidth ? "100%" : "30px",
-          // textAlign: "center",
-          height: "19px",
           fontSize: "12px"
         }
       },

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/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,

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",