@flozy/editor 1.3.1 → 1.3.3

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Grid } from "@mui/material";
-import LockIcon from '@mui/icons-material/Lock';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
+import LockIcon from "@mui/icons-material/Lock";
+import LockOpenIcon from "@mui/icons-material/LockOpen";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -71,10 +71,10 @@ const BorderRadius = props => {
             width: "20px",
             height: "16px",
             margin: "auto",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -87,10 +87,10 @@ const BorderRadius = props => {
             right: "-25px",
             width: "20px",
             height: "16px",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -103,10 +103,10 @@ const BorderRadius = props => {
             bottom: "-28px",
             width: "20px",
             height: "16px",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("input", {
@@ -119,10 +119,10 @@ const BorderRadius = props => {
             right: "-25px",
             width: "20px",
             height: "16px",
-            border: '1px solid #cccccc',
-            fontSize: '12px',
-            borderRadius: '4px',
-            textAlign: 'center'
+            border: "1px solid #cccccc",
+            fontSize: "12px",
+            borderRadius: "4px",
+            textAlign: "center"
           },
           onChange: handleChange
         }), /*#__PURE__*/_jsx("button", {
@@ -135,7 +135,7 @@ const BorderRadius = props => {
             background: "none"
           },
           onClick: onLockRadius,
-          children: lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
+          children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
         })]
       })
     })

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/common/Uploader.js

@@ -10,7 +10,8 @@ const Uploader = props => {
     value,
     data,
     onUploaded,
-    customProps
+    customProps,
+    disableUpload = false
   } = props;
   const {
     key
@@ -52,7 +53,7 @@ const Uploader = props => {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
         justifyContent: "space-between",
-        children: [/*#__PURE__*/_jsxs(Button, {
+        children: [!disableUpload ? /*#__PURE__*/_jsxs(Button, {
           component: "label",
           sx: {
             display: "inline-flex",
@@ -68,7 +69,7 @@ const Uploader = props => {
             },
             onChange: handleChange
           })]
-        }), base64 ? /*#__PURE__*/_jsx(Button, {
+        }) : null, base64 ? /*#__PURE__*/_jsx(Button, {
           variant: "contained",
           color: "secondary",
           onClick: onRemoveBG,

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/plugins/withEmbeds.js

@@ -16,7 +16,6 @@ const withEmbeds = editor => {
   editor.insertBreak = (...args) => {
     const parentPath = Path.parent(editor.selection.focus.path);
     const parentNode = Node.get(editor, parentPath);
-    console.log(parentNode, parentPath, args);
     if (editor.isVoid(parentNode)) {
       const nextPath = Path.next(parentPath);
       Transforms.insertNodes(editor, {

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.1",
+  "version": "1.3.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"