@flozy/editor 3.7.1 → 3.7.3

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -0,0 +1,16 @@
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const EmojiPicker = props => {
+  const {
+    onEmojiSelect
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Picker, {
+      data: data,
+      onEmojiSelect: onEmojiSelect
+    })
+  });
+};
+export default EmojiPicker;

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsx(RadioGroup, {
+          children: /*#__PURE__*/_jsxs(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: /*#__PURE__*/_jsx(FormControlLabel, {
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            })
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "after",
+              label: "After",
+              onChange: () => {
+                setSchedule("after");
+              },
+              control: /*#__PURE__*/_jsx(Radio, {
+                size: "small"
+              })
+            })]
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

package/dist/Editor/Elements/Form/Workflow/UserInputs.js

@@ -39,7 +39,8 @@ const UserInputs = props => {
           fontStyleOptions: ['underline'],
           hideLink: true,
           hideTextColor: true
-        }
+        },
+        theme: theme
       })
     })
   });

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

@@ -15,6 +15,7 @@ import { gridItem } from "../../utils/gridItem";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import useWindowResize from "../../hooks/useWindowResize";
+import { useTheme } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -75,6 +76,7 @@ const GridToolBar = ({
   }) : null;
 };
 const Grid = props => {
+  const theme = useTheme();
   const {
     attributes,
     children,
@@ -277,7 +279,7 @@ const Grid = props => {
   } = getBreakPointsValue(borderRadius, size?.device) || {};
   return /*#__PURE__*/_jsxs(GridContainer, {
     container: true,
-    className: `grid-container ${grid} has-hover element-root`,
+    className: `grid-container ${grid} has-hover element-root dpath`,
     ...attributes,
     ...sectionId,
     sx: {

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

@@ -8,6 +8,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { isEmptyNode } from "../../utils/helper";
+import { useTheme } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItemToolbar = ({
@@ -34,6 +35,7 @@ const GridItemToolbar = ({
   }) : null;
 };
 const GridItem = props => {
+  const theme = useTheme();
   const {
     attributes,
     children,
@@ -105,7 +107,7 @@ const GridItem = props => {
   return /*#__PURE__*/_jsxs(Item, {
     item: true,
     component: "div",
-    className: `grid-item element-root gi-top-wrpr`,
+    className: `grid-item element-root gi-top-wrpr dpath`,
     ...attributes,
     sx: {
       width: {
@@ -119,7 +121,7 @@ const GridItem = props => {
         xs: xsHidden ? "none" : "flex"
       },
       flexDirection: flexDirection || "column",
-      background: bgColor || "transparent",
+      background: bgColor,
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderRadius: {

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
-import * as fIcons from "@mui/icons-material";
 import { Box } from "@mui/material";
+import Check from "@mui/icons-material/Check";
 import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +23,6 @@ const InlineIcon = props => {
     right,
     bottom
   } = bannerSpacing || {};
-  const BtnIcon = fIcons["Check"];
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
     className: "editor-icon-text",
@@ -42,7 +41,7 @@ const InlineIcon = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Check, {}), /*#__PURE__*/_jsx("div", {
       contentEditable: true,
       children: children
     })]

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

@@ -9,6 +9,7 @@ import { removeLink } from "../../utils/link";
 import LinkPopup from "./LinkPopup";
 import "./styles.css";
 import { absoluteLink } from "../../utils/helper";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = props => {
@@ -29,6 +30,9 @@ const Link = props => {
   const path = ReactEditor.findPath(editor, element);
   const urlPath = element.url || element.href;
   const absLink = absoluteLink(urlPath);
+  const {
+    theme
+  } = useEditorContext();
   const updateLink = () => {
     Transforms.setNodes(editor, {
       href: linkData?.url,
@@ -107,7 +111,8 @@ const Link = props => {
       linkData: linkData,
       handleClose: handleClose,
       handleInputChange: handleInputChange,
-      handleInsertLink: updateLink
+      handleInsertLink: updateLink,
+      theme: theme
     })]
   });
 };

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

@@ -9,7 +9,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkButton = props => {
   const {
-    editor
+    editor,
+    theme
   } = props;
   const linkInputRef = useRef(null);
   const [showInput, setShowInput] = useState(false);
@@ -77,7 +78,8 @@ const LinkButton = props => {
       linkData: linkData,
       handleClose: handleClose,
       handleInputChange: handleInputChange,
-      handleInsertLink: handleInsertLink
+      handleInsertLink: handleInsertLink,
+      theme: theme
     })]
   });
 };

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

@@ -1,6 +1,7 @@
 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 LinkPopupStyles from "./LinkPopupStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LinkPopup = props => {
@@ -9,8 +10,10 @@ const LinkPopup = props => {
     handleClose,
     linkData,
     handleInputChange,
-    handleInsertLink
+    handleInsertLink,
+    theme
   } = props;
+  const classes = LinkPopupStyles(theme);
   return /*#__PURE__*/_jsxs(Dialog, {
     fullWidth: true,
     open: open,
@@ -44,13 +47,16 @@ const LinkPopup = props => {
         style: {
           paddingTop: "12px"
         },
+        className: classes.titleTypo,
         children: /*#__PURE__*/_jsx(TextField, {
           size: "small",
           fullWidth: true,
           value: linkData?.name,
           name: "name",
           placeholder: "Link Title",
-          onChange: handleInputChange
+          onChange: handleInputChange,
+          sx: classes.addLinkField,
+          className: classes.addLinkField
         })
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -64,7 +70,9 @@ const LinkPopup = props => {
           name: "url",
           value: linkData?.url,
           placeholder: "https://google.com",
-          onChange: handleInputChange
+          onChange: handleInputChange,
+          sx: classes.addLinkField,
+          className: classes.addLinkField
         })
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,

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

@@ -0,0 +1,28 @@
+const LinkPopupStyles = theme => ({
+  addLinkField: {
+    "& .MuiOutlinedInput-input": {
+      fontSize: "12px",
+      fontWeight: 500,
+      color: `${theme?.palette?.editor?.textColor} !important`
+    },
+    "& .MuiFormHelperText-root": {
+      color: `${theme?.palette?.editor?.textColor} !important`
+    },
+    "& .MuiOutlinedInput-root": {
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+      color: `${theme?.palette?.editor?.textColor} !important`,
+      borderRadius: "7px",
+      "& fieldset": {
+        borderColor: "#D8DDE1"
+      },
+      "&:hover fieldset": {
+        borderColor: "#64748B"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#2563EB"
+      },
+      "& .MuiFormLabel-root": {}
+    }
+  }
+});
+export default LinkPopupStyles;

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

@@ -11,7 +11,9 @@ const CheckList = ({
   attributes,
   children,
   element,
-  isEmpty
+  isEmpty,
+  className,
+  style
 }) => {
   const editor = useSlateStatic();
   const readOnly = useReadOnly();
@@ -30,12 +32,14 @@ const CheckList = ({
   const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
+      className: className || "",
       ...attributes,
       style: {
         textAlign: element.alignment || "left",
         display: "flex",
         justifyContent: "center",
-        alignItems: "center"
+        alignItems: "center",
+        ...(style || {})
       },
       children: [/*#__PURE__*/_jsxs("div", {
         contentEditable: false,

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

@@ -117,7 +117,7 @@ const TableCell = props => {
     className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
     style: {
       position: "relative",
-      backgroundColor: bgColor || entireBgColor,
+      background: bgColor || entireBgColor,
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },

package/dist/Editor/MiniEditor.js

@@ -23,7 +23,8 @@ const MiniEditor = props => {
     miniEditorPlaceholder,
     className,
     otherProps,
-    onSave
+    onSave,
+    theme
   } = props;
   const {
     CHARACTERS = []
@@ -132,6 +133,7 @@ const MiniEditor = props => {
     editor: editor,
     initialValue: content,
     onChange: onChange,
+    theme: theme,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
       ...props
     }), /*#__PURE__*/_jsx(Editable, {

package/dist/Editor/Styles/EditorStyles.js

@@ -188,6 +188,7 @@ const editorStyles = ({
       }
     },
     "& .checkbox-edit": {
+      alignSelf: "flex-start",
       "& .MuiFormControlLabel-root": {
         marginRight: "0px"
       },
@@ -212,7 +213,7 @@ const editorStyles = ({
         "& svg": {
           width: "17px",
           height: "18px",
-          marginTop: '-1px'
+          marginTop: "-1px"
         }
       }
     },
@@ -273,7 +274,7 @@ const editorStyles = ({
   },
   cardsTypo: {
     color: theme?.palette?.editor?.textColor,
-    fontSize: '14px !important'
+    fontSize: "14px !important"
   }
 });
 export default editorStyles;

package/dist/Editor/Toolbar/Basic/index.js

@@ -25,7 +25,8 @@ const BasicToolbar = props => {
       hideTextColor = false,
       hideResetIcon = true,
       onResetClick = () => {}
-    }
+    },
+    theme
   } = props;
   // state
   const [activeColor, setActiveColor] = useState("#000000");
@@ -65,7 +66,8 @@ const BasicToolbar = props => {
             item: true,
             children: /*#__PURE__*/_jsx(LinkButton, {
               active: isBlockActive(editor, link.format),
-              editor: editor
+              editor: editor,
+              theme: theme
             }, link.id)
           }), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
             item: true,

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

@@ -1,8 +1,32 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
-import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
 import { fontFamilyMap } from "../../utils/font";
+import { toolbarGroups } from "../toolbarGroups.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const allTools = toolbarGroups.flat();
+const fontWeight = allTools.find(f => f.format === "fontWeight");
+const getValue = (editor, format) => {
+  switch (format) {
+    case "fontFamily":
+      {
+        const style = getSelectedElementStyle("font-family", editor);
+        const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
+        return val || fontFamilyMap.PoppinsRegular;
+      }
+    case "fontWeight":
+      {
+        const {
+          options
+        } = fontWeight || {};
+        const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
+        const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
+        return selected?.value;
+      }
+    default:
+      return activeMark(editor, format);
+  }
+};
 const Dropdown = ({
   classes,
   editor,
@@ -10,7 +34,7 @@ const Dropdown = ({
   options,
   width
 }) => {
-  const value = activeMark(editor, format);
+  const value = getValue(editor, format);
   const changeMarkData = (event, format) => {
     event.preventDefault();
     const value = event.target.value;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
-import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
+import { toggleMark, isMarkBtnActive } from "../../utils/SlateUtilityFunctions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkButton = ({
   editor,
@@ -9,7 +9,7 @@ const MarkButton = ({
   title
 }) => {
   return /*#__PURE__*/_jsx(Button, {
-    active: isMarkActive(editor, format),
+    active: isMarkBtnActive(editor, format),
     format: format,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -1,9 +1,8 @@
 import React from "react";
 import { TextField, IconButton } from "@mui/material";
-import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
-import { headingMap, sizeMap } from "../../utils/font.js";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
-import { getBreakPointsValue } from "../../helper/theme.js";
+import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
 import useWindowResize from "../../hooks/useWindowResize.js";
 import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +16,8 @@ const TextSize = ({
 }) => {
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
-  const value = getBreakPointsValue(val, size?.device);
+  const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
+  const value = noFontSize ? getTextSizeVal(editor) : getBreakPointsValue(val, size?.device);
   const updateMarkData = newVal => {
     let upData = {
       ...getBreakPointsValue(val),
@@ -46,13 +46,7 @@ const TextSize = ({
   };
   const getSizeVal = () => {
     try {
-      let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
-      Object.entries(headingMap).forEach(([format, value]) => {
-        if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
-          size = value;
-        }
-      });
-      return parseInt(size);
+      return parseInt(value);
     } catch (err) {
       return "";
     }

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js

@@ -1,10 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-import { activeMark, addMarkData, isBlockActive } from "../../../utils/SlateUtilityFunctions";
+import { activeMark, addMarkData } from "../../../utils/SlateUtilityFunctions";
 import { Button, IconButton, Popover, TextField } from "@mui/material";
 import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
-import { headingMap, sizeMap } from "../../../utils/font";
+import { BREAKPOINTS_DEVICES, getBreakPointsValue, getTextSizeVal } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
@@ -19,7 +18,7 @@ function SelectFontSize({
   const containerRef = useRef();
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
-  const value = getBreakPointsValue(val, size?.device);
+  const value = getTextSizeVal(editor);
   const timerRef = useRef();
   const updateMarkData = newVal => {
     let upData = {
@@ -53,13 +52,7 @@ function SelectFontSize({
   };
   const getSizeVal = () => {
     try {
-      let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
-      Object.entries(headingMap).forEach(([format, value]) => {
-        if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
-          size = value;
-        }
-      });
-      return parseInt(size);
+      return parseInt(value);
     } catch (err) {
       return "";
     }