@flozy/editor 1.5.9 → 1.6.0

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

@@ -21,7 +21,6 @@ const Alignment = props => {
     });
   };
   const flexDirection = value?.flexDirection || "row";
-  console.log(flexDirection);
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     style: {
@@ -127,11 +126,11 @@ const Alignment = props => {
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "row",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
+            label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "column",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(DirectionColumIcon, {})
+            label: /*#__PURE__*/_jsx(DirectionRowIcon, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "row-reverse",
             control: /*#__PURE__*/_jsx(Radio, {}),

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

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Grid, Button, Typography } from "@mui/material";
 // import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { convertBase64 } from "../../../utils/helper";
 import { uploadFile } from "../../../service/fileupload";
 import { UploadBtnIcon } from "../../iconslist";
+import QuiltedImageList from "../../ImageList";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -11,13 +12,30 @@ const BackgroundImage = props => {
     value,
     data,
     customProps,
+    elementProps,
     onChange
   } = props;
+  const {
+    services
+  } = customProps;
   const {
     key
   } = data;
+  const {
+    images
+  } = elementProps;
   const [base64, setBase64] = useState(value);
   const [uploading, setUploading] = useState(false);
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    getItems();
+  }, []);
+  const getItems = async () => {
+    if (services) {
+      let result = await services("getAssets", {});
+      setItems(result);
+    }
+  };
   const handleChange = async e => {
     const file = e.target.files[0];
     const strImage = await convertBase64(file);
@@ -42,6 +60,16 @@ const BackgroundImage = props => {
       [key]: "none"
     });
   };
+  const onSelectChange = (img, status) => {
+    const uImages = !status ? [...images]?.filter(f => f.img !== img) : [...images, {
+      img
+    }];
+    onChange({
+      images: uImages,
+      url: uImages.length === 1 ? uImages[0].img : "",
+      alt: ""
+    });
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     children: [/*#__PURE__*/_jsx(Grid, {
@@ -103,6 +131,18 @@ const BackgroundImage = props => {
           })
         })
       })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginBottom: "12px"
+      },
+      children: /*#__PURE__*/_jsx(QuiltedImageList, {
+        itemData: [...items],
+        cols: 2,
+        selected: images,
+        onSelectChange: onSelectChange
+      })
     })]
   });
 };

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

@@ -0,0 +1,95 @@
+import React from "react";
+import { TextField, IconButton, Grid, Typography } from "@mui/material";
+import { sizeMap } from "../../../utils/font.js";
+import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const FontSize = props => {
+  const {
+    value,
+    data,
+    onChange
+  } = props;
+  const {
+    key
+  } = data;
+  const handleChange = e => {
+    let inc = parseInt(e.target.value) || 16;
+    inc = inc > 200 ? 200 : inc;
+    onChange({
+      [key]: inc
+    });
+  };
+  const getSizeVal = () => {
+    try {
+      const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      return parseInt(size || 16);
+    } catch (err) {
+      return "";
+    }
+  };
+  const combinedOldVal = getSizeVal();
+  const onIncreaseSize = () => {
+    let inc = (combinedOldVal || 0) + 1;
+    inc = inc > 200 ? 200 : inc;
+    onChange({
+      [key]: inc
+    });
+  };
+  const onDecreaseSize = () => {
+    onChange({
+      [key]: combinedOldVal - 1 || 0
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginBottom: "5px"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: {
+          fontSize: "14px",
+          fontWeight: "500"
+        },
+        children: data?.label
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        marginBottom: "16px"
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        value: combinedOldVal,
+        onChange: handleChange,
+        size: "small",
+        inputProps: {
+          style: {
+            width: "30px",
+            textAlign: "center"
+          }
+        },
+        InputProps: {
+          endAdornment: /*#__PURE__*/_jsxs("div", {
+            className: "textFontArrows",
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              onClick: onIncreaseSize,
+              size: "small",
+              children: /*#__PURE__*/_jsx(TextPlusIcon, {})
+            }), /*#__PURE__*/_jsx(IconButton, {
+              onClick: onDecreaseSize,
+              size: "small",
+              children: /*#__PURE__*/_jsx(TextMinusIcon, {})
+            })]
+          })
+        }
+      })
+    })]
+  });
+};
+export default FontSize;

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

@@ -50,6 +50,11 @@ const Icons = props => {
       setList(MUIIcons.filled.slice(0, 90));
     }
   };
+  const onRemoveIcon = () => {
+    onChange({
+      [key]: null
+    });
+  };
   const SelectedIcon = value ? fIcons[value] : null;
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
@@ -80,9 +85,16 @@ const Icons = props => {
           xs: 2,
           className: "selctedBtnIcon",
           style: {
-            paddingLeft: "8px"
+            padding: "4px"
           },
-          children: SelectedIcon && /*#__PURE__*/_jsx(SelectedIcon, {})
+          children: SelectedIcon ? /*#__PURE__*/_jsx(Tooltip, {
+            title: "Click to Remove",
+            arrow: true,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onRemoveIcon,
+              children: /*#__PURE__*/_jsx(SelectedIcon, {})
+            })
+          }) : ""
         })]
       })
     }), /*#__PURE__*/_jsx(Grid, {

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

@@ -14,6 +14,7 @@ import TextAlign from "./textAlign";
 import TextOptions from "./textOptions";
 import SelectBox from "./selectBox";
 import Icons from "./icons";
+import FontSize from "./fontSize";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -30,6 +31,7 @@ const FieldMap = {
   textAlign: TextAlign,
   textOptions: TextOptions,
   selectBox: SelectBox,
-  icons: Icons
+  icons: Icons,
+  fontSize: FontSize
 };
 export default FieldMap;

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

@@ -43,7 +43,6 @@ const MenusArray = props => {
     });
   };
   const handleVariant = e => {
-    console.log(e.target.name);
     onChange({
       [e.target.name]: e.target.value
     });

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

@@ -7,7 +7,8 @@ const TextOptions = props => {
   const {
     value,
     data,
-    onChange
+    onChange,
+    elementProps
   } = props;
   const {
     key,
@@ -47,7 +48,7 @@ const TextOptions = props => {
       children: options.map(m => {
         return /*#__PURE__*/_jsx(MenuItem, {
           value: m.value,
-          children: renderOption ? renderOption(m) : m.label || m.text
+          children: renderOption ? renderOption(m, elementProps) : m.label || m.text
         }, `${key}_${m.value}`);
       })
     })]

package/dist/Editor/common/Uploader.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { Grid, Button, Typography } from "@mui/material";
-import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { Grid, Button } from "@mui/material";
 import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import { UploadBtnIcon } from "./iconslist";
@@ -11,13 +10,12 @@ const Uploader = props => {
     value,
     data,
     onUploaded,
-    customProps,
-    disableUpload = false
+    customProps
   } = props;
   const {
     key
   } = data;
-  const [base64, setBase64] = useState(value);
+  const [base64, setBase64] = useState(value?.url);
   const [uploading, setUploading] = useState(false);
   const handleChange = async e => {
     const file = e.target.files[0];
@@ -52,18 +50,10 @@ const Uploader = props => {
       item: true,
       xs: 12,
       children: uploading ? "Uploading..." : ""
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: "body1",
-      color: "primary",
-      sx: {
-        fontSize: "14px",
-        fontWeight: "500",
-        marginBottom: "5px"
-      },
-      children: "Upload Image"
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
+      className: "btn--wrpr",
       style: {
         marginTop: "12px",
         width: "100%",
@@ -76,55 +66,36 @@ const Uploader = props => {
         backgroundColor: "rgba(0,0,0,0.5)",
         borderRadius: "10px"
       },
-      children: /*#__PURE__*/_jsx(Grid, {
+      children: !uploading ? /*#__PURE__*/_jsx(Grid, {
         className: "uploadImageSection",
         children: base64 ? /*#__PURE__*/_jsx(Grid, {
           className: "removeImageText",
           onClick: onRemoveBG,
           children: "REMOVE"
-        }) : /*#__PURE__*/_jsxs(Grid, {
+        }) : /*#__PURE__*/_jsx(Grid, {
           className: "uploadImageText",
-          onClick: handleChange,
-          children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsxs(Button, {
+            component: "label",
+            variant: "contained",
             style: {
-              paddingLeft: "8px"
+              background: "none"
             },
-            children: "UPLOAD"
-          })]
+            children: [/*#__PURE__*/_jsx("input", {
+              type: "file",
+              style: {
+                opacity: 0,
+                width: "0px"
+              },
+              onChange: handleChange
+            }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+              style: {
+                paddingLeft: "8px"
+              },
+              children: "UPLOAD"
+            })]
+          })
         })
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: {
-        paddingTop: "20px"
-      },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        justifyContent: "space-between",
-        children: [!disableUpload ? /*#__PURE__*/_jsxs(Button, {
-          component: "label",
-          sx: {
-            display: "inline-flex",
-            width: "154px",
-            whiteSpace: "nowrap"
-          },
-          variant: "contained",
-          startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
-          children: ["Upload file", /*#__PURE__*/_jsx("input", {
-            type: "file",
-            style: {
-              opacity: 0
-            },
-            onChange: handleChange
-          })]
-        }) : null, base64 ? /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
-          color: "secondary",
-          onClick: onRemoveBG,
-          children: "Clear"
-        }) : ""]
-      })
+      }) : null
     })]
   });
 };

package/dist/Editor/helper/index.js

@@ -15,7 +15,6 @@ export function customCollisionDetectionAlgorithm(args) {
 
   // Collision detection algorithms return an array of collisions
   if (pointerCollisions.length >= 0 && rectIntersection(args)) {
-    console.log(rectIntersection(args));
     return rectIntersection(args);
   }
 

package/dist/Editor/hooks/useDrag.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-const useDrag = props => {
+import { useEffect, useState } from "react";
+const useDrag = () => {
   const [event, setEvent] = useState("");
   useEffect(() => {
     addListener();

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -393,6 +393,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,
         ...attributes,
+        className: "simple-text",
         children: children
       });
   }

package/dist/Editor/utils/button.js

@@ -7,7 +7,8 @@ export const insertButton = editor => {
     }],
     buttonLink: {
       linkType: "webAddress"
-    }
+    },
+    iconPosition: "start"
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);

package/dist/Editor/utils/embed.js

@@ -2,20 +2,23 @@ import { Transforms } from "slate";
 import { createParagraph } from "./paragraph";
 export const createEmbedNode = (type, {
   url,
-  alt
+  alt,
+  images
 }) => ({
   type,
   alt,
   url,
+  images: images || [],
   children: [{
     text: ""
   }]
 });
 export const insertEmbed = (editor, embedData, format) => {
   const {
-    url
+    url,
+    images
   } = embedData;
-  if (!url) return;
+  if (!url && images.length === 0) return;
   const embed = createEmbedNode(format, embedData);
   Transforms.insertNodes(editor, embed, {
     select: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -55,7 +55,8 @@
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files"
+    "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
+    "publish:local": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files && rm -rf /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist &&  babel dist -d /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [