@flozy/editor 3.6.2 → 3.6.4

package/dist/Editor/ChatEditor.js

@@ -0,0 +1,195 @@
+import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
+import { Editable, Slate } from 'slate-react';
+import { createEditor } from 'slate';
+import { useDebounce } from "use-debounce";
+import withCommon from "./hooks/withCommon";
+import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
+import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
+import { commands, mentionsEvent } from "./utils/events";
+import { insertEmoji } from "./utils/emoji";
+import { draftToSlate } from "./utils/draftToSlate";
+import MentionsPopup from "./common/MentionsPopup";
+import { serializeToText } from "./utils/serializeToText";
+import useMentions from "./hooks/useMentions";
+import Shorthands from "./common/Shorthands";
+import usePopupStyle from "./Toolbar/PopupTool/PopupToolStyle";
+import { EditorProvider } from "./hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    id,
+    theme,
+    content,
+    readOnly,
+    otherProps,
+    needLayout = false,
+    toolBar = true,
+    onSave,
+    onsubmit
+  } = props;
+  const classes = usePopupStyle(theme);
+  const convertedContent = draftToSlate({
+    data: content
+  });
+  const [isInteracted, setIsInteracted] = useState(false);
+  const [value, setValue] = useState(convertedContent);
+  const [loadedValue] = useState(value);
+  const [deboundedValue] = useDebounce(value, 500);
+  const editor = useMemo(() => {
+    return withCommon(createEditor(), {
+      needLayout
+    });
+  }, []);
+  const isReadOnly = readOnly === "readonly";
+  useImperativeHandle(ref, () => ({
+    emojiClick: emoji => {
+      insertEmoji(editor, emoji?.native, editor.selection);
+    }
+  }));
+  useEffect(() => {
+    setValue(draftToSlate({
+      data: content
+    }));
+  }, [id, content]);
+  useEffect(() => {
+    if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(deboundedValue);
+      onSave(strVal, restVal);
+    }
+  }, [deboundedValue]);
+  const getOnSaveData = val => {
+    const text = serializeToText(val);
+    const title = val?.find(f => f.type === "title");
+    return {
+      value: JSON.stringify(val),
+      text: text,
+      title: serializeToText(title?.children) || "Untitled"
+    };
+  };
+  const {
+    CHARACTERS = [],
+    hideTools
+    // needLayout = true,
+  } = otherProps || {};
+  const mentionsRef = useRef();
+  const customProps = {
+    ...(otherProps || {}),
+    readOnly: isReadOnly,
+    editorPlaceholder: "Write Something",
+    page_id: 1
+  };
+  const [mentions, setMentions] = useMentions({
+    editor,
+    selection: editor?.selection
+  });
+  const {
+    search,
+    target,
+    index
+  } = mentions;
+  let {
+    type
+  } = mentions;
+  if (type && type === "elements" && hideTools.indexOf("slash") > -1) {
+    type = null;
+  }
+  const chars = type ? Shorthands[type]({
+    ...mentions,
+    CHARACTERS,
+    hideTools: hideTools
+  }) : [];
+  const Leaf = ({
+    attributes,
+    children,
+    leaf
+  }) => {
+    children = getMarked(leaf, children);
+    return /*#__PURE__*/_jsx("span", {
+      ...attributes,
+      children: children
+    });
+  };
+  const handleEditorChange = newValue => {
+    setValue(newValue);
+    if (!isInteracted) {
+      setIsInteracted(true);
+    }
+  };
+  const Element = props => {
+    return getBlock(props);
+  };
+  const renderElement = useCallback(props => {
+    return /*#__PURE__*/_jsx(Element, {
+      ...props,
+      customProps: customProps
+    });
+  }, []);
+  const renderLeaf = useCallback(props => {
+    return /*#__PURE__*/_jsx(Leaf, {
+      ...props,
+      customProps: customProps
+    });
+  }, []);
+  const onKeyDown = useCallback(event => {
+    const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
+    const isCtrlKey = event.ctrlKey || isMetaKey;
+    if (target && chars.length > 0 && !isCtrlKey) {
+      mentionsEvent({
+        event,
+        mentions,
+        setMentions,
+        chars,
+        target,
+        editor,
+        type,
+        mentionsRef
+      });
+    } else if (isCtrlKey) {
+      commands({
+        event,
+        editor
+      });
+    } else if (event.key === "Enter") {
+      onsubmit();
+    }
+  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
+  const handleClose = () => {};
+  return /*#__PURE__*/_jsx(EditorProvider, {
+    theme: theme,
+    editor: editor,
+    children: /*#__PURE__*/_jsxs(Slate, {
+      editor: editor,
+      initialValue: value,
+      onChange: handleEditorChange,
+      children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
+        classes: classes,
+        editor: editor,
+        closeMainPopup: handleClose
+      }), /*#__PURE__*/_jsx(Editable, {
+        className: "chatEditorRoot",
+        renderElement: renderElement,
+        renderLeaf: renderLeaf,
+        placeholder: "Start typing ...",
+        spellCheck: true,
+        autoFocus: true,
+        onKeyDown: onKeyDown
+      }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
+        ref: mentionsRef,
+        mentions: mentions,
+        setMentions: setMentions,
+        editor: editor,
+        target: target,
+        index: index,
+        chars: chars,
+        type: type,
+        theme: theme
+      }) : null]
+    }, id)
+  });
+});
+ChatEditor.displayName = "ChatEditor";
+export default ChatEditor;

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

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { IconButton, Tooltip, Box } from "@mui/material";
-import * as fIcons from "@mui/icons-material";
+// import * as fIcons from "@mui/icons-material";
+import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import LinkIcon from "@mui/icons-material/Link";
@@ -63,7 +64,7 @@ const EditorButton = props => {
   };
   const isTrigger = linkType === "actionTrigger";
   const refURl = isTrigger ? buttonLink?.url : url;
-  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
+  const BtnIcon = buttonIcon ? buttonIcon : null;
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
     if (metadata?.buttonLink?.handler) {
@@ -80,6 +81,7 @@ const EditorButton = props => {
     }
   };
   const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
+  console.log(openInNewTab);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -131,6 +133,7 @@ const EditorButton = props => {
             color: "rgba(0, 0, 0, 0.54)"
           },
           ...btnProps,
+          target: openInNewTab ? "_blank" : "_self",
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
       })]
@@ -212,12 +215,14 @@ const EditorButton = props => {
             }
           },
           ...buttonProps,
-          children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
+          children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
+            iconName: buttonIcon,
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"
             }
-          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
+          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
+            iconName: buttonIcon,
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import * as fIcons from "@mui/icons-material";
 import { Box } from "@mui/material";
 import ChipTextPopup from "./ChipTextPopup";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
+import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChipText = props => {
@@ -26,7 +26,6 @@ const ChipText = props => {
     buttonIcon,
     textSize
   } = element;
-  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -82,7 +81,8 @@ const ChipText = props => {
       background: bgColor || "#CCC",
       color: textColor
     },
-    children: [/*#__PURE__*/_jsx(BtnIcon, {
+    children: [/*#__PURE__*/_jsx(MUIIcon, {
+      iconName: buttonIcon || "Check",
       style: {
         fontSize: textSize || "16px",
         lineHeight: textSize || "16px",

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

@@ -119,6 +119,7 @@ const ImageFrame = props => {
         zIndex: 100
       },
       placement: "top",
+      disablePortal: true,
       children: /*#__PURE__*/_jsxs(Box, {
         sx: classes?.sliderContainer,
         children: [/*#__PURE__*/_jsx(ContinuousSlider, {

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

@@ -2,10 +2,10 @@ import React, { useState, forwardRef, useImperativeHandle } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Paper, Popover } from "@mui/material";
 import data from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
 import { insertEmoji } from "../../utils/emoji";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
+import EmojiPicker from "./EmojiPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,7 +61,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
       },
       onClose: handleClose,
       children: /*#__PURE__*/_jsx(Paper, {
-        children: /*#__PURE__*/_jsx(Picker, {
+        children: /*#__PURE__*/_jsx(EmojiPicker, {
           data: data,
           onEmojiSelect: onEmojiSelect
         })

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/UserInputs.js

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

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

@@ -277,7 +277,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

@@ -105,7 +105,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: {

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/PopupTool/MiniTextFormat/index.js

@@ -28,7 +28,8 @@ const MiniTextFormat = props => {
     classes,
     editor,
     closeMainPopup,
-    customProps
+    customProps,
+    theme
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -93,7 +94,8 @@ const MiniTextFormat = props => {
           className: "verticalLine ml-1 mr-1"
         }), /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, link.format),
-          editor: editor
+          editor: editor,
+          theme: theme
         }, link.id), /*#__PURE__*/_jsx(Button, {
           onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
           className: "textSettingsIcon",

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

@@ -32,6 +32,11 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
+  useEffect(() => {
+    if (!inFocus) {
+      setAnchorEl(null);
+    }
+  }, [inFocus]);
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
@@ -86,7 +91,8 @@ const PopupTool = props => {
         editor: editor,
         classes: classes,
         closeMainPopup: handleClose,
-        customProps: customProps
+        customProps: customProps,
+        theme: theme
       })
     }) : /*#__PURE__*/_jsx(Popper, {
       id: id,
@@ -108,7 +114,8 @@ const PopupTool = props => {
             editor: editor,
             classes: classes,
             closeMainPopup: handleClose,
-            customProps: customProps
+            customProps: customProps,
+            theme: theme
           })
         })
       })