@flozy/editor 1.2.0 → 1.2.1

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

@@ -1,14 +1,15 @@
 import React, { useState } from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import BrushIcon from "@mui/icons-material/Brush";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
+import './Signature.css';
+import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../../common/EditorIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const BrushSizes = [1, 3, 5];
+const BrushSizes = [1, 5, 7];
 const SignaturePopup = props => {
   const {
     onSave,
@@ -77,166 +78,218 @@ const SignaturePopup = props => {
         onClick: handleOpen,
         children: "Sign Here"
       })
-    }), /*#__PURE__*/_jsxs(Dialog, {
+    }), /*#__PURE__*/_jsx(Dialog, {
       open: open,
       onClose: handleClose,
       fullWidth: true,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: /*#__PURE__*/_jsxs("div", {
-          style: {
-            display: "flex",
-            justifyContent: "space-between"
+      children: /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          item: true,
+          xs: 12,
+          sx: {
+            p: 3
           },
-          children: [/*#__PURE__*/_jsx("div", {
-            style: {
-              display: "flex"
+          children: [/*#__PURE__*/_jsx(DialogTitle, {
+            sx: {
+              p: 0,
+              pb: 2
             },
-            children: "Signature"
-          }), /*#__PURE__*/_jsx("div", {
-            style: {
-              display: "flex"
-            },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: handleClose,
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(DialogContent, {
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "signature-btn-grps",
-          children: [/*#__PURE__*/_jsx(Button, {
-            onClick: () => setTab(0),
-            className: tab === 0 ? "active" : "",
-            children: "Draw Signature"
-          }), /*#__PURE__*/_jsx(Button, {
-            onClick: () => setTab(1),
-            className: tab === 1 ? "active" : "",
-            children: "Type Signature"
-          }), /*#__PURE__*/_jsx(Button, {
-            onClick: () => setTab(2),
-            className: tab === 2 ? "active" : "",
-            children: "Upload Signature"
-          })]
-        }), /*#__PURE__*/_jsx("div", {
-          className: "signature-tab-content",
-          children: SeletectedTab ? /*#__PURE__*/_jsx(SeletectedTab, {
-            onDataChange: onDataChange,
-            customProps: {
-              ...(customProps || {}),
-              brush: brush
-            },
-            onUploadDone: onUploadDone
-          }) : null
-        }), /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          padding: 2,
-          style: {
-            display: "flex",
-            justifyContent: "space-between"
-          },
-          children: [/*#__PURE__*/_jsxs(Grid, {
-            item: true,
-            xs: 5,
-            style: {
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/_jsx(Grid, {
+            children: /*#__PURE__*/_jsxs("div", {
               style: {
-                marginRight: "8px"
+                display: "flex",
+                justifyContent: "space-between"
               },
-              children: /*#__PURE__*/_jsx("label", {
-                htmlFor: "signedBy",
-                children: "Name:"
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              children: /*#__PURE__*/_jsx(TextField, {
-                id: "signedBy",
-                name: "signedBy",
-                placeholder: "Enter Name",
-                size: "small",
-                onChange: onChange
-              })
-            })]
-          }), /*#__PURE__*/_jsxs(Grid, {
-            item: true,
-            xs: 5,
-            style: {
-              display: "flex",
-              alignItems: "center"
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "h6",
+                className: "popupTitle",
+                children: "SIGNATURE"
+              }), /*#__PURE__*/_jsx("div", {
+                style: {
+                  display: "flex"
+                },
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: handleClose,
+                  className: "close-popupbtn",
+                  children: /*#__PURE__*/_jsx(CloseIcon, {})
+                })
+              })]
+            })
+          }), /*#__PURE__*/_jsxs(DialogContent, {
+            sx: {
+              p: 0
             },
-            children: [/*#__PURE__*/_jsx(Grid, {
+            className: "signature-popup",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "signature-btn-grps",
+              children: /*#__PURE__*/_jsxs(Tabs, {
+                scrollButtons: "auto",
+                variant: "scrollable",
+                value: tab,
+                onChange: (e, newValue) => {
+                  setTab(newValue);
+                },
+                "aria-label": "Element Tabs",
+                children: [/*#__PURE__*/_jsx(Tab, {
+                  label: /*#__PURE__*/_jsxs(Grid, {
+                    className: "dflex alignCenter",
+                    children: [/*#__PURE__*/_jsx(DrawSignature, {}), /*#__PURE__*/_jsx("span", {
+                      className: "ml-1",
+                      children: "Draw Signature"
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(Tab, {
+                  label: /*#__PURE__*/_jsxs(Grid, {
+                    className: "dflex alignCenter",
+                    children: [/*#__PURE__*/_jsx(TypeSignature, {}), /*#__PURE__*/_jsx("span", {
+                      className: "ml-1",
+                      children: "Type Signature"
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(Tab, {
+                  label: /*#__PURE__*/_jsxs(Grid, {
+                    className: "dflex alignCenter",
+                    children: [/*#__PURE__*/_jsx(UploadSignature, {}), /*#__PURE__*/_jsx("span", {
+                      className: "ml-1",
+                      children: "Upload Signature"
+                    })]
+                  })
+                })]
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              className: "signature-tab-content",
+              children: SeletectedTab ? /*#__PURE__*/_jsx(SeletectedTab, {
+                onDataChange: onDataChange,
+                customProps: {
+                  ...(customProps || {}),
+                  brush: brush
+                },
+                onUploadDone: onUploadDone
+              }) : null
+            }), /*#__PURE__*/_jsxs(Grid, {
+              container: true,
+              sx: {
+                pt: 2
+              },
               style: {
-                marginRight: "8px"
+                display: "flex",
+                justifyContent: "space-between"
               },
-              children: /*#__PURE__*/_jsx("label", {
-                htmlFor: "signedOn",
-                children: "Date:"
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              children: /*#__PURE__*/_jsx(DatePicker, {
-                showIcon: true,
-                id: "signedOn",
-                selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
-                dateFormat: "MM/dd/yyyy",
-                onChange: date => {
-                  setSignedData({
-                    ...signedData,
-                    signedOn: new Date(date).toISOString().split("T")[0]
-                  });
-                }
-              })
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(DialogActions, {
-        className: "dialog-actions-si",
-        children: [tab === 0 ? /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          padding: 2,
-          style: {
-            display: "flex",
-            alignItems: "center"
-          },
-          children: [/*#__PURE__*/_jsx(Grid, {
-            item: true,
-            children: /*#__PURE__*/_jsx("input", {
-              type: "color",
-              className: "brushcolorpic",
-              onChange: onBrushColor,
-              size: "4",
-              value: brush?.color
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            children: /*#__PURE__*/_jsx(Grid, {
-              className: "dflex alignCenter sizeIcons",
-              children: BrushSizes.map(m => {
-                return /*#__PURE__*/_jsx(IconButton, {
-                  onClick: onBrushSize(m),
-                  disableRipple: true,
-                  className: brush.size === m ? "active" : "",
-                  children: /*#__PURE__*/_jsx(BrushIcon, {
-                    style: {
-                      width: 24 + m,
-                      height: 24 + m
+              children: [/*#__PURE__*/_jsxs(Grid, {
+                item: true,
+                xs: 5,
+                style: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [/*#__PURE__*/_jsx(Grid, {
+                  style: {
+                    marginRight: "8px"
+                  },
+                  children: /*#__PURE__*/_jsx("label", {
+                    htmlFor: "signedBy",
+                    children: "Name:"
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  children: /*#__PURE__*/_jsx(TextField, {
+                    id: "signedBy",
+                    name: "signedBy",
+                    placeholder: "Enter Name",
+                    size: "small",
+                    onChange: onChange
+                  })
+                })]
+              }), /*#__PURE__*/_jsxs(Grid, {
+                item: true,
+                xs: 5,
+                style: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [/*#__PURE__*/_jsx(Grid, {
+                  style: {
+                    marginRight: "8px"
+                  },
+                  children: /*#__PURE__*/_jsx("label", {
+                    htmlFor: "signedOn",
+                    children: "Date:"
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  children: /*#__PURE__*/_jsx(DatePicker, {
+                    showIcon: true,
+                    id: "signedOn",
+                    selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
+                    dateFormat: "MM/dd/yyyy",
+                    onChange: date => {
+                      setSignedData({
+                        ...signedData,
+                        signedOn: new Date(date).toISOString().split("T")[0]
+                      });
                     }
                   })
-                }, `sit-bs-${m}`);
-              })
-            })
-          })]
-        }) : null, tab !== 2 ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Button, {
-            onClick: handleClear,
-            children: "Clear"
-          }), /*#__PURE__*/_jsx(Button, {
-            onClick: handleSave,
-            children: "Save"
+                })]
+              })]
+            })]
+          }), /*#__PURE__*/_jsxs(DialogActions, {
+            className: "dialog-actions-si",
+            sx: {
+              p: 0,
+              pt: 2
+            },
+            children: [tab === 0 ? /*#__PURE__*/_jsxs(Grid, {
+              container: true,
+              alignItems: "center",
+              children: [/*#__PURE__*/_jsx(Grid, {
+                item: true,
+                sx: {
+                  mr: 4
+                },
+                children: /*#__PURE__*/_jsx("input", {
+                  type: "color",
+                  className: "brushcolorpic signColorPicker",
+                  onChange: onBrushColor,
+                  size: "4",
+                  value: brush?.color
+                })
+              }), /*#__PURE__*/_jsx(Grid, {
+                item: true,
+                children: /*#__PURE__*/_jsx(Grid, {
+                  className: "dflex alignCenter sizeIcons",
+                  children: BrushSizes.map(m => {
+                    return /*#__PURE__*/_jsx(IconButton, {
+                      onClick: onBrushSize(m),
+                      disableRipple: true,
+                      className: brush.size === m ? "active" : "",
+                      children: /*#__PURE__*/_jsx("span", {
+                        style: {
+                          width: 20 + m,
+                          height: 20 + m
+                        },
+                        children: /*#__PURE__*/_jsx(PencilIcon, {
+                          style: {
+                            width: 20 + m,
+                            height: 20 + m
+                          }
+                        })
+                      })
+                    }, `sit-bs-${m}`);
+                  })
+                })
+              })]
+            }) : null, tab !== 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: handleClear,
+                className: "secondaryBtn",
+                children: "Clear"
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: handleSave,
+                className: "primaryBtn",
+                children: "Save"
+              })]
+            }) : null]
           })]
-        }) : null]
-      })]
+        })
+      })
     })]
   });
 };

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

@@ -1,9 +1,10 @@
 import React, { useRef, useState } from "react";
-import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField } from "@mui/material";
+import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
 import Icon from "../../common/Icon";
 import { Transforms } from "slate";
 import { TableUtil } from "../../utils/table.js";
 import "./TableSelector.css";
+import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableSelector = ({
@@ -37,7 +38,7 @@ const TableSelector = ({
   };
   return /*#__PURE__*/_jsxs("div", {
     ref: tableOptionsRef,
-    className: "popup-wrapper1",
+    className: "popup-wrapper1 ",
     children: [/*#__PURE__*/_jsx(IconButton, {
       style: {
         border: showOptions ? "1px solid lightgray" : "none"
@@ -47,48 +48,118 @@ const TableSelector = ({
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "table"
       })
-    }), showOptions ? /*#__PURE__*/_jsxs(Dialog, {
+    }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
       open: showOptions,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: "Table"
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          padding: 3,
-          spacing: 2,
-          children: [/*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: 12,
-            children: /*#__PURE__*/_jsx(TextField, {
-              fullWidth: true,
-              name: "row",
-              value: tableData?.row,
-              onChange: handleChange,
-              label: "No.of Rows",
-              placeholder: "No.of Rows"
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: 12,
-            children: /*#__PURE__*/_jsx(TextField, {
-              fullWidth: true,
-              name: "column",
-              value: tableData?.column,
-              onChange: handleChange,
-              label: "No.of Columns",
-              placeholder: "No.of Columns"
-            })
+      className: "tablePopup",
+      children: /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 12,
+        sx: {
+          p: 3
+        },
+        children: [/*#__PURE__*/_jsx(DialogTitle, {
+          sx: {
+            p: 0,
+            pb: 2
+          },
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            justifyContent: "space-between",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h6",
+              className: "popupTitle",
+              children: "Table"
+            }), /*#__PURE__*/_jsx(Grid, {
+              style: {
+                display: "flex"
+              },
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: onCancel,
+                className: "close-popupbtn",
+                children: /*#__PURE__*/_jsx(CloseIcon, {})
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(DialogContent, {
+          sx: {
+            p: 0
+          },
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            children: [/*#__PURE__*/_jsxs(Grid, {
+              item: true,
+              xs: 12,
+              sx: {
+                pb: 2,
+                pt: 0
+              },
+              children: [/*#__PURE__*/_jsx(Grid, {
+                item: true,
+                xs: 12,
+                style: {
+                  marginBottom: "5px"
+                },
+                children: /*#__PURE__*/_jsx(Typography, {
+                  variant: "body1",
+                  color: "textSecondary",
+                  sx: {
+                    fontSize: '14px'
+                  },
+                  children: "No.of Rows"
+                })
+              }), /*#__PURE__*/_jsx(TextField, {
+                fullWidth: true,
+                name: "row",
+                value: tableData?.row,
+                onChange: handleChange
+                // label="No.of Rows"
+                ,
+                placeholder: "No.of Rows"
+              })]
+            }), /*#__PURE__*/_jsxs(Grid, {
+              item: true,
+              xs: 12,
+              children: [/*#__PURE__*/_jsx(Grid, {
+                item: true,
+                xs: 12,
+                style: {
+                  marginBottom: "5px"
+                },
+                children: /*#__PURE__*/_jsx(Typography, {
+                  variant: "body1",
+                  color: "textSecondary",
+                  sx: {
+                    fontSize: '14px'
+                  },
+                  children: "No.of Columns"
+                })
+              }), /*#__PURE__*/_jsx(TextField, {
+                fullWidth: true,
+                name: "column",
+                value: tableData?.column,
+                onChange: handleChange
+                // label="No.of Columns"
+                ,
+                placeholder: "No.of Columns"
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsxs(DialogActions, {
+          sx: {
+            p: 0,
+            pt: 2
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: onCancel,
+            className: "secondaryBtn",
+            children: "Cancel"
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: handleInsert,
+            className: "primaryBtn",
+            children: "Save"
           })]
-        })
-      }), /*#__PURE__*/_jsxs(DialogActions, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: onCancel,
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleInsert,
-          children: "Save"
         })]
-      })]
+      })
     }) : null]
   });
 };

package/dist/Editor/Toolbar/Toolbar.js

@@ -90,7 +90,7 @@ const Toolbar = props => {
       style: {
         fontFamily: fontFamilyMap[value],
         width: "200px",
-        height: "40px",
+        height: "36px",
         overflow: "hidden"
       },
       children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {

package/dist/Editor/Toolbar/styles.css

@@ -14,14 +14,20 @@
     border-bottom: 2px solid #CCC;
 }
 .toolbar-grp1>*{
-    margin-right: 10px;
+    /* margin-right: 10px; */
     cursor: pointer;
 }
 .toolbar-grp1{
-    margin:0 10px;
+    margin:0 2px;
     display: flex;
     align-items: center;
 }
+.toolbar .toolbar-grp1:first-child .MuiOutlinedInput-root {
+    margin-right: 10px;
+}
+.color-picker.popup-wrapper1 button {
+    padding: 8px;
+}
 select{
     height: 30px;
     border: none;

package/dist/Editor/common/ColorPickerButton.js

@@ -26,8 +26,10 @@ const ColorPickerButton = props => {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
-        height: "32px",
-        border: "1px solid #000"
+        height: "26px",
+        minWidth: "26px",
+        borderRadius: '26px',
+        border: "1px solid #64748B"
       },
       onClick: handleColorPicker
     }), /*#__PURE__*/_jsx(Popover, {
@@ -51,9 +53,11 @@ const ColorPickerButton = props => {
             },
             children: [/*#__PURE__*/_jsx(Button, {
               onClick: handleClose,
+              className: "secondaryBtn",
               children: "Cancel"
             }), /*#__PURE__*/_jsx(Button, {
               onClick: handleSave,
+              className: "primaryBtn",
               children: "Save"
             })]
           })]