@flozy/editor 1.2.8 → 1.3.0

package/dist/Editor/CommonEditor.js

@@ -16,6 +16,7 @@ import "./Editor.css";
 import { serialize } from "./utils/serializer";
 import { getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
+import { Button } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -51,6 +52,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [isInteracted, setIsInteracted] = useState(false);
   const [deboundedValue] = useDebounce(value, 500);
   const [fullScreen, setFullScreen] = useState(false);
+  const [viewport, setViewport] = useState({
+    w: null,
+    h: null
+  });
+  const {
+    defaultBG
+  } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor());
@@ -134,6 +142,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     },
     toggleFullscreen() {
       setFullScreen(!fullScreen);
+    },
+    changeViewport({
+      w,
+      h
+    }) {
+      setViewport({
+        w,
+        h
+      });
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -158,8 +175,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       setIsInteracted(true);
     }
   };
+  const isReadOnly = readOnly === "readonly";
   const customProps = {
-    ...(otherProps || {})
+    ...(otherProps || {}),
+    readOnly: isReadOnly
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
@@ -179,6 +198,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       ...partialState
     }));
   };
+  const handleChangeViewport = (w, h) => () => {
+    setViewport({
+      w,
+      h
+    });
+  };
   const onKeyDown = useCallback(event => {
     const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
     const isCtrlKey = event.ctrlKey || isMetaKey;
@@ -198,18 +223,28 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     }
   }, [chars, editor, target, mentions, setMentions]);
-  const isReadOnly = readOnly === "readonly";
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   return /*#__PURE__*/_jsx(DialogWrapper, {
     ...props,
     fullScreen: fullScreen,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "editor-t-wrapper",
       style: {
         display: "flex",
         flexDirection: "column",
-        padding: "0 8px"
+        padding: "0 8px",
+        background: "white",
+        backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
+        backgroundSize: "40px 40px",
+        backgroundPosition: "-19px -19px"
       },
-      children: /*#__PURE__*/_jsxs(Slate, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleChangeViewport(414, 736),
+        children: "414 x 736"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleChangeViewport(375, 812),
+        children: " 375 x 812"
+      }), /*#__PURE__*/_jsxs(Slate, {
         editor: editor,
         initialValue: value,
         onChange: handleEditorChange,
@@ -222,12 +257,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
             className: "editor-wrapper",
             style: {
               border: "1px solid #f3f3f3",
-              background: pageProps?.pageColor || "#FFF",
+              background: pageProps?.pageColor || defaultBG || "#FFF",
               color: pageProps?.color || "#000",
               paddingLeft: `${bannerSpacing?.left}px`,
               paddingRight: `${bannerSpacing?.right}px`,
               paddingTop: `${bannerSpacing?.top}px`,
-              paddingBottom: `${bannerSpacing?.bottom}px`
+              paddingBottom: `${bannerSpacing?.bottom}px`,
+              width: viewport.w ? `${viewport.w}px` : "100%",
+              height: viewport.h ? `${viewport.h}px` : "auto",
+              alignSelf: "center"
             },
             children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
               className: "innert-editor-textbox",
@@ -249,7 +287,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           ...htmlAction,
           handleCodeToText: handleCodeToText
         })]
-      }, id)
+      }, id)]
     })
   });
 });

package/dist/Editor/DialogWrapper.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+// import styled from "@emotion/styled";
+// import commonStyle from "./commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -11,6 +13,7 @@ const DialogWrapper = props => {
     footer
   } = props;
   return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
+    className: `dialogComp`,
     open: fullScreen,
     fullScreen: fullScreen,
     onClose: onClose,
@@ -18,8 +21,8 @@ const DialogWrapper = props => {
       children: /*#__PURE__*/_jsx(Grid, {
         children: /*#__PURE__*/_jsx(Grid, {
           style: {
-            display: 'flex',
-            justifyContent: 'end'
+            display: "flex",
+            justifyContent: "end"
           },
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onClose,
@@ -37,7 +40,9 @@ const DialogWrapper = props => {
 DialogWrapper.defaultProps = {
   fullScreen: false,
   onClose: () => {},
-  children: '',
-  footer: ''
+  children: "",
+  footer: ""
 };
+
+// export default styled(commonStyle)(DialogWrapper);
 export default DialogWrapper;

package/dist/Editor/Editor.css

@@ -39,7 +39,8 @@ blockquote{
     min-height: 400px;
     height: fit-content;
     max-width: 100%;
-    border: none !important
+    border: none !important;
+    z-index: 1;
 }
 
 .editor-wrapper table{
@@ -53,7 +54,7 @@ blockquote{
     display: inline;
     position: relative;
 }
-.popup{
+.af-popup{
     position: fixed;
     left: 0;
     right: 0;
@@ -64,8 +65,8 @@ blockquote{
     padding: 20px;
     border-radius: 6px;
     /* border: 1px solid lightgray; */
-    height: fit-content;
-    z-index: 1;
+    height: fit-content !important;
+    z-index: 999;
     width: 300px;
 
 }

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

@@ -94,6 +94,7 @@ function AppHeader(props) {
       sx: {
         my: 2
       },
+      color: "primary",
       children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
         alt: `${appTitle} Logo`,
         style: {
@@ -146,6 +147,7 @@ function AppHeader(props) {
         }), /*#__PURE__*/_jsxs(Typography, {
           variant: "h6",
           component: "div",
+          color: "primary",
           style: {
             display: "inline-flex",
             alignItems: "center"

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

@@ -6,6 +6,7 @@ const ButtonPopup = props => {
   const {
     element,
     onSave,
+    customProps,
     onClose
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
@@ -14,7 +15,8 @@ const ButtonPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: buttonStyle
+    renderTabs: buttonStyle,
+    customProps: customProps
   });
 };
 export default ButtonPopup;

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

@@ -3,6 +3,7 @@ import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Menu, MenuItem } from "@mui/material";
 import ButtonPopup from "./ButtonPopup";
+import { actionButtonRedirect } from "../../service/actionTrigger";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -12,7 +13,8 @@ const EditorButton = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    metadata
   } = customProps;
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -25,8 +27,13 @@ const EditorButton = props => {
     bannerSpacing,
     textColor,
     url,
-    borderColor
+    borderColor,
+    buttonLink
   } = element;
+  const {
+    linkType,
+    redirectOnURLResult
+  } = buttonLink || {};
   const {
     topLeft,
     topRight,
@@ -39,13 +46,34 @@ const EditorButton = props => {
     right,
     bottom
   } = bannerSpacing || {};
-  const onClick = e => {
-    setAnchorEl(e.currentTarget);
+  const onClick = async e => {
+    if (readOnly) {
+      if (metadata?.buttonLink?.handler) {
+        metadata.buttonLink.handler("click");
+      } else if (linkType === "actionTrigger") {
+        if (redirectOnURLResult) {
+          // call api and redirect based on api result
+          const apiResult = await actionButtonRedirect({}, {
+            url: buttonLink?.url
+          });
+          window.open(apiResult, "_blank").focus();
+        } else {
+          const refUrl = buttonLink?.url ? buttonLink?.url.includes("http") ? buttonLink?.url : `//${buttonLink?.url}` : "Link";
+          window.open(refUrl, "_blank").focus();
+        }
+      } else {
+        const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
+        window.open(refUrl, "_blank").focus();
+      }
+    } else {
+      setAnchorEl(e.currentTarget);
+    }
   };
   const handleClose = () => {
     setAnchorEl(null);
   };
   const onMenuClick = val => () => {
+    console.log(val, url);
     switch (val) {
       case "open":
         const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
@@ -117,7 +145,8 @@ const EditorButton = props => {
     }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
       element: element,
       onSave: onSave,
-      onClose: onClose
+      onClose: onClose,
+      customProps: customProps
     })]
   });
 };

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

@@ -80,6 +80,7 @@ const Carousel = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
+    className: "sliderBg",
     style: {
       padding: "32px",
       backgroundColor: "#CCC",

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

@@ -15,6 +15,7 @@
   border-radius: 20px;
   background-color: #000000;
   border: 1px solid #eee;
+  flex-shrink: 0;
 }
 .color-picker form{
   display: flex;
@@ -24,9 +25,9 @@
 }
 .color-picker input{
   width: 65%;
-  height: 30px;
+  height: 30px !important;
   border:1px solid lightgray;
-  border-radius: 5px;
+  border-radius: 5px !important;
   padding-left:5px
 }
 .color-picker button{
@@ -42,7 +43,7 @@
 }
 .color-picker-dialog .popup {
   width: 100%;
-  max-width: fit-content;
+  max-width: fit-content !important;
 }
 .backdrop {
   position: fixed;
@@ -54,5 +55,9 @@
     z-index: 1;
 }
 .colorSaveBtn {
-  border-radius: 6px;
+  border-radius: 6px !important;
+  height: 30px;
+  padding: 0 15px !important;
+  width: 60px !important;
+  flex-shrink: 0;
 }

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

@@ -7,6 +7,7 @@ import { Transforms } from "slate";
 import usePopup from "../../utils/customHooks/usePopup";
 import { logo } from "./LogoIcon";
 import "./ColorPicker.css";
+import { ButtonBase } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -88,7 +89,7 @@ const ColorPicker = ({
           setShowOptions(false);
         }
       }), /*#__PURE__*/_jsxs("div", {
-        className: "popup",
+        className: "af-popup",
         children: [/*#__PURE__*/_jsx("div", {
           className: "color-options",
           children: colors.map((color, index) => {
@@ -123,7 +124,7 @@ const ColorPicker = ({
             style: {
               border: validHex === false ? "1px solid red" : "1px solid lightgray"
             }
-          }), /*#__PURE__*/_jsx("button", {
+          }), /*#__PURE__*/_jsx(ButtonBase, {
             className: "colorSaveBtn",
             style: {
               background: validHex ? "#2563EB" : "#64748B",

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

@@ -3,7 +3,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export const logo = {
   color: color => /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "#000000",
+    fill: "#64748B",
     height: "20px",
     width: "20px",
     version: "1.1",
@@ -12,7 +12,7 @@ export const logo = {
     children: /*#__PURE__*/_jsxs("g", {
       children: [/*#__PURE__*/_jsx("path", {
         d: "M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z",
-        fill: color || "#000"
+        fill: color || "#64748B"
       }), /*#__PURE__*/_jsx("path", {
         d: "M5,24h4c0.6,0,1-0.4,1-1s-0.4-1-1-1H8.6l1.9-4h11.1l1.9,4H23c-0.6,0-1,0.4-1,1s0.4,1,1,1h4c0.6,0,1-0.4,1-1s-0.4-1-1-1   h-1.4L16.9,3.6C16.7,3.2,16.4,3,16,3s-0.7,0.2-0.9,0.6L6.4,22H5c-0.6,0-1,0.4-1,1S4.4,24,5,24z M16,6.3l4.6,9.7h-9.2L16,6.3z"
       })]
@@ -33,20 +33,20 @@ export const logo = {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z",
-      fill: "#000000"
+      fill: "#64748B"
     }), /*#__PURE__*/_jsx("path", {
       d: "M20.8535 5.50439L24.389 9.03993",
-      stroke: "#000000",
+      stroke: "#64748B",
       strokeWidth: "4",
       strokeLinecap: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z",
-      stroke: "#000000",
+      stroke: "#64748B",
       strokeWidth: "4",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
       d: "M12 20.0732L28.961 25.6496",
-      stroke: "#000000",
+      stroke: "#64748B",
       strokeWidth: "4",
       strokeLinecap: "round"
     }), /*#__PURE__*/_jsx("path", {

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

@@ -9,6 +9,8 @@ import usePopup from "../../utils/customHooks/usePopup";
 import { insertEmbed } from "../../utils/embed";
 import Uploader from "../../common/Uploader";
 import "./Embed.css";
+// import commonStyle from "../../commonStyle";
+// import styled from "@emotion/styled";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -19,7 +21,8 @@ const EMBED_LABEL = {
 const Embed = ({
   editor,
   format,
-  customProps
+  customProps,
+  className
 }) => {
   const urlInputRef = useRef();
   const [open, setOpen] = useState(false);
@@ -68,6 +71,7 @@ const Embed = ({
       [e.target.name]: e.target.value
     });
   };
+  const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(IconButton, {
       className: isBlockActive(editor, format) ? "active" : "",
@@ -83,6 +87,7 @@ const Embed = ({
     }), /*#__PURE__*/_jsx(Dialog, {
       open: open,
       fullWidth: true,
+      className: `dialogComp`,
       children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -100,6 +105,7 @@ const Embed = ({
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "h6",
               className: "popupTitle",
+              color: "primary",
               children: EMBED_LABEL[format] || "Embed"
             }), /*#__PURE__*/_jsx(Grid, {
               style: {
@@ -127,7 +133,7 @@ const Embed = ({
                 size: "small",
                 fullWidth: true,
                 onChange: handleChange,
-                value: formData?.url || ""
+                value: imageURL || ""
               })
             }), /*#__PURE__*/_jsx(Uploader, {
               value: formData,
@@ -157,4 +163,5 @@ const Embed = ({
     })]
   });
 };
-export default Embed;
+export default Embed;
+// export default styled(commonStyle)(Embed);

package/dist/Editor/Elements/Equation/EquationButton.js

@@ -44,7 +44,7 @@ const EquationButton = ({
         icon: "equation"
       })
     }), showInput && /*#__PURE__*/_jsxs("div", {
-      className: "popup",
+      className: "af-popup",
       children: [/*#__PURE__*/_jsxs("div", {
         style: {
           display: "flex",

package/dist/Editor/Elements/ID/Id.js

@@ -40,7 +40,7 @@ const Id = ({
         icon: "addId"
       })
     }), showInput && /*#__PURE__*/_jsxs("div", {
-      className: "popup",
+      className: "af-popup",
       style: {
         display: "flex",
         gap: "4px"

package/dist/Editor/Elements/ImageText/ImageText.js

@@ -1,14 +1,41 @@
 import React from "react";
+import { IconButton } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ImageText = props => {
   const {
     attributes,
+    element,
     children
   } = props;
-  return /*#__PURE__*/_jsx("div", {
+  const editor = useSlateStatic();
+  const onDelete = () => {
+    const path = ReactEditor.findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: [...path]
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
     className: "image-text",
     ...attributes,
-    children: children
+    style: {
+      position: "relative"
+    },
+    children: [children, /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onDelete,
+        style: {
+          background: "#FFF",
+          position: "absolute",
+          right: "0px",
+          top: "0px"
+        },
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      })
+    })]
   });
 };
 export default ImageText;

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

@@ -22,7 +22,7 @@ const Link = ({
       target: element.target,
       children: children
     }), selected && focused && /*#__PURE__*/_jsxs("div", {
-      className: "link-popup",
+      className: "af-link-popup",
       contentEditable: false,
       children: [/*#__PURE__*/_jsx("a", {
         href: element.href,

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

@@ -1,11 +1,14 @@
 import { useRef, useState } from "react";
 import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography } from "@mui/material";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox
+// styled,
+} from "@mui/material";
+// import { styled } from "@mui/material/styles";
 import CloseIcon from "@mui/icons-material/Close";
-import { CheckBox } from "@mui/icons-material";
 import { insertLink } from "../../utils/link";
 import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
+// import styled from "@emotion/styled";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
@@ -56,6 +59,7 @@ const LinkButton = props => {
       })
     }), showInput && /*#__PURE__*/_jsx(Dialog, {
       open: true,
+      className: `dialogComp`,
       children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -75,6 +79,7 @@ const LinkButton = props => {
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "h6",
               className: "popupTitle",
+              color: "primary",
               children: "LINK"
             }), /*#__PURE__*/_jsx("div", {
               style: {
@@ -112,12 +117,13 @@ const LinkButton = props => {
               },
               children: /*#__PURE__*/_jsx(FormControl, {
                 children: /*#__PURE__*/_jsx(FormControlLabel, {
-                  control: /*#__PURE__*/_jsx(CheckBox, {
+                  control: /*#__PURE__*/_jsx(Checkbox, {
                     checked: showInNewTab,
                     onChange: handleInputChange
                   }),
                   label: /*#__PURE__*/_jsx(Typography, {
                     variant: "body1",
+                    color: "primary",
                     sx: {
                       pl: 1
                     },
@@ -146,4 +152,5 @@ const LinkButton = props => {
     })]
   });
 };
-export default LinkButton;
+export default LinkButton;
+// export default styled(commonStyle)(LinkButton);

package/dist/Editor/Elements/Link/styles.css

@@ -2,7 +2,7 @@
   display: inline;
   position: relative;
 }
-.link-popup{
+.af-link-popup{
     position: absolute;
   left: 0;
   display: flex;

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

@@ -2,9 +2,9 @@ import React from "react";
 import { IconButton } from "@mui/material";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
-import { useSlateStatic } from "slate-react";
+import { ReactEditor, useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const NewLineButton = props => {
+const NewLineButton = () => {
   const editor = useSlateStatic();
   const onAddNewLine = () => {
     Transforms.insertNodes(editor, [{
@@ -13,17 +13,19 @@ const NewLineButton = props => {
         text: ""
       }]
     }], {
-      at: [editor.children.length]
+      at: [editor.children.length],
+      select: true
     });
+    ReactEditor.focus(editor);
   };
   return /*#__PURE__*/_jsx(IconButton, {
     title: "New Line",
     onClick: onAddNewLine,
     children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
       sx: {
-        fill: '#64748B',
-        width: '18px',
-        height: '18px'
+        fill: "#64748B",
+        width: "18px",
+        height: "18px"
       }
     })
   });

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

@@ -1,4 +1,4 @@
-.signature-popup .MuiTab-root {
+.af-signature-popup .MuiTab-root {
     background: #ffffff;
     border: 1px solid #d3d3d3 !important;
     border-radius: 7px;
@@ -13,18 +13,18 @@
     color: #0f172a !important;
     opacity: 0.7;
   }
-  .signature-popup .MuiTab-root.Mui-selected {
+  .af-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 {
+  .af-signature-popup .MuiTabs-indicator {
     display: none;
 }
 
-.signature-popup input.signColorPicker {
+.af-signature-popup input.signColorPicker {
     margin-bottom: 0px !important;
   }
   input[type="color"].signColorPicker {

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

@@ -4,8 +4,10 @@ import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
-import './Signature.css';
+import "./Signature.css";
 import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../../common/EditorIcons";
+import CommonStyle from "../../commonStyle";
+import { styled } from "@mui/material/styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -14,7 +16,8 @@ const SignaturePopup = props => {
   const {
     onSave,
     onClear,
-    customProps
+    customProps,
+    className
   } = props;
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
@@ -79,6 +82,7 @@ const SignaturePopup = props => {
         children: "Sign Here"
       })
     }), /*#__PURE__*/_jsx(Dialog, {
+      className: `${className} dialogComp`,
       open: open,
       onClose: handleClose,
       fullWidth: true,
@@ -103,6 +107,7 @@ const SignaturePopup = props => {
               children: [/*#__PURE__*/_jsx(Typography, {
                 variant: "h6",
                 className: "popupTitle",
+                color: "primary",
                 children: "SIGNATURE"
               }), /*#__PURE__*/_jsx("div", {
                 style: {
@@ -119,7 +124,7 @@ const SignaturePopup = props => {
             sx: {
               p: 0
             },
-            className: "signature-popup",
+            className: "af-signature-popup",
             children: [/*#__PURE__*/_jsx("div", {
               className: "signature-btn-grps",
               children: /*#__PURE__*/_jsxs(Tabs, {
@@ -293,4 +298,6 @@ const SignaturePopup = props => {
     })]
   });
 };
-export default SignaturePopup;
+
+// export default SignaturePopup;
+export default styled(SignaturePopup)(CommonStyle);

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

@@ -117,6 +117,7 @@ const Table = props => {
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
+      className: "tableToolBar",
       style: {
         position: "absolute",
         top: "-40px",

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

@@ -5,6 +5,8 @@ import { Transforms } from "slate";
 import { TableUtil } from "../../utils/table.js";
 import "./TableSelector.css";
 import CloseIcon from "@mui/icons-material/Close";
+// import commonStyle from "../../commonStyle";
+// import styled from "@emotion/styled";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableSelector = ({
@@ -50,7 +52,7 @@ const TableSelector = ({
       })
     }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
       open: showOptions,
-      className: "tablePopup",
+      className: `dialogComp tablePopup`,
       children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -68,6 +70,7 @@ const TableSelector = ({
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "h6",
               className: "popupTitle",
+              color: "primary",
               children: "Table"
             }), /*#__PURE__*/_jsx(Grid, {
               style: {
@@ -103,7 +106,7 @@ const TableSelector = ({
                   variant: "body1",
                   color: "textSecondary",
                   sx: {
-                    fontSize: '14px'
+                    fontSize: "14px"
                   },
                   children: "No.of Rows"
                 })
@@ -129,7 +132,7 @@ const TableSelector = ({
                   variant: "body1",
                   color: "textSecondary",
                   sx: {
-                    fontSize: '14px'
+                    fontSize: "14px"
                   },
                   children: "No.of Columns"
                 })
@@ -163,4 +166,5 @@ const TableSelector = ({
     }) : null]
   });
 };
-export default TableSelector;
+export default TableSelector;
+// export default styled(commonStyle)(TableSelector);

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -1,6 +1,7 @@
 const usePopupStyle = () => ({
   popupWrapper: {
-    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)"
+    boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+    zIndex: 999
   },
   textFormatWrapper: {
     padding: "0px 24px 24px 24px",

package/dist/Editor/common/StyleBuilder/buttonStyle.js

@@ -5,10 +5,14 @@ const buttonStyle = [{
     label: "Button Text",
     key: "label",
     type: "text"
-  }, {
-    label: "Button URL",
-    type: "text",
-    key: "url"
+  }]
+}, {
+  tab: "Link",
+  value: "link",
+  fields: [{
+    label: "Button Link",
+    key: "buttonLink",
+    type: "buttonLink"
   }]
 }, {
   tab: "Banner Spacing",

package/dist/Editor/common/StyleBuilder/embedImageStyle.js

@@ -1,12 +1,4 @@
 const embedImageStyle = [{
-  tab: "Image Texts",
-  value: "imageTexts",
-  fields: [{
-    label: "Image Texts",
-    key: "imageTexts",
-    type: "imageTexts"
-  }]
-}, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel } from "@mui/material";
+import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Alignment = props => {
@@ -21,7 +21,6 @@ const Alignment = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    padding: 3,
     style: {
       paddingTop: "12px"
     },
@@ -32,7 +31,11 @@ const Alignment = props => {
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
           id: "demo-row-radio-buttons-group-label",
-          children: "Horizantal Position"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Horizantal Position"
+          })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",
@@ -60,7 +63,11 @@ const Alignment = props => {
       children: /*#__PURE__*/_jsxs(FormControl, {
         children: [/*#__PURE__*/_jsx(FormLabel, {
           id: "demo-row-radio-buttons-group-label",
-          children: "Vertical Position"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            children: "Vertical Position"
+          })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Grid, Button } from "@mui/material";
+import { Grid, Button, Typography } from "@mui/material";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { convertBase64 } from "../../../utils/helper";
 import { uploadFile } from "../../../service/fileupload";
@@ -43,14 +43,13 @@ const BackgroundImage = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    padding: 3,
     children: [/*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
       style: {
         display: "flex"
       },
-      justifyContent: "center",
+      justifyContent: "space-between",
       alignItems: "center",
       children: [/*#__PURE__*/_jsxs(Button, {
         component: "label",
@@ -59,16 +58,24 @@ const BackgroundImage = props => {
         children: ["Upload file", /*#__PURE__*/_jsx("input", {
           type: "file",
           style: {
-            opacity: 0
+            opacity: 0,
+            width: "0px"
           },
           onChange: handleChange
         })]
-      }), /*#__PURE__*/_jsx("input", {
-        type: "checkbox",
-        value: "none",
-        checked: value === "none",
-        onChange: onRemoveBG
-      }), " ", "None"]
+      }), /*#__PURE__*/_jsxs(Grid, {
+        className: "dflex",
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "checkbox",
+          value: "none",
+          checked: value === "none",
+          onChange: onRemoveBG
+        }), " ", /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          children: "Remove"
+        })]
+      })]
     }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

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

@@ -0,0 +1,113 @@
+import React from "react";
+import { FormControl, FormLabel, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ButtonLink = props => {
+  const {
+    value,
+    data,
+    elementProps,
+    customProps,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const {
+    metadata
+  } = customProps || {
+    metadata: {}
+  };
+  const {
+    buttonLink
+  } = metadata || {
+    actionTrigger: {}
+  };
+  const {
+    actionTrigger
+  } = buttonLink || {};
+  const {
+    options,
+    onClick
+  } = actionTrigger || {
+    options: []
+  };
+  const optSelected = options.filter(f => f.selected) || [];
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...value,
+        [e.target.name]: e.target.value,
+        onClick: onClick || {}
+      }
+    });
+  };
+  const onURLChange = e => {
+    onChange({
+      url: e.target.value
+    });
+  };
+  const renderLinkTypeFields = () => {
+    if (value?.linkType === "webAddress") {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          size: "small",
+          placeholder: "https://",
+          onChange: onURLChange,
+          value: elementProps?.url
+        })
+      });
+    } else if (value?.linkType === "actionTrigger") {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(Select, {
+          name: "actionStep",
+          size: "small",
+          fullWidth: true,
+          value: optSelected[0]?.value || "",
+          children: optSelected.map(m => {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: m.value,
+              children: m.label
+            }, `bl_tr_opt_${m.value}`);
+          })
+        })
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 4,
+    spacing: 1,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-radio-buttons-group-label",
+          children: "Where do you want to Link?"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-radio-buttons-group-label",
+          value: value?.linkType || "",
+          name: "linkType",
+          onChange: handleChange,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "actionTrigger",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Action Trigger"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "webAddress",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Web Address"
+          })]
+        })]
+      })
+    }), renderLinkTypeFields()]
+  });
+};
+export default ButtonLink;

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

@@ -18,7 +18,6 @@ const GridSize = props => {
   };
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
-    padding: 3,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

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

@@ -8,6 +8,7 @@ import GridSize from "./gridSize";
 import ElementSize from "./elementSize";
 import ImageTexts from "./imageTexts";
 import MenusArray from "./menusArray";
+import ButtonLink from "./buttonLink";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -18,6 +19,7 @@ const FieldMap = {
   gridSize: GridSize,
   elementSize: ElementSize,
   imageTexts: ImageTexts,
-  menusArray: MenusArray
+  menusArray: MenusArray,
+  buttonLink: ButtonLink
 };
 export default FieldMap;

package/dist/Editor/common/StyleBuilder/index.js

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Tabs, Tab, Grid, IconButton, Typography } from "@mui/material";
 import FieldMap from "./fieldTypes";
 import CloseIcon from "@mui/icons-material/Close";
+import commonStyle from "../../commonStyle";
+import { styled } from "@mui/material/styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const StyleContent = props => {
@@ -70,6 +72,7 @@ const StyleBuilder = props => {
     onClose,
     onDelete,
     customProps
+    // className,
   } = props;
   const [elementProps, setElementProps] = useState(element);
   const [tab, setTab] = useState(renderTabs[0]?.value);
@@ -88,6 +91,7 @@ const StyleBuilder = props => {
   return /*#__PURE__*/_jsx(Dialog, {
     open: true,
     fullWidth: true,
+    className: ` dialogComp`,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
@@ -105,6 +109,7 @@ const StyleBuilder = props => {
           children: [/*#__PURE__*/_jsx(Typography, {
             variant: "h6",
             className: "popupTitle",
+            color: "primary",
             children: title
           }), /*#__PURE__*/_jsx(Grid, {
             style: {
@@ -155,4 +160,6 @@ const StyleBuilder = props => {
     })
   });
 };
-export default StyleBuilder;
+
+// export default StyleBuilder;
+export default styled(StyleBuilder)(commonStyle);

package/dist/Editor/common/Uploader.js

@@ -55,9 +55,9 @@ const Uploader = props => {
         children: [/*#__PURE__*/_jsxs(Button, {
           component: "label",
           sx: {
-            display: 'inline-flex',
-            width: '154px',
-            whiteSpace: 'nowrap'
+            display: "inline-flex",
+            width: "154px",
+            whiteSpace: "nowrap"
           },
           variant: "contained",
           startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
@@ -73,7 +73,7 @@ const Uploader = props => {
           color: "secondary",
           onClick: onRemoveBG,
           children: "Clear"
-        }) : '']
+        }) : ""]
       })
     }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
       item: true,

package/dist/Editor/commonStyle.js

@@ -0,0 +1,11 @@
+const commonStyle = theme => ({
+  "&.dialogComp": {
+    "& .close-popupbtn": {
+      //   background: theme.palette.containers.bg7,
+    }
+  },
+  ".close-popupbtn": {
+    // background: theme.palette.containers.bg7,
+  }
+});
+export default commonStyle;

package/dist/Editor/plugins/withEmbeds.js

@@ -16,6 +16,7 @@ const withEmbeds = editor => {
   editor.insertBreak = (...args) => {
     const parentPath = Path.parent(editor.selection.focus.path);
     const parentNode = Node.get(editor, parentPath);
+    console.log(parentNode, parentPath, args);
     if (editor.isVoid(parentNode)) {
       const nextPath = Path.next(parentPath);
       Transforms.insertNodes(editor, {

package/dist/Editor/service/actionTrigger.js

@@ -0,0 +1,16 @@
+export const actionButtonRedirect = async (formData, props) => {
+  try {
+    const response = await fetch(`${props.url}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(formData)
+    });
+    const result = await response.json();
+    return result.data;
+  } catch (err) {
+    console.log(err);
+    return err;
+  }
+};

package/dist/Editor/utils/button.js

@@ -4,7 +4,10 @@ export const insertButton = editor => {
     type: "button",
     children: [{
       text: ""
-    }]
+    }],
+    buttonLink: {
+      linkType: "webAddress"
+    }
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);

package/package.json

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