@flozy/editor 1.1.6 → 1.1.7

package/dist/Editor/CommonEditor.js

@@ -84,7 +84,7 @@ const CommonEditor = props => {
     const isAstChange = editor.operations.some(op => "set_selection" !== op.type);
     if (isAstChange && onSave) {
       // send the value to onSave api
-      onSave(JSON.stringify(value));
+      onSave(JSON.stringify(newValue));
     }
   };
   const customProps = {

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/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/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/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/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,38 @@
-import { Text } from 'slate';
-import { getBlock, getMarked } from './SlateUtilityFunctions.js';
-import ReactDOMServer from 'react-dom/server';
+import { Text } from "slate";
+import { getBlock, getMarked } from "./SlateUtilityFunctions.js";
+import ReactDOMServer from "react-dom/server";
 const {
-  renderToStaticMarkup
+  renderToString
 } = ReactDOMServer;
 export const serialize = node => {
-  if (Text.isText(node)) {
-    let string = getMarked(node, node.text);
-    string = renderToStaticMarkup(string);
-    return string;
+  try {
+    if (Text.isText(node)) {
+      let string = getMarked(node, node.text);
+      string = renderToString(string);
+      return string;
+    }
+    const children = node.children.map(n => serialize(n)).join("");
+    let block = getBlock({
+      children,
+      element: node
+    });
+    block = renderToString(block);
+    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('');
+    return editorValue.map(n => serialize(n)).join("");
   }
 };
 export const deserializer = body => {
   console.log(body);
+};
+export const convertToHTML = editorWrapper => {
+  if (editorWrapper && editorWrapper?.current) {
+    return editorWrapper?.current;
+  }
 };

package/package.json

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