@flozy/editor 1.2.0 → 1.2.1

package/dist/Editor/CollaborativeEditor.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useRef } from "react";
 import * as Y from "yjs";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { Editor, Transforms } from "slate";
@@ -10,6 +10,7 @@ import withCollaborative from "./hooks/withCollaborative";
 import CommonEditor from "./CommonEditor";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CollaborativeEditor = props => {
+  const editorRef = useRef(null);
   const {
     id,
     content,
@@ -91,7 +92,7 @@ const CollaborativeEditor = props => {
   });
   provider.on("authenticationFailed", () => {
     setAuthenticated({
-      status: 'error',
+      status: "error",
       scope: null
     });
   });
@@ -107,7 +108,7 @@ const CollaborativeEditor = props => {
     setConnected(false);
     setMessage("Seems your connection is lost... Reload the page to edit the document...");
   });
-  if (authenticated.status === 'error') {
+  if (authenticated.status === "error") {
     return /*#__PURE__*/_jsx("h1", {
       "data-status": connected,
       children: "Authentication Error"
@@ -119,6 +120,7 @@ const CollaborativeEditor = props => {
     });
   }
   return /*#__PURE__*/_jsx(CommonEditor, {
+    ref: editorRef,
     editor: editor,
     id: id,
     content: [],

package/dist/Editor/CommonEditor.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useEffect, useMemo, useState } from "react";
+import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor } from "slate";
 import { Slate, Editable } from "slate-react";
 import html2canvas from "html2canvas";
@@ -31,7 +31,7 @@ const Leaf = ({
     children: children
   });
 };
-const CommonEditor = props => {
+const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     id,
     content,
@@ -78,6 +78,19 @@ const CommonEditor = props => {
       updateChanges(value);
     }
   }, [count]);
+  useImperativeHandle(ref, () => ({
+    async getThumbnail() {
+      try {
+        const c = await html2canvas(editorWrapper?.current);
+        if (c) {
+          return c.toDataURL();
+        }
+      } catch (err) {
+        console.log(err);
+        return null;
+      }
+    }
+  }));
   const [htmlAction, setHtmlAction] = useState({
     showInput: false,
     html: "",
@@ -211,6 +224,7 @@ const CommonEditor = props => {
       }, id)
     })
   });
-};
+});
+CommonEditor.displayName = "CommonEditor";
 const CHARACTERS = ["Aayla Secura", "Adi Gallia"];
 export default CommonEditor;

package/dist/Editor/Editor.css

@@ -1,3 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+* {
+    font-family: 'Inter', sans-serif;
+}
+
+.ml-1 {
+    margin-left: 10px;
+}
+.dflex {
+    display: flex;
+}
+.alignCenter {
+    align-items: center;
+}
 blockquote{
     border-left: 2px solid #ddd;
     margin-left: 0;
@@ -47,8 +62,9 @@ td{
     bottom: 0;
     margin: auto;
     background-color: white;
-    padding: 6px 10px;
-    border: 1px solid lightgray;
+    padding: 20px;
+    border-radius: 6px;
+    /* border: 1px solid lightgray; */
     height: fit-content;
     z-index: 1;
     width: 300px;
@@ -85,7 +101,7 @@ html{
 .grid-item-toolbar {
     position: absolute;
     right: 0;
-    top: -25px;
+    top: -30px;
 }
 
 .element-toolbar {
@@ -98,9 +114,16 @@ html{
 .grid-container-toolbar button,
 .grid-item-toolbar button,
 .element-toolbar button {
-    margin-right: 8px;
+    /* margin-right: 8px;
     background-color: rgba(0, 0, 0, 0.8);
-    color: #FFF;
+    color: #FFF; */
+    margin-left: 8px;
+    background-color: rgb(255 255 255);
+    color: #64748b;
+    padding: 5px;
+    font-size: 12px;
+    border-radius: 4px;
+    border: 1px solid #64748b;
 }
 
 .grid-item {
@@ -164,22 +187,36 @@ html{
     display: flex;
     justify-content: space-around;
 }
+.signature-btn-grps svg {
+        height: 17px !important;
+        width: 17px !important;
+}
 
-.signature-btn-grps .MuiButtonBase-root {
-    border: 1px solid #2563eb;
-    color: #0f172a;
-    opacity: 1;
+.close-popupbtn {
+    background-color: #EDEDED !important;
+    border-radius: 4px !important;
+    width: 24px;
+    height: 24px;
 }
 
-.signature-btn-grps .MuiButtonBase-root.active {
-    background-color: #0052CC;
-    color: #FFFFFF;
+.close-popupbtn svg  {
+    width: 17px;
+    height: 17px;
 }
 
+.popupTitle {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    font-family: Inter, sans-serif;
+    text-transform: uppercase;
+}
+
+
+
 .signature-tab-content {
     display: flex;
-    margin: 12px 16px;
-    padding: 0px;
+    margin: 12px 0px;
+    padding: 0px 5px;
     border: 0px solid #CCC;
     min-height: 100px;
 }
@@ -213,11 +250,24 @@ html{
 
 .typesignature-fontfamily .MuiButtonBase-root {
     opacity: 1;
-    border: 1px solid #ccc;
+    border: 1px solid #cccccc6b;
+    color: #0F172A;
+    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08);
 }
 .typesignature-fontfamily .MuiButtonBase-root.active {
     border: 1px solid #0052CC;
 }
+.typesignature-input-wrapper .MuiInputAdornment-root .MuiButtonBase-root {
+    background-color: #E9EBF8 !important;
+    border-radius: 4px !important;
+    width: 24px;
+    height: 24px;
+    padding: 2px;
+}
+.typesignature-input-wrapper .MuiInputAdornment-root svg{
+    width: 100%;
+    height: 100%;
+}
 
 .signature-canvas{
     height: 100%;
@@ -231,7 +281,7 @@ html{
     align-items: center;
   }
   .react-datepicker__input-container input {
-    height: 36px;
+    height: 27px;
     border: 1px solid #ccc;
     border-radius: 5px;
     width: 100%;
@@ -308,6 +358,41 @@ html{
     display: inline-flex;
   }
 
+  .MuiButton-root.primaryBtn {
+    background: #2563eb !important;
+    box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
+    border-radius: 8px !important;
+    height: 28px !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    color: #ffffff !important;
+    border: 1px solid #2563eb !important;
+    width: auto !important;
+  }
+  .MuiButton-root.secondaryBtn {
+    background: #ffffff;
+    border: 1px solid #2563eb !important;
+    box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
+    border-radius: 8px !important;
+    height: 28px !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    margin-right: 15px !important;
+    color: #2563EB;
+    width: auto !important;
+  }
+.deleteBtn {
+    background: #ffffff;
+    border: 1px solid #d32f2f !important;
+    box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
+    border-radius: 8px !important;
+    height: 28px !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    margin-right: 15px !important;
+    color: #d32f2f;
+    width: auto !important; 
+}
 @media (max-width: 480px) {
     .toolbar {
         display: flex;
@@ -322,3 +407,34 @@ html{
         width: 100% !important;
     }
 }
+
+
+.editorTabs {
+    height: 40px;
+    min-height: 40px;
+}
+
+.editorTabs .MuiTab-root {
+    min-width: 80px;
+    min-height: 30px !important;
+    font-size: 14px;
+    /* max-width: 130px; */
+    /* padding: 6px 6px !important; */
+    color: #0F172A;
+    text-transform: capitalize;
+}
+
+.editorTabs .MuiTabScrollButton-horizontal.Mui-disabled {
+    display: none;
+}
+.editorTabs  .MuiTabs-scroller {
+    border-bottom: 1px solid #8080801c;
+}
+
+.btnColorPicker .MuiOutlinedInput-input, .tablePopup .MuiOutlinedInput-input {
+    padding: 8.5px 14px;
+}
+
+.toolbar svg {
+    /* fill: 'red' */
+}

package/dist/Editor/Elements/Accordion/AccordionButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ExpandCircleDownIcon from "@mui/icons-material/ExpandCircleDown";
 import { insertAccordion } from "../../utils/accordion";
+import { AccordionIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionButton = props => {
   const {
@@ -16,7 +16,7 @@ const AccordionButton = props => {
     style: {
       marginLeft: "0px"
     },
-    children: /*#__PURE__*/_jsx(ExpandCircleDownIcon, {})
+    children: /*#__PURE__*/_jsx(AccordionIcon, {})
   });
 };
 export default AccordionButton;

package/dist/Editor/Elements/AppHeader/AppHeaderButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ViewDayIcon from "@mui/icons-material/ViewDay";
 import { insertAppHeader } from "../../utils/insertAppHeader";
+import { AppHeader } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AppHeaderButton = props => {
   const {
@@ -13,7 +13,7 @@ const AppHeaderButton = props => {
   return /*#__PURE__*/_jsx(IconButton, {
     title: "App Header",
     onClick: handleClick,
-    children: /*#__PURE__*/_jsx(ViewDayIcon, {})
+    children: /*#__PURE__*/_jsx(AppHeader, {})
   });
 };
 export default AppHeaderButton;

package/dist/Editor/Elements/Button/ButtonToolIcon.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ViewStreamIcon from "@mui/icons-material/ViewStream";
 import { insertButton } from "../../utils/button";
+import { ButtonIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ButtonToolIcon = props => {
   const {
@@ -13,7 +13,7 @@ const ButtonToolIcon = props => {
   return /*#__PURE__*/_jsx(IconButton, {
     onClick: handleInsertButton,
     title: "Button",
-    children: /*#__PURE__*/_jsx(ViewStreamIcon, {})
+    children: /*#__PURE__*/_jsx(ButtonIcon, {})
   });
 };
 export default ButtonToolIcon;

package/dist/Editor/Elements/Carousel/CarouselButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";
 import { insertCarousel } from "../../utils/carousel";
+import { Carousal } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselButton = props => {
   const {
@@ -13,7 +13,7 @@ const CarouselButton = props => {
   return /*#__PURE__*/_jsx(IconButton, {
     title: "Carousel",
     onClick: handleClick,
-    children: /*#__PURE__*/_jsx(ViewCarouselIcon, {})
+    children: /*#__PURE__*/_jsx(Carousal, {})
   });
 };
 export default CarouselButton;

package/dist/Editor/Elements/ChipText/ChipTextButton.js

@@ -51,7 +51,11 @@ const ChipTextButton = props => {
     children: [/*#__PURE__*/_jsx(IconButton, {
       title: "Chip Text",
       onClick: handleClick,
-      children: /*#__PURE__*/_jsx(SmartButtonIcon, {})
+      children: /*#__PURE__*/_jsx(SmartButtonIcon, {
+        sx: {
+          fill: '#64748B'
+        }
+      })
     }), openSetttings !== false ? /*#__PURE__*/_jsx(ChipTextPopup, {
       element: openSetttings?.element || {},
       onSave: onSave,

package/dist/Editor/Elements/Color Picker/ColorPicker.css

@@ -3,17 +3,18 @@
     display: grid;
     grid-template-columns: auto auto auto auto auto auto auto;
     align-items: center;
-    gap: 5px;
+    gap: 10px;
 }
 .clicked{
-  border: 1px solid lightgray;
+  /* border: 1px solid lightgray; */
   border-bottom: none;
 }
 .option,.hexPreview{
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
   background-color: #000000;
-
+  border: 1px solid #eee;
 }
 .color-picker form{
   display: flex;
@@ -23,7 +24,7 @@
 }
 .color-picker input{
   width: 65%;
-  height:1.3em;
+  height: 30px;
   border:1px solid lightgray;
   border-radius: 5px;
   padding-left:5px
@@ -36,3 +37,22 @@
 .color-picker input:focus{
   outline: none;
 }
+.color-picker-dialog .MuiPaper-root {
+  padding: 20px;
+}
+.color-picker-dialog .popup {
+  width: 100%;
+  max-width: fit-content;
+}
+.backdrop {
+  position: fixed;
+  right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+.colorSaveBtn {
+  border-radius: 6px;
+}

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { MdFormatColorText, MdFormatColorFill, MdCheck } from "react-icons/md";
+import { MdFormatColorText, MdFormatColorFill } from "react-icons/md";
 import "./ColorPicker.css";
 import { colors } from "./defaultColors";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
@@ -8,12 +8,19 @@ import usePopup from "../../utils/customHooks/usePopup";
 import { ReactEditor } from "slate-react";
 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 logo = {
   color: /*#__PURE__*/_jsx(MdFormatColorText, {
-    size: 20
+    size: 17,
+    style: {
+      fill: '#64748B'
+    }
   }),
   bgColor: /*#__PURE__*/_jsx(MdFormatColorFill, {
-    size: 20
+    size: 17,
+    style: {
+      fill: '#64748B'
+    }
   })
 };
 const ColorPicker = ({
@@ -62,7 +69,7 @@ const ColorPicker = ({
     setHexValue(newHex);
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "color-picker popup-wrapper1",
+    className: "color-picker popup-wrapper1 color-picker-dialog",
     ref: colorPickerRef,
     children: [/*#__PURE__*/_jsx("button", {
       style: {
@@ -72,50 +79,57 @@ const ColorPicker = ({
       className: showOptions ? "clicked" : "",
       onClick: toggleOption,
       children: logo[format]
-    }), showOptions && /*#__PURE__*/_jsxs("div", {
-      className: "popup",
+    }), showOptions && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
-        className: "color-options",
-        children: colors.map((color, index) => {
-          return /*#__PURE__*/_jsx("div", {
-            "data-value": color,
-            onClick: changeColor,
-            className: "option",
-            style: {
-              background: color
-            }
-          }, index);
-        })
-      }), /*#__PURE__*/_jsx("p", {
-        style: {
-          textAlign: "center",
-          opacity: "0.7",
-          width: "100%"
-        },
-        children: "OR"
-      }), /*#__PURE__*/_jsxs("form", {
-        onSubmit: handleFormSubmit,
+        className: "backdrop",
+        onClick: () => {
+          setShowOptions(false);
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "popup",
         children: [/*#__PURE__*/_jsx("div", {
-          className: "hexPreview",
-          style: {
-            background: validHex ? hexValue : "#000000"
-          }
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          placeholder: "#000000",
-          value: hexValue,
-          onChange: handleHexChange,
-          style: {
-            border: validHex === false ? "1px solid red" : "1px solid lightgray"
-          }
-        }), /*#__PURE__*/_jsx("button", {
+          className: "color-options",
+          children: colors.map((color, index) => {
+            return /*#__PURE__*/_jsx("div", {
+              "data-value": color,
+              onClick: changeColor,
+              className: "option",
+              style: {
+                background: color
+              }
+            }, index);
+          })
+        }), /*#__PURE__*/_jsx("p", {
           style: {
-            color: validHex ? "green" : ""
+            textAlign: "center",
+            opacity: "0.7",
+            width: "100%"
           },
-          type: "submit",
-          children: /*#__PURE__*/_jsx(MdCheck, {
-            size: 20
-          })
+          children: "or"
+        }), /*#__PURE__*/_jsxs("form", {
+          onSubmit: handleFormSubmit,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "hexPreview",
+            style: {
+              background: validHex ? hexValue : "#000000"
+            }
+          }), /*#__PURE__*/_jsx("input", {
+            type: "text",
+            placeholder: "#000000",
+            value: hexValue,
+            onChange: handleHexChange,
+            style: {
+              border: validHex === false ? "1px solid red" : "1px solid lightgray"
+            }
+          }), /*#__PURE__*/_jsx("button", {
+            className: "colorSaveBtn",
+            style: {
+              background: validHex ? "#2563EB" : "#64748B",
+              color: '#fff'
+            },
+            type: "submit",
+            children: "Save"
+          })]
         })]
       })]
     })]

package/dist/Editor/Elements/DrawerMenu/DrawerMenu.js

@@ -29,7 +29,11 @@ const DrawerMenu = props => {
     contentEditable: false,
     children: [/*#__PURE__*/_jsx(IconButton, {
       onClick: handleClick,
-      children: /*#__PURE__*/_jsx(MenuIcon, {})
+      children: /*#__PURE__*/_jsx(MenuIcon, {
+        sx: {
+          fill: '#64748B'
+        }
+      })
     }), /*#__PURE__*/_jsx(Drawer, {
       anchor: anchor || "left",
       open: open,
@@ -56,6 +60,7 @@ const DrawerMenu = props => {
           children: /*#__PURE__*/_jsx(Button, {
             color: "error",
             onClick: handleDelete,
+            className: "deleteBtn",
             children: "Delete"
           })
         })]

package/dist/Editor/Elements/DrawerMenu/DrawerMenuButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconButton } from "@mui/material";
-import ViewSidebarIcon from "@mui/icons-material/ViewSidebar";
 import { insertDrawerMenu } from "../../utils/insertDrawerMenu";
+import { DrawerMenu } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DrawerButton = props => {
   const {
@@ -15,7 +15,7 @@ const DrawerButton = props => {
   return /*#__PURE__*/_jsx(IconButton, {
     title: "Drawer Menu",
     onClick: handleClick,
-    children: /*#__PURE__*/_jsx(ViewSidebarIcon, {})
+    children: /*#__PURE__*/_jsx(DrawerMenu, {})
   });
 };
 export default DrawerButton;