@flozy/editor 2.1.4 → 2.1.6

package/dist/Editor/CommonEditor.js

@@ -13,7 +13,7 @@ import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from ".
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
-import { focusOnFirstParagraph, getPageSettings } from "./utils/pageSettings";
+import { getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
@@ -138,12 +138,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });
-  const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
   useEffect(() => {
     setValue(draftToSlate({
       data: content
     }));
-    focusOnFirstParagraph(editor);
   }, [id, content]);
   useEffect(() => {
     if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
@@ -336,7 +334,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter") {
-      enterEvent(event, editor, isListItem);
+      enterEvent(event, editor);
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -369,10 +367,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     if (readOnly) {
       return true;
     }
-
-    // if (size?.device === "xs" && isTextSelected) {
-    //   return true;
-    // }
+    if (size?.device === "xs" && isTextSelected) {
+      return true;
+    }
   }, [readOnly, isTextSelected]);
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,

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

@@ -15,9 +15,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import { Tooltip } from "@mui/material";
 import AppHeaderPopup from "./AppHeaderPopup";
-import { GridSettingsIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Transforms, Editor } from "slate";
+import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import Slider from "react-slick";
 import "./slick-theme.min.css";
@@ -55,7 +55,7 @@ const Carousel = props => {
   useEffect(() => {
     if (!edit) {
       ReactEditor.focus(editor);
-      Transforms.select(editor, Editor.end(editor, []));
+      Transforms.select(editor, ReactEditor.findPath(editor, element));
     }
   }, [edit]);
   const onAddSlide = () => {

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

@@ -1,17 +1,33 @@
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DarkFrame = ({
-  href,
-  id
-}) => {
+const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    href,
+    id,
+    imagePos,
+    handleClick,
+    imageRef
+  } = props;
+  const {
+    calX,
+    calY,
+    scale
+  } = imagePos || {
+    calX: 0,
+    calY: 0,
+    scale: 100
+  };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "330",
     height: "557",
     viewBox: "0 0 330 557",
     fill: "none",
+    onClick: handleClick,
     children: [/*#__PURE__*/_jsx("g", {
       filter: "url(#filter0_d_14731_299242)",
+      ref: ref,
       children: /*#__PURE__*/_jsx("rect", {
         x: "7.5",
         y: "7.5",
@@ -21,7 +37,11 @@ const DarkFrame = ({
         stroke: "#1E1E1E",
         strokeWidth: "15",
         shapeRendering: "crispEdges",
-        fill: `url(#imageSource_${id})`
+        fill: `url(#imageSource_${id})`,
+        ref: imageRef,
+        style: {
+          cursor: "move"
+        }
       })
     }), /*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("pattern", {
@@ -30,9 +50,9 @@ const DarkFrame = ({
         width: "305",
         height: "532",
         children: /*#__PURE__*/_jsx("image", {
-          x: "0",
-          y: "0",
-          height: "100%",
+          x: calX,
+          y: calY,
+          height: `${scale || 100}%`,
           href: href
         })
       }), /*#__PURE__*/_jsxs("filter", {
@@ -73,5 +93,6 @@ const DarkFrame = ({
       })]
     })]
   });
-};
+});
+DarkFrame.displayName = "DarkFrame";
 export default DarkFrame;

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

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from "react";
+import useDragDom from "../../../hooks/useDragDom";
+import { Button, IconButton, Popper } from "@mui/material";
+import Box from "@mui/material/Box";
+import ContinuousSlider from "./Slider";
+import frames from ".";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import { CloseIcon } from "../../../common/iconslist";
+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 ImageFrame = props => {
+  const {
+    frame,
+    id,
+    framePos,
+    onChange
+  } = 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
+  });
+  const {
+    x,
+    y
+  } = delta || {
+    x: 0,
+    y: 0
+  };
+  const {
+    x: lx,
+    y: ly,
+    scale
+  } = framePos || {
+    x: 0,
+    y: 0,
+    scale: 100
+  };
+  const calX = lx + x;
+  const calY = ly + y;
+  const SVGFrame = frame ? frames[frame] : null;
+  const {
+    selectedPath,
+    setSelectedPath
+  } = useEditorContext();
+  const open = selectedPath === id && Boolean(anchorEl);
+  useEffect(() => {
+    if (imageRef?.current) {
+      setDOM(dom);
+    }
+  }, [imageRef]);
+  useEffect(() => {
+    if (event === "end") {
+      onChange({
+        framePos: {
+          x: calX,
+          y: calY,
+          scale
+        }
+      });
+      clear();
+    }
+  }, [event]);
+  const handleClick = () => {
+    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);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSelectedPath(null);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SVGFrame, {
+      ref: svgRef,
+      ...props,
+      onImageRef: onImageRef,
+      handleClick: handleClick,
+      imagePos: {
+        calX,
+        calY,
+        scale
+      },
+      imageRef: imageRef
+    }), /*#__PURE__*/_jsx(Popper, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: onClose,
+      sx: {
+        zIndex: 100
+      },
+      placement: "top",
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          width: 200,
+          padding: "0px 16px",
+          boxShadow: "5px 5px 5px 1px rgb(0,0,0,0.07)",
+          border: "1px solid rgba(0,0,0,0.07)",
+          borderRadius: "12px",
+          backgroundColor: "#FFF",
+          marginBottom: "8px",
+          position: "relative",
+          paddingRight: "48px"
+        },
+        children: [/*#__PURE__*/_jsx(ContinuousSlider, {
+          val: scale,
+          onChange: onScaleChange
+        }), /*#__PURE__*/_jsx(IconButton, {
+          onClick: handleClose,
+          sx: {
+            position: "absolute",
+            right: 0,
+            top: "-2px"
+          },
+          children: /*#__PURE__*/_jsx(CloseIcon, {})
+        })]
+      })
+    })]
+  });
+};
+export default ImageFrame;

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

@@ -1,15 +1,34 @@
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const InstaFrame = ({
-  href,
-  id
-}) => {
+const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    href,
+    id,
+    imagePos,
+    handleClick,
+    imageRef
+  } = props;
+  const {
+    calX,
+    calY,
+    scale
+  } = imagePos || {
+    calX: 0,
+    calY: 0,
+    scale: 100
+  };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "366",
     height: "489",
     viewBox: "0 0 366 489",
     fill: "none",
+    "data-path": id,
+    style: {
+      userSelect: "none"
+    },
+    onClick: handleClick,
     children: [/*#__PURE__*/_jsx("rect", {
       x: "2.5",
       y: "2.5",
@@ -18,7 +37,8 @@ const InstaFrame = ({
       rx: "17.5",
       fill: "white",
       stroke: "#D5D5D5",
-      strokeWidth: "5"
+      strokeWidth: "5",
+      ref: ref
     }), /*#__PURE__*/_jsx("rect", {
       x: "27.5",
       y: "28.5",
@@ -75,7 +95,11 @@ const InstaFrame = ({
       rx: "17.5",
       stroke: "#D5D5D5",
       strokeWidth: "5",
-      fill: `url(#imageSource_${id})`
+      fill: `url(#imageSource_${id})`,
+      style: {
+        cursor: "move"
+      },
+      ref: imageRef
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {
         id: `imageSource_${id}`,
@@ -83,13 +107,14 @@ const InstaFrame = ({
         width: "338.5",
         height: "397.5",
         children: /*#__PURE__*/_jsx("image", {
-          x: "0",
-          y: "0",
-          height: "100%",
+          x: calX,
+          y: calY,
+          height: `${scale || 100}%`,
           href: href
         })
       })
     })]
   });
-};
+});
+InstaFrame.displayName = "InstaFrame";
 export default InstaFrame;

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

@@ -1,15 +1,33 @@
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const InstaFrame = ({
-  href,
-  id
-}) => {
+const InstaFrame = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    href,
+    id,
+    imagePos,
+    handleClick,
+    imageRef
+  } = props;
+  const {
+    calX,
+    calY,
+    scale
+  } = imagePos || {
+    calX: 0,
+    calY: 0,
+    scale: 100
+  };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "366",
     height: "489",
     viewBox: "0 0 366 489",
     fill: "none",
+    style: {
+      userSelect: "none"
+    },
+    onClick: handleClick,
     children: [/*#__PURE__*/_jsx("rect", {
       x: "2.5",
       y: "2.5",
@@ -18,7 +36,8 @@ const InstaFrame = ({
       rx: "17.5",
       fill: "#12141d",
       stroke: "#D5D5D5",
-      strokeWidth: "5"
+      strokeWidth: "5",
+      ref: ref
     }), /*#__PURE__*/_jsx("rect", {
       x: "27.5",
       y: "28.5",
@@ -75,7 +94,11 @@ const InstaFrame = ({
       rx: "17.5",
       stroke: "#D5D5D5",
       strokeWidth: "5",
-      fill: `url(#imageSource_${id})`
+      fill: `url(#imageSource_${id})`,
+      ref: imageRef,
+      style: {
+        cursor: "move"
+      }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {
         id: `imageSource_${id}`,
@@ -83,13 +106,14 @@ const InstaFrame = ({
         width: "338.5",
         height: "397.5",
         children: /*#__PURE__*/_jsx("image", {
-          x: "0",
-          y: "0",
-          height: "100%",
+          x: calX,
+          y: calY,
+          height: `${scale || 100}%`,
           href: href
         })
       })
     })]
   });
-};
+});
+InstaFrame.displayName = "InstaFrame";
 export default InstaFrame;

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

@@ -1,17 +1,36 @@
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DarkFrame = ({
-  href,
-  id
-}) => {
+const DarkFrame = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    href,
+    id,
+    imagePos,
+    handleClick,
+    imageRef
+  } = props;
+  const {
+    calX,
+    calY,
+    scale
+  } = imagePos || {
+    calX: 0,
+    calY: 0,
+    scale: 100
+  };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "314",
     height: "541",
     viewBox: "0 0 314 541",
     fill: "none",
+    style: {
+      userSelect: "none"
+    },
+    onClick: handleClick,
     children: [/*#__PURE__*/_jsx("g", {
       filter: "url(#filter0_d_15055_295724)",
+      ref: ref,
       children: /*#__PURE__*/_jsx("rect", {
         x: "7",
         y: "7",
@@ -21,7 +40,11 @@ const DarkFrame = ({
         stroke: "white",
         strokeWidth: "14",
         shapeRendering: "crispEdges",
-        fill: `url(#imageSource_${id})`
+        fill: `url(#imageSource_${id})`,
+        ref: imageRef,
+        style: {
+          cursor: "move"
+        }
       })
     }), /*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("pattern", {
@@ -30,9 +53,9 @@ const DarkFrame = ({
         width: "290",
         height: "517",
         children: /*#__PURE__*/_jsx("image", {
-          x: "0",
-          y: "0",
-          height: "100%",
+          x: calX,
+          y: calY,
+          height: `${scale || 100}%`,
           href: href
         })
       }), /*#__PURE__*/_jsxs("filter", {
@@ -73,5 +96,6 @@ const DarkFrame = ({
       })]
     })]
   });
-};
+});
+DarkFrame.displayName = "DarkFrame";
 export default DarkFrame;

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

@@ -1,17 +1,36 @@
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const RoundedDark = ({
-  href,
-  id
-}) => {
+const RoundedDark = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    href,
+    id,
+    imagePos,
+    handleClick,
+    imageRef
+  } = props;
+  const {
+    calX,
+    calY,
+    scale
+  } = imagePos || {
+    calX: 0,
+    calY: 0,
+    scale: 100
+  };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "105",
     height: "105",
     viewBox: "0 0 105 105",
     fill: "none",
+    style: {
+      userSelect: "none"
+    },
+    onClick: handleClick,
     children: [/*#__PURE__*/_jsx("g", {
       filter: "url(#filter0_d_14731_299244)",
+      ref: ref,
       children: /*#__PURE__*/_jsx("circle", {
         cx: "50",
         cy: "50",
@@ -19,7 +38,11 @@ const RoundedDark = ({
         stroke: "#1E1E1E",
         strokeWidth: "7",
         shapeRendering: "crispEdges",
-        fill: `url(#imageSource_${id})`
+        fill: `url(#imageSource_${id})`,
+        ref: imageRef,
+        style: {
+          cursor: "move"
+        }
       })
     }), /*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("pattern", {
@@ -28,9 +51,9 @@ const RoundedDark = ({
         width: "100",
         height: "100",
         children: /*#__PURE__*/_jsx("image", {
-          x: "0",
-          y: "0",
-          height: "100%",
+          x: calX,
+          y: calY,
+          height: `${scale || 100}%`,
           href: href
         })
       }), /*#__PURE__*/_jsxs("filter", {
@@ -71,5 +94,6 @@ const RoundedDark = ({
       })]
     })]
   });
-};
+});
+RoundedDark.displayName = "RoundedDark";
 export default RoundedDark;

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

@@ -1,22 +1,45 @@
+import React, { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const RoundedLight = ({
-  href,
-  id
-}) => {
+const RoundedLight = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    href,
+    id,
+    imagePos,
+    handleClick,
+    imageRef
+  } = props;
+  const {
+    calX,
+    calY,
+    scale
+  } = imagePos || {
+    calX: 0,
+    calY: 0,
+    scale: 100
+  };
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "152",
     height: "152",
     viewBox: "0 0 152 152",
     fill: "none",
+    style: {
+      userSelect: "none"
+    },
+    onClick: handleClick,
+    ref: ref,
     children: [/*#__PURE__*/_jsx("circle", {
       cx: "76",
       cy: "76",
       r: "75",
       stroke: "white",
       strokeWidth: "2",
-      fill: `url(#imageSource_${id})`
+      fill: `url(#imageSource_${id})`,
+      ref: imageRef,
+      style: {
+        cursor: "move"
+      }
     }), /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("pattern", {
         id: `imageSource_${id}`,
@@ -24,13 +47,14 @@ const RoundedLight = ({
         width: "152",
         height: "152",
         children: /*#__PURE__*/_jsx("image", {
-          x: "0",
-          y: "0",
-          height: "100%",
+          x: calX,
+          y: calY,
+          height: `${scale || 100}%`,
           href: href
         })
       })
     })]
   });
-};
+});
+RoundedLight.displayName = "RoundedLight";
 export default RoundedLight;