@flozy/editor 1.6.0 → 1.6.1

package/dist/Editor/CommonEditor.js

@@ -4,25 +4,29 @@ import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { useDebounce } from "use-debounce";
-// import { onKeyDown as linkifyOnKeyDown } from '@mercuriya/slate-linkify';
-
-import Toolbar from "./Toolbar/Toolbar";
+// import Toolbar from "./Toolbar/Toolbar";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
 import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serialize } from "./utils/serializer";
+import { getPageSettings } from "./utils/pageSettings";
 import { customCollisionDetectionAlgorithm, getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
-import { Checkbox } from "@mui/material";
+import { Box } from "@mui/material";
 import { KeyboardDoubleArrowDown, KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardDoubleArrowUp } from "@mui/icons-material";
+import Shorthands from "./common/Shorthands";
+import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
+import { EditorProvider } from "./hooks/useMouseMove";
+import TopBanner from "./Elements/TopBanner/TopBanner";
+import editorStyles from "./Styles/EditorStyles";
 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"];
@@ -66,6 +70,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     otherProps
   } = props;
   const editorWrapper = useRef();
+  const mentionsRef = useRef();
   const convertedContent = draftToSlate({
     data: content
   });
@@ -88,19 +93,24 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorClass
   } = otherProps || {};
   const [drag, setDrag] = useState(null);
+  const classes = editorStyles({
+    padHeight: !fullScreen ? otherProps?.padHeight : 120
+  });
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor(), {
       needLayout
     });
   }, [collaborativeEditor]);
-  const pageSettings = editor?.children?.find(f => f.type === "page-settings");
   const {
-    pageProps
-  } = pageSettings || {};
+    element: pageSt
+  } = getPageSettings(editor) || {};
   const {
-    bannerSpacing
-  } = pageProps || {
+    bannerSpacing,
+    pageBgImage,
+    pageColor,
+    pageWidth
+  } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
       right: 0,
@@ -199,7 +209,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     },
     getPageSettings: {
-      background: pageProps?.pageBgImage && pageProps?.pageBgImage !== "none" ? `url(${pageProps?.pageBgImage})` : pageProps?.pageColor || "unset"
+      background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || "#fff"
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -215,9 +225,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     search,
     target,
-    index
+    index,
+    type
   } = mentions;
-  const chars = CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
+  const chars = type ? Shorthands[type]({
+    ...mentions,
+    CHARACTERS
+  }) : [];
   const handleEditorChange = newValue => {
     setValue(newValue);
     if (!isInteracted) {
@@ -262,17 +276,27 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         setMentions,
         chars,
         target,
-        editor
+        editor,
+        type,
+        mentionsRef
       });
     } else if (isCtrlKey) {
       commands({
         event,
         editor
       });
-    } else {
-      // linkifyOnKeyDown(event, editor);
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      indentation({
+        editor
+      });
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      escapeEvent({
+        editor
+      });
     }
-  }, [chars, editor, target, mentions, setMentions]);
+  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const handleDragStart = e => {
     try {
       const {
@@ -391,97 +415,100 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
     }
   };
-  return /*#__PURE__*/_jsx(DialogWrapper, {
-    ...props,
-    fullScreen: fullScreen,
-    footer: footer || "",
-    children: /*#__PURE__*/_jsx("div", {
-      className: `editor-t-wrapper ${editorClass || ""} ${!toolbarShow ? "editor-wrapper-toolbar-closed" : ""}`,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        padding: "0 8px",
-        ...dotBg
-      },
-      children: /*#__PURE__*/_jsxs(Slate, {
-        editor: editor,
-        initialValue: value,
-        onChange: handleEditorChange,
-        children: [/*#__PURE__*/_jsxs(DndContext, {
-          collisionDetection: customCollisionDetectionAlgorithm,
-          onDragStart: handleDragStart,
-          onDragEnd: handleDragEnd,
-          children: [/*#__PURE__*/_jsxs(Overlay, {
-            children: [/*#__PURE__*/_jsxs("div", {
-              className: `toolbar-wrapper ${toolbarOptions?.toolbarPosition} ${toolbarOptions?.toolbarPosition}-toolbar-wrapper`,
-              children: [toolbarOptions?.needToolbarToggle && /*#__PURE__*/_jsx("div", {
-                className: `toolbar-toggle ${toolbarOptions?.toolbarPosition}`,
-                children: /*#__PURE__*/_jsx(Checkbox, {
-                  onChange: handleToolbarSwitch,
-                  checked: toolbarShow,
-                  icon: getToolbarShowOpenIcon("open"),
-                  checkedIcon: getToolbarShowOpenIcon("close"),
-                  name: "checkedI"
-                })
-              }), !isReadOnly && toolbarShow ? /*#__PURE__*/_jsx(Toolbar, {
-                handleCodeToText: handleCodeToText,
-                customProps: customProps,
-                toolbarOptions: toolbarOptions
-              }) : null]
-            }), /*#__PURE__*/_jsxs("div", {
-              ref: editorWrapper,
-              className: `editor-wrapper ${toolbarOptions?.toolbarPosition}-editor-wrapper ${!toolbarShow ? `${toolbarOptions?.toolbarPosition}-editor-wrapper-toolbar-closed` : ""} `,
+  const renderTopBanner = () => {
+    const tb = editor.children[0];
+    return tb?.type === "topbanner" ? /*#__PURE__*/_jsx(TopBanner, {
+      element: tb,
+      editor: editor,
+      customProps: customProps
+    }) : null;
+  };
+  return /*#__PURE__*/_jsx(EditorProvider, {
+    children: /*#__PURE__*/_jsx(DialogWrapper, {
+      ...props,
+      fullScreen: fullScreen,
+      footer: footer || "",
+      children: /*#__PURE__*/_jsx(Box, {
+        component: "div",
+        className: `${editorClass || ""}`,
+        sx: classes.root,
+        style: {
+          ...dotBg
+        },
+        children: /*#__PURE__*/_jsxs(Slate, {
+          editor: editor,
+          initialValue: value,
+          onChange: handleEditorChange,
+          children: [/*#__PURE__*/_jsxs(DndContext, {
+            collisionDetection: customCollisionDetectionAlgorithm,
+            onDragStart: handleDragStart,
+            onDragEnd: handleDragEnd,
+            children: [/*#__PURE__*/_jsx(Overlay, {
+              children: /*#__PURE__*/_jsxs(Box, {
+                sx: classes.slateWrapper,
+                id: "slate-wrapper-scroll-container",
+                children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
+                  className: "scroll-area",
+                  children: /*#__PURE__*/_jsxs("div", {
+                    ref: editorWrapper,
+                    className: `editor-wrapper`,
+                    style: {
+                      backgroundColor: pageColor || "#FFF",
+                      paddingLeft: `${bannerSpacing?.left || 12}px`,
+                      paddingRight: `${bannerSpacing?.right || 12}px`,
+                      paddingTop: `${bannerSpacing?.top}px`,
+                      paddingBottom: `${bannerSpacing?.bottom}px`,
+                      width: !pageWidth || pageWidth === "fixed" ? "60%" : "80%",
+                      // width: viewport.w ? `${viewport.w}px` : "100%",
+                      height: viewport.h ? `${viewport.h}px` : `100%`,
+                      alignSelf: "center",
+                      transformOrigin: "left top",
+                      transition: "all 0.3s",
+                      minHeight: "87%"
+                    },
+                    children: [/*#__PURE__*/_jsx(PopupTool, {
+                      onDrawerOpen: onDrawerOpen
+                    }), /*#__PURE__*/_jsx(Editable, {
+                      className: "innert-editor-textbox",
+                      readOnly: isReadOnly,
+                      renderElement: renderElement,
+                      renderLeaf: renderLeaf,
+                      onKeyDown: onKeyDown
+                    }), /*#__PURE__*/_jsx(MentionsPopup, {
+                      ref: mentionsRef,
+                      mentions: mentions,
+                      setMentions: setMentions,
+                      editor: editor,
+                      target: target,
+                      index: index,
+                      chars: chars,
+                      type: type
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(MiniToolbar, {
+                  customProps: customProps,
+                  toolbarOptions: toolbarOptions
+                })]
+              })
+            }), /*#__PURE__*/_jsx(DragOverlay, {
+              className: "drag-overlay",
               style: {
-                border: "1px solid #f3f3f3",
-                backgroundColor: "unset",
-                color: pageProps?.color || "#000",
-                paddingLeft: `${bannerSpacing?.left}px`,
-                paddingRight: `${bannerSpacing?.right}px`,
-                paddingTop: `${bannerSpacing?.top}px`,
-                paddingBottom: `${bannerSpacing?.bottom}px`,
-                width: viewport.w ? `${viewport.w}px` : "100%",
-                height: viewport.h ? `${viewport.h}px` : "auto",
-                alignSelf: "center",
-                // scale: isDrawerOpen ? "0.75" : "1",
-                transformOrigin: "left top",
-                transition: "all 0.3s"
+                ...(drag?.style || {})
               },
-              children: [/*#__PURE__*/_jsx(PopupTool, {
-                onDrawerOpen: onDrawerOpen
-              }), /*#__PURE__*/_jsx(Editable, {
-                className: "innert-editor-textbox",
-                readOnly: isReadOnly,
-                placeholder: "Write something",
-                renderElement: renderElement,
-                renderLeaf: renderLeaf,
-                onKeyDown: onKeyDown
-              }), /*#__PURE__*/_jsx(MentionsPopup, {
-                mentions: mentions,
-                setMentions: setMentions,
-                editor: editor,
-                target: target,
-                index: index,
-                chars: chars
-              })]
+              children: drag ? /*#__PURE__*/_jsx(Item, {
+                children: /*#__PURE__*/_jsx("div", {
+                  dangerouslySetInnerHTML: {
+                    __html: drag?.dom
+                  }
+                })
+              }) : null
             })]
-          }), /*#__PURE__*/_jsx(DragOverlay, {
-            className: "drag-overlay",
-            style: {
-              ...(drag?.style || {})
-            },
-            children: drag ? /*#__PURE__*/_jsx(Item, {
-              children: /*#__PURE__*/_jsx("div", {
-                dangerouslySetInnerHTML: {
-                  __html: drag?.dom
-                }
-              })
-            }) : null
+          }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
+            ...htmlAction,
+            handleCodeToText: handleCodeToText
           })]
-        }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
-          ...htmlAction,
-          handleCodeToText: handleCodeToText
-        })]
-      }, id)
+        }, id)
+      })
     })
   });
 });

package/dist/Editor/DialogWrapper.js

@@ -17,6 +17,9 @@ const DialogWrapper = props => {
     open: fullScreen,
     fullScreen: fullScreen,
     onClose: onClose,
+    style: {
+      zIndex: 1000
+    },
     children: [/*#__PURE__*/_jsx(DialogTitle, {
       children: /*#__PURE__*/_jsx(Grid, {
         children: /*#__PURE__*/_jsx(Grid, {

package/dist/Editor/Editor.css

@@ -21,12 +21,12 @@
 }
 
 blockquote {
-  border-left: 2px solid #ddd;
+  border-left: 3px solid transparent;
   margin-left: 0;
   margin-right: 0;
   padding-left: 10px;
-  color: #aaa;
-  font-style: italic;
+  color: #000;
+  margin: 0px;
 }
 
 .editor-wrapper table,
@@ -61,11 +61,6 @@ blockquote {
   /* width:100%; */
 }
 
-.editor-wrapper td {
-  height: 50px;
-  padding: 0 5px;
-}
-
 .popup-wrapper1 {
   display: inline;
   position: relative;
@@ -125,7 +120,7 @@ blockquote {
 }
 
 .grid-container-toolbar {
-  right: -40px;
+  right: -32px;
   top: 0;
   bottom: 0;
   margin: auto;
@@ -143,10 +138,6 @@ blockquote {
   z-index: 1000;
 }
 
-.element-toolbar button:first-child {
-  margin-right: 2px;
-}
-
 .grid-container-toolbar button,
 .grid-item-toolbar button,
 .element-toolbar button {
@@ -154,15 +145,16 @@ blockquote {
   border: 1px solid rgba(37, 99, 235, 0.32);
   background: #fff;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
-
-  /* background-color: #2684ff; */
-  /* color: #FFFFFF; */
   font-size: 12px;
   margin-bottom: 2px;
-  width: 36px;
-  height: 36px;
   padding: 6px;
 }
+.element-toolbar button svg,
+.grid-container-toolbar button svg,
+.grid-item-toolbar button svg {
+  width: 16px;
+  height: 16px;
+}
 
 .grid-container-toolbar button:hover,
 .grid-item-toolbar button:hover,
@@ -225,10 +217,13 @@ blockquote {
   padding: 8px 12px;
   color: #ffffff;
   font-weight: bold;
-  border-radius: 12px;
   opacity: 1;
 }
 
+.signature-btn-container button:hover {
+  background-color: #0052cc;
+}
+
 .signature-btn-grps {
   display: flex;
   justify-content: space-around;
@@ -277,10 +272,14 @@ blockquote {
 
 .signature-signed-wrapper .signed-btn-del {
   position: absolute;
-  right: -20px;
-  top: -20px;
+  right: 0px;
+  top: 0px;
   opacity: 1;
   z-index: 1;
+  display: none;
+}
+.signature-signed-wrapper:hover .signed-btn-del {
+  display: block;
 }
 
 .signed-btn {
@@ -391,13 +390,16 @@ blockquote {
   display: flex;
   flex-direction: column;
   overflow-x: auto;
+  border: 1px solid rgba(37, 99, 235, 0.32);
 }
 
-.empty-carousel-wrapper > div {
+.empty-carousel-wrapper .carousel-item {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  border: 1px solid #000;
+  border-bottom: 1px solid rgba(37, 99, 235, 0.32);
+  margin: 12px;
+  padding-bottom: 24px;
 }
 
 .empty-carousel-wrapper .carousel-item-inner {
@@ -570,16 +572,6 @@ blockquote {
   display: flex !important;
 }
 
-.page-builder .editor-wrapper {
-  max-width: 80%;
-  margin-top: 100px;
-}
-
-.top-left-editor-wrapper,
-.top-right-editor-wrapper {
-  margin-top: 100px;
-}
-
 .left-top-editor-wrapper,
 .left-bottom-editor-wrapper {
   margin-top: 1%;
@@ -716,7 +708,7 @@ blockquote {
 }
 
 .element-toolbar button {
-  margin-right: 0px;
+  margin-right: 4px;
 }
 
 .empty-carousel-wrapper .element-selector {
@@ -866,7 +858,6 @@ blockquote {
 
 .tools-drawer .MuiTypography-root {
   color: #000000;
-  font-weight: bold !important;
 }
 
 .img_upload_btn_list .btn--wrpr {
@@ -876,4 +867,4 @@ blockquote {
 /** to avoid line space **/
 .page-settings {
   height: 0px;
-}
+}

package/dist/Editor/Elements/Accordion/AccordionButton.js

@@ -1,25 +1,26 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertAccordion } from "../../utils/accordion";
-import { AccordionIcon } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionButton = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleInsertAccordion = () => {
     insertAccordion(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "accordion"
+    }),
     title: "Accordion",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleInsertAccordion,
-      style: {
-        marginLeft: "0px"
-      },
-      children: /*#__PURE__*/_jsx(AccordionIcon, {})
-    })
+    onClick: handleInsertAccordion,
+    style: {
+      marginLeft: "0px"
+    },
+    icoBtnType: icoBtnType
   });
 };
 export default AccordionButton;

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -73,8 +73,8 @@ function AppHeader(props) {
       className: "element-toolbar",
       contentEditable: false,
       style: {
-        top: "-40px",
-        right: "50px"
+        top: "0px",
+        right: "0px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "App Header Settings",

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

@@ -1,22 +1,23 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertButton } from "../../utils/button";
-import { ButtonIcon } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ButtonToolIcon = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleInsertButton = () => {
     insertButton(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Button",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleInsertButton,
-      children: /*#__PURE__*/_jsx(ButtonIcon, {})
-    })
+    onClick: handleInsertButton,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "button"
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default ButtonToolIcon;

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

@@ -63,10 +63,10 @@ const EditorButton = props => {
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
-      if (metadata?.buttonLink?.handler) {
-        metadata.buttonLink.handler("click");
-      } else if (linkType === "actionTrigger") {
-        if (redirectOnURLResult) {
+      if (linkType === "actionTrigger") {
+        if (metadata?.buttonLink?.handler) {
+          metadata.buttonLink.handler("click");
+        } else if (redirectOnURLResult) {
           // call api and redirect based on api result
           const apiResult = await actionButtonRedirect({}, {
             url: buttonLink?.url
@@ -168,22 +168,6 @@ const EditorButton = props => {
             paddingLeft: "4px",
             paddingRight: "4px"
           }
-        }), !readOnly && /*#__PURE__*/_jsxs("div", {
-          className: `element-selector ${anchorEl ? "selected" : ""}`,
-          contentEditable: false,
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots tl",
-            children: " "
-          }), /*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots tr",
-            children: " "
-          }), /*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots bl",
-            children: " "
-          }), /*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots br",
-            children: " "
-          })]
         })]
       })
     }), /*#__PURE__*/_jsx("div", {