@flozy/editor 1.4.3 → 1.4.5

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

@@ -7,6 +7,12 @@ const gridStyle = [{
     key: "id",
     type: "text",
     placeholder: "Id should be unique for the page..."
+  }, {
+    label: "Copy Grid",
+    key: "copyGrid",
+    type: "selectBox",
+    placeholder: "Copy Grid",
+    helperText: "This Grid will get copied when creating a new page from this page."
   }]
 }, {
   tab: "Padding",
@@ -63,6 +69,10 @@ const gridStyle = [{
     label: "Background",
     key: "bgColor",
     type: "color"
+  }, {
+    label: "Foreground Color",
+    key: "fgColor",
+    type: "color"
   }, {
     label: "Border",
     key: "borderColor",

package/dist/Editor/common/useDragAndDrop.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { IconButton } from "@mui/material";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import DroppableOverlay from "./DroppableOverlay";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useDragAndDrop = props => {
+  const {
+    editor,
+    id,
+    selected,
+    path,
+    element,
+    onDragEnd,
+    onDrop
+  } = props;
+  const {
+    active,
+    attributes: dragAttributes,
+    listeners,
+    setNodeRef
+  } = useDraggable({
+    id: id,
+    data: {
+      path,
+      element,
+      onDragEnd: () => {
+        onDragEnd();
+      }
+    }
+  });
+  const {
+    setNodeRef: dropNodeRef,
+    isOver
+  } = useDroppable({
+    id: id,
+    data: {
+      index: path.join("_"),
+      path,
+      onDrop: d => {
+        onDrop(d);
+      }
+    }
+  });
+  const isDragging = active?.id !== null;
+  const isActiveDrag = active?.id === id;
+  const dropNodeStyle = {};
+  return [/*#__PURE__*/_jsxs(_Fragment, {
+    children: [!isActiveDrag && /*#__PURE__*/_jsx("div", {
+      ref: dropNodeRef,
+      className: `drop-overlay ${isOver ? "active" : ""}`,
+      style: dropNodeStyle,
+      children: /*#__PURE__*/_jsx(DroppableOverlay, {
+        editor: editor,
+        dragData: active
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      ref: setNodeRef,
+      style: {
+        display: selected ? "block" : "none"
+      },
+      children: /*#__PURE__*/_jsx(IconButton, {
+        ...listeners,
+        ...dragAttributes,
+        style: {
+          position: "absolute",
+          left: "-42px",
+          top: 0,
+          bottom: 0,
+          margin: "auto",
+          color: "#2684ff",
+          backgroundColor: "#FFF",
+          width: "42px",
+          height: "42px"
+        },
+        children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
+      })
+    })]
+  }), isDragging, isActiveDrag];
+};
+export default useDragAndDrop;

package/dist/Editor/helper/index.js

@@ -1,4 +1,5 @@
 import html2canvas from "html2canvas";
+import { rectIntersection, closestCenter } from "@dnd-kit/core";
 export const getThumbnailImage = async (dom, options = {}) => {
   try {
     const canvas = await html2canvas(dom, options);
@@ -7,4 +8,17 @@ export const getThumbnailImage = async (dom, options = {}) => {
     console.log(err);
     return null;
   }
-};
+};
+export function customCollisionDetectionAlgorithm(args) {
+  // First, let's see if there are any collisions with the pointer
+  const pointerCollisions = closestCenter(args);
+
+  // Collision detection algorithms return an array of collisions
+  if (pointerCollisions.length >= 0 && rectIntersection(args)) {
+    console.log(rectIntersection(args));
+    return rectIntersection(args);
+  }
+
+  // If there are no collisions with the pointer, return rectangle intersections
+  return [];
+}

package/dist/Editor/hooks/useWindowResize.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+const useWindowResize = () => {
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  const onResize = () => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+  };
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  return [size];
+};
+export default useWindowResize;

package/dist/Editor/utils/customHooks/useResize.js

@@ -1,15 +1,17 @@
 import { useState } from "react";
 const useResize = ({
   parentDOM,
-  size: defaultSize
+  size: defaultSize,
+  isGrid
 }) => {
   const {
-    width
+    width,
+    height
   } = parentDOM?.getBoundingClientRect() || {
     ...defaultSize
   };
   const [size, setSize] = useState({
-    height: 300,
+    height: isGrid ? height : 300,
     widthInPercent: 100,
     ...defaultSize
   });
@@ -17,7 +19,7 @@ const useResize = ({
   const onLoad = defaultSize => {
     setSize({
       widthInPercent: 100,
-      height: 300,
+      height: isGrid ? height : 300,
       ...defaultSize
     });
   };

package/dist/Editor/utils/grid.js

@@ -1,12 +1,12 @@
 import { Transforms } from "slate";
 import default_grid from "../Elements/Grid/templates/default_grid";
-export const insertGrid = (editor, item) => {
+export const insertGrid = (editor, item, path) => {
   const grid = !item ? JSON.parse(default_grid) : item;
   const {
     selection
   } = editor;
   Transforms.insertNodes(editor, grid, {
-    at: selection.focus.path
+    at: path || selection.focus.path,
+    select: true
   });
-  Transforms.move(editor);
 };

package/dist/Editor/utils/insertAppHeader.js

@@ -11,7 +11,7 @@ export const createAppHeaderNode = ({
     target: "_blank",
     text: "Google"
   }] : menus,
-  menuStyle: "drawer",
+  menuStyle: "stacked",
   children: [{
     text: ""
   }]

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@flozy/editor",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
   ],
   "main": "dist/index.js",
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hocuspocus/provider": "^2.5.0",