@flozy/editor 1.3.2 → 1.3.3

package/dist/Editor/Elements/Grid/templates/index.js

@@ -1,5 +1,17 @@
+import image_banner_text from "./image_banner_text";
+import right_image_left_text from "./right_image_left_text";
+import white_LTRI from "./white_LTRI";
 const GRID_TEMPLATES = [{
   title: "Image Banner with Text",
-  img: require("./full_grid.png")
+  img: require("./full_grid.png"),
+  content: image_banner_text
+}, {
+  title: "Right Image and Left Text",
+  img: require("./full_grid.png"),
+  content: right_image_left_text
+}, {
+  title: "White - Right Image and Left Text",
+  img: require("./full_grid.png"),
+  content: white_LTRI
 }];
 export default GRID_TEMPLATES;

package/dist/Editor/Elements/Grid/templates/right_image_left_text.js

@@ -0,0 +1,81 @@
+const right_image_left_text = {
+  type: "grid",
+  grid: "container",
+  backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
+  children: [{
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: "About Us",
+        fontSize: "huge",
+        color: "#ffffff"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "medium",
+        text: "",
+        color: "#ffffff"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "medium",
+        text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type.",
+        color: "#ffffff"
+      }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    alignment: {
+      vertical: "center"
+    }
+  }, {
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "image",
+      alt: "",
+      url: "https://www.boardeffect.com/wp-content/uploads/2020/01/Sample-Letter-to-Remove-a-Board-Member.jpg",
+      children: [{
+        text: ""
+      }],
+      size: {
+        width: 769.0000000000003,
+        height: 471,
+        widthInPercent: 100.26075619295962
+      }
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }],
+      size: {
+        height: 300,
+        widthInPercent: 100
+      }
+    }],
+    bgColor: "rgba(255, 255, 255, 0)"
+  }],
+  alignment: {
+    horizantal: "center",
+    vertical: "center"
+  }
+};
+export default right_image_left_text;

package/dist/Editor/Elements/Grid/templates/white_LTRI.js

@@ -0,0 +1,116 @@
+const white_LTRI = {
+  type: "grid",
+  grid: "container",
+  children: [{
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        text: "",
+        fontSize: "huge",
+        color: "#000000"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        text: ""
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        text: "Solution for Your"
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        text: "Digital Success",
+        bold: true
+      }]
+    }, {
+      type: "paragraph",
+      children: [{
+        fontSize: "huge",
+        color: "#000000",
+        bold: true,
+        text: ""
+      }]
+    }, {
+      type: "button",
+      children: [{
+        text: ""
+      }],
+      buttonLink: {
+        linkType: "webAddress"
+      },
+      label: "Book a Demo",
+      textColor: "rgba(255, 255, 255, 1)",
+      bgColor: "rgba(37, 99, 235, 1)",
+      lockSpacing: false,
+      bannerSpacing: {
+        top: "12",
+        left: "24",
+        right: "24",
+        bottom: "12"
+      }
+    }],
+    bgColor: "rgba(255, 255, 255, 0)",
+    alignment: {
+      vertical: "center"
+    }
+  }, {
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      type: "image",
+      alt: "",
+      url: "https://sweetp-user-uploads.s3.eu-west-2.amazonaws.com/stage%20/%201704194091991_notes",
+      children: [{
+        text: ""
+      }],
+      size: {
+        width: 769.0000000000003,
+        height: 471,
+        widthInPercent: 100.26075619295962
+      }
+    }, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }],
+      size: {
+        height: 471,
+        widthInPercent: 100.26075619295962,
+        width: 769.0000000000003
+      }
+    }],
+    bgColor: "rgba(255, 255, 255, 0)"
+  }],
+  alignment: {
+    horizantal: "center",
+    vertical: "center"
+  },
+  bgColor: "rgba(254, 254, 255, 1)"
+};
+export default white_LTRI;

package/dist/Editor/Elements/Mentions/Mentions.js

@@ -28,9 +28,9 @@ const Mentions = ({
   return /*#__PURE__*/_jsxs("span", {
     ...attributes,
     contentEditable: false,
-    "data-cy": `mention-${element.character.replace(" ", "-")}`,
+    "data-cy": `mention-${element.character.name.replace(" ", "-")}`,
     style: style,
-    children: ["@", element.character, children]
+    children: ["@", element.character.name, children]
   });
 };
 export default Mentions;

package/dist/Editor/Toolbar/Toolbar.js

@@ -100,7 +100,8 @@ const Toolbar = props => {
             }, `gi_codeToText_${gi}`);
           case "grid":
             return /*#__PURE__*/_jsx(GridButton, {
-              editor: editor
+              editor: editor,
+              customProps: customProps
             }, element.id);
           case "newLine":
             return /*#__PURE__*/_jsx(NewLineButton, {

package/dist/Editor/common/MentionsPopup.js

@@ -49,7 +49,7 @@ const MentionsPopup = props => {
         borderRadius: "3px",
         background: i === index ? "#B4D5FF" : "transparent"
       },
-      children: char
+      children: char.name
     }, char))
   }) : null;
 };

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

@@ -47,5 +47,14 @@ const buttonStyle = [{
     key: "borderColor",
     type: "color"
   }]
+}, {
+  tab: "Save As Template",
+  value: "saveAsTemplate",
+  needActions: false,
+  fields: [{
+    label: "Template Image",
+    key: "saveAsTemplate",
+    type: "saveAsTemplate"
+  }]
 }];
 export default buttonStyle;

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

@@ -6,6 +6,14 @@ const embedImageStyle = [{
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
 }, {
   tab: "Position",
   value: "position",

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

@@ -0,0 +1,10 @@
+const embedVideoStyle = [{
+  tab: "URL",
+  value: "url",
+  fields: [{
+    label: "URL",
+    key: "url",
+    type: "text"
+  }]
+}];
+export default embedVideoStyle;

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

@@ -9,6 +9,7 @@ import ElementSize from "./elementSize";
 import ImageTexts from "./imageTexts";
 import MenusArray from "./menusArray";
 import ButtonLink from "./buttonLink";
+import SaveAsTemplate from "./saveAsTemplate";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -20,6 +21,7 @@ const FieldMap = {
   elementSize: ElementSize,
   imageTexts: ImageTexts,
   menusArray: MenusArray,
-  buttonLink: ButtonLink
+  buttonLink: ButtonLink,
+  saveAsTemplate: SaveAsTemplate
 };
 export default FieldMap;

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

@@ -0,0 +1,163 @@
+import React, { useState } from "react";
+import { Grid, Button, Typography, Select, MenuItem, TextField } from "@mui/material";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { convertBase64 } from "../../../utils/helper";
+import { uploadFile } from "../../../service/fileupload";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SaveAsTemplate = props => {
+  const {
+    value,
+    data,
+    customProps,
+    elementProps,
+    handleClose
+  } = props;
+  const {
+    onSaveTemplate
+  } = customProps;
+  const {
+    key
+  } = data;
+  const [template, setTemplate] = useState({
+    type: "Element",
+    category: "",
+    img_aws: null
+  });
+  const [base64, setBase64] = useState(value);
+  const [uploading, setUploading] = useState(false);
+  const handleChange = async e => {
+    const file = e.target.files[0];
+    const strImage = await convertBase64(file);
+    setBase64(strImage);
+    doUpload(strImage);
+  };
+  const onChange = e => {
+    setTemplate({
+      ...template,
+      [e.target.name]: e.target.value
+    });
+  };
+  const doUpload = async strImage => {
+    setUploading(true);
+    const result = await uploadFile({
+      image: strImage
+    }, customProps);
+    setUploading(false);
+    if (result && result?.imageURL) {
+      setTemplate({
+        ...template,
+        img_aws: result?.imageURL
+      });
+    }
+  };
+  const onRemoveBG = () => {
+    setBase64(null);
+    onChange({
+      [key]: "none"
+    });
+  };
+  const handleSave = () => {
+    const formData = new FormData();
+    const params = {
+      ...template,
+      thumbnail: null,
+      content: JSON.stringify(elementProps)
+    };
+    for (let key in params) {
+      formData.append(key, params[key]);
+    }
+    onSaveTemplate(formData, params);
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    container: true,
+    spacing: 2,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      children: /*#__PURE__*/_jsxs(Select, {
+        fullWidth: true,
+        value: template?.type,
+        name: "type",
+        onChange: onChange,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          value: "Element",
+          children: "Element"
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "Section",
+          children: "Section"
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "Templates",
+          children: "Templates"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 212,
+      children: /*#__PURE__*/_jsx(TextField, {
+        fullWidth: true,
+        name: "category",
+        value: template?.category,
+        onChange: onChange
+      })
+    }), /*#__PURE__*/_jsxs(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex"
+      },
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsxs(Button, {
+        component: "label",
+        variant: "contained",
+        startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
+        children: ["Upload file", /*#__PURE__*/_jsx("input", {
+          type: "file",
+          style: {
+            opacity: 0,
+            width: "0px"
+          },
+          onChange: handleChange
+        })]
+      }), /*#__PURE__*/_jsxs(Grid, {
+        className: "dflex",
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "checkbox",
+          value: "none",
+          checked: value === "none",
+          onChange: onRemoveBG
+        }), " ", /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          children: "Remove"
+        })]
+      })]
+    }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginTop: "12px",
+        width: "100%",
+        backgroundImage: base64 ? `url(${base64})` : "none",
+        height: "100px",
+        backgroundPosition: "center",
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat"
+      }
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: handleSave,
+        children: "Save As Template"
+      })
+    })]
+  });
+};
+export default SaveAsTemplate;

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

@@ -43,9 +43,22 @@ const gridStyle = [{
   tab: "Background",
   value: "backgroundImage",
   fields: [{
+    label: "URL",
+    key: "backgroundImage",
+    type: "text"
+  }, {
     label: "Background Image",
     key: "backgroundImage",
     type: "backgroundImage"
   }]
+}, {
+  tab: "Save As Template",
+  value: "saveAsTemplate",
+  needActions: false,
+  fields: [{
+    label: "Template Image",
+    key: "saveAsTemplate",
+    type: "saveAsTemplate"
+  }]
 }];
 export default gridStyle;

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

@@ -12,7 +12,8 @@ const StyleContent = props => {
     renderTabs,
     onChange,
     element,
-    customProps
+    customProps,
+    handleClose
   } = props;
   const tabContent = renderTabs.find(f => f.value === value);
   const {
@@ -36,7 +37,8 @@ const StyleContent = props => {
           value: element[m.key],
           onChange: onChange,
           elementProps: element,
-          customProps: customProps
+          customProps: customProps,
+          handleClose: handleClose
         }, `ei_stt_tab_${value}_${m.key}`) : null;
       })
     })
@@ -76,6 +78,12 @@ const StyleBuilder = props => {
   } = props;
   const [elementProps, setElementProps] = useState(element);
   const [tab, setTab] = useState(renderTabs[0]?.value);
+  const tabVal = renderTabs?.find(f => f.value === tab);
+  const {
+    needActions = true
+  } = tabVal || {
+    needActions: true
+  };
   const handleChange = (e, newValue) => {
     setTab(newValue);
   };
@@ -88,6 +96,9 @@ const StyleBuilder = props => {
   const handleSave = () => {
     onSave(elementProps);
   };
+  const handleClose = () => {
+    onClose();
+  };
   return /*#__PURE__*/_jsx(Dialog, {
     open: true,
     fullWidth: true,
@@ -135,9 +146,10 @@ const StyleBuilder = props => {
           value: tab,
           element: elementProps,
           onChange: onElementPropsChange,
-          customProps: customProps
+          customProps: customProps,
+          handleClose: handleClose
         })]
-      }), /*#__PURE__*/_jsxs(DialogActions, {
+      }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {
         sx: {
           p: 0,
           pt: 2
@@ -156,7 +168,7 @@ const StyleBuilder = props => {
           className: "primaryBtn",
           children: "Save"
         })]
-      })]
+      }) : null]
     })
   });
 };

package/dist/Editor/hooks/withCommon.js

@@ -6,7 +6,7 @@ import withEmbeds from "../plugins/withEmbeds";
 import withEquation from "../plugins/withEquation";
 import withMentions from "../plugins/withMentions";
 import withLayout from "../plugins/withLayout";
-const withCommon = props => {
-  return withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props))))))));
+const withCommon = (props, rest = {}) => {
+  return rest.needLayout ? withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))))) : withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withReact(props)))))));
 };
 export default withCommon;

package/dist/Editor/utils/grid.js

@@ -1,13 +1,19 @@
 import { Transforms } from "slate";
 import { gridItem } from "./gridItem";
-export const insertGrid = editor => {
-  const grid = {
+export const insertGrid = (editor, item) => {
+  const grid = !item ? {
     type: "grid",
     grid: "container",
+    backgroundImage: "https://t4.ftcdn.net/jpg/05/06/47/83/360_F_506478399_l0jgZ5ZWj80o8XYdEJtYfQhVYMU56qDJ.jpg",
     children: [{
       ...gridItem()
     }]
-  };
-  Transforms.insertNodes(editor, grid);
+  } : item;
+  const {
+    selection
+  } = editor;
+  Transforms.insertNodes(editor, grid, {
+    at: selection.focus.path
+  });
   Transforms.move(editor);
 };

package/dist/Editor/utils/gridItem.js

@@ -6,9 +6,10 @@ export const gridItem = () => {
     children: [{
       type: "paragraph",
       children: [{
-        text: `Grid Item Text - ${new Date().getTime()}`
+        text: `About Us`
       }]
-    }]
+    }],
+    bgColor: "rgba(255, 255, 255, 0)"
   };
 };
 export const insertGridItem = editor => {

package/dist/Editor/utils/insertAppHeader.js

@@ -17,34 +17,39 @@ export const createAppHeaderNode = ({
   }]
 });
 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)) {
+  try {
+    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], {
+          at: selection.focus.path
+        });
+      } else {
+        Transforms.wrapNodes(editor, appHeader, {
+          split: true
+        });
+      }
+    } else {
       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]
-    });
+  } catch (err) {
+    alert("Something went wrong");
+    console.log(err);
   }
 };
 export const removeAppHeader = (editor, path) => {

package/package.json

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