@flozy/editor 1.3.0 → 1.3.2

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
@@ -18,15 +18,18 @@ const NewLineButton = () => {
     });
     ReactEditor.focus(editor);
   };
-  return /*#__PURE__*/_jsx(IconButton, {
+  return /*#__PURE__*/_jsx(Tooltip, {
     title: "New Line",
-    onClick: onAddNewLine,
-    children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
-      sx: {
-        fill: "#64748B",
-        width: "18px",
-        height: "18px"
-      }
+    arrow: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      onClick: onAddNewLine,
+      children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+        sx: {
+          fill: "#64748B",
+          width: "18px",
+          height: "18px"
+        }
+      })
     })
   });
 };

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Transforms, Editor, Element } from "slate";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
 import { PageSettings } from "../../common/iconslist";
@@ -79,10 +79,13 @@ const PageSettingsButton = props => {
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Page Settings",
-      onClick: onSettings,
-      children: /*#__PURE__*/_jsx(PageSettings, {})
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(PageSettings, {})
+      })
     }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
       element: openSetttings?.element || {},
       onSave: onSave,

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { insertSignature } from "../../utils/signature";
 import { SignatureIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,10 +10,13 @@ const SignatureButton = props => {
   const handleInsertSignature = () => {
     insertSignature(editor);
   };
-  return /*#__PURE__*/_jsx(IconButton, {
-    onClick: handleInsertSignature,
+  return /*#__PURE__*/_jsx(Tooltip, {
     title: "Signature",
-    children: /*#__PURE__*/_jsx(SignatureIcon, {})
+    arrow: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      onClick: handleInsertSignature,
+      children: /*#__PURE__*/_jsx(SignatureIcon, {})
+    })
   });
 };
 export default SignatureButton;

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

@@ -70,8 +70,6 @@ const SignaturePopup = props => {
       ...signedData,
       ...data
     });
-    handleSave();
-    setOpen(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
@@ -281,7 +279,7 @@ const SignaturePopup = props => {
                   })
                 })
               })]
-            }) : null, tab !== 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+            }) : null, /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
                 className: "secondaryBtn",
@@ -291,7 +289,7 @@ const SignaturePopup = props => {
                 className: "primaryBtn",
                 children: "Save"
               })]
-            }) : null]
+            })]
           })]
         })
       })

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

@@ -75,6 +75,9 @@ const Table = props => {
     children,
     customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     bgColor,
@@ -170,7 +173,7 @@ const Table = props => {
         ...attributes,
         children: children
       })
-    }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
+    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
       element: tableProps?.styleProps || {},
       onSave: onSave,
       onClose: onClose,

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

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Editor, Element } from "slate";
+import { IconButton } from "@mui/material";
+import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
@@ -10,17 +12,19 @@ const Resizer = ({
   onMouseDown
 }) => {
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("button", {
+    children: /*#__PURE__*/_jsx(IconButton, {
+      className: "cell-resizer",
       contentEditable: false,
       onPointerDown: onMouseDown,
-      className: "cell-resizer",
       style: {
-        width: "10px",
-        height: "100%",
         position: "absolute",
-        right: "0px",
-        top: 0
-      }
+        right: "-8px",
+        top: 0,
+        background: "none",
+        width: "15px",
+        height: "100%"
+      },
+      children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
     })
   });
 };
@@ -28,8 +32,12 @@ const TableCell = props => {
   const {
     element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const {
     bgColor,
     borderColor
@@ -85,7 +93,7 @@ const TableCell = props => {
       border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`,
       ...(sizeProps || {})
     },
-    children: [children, selected && isHeader ? /*#__PURE__*/_jsx(Resizer, {
+    children: [children, selected && isHeader && !readOnly ? /*#__PURE__*/_jsx(Resizer, {
       onMouseDown: onMouseDown
     }) : null]
   });

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

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
+import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography, Tooltip } from "@mui/material";
 import Icon from "../../common/Icon";
 import { Transforms } from "slate";
 import { TableUtil } from "../../utils/table.js";
@@ -41,14 +41,17 @@ const TableSelector = ({
   return /*#__PURE__*/_jsxs("div", {
     ref: tableOptionsRef,
     className: "popup-wrapper1 ",
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      style: {
-        border: showOptions ? "1px solid lightgray" : "none"
-      },
-      title: "table",
-      onClick: handleButtonClick,
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "table"
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Table",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        style: {
+          border: showOptions ? "1px solid lightgray" : "none"
+        },
+        onClick: handleButtonClick,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "table"
+        })
       })
     }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
       open: showOptions,

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

@@ -5,7 +5,8 @@ import { toggleBlock, isBlockActive } from "../../utils/SlateUtilityFunctions.js
 import { jsx as _jsx } from "react/jsx-runtime";
 const BlockButton = ({
   editor,
-  format
+  format,
+  title
 }) => {
   return /*#__PURE__*/_jsx(Button, {
     active: isBlockActive(editor, format),
@@ -14,6 +15,7 @@ const BlockButton = ({
       e.preventDefault();
       toggleBlock(editor, format);
     },
+    title: title,
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

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

@@ -5,7 +5,8 @@ import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkButton = ({
   editor,
-  format
+  format,
+  title
 }) => {
   return /*#__PURE__*/_jsx(Button, {
     active: isMarkActive(editor, format),
@@ -14,6 +15,7 @@ const MarkButton = ({
       e.preventDefault();
       toggleMark(editor, format);
     },
+    title: title,
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

package/dist/Editor/Toolbar/Toolbar.js

@@ -19,8 +19,6 @@ import SignatureButton from "../Elements/Signature/SignatureButton";
 import ButtonToolIcon from "../Elements/Button/ButtonToolIcon";
 import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
 import CarouselButton from "../Elements/Carousel/CarouselButton";
-import ChipTextButton from "../Elements/ChipText/ChipTextButton";
-import DrawerMenuButton from "../Elements/DrawerMenu/DrawerMenuButton";
 import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
 import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -81,7 +79,8 @@ const Toolbar = props => {
             return /*#__PURE__*/_jsx(ColorPicker, {
               activeMark: activeMark,
               format: element.format,
-              editor: editor
+              editor: editor,
+              title: element.title
             }, element.id);
           case "table":
             return /*#__PURE__*/_jsx(TableSelector, {
@@ -127,16 +126,22 @@ const Toolbar = props => {
             return /*#__PURE__*/_jsx(CarouselButton, {
               editor: editor
             }, element.id);
-          case "chip-text":
-            return /*#__PURE__*/_jsx(ChipTextButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
-          case "drawer":
-            return /*#__PURE__*/_jsx(DrawerMenuButton, {
-              editor: editor,
-              customProps: customProps
-            }, element.id);
+          // case "chip-text":
+          //   return (
+          //     <ChipTextButton
+          //       key={element.id}
+          //       editor={editor}
+          //       customProps={customProps}
+          //     />
+          //   );
+          // case "drawer":
+          //   return (
+          //     <DrawerMenuButton
+          //       key={element.id}
+          //       editor={editor}
+          //       customProps={customProps}
+          //     />
+          //   );
           case "app-header":
             return /*#__PURE__*/_jsx(AppHeaderButton, {
               editor: editor,

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -24,71 +24,88 @@ const toolbarGroups = [[{
 }], [{
   id: 3,
   format: "bold",
-  type: "mark"
+  type: "mark",
+  title: "Bold"
 }, {
   id: 4,
   format: "italic",
-  type: "mark"
+  type: "mark",
+  title: "Italic"
 }, {
   id: 5,
   format: "underline",
-  type: "mark"
+  type: "mark",
+  title: "Underline"
 }, {
   id: 6,
   format: "strikethrough",
-  type: "mark"
+  type: "mark",
+  title: "Strike"
 }], [{
   id: 7,
   format: "color",
-  type: "color-picker"
+  type: "color-picker",
+  title: "Font Color"
 }, {
   id: 8,
   format: "bgColor",
-  type: "color-picker"
+  type: "color-picker",
+  title: "Background Color"
 }], [{
   id: 9,
   format: "superscript",
-  type: "mark"
+  type: "mark",
+  title: "Superscript"
 }, {
   id: 10,
   format: "subscript",
-  type: "mark"
+  type: "mark",
+  title: "Subcript"
 }], [{
   id: 11,
   format: "headingOne",
-  type: "block"
+  type: "block",
+  title: "H1"
 }, {
   id: 12,
   format: "headingTwo",
-  type: "block"
+  type: "block",
+  title: "H2"
 }, {
   id: 13,
   format: "headingThree",
-  type: "block"
+  type: "block",
+  title: "H3"
 }, {
   id: 14,
   format: "blockquote",
-  type: "block"
+  type: "block",
+  title: "Block Quote"
 }], [{
   id: 15,
   format: "orderedList",
-  type: "block"
+  type: "block",
+  title: "Ordered List"
 }, {
   id: 16,
   format: "unorderedList",
-  type: "block"
+  type: "block",
+  title: "Un-ordered List"
 }], [{
   id: 17,
   format: "alignLeft",
-  type: "block"
+  type: "block",
+  title: "Left Align"
 }, {
   id: 18,
   format: "alignCenter",
-  type: "block"
+  type: "block",
+  title: "Center Align"
 }, {
   id: 19,
   format: "alignRight",
-  type: "block"
+  type: "block",
+  title: "Right Align"
 }], [{
   id: 20,
   format: "link",

package/dist/Editor/common/Button.js

@@ -1,18 +1,22 @@
 import React from "react";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Button = props => {
   const {
     children,
     format,
     active,
+    title,
     ...rest
   } = props;
-  return /*#__PURE__*/_jsx(IconButton, {
-    className: active ? "btnActive" : "",
-    title: format,
-    ...rest,
-    children: children
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
+    arrow: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      className: active ? "btnActive" : "",
+      ...rest,
+      children: children
+    })
   });
 };
 export default Button;

package/dist/Editor/common/ColorPickerButton.js

@@ -28,7 +28,7 @@ const ColorPickerButton = props => {
         background: value,
         height: "26px",
         minWidth: "26px",
-        borderRadius: '26px',
+        borderRadius: "26px",
         border: "1px solid #64748B"
       },
       onClick: handleColorPicker
@@ -36,6 +36,11 @@ const ColorPickerButton = props => {
       open: open,
       anchorEl: anchorEl,
       onClose: handleClose,
+      sx: {
+        "& .MuiPaper-root": {
+          overflow: "hidden"
+        }
+      },
       children: /*#__PURE__*/_jsx(Grid, {
         container: true,
         padding: 2,

package/dist/Editor/common/Icon.js

@@ -2,7 +2,7 @@ import React from "react";
 import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward } from "react-icons/md";
 import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
-import { AiFillEdit, AiOutlineTable, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
+import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { BoldIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Grid } from "@mui/material";
-import LockIcon from '@mui/icons-material/Lock';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
+import LockIcon from "@mui/icons-material/Lock";
+import LockOpenIcon from "@mui/icons-material/LockOpen";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -47,7 +47,7 @@ const BannerSpacing = props => {
       sx: {
         pb: 2,
         display: "flex",
-        justifyContent: 'center'
+        justifyContent: "center"
       },
       children: /*#__PURE__*/_jsxs("div", {
         style: {
@@ -76,10 +76,10 @@ const BannerSpacing = props => {
             width: "35px",
             height: "16px",
             margin: "auto",
-            textAlign: 'center',
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px'
+            textAlign: "center",
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -94,10 +94,10 @@ const BannerSpacing = props => {
             width: "35px",
             height: "16px",
             margin: "auto",
-            textAlign: 'center',
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px'
+            textAlign: "center",
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -112,10 +112,10 @@ const BannerSpacing = props => {
             width: "35px",
             height: "16px",
             margin: "auto",
-            textAlign: 'center',
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px'
+            textAlign: "center",
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -130,10 +130,10 @@ const BannerSpacing = props => {
             width: "35px",
             height: "16px",
             margin: "auto",
-            textAlign: 'center',
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px'
+            textAlign: "center",
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("button", {
@@ -146,7 +146,7 @@ const BannerSpacing = props => {
             background: "none"
           },
           onClick: onLockSpacing,
-          children: lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
+          children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
       })
     })

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Grid } from "@mui/material";
-import LockIcon from '@mui/icons-material/Lock';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
+import LockIcon from "@mui/icons-material/Lock";
+import LockOpenIcon from "@mui/icons-material/LockOpen";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -71,10 +71,10 @@ const BorderRadius = props => {
             width: "20px",
             height: "16px",
             margin: "auto",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -87,10 +87,10 @@ const BorderRadius = props => {
             right: "-25px",
             width: "20px",
             height: "16px",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -103,10 +103,10 @@ const BorderRadius = props => {
             bottom: "-28px",
             width: "20px",
             height: "16px",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -119,10 +119,10 @@ const BorderRadius = props => {
             right: "-25px",
             width: "20px",
             height: "16px",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("button", {
@@ -135,7 +135,7 @@ const BorderRadius = props => {
             background: "none"
           },
           onClick: onLockRadius,
-          children: lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
+          children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
       })
     })