@flozy/editor 1.4.3 → 1.4.5

package/README.md

@@ -1,2 +1,5 @@
 # editor
 A brain document editor
+
+# Node version
+18.9.1

package/dist/Editor/CommonEditor.js

@@ -1,6 +1,7 @@
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
+import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { useDebounce } from "use-debounce";
 import Toolbar from "./Toolbar/Toolbar";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -13,13 +14,28 @@ import { mentionsEvent, commands } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serialize } from "./utils/serializer";
-import { getThumbnailImage } from "./helper";
+import { customCollisionDetectionAlgorithm, getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
 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"];
+const Item = /*#__PURE__*/forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    ref: ref,
+    contentEditable: false,
+    style: {
+      background: "rgba(255, 255,255, 0.54)"
+    },
+    children: children
+  });
+});
+Item.displayName = "Item";
 const Element = props => {
   return getBlock(props);
 };
@@ -64,6 +80,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     CHARACTERS = [],
     editorClass
   } = otherProps || {};
+  const [drag, setDrag] = useState(null);
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor(), {
@@ -227,6 +244,62 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     }
   }, [chars, editor, target, mentions, setMentions]);
+  const handleDragStart = e => {
+    try {
+      const {
+        active: {
+          data: {
+            current: {
+              element
+            }
+          }
+        }
+      } = e;
+      const dragEle = ReactEditor.toDOMNode(editor, element);
+      const {
+        width,
+        height
+      } = dragEle.getBoundingClientRect();
+      setDrag({
+        style: {
+          width,
+          height
+        },
+        dom: dragEle.outerHTML
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const handleDragEnd = e => {
+    try {
+      const {
+        active: {
+          data: {
+            current: {
+              element,
+              onDragEnd
+            }
+          }
+        },
+        over: {
+          data: {
+            current: {
+              onDrop
+            }
+          }
+        }
+      } = e;
+      onDrop(JSON.stringify(element));
+      setTimeout(() => {
+        onDragEnd();
+      }, 100);
+      setDrag(null);
+    } catch (err) {
+      console.log(e);
+      console.log(err);
+    }
+  };
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   const dotBg = needDotsBG ? {
     background: "white",
@@ -250,41 +323,58 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor: editor,
         initialValue: value,
         onChange: handleEditorChange,
-        children: [/*#__PURE__*/_jsxs(Overlay, {
-          children: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
-            handleCodeToText: handleCodeToText,
-            customProps: customProps
-          }) : null, /*#__PURE__*/_jsxs("div", {
-            ref: editorWrapper,
-            className: "editor-wrapper",
+        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",
+              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"
+              },
+              children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__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
+              })]
+            })]
+          }), /*#__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"
+              ...(drag?.style || {})
             },
-            children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__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
           })]
         }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
           ...htmlAction,

package/dist/Editor/Editor.css

@@ -97,6 +97,8 @@ blockquote {
   padding: 0px;
   position: relative;
   flex-wrap: wrap;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 .grid-container-toolbar,
@@ -546,4 +548,27 @@ blockquote {
 
 .empty-carousel-wrapper .grid-item-toolbar {
   left: 0px;
+}
+
+.drag-overlay .element-selector {
+  display: none;
+}
+.drop-overlay {
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  transition: all 1s;
+}
+.dragging.drop-overlay {
+  pointer-events: auto;
+}
+.drop-overlay.active {
+  position: relative;
+  background-color: #2684ff;
+}
+
+.dragging.active_drag .grid-c-wrpr {
+  opacity: 0.15;
 }

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

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { Transforms } from "slate";
+import { Transforms, Editor, Element } from "slate";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -23,11 +23,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const drawerWidth = 240;
 function AppHeader(props) {
+  const navWrprRef = useRef(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     attributes,
     element,
-    customProps
+    customProps,
+    children
   } = props;
   const {
     appTitle,
@@ -42,7 +44,8 @@ function AppHeader(props) {
     fontSize,
     fontFamily,
     logoFontSize,
-    titleFontFamily
+    titleFontFamily,
+    isLogoRight
   } = element;
   const {
     left,
@@ -60,7 +63,8 @@ function AppHeader(props) {
   const handleDrawerToggle = () => {
     setMobileOpen(prevState => !prevState);
   };
-  const onSettings = () => {
+  const onSettings = e => {
+    e.stopPropagation();
     setOpenSettings(true);
   };
   const ToolBar = () => {
@@ -100,7 +104,8 @@ function AppHeader(props) {
     });
     onClose();
   };
-  const onDelete = () => {
+  const onDelete = e => {
+    e.stopPropagation();
     Transforms.removeNodes(editor, {
       at: path
     });
@@ -108,6 +113,25 @@ function AppHeader(props) {
   const onClose = () => {
     setOpenSettings(false);
   };
+  const handleFocus = e => {
+    e.preventDefault();
+    try {
+      const [[, gridItemPath]] = Editor.nodes(editor, {
+        at: path,
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
+      });
+      if (gridItemPath) {
+        Transforms.select(editor, gridItemPath);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  // const onMenuSettings = (menuItem, i) => (event) => {
+  //   event.preventDefault();
+  // };
+
   const drawer = /*#__PURE__*/_jsxs(Box, {
     onClick: handleDrawerToggle,
     sx: {
@@ -144,6 +168,15 @@ function AppHeader(props) {
     })]
   });
   const container = window !== undefined ? () => window().document.body : undefined;
+  // const elevateStyle = useEleveateScroll({
+  //   ...props,
+  //   parentRef: navWrprRef,
+  //   needElevation: readOnly,
+  // });
+
+  const elevateStyle = {
+    position: "relative"
+  };
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       display: "flex",
@@ -151,116 +184,147 @@ function AppHeader(props) {
     },
     ...attributes,
     contentEditable: false,
-    children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
-      component: "nav",
+    onClick: handleFocus,
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: navWrprRef,
       style: {
-        position: "relative",
-        background: bgColor,
-        boxShadow: "none",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`
+        display: "flex",
+        width: "100%"
       },
-      children: /*#__PURE__*/_jsxs(Toolbar, {
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          color: "inherit",
-          "aria-label": "open drawer",
-          edge: "start",
-          onClick: handleDrawerToggle,
-          sx: {
-            mr: 2,
-            display: {
-              sm: "none"
-            }
-          },
-          children: /*#__PURE__*/_jsx(MenuIcon, {})
-        }), /*#__PURE__*/_jsxs(Typography, {
-          variant: "h6",
-          component: "div",
-          color: "primary",
+      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
+        component: "nav",
+        style: {
+          ...elevateStyle,
+          background: bgColor,
+          boxShadow: "none",
+          paddingLeft: `${left}px`,
+          paddingRight: `${right}px`,
+          paddingTop: `${top}px`,
+          paddingBottom: `${bottom}px`
+        },
+        children: /*#__PURE__*/_jsxs(Toolbar, {
           style: {
-            display: "inline-flex",
-            alignItems: "center",
-            color: textColor,
-            fontSize: logoFontSize,
-            fontFamily: titleFontFamily
-          },
-          sx: {
-            flexGrow: 1,
-            display: {
-              xs: "none",
-              sm: "block"
-            }
+            flexDirection: isLogoRight ? "row-reverse" : "row"
           },
-          className: "app-logo",
-          children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
-            alt: `${appTitle} Logo`,
-            style: {
-              height: "40px",
-              width: "auto"
-            },
-            src: appLogo
-          }) : null, "\xA0", appTitle]
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            display: {
-              xs: "none",
-              sm: "block"
-            }
-          },
-          children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
             color: "inherit",
             "aria-label": "open drawer",
             edge: "start",
             onClick: handleDrawerToggle,
+            sx: {
+              mr: 2,
+              display: {
+                sm: "none"
+              }
+            },
             children: /*#__PURE__*/_jsx(MenuIcon, {})
-          }) : null, !isDrawer ? menus.map(item => /*#__PURE__*/_jsx(Button, {
-            component: "a",
-            href: item.url,
+          }), /*#__PURE__*/_jsxs(Typography, {
+            variant: "h6",
+            component: "div",
+            color: "primary",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              color: textColor,
+              fontSize: logoFontSize,
+              fontFamily: titleFontFamily,
+              justifyContent: isLogoRight ? "end" : "start"
+            },
             sx: {
-              fontFamily: fontFamily,
-              textTransform: "none",
-              fontSize: fontSize || "16px",
-              color: textColor || "#FFF",
-              background: bgColor || "none",
-              "&:hover": {
-                color: textColorHover || textColor || "#FFF",
-                background: bgColorHover || bgColor || "none"
+              flexGrow: 1,
+              display: {
+                xs: "none",
+                sm: "block"
               }
             },
-            children: item.text
-          }, item)) : null]
-        })]
-      })
-    }), /*#__PURE__*/_jsx("nav", {
-      children: /*#__PURE__*/_jsx(Drawer, {
-        container: container,
-        variant: "temporary",
-        open: mobileOpen,
-        onClose: handleDrawerToggle,
-        ModalProps: {
-          keepMounted: true // Better open performance on mobile.
-        },
+            className: "app-logo",
+            children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
+              alt: `${appTitle} Logo`,
+              style: {
+                height: "40px",
+                width: "auto"
+              },
+              src: appLogo
+            }) : null, "\xA0", appTitle]
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: {
+                xs: "none",
+                sm: "block"
+              }
+            },
+            children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
+              color: "inherit",
+              "aria-label": "open drawer",
+              edge: "start",
+              onClick: handleDrawerToggle,
+              children: /*#__PURE__*/_jsx(MenuIcon, {})
+            }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
+              component: "a",
+              href: item.url,
+              sx: {
+                position: "relative",
+                fontFamily: fontFamily,
+                textTransform: "none",
+                fontSize: fontSize || "16px",
+                color: textColor || "#FFF",
+                background: bgColor || "none",
+                "& .m-settings": {
+                  display: "none",
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  margin: "auto",
+                  width: "42px",
+                  height: "42px",
+                  background: "#FFF"
+                },
+                "&:hover": {
+                  color: textColorHover || textColor || "#FFF",
+                  background: bgColorHover || bgColor || "none",
+                  "& .m-settings": {
+                    display: "block"
+                  }
+                }
+              },
+              children: item.text
+            }, item)) : null]
+          })]
+        })
+      }), /*#__PURE__*/_jsx("nav", {
+        children: /*#__PURE__*/_jsx(Drawer, {
+          container: container,
+          variant: "temporary",
+          open: mobileOpen,
+          onClose: handleDrawerToggle,
+          ModalProps: {
+            keepMounted: true // Better open performance on mobile.
+          },
 
-        sx: {
-          display: {
-            xs: "block",
-            sm: isDrawer ? "block" : "none"
+          sx: {
+            display: {
+              xs: "block",
+              sm: isDrawer ? "block" : "none"
+            },
+            "& .MuiDrawer-paper": {
+              boxSizing: "border-box",
+              width: drawerWidth
+            }
           },
-          "& .MuiDrawer-paper": {
-            boxSizing: "border-box",
-            width: drawerWidth
-          }
-        },
-        children: drawer
-      })
-    }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      customProps: customProps
-    }) : null]
+          children: drawer
+        })
+      }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
+        element: element,
+        onSave: onSave,
+        onClose: onClose,
+        customProps: customProps
+      }) : null]
+    }), /*#__PURE__*/_jsx("div", {
+      contentEditable: true,
+      children: children
+    })]
   });
 }
 export default AppHeader;

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

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import useScrollTrigger from "@mui/material/useScrollTrigger";
+import useWindowResize from "../../hooks/useWindowResize";
+const useEleveateScroll = props => {
+  const {
+    children,
+    window,
+    parentRef,
+    needElevation
+  } = props;
+  const [stStyle, setStStyle] = useState({});
+  const [size] = useWindowResize();
+  useEffect(() => {
+    if (parentRef && parentRef?.current) {
+      const {
+        width,
+        left,
+        top
+      } = parentRef?.current?.getBoundingClientRect();
+      const inPercent = size?.width ? `${width / size.width * 100}%` : `${width}px`;
+      setStStyle({
+        width: `${inPercent}`,
+        left: `${left}px`,
+        top: `${top}px`,
+        defaultTop: top
+      });
+    }
+  }, [parentRef?.current, size?.width]);
+
+  // Note that you normally won't need to set the window ref as useScrollTrigger
+  // will default to window.
+  // This is only being set here because the demo is in an iframe.
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: stStyle?.defaultTop || 0,
+    target: window ? window() : undefined
+  });
+  const prevStyle = children?.props?.style || {};
+  return !needElevation ? {
+    position: "relative"
+  } : {
+    elevation: trigger ? 4 : 0,
+    position: trigger ? "fixed" : "relative",
+    className: "hreis",
+    style: {
+      ...prevStyle,
+      ...stStyle,
+      background: trigger ? "rgba(0,0,0,0.5)" : prevStyle?.background,
+      top: trigger ? "0px" : stStyle?.top
+    }
+  };
+};
+export default useEleveateScroll;

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

@@ -97,18 +97,19 @@ const Image = ({
   const onClose = () => {
     setOpenSettings(false);
   };
-  const onDelete = () => {
-    Transforms.removeNodes(editor, {
-      at: path
-    });
-  };
-  const onAddText = () => {
-    Transforms.wrapNodes(editor, {
-      type: "image-text-wrapper",
-      children: []
-    });
-    insertImageText(editor, [...path, 1]);
-  };
+
+  // const onDelete = () => {
+  //   Transforms.removeNodes(editor, { at: path });
+  // };
+
+  // const onAddText = () => {
+  //   Transforms.wrapNodes(editor, {
+  //     type: "image-text-wrapper",
+  //     children: [],
+  //   });
+  //   insertImageText(editor, [...path, 1]);
+  // };
+
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar",
@@ -161,7 +162,7 @@ const Image = ({
         alt: alt,
         src: url,
         onClick: handleImageClick
-      }), selected && !readOnly && size.width > 300 && size.height > 300 && /*#__PURE__*/_jsx(IconButton, {
+      }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,