@flozy/editor 2.1.6 → 2.1.8

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -47,7 +47,8 @@ function AppHeader(props) {
     fontFamily,
     logoFontSize,
     titleFontFamily,
-    isLogoRight
+    isLogoRight,
+    logoHeight = 40
   } = element;
   const {
     window
@@ -137,7 +138,7 @@ function AppHeader(props) {
       children: appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
         alt: `${appTitle} Logo`,
         style: {
-          height: "40px",
+          height: `${parseInt(logoHeight) || 40}px`,
           width: "auto"
         },
         src: appLogo
@@ -240,7 +241,7 @@ function AppHeader(props) {
               children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
                 alt: `${appTitle} Logo`,
                 style: {
-                  height: "40px",
+                  height: `${parseInt(logoHeight) || 40}px`,
                   width: "auto"
                 },
                 src: appLogo

package/dist/Editor/Elements/Embed/Frames/DarkFrame.js

@@ -7,7 +7,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     imagePos,
     handleClick,
-    imageRef
+    imageRef,
+    defaultScale
   } = props;
   const {
     calX,
@@ -16,7 +17,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
   } = imagePos || {
     calX: 0,
     calY: 0,
-    scale: 100
+    scale: defaultScale
   };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -52,7 +53,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
         children: /*#__PURE__*/_jsx("image", {
           x: calX,
           y: calY,
-          height: `${scale || 100}%`,
+          height: `${scale || defaultScale}%`,
           href: href
         })
       }), /*#__PURE__*/_jsxs("filter", {

package/dist/Editor/Elements/Embed/Frames/ImageFrame.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import useDragDom from "../../../hooks/useDragDom";
-import { Button, IconButton, Popper } from "@mui/material";
+import { IconButton, Popper } from "@mui/material";
 import Box from "@mui/material/Box";
 import ContinuousSlider from "./Slider";
 import frames from ".";
@@ -14,14 +14,16 @@ const ImageFrame = props => {
     frame,
     id,
     framePos,
-    onChange
+    onChange,
+    readOnly
   } = props;
   const svgRef = useRef();
   const [dom, setDOM] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
   const imageRef = useRef(null);
   const [event, delta, clear] = useDragDom({
-    refDom: imageRef?.current
+    refDom: imageRef?.current,
+    readOnly
   });
   const {
     x,
@@ -48,12 +50,12 @@ const ImageFrame = props => {
   } = useEditorContext();
   const open = selectedPath === id && Boolean(anchorEl);
   useEffect(() => {
-    if (imageRef?.current) {
+    if (imageRef?.current && !readOnly) {
       setDOM(dom);
     }
   }, [imageRef]);
   useEffect(() => {
-    if (event === "end") {
+    if (event === "end" && !readOnly) {
       onChange({
         framePos: {
           x: calX,
@@ -65,26 +67,25 @@ const ImageFrame = props => {
     }
   }, [event]);
   const handleClick = () => {
-    setSelectedPath(id);
-    setAnchorEl(svgRef?.current);
+    if (!readOnly) {
+      setSelectedPath(id);
+      setAnchorEl(svgRef?.current);
+    }
   };
   const onClose = () => {
     setAnchorEl(null);
   };
   const onScaleChange = newVal => {
-    onChange({
-      framePos: {
-        x: calX,
-        y: calY,
-        scale: newVal
-      }
-    });
-  };
-  const onImageRef = iRef => {
-    console.log(iRef);
-    // setImageRef(iRef);
+    if (!readOnly) {
+      onChange({
+        framePos: {
+          x: calX,
+          y: calY,
+          scale: newVal
+        }
+      });
+    }
   };
-
   const handleClose = () => {
     setAnchorEl(null);
     setSelectedPath(null);
@@ -93,14 +94,14 @@ const ImageFrame = props => {
     children: [/*#__PURE__*/_jsx(SVGFrame, {
       ref: svgRef,
       ...props,
-      onImageRef: onImageRef,
       handleClick: handleClick,
       imagePos: {
         calX,
         calY,
         scale
       },
-      imageRef: imageRef
+      imageRef: imageRef,
+      defaultScale: 100
     }), /*#__PURE__*/_jsx(Popper, {
       id: id,
       open: open,
@@ -124,7 +125,9 @@ const ImageFrame = props => {
         },
         children: [/*#__PURE__*/_jsx(ContinuousSlider, {
           val: scale,
-          onChange: onScaleChange
+          onChange: onScaleChange,
+          min: 50,
+          max: 200
         }), /*#__PURE__*/_jsx(IconButton, {
           onClick: handleClose,
           sx: {

package/dist/Editor/Elements/Embed/Frames/InstaFrame.js

@@ -7,7 +7,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     imagePos,
     handleClick,
-    imageRef
+    imageRef,
+    defaultScale
   } = props;
   const {
     calX,
@@ -16,7 +17,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
   } = imagePos || {
     calX: 0,
     calY: 0,
-    scale: 100
+    scale: defaultScale
   };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -109,7 +110,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
         children: /*#__PURE__*/_jsx("image", {
           x: calX,
           y: calY,
-          height: `${scale || 100}%`,
+          height: `${scale || defaultScale}%`,
           href: href
         })
       })

package/dist/Editor/Elements/Embed/Frames/InstaFrameDark.js

@@ -7,7 +7,8 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     imagePos,
     handleClick,
-    imageRef
+    imageRef,
+    defaultScale
   } = props;
   const {
     calX,
@@ -16,7 +17,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
   } = imagePos || {
     calX: 0,
     calY: 0,
-    scale: 100
+    scale: defaultScale
   };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -108,7 +109,7 @@ const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
         children: /*#__PURE__*/_jsx("image", {
           x: calX,
           y: calY,
-          height: `${scale || 100}%`,
+          height: `${scale || defaultScale}%`,
           href: href
         })
       })

package/dist/Editor/Elements/Embed/Frames/LiteFrame.js

@@ -7,7 +7,8 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     imagePos,
     handleClick,
-    imageRef
+    imageRef,
+    defaultScale
   } = props;
   const {
     calX,
@@ -16,7 +17,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
   } = imagePos || {
     calX: 0,
     calY: 0,
-    scale: 100
+    scale: defaultScale
   };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -55,7 +56,7 @@ const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
         children: /*#__PURE__*/_jsx("image", {
           x: calX,
           y: calY,
-          height: `${scale || 100}%`,
+          height: `${scale || defaultScale}%`,
           href: href
         })
       }), /*#__PURE__*/_jsxs("filter", {

package/dist/Editor/Elements/Embed/Frames/RoundedDark.js

@@ -7,7 +7,8 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     imagePos,
     handleClick,
-    imageRef
+    imageRef,
+    defaultScale
   } = props;
   const {
     calX,
@@ -16,7 +17,7 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
   } = imagePos || {
     calX: 0,
     calY: 0,
-    scale: 100
+    scale: defaultScale
   };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -53,7 +54,7 @@ const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
         children: /*#__PURE__*/_jsx("image", {
           x: calX,
           y: calY,
-          height: `${scale || 100}%`,
+          height: `${scale || defaultScale}%`,
           href: href
         })
       }), /*#__PURE__*/_jsxs("filter", {

package/dist/Editor/Elements/Embed/Frames/RoundedLight.js

@@ -7,7 +7,8 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     imagePos,
     handleClick,
-    imageRef
+    imageRef,
+    defaultScale
   } = props;
   const {
     calX,
@@ -16,7 +17,7 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
   } = imagePos || {
     calX: 0,
     calY: 0,
-    scale: 100
+    scale: defaultScale
   };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -49,7 +50,7 @@ const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
         children: /*#__PURE__*/_jsx("image", {
           x: calX,
           y: calY,
-          height: `${scale || 100}%`,
+          height: `${scale || defaultScale}%`,
           href: href
         })
       })

package/dist/Editor/Elements/Embed/Frames/RoundedLightB2.js

@@ -7,7 +7,8 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
     id,
     imagePos,
     handleClick,
-    imageRef
+    imageRef,
+    defaultScale
   } = props;
   const {
     calX,
@@ -16,7 +17,7 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
   } = imagePos || {
     calX: 0,
     calY: 0,
-    scale: 100
+    scale: defaultScale
   };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -49,7 +50,7 @@ const RoundedLightB2 = /*#__PURE__*/forwardRef((props, ref) => {
         children: /*#__PURE__*/_jsx("image", {
           x: calX,
           y: calY,
-          height: `${scale || 100}%`,
+          height: `${scale || defaultScale}%`,
           href: href
         })
       })

package/dist/Editor/Elements/Embed/Frames/Slider.js

@@ -7,6 +7,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const ContinuousSlider = props => {
   const {
     val,
+    min,
+    max,
     onChange
   } = props;
   const [value, setValue] = useState(val || 100);
@@ -28,9 +30,9 @@ const ContinuousSlider = props => {
       "aria-label": "Volume",
       value: value,
       onChange: handleChange,
-      min: 100,
+      min: min,
       step: 1,
-      max: 400
+      max: max
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "div",
       children: "+"

package/dist/Editor/Elements/Embed/Image.js

@@ -237,7 +237,8 @@ const Image = ({
           framePos: framePos,
           href: url,
           id: path.join(","),
-          onChange: onPosChange
+          onChange: onPosChange,
+          readOnly: readOnly
         })
       }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -41,6 +41,7 @@ const MiniTextFormat = props => {
     container: true,
     sx: classes.miniTextFormatWrapper,
     alignItems: "center",
+    id: "mini-text-editor-wrapper",
     children: /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -86,7 +87,7 @@ const MiniTextFormat = props => {
           active: isBlockActive(editor, link.format),
           editor: editor
         }, link.id), /*#__PURE__*/_jsx(Button, {
-          onClick: e => setAnchorEl(e.currentTarget),
+          onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
           className: "textSettingsIcon",
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {
@@ -94,7 +95,7 @@ const MiniTextFormat = props => {
           open: open,
           anchorEl: anchorEl,
           transition: true,
-          placement: "auto-end",
+          placement: "bottom-end",
           sx: classes.popupWrapper,
           className: `tools-drawer ${size?.device}`,
           children: ({

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

@@ -32,6 +32,11 @@ const appHeaderStyle = [{
     label: "Logo Image URL",
     key: "appLogo",
     type: "text"
+  }, {
+    label: "App Logo Height",
+    key: "logoHeight",
+    type: "text",
+    placeholder: "40px"
   }, {
     label: "App Logo",
     key: "appLogo",

package/dist/Editor/hooks/useDragDom.js

@@ -5,7 +5,8 @@ const ePos = {
 };
 const useDragDom = props => {
   const {
-    refDom
+    refDom,
+    readOnly
   } = props || {};
   const [event, setEvent] = useState("");
   const [delta, setDelta] = useState({
@@ -13,10 +14,12 @@ const useDragDom = props => {
     y: 0
   });
   useEffect(() => {
-    addListener();
-    return () => {
-      removeListener();
-    };
+    if (!readOnly) {
+      addListener();
+      return () => {
+        removeListener();
+      };
+    }
   }, [refDom]);
   const onMouseDown = e => {
     ePos.x = e.x;

package/package.json

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