@flozy/editor 1.7.5 → 1.7.6

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

@@ -1,14 +1,10 @@
 import { useRef, useState } from "react";
-import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Tooltip
-// styled,
-} from "@mui/material";
-// import { styled } from "@mui/material/styles";
-import CloseIcon from "@mui/icons-material/Close";
+import { Editor, Transforms } from "slate";
+import { IconButton, Tooltip } from "@mui/material";
 import { insertLink } from "../../utils/link";
 import Icon from "../../common/Icon";
-import { isBlockActive } from "../../utils/SlateUtilityFunctions";
-// import styled from "@emotion/styled";
+import { getBlockActive } from "../../utils/SlateUtilityFunctions";
+import LinkPopup from "./LinkPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
@@ -17,31 +13,45 @@ const LinkButton = props => {
   } = props;
   const linkInputRef = useRef(null);
   const [showInput, setShowInput] = useState(false);
-  const [url, setUrl] = useState("");
-  const [showInNewTab, setShowInNewTab] = useState(false);
+  const [linkData, setLinkData] = useState({
+    name: "",
+    url: "",
+    showInNewTab: true
+  });
   const [selection, setSelection] = useState();
+  const {
+    isActive,
+    props: blockProps
+  } = getBlockActive(editor, "link");
   const handleInsertLink = () => {
     Transforms.select(editor, selection);
     insertLink(editor, {
-      url,
-      showInNewTab
+      ...linkData
+    });
+    setLinkData({
+      name: "",
+      url: "",
+      showInNewTab: true
     });
-    setUrl("");
     setShowInput(false);
-    setShowInNewTab(false);
   };
   const toggleLink = () => {
     setSelection(editor.selection);
+    setLinkData({
+      name: Editor.string(editor, editor.selection),
+      url: blockProps?.href || "",
+      showInNewTab: true
+    });
     setShowInput(true);
   };
   const handleInputChange = ({
     target
   }) => {
-    if (target.type === "checkbox") {
-      setShowInNewTab(target.checked);
-    } else {
-      setUrl(target.value);
-    }
+    let val = target.type === "checkbox" ? target.checked : target.value;
+    setLinkData({
+      ...linkData,
+      [target.name]: val
+    });
   };
   const handleClose = () => {
     setShowInput(false);
@@ -53,90 +63,20 @@ const LinkButton = props => {
       title: "Link",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: showInput ? "clicked" : "",
-        active: isBlockActive(editor, "link") ? "active" : "",
+        className: `${showInput ? "clicked" : ""} ${isActive ? "btnActive" : ""}`,
         format: "link",
         onClick: toggleLink,
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "link"
         })
       })
-    }), showInput && /*#__PURE__*/_jsxs(Dialog, {
-      fullWidth: true,
-      open: true,
-      className: `dialogComp`,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: /*#__PURE__*/_jsxs("div", {
-          style: {
-            display: "flex",
-            justifyContent: "space-between"
-          },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            className: "popupTitle",
-            color: "primary",
-            children: "LINK"
-          }), /*#__PURE__*/_jsx("div", {
-            style: {
-              display: "flex"
-            },
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: handleClose,
-              className: "close-popupbtn",
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(DialogContent, {
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 12,
-          style: {
-            paddingTop: "12px"
-          },
-          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",
-                color: "primary",
-                sx: {
-                  pl: 1
-                },
-                children: "Open in new tab"
-              })
-            })
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(DialogActions, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: handleClose,
-          className: "secondaryBtn",
-          children: "Cancel"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleInsertLink,
-          className: "primaryBtn",
-          children: "Add"
-        })]
-      })]
+    }), /*#__PURE__*/_jsx(LinkPopup, {
+      open: showInput,
+      linkData: linkData,
+      handleClose: handleClose,
+      handleInputChange: handleInputChange,
+      handleInsertLink: handleInsertLink
     })]
   });
 };
-export default LinkButton;
-// export default styled(commonStyle)(LinkButton);
+export default LinkButton;

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

@@ -0,0 +1,106 @@
+import React from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LinkPopup = props => {
+  const {
+    open,
+    handleClose,
+    linkData,
+    handleInputChange,
+    handleInsertLink
+  } = props;
+  return /*#__PURE__*/_jsxs(Dialog, {
+    fullWidth: true,
+    open: open,
+    className: `dialogComp`,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          display: "flex",
+          justifyContent: "space-between"
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
+          className: "popupTitle",
+          color: "primary",
+          children: "LINK"
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            display: "flex"
+          },
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: handleClose,
+            className: "close-popupbtn",
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogContent, {
+      children: [/*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        style: {
+          paddingTop: "12px"
+        },
+        children: /*#__PURE__*/_jsx(TextField, {
+          size: "small",
+          fullWidth: true,
+          value: linkData?.name,
+          name: "name",
+          placeholder: "Link Title",
+          onChange: handleInputChange
+        })
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        style: {
+          paddingTop: "12px"
+        },
+        children: /*#__PURE__*/_jsx(TextField, {
+          size: "small",
+          fullWidth: true,
+          name: "url",
+          value: linkData?.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, {
+              name: "showInNewTab",
+              checked: linkData?.showInNewTab,
+              onChange: handleInputChange
+            }),
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              color: "primary",
+              sx: {
+                pl: 1
+              },
+              children: "Open in new tab"
+            })
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        className: "secondaryBtn",
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleInsertLink,
+        className: "primaryBtn",
+        children: "Add"
+      })]
+    })]
+  });
+};
+export default LinkPopup;

package/dist/Editor/Elements/List/CheckList.js

@@ -1,55 +1,61 @@
 import React from "react";
 import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
 import { Transforms } from "slate";
+import { Checkbox, FormControlLabel } from "@mui/material";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const CheckList = ({
   attributes,
   children,
-  element
+  element,
+  isEmpty
 }) => {
   const editor = useSlateStatic();
   const readOnly = useReadOnly();
   const {
     checked
   } = element;
+  const path = ReactEditor.findPath(editor, element);
+  const handleCheck = e => {
+    Transforms.setNodes(editor, {
+      checked: e.target.checked
+    }, {
+      at: path
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "checkbox-list",
     style: {
-      textAlign: element.alignment || "left"
+      textAlign: element.alignment || "left",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
     },
-    children: [/*#__PURE__*/_jsxs("span", {
+    children: [/*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       className: "checkbox-edit",
-      children: [/*#__PURE__*/_jsx("input", {
-        type: "checkbox",
-        className: "styled-checkbox",
-        checked: checked,
-        style: {
-          marginRight: "8px"
-        },
-        onChange: event => {
-          const path = ReactEditor.findPath(editor, element);
-          const newProperties = {
-            checked: event.target.checked
-          };
-          Transforms.setNodes(editor, newProperties, {
-            at: path
-          });
-        }
+      children: [/*#__PURE__*/_jsx(FormControlLabel, {
+        control: /*#__PURE__*/_jsx(Checkbox, {
+          icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
+          checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+          checked: checked,
+          onChange: handleCheck
+        })
       }), /*#__PURE__*/_jsx("span", {
         className: "checkbox-inner"
       })]
-    }), /*#__PURE__*/_jsx("span", {
+    }), /*#__PURE__*/_jsx("div", {
       contentEditable: !readOnly,
       suppressContentEditableWarning: true,
-      className: "",
       style: {
         flex: 1,
         opacity: checked ? 1 : 1,
         textDecoration: !checked ? "none" : "none"
       },
+      className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
+      placeholder: "Todo List",
       children: children
     })]
   });

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { signedTextFonts } from "../../../utils/font";
-import { Grid, Button, TextField, InputAdornment, IconButton } from "@mui/material";
+import { Grid, Button, TextField, InputAdornment, IconButton, Typography } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,13 +33,19 @@ const TypeSignature = props => {
           textAlign: "center"
         },
         children: /*#__PURE__*/_jsx(Button, {
-          style: {
-            fontFamily: m.text
-          },
           fullWidth: true,
           onClick: onFontFamilyChange(m.value),
           className: m.value === fontFamily ? "active" : "",
-          children: name || "Signature"
+          children: /*#__PURE__*/_jsx(Typography, {
+            style: {
+              fontFamily: m.text,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              warp: "noWarp",
+              maxWidth: "120px"
+            },
+            children: name || "Signature"
+          })
         })
       }, `typesign-ff-${m.value}`);
     });

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

@@ -27,7 +27,9 @@ const SignaturePopup = props => {
   const [tab, setTab] = useState(0);
   const SeletectedTab = SignatureOptions[tab];
   const [signedData, setSignedData] = useState({
-    signedOn: new Date()
+    signedOn: new Date(),
+    signature: "",
+    signedText: ""
   });
   const [brush, setBrush] = useState({
     size: 1,
@@ -86,6 +88,15 @@ const SignaturePopup = props => {
       ...data
     });
   };
+  const onTabChange = newValue => {
+    setTab(newValue);
+    setSignedData({
+      signedOn: new Date(),
+      signature: "",
+      signedText: ""
+    });
+  };
+  const isEmpty = signedData?.signature === "" && signedData?.signedText === "";
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
       className: `signature-btn-container`,
@@ -155,7 +166,7 @@ const SignaturePopup = props => {
                 variant: "scrollable",
                 value: tab,
                 onChange: (e, newValue) => {
-                  setTab(newValue);
+                  onTabChange(newValue);
                 },
                 "aria-label": "Element Tabs",
                 children: [/*#__PURE__*/_jsx(Tab, {
@@ -346,8 +357,8 @@ const SignaturePopup = props => {
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn ${!signedData?.signature ? "disabled" : ""}`,
-                disabled: !signedData?.signature,
+                className: `primaryBtn ${isEmpty ? "disabled" : ""}`,
+                disabled: isEmpty,
                 children: "Save"
               })]
             })]

package/dist/Editor/Elements/SimpleText.js

@@ -1,29 +1,34 @@
 import React from "react";
 import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
-import { Node, Editor } from "slate";
 import { Box } from "@mui/material";
+import { getPageSettings } from "../utils/pageSettings";
+import { invertColor } from "../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SimpleTextStyle = () => ({
+const SimpleTextStyle = ({
+  pageColor
+}) => ({
   root: {
     position: "relative",
     padding: "0px",
     "& .placeholder-simple-text": {
-      color: "#B8C5D7",
-      background: "#FFF",
+      color: invertColor(pageColor),
+      background: "transparent",
       position: "absolute",
       zIndex: -1,
-      left: "4px",
+      left: "0px",
+      paddingLeft: "4px",
       top: 0,
       bottom: 0,
       margin: "auto",
       pointerEvents: "none",
       height: "18px",
-      padding: "0px",
+      overflow: "hidden",
+      fontSize: "14px",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
-        background: "#F2F6FA",
-        fontSize: "12px"
+        background: "transparent",
+        color: invertColor(pageColor)
       }
     }
   },
@@ -40,41 +45,40 @@ const SimpleTextStyle = () => ({
   }
 });
 const SimpleText = props => {
+  const editor = useSlateStatic();
   const {
     element,
     attributes,
     children,
-    customProps
+    customProps,
+    isEmpty
   } = props;
   const {
     readOnly,
     editorPlaceholder
   } = customProps;
-  const classes = SimpleTextStyle();
-  const editor = useSlateStatic();
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
+  const {
+    pageColor
+  } = pageSt?.pageProps || {};
+  const classes = SimpleTextStyle({
+    pageColor: pageColor || "rgba(255,255,255,1)"
+  });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
-  const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
-  const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
-  const isMoreText = (editor.selection ? Editor.string(editor, editor.selection) : "")?.trim()?.length === 0;
+  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty && selected;
+  const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
   return /*#__PURE__*/_jsxs(Box, {
     ...element.attr,
     ...attributes,
     className: `simple-text`,
     sx: classes.root,
-    children: [children, isMoreText && selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
-      className: "placeholder-simple-text",
-      children: ["Type ", /*#__PURE__*/_jsx("span", {
-        className: "bg-pad-sl",
-        children: "/"
-      }), " for browse elements"]
-    }) : null, isMoreText && emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
-      className: "placeholder-simple-text",
-      children: "Write Something..."
-    }) : null, editorPlaceholder && !selected ? /*#__PURE__*/_jsx("span", {
+    children: [children, /*#__PURE__*/_jsx("span", {
       className: "placeholder-simple-text",
-      children: editorPlaceholder
-    }) : null]
+      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? "Type / to browse elements" : ""
+    })]
   });
 };
 export default SimpleText;

package/dist/Editor/MiniEditor.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { createEditor } from 'slate';
+import React, { useCallback, useRef, useState } from "react";
+import { createEditor } from "slate";
 import { Slate, Editable, withReact } from "slate-react";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
 import { commands, mentionsEvent } from "./utils/events";
@@ -8,9 +8,9 @@ import Shorthands from "./common/Shorthands";
 // import withCommon from "./hooks/withCommon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const initialValue = [{
-  type: 'paragraph',
+  type: "paragraph",
   children: [{
-    text: ''
+    text: ""
   }]
 }];
 const MiniEditor = props => {
@@ -49,10 +49,8 @@ const MiniEditor = props => {
   const {
     search,
     target,
-    index,
     type
   } = mentions;
-  console.log("🚀 ~ MiniEditor ~ mentions:", mentions);
   const chars = type ? Shorthands[type]({
     ...mentions,
     CHARACTERS

package/dist/Editor/Styles/EditorStyles.js

@@ -1,5 +1,6 @@
 const editorStyles = ({
-  padHeight
+  padHeight,
+  placeHolderColor
 }) => ({
   root: {
     display: "flex",
@@ -82,6 +83,76 @@ const editorStyles = ({
         width: "24px !important",
         height: "24px !important"
       }
+    },
+    "& .ed-section-wrapper": {
+      display: "flex",
+      width: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
+      "&:hover": {
+        "& .ed-section-inner": {
+          "& .element-toolbar.ss": {
+            display: "block",
+            left: "8px",
+            top: "8px",
+            width: "fit-content"
+          }
+        },
+        "&:before": {
+          display: "block"
+        }
+      },
+      "& .ed-section-inner": {
+        maxWidth: "1440px",
+        "& .element-toolbar.ss": {
+          display: "none"
+        }
+      },
+      "&:before": {
+        content: '" "',
+        position: "absolute",
+        width: "calc(100% - 2px)",
+        height: "calc(100% - 2px)",
+        left: 0,
+        top: 0,
+        border: "1px solid #2563eb",
+        pointerEvents: "none",
+        display: "none"
+      }
+    },
+    "& .element-empty-btn": {
+      backgroundColor: "rgb(242, 241, 238)",
+      color: "rgba(55, 53, 47, 0.65)",
+      outline: 0,
+      border: 0,
+      padding: "16px 12px",
+      width: "100%",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "12px",
+      "& svg": {
+        marginRight: "8px"
+      }
+    },
+    "& .content-editable.empty": {
+      "&:after": {
+        color: placeHolderColor
+      }
+    },
+    "& .checkbox-edit": {
+      "& .MuiFormControlLabel-root": {
+        marginRight: "0px"
+      },
+      "& .MuiCheckbox-root": {
+        padding: "5px",
+        "& svg": {
+          width: "20px",
+          height: "20px"
+        }
+      }
     }
   }
 });

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

@@ -38,9 +38,10 @@ const TextSize = ({
     });
   };
   const onDecreaseSize = () => {
+    const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
     addMarkData(editor, {
       format,
-      value: `${combinedOldVal - 1 || 0}px`
+      value: `${newVal}px`
     });
   };
   return /*#__PURE__*/_jsx(_Fragment, {