@flozy/editor 2.1.1 → 2.1.2

package/dist/Editor/CommonEditor.js

@@ -31,6 +31,7 @@ import decorators from "./utils/Decorators";
 import useElement from "./utils/customHooks/useElement";
 import { getTRBLBreakPoints } from "./helper/theme";
 import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
+import useWindowResize from "./hooks/useWindowResize";
 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"];
@@ -95,6 +96,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     h: null
   });
   const [isScrolling, setIsScrolling] = useState(false);
+  const [isTextSelected, setIsTextSelected] = useState(false);
+  const [size] = useWindowResize();
   const {
     needDotsBG,
     footer,
@@ -362,6 +365,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       customProps: customProps
     }) : null;
   };
+  const hideMiniToolBar = useMemo(() => {
+    if (readOnly) {
+      return true;
+    }
+
+    // if (size?.device === "xs" && isTextSelected) {
+    //   return true;
+    // }
+  }, [readOnly, isTextSelected]);
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -422,7 +434,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                       "data-info": outsideEditorClickLabel,
                       children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
                         onDrawerOpen: onDrawerOpen,
-                        theme: theme
+                        theme: theme,
+                        setIsTextSelected: setIsTextSelected
                       }) : null, /*#__PURE__*/_jsx(Editable, {
                         className: "innert-editor-textbox",
                         readOnly: isReadOnly,
@@ -442,7 +455,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         theme: theme
                       }) : null]
                     })
-                  }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
+                  }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
                     toolbarOptions: toolbarOptions,
                     theme: theme
@@ -450,7 +463,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     sx: {
                       color: "rgb(100, 116, 139)",
                       fontSize: "13px",
-                      paddingBottom: "12px"
+                      paddingBottom: hideMiniToolBar ? "0px" : "12px"
                     },
                     align: "center",
                     "data-info": outsideEditorClickLabel,

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

@@ -3,6 +3,7 @@ import { Box, IconButton, Popover } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
+import ColorPicker from "./colorPicker.svg";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 let c = [];
@@ -104,7 +105,11 @@ const ColorButtons = props => {
     id,
     onSelect,
     classes,
-    activeColor
+    activeColor,
+    forMiniTool,
+    openColorTool,
+    onClose,
+    onColorPickerClick
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -114,6 +119,9 @@ const ColorButtons = props => {
   };
   const handleClose = () => {
     setAnchorEl(null);
+    if (onClose) {
+      onClose();
+    }
   };
   const handleSelect = color => () => {
     onSelect(color);
@@ -121,7 +129,7 @@ const ColorButtons = props => {
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
-    children: [/*#__PURE__*/_jsx(Box, {
+    children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
       children: [row1].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -134,9 +142,9 @@ const ColorButtons = props => {
           activeColor: activeColor
         }, `si_btn_row1_${m}_${i}`);
       })
-    }), /*#__PURE__*/_jsx(Popover, {
-      open: open,
-      anchorEl: anchorEl,
+    }), /*#__PURE__*/_jsxs(Popover, {
+      open: open || openColorTool,
+      anchorEl: anchorEl || openColorTool,
       onClose: handleClose,
       anchorOrigin: {
         vertical: "bottom",
@@ -148,7 +156,7 @@ const ColorButtons = props => {
       },
       sx: classes.colorPopper,
       className: "colorPopper",
-      children: /*#__PURE__*/_jsx(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
         sx: classes.colorButtonsInner,
         children: restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -160,7 +168,13 @@ const ColorButtons = props => {
             activeColor: activeColor
           }, `si_btn_${m}_${i}`);
         })
-      })
+      }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
+        onClick: onColorPickerClick,
+        children: /*#__PURE__*/_jsx("img", {
+          src: ColorPicker,
+          alt: "color wheel"
+        })
+      }) : null]
     })]
   });
 };

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

@@ -16,14 +16,18 @@ const DEFAULT_COLOR = {
   color: "#000000",
   bgcolor: "#FFFFFF"
 };
-const ColorPicker = ({
-  id,
-  format,
-  editor,
-  showHex,
-  title,
-  classes
-}) => {
+const ColorPicker = props => {
+  const {
+    id,
+    format,
+    editor,
+    showHex,
+    title,
+    classes,
+    forMiniTool,
+    openColorTool,
+    closeColorTool
+  } = props;
   const {
     theme
   } = useEditorContext();
@@ -55,7 +59,7 @@ const ColorPicker = ({
   };
   const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
       title: title,
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
@@ -73,7 +77,11 @@ const ColorPicker = ({
       classes: pickerStyles,
       onSelect: onSelect,
       activeColor: activeColor,
-      id: id
+      id: id,
+      forMiniTool: forMiniTool,
+      openColorTool: openColorTool,
+      onClose: closeColorTool,
+      onColorPickerClick: onOpen
     }, id), /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,

package/dist/Editor/Elements/Color Picker/colorPicker.svg

@@ -0,0 +1,14 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="11.5" fill="#E9F3FE" stroke="url(#paint0_linear_15513_22074)" stroke-width="3"/>
+<path d="M13.168 6C13.168 6 8 11.9233 8 14.8319C8 18.0176 10.6552 20 13.168 20C15.8326 20 18.3359 17.9129 18.3359 14.8319C18.3359 11.9233 13.168 6 13.168 6ZM16.7402 15.7079C16.4528 17.3396 15.0339 18.0548 13.8992 18.0548C13.8071 18.0543 17.1447 16.6134 15.8583 12.3032C16.5362 13.0678 16.9627 14.4448 16.7402 15.7079Z" fill="#778599"/>
+<defs>
+<linearGradient id="paint0_linear_15513_22074" x1="20.9965" y1="23.8333" x2="5.28819" y2="2.16667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7025EB"/>
+<stop offset="0.170377" stop-color="#30C8E9"/>
+<stop offset="0.351324" stop-color="#2967F0"/>
+<stop offset="0.537615" stop-color="#DE1E1E"/>
+<stop offset="0.754249" stop-color="#EECE28"/>
+<stop offset="1" stop-color="#64EA61"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -30,7 +30,9 @@ const Image = ({
     width: oldWidth,
     xsHidden,
     objectFit,
-    frame = null
+    frame = null,
+    webAddress,
+    isNewTab
   } = element;
   const {
     readOnly
@@ -86,6 +88,14 @@ const Image = ({
       anchor: Editor.start(editor, path),
       focus: Editor.end(editor, path)
     });
+    if (webAddress) {
+      const refUrl = webAddress ? webAddress.includes("http") ? webAddress : `//${webAddress}` : "Link";
+      if (isNewTab) {
+        window.open(refUrl, "_blank").focus();
+      } else {
+        window.location.href = refUrl;
+      }
+    }
   };
   const onSettings = () => {
     setOpenSettings(true);
@@ -149,7 +159,8 @@ const Image = ({
         objectFit: "cover",
         boxShadow: boxShadow || "none",
         height: objectFit ? "100%" : "auto",
-        opacity: frame ? 0 : 1
+        opacity: frame ? 0 : 1,
+        cursor: webAddress ? "pointer" : ""
       },
       alt: alt,
       src: url,

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

@@ -71,10 +71,10 @@ const Form = props => {
       const formData = new FormData(formEle?.current);
       setLoading(true);
       let response = {};
-      const emailObject = getFieldProps("field_type", "email");
       let user_email = "";
       const validations = [];
       for (let pair of formData.entries()) {
+        const emailObject = getFieldProps("element", "email");
         if (emailObject?.name === pair[0]) {
           user_email = pair[1];
         }

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

@@ -95,7 +95,7 @@ const ListWorkflow = props => {
                           style: {
                             paddingLeft: '40px'
                           },
-                          children: bodyData[0]?.children[0]?.text
+                          children: typeof bodyData === 'string' ? bodyData : bodyData[0]?.children[0]?.text
                         })
                       })]
                     })

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

@@ -10,14 +10,19 @@ const FormStyles = theme => ({
   },
   bodyTextArea: {
     '& .mini-editor-cls': {
-      padding: '10px',
+      padding: '12px',
       '&:focus-visible': {
         outline: 'none',
         border: 'none'
       }
     },
     "& .editorWorkflow": {
-      minHeight: '130px'
+      minHeight: '130px',
+      padding: '12px',
+      '&:focus-visible': {
+        outline: 'none',
+        border: 'none'
+      }
     }
   },
   formHeadings: {

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

@@ -64,8 +64,8 @@ const Workflow = props => {
   };
   const saveFormWorkflow = () => {
     let workflowData = [...workflowList];
-    let subjectHtml = document.getElementsByTagName('textarea')[0].innerHTML;
-    let bodyHtml = document.getElementsByClassName('editorWorkflow')[0].innerHTML;
+    let subjectHtml = document?.getElementsByTagName('textarea')[0]?.innerHTML;
+    let bodyHtml = document?.getElementsByClassName('editorWorkflow')[0]?.innerHTML;
     let data = {
       schedule_type: schedule,
       schedule_every: schedule === "after" ? scheduleEvery : 0,

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

@@ -6,8 +6,9 @@ import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { insertGrid } from "../../utils/grid";
-import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
+import { GridAddGridIcon, GridSettingsIcon } from "../../common/iconslist";
 import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
@@ -225,11 +226,11 @@ const Grid = props => {
           children: /*#__PURE__*/_jsx(GridAddGridIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Add Section",
+        title: "Duplicate",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddSection(),
-          children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
+          children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
         })
       }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Tooltip, {

package/dist/Editor/Styles/EditorStyles.js

@@ -16,6 +16,13 @@ const editorStyles = ({
       "& .mini-tool-wrpr-ei": {
         display: "none"
       }
+    },
+    "& .mobileMiniTextWrapper": {
+      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+      position: "fixed",
+      bottom: 0,
+      left: 0,
+      width: "100%"
     }
   },
   slateWrapper: {

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

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
+import { Button, Popover } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const CustomSelectTool = ({
+  classes,
+  value,
+  options = [],
+  onChange
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const selected = options?.find(o => o.value === value);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Button, {
+      className: `customSelectTool`,
+      onClick: e => {
+        e.preventDefault();
+        setAnchorEl(e.currentTarget);
+      },
+      children: [selected?.label || selected?.title, " ", /*#__PURE__*/_jsx(DownArrowIcon, {})]
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: () => setAnchorEl(null),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      sx: classes.customSelectPopoverWrapper,
+      children: options.map((option, i) => {
+        return /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Button, {
+            className: `customSelectOptionLabel ${value === option.value ? "selected" : ""}`,
+            onClick: () => {
+              onChange(option.value, option);
+            },
+            children: option.title
+          })
+        }, i);
+      })
+    })]
+  });
+};
+export default CustomSelectTool;

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

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Button } from "@mui/material";
+import PaintIcon from "../../../assets/svg/PaintIcon";
+import ColorPicker from "../../../Elements/Color Picker/ColorPicker";
+import { activeMark } from "../../../utils/SlateUtilityFunctions";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function MiniColorPicker(props) {
+  const {
+    activeColor,
+    format,
+    classes,
+    id,
+    editor
+  } = props;
+  const [openColorTool, setOpenColorTool] = useState(null);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Button, {
+      className: "fontColorBtn",
+      onClick: e => setOpenColorTool(e.currentTarget),
+      children: [format === "color" ? "A" : /*#__PURE__*/_jsx(PaintIcon, {}), /*#__PURE__*/_jsx("div", {
+        className: "selectedColor",
+        style: {
+          background: activeColor
+        }
+      })]
+    }), /*#__PURE__*/_jsx(ColorPicker, {
+      format: format,
+      activeMark: activeMark,
+      editor: editor,
+      showHex: false,
+      title: "Text Color",
+      id: id,
+      classes: classes,
+      forMiniTool: true,
+      openColorTool: openColorTool,
+      closeColorTool: () => setOpenColorTool(null)
+    }, id)]
+  });
+}
+export default MiniColorPicker;

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

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import Icon from "../../../common/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  icon,
+  label
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    className: "menuOptions",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }), " ", label]
+  });
+}
+const alignmentOptions = [{
+  id: 17,
+  value: "alignLeft",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "alignLeft",
+    label: "Left Align"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "alignLeft"
+  })
+}, {
+  id: 18,
+  value: "alignCenter",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "alignCenter",
+    label: "Center Align"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "alignCenter"
+  })
+}, {
+  id: 19,
+  value: "alignRight",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "alignRight",
+    label: "Right Align"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "alignRight"
+  })
+}];
+function SelectAlignment({
+  editor,
+  classes
+}) {
+  const selected = useMemo(() => {
+    return alignmentOptions.find(t => isBlockActive(editor, t.value));
+  }, [alignmentOptions, isBlockActive, editor]);
+  const onChange = (format, option) => {
+    if (option.type === "block") {
+      toggleBlock(editor, format);
+    }
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: alignmentOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selected?.value || "alignLeft",
+    classes: classes
+  });
+}
+export default SelectAlignment;

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

@@ -0,0 +1,92 @@
+import { useMemo } from "react";
+import { isBlockActive, toggleBlock } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import Icon from "../../../common/Icon";
+import { insertAccordion } from "../../../utils/accordion";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  icon,
+  label
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    className: "menuOptions",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }), " ", label]
+  });
+}
+const listOptions = [{
+  id: 15,
+  value: "orderedList",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "orderedList",
+    label: "Ordered List"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "orderedList"
+  }),
+  group: "list"
+}, {
+  id: 16,
+  value: "unorderedList",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "unorderedList",
+    label: "Bulleted List"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "unorderedList"
+  }),
+  group: "list"
+}, {
+  id: 43,
+  value: "check-list-item",
+  type: "block",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "check-list-item",
+    label: "Check List"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "check-list-item"
+  }),
+  group: "list"
+}, {
+  id: 30,
+  value: "accordion",
+  type: "accordion",
+  group: "list",
+  component: "AccordionButton",
+  title: /*#__PURE__*/_jsx(Label, {
+    icon: "accordion",
+    label: "Accordion"
+  }),
+  label: /*#__PURE__*/_jsx(Icon, {
+    icon: "accordion"
+  })
+}];
+function SelectList({
+  editor,
+  classes
+}) {
+  const selectedList = useMemo(() => {
+    return listOptions.find(t => isBlockActive(editor, t.value));
+  }, [listOptions, isBlockActive, editor]);
+  const onChange = (format, option) => {
+    if (option.type === "block") {
+      toggleBlock(editor, format);
+    } else if (option.type === "accordion") {
+      toggleBlock(editor, format);
+      insertAccordion(editor);
+    }
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: listOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selectedList?.value || "orderedList",
+    classes: classes
+  });
+}
+export default SelectList;