@flozy/editor 1.1.6 → 1.1.8

package/dist/Editor/CollaborativeEditor.js

@@ -16,7 +16,8 @@ const CollaborativeEditor = props => {
     onSave,
     user,
     socketURL,
-    apiHOST
+    apiHOST,
+    ...rest
   } = props;
   const convertedContent = draftToSlate({
     data: content
@@ -105,7 +106,6 @@ const CollaborativeEditor = props => {
     provider.destroy();
     setConnected(false);
     setMessage("Seems your connection is lost... Reload the page to edit the document...");
-    console.log("closed", provider);
   });
   if (authenticated.status === null || !connected === null || !editor) {
     return /*#__PURE__*/_jsx("h1", {
@@ -122,7 +122,8 @@ const CollaborativeEditor = props => {
     otherProps: {
       token: user?.token,
       API_HOST: apiHOST
-    }
+    },
+    ...rest
   });
 };
 export default CollaborativeEditor;

package/dist/Editor/CommonEditor.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createEditor } from "slate";
 import { Slate, Editable } from "slate-react";
 import Toolbar from "./Toolbar/Toolbar";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
-import "./Editor.css";
 import CodeToText from "./Elements/CodeToText/CodeToText";
 import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
@@ -10,7 +10,10 @@ import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
 import { mentionsEvent, commands } from "./utils/events";
 import withCommon from "./hooks/withCommon";
-import { createEditor } from "slate";
+import DialogWrapper from "./DialogWrapper";
+import useTimeout from "./hooks/useTimeout";
+import "./Editor.css";
+import { serialize } from "./utils/serializer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Element = props => {
@@ -34,12 +37,17 @@ const CommonEditor = props => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
-    otherProps
+    otherProps,
+    timeoutInMS = 1000
   } = props;
   const convertedContent = draftToSlate({
     data: content
   });
   const [value, setValue] = useState(convertedContent);
+  const [lastUpdated, setLastUpdated] = useState(value);
+  const [count] = useTimeout({
+    timeoutInMS: timeoutInMS
+  });
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor());
@@ -63,6 +71,11 @@ const CommonEditor = props => {
       data: content
     }));
   }, [id, content]);
+  useEffect(() => {
+    if (count > 0) {
+      updateChanges(value);
+    }
+  }, [count]);
   const [htmlAction, setHtmlAction] = useState({
     showInput: false,
     html: "",
@@ -82,9 +95,18 @@ const CommonEditor = props => {
   const handleEditorChange = newValue => {
     setValue(newValue);
     const isAstChange = editor.operations.some(op => "set_selection" !== op.type);
-    if (isAstChange && onSave) {
+    if (isAstChange && onSave && timeoutInMS === 0) {
       // send the value to onSave api
-      onSave(JSON.stringify(value));
+      updateChanges(newValue);
+    }
+  };
+  const updateChanges = newValue => {
+    const stringify = JSON.stringify(newValue);
+    if (stringify !== lastUpdated) {
+      onSave(stringify, {
+        text: serialize(newValue)
+      });
+      setLastUpdated(stringify);
     }
   };
   const customProps = {
@@ -129,52 +151,55 @@ const CommonEditor = props => {
   }, [chars, editor, target, mentions, setMentions]);
   const isReadOnly = readOnly === "readonly";
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      padding: "0 8px"
-    },
-    children: /*#__PURE__*/_jsxs(Slate, {
-      editor: editor,
-      initialValue: value,
-      onChange: handleEditorChange,
-      children: [/*#__PURE__*/_jsxs(Overlay, {
-        children: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
-          handleCodeToText: handleCodeToText,
-          customProps: customProps
-        }) : null, /*#__PURE__*/_jsxs("div", {
-          className: "editor-wrapper",
-          style: {
-            border: "1px solid #f3f3f3",
-            background: pageProps?.pageColor || "#FFF",
-            color: pageProps?.color || "#000",
-            paddingLeft: `${bannerSpacing?.left}px`,
-            paddingRight: `${bannerSpacing?.right}px`,
-            paddingTop: `${bannerSpacing?.top}px`,
-            paddingBottom: `${bannerSpacing?.bottom}px`
-          },
-          children: [/*#__PURE__*/_jsx(Editable, {
-            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
+  return /*#__PURE__*/_jsx(DialogWrapper, {
+    ...props,
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        padding: "0 8px"
+      },
+      children: /*#__PURE__*/_jsxs(Slate, {
+        editor: editor,
+        initialValue: value,
+        onChange: handleEditorChange,
+        children: [/*#__PURE__*/_jsxs(Overlay, {
+          children: [!isReadOnly ? /*#__PURE__*/_jsx(Toolbar, {
+            handleCodeToText: handleCodeToText,
+            customProps: customProps
+          }) : null, /*#__PURE__*/_jsxs("div", {
+            className: "editor-wrapper",
+            style: {
+              border: "1px solid #f3f3f3",
+              background: pageProps?.pageColor || "#FFF",
+              color: pageProps?.color || "#000",
+              paddingLeft: `${bannerSpacing?.left}px`,
+              paddingRight: `${bannerSpacing?.right}px`,
+              paddingTop: `${bannerSpacing?.top}px`,
+              paddingBottom: `${bannerSpacing?.bottom}px`
+            },
+            children: [/*#__PURE__*/_jsx(Editable, {
+              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
+            })]
           })]
+        }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
+          ...htmlAction,
+          handleCodeToText: handleCodeToText
         })]
-      }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
-        ...htmlAction,
-        handleCodeToText: handleCodeToText
-      })]
-    }, id)
+      }, id)
+    })
   });
 };
-const CHARACTERS = ["Aayla Secura", "Adi Gallia", "Admiral Dodd Rancit", "Admiral Firmus Piett", "Admiral Gial Ackbar", "Admiral Ozzel", "Admiral Raddus", "Admiral Terrinald Screed", "Admiral Trench", "Admiral U.O. Statura", "Agen Kolar", "Agent Kallus", "Aiolin and Morit Astarte", "Aks Moe", "Almec", "Alton Kastle", "Amee", "AP-5", "Armitage Hux", "Artoo", "Arvel Crynyd", "Asajj Ventress", "Aurra Sing", "AZI-3", "Bala-Tik", "Barada", "Bargwill Tomder", "Baron Papanoida", "Barriss Offee", "Baze Malbus", "Bazine Netal", "BB-8", "BB-9E", "Ben Quadinaros", "Berch Teller", "Beru Lars", "Bib Fortuna", "Biggs Darklighter", "Black Krrsantan", "Bo-Katan Kryze", "Boba Fett", "Bobbajo", "Bodhi Rook", "Borvo the Hutt", "Boss Nass", "Bossk", "Breha Antilles-Organa", "Bren Derlin", "Brendol Hux", "BT-1", "C-3PO", "C1-10P", "Cad Bane", "Caluan Ematt", "Captain Gregor", "Captain Phasma", "Captain Quarsh Panaka", "Captain Rex", "Carlist Rieekan", "Casca Panzoro", "Cassian Andor", "Cassio Tagge", "Cham Syndulla", "Che Amanwe Papanoida", "Chewbacca", "Chi Eekway Papanoida", "Chief Chirpa", "Chirrut Îmwe", "Ciena Ree", "Cin Drallig", "Clegg Holdfast", "Cliegg Lars", "Coleman Kcaj", "Coleman Trebor", "Colonel Kaplan", "Commander Bly", "Commander Cody (CC-2224)", "Commander Fil (CC-3714)", "Commander Fox", "Commander Gree", "Commander Jet", "Commander Wolffe", "Conan Antonio Motti", "Conder Kyl", "Constable Zuvio", "Cordé", "Cpatain Typho", "Crix Madine", "Cut Lawquane", "Dak Ralter", "Dapp", "Darth Bane", "Darth Maul", "Darth Tyranus", "Daultay Dofine", "Del Meeko", "Delian Mors", "Dengar", "Depa Billaba", "Derek Klivian", "Dexter Jettster", "Dineé Ellberger", "DJ", "Doctor Aphra", "Doctor Evazan", "Dogma", "Dormé", "Dr. Cylo", "Droidbait", "Droopy McCool", "Dryden Vos", "Dud Bolt", "Ebe E. Endocott", "Echuu Shen-Jon", "Eeth Koth", "Eighth Brother", "Eirtaé", "Eli Vanto", "Ellé", "Ello Asty", "Embo", "Eneb Ray", "Enfys Nest", "EV-9D9", "Evaan Verlaine", "Even Piell", "Ezra Bridger", "Faro Argyus", "Feral", "Fifth Brother", "Finis Valorum", "Finn", "Fives", "FN-1824", "FN-2003", "Fodesinbeed Annodue", "Fulcrum", "FX-7", "GA-97", "Galen Erso", "Gallius Rax", 'Garazeb "Zeb" Orrelios', "Gardulla the Hutt", "Garrick Versio", "Garven Dreis", "Gavyn Sykes", "Gideon Hask", "Gizor Dellso", "Gonk droid", "Grand Inquisitor", "Greeata Jendowanian", "Greedo", "Greer Sonnel", "Grievous", "Grummgar", "Gungi", "Hammerhead", "Han Solo", "Harter Kalonia", "Has Obbit", "Hera Syndulla", "Hevy", "Hondo Ohnaka", "Huyang", "Iden Versio", "IG-88", "Ima-Gun Di", "Inquisitors", "Inspector Thanoth", "Jabba", "Jacen Syndulla", "Jan Dodonna", "Jango Fett", "Janus Greejatus", "Jar Jar Binks", "Jas Emari", "Jaxxon", "Jek Tono Porkins", "Jeremoch Colton", "Jira", "Jobal Naberrie", "Jocasta Nu", "Joclad Danva", "Joh Yowza", "Jom Barell", "Joph Seastriker", "Jova Tarkin", "Jubnuk", "Jyn Erso", "K-2SO", "Kanan Jarrus", "Karbin", "Karina the Great", "Kes Dameron", "Ketsu Onyo", "Ki-Adi-Mundi", "King Katuunko", "Kit Fisto", "Kitster Banai", "Klaatu", "Klik-Klak", "Korr Sella", "Kylo Ren", "L3-37", "Lama Su", "Lando Calrissian", "Lanever Villecham", "Leia Organa", "Letta Turmond", "Lieutenant Kaydel Ko Connix", "Lieutenant Thire", "Lobot", "Logray", "Lok Durd", "Longo Two-Guns", "Lor San Tekka", "Lorth Needa", "Lott Dod", "Luke Skywalker", "Lumat", "Luminara Unduli", "Lux Bonteri", "Lyn Me", "Lyra Erso", "Mace Windu", "Malakili", "Mama the Hutt", "Mars Guo", "Mas Amedda", "Mawhonic", "Max Rebo", "Maximilian Veers", "Maz Kanata", "ME-8D9", "Meena Tills", "Mercurial Swift", "Mina Bonteri", "Miraj Scintel", "Mister Bones", "Mod Terrik", "Moden Canady", "Mon Mothma", "Moradmin Bast", "Moralo Eval", "Morley", "Mother Talzin", "Nahdar Vebb", "Nahdonnis Praji", "Nien Nunb", "Niima the Hutt", "Nines", "Norra Wexley", "Nute Gunray", "Nuvo Vindi", "Obi-Wan Kenobi", "Odd Ball", "Ody Mandrell", "Omi", "Onaconda Farr", "Oola", "OOM-9", "Oppo Rancisis", "Orn Free Taa", "Oro Dassyne", "Orrimarko", "Osi Sobeck", "Owen Lars", "Pablo-Jill", "Padmé Amidala", "Pagetti Rook", "Paige Tico", "Paploo", "Petty Officer Thanisson", "Pharl McQuarrie", "Plo Koon", "Po Nudo", "Poe Dameron", "Poggle the Lesser", "Pong Krell", "Pooja Naberrie", "PZ-4CO", "Quarrie", "Quay Tolsite", "Queen Apailana", "Queen Jamillia", "Queen Neeyutnee", "Qui-Gon Jinn", "Quiggold", "Quinlan Vos", "R2-D2", "R2-KT", "R3-S6", "R4-P17", "R5-D4", "RA-7", "Rabé", "Rako Hardeen", "Ransolm Casterfo", "Rappertunie", "Ratts Tyerell", "Raymus Antilles", "Ree-Yees", "Reeve Panzoro", "Rey", "Ric Olié", "Riff Tamson", "Riley", "Rinnriyin Di", "Rio Durant", "Rogue Squadron", "Romba", "Roos Tarpals", "Rose Tico", "Rotta the Hutt", "Rukh", "Rune Haako", "Rush Clovis", "Ruwee Naberrie", "Ryoo Naberrie", "Sabé", "Sabine Wren", "Saché", "Saelt-Marae", "Saesee Tiin", "Salacious B. Crumb", "San Hill", "Sana Starros", "Sarco Plank", "Sarkli", "Satine Kryze", "Savage Opress", "Sebulba", "Senator Organa", "Sergeant Kreel", "Seventh Sister", "Shaak Ti", "Shara Bey", "Shmi Skywalker", "Shu Mai", "Sidon Ithano", "Sifo-Dyas", "Sim Aloo", "Siniir Rath Velus", "Sio Bibble", "Sixth Brother", "Slowen Lo", "Sly Moore", "Snaggletooth", "Snap Wexley", "Snoke", "Sola Naberrie", "Sora Bulq", "Strono Tuggs", "Sy Snootles", "Tallissan Lintra", "Tarfful", "Tasu Leech", "Taun We", "TC-14", "Tee Watt Kaa", "Teebo", "Teedo", "Teemto Pagalies", "Temiri Blagg", "Tessek", "Tey How", "Thane Kyrell", "The Bendu", "The Smuggler", "Thrawn", "Tiaan Jerjerrod", "Tion Medon", "Tobias Beckett", "Tulon Voidgazer", "Tup", "U9-C4", "Unkar Plutt", "Val Beckett", "Vanden Willard", "Vice Admiral Amilyn Holdo", "Vober Dand", "WAC-47", "Wag Too", "Wald", "Walrus Man", "Warok", "Wat Tambor", "Watto", "Wedge Antilles", "Wes Janson", "Wicket W. Warrick", "Wilhuff Tarkin", "Wollivan", "Wuher", "Wullf Yularen", "Xamuel Lennox", "Yaddle", "Yarael Poof", "Yoda", "Zam Wesell", "Zev Senesca", "Ziro the Hutt", "Zuckuss"];
+const CHARACTERS = ["Aayla Secura", "Adi Gallia"];
 export default CommonEditor;

package/dist/Editor/DialogWrapper.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Grid } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DialogWrapper = props => {
+  const {
+    fullScreen,
+    onClose,
+    children,
+    footer
+  } = props;
+  return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
+    open: fullScreen,
+    fullScreen: fullScreen,
+    onClose: onClose,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: /*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsx(Grid, {
+          style: {
+            display: 'flex',
+            justifyContent: 'end'
+          },
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onClose,
+            children: /*#__PURE__*/_jsx(CloseIcon, {})
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: children
+    }), /*#__PURE__*/_jsx(DialogActions, {
+      children: footer
+    })]
+  }) : children;
+};
+DialogWrapper.defaultProps = {
+  fullScreen: false,
+  onClose: () => {},
+  children: '',
+  footer: ''
+};
+export default DialogWrapper;

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

@@ -0,0 +1,221 @@
+import React, { useState } from "react";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { Transforms } from "slate";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import Divider from "@mui/material/Divider";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import MenuIcon from "@mui/icons-material/Menu";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import SettingsIcon from "@mui/icons-material/Settings";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AppHeaderPopup from "./AppHeaderPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const drawerWidth = 240;
+function AppHeader(props) {
+  const [openSetttings, setOpenSettings] = useState(false);
+  const {
+    attributes,
+    element,
+    customProps
+  } = props;
+  const {
+    appTitle,
+    appLogo,
+    menus,
+    bgColor,
+    menuStyle
+  } = element;
+  const {
+    window
+  } = props;
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const isDrawer = menuStyle === "drawer";
+  const handleDrawerToggle = () => {
+    setMobileOpen(prevState => !prevState);
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const ToolBar = () => {
+    return customProps?.readOnly !== true ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar",
+      contentEditable: false,
+      style: {
+        top: "-38px"
+      },
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(SettingsIcon, {})
+      }), /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onDelete,
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      })]
+    }) : null;
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, updateData, {
+      at: path
+    });
+    onClose();
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const drawer = /*#__PURE__*/_jsxs(Box, {
+    onClick: handleDrawerToggle,
+    sx: {
+      textAlign: "center"
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h6",
+      sx: {
+        my: 2
+      },
+      children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
+        alt: `${appTitle} Logo`,
+        style: {
+          height: "40px",
+          width: "auto"
+        },
+        src: appLogo
+      }) : appTitle
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
+      children: menus.map(item => /*#__PURE__*/_jsx(ListItem, {
+        disablePadding: true,
+        children: /*#__PURE__*/_jsx(ListItemButton, {
+          sx: {
+            textAlign: "center"
+          },
+          children: /*#__PURE__*/_jsx(ListItemText, {
+            primary: item.text
+          })
+        })
+      }, item.text))
+    })]
+  });
+  const container = window !== undefined ? () => window().document.body : undefined;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: "flex",
+      position: "relative"
+    },
+    ...attributes,
+    contentEditable: false,
+    children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
+      component: "nav",
+      style: {
+        position: "relative",
+        background: bgColor
+      },
+      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",
+          style: {
+            display: "inline-flex",
+            alignItems: "center"
+          },
+          sx: {
+            flexGrow: 1,
+            display: {
+              xs: "none",
+              sm: "block"
+            }
+          },
+          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 => /*#__PURE__*/_jsx(Button, {
+            component: "a",
+            href: item.href,
+            sx: {
+              color: "#fff"
+            },
+            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"
+          },
+          "& .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]
+  });
+}
+export default AppHeader;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { IconButton } from "@mui/material";
+import ViewDayIcon from "@mui/icons-material/ViewDay";
+import { insertAppHeader } from "../../utils/insertAppHeader";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AppHeaderButton = props => {
+  const {
+    editor
+  } = props;
+  const handleClick = () => {
+    insertAppHeader(editor, {});
+  };
+  return /*#__PURE__*/_jsx(IconButton, {
+    title: "App Header",
+    onClick: handleClick,
+    children: /*#__PURE__*/_jsx(ViewDayIcon, {})
+  });
+};
+export default AppHeaderButton;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import appHeaderStyle from "../../common/StyleBuilder/appHeaderStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AppHeaderPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "App Header",
+    type: "gridItemStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: appHeaderStyle
+  });
+};
+export default AppHeaderPopup;

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -26,7 +26,6 @@ const Carousel = props => {
   const selected = useSelected();
   const [edit, setEdit] = useState(false);
   const [reload, setReload] = useState(new Date().getTime());
-  const path = ReactEditor.findPath(editor, element);
   const settings = {
     dots: true,
     infinite: true,
@@ -58,6 +57,7 @@ const Carousel = props => {
     }
   };
   const onDelete = () => {
+    const path = ReactEditor.findPath(editor, element);
     Transforms.removeNodes(editor, {
       at: [...path]
     });

package/dist/Editor/Elements/CodeToText/HtmlCode.js

@@ -32,9 +32,7 @@ const HtmlCode = props => {
     } else if (e.keyCode === 8) {
       Transforms.removeNodes(editor);
     }
-    // console.log(e);
   };
-
   useEffect(() => {
     document.addEventListener("keyup", handleKeyUp);
     return () => {

package/dist/Editor/Elements/Equation/EquationButton.js

@@ -32,7 +32,6 @@ const EquationButton = ({
     if (!math) return;
     selection && Transforms.select(editor, selection);
     insertEquation(editor, math, displayInline);
-    console.log("btn click");
     setShowInput(false);
   };
   return /*#__PURE__*/_jsxs("div", {

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -5,22 +5,23 @@ import ArticleIcon from "@mui/icons-material/Article";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PageSettingsButton = props => {
   const {
     customProps
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
-  const [pageProps, setPageProps] = useState({});
   const editor = useSlateStatic();
   const onSettings = () => {
     const {
-      element
+      element,
+      path
     } = getPageSettingsPath();
-    if (element) {
-      setPageProps(element?.pageProps || {});
-      setOpenSettings(true);
-    }
+    setOpenSettings({
+      element: element?.pageProps || {},
+      path
+    });
   };
   const getPageSettingsPath = () => {
     try {
@@ -30,11 +31,17 @@ const PageSettingsButton = props => {
           return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
         }
       });
-      const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
-      return {
-        path,
-        element: pageSettingsNode[0]
-      };
+      if (pageSettingsNode && pageSettingsNode[0]) {
+        const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
+        return {
+          path,
+          element: pageSettingsNode[0]
+        };
+      } else {
+        return {
+          path: null
+        };
+      }
     } catch (err) {
       console.log(err);
       return {
@@ -43,20 +50,17 @@ const PageSettingsButton = props => {
     }
   };
   const onSave = data => {
-    const {
-      path
-    } = getPageSettingsPath();
     const updateData = {
       ...data
     };
     delete updateData.children;
-    if (path) {
+    if (openSetttings?.path) {
       Transforms.setNodes(editor, {
         pageProps: {
           ...updateData
         }
       }, {
-        at: path
+        at: openSetttings?.path
       });
     } else {
       Transforms.insertNodes(editor, [{
@@ -74,11 +78,13 @@ const PageSettingsButton = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
-  return /*#__PURE__*/_jsxs(IconButton, {
-    title: "Page Settings",
-    onClick: onSettings,
-    children: [/*#__PURE__*/_jsx(ArticleIcon, {}), openSetttings ? /*#__PURE__*/_jsx(PageSettingsPopup, {
-      element: pageProps,
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      title: "Page Settings",
+      onClick: onSettings,
+      children: /*#__PURE__*/_jsx(ArticleIcon, {})
+    }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
+      element: openSetttings?.element || {},
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -10,7 +10,6 @@ const UploadSignature = props => {
   } = props;
   const [base64, setBase64] = useState(null);
   const [uploading, setUploading] = useState(false);
-  console.log(customProps);
   const onChange = async e => {
     const file = e.target.files[0];
     const strImage = await convertBase64(file);

package/dist/Editor/Toolbar/Toolbar.js

@@ -25,6 +25,7 @@ import PageSettingsButton from "../Elements/PageSettings/PageSettingsButton";
 import CarouselButton from "../Elements/Carousel/CarouselButton";
 import ChipTextButton from "../Elements/ChipText/ChipTextButton";
 import DrawerMenuButton from "../Elements/DrawerMenu/DrawerMenuButton";
+import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -198,6 +199,11 @@ const Toolbar = props => {
               editor: editor,
               customProps: customProps
             }, element.id);
+          case "app-header":
+            return /*#__PURE__*/_jsx(AppHeaderButton, {
+              editor: editor,
+              customProps: customProps
+            }, element.id);
           default:
             return null;
         }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -131,5 +131,8 @@ const toolbarGroups = [[{
 }, {
   id: 36,
   type: "drawer"
+}, {
+  id: 37,
+  type: "app-header"
 }]];
 export default toolbarGroups;

package/dist/Editor/common/StyleBuilder/appHeaderStyle.js

@@ -0,0 +1,63 @@
+const appHeaderStyle = [{
+  tab: "Logo",
+  value: "appLogo",
+  fields: [{
+    label: "App Logo URL",
+    key: "appLogo",
+    type: "text"
+  }, {
+    label: "App Logo",
+    key: "appLogo",
+    type: "backgroundImage"
+  }]
+}, {
+  tab: "Title",
+  value: "appTitle",
+  fields: [{
+    label: "App Title",
+    key: "appTitle",
+    type: "text"
+  }]
+}, {
+  tab: "Menus",
+  value: "menus",
+  fields: [{
+    label: "Menus",
+    key: "menus",
+    type: "menusArray"
+  }]
+}, {
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
+  tab: "Colors",
+  value: "colors",
+  fields: [{
+    label: "Text",
+    key: "textColor",
+    type: "color",
+    needPreview: true
+  }, {
+    label: "Background",
+    key: "bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "borderColor",
+    type: "color"
+  }]
+}];
+export default appHeaderStyle;

package/dist/Editor/common/StyleBuilder/fieldTypes/index.js

@@ -7,6 +7,7 @@ import BackgroundImage from "./backgroundImage";
 import GridSize from "./gridSize";
 import ElementSize from "./elementSize";
 import ImageTexts from "./imageTexts";
+import MenusArray from "./menusArray";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -16,6 +17,7 @@ const FieldMap = {
   backgroundImage: BackgroundImage,
   gridSize: GridSize,
   elementSize: ElementSize,
-  imageTexts: ImageTexts
+  imageTexts: ImageTexts,
+  menusArray: MenusArray
 };
 export default FieldMap;

package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js

@@ -0,0 +1,114 @@
+import React from "react";
+import { Button, Grid, Radio, RadioGroup, TextField, FormControl, FormLabel, FormControlLabel } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MenusArray = props => {
+  const {
+    value,
+    data,
+    elementProps,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const {
+    menuStyle
+  } = elementProps || {
+    menuStyle: "stacked"
+  };
+  const handleChange = index => e => {
+    const upValue = [...(value || [])];
+    upValue[index] = {
+      ...(upValue[index] || {}),
+      [e.target.name]: e.target.value
+    };
+    onChange({
+      [key]: upValue
+    });
+  };
+  const onAddMenu = () => {
+    onChange({
+      [key]: [...value, {
+        ...value[0]
+      }]
+    });
+  };
+  const onDelete = index => () => {
+    const upValue = [...(value || [])];
+    upValue.splice(index, 1);
+    onChange({
+      [key]: upValue
+    });
+  };
+  const handleVariant = e => {
+    onChange({
+      [e.target.name]: e.target.value
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    padding: 1,
+    spacing: 2,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        children: [/*#__PURE__*/_jsx(FormLabel, {
+          id: "demo-radio-buttons-group-label",
+          children: "Menu Variant"
+        }), /*#__PURE__*/_jsxs(RadioGroup, {
+          row: true,
+          "aria-labelledby": "demo-radio-buttons-group-label",
+          defaultValue: menuStyle,
+          value: menuStyle,
+          name: "menuStyle",
+          onChange: handleVariant,
+          children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            value: "stacked",
+            checked: menuStyle === "stacked",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Stacked"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "drawer",
+            checked: menuStyle === "drawer",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Drawer"
+          })]
+        })]
+      })
+    }), (value || []).map((m, i) => {
+      return /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 12,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          name: "text",
+          type: "text",
+          value: m.text,
+          onChange: handleChange(i),
+          size: "small",
+          fullWidth: true
+        }), /*#__PURE__*/_jsx(TextField, {
+          name: "url",
+          type: "text",
+          value: m.url,
+          onChange: handleChange(i),
+          size: "small",
+          fullWidth: true
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: onDelete(i),
+          color: "error",
+          children: "Delete"
+        })]
+      }, `add-m-${i}`);
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: onAddMenu,
+        children: "+ Add"
+      })
+    })]
+  });
+};
+export default MenusArray;

package/dist/Editor/common/StyleBuilder/index.js

@@ -75,7 +75,6 @@ const StyleBuilder = props => {
     setTab(newValue);
   };
   const onElementPropsChange = data => {
-    console.log(data);
     setElementProps({
       ...elementProps,
       ...data

package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js

@@ -5,6 +5,14 @@ const pageSettingsStyle = [{
     label: "Text",
     key: "color",
     type: "color"
+  }, {
+    label: "Background URL",
+    key: "pageColor",
+    type: "text"
+  }, {
+    label: "Background Image",
+    key: "pageColor",
+    type: "backgroundImage"
   }, {
     label: "Background",
     key: "pageColor",

package/dist/Editor/hooks/useTimeout.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+let t = null;
+const useTimeout = props => {
+  const {
+    timeoutInMS
+  } = props;
+  const [count, setCount] = useState(0);
+  const onReset = () => {
+    clearTimeout(t);
+    t = setTimeout(() => {
+      setCount(count + 1);
+    }, timeoutInMS);
+  };
+  useEffect(() => {
+    if (timeoutInMS) {
+      onReset();
+    }
+  }, [timeoutInMS, count]);
+  return [count];
+};
+export default useTimeout;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -23,6 +23,7 @@ import ImageTextWrapper from "../Elements/ImageText/ImageTextWrapper";
 import ImageText from "../Elements/ImageText/ImageText";
 import ChipText from "../Elements/ChipText/ChipText";
 import DrawerMenu from "../Elements/DrawerMenu/DrawerMenu";
+import AppHeader from "../Elements/AppHeader/AppHeader";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -353,6 +354,10 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(DrawerMenu, {
         ...props
       });
+    case "app-header":
+      return /*#__PURE__*/_jsx(AppHeader, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/dist/Editor/utils/insertAppHeader.js

@@ -0,0 +1,55 @@
+import { Editor, Transforms, Path, Range, Element } from "slate";
+export const createAppHeaderNode = ({
+  menus
+}) => ({
+  type: "app-header",
+  appTitle: "Title",
+  appLogo: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1200px-Netflix_2015_logo.svg.png",
+  menus: !menus ? [{
+    type: "menu",
+    url: "https://www.google.com",
+    target: "_blank",
+    text: "Google"
+  }] : menus,
+  menuStyle: "drawer",
+  children: [{
+    text: ""
+  }]
+});
+export const insertAppHeader = (editor, props) => {
+  const {
+    selection
+  } = editor;
+  const appHeader = createAppHeaderNode(props || {});
+  if (!!selection) {
+    const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
+    if (editor.isVoid(parent)) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [appHeader]
+      }, {
+        at: Path.next(parentPath),
+        select: true
+      });
+    } else if (Range.isCollapsed(selection)) {
+      Transforms.insertNodes(editor, appHeader, {
+        select: true
+      });
+    } else {
+      Transforms.wrapNodes(editor, appHeader, {
+        split: true
+      });
+    }
+  } else {
+    Transforms.insertNodes(editor, {
+      type: "paragraph",
+      children: [appHeader]
+    });
+  }
+};
+export const removeAppHeader = (editor, path) => {
+  Transforms.unwrapNodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "app-header"
+  });
+};

package/dist/Editor/utils/serializer.js

@@ -1,28 +1,16 @@
-import { Text } from 'slate';
-import { getBlock, getMarked } from './SlateUtilityFunctions.js';
-import ReactDOMServer from 'react-dom/server';
-const {
-  renderToStaticMarkup
-} = ReactDOMServer;
 export const serialize = node => {
-  if (Text.isText(node)) {
-    let string = getMarked(node, node.text);
-    string = renderToStaticMarkup(string);
-    return string;
+  try {
+    if (!node?.type && node?.text) {
+      return node?.text;
+    }
+    let n = Array.isArray(node) ? node : node?.children;
+    n = n && Array.isArray(n) ? n : n ? [n] : [];
+    let block = n.map(m => {
+      return serialize(m);
+    }).join(' ');
+    return block;
+  } catch (err) {
+    console.log(err);
+    return null;
   }
-  const children = node.children.map(n => serialize(n)).join('');
-  let block = getBlock({
-    children,
-    element: node
-  });
-  block = renderToStaticMarkup(block);
-  return block;
-};
-export const serializer = editorValue => {
-  if (editorValue.length > 0) {
-    return editorValue.map(n => serialize(n)).join('');
-  }
-};
-export const deserializer = body => {
-  console.log(body);
 };

package/package.json

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