@flozy/editor 5.1.7 → 5.1.9

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

@@ -111,7 +111,7 @@ const Divider = props => {
       contentEditable: false,
       style: {
         zIndex: 1000,
-        left: "50%"
+        left: "0%"
       },
       children: /*#__PURE__*/_jsx(DividerToolbar, {
         selected: selected,

package/dist/Editor/Elements/Embed/Image.js

@@ -4,7 +4,7 @@ import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
-import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
+import { IconButton, Tooltip, Box, useTheme, Popper } from "@mui/material";
 import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
@@ -19,15 +19,15 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolBar = ({
   isEmpty,
   onSettings,
-  setOpenNav
+  setOpenNav,
+  topM
 }) => {
   return !isEmpty ? /*#__PURE__*/_jsxs("div", {
     className: "element-toolbar visible-on-hover",
     contentEditable: false,
     style: {
-      top: "0px",
-      right: "0px",
-      left: "auto",
+      top: "-5px",
+      left: topM ? "35px" : "0px",
       margin: "0px"
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -155,7 +155,10 @@ const Image = props => {
       }, {
         at: path
       });
-    }
+    },
+    MW: 32,
+    MH: 32,
+    MP: 2
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
@@ -277,7 +280,8 @@ const Image = props => {
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {
         isEmpty: isEmpty,
         onSettings: onSettings,
-        setOpenNav: setOpenNav
+        setOpenNav: setOpenNav,
+        topM: size.width < 100
       }), /*#__PURE__*/_jsx(ImageContent, {
         ...element,
         readOnly: readOnly,

package/dist/Editor/Elements/Grid/GridItem.js

@@ -52,6 +52,7 @@ const GridItemToolbar = props => {
     sx: classes.popTools,
     className: "gi-tool-pp",
     disablePortal: true,
+    contentEditable: false,
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Column Settings",
       arrow: true,
@@ -354,12 +355,14 @@ const GridItem = props => {
       onMouseDown: onMouseDown,
       height: "auto"
     }) : null, /*#__PURE__*/_jsxs(Dialog, {
+      sx: classes.dialog,
       open: Boolean(alert),
       onClose: handleClose,
       children: [/*#__PURE__*/_jsx(DialogContent, {
         children: alert
       }), /*#__PURE__*/_jsx(DialogActions, {
         children: /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
           onClick: handleClose,
           children: "Close"
         })

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

@@ -106,6 +106,12 @@ const GridStyles = (theme, appTheme) => ({
         }
       }
     }
+  },
+  dialog: {
+    "& .MuiPaper-root": {
+      background: appTheme?.palette?.editor?.background,
+      color: appTheme?.palette?.editor?.textColor
+    }
   }
 });
 export default GridStyles;

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

@@ -1,70 +1,88 @@
-const TableStyles = theme => ({
-  tableToolBar: {
-    position: "absolute",
-    top: "-24px",
-    left: 0,
-    transition: "all 0.3s",
-    "& button": {
-      backgroundColor: theme?.palette?.editor?.background,
-      border: "1px solid rgba(37, 99, 235, 0.32)",
-      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-      borderRadius: "50%",
-      padding: "4px",
-      margin: "2px",
-      "&:hover": {
-        backgroundColor: theme?.palette?.editor?.background
+const TableStyles = theme => {
+  const {
+    background,
+    closeButtonSvgStroke,
+    activeColor,
+    signaturePopUpTabButtonSelectedBg,
+    signaturePopUpTabButtonSelectedSvg
+  } = theme?.palette?.editor || {};
+  return {
+    tableToolBar: {
+      position: "absolute",
+      top: "-24px",
+      left: 0,
+      transition: "all 0.3s",
+      "& button": {
+        backgroundColor: background,
+        border: "1px solid rgba(37, 99, 235, 0.32)",
+        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+        borderRadius: "50%",
+        padding: "4px",
+        margin: "2px",
+        "&:hover": {
+          backgroundColor: background
+        },
+        "& svg": {
+          width: "18px",
+          height: "18px",
+          "& path": {
+            stroke: closeButtonSvgStroke
+          }
+        },
+        "&.selected": {
+          outline: `1.5px solid ${activeColor || "#2563EB"}`,
+          background: signaturePopUpTabButtonSelectedBg,
+          "& svg": {
+            "& path": {
+              stroke: signaturePopUpTabButtonSelectedSvg
+            }
+          }
+        }
       },
-      "& svg": {
-        width: "18px",
-        height: "18px",
-        "& path": {
-          stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      "&.active": {
+        width: "auto",
+        "& .toggle": {
+          rotate: "180deg"
+        }
+      },
+      "& .toolbtn": {
+        "& svg": {
+          stroke: "rgb(100, 116, 139)"
         }
       }
     },
-    "&.active": {
-      width: "auto",
-      "& .toggle": {
-        rotate: "180deg"
-      }
-    },
-    "& .toolbtn": {
-      "& svg": {
-        stroke: "rgb(100, 116, 139)"
+    table: {
+      "& td": {
+        padding: "8px 8px"
+      },
+      "& .selection-area-tc": {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        left: 0,
+        outline: "1px solid #2563EB",
+        pointerEvents: "none"
+      },
+      "& .hide-drag-btn-wrapper": {
+        "& .row-drag-btn": {
+          display: "none"
+        }
       }
-    }
-  },
-  table: {
-    "& td": {
-      padding: "8px 8px"
     },
-    "& .selection-area-tc": {
+    cellResizer: {
       position: "absolute",
-      width: "100%",
-      height: "100%",
+      cursor: "col-resize",
+      right: "-2px",
       top: 0,
-      left: 0,
-      outline: "1px solid #2563EB",
-      pointerEvents: "none"
-    },
-    "& .hide-drag-btn-wrapper": {
-      "& .row-drag-btn": {
-        display: "none"
+      background: "transparent",
+      width: "3px",
+      borderRadius: "0px",
+      zIndex: 1,
+      "&:hover": {
+        background: "#2563EB"
       }
     }
-  },
-  cellResizer: {
-    position: "absolute",
-    cursor: "col-resize",
-    right: "-2px",
-    top: 0,
-    background: "transparent",
-    width: "3px",
-    borderRadius: "0px",
-    zIndex: 1,
-    "&:hover": {
-      background: "#2563EB"
-    }
-  }
-});
+  };
+};
 export default TableStyles;

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

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Editor, Transforms } from "slate";
 import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, Fade } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, Fade, ClickAwayListener } from "@mui/material";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
 import "./table.css";
 import { groupByBreakpoint } from "../../helper/theme";
-import useTable, { TableProvider } from "../../hooks/useTable";
+import useTable, { TableProvider, getDefaultTableSelection } from "../../hooks/useTable";
 import AddRowCol from "./AddRowCol";
 import TableTool from "./TableTool";
 import { MoreIcon, SettingsIcon } from "../../assets/svg/TableIcons";
+import { getSelectedCls } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const hideRowDragBtns = (hide, dragRowBtnCls) => {
@@ -20,6 +21,40 @@ const hideRowDragBtns = (hide, dragRowBtnCls) => {
     rowDragBtns?.forEach(btn => btn.style.display = hide);
   }
 };
+const MoreTableSettings = props => {
+  const {
+    exandTools,
+    handleAction,
+    editorTheme,
+    setExpandTools
+  } = props;
+  const {
+    updateTableSelection
+  } = useTable();
+  return /*#__PURE__*/_jsx(Popper, {
+    open: Boolean(exandTools),
+    anchorEl: exandTools,
+    contentEditable: false,
+    sx: {
+      zIndex: 2000
+    },
+    placement: "bottom-start",
+    children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      onClickAway: () => setExpandTools(false),
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(TableTool, {
+          theme: editorTheme,
+          handleToolAction: (type, option) => {
+            handleAction(type, option);
+            if (type === "duplicate") {
+              updateTableSelection(getDefaultTableSelection());
+            }
+          }
+        })
+      })
+    })
+  });
+};
 const ToolBar = props => {
   const {
     selected,
@@ -27,7 +62,8 @@ const ToolBar = props => {
     classes,
     handleExpand,
     handleAction,
-    exandTools
+    exandTools,
+    openSetttings
   } = props;
   const {
     getSelectedCells
@@ -43,7 +79,7 @@ const ToolBar = props => {
       arrow: true,
       onClick: () => handleAction("settings"),
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: "toolbtn toggle",
+        className: getSelectedCls("toolbtn toggle", openSetttings),
         children: /*#__PURE__*/_jsx(SettingsIcon, {})
       })
     }), /*#__PURE__*/_jsx(Tooltip, {
@@ -51,7 +87,7 @@ const ToolBar = props => {
       arrow: true,
       onClick: handleExpand,
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: "toolbtn toggle",
+        className: getSelectedCls("toolbtn toggle", exandTools),
         children: /*#__PURE__*/_jsx(MoreIcon, {})
       })
     })]
@@ -100,6 +136,7 @@ const Table = props => {
         break;
       case "duplicate":
         table.duplicateTable();
+        setExpandTools(false);
         break;
       case "settings":
         if (tableProps) {
@@ -198,7 +235,8 @@ const Table = props => {
     otherProps: {
       dragRowBtnCls,
       tablePath: path,
-      openSetttings
+      openSetttings,
+      exandTools
     },
     children: [/*#__PURE__*/_jsxs("div", {
       style: {
@@ -249,28 +287,13 @@ const Table = props => {
       classes: classes,
       handleExpand: handleExpand,
       handleAction: handleAction,
-      exandTools: exandTools
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: Boolean(exandTools),
-      anchorEl: exandTools,
-      transition: true,
-      contentEditable: false,
-      sx: {
-        zIndex: 2000
-      },
-      placement: "bottom-start",
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        timeout: 350,
-        children: /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(TableTool, {
-            theme: editorTheme,
-            handleToolAction: handleAction
-          })
-        })
-      })
+      exandTools: exandTools,
+      openSetttings: openSetttings
+    }), /*#__PURE__*/_jsx(MoreTableSettings, {
+      exandTools: exandTools,
+      handleAction: handleAction,
+      editorTheme: editorTheme,
+      setExpandTools: setExpandTools
     }), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
       element: tableProps?.styleProps || {},
       onSave: onSave,

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

@@ -87,7 +87,10 @@ const TableCell = props => {
   const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
   const [size, onMouseDown, resizing, onLoad] = useTableResize({
     parentDOM,
-    size: element?.size
+    size: element?.size,
+    minMaxProps: {
+      minWidth: 30
+    }
   });
   const [tableSize, setTableSize] = useState({});
   const [openSettings, setOpenSettings] = useState(false);

package/dist/Editor/hooks/useTable.js

@@ -8,6 +8,19 @@ 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 selectFirstCell = (tablePath, editor, updateTableSelection) => {
+  const firstCell = [...tablePath, 0, 0];
+  const end = Editor.end(editor, firstCell);
+  Transforms.select(editor, {
+    anchor: end,
+    focus: end
+  });
+  updateTableSelection({
+    startCellPath: firstCell,
+    endCellPath: [],
+    isDragging: false
+  });
+};
 const handleDragEnd = (dragData, editor, resetAll) => {
   const {
     active,
@@ -65,7 +78,7 @@ export const TableProvider = ({
   otherProps = {}
 }) => {
   const {
-    openSetttings
+    tablePath
   } = otherProps;
   const [hoverPath, setHoverPath] = useState(null);
   const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
@@ -105,7 +118,8 @@ export const TableProvider = ({
       tableSelection,
       tableResizing,
       setTableResizing,
-      otherProps
+      otherProps,
+      resetAll
     };
   }, [hoverPath, editor?.selection, tableSelection, tableResizing]);
   useEffect(() => {
@@ -171,10 +185,8 @@ export const TableProvider = ({
     };
   }, [tableSelection, editor, tableSelection]);
   useEffect(() => {
-    if (!openSetttings) {
-      resetAll();
-    }
-  }, [openSetttings]);
+    selectFirstCell(tablePath, editor, updateTableSelection);
+  }, []);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
     children: /*#__PURE__*/_jsxs(DndContext, {

package/dist/Editor/plugins/withHTML.js

@@ -2,6 +2,7 @@ import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
+const LIST_TAGS = ["ol", "ul", "img", "table"];
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -120,12 +121,21 @@ const withHtml = editor => {
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
-    let eltype = currentEl?.type;
+    const eltype = currentEl?.type;
+    const isTitlePath = editor?.selection?.anchor?.path[0] === 0;
     if (slateHTML && !formatFragment[eltype]) {
       const [tableCellNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
       });
       const decoded = decodeAndParseBase64(slateHTML);
+      if (decoded && decoded[0] && decoded[0]?.type !== "paragraph" && isTitlePath) {
+        decoded.unshift({
+          type: "title",
+          children: [{
+            text: ""
+          }]
+        });
+      }
       if (tableCellNode) {
         const tableCellChild = getTableCellChild(decoded);
         if (tableCellChild?.length) {
@@ -170,10 +180,40 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => insertData(data), decoded);
+        handleInsert(editor, () => {
+          if (isTitlePath) {
+            Transforms.insertNodes(editor, [{
+              type: "title",
+              children: [{
+                text: ""
+              }]
+            }], {
+              at: [0]
+            });
+            insertData(data);
+          }
+        }, decoded);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
+      const rootElement = parsed.body || parsed.documentElement;
+      const isList = LIST_TAGS.includes(rootElement.firstChild.tagName.toLowerCase());
+
+      // if selection is in title add the empty paragraph
+      if (isTitlePath && isList) {
+        // Check if the first child exists and is not a paragraph
+        if (!rootElement.firstChild || rootElement.firstChild.tagName.toLowerCase() !== "p") {
+          // Create a new empty paragraph element
+          const emptyParagraph = parsed.createElement("p");
+
+          // Insert the empty paragraph at the beginning
+          if (rootElement.firstChild) {
+            rootElement.insertBefore(emptyParagraph, rootElement.firstChild);
+          } else {
+            rootElement.appendChild(emptyParagraph);
+          }
+        }
+      }
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
         if (editor.isChatEditor) {

package/dist/Editor/utils/customHooks/useResize.js

@@ -4,7 +4,10 @@ const useResize = ({
   parentDOM,
   size: allSize,
   isGrid,
-  onChange
+  onChange,
+  MH,
+  MW,
+  MP
 }) => {
   const device = getDevice(window.innerWidth);
   const defaultSize = getBreakPointsValue(allSize);
@@ -52,9 +55,9 @@ const useResize = ({
       const cWP = calcWidth / width * 100;
       const calcHeight = (parseInt(currentSize.height) || height) + e.movementY;
       const calc = {
-        width: Math.max(calcWidth, 140),
-        height: Math.max(calcHeight, 50),
-        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, 15)
+        width: Math.max(calcWidth, MW || 140),
+        height: Math.max(calcHeight, MH || 50),
+        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, MP || 15)
       };
       latest = calc;
       return calc;

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -2,7 +2,8 @@ import { useState } from "react";
 const useTableResize = ({
   parentDOM,
   size: defaultSize,
-  onDone
+  onDone,
+  minMaxProps = {}
 }) => {
   const {
     width
@@ -38,10 +39,13 @@ const useTableResize = ({
     setIsDone(1);
   };
   const onMouseMove = e => {
+    const {
+      minWidth
+    } = minMaxProps || {};
     setSize(currentSize => {
       const calcWidth = currentSize?.width + e.movementX;
       return {
-        width: calcWidth,
+        width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
         height: currentSize.height + e.movementY,
         widthInPercent: calcWidth / width * 100
       };

package/dist/Editor/utils/helper.js

@@ -676,4 +676,7 @@ export function getInitialValue(value = [], readOnly) {
     return newValue;
   }
   return value;
+}
+export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
+  return `${defaultCls} ${selected ? selectedClsName : ""}`;
 }

package/package.json

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