@flozy/editor 5.2.1 → 5.2.2

package/dist/Editor/CommonEditor.js

@@ -103,6 +103,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isTextSelected, setIsTextSelected] = useState(false);
   const [breakpoint, setBreakpoint] = useState("");
+  const [topBanner, setTopBanner] = useState();
   const debouncedValue = useRef(value);
   const [size] = useWindowResize();
   const {
@@ -300,6 +301,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const handleEditorChange = newValue => {
     if (!readOnly) {
       if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+        setTopBanner(() => {
+          const firstNode = newValue[0];
+          return firstNode?.type === "topbanner" ? firstNode : null;
+        });
         debounced(newValue);
         if (!isInteracted) {
           setIsInteracted(true);
@@ -414,10 +419,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorWrapper?.current?.classList.remove("hideScroll");
     handleScrollStop();
   };
-  const hasTopBanner = () => {
-    const tb = editor.children[0];
-    return tb?.type === "topbanner" ? tb : null;
-  };
+  const hasTopBanner = () => topBanner;
   const renderTopBanner = () => {
     const tb = hasTopBanner();
     return tb ? /*#__PURE__*/_jsx(TopBanner, {

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -744,7 +744,10 @@ const usePopupStyle = theme => ({
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.inputFieldBgColor
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+      "@media only screen and (max-width: 899px)": {
+        width: '100% !important'
+      }
     },
     "& .popup_tabs-header": {
       fontFamily: "Inter, sans-serif",

package/dist/Editor/common/ColorPickerButton.js

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
+import SwipeableDrawerComponent from "./SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -17,6 +18,7 @@ const ColorPickerButton = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
   const open = Boolean(anchorEl);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const handleColorPicker = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -37,6 +39,33 @@ const ColorPickerButton = props => {
     }
     return colors;
   }, [recentColors, defaultColors, hideGradient]);
+  const ColorPickerToolComponent = () => /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+        gradient: hideGradient ? false : true,
+        value: color,
+        onChange: handleColorChange,
+        defaultColors: initialColors
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "end",
+        margin: "8px"
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        className: "secondaryBtn",
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSave,
+        className: "primaryBtn",
+        children: "Save"
+      })]
+    })]
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
@@ -48,7 +77,18 @@ const ColorPickerButton = props => {
       },
 
       onClick: handleColorPicker
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+      open: open,
+      onClose: handleClose,
+      swipeableDrawer: false,
+      children: /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        padding: 0,
+        className: "ed-cp-wrpr",
+        sx: classes.colorPickerPopup,
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {})
+      })
+    }) : /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,
       anchorOrigin: {
@@ -65,33 +105,7 @@ const ColorPickerButton = props => {
         container: true,
         padding: 0,
         className: "ed-cp-wrpr",
-        children: /*#__PURE__*/_jsxs(Grid, {
-          item: true,
-          xs: 12,
-          children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
-              value: color,
-              onChange: handleColorChange,
-              defaultColors: initialColors
-            })
-          }), /*#__PURE__*/_jsxs("div", {
-            style: {
-              display: "flex",
-              justifyContent: "end",
-              margin: "8px"
-            },
-            children: [/*#__PURE__*/_jsx(Button, {
-              onClick: handleClose,
-              className: "secondaryBtn",
-              children: "Cancel"
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: handleSave,
-              className: "primaryBtn",
-              children: "Save"
-            })]
-          })]
-        })
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {})
       })
     })]
   });

package/dist/Editor/commonStyle.js

@@ -38,7 +38,10 @@ const useCommonStyle = theme => ({
       backgroundColor: theme?.palette?.editor?.background
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      "@media only screen and (max-width: 899px)": {
+        width: '100% !important'
+      }
     },
     "& .popup_tabs-header": {
       backgroundColor: theme?.palette?.editor?.background,

package/dist/Editor/plugins/withLayout.js

@@ -56,56 +56,51 @@ const withLayout = editor => {
           }]
         };
         Transforms.insertNodes(editor, paragraph, {
-          at: [0]
+          at: path.concat(1)
         });
         return;
       }
-      const extractFirstText = node => {
-        if (node.text) {
-          return node.text;
-        }
-        if (node.children) {
-          for (const child of node.children) {
-            const text = extractFirstText(child);
-            if (text) {
-              return text;
-            }
-          }
-        }
-        return "";
-      };
-      const extractRemainingNodes = node => {
-        if (!node.children) {
-          return [];
-        }
-        const [, ...remainingChildren] = node.children;
-        return remainingChildren.map(child => ({
-          ...child
-        }));
-      };
-      const firstNode = editor.children[0];
-      const firstContent = extractFirstText(firstNode);
-      if (firstNode.type !== "title") {
-        const titleNode = {
-          type: "title",
-          children: [{
-            text: firstContent
-          }]
-        };
-        Transforms.removeNodes(editor, {
-          at: [0]
-        });
-        Transforms.insertNodes(editor, titleNode, {
-          at: [0],
-          select: true
-        });
-        const remainingNodes = extractRemainingNodes(firstNode);
-        if (remainingNodes.length > 0) {
-          Transforms.insertNodes(editor, remainingNodes, {
-            at: [1]
-          });
-        }
-      }
+
+      // Transforms.insertNodes(editor, paragraph, { at: [0] });
+      // const extractFirstText = (node) => {
+      //   if (node.text) {
+      //     return node.text;
+      //   }
+      //   if (node.children) {
+      //     for (const child of node.children) {
+      //       const text = extractFirstText(child);
+      //       if (text) {
+      //         return text;
+      //       }
+      //     }
+      //   }
+      //   return "";
+      // };
+
+      // const extractRemainingNodes = (node) => {
+      //   if (!node.children) {
+      //     return [];
+      //   }
+      //   const [, ...remainingChildren] = node.children;
+      //   return remainingChildren.map((child) => ({ ...child }));
+      // };
+
+      // const firstNode = editor.children[0];
+      // const firstContent = extractFirstText(firstNode);
+
+      // if (firstNode.type !== "title") {
+      //   const titleNode = {
+      //     type: "title",
+      //     children: [{ text: firstContent }],
+      //   };
+      //   Transforms.removeNodes(editor, { at: [0] });
+      //   Transforms.insertNodes(editor, titleNode, { at: [0], select: true });
+      //   const remainingNodes = extractRemainingNodes(firstNode);
+      //   if (remainingNodes.length > 0) {
+      //     Transforms.insertNodes(editor, remainingNodes, { at: [1] });
+      //   }
+      // }
+
       ORDERS_LAYOUT.forEach((enforce, index) => {
         if (index < editor.children.length) {
           const existsNode = Node.get(editor, [index]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"