@flozy/editor 1.5.9 → 1.6.1

package/dist/Editor/CommonEditor.js

@@ -1,25 +1,32 @@
+/* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 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 { 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"];
@@ -59,9 +66,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
+    toolbarOptions,
     otherProps
   } = props;
   const editorWrapper = useRef();
+  const mentionsRef = useRef();
   const convertedContent = draftToSlate({
     data: content
   });
@@ -70,14 +79,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [isInteracted, setIsInteracted] = useState(false);
   const [deboundedValue] = useDebounce(value, 500);
   const [fullScreen, setFullScreen] = useState(false);
+  const [toolbarShow, setToolbarShow] = useState(true);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  console.log(isDrawerOpen);
   const [viewport, setViewport] = useState({
     w: null,
     h: null
   });
   const {
-    defaultBG,
     needDotsBG,
     footer,
     needLayout = true,
@@ -85,21 +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,
     pageBgImage,
-    pageColor
-  } = pageProps || {
+    pageColor,
+    pageWidth
+  } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
       right: 0,
@@ -172,7 +183,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor.insertNode(fragments);
       } else {
         // loop delete all
-        editor.children.map(item => {
+        editor.children.forEach(() => {
           Transforms.delete(editor, {
             at: [0]
           });
@@ -185,6 +196,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     toggleFullscreen() {
       setFullScreen(!fullScreen);
     },
+    toggleToolbarShow() {
+      setToolbarShow(!toolbarShow);
+    },
     changeViewport({
       w,
       h
@@ -193,6 +207,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         w,
         h
       });
+    },
+    getPageSettings: {
+      background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || "#fff"
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -208,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) {
@@ -255,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 {
@@ -318,7 +349,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }, 100);
       setDrag(null);
     } catch (err) {
-      console.log(e);
       console.log(err);
     }
   };
@@ -329,85 +359,156 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundSize: "40px 40px",
     backgroundPosition: "-19px -19px"
   } : {};
-  return /*#__PURE__*/_jsx(DialogWrapper, {
-    ...props,
-    fullScreen: fullScreen,
-    footer: footer || "",
-    children: /*#__PURE__*/_jsx("div", {
-      className: `editor-t-wrapper ${editorClass || ""}`,
-      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: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
-              handleCodeToText: handleCodeToText,
-              customProps: customProps
-            }) : null, /*#__PURE__*/_jsxs("div", {
-              ref: editorWrapper,
-              className: "editor-wrapper",
+  const handleToolbarSwitch = () => {
+    if (ref) {
+      ref?.current?.toggleToolbarShow();
+    } else {
+      setToolbarShow(!toolbarShow);
+    }
+  };
+  const getToolbarShowOpenIcon = type => {
+    switch (toolbarOptions?.toolbarPosition) {
+      case "top-left":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
+      case "top-right":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
+      case "left-top":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
+      case "left-bottom":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
+      case "right-top":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
+      case "right-bottom":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
+      case "bottom-left":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
+      case "bottom-right":
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
+      default:
+        if (type === "open") {
+          return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
+        }
+        return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
+    }
+  };
+  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",
-                backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
-                backgroundColor: pageColor || defaultBG || "#FFF",
-                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, {