@flozy/editor 1.7.4 → 1.7.6

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, {

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -43,6 +43,7 @@ const MiniToolbar = props => {
   };
   const onClose = () => {
     setPopper(null);
+    setFullScreen(false);
   };
   const toggleFullscreen = () => {
     setFullScreen(!fullScreen);
@@ -57,6 +58,7 @@ const MiniToolbar = props => {
         icon: Icon
       }) => {
         return /*#__PURE__*/_jsx(Tooltip, {
+          arrow: true,
           title: label,
           children: /*#__PURE__*/_jsx(IconButton, {
             className: type === popper ? "active" : "",
@@ -92,7 +94,9 @@ const MiniToolbar = props => {
           classes: popupStyles,
           editor: editor,
           customProps: customProps,
-          fullScreen: fullScreen
+          fullScreen: fullScreen,
+          setPopper: setPopper,
+          onClose: onClose
         })]
       }) : null
     })]

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

@@ -46,7 +46,8 @@ const AddTemplates = props => {
     classes,
     editor,
     fullScreen,
-    customProps
+    customProps,
+    onClose
   } = props;
   const {
     services
@@ -83,6 +84,7 @@ const AddTemplates = props => {
   const onSelectTemplate = card => () => {
     try {
       editor.insertNode(JSON.parse(card.content));
+      onClose();
     } catch (err) {
       console.log(err);
     }

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

@@ -215,6 +215,10 @@ const usePopupStyle = () => ({
         }
       }
     }
+  },
+  defaultBtn: {
+    color: '#0F172A',
+    textTransform: 'none'
   }
 });
 export default usePopupStyle;