@flozy/editor 1.2.0 → 1.2.2

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

@@ -1,7 +1,8 @@
 import React, { useRef, useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor } from "slate-react";
-import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton } from "@mui/material";
+import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
 import usePopup from "../../utils/customHooks/usePopup";
@@ -79,43 +80,80 @@ const Embed = ({
       children: /*#__PURE__*/_jsx(Icon, {
         icon: format
       })
-    }), /*#__PURE__*/_jsxs(Dialog, {
+    }), /*#__PURE__*/_jsx(Dialog, {
       open: open,
       fullWidth: true,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: EMBED_LABEL[format] || "Embed"
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          children: [/*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: 12,
-            children: /*#__PURE__*/_jsx(TextField, {
-              name: "url",
-              placeholder: "Enter URL",
-              size: "small",
-              fullWidth: true,
-              onChange: handleChange,
-              value: formData?.url || ""
-            })
-          }), /*#__PURE__*/_jsx(Uploader, {
-            value: formData,
-            data: {
-              key: "url"
-            },
-            customProps: customProps,
-            onUploaded: onUploaded
+      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: EMBED_LABEL[format] || "Embed"
+            }), /*#__PURE__*/_jsx(Grid, {
+              style: {
+                display: "flex"
+              },
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: onClose,
+                className: "close-popupbtn",
+                children: /*#__PURE__*/_jsx(CloseIcon, {})
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(DialogContent, {
+          sx: {
+            p: 0
+          },
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            children: [/*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 12,
+              children: /*#__PURE__*/_jsx(TextField, {
+                name: "url",
+                placeholder: "Enter URL",
+                size: "small",
+                fullWidth: true,
+                onChange: handleChange,
+                value: formData?.url || ""
+              })
+            }), /*#__PURE__*/_jsx(Uploader, {
+              value: formData,
+              data: {
+                key: "url"
+              },
+              customProps: customProps,
+              onUploaded: onUploaded
+            })]
+          })
+        }), /*#__PURE__*/_jsxs(DialogActions, {
+          sx: {
+            p: 0,
+            pt: 2
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: onClose,
+            className: "secondaryBtn",
+            children: "Cancel"
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: onSave,
+            className: "primaryBtn",
+            children: "Save"
           })]
-        })
-      }), /*#__PURE__*/_jsxs(DialogActions, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: onClose,
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: onSave,
-          children: "Save"
         })]
-      })]
+      })
     })]
   });
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ViewComfyIcon from "@mui/icons-material/ViewComfy";
 import { insertGrid } from "../../utils/grid";
+import { GridIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridButton = props => {
   const {
@@ -13,7 +13,7 @@ const GridButton = props => {
   return /*#__PURE__*/_jsx(IconButton, {
     onClick: handleInsertGrid,
     title: "Layout",
-    children: /*#__PURE__*/_jsx(ViewComfyIcon, {})
+    children: /*#__PURE__*/_jsx(GridIcon, {})
   });
 };
 export default GridButton;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton } from "@mui/material";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import { CheckBox } from "@mui/icons-material";
 import { insertLink } from "../../utils/link";
 import Icon from "../../common/Icon";
@@ -53,47 +54,95 @@ const LinkButton = props => {
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "link"
       })
-    }), showInput && /*#__PURE__*/_jsxs(Dialog, {
+    }), showInput && /*#__PURE__*/_jsx(Dialog, {
       open: true,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: "Link"
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          spacing: 2,
-          children: [/*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: 12,
-            children: /*#__PURE__*/_jsx(TextField, {
-              size: "small",
-              fullWidth: true,
-              value: url,
-              placeholder: "https://google.com",
-              onChange: handleInputChange
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            item: true,
-            xs: 12,
-            children: /*#__PURE__*/_jsx(FormControl, {
-              children: /*#__PURE__*/_jsx(FormControlLabel, {
-                control: /*#__PURE__*/_jsx(CheckBox, {
-                  checked: showInNewTab,
-                  onChange: handleInputChange
-                }),
-                label: "Open in new tab"
+      children: /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 12,
+        sx: {
+          p: 3
+        },
+        children: [/*#__PURE__*/_jsx(DialogTitle, {
+          sx: {
+            p: 0,
+            pb: 2
+          },
+          children: /*#__PURE__*/_jsxs("div", {
+            style: {
+              display: "flex",
+              justifyContent: "space-between"
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h6",
+              className: "popupTitle",
+              children: "LINK"
+            }), /*#__PURE__*/_jsx("div", {
+              style: {
+                display: "flex"
+              },
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: handleClose,
+                className: "close-popupbtn",
+                children: /*#__PURE__*/_jsx(CloseIcon, {})
               })
-            })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(DialogContent, {
+          sx: {
+            p: 0
+          },
+          children: /*#__PURE__*/_jsxs(Grid, {
+            container: true,
+            spacing: 2,
+            children: [/*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 12,
+              children: /*#__PURE__*/_jsx(TextField, {
+                size: "small",
+                fullWidth: true,
+                value: url,
+                placeholder: "https://google.com",
+                onChange: handleInputChange
+              })
+            }), /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 12,
+              sx: {
+                ml: 1
+              },
+              children: /*#__PURE__*/_jsx(FormControl, {
+                children: /*#__PURE__*/_jsx(FormControlLabel, {
+                  control: /*#__PURE__*/_jsx(CheckBox, {
+                    checked: showInNewTab,
+                    onChange: handleInputChange
+                  }),
+                  label: /*#__PURE__*/_jsx(Typography, {
+                    variant: "body1",
+                    sx: {
+                      pl: 1
+                    },
+                    children: "Open in new tab"
+                  })
+                })
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsxs(DialogActions, {
+          sx: {
+            p: 0,
+            pt: 2
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: handleClose,
+            className: "secondaryBtn",
+            children: "Cancel"
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: handleInsertLink,
+            className: "primaryBtn",
+            children: "Add"
           })]
-        })
-      }), /*#__PURE__*/_jsxs(DialogActions, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: handleClose,
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleInsertLink,
-          children: "Add"
         })]
-      })]
+      })
     })]
   });
 };

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

@@ -19,7 +19,13 @@ const NewLineButton = props => {
   return /*#__PURE__*/_jsx(IconButton, {
     title: "New Line",
     onClick: onAddNewLine,
-    children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})
+    children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+      sx: {
+        fill: '#64748B',
+        width: '18px',
+        height: '18px'
+      }
+    })
   });
 };
 export default NewLineButton;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PageSettings = props => {
+  const {
+    attributes
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    ...attributes,
+    className: "page-settings",
+    contentEditable: false
+  });
+};
+export default PageSettings;

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Transforms, Editor, Element } from "slate";
 import { IconButton } from "@mui/material";
-import ArticleIcon from "@mui/icons-material/Article";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
+import { PageSettings } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -82,7 +82,7 @@ const PageSettingsButton = props => {
     children: [/*#__PURE__*/_jsx(IconButton, {
       title: "Page Settings",
       onClick: onSettings,
-      children: /*#__PURE__*/_jsx(ArticleIcon, {})
+      children: /*#__PURE__*/_jsx(PageSettings, {})
     }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
       element: openSetttings?.element || {},
       onSave: onSave,

package/dist/Editor/Elements/Signature/Signature.css

@@ -0,0 +1,75 @@
+.signature-popup .MuiTab-root {
+    background: #ffffff;
+    border: 1px solid #d3d3d3 !important;
+    border-radius: 7px;
+    height: 37px;
+    min-height: 37px;
+    font-weight: 500;
+    font-size: 12px;
+    text-align: center;
+    color: #64748b;
+    margin-right: 13px;
+    padding: 6px 10px !important;
+    color: #0f172a !important;
+    opacity: 0.7;
+  }
+  .signature-popup .MuiTab-root.Mui-selected {
+    background: #ffffff;
+    border: 1px solid #2563eb !important;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
+    border-radius: 7px;
+    color: #0f172a !important;
+  }
+  .signature-popup .MuiTabs-indicator {
+    display: none;
+}
+
+.signature-popup input.signColorPicker {
+    margin-bottom: 0px !important;
+  }
+  input[type="color"].signColorPicker {
+      -webkit-appearance: none;
+      border: none;
+      width: 25px;
+      height: 25px;
+    padding: 0px;
+    border-radius: 50px;
+    margin-bottom: 0px !important;
+  }
+  input[type="color"].signColorPicker::-webkit-color-swatch-wrapper {
+      border: none;
+    border-radius: 50px;
+    padding: 0;
+  }
+  input[type="color"].signColorPicker::-webkit-color-swatch {
+      border: none;
+    border-radius: 50px;
+    padding: 0;
+  }
+
+  .upload-input-wrapper {
+    width: 100%;
+    position: relative;
+  }
+  .upload-input-wrapper input {
+    width: 100%;
+    height: 100px;
+    opacity: 0;
+    z-index: 1;
+    position: relative;
+    cursor: pointer;
+}
+  .upload-wrapper-ui {
+    border: 1px solid #2563eb !important;
+    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    top: 0px;
+    left: 0px;
+    cursor: pointer;
+  }

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

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

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { convertBase64 } from "../../../utils/helper";
 import { uploadFile } from "../../../service/fileupload";
+import { Grid, Typography } from "@mui/material";
+import { CloudUpload } from "../../../common/EditorIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const UploadSignature = props => {
@@ -37,12 +39,27 @@ const UploadSignature = props => {
         src: base64,
         alt: "Signature"
       })
-    }) : /*#__PURE__*/_jsx("div", {
+    }) : /*#__PURE__*/_jsxs("div", {
       className: "upload-input-wrapper",
-      children: /*#__PURE__*/_jsx("input", {
+      children: [/*#__PURE__*/_jsx("input", {
         type: "file",
         onChange: onChange
-      })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "upload-wrapper-ui",
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          justifyContent: "center",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(CloudUpload, {}), /*#__PURE__*/_jsx(Typography, {
+            variant: "h6",
+            color: "textSecondary",
+            sx: {
+              ml: 1
+            },
+            children: "Upload your signature"
+          })]
+        })
+      })]
     })]
   });
 };