@flozy/editor 1.5.8 → 1.6.0

package/dist/Editor/CommonEditor.js

@@ -1,5 +1,6 @@
+/* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
-import { createEditor } from "slate";
+import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { useDebounce } from "use-debounce";
@@ -20,6 +21,8 @@ import { customCollisionDetectionAlgorithm, getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
+import { Checkbox } from "@mui/material";
+import { KeyboardDoubleArrowDown, KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardDoubleArrowUp } from "@mui/icons-material";
 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,6 +62,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
+    toolbarOptions,
     otherProps
   } = props;
   const editorWrapper = useRef();
@@ -70,14 +74,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,
@@ -96,9 +99,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     pageProps
   } = pageSettings || {};
   const {
-    bannerSpacing,
-    pageBgImage,
-    pageColor
+    bannerSpacing
   } = pageProps || {
     bannerSpacing: {
       left: 0,
@@ -167,12 +168,27 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     getContent() {
       return getOnSaveData(deboundedValue);
     },
-    insertFragments(fragments) {
-      editor.insertNode(fragments);
+    insertFragments(fragments, clearAll = false) {
+      if (!clearAll) {
+        editor.insertNode(fragments);
+      } else {
+        // loop delete all
+        editor.children.forEach(() => {
+          Transforms.delete(editor, {
+            at: [0]
+          });
+        });
+
+        // reset init
+        editor.children = fragments;
+      }
     },
     toggleFullscreen() {
       setFullScreen(!fullScreen);
     },
+    toggleToolbarShow() {
+      setToolbarShow(!toolbarShow);
+    },
     changeViewport({
       w,
       h
@@ -181,6 +197,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         w,
         h
       });
+    },
+    getPageSettings: {
+      background: pageProps?.pageBgImage && pageProps?.pageBgImage !== "none" ? `url(${pageProps?.pageBgImage})` : pageProps?.pageColor || "unset"
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -306,7 +325,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }, 100);
       setDrag(null);
     } catch (err) {
-      console.log(e);
       console.log(err);
     }
   };
@@ -317,12 +335,68 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundSize: "40px 40px",
     backgroundPosition: "-19px -19px"
   } : {};
+  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, {});
+    }
+  };
   return /*#__PURE__*/_jsx(DialogWrapper, {
     ...props,
     fullScreen: fullScreen,
     footer: footer || "",
     children: /*#__PURE__*/_jsx("div", {
-      className: `editor-t-wrapper ${editorClass || ""}`,
+      className: `editor-t-wrapper ${editorClass || ""} ${!toolbarShow ? "editor-wrapper-toolbar-closed" : ""}`,
       style: {
         display: "flex",
         flexDirection: "column",
@@ -338,16 +412,28 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           onDragStart: handleDragStart,
           onDragEnd: handleDragEnd,
           children: [/*#__PURE__*/_jsxs(Overlay, {
-            children: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
-              handleCodeToText: handleCodeToText,
-              customProps: customProps
-            }) : null, /*#__PURE__*/_jsxs("div", {
+            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",
+              className: `editor-wrapper ${toolbarOptions?.toolbarPosition}-editor-wrapper ${!toolbarShow ? `${toolbarOptions?.toolbarPosition}-editor-wrapper-toolbar-closed` : ""} `,
               style: {
                 border: "1px solid #f3f3f3",
-                backgroundImage: pageBgImage ? `url(${pageBgImage})` : "none",
-                backgroundColor: pageColor || defaultBG || "#FFF",
+                backgroundColor: "unset",
                 color: pageProps?.color || "#000",
                 paddingLeft: `${bannerSpacing?.left}px`,
                 paddingRight: `${bannerSpacing?.right}px`,