@flozy/editor 3.7.1 → 3.7.2

package/dist/Editor/ChatEditor.js

@@ -0,0 +1,211 @@
+import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
+import { Editable, Slate, ReactEditor } 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 => {
+      if (editor) {
+        insertEmoji(editor, emoji?.native, editor.selection);
+        ReactEditor.focus(editor);
+      }
+    },
+    // Focus enable
+    enableFocus: () => {
+      if (editor) {
+        ReactEditor.focus(editor);
+      }
+    }
+  }));
+  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" && !event.shiftKey) {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(value);
+      onsubmit(false, {
+        strVal,
+        restVal
+      });
+    }
+  }, [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/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/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/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/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/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/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

package/dist/Editor/common/MUIIcon/index.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import { Box } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const iconLoader = async iconName => {
+  try {
+    const iconResponse = await fetch(`${process.env.ICON_API}/icon/${iconName}`);
+    const icon = await iconResponse.text();
+    return icon;
+  } catch (error) {
+    console.error(`Icon "${iconName}" could not be loaded.`, error);
+    return null; // Or return a default fallback icon
+  }
+};
+
+const DynamicIcon = ({
+  iconName,
+  ...props
+}) => {
+  const [icon, setIcon] = useState("");
+  useEffect(() => {
+    let mounted = true;
+    iconLoader(iconName).then(iconHTML => {
+      if (mounted) {
+        setIcon(iconHTML);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [iconName]);
+  if (!icon) {
+    return null; // Or return a placeholder/spinner
+  }
+
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      display: "flex",
+      width: "auto",
+      height: "auto",
+      paddingLeft: "4px",
+      paddingRight: "4px"
+    },
+    dangerouslySetInnerHTML: {
+      __html: icon
+    }
+  });
+};
+export default DynamicIcon;

package/dist/Editor/common/MentionsPopup/MentionsListCard.js

@@ -13,7 +13,8 @@ const MentionsListCard = props => {
   } = props;
   const {
     name,
-    email
+    email,
+    avatar_filename = null
   } = data;
   return /*#__PURE__*/_jsxs(Card, {
     sx: {
@@ -37,7 +38,9 @@ const MentionsListCard = props => {
         alignItems: "center"
       },
       alt: name,
-      children: /*#__PURE__*/_jsx(Avatar, {})
+      children: /*#__PURE__*/_jsx(Avatar, {
+        src: avatar_filename
+      })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
         display: "flex",

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -10,7 +10,7 @@ const usePopupStyles = theme => ({
   papper: {
     boxShadow: "none",
     width: "300px",
-    height: "300px",
+    height: "auto",
     overflow: "auto",
     padding: "8px",
     margin: "0px",

package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js

@@ -1,29 +1,10 @@
 import React, { useState } from "react";
 import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
-import * as fIcons from "@mui/icons-material";
+import MUIIcon from "./loadIcon";
+import MUIFilledIcons from "./mui_filled_icons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
-  if (b.indexOf("Outlined") > -1) {
-    a.outlined.push(b);
-  } else if (b.indexOf("Rounded") > -1) {
-    a.rounded.push(b);
-  } else if (b.indexOf("Sharp") > -1) {
-    a.sharp.push(b);
-  } else if (b.indexOf("TwoTone") > -1) {
-    a.tt.push(b);
-  } else {
-    a.filled.push(b);
-  }
-  return a;
-}, {
-  filled: [],
-  outlined: [],
-  rounded: [],
-  tt: [],
-  sharp: []
-});
 const Icons = props => {
   const {
     value,
@@ -34,7 +15,7 @@ const Icons = props => {
     key
   } = data;
   const [val, setVal] = useState("");
-  const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
+  const [list, setList] = useState(MUIFilledIcons.slice(0, 90));
   const onSelectIcon = ico => () => {
     onChange({
       [key]: ico
@@ -44,11 +25,11 @@ const Icons = props => {
     const keyVal = e.target.value?.toLowerCase();
     setVal(keyVal);
     if (keyVal) {
-      setList(MUIIcons.filled.filter(f => {
+      setList(MUIFilledIcons.filter(f => {
         return f.toLowerCase().indexOf(keyVal) > -1;
       }).slice(0, 90));
     } else {
-      setList(MUIIcons.filled.slice(0, 90));
+      setList(MUIFilledIcons.slice(0, 90));
     }
   };
   const onRemoveIcon = () => {
@@ -56,7 +37,7 @@ const Icons = props => {
       [key]: null
     });
   };
-  const SelectedIcon = value ? fIcons[value] : null;
+  const SelectedIcon = value ? value : null;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -92,7 +73,9 @@ const Icons = props => {
             arrow: true,
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: onRemoveIcon,
-              children: /*#__PURE__*/_jsx(SelectedIcon, {})
+              children: /*#__PURE__*/_jsx(MUIIcon, {
+                iconName: value
+              })
             })
           }) : ""
         })]
@@ -107,13 +90,14 @@ const Icons = props => {
         paddingTop: "5px"
       },
       children: list.map(m => {
-        const Ico = fIcons[m];
         return /*#__PURE__*/_jsx(Tooltip, {
           title: m,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
-            children: /*#__PURE__*/_jsx(Ico, {})
+            children: /*#__PURE__*/_jsx(MUIIcon, {
+              iconName: m
+            })
           })
         }, `mui_ico_${m}`);
       })

package/dist/Editor/common/StyleBuilder/fieldTypes/loadIcon.js

@@ -0,0 +1,13 @@
+import React from "react";
+import DynamicIcon from "../../MUIIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MUIIcon = ({
+  iconName,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx(DynamicIcon, {
+    iconName: iconName,
+    ...rest
+  });
+};
+export default MUIIcon;