@flozy/editor 1.6.6 → 1.6.8

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -3,9 +3,10 @@ const usePopupStyles = () => ({
     position: "absolute",
     zIndex: 1000,
     background: "white",
-    borderRadius: "0px",
+    borderRadius: "10px",
     padding: "0px",
-    boxShadow: "0 4px 10px rgba(0,0,0,.2)"
+    boxShadow: "0 4px 10px rgba(0,0,0,.2)",
+    overflow: "hidden"
   },
   papper: {
     boxShadow: "none",
@@ -13,7 +14,8 @@ const usePopupStyles = () => ({
     height: "300px",
     overflow: "auto",
     padding: "8px",
-    margin: "0px"
+    margin: "0px",
+    borderRadius: "10px"
   },
   groupHeader: {
     padding: "10px 8px",
@@ -26,6 +28,7 @@ const usePopupStyles = () => ({
     padding: "4px",
     cursor: "pointer",
     background: "transparent",
+    borderRadius: "10px",
     "&.active": {
       background: "rgba(55, 53, 47, 0.08)"
     },

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

@@ -11,19 +11,24 @@ const embedImageStyle = [{
     key: "url",
     type: "backgroundImage"
   }]
-}, {
-  tab: "Image List Settings",
-  value: "imageListSettings",
-  fields: [{
-    label: "Image List Columns",
-    key: "cols",
-    type: "text"
-  }, {
-    label: "Row Height",
-    key: "rowHeight",
-    type: "text"
-  }]
-}, {
+},
+// {
+//   tab: "Image List Settings",
+//   value: "imageListSettings",
+//   fields: [
+//     {
+//       label: "Image List Columns",
+//       key: "cols",
+//       type: "text",
+//     },
+//     {
+//       label: "Row Height",
+//       key: "rowHeight",
+//       type: "text",
+//     },
+//   ],
+// },
+{
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{
@@ -63,6 +68,11 @@ const embedImageStyle = [{
     label: "Border Color",
     key: "borderColor",
     type: "color"
+  }, {
+    label: "Box Shadow",
+    key: "boxShadow",
+    type: "text",
+    placeholder: "Enter Box Shadow Code"
   }]
 }, {
   tab: "Size",

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

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { Grid, Button, Typography } from "@mui/material";
-import { UploadBtnIcon } from "../../iconslist";
 import ImageSelector from "../../ImageSelector/ImageSelector";
+import UploadStyles from "../../ImageSelector/UploadStyles";
+import Icon from "../../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -16,6 +17,7 @@ const BackgroundImage = props => {
   } = data;
   const [base64, setBase64] = useState(value);
   const [open, setOpen] = useState(false);
+  const classes = UploadStyles();
   const onRemoveBG = () => {
     setBase64(null);
     onChange({
@@ -36,7 +38,7 @@ const BackgroundImage = props => {
     handleClose();
   };
   return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
+    item: true,
     children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       color: "primary",
@@ -47,42 +49,41 @@ const BackgroundImage = props => {
       },
       children: "Upload Image"
     }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        position: "relative",
-        marginTop: "12px",
-        marginBottom: "12px",
-        width: "100%",
-        backgroundImage: base64 ? `url(${base64})` : "none",
-        height: "200px",
-        borderRadius: "10px",
-        backgroundPosition: "center",
-        backgroundSize: "contain",
-        backgroundRepeat: "no-repeat",
-        backgroundColor: "rgba(0,0,0,0.5)"
-      },
+      container: true,
+      sx: classes.uploadContainer,
       children: /*#__PURE__*/_jsx(Grid, {
-        className: "uploadImageSection",
-        children: base64 ? /*#__PURE__*/_jsx(Grid, {
-          className: "removeImageText",
-          onClick: onRemoveBG,
-          children: "REMOVE"
-        }) : /*#__PURE__*/_jsx(Grid, {
-          className: "uploadImageText",
-          children: /*#__PURE__*/_jsxs(Button, {
-            component: "label",
-            variant: "contained",
-            style: {
-              background: "none"
-            },
-            onClick: handleClick,
-            children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+        item: true,
+        xs: 12,
+        style: {
+          backgroundImage: base64 ? `url(${base64})` : "none",
+          height: "200px"
+        },
+        sx: classes.uploadField,
+        children: /*#__PURE__*/_jsx(Grid, {
+          className: "uploadImageSection",
+          children: base64 ? /*#__PURE__*/_jsx(Grid, {
+            className: "removeImageText",
+            onClick: onRemoveBG,
+            children: "REMOVE"
+          }) : /*#__PURE__*/_jsx(Grid, {
+            className: "uploadImageText",
+            children: /*#__PURE__*/_jsxs(Button, {
+              component: "label",
+              variant: "text",
               style: {
-                paddingLeft: "8px"
+                background: "none"
               },
-              children: "UPLOAD"
-            })]
+              onClick: handleClick,
+              sx: classes.uploadIcon,
+              children: [/*#__PURE__*/_jsx(Icon, {
+                icon: "fileUpload"
+              }), /*#__PURE__*/_jsx("span", {
+                style: {
+                  paddingLeft: "8px"
+                },
+                children: "upload your image"
+              })]
+            })
           })
         })
       })

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

@@ -28,6 +28,35 @@ const gridItemStyle = [{
     key: "borderColorHover",
     type: "color"
   }]
+}, {
+  tab: "Animation",
+  value: "animation",
+  fields: [{
+    label: "Choose Animation",
+    key: "animation",
+    type: "textOptions",
+    options: [{
+      text: "No Animation",
+      value: "No Animation"
+    }, {
+      text: "Fade In",
+      value: "animate__animated animate__fadeIn"
+    }, {
+      text: "Zoom In",
+      value: "animate__animated animate__zoomIn"
+    }, {
+      text: "Bounce In Left",
+      value: "animate__animated animate__bounceInLeft"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }]
 }, {
   tab: "Position",
   value: "position",

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

@@ -125,7 +125,7 @@ const StyleBuilder = props => {
     open: true,
     className: ` dialogComp tools-drawer`,
     anchor: "right",
-    hideBackdrop: true,
+    onClose: onClose,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/common/Uploader.js

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import { Grid, Button } from "@mui/material";
 import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
-import { UploadBtnIcon } from "./iconslist";
+import Icon from "./Icon";
+import UploadStyles from "../common/ImageSelector/UploadStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Uploader = props => {
@@ -12,6 +13,7 @@ const Uploader = props => {
     onUploaded,
     customProps
   } = props;
+  const classes = UploadStyles();
   const {
     key
   } = data;
@@ -33,22 +35,16 @@ const Uploader = props => {
     const result = await uploadFile(formData, customProps);
     setUploading(false);
     if (result && result?.imageURL) {
-      onUploaded({
-        [key]: result?.imageURL
-      });
+      onUploaded(result?.imageURL[0]);
     }
   };
   const onRemoveBG = () => {
     setBase64(null);
-    onUploaded({
-      [key]: "none"
-    });
+    onUploaded("none");
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    sx: {
-      pt: 1
-    },
+    sx: classes.uploadContainer,
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -58,17 +54,9 @@ const Uploader = props => {
       xs: 12,
       className: "btn--wrpr",
       style: {
-        marginTop: "12px",
-        width: "100%",
-        backgroundImage: base64 ? `url(${base64})` : "none",
-        backgroundSize: "contain",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        height: "200px",
-        position: "relative",
-        backgroundColor: "rgba(0,0,0,0.5)",
-        borderRadius: "10px"
+        backgroundImage: base64 ? `url(${base64})` : "none"
       },
+      sx: classes.uploadField,
       children: !uploading ? /*#__PURE__*/_jsx(Grid, {
         className: "uploadImageSection",
         children: base64 ? /*#__PURE__*/_jsx(Grid, {
@@ -79,10 +67,11 @@ const Uploader = props => {
           className: "uploadImageText",
           children: /*#__PURE__*/_jsxs(Button, {
             component: "label",
-            variant: "contained",
+            variant: "text",
             style: {
               background: "none"
             },
+            sx: classes.uploadIcon,
             children: [/*#__PURE__*/_jsx("input", {
               type: "file",
               style: {
@@ -90,11 +79,13 @@ const Uploader = props => {
                 width: "0px"
               },
               onChange: handleChange
-            }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+            }), /*#__PURE__*/_jsx(Icon, {
+              icon: "fileUpload"
+            }), /*#__PURE__*/_jsx("span", {
               style: {
                 paddingLeft: "8px"
               },
-              children: "UPLOAD"
+              children: "upload your image"
             })]
           })
         })

package/dist/Editor/common/iconslist.js

@@ -1451,4 +1451,82 @@ export const FileUploadIcon = () => {
       strokeLinejoin: "round"
     })]
   });
-};
+};
+export const RestRight = () => /*#__PURE__*/_jsxs("svg", {
+  width: "20",
+  height: "16",
+  viewBox: "0 0 22 23",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M13.6474 5.31C12.8499 5.07167 11.9699 4.91583 10.9983 4.91583C6.60745 4.91583 3.05078 8.4725 3.05078 12.8633C3.05078 17.2633 6.60745 20.82 10.9983 20.82C15.3891 20.82 18.9458 17.2633 18.9458 12.8725C18.9458 11.2408 18.4508 9.71917 17.6074 8.45417",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.7859 5.53L12.1367 2.48666",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.7845 5.53L11.6953 7.785",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const MoreHorizontal = ({
+  width = "22",
+  height = "22"
+}) => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: width,
+  height: height,
+  viewBox: "0 0 22 22",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M4.58333 9.16797C3.575 9.16797 2.75 9.99297 2.75 11.0013C2.75 12.0096 3.575 12.8346 4.58333 12.8346C5.59167 12.8346 6.41667 12.0096 6.41667 11.0013C6.41667 9.99297 5.59167 9.16797 4.58333 9.16797Z",
+    fill: "#64748B"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M17.4168 9.16797C16.4085 9.16797 15.5835 9.99297 15.5835 11.0013C15.5835 12.0096 16.4085 12.8346 17.4168 12.8346C18.4252 12.8346 19.2502 12.0096 19.2502 11.0013C19.2502 9.99297 18.4252 9.16797 17.4168 9.16797Z",
+    fill: "#64748B"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.9998 9.16797C9.9915 9.16797 9.1665 9.99297 9.1665 11.0013C9.1665 12.0096 9.9915 12.8346 10.9998 12.8346C12.0082 12.8346 12.8332 12.0096 12.8332 11.0013C12.8332 9.99297 12.0082 9.16797 10.9998 9.16797Z",
+    fill: "#64748B"
+  })]
+});
+export const PlusIcon = props => /*#__PURE__*/_jsxs("svg", {
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M6 1.33331V10.6666",
+    stroke: "#2563EB",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M1.33203 6H10.6654",
+    stroke: "#2563EB",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const UploadImage = () => /*#__PURE__*/_jsx("svg", {
+  width: "38",
+  height: "32",
+  viewBox: "0 0 38 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M29.8163 9.58251L29.8806 9.91219L30.2101 9.97734C34.3518 10.7964 37.5 14.4866 37.5 18.9474C37.5 24.0138 33.4469 28.1316 28.5 28.1316H23.9565V28.1315L23.9493 28.1316C23.8527 28.133 23.7566 28.1148 23.6665 28.0779C23.5763 28.041 23.4936 27.9859 23.4234 27.9153C23.3532 27.8448 23.2969 27.7601 23.2583 27.6661C23.2197 27.5721 23.1997 27.4709 23.1997 27.3684C23.1997 27.2659 23.2197 27.1647 23.2583 27.0707C23.2969 26.9767 23.3532 26.8921 23.4234 26.8215C23.4936 26.751 23.5763 26.6959 23.6665 26.6589C23.7566 26.622 23.8527 26.6038 23.9493 26.6052V26.6053H23.9565H28.5C32.6778 26.6053 36.0217 23.1825 36.0217 18.9474C36.0217 14.9479 33.0358 11.6747 29.1933 11.3181C29.0288 11.3014 28.8731 11.2281 28.7524 11.1079C28.6315 10.9874 28.553 10.8271 28.532 10.6527C28.2917 8.54527 27.3763 6.49581 25.7849 4.87354L25.428 5.22368L25.7849 4.87354C23.908 2.9603 21.4566 2.02632 19 2.02632C16.5427 2.02632 14.1061 2.95891 12.228 4.87355C10.0597 7.08383 9.14397 10.0853 9.48097 12.9531L9.48133 12.956C9.49474 13.0646 9.48534 13.1749 9.45388 13.2793C9.42242 13.3836 9.36977 13.4793 9.29996 13.5602C9.23016 13.6411 9.1449 13.7053 9.05021 13.7491C8.95574 13.7928 8.85366 13.8154 8.75058 13.8158H8.26087C4.75072 13.8158 1.97826 16.6559 1.97826 20.2105C1.97826 23.7651 4.75072 26.6053 8.26087 26.6053H14.0435V26.6053L14.0507 26.6052C14.1473 26.6038 14.2434 26.622 14.3335 26.6589C14.4237 26.6959 14.5064 26.751 14.5766 26.8215C14.6468 26.8921 14.7031 26.9767 14.7417 27.0707C14.7803 27.1647 14.8003 27.2659 14.8003 27.3684C14.8003 27.4709 14.7803 27.5721 14.7417 27.6661C14.7031 27.7601 14.6468 27.8448 14.5766 27.9153C14.5064 27.9859 14.4237 28.041 14.3335 28.0779C14.2434 28.1148 14.1473 28.133 14.0507 28.1316L14.0507 28.1316H14.0435H8.26087C3.99094 28.1316 0.5 24.5869 0.5 20.2105C0.5 16.0852 3.61641 12.7343 7.55871 12.3663L8.01514 12.3236L8.01222 11.8652C7.99355 8.93435 9.01416 6.01183 11.1864 3.79752L11.1864 3.7975C13.3418 1.60027 16.1735 0.5 19 0.5C21.8271 0.5 24.6696 1.59883 26.8265 3.79751L27.1834 3.44737L26.8265 3.79752C28.4274 5.42941 29.4021 7.45776 29.8163 9.58251ZM19.498 15.0104L19.4991 15.0115L24.0388 19.2184C24.0393 19.2189 24.0399 19.2194 24.0404 19.2199C24.3569 19.521 24.3533 20.0152 24.088 20.3106C23.838 20.5888 23.3218 20.6127 23.0442 20.3568C23.0441 20.3566 23.0439 20.3565 23.0438 20.3564L20.5794 18.0678L19.7391 17.2875V18.4342V30.7368C19.7391 31.1674 19.3993 31.5 19 31.5C18.6007 31.5 18.2609 31.1674 18.2609 30.7368V18.4342V17.2875L17.4206 18.0678L14.9562 20.3564C14.9561 20.3565 14.956 20.3566 14.9558 20.3568C14.6953 20.5969 14.1897 20.5869 13.8934 20.291C13.6373 20.0351 13.6548 19.5086 13.9591 19.2204C13.9595 19.22 13.96 19.2196 13.9604 19.2191L18.5009 15.0115L18.5022 15.0102C18.609 14.9106 18.6645 14.875 18.7115 14.8552C18.7568 14.8362 18.833 14.8158 19 14.8158C19.1494 14.8158 19.2369 14.8398 19.2955 14.8655C19.3563 14.8922 19.4156 14.9336 19.498 15.0104Z",
+    fill: "#64748B",
+    stroke: "#64748B"
+  })
+});

package/dist/Editor/hooks/useMentions.js

@@ -5,10 +5,6 @@ const TYPES = {
   "@": "mentions",
   "/": "elements"
 };
-const SHORTHAND_MATCHES = {
-  mentions: new RegExp(/^@(\w+)$/),
-  elements: new RegExp(/^\/(\w+)$/)
-};
 const getStartEnd = ({
   selection,
   editor
@@ -59,28 +55,6 @@ const getStartEnd = ({
     };
   }
 };
-const getRegexCategories = beforeText => {
-  try {
-    if (beforeText) {
-      if (beforeText.match(SHORTHAND_MATCHES.mentions)) {
-        return {
-          type: "mentions",
-          beforeMatch: beforeText.match(SHORTHAND_MATCHES.mentions)
-        };
-      } else if (beforeText.match(SHORTHAND_MATCHES.elements)) {
-        return {
-          type: "elements",
-          beforeMatch: beforeText.match(SHORTHAND_MATCHES.elements)
-        };
-      }
-    } else {
-      return null;
-    }
-  } catch (err) {
-    console.log(err);
-    return null;
-  }
-};
 const useMentions = props => {
   const {
     editor,

package/dist/Editor/utils/customHooks/useResize.js

@@ -2,7 +2,8 @@ import { useState } from "react";
 const useResize = ({
   parentDOM,
   size: defaultSize,
-  isGrid
+  isGrid,
+  onChange
 }) => {
   const {
     width,
@@ -16,6 +17,9 @@ const useResize = ({
     ...defaultSize
   });
   const [resizing, setResizing] = useState(false);
+  let latest = {
+    ...size
+  };
   const onLoad = defaultSize => {
     setSize({
       widthInPercent: 100,
@@ -31,16 +35,21 @@ const useResize = ({
   const onMouseUp = () => {
     document.removeEventListener("pointermove", onMouseMove);
     document.removeEventListener("pointerup", onMouseUp);
+    if (onChange) {
+      onChange(latest);
+    }
     setResizing(false);
   };
   const onMouseMove = e => {
     setSize(currentSize => {
       const calcWidth = (currentSize.width || width) + e.movementX;
-      return {
+      const calc = {
         width: calcWidth,
-        height: (currentSize.height || height) + e.movementY,
+        height: (parseInt(currentSize.height) || height) + e.movementY,
         widthInPercent: calcWidth / width * 100
       };
+      latest = calc;
+      return calc;
     });
   };
   return [size, onMouseDown, resizing, onLoad];

package/dist/Editor/utils/embed.js

@@ -20,22 +20,26 @@ export const createEmbedNode = (type, {
     text: " "
   }],
   size: {
-    widthInPercent: "100%",
-    height: "auto"
+    widthInPercent: "100",
+    height: type === "image" ? "auto" : 300
   },
   alignment: {
     horizantal: "center"
   }
 });
 export const insertEmbed = (editor, embedData, format) => {
-  const {
-    url,
-    images
-  } = embedData;
-  if (!url && images.length === 0) return;
-  const embed = createEmbedNode(format, embedData);
-  Transforms.insertNodes(editor, embed, {
-    at: editor.selection.anchor.path
-  });
-  insertNewLine(editor);
+  try {
+    const {
+      url,
+      images
+    } = embedData;
+    if (!url && images.length === 0) return;
+    const embed = createEmbedNode(format, embedData);
+    Transforms.insertNodes(editor, embed, {
+      at: editor.selection.anchor.path
+    });
+    insertNewLine(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/utils/emoji.js

@@ -1,6 +1,5 @@
 import { Transforms } from "slate";
 export const insertEmoji = (editor, emoji, position) => {
-  console.log(editor.selection);
   Transforms.insertText(editor, emoji, {
     at: position,
     select: true

package/dist/Editor/utils/form.js

@@ -17,6 +17,7 @@ export const insertForm = (editor, item) => {
         bottom: 12
       }
     },
+    workflow: [],
     children: [{
       ...formField()
     }]

package/dist/Editor/utils/insertAppHeader.js

@@ -2,19 +2,73 @@ 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: "stacked",
+  type: "grid",
+  grid: "container",
   children: [{
-    text: ""
-  }]
+    type: "grid-item",
+    grid: 12,
+    children: [{
+      type: "app-header",
+      appTitle: "Logo",
+      appLogo: "none",
+      menus: menus || [{
+        type: "menu",
+        url: "/",
+        target: "_blank",
+        text: "Home"
+      }, {
+        type: "menu",
+        url: "/wireframe2",
+        target: "_blank",
+        text: "Wireframe"
+      }, {
+        type: "menu",
+        url: "https://www.google.com",
+        target: "_blank",
+        text: "Work"
+      }, {
+        type: "menu",
+        url: "https://www.google.com",
+        target: "_blank",
+        text: "Contact"
+      }],
+      menuStyle: "stacked",
+      children: [{
+        text: " "
+      }],
+      logoFontSize: "32px",
+      titleFontFamily: "PoppinsBold",
+      bgColor: "rgb(255, 255, 255, 0)",
+      borderColor: "rgba(255, 255, 255, 0)",
+      textColor: "rgb(0, 0, 0)",
+      cellBgColor: "#FFFFFF"
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "8",
+      left: "8",
+      right: "8",
+      bottom: "8"
+    },
+    alignment: {
+      horizantal: "center"
+    }
+  }],
+  alignment: {
+    flexDirection: "column"
+  },
+  lockSpacing: true,
+  bannerSpacing: {
+    top: "8",
+    left: "8",
+    right: "8",
+    bottom: "8"
+  },
+  size: {
+    widthInPercent: 100
+  },
+  bgColor: "rgba(255, 255, 255, 1)"
 });
 export const insertAppHeader = (editor, props) => {
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -22,6 +22,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "emoji-mart": "^5.5.2",
     "html2canvas": "^1.4.1",
     "husky": "^8.0.3",