@flozy/editor 1.4.2 → 1.4.4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -0
- package/dist/Editor/CommonEditor.js +124 -34
- package/dist/Editor/Editor.css +23 -0
- package/dist/Editor/Elements/AppHeader/AppHeader.js +146 -99
- package/dist/Editor/Elements/AppHeader/useEleveateScroll.js +53 -0
- package/dist/Editor/Elements/Embed/Image.js +14 -13
- package/dist/Editor/Elements/Grid/Grid.js +136 -12
- package/dist/Editor/Elements/Grid/GridItem.js +1 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +16 -7
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +5 -8
- package/dist/Editor/Elements/Signature/SignaturePopup.js +28 -18
- package/dist/Editor/Toolbar/FormatTools/Autocomplete.js +4 -4
- package/dist/Editor/Toolbar/Toolbar.js +2 -1
- package/dist/Editor/common/DroppableOverlay.js +33 -0
- package/dist/Editor/common/EditorIcons.js +27 -0
- package/dist/Editor/common/StyleBuilder/appHeaderStyle.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +12 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +8 -4
- package/dist/Editor/common/StyleBuilder/gridItemStyle.js +0 -5
- package/dist/Editor/common/StyleBuilder/gridStyle.js +10 -0
- package/dist/Editor/common/useDragAndDrop.js +83 -0
- package/dist/Editor/helper/index.js +15 -1
- package/dist/Editor/hooks/useWindowResize.js +21 -0
- package/dist/Editor/utils/customHooks/useResize.js +6 -4
- package/dist/Editor/utils/grid.js +3 -3
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/package.json +3 -1
@@ -0,0 +1,83 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { useDraggable, useDroppable } from "@dnd-kit/core";
|
3
|
+
import { IconButton } from "@mui/material";
|
4
|
+
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
5
|
+
import DroppableOverlay from "./DroppableOverlay";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
const useDragAndDrop = props => {
|
10
|
+
const {
|
11
|
+
editor,
|
12
|
+
id,
|
13
|
+
selected,
|
14
|
+
path,
|
15
|
+
element,
|
16
|
+
onDragEnd,
|
17
|
+
onDrop
|
18
|
+
} = props;
|
19
|
+
const {
|
20
|
+
active,
|
21
|
+
attributes: dragAttributes,
|
22
|
+
listeners,
|
23
|
+
setNodeRef
|
24
|
+
} = useDraggable({
|
25
|
+
id: id,
|
26
|
+
data: {
|
27
|
+
path,
|
28
|
+
element,
|
29
|
+
onDragEnd: () => {
|
30
|
+
onDragEnd();
|
31
|
+
}
|
32
|
+
}
|
33
|
+
});
|
34
|
+
const {
|
35
|
+
setNodeRef: dropNodeRef,
|
36
|
+
isOver
|
37
|
+
} = useDroppable({
|
38
|
+
id: id,
|
39
|
+
data: {
|
40
|
+
index: path.join("_"),
|
41
|
+
path,
|
42
|
+
onDrop: d => {
|
43
|
+
onDrop(d);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
});
|
47
|
+
const isDragging = active?.id !== null;
|
48
|
+
const isActiveDrag = active?.id === id;
|
49
|
+
const dropNodeStyle = {};
|
50
|
+
return [/*#__PURE__*/_jsxs(_Fragment, {
|
51
|
+
children: [!isActiveDrag && /*#__PURE__*/_jsx("div", {
|
52
|
+
ref: dropNodeRef,
|
53
|
+
className: `drop-overlay ${isOver ? "active" : ""}`,
|
54
|
+
style: dropNodeStyle,
|
55
|
+
children: /*#__PURE__*/_jsx(DroppableOverlay, {
|
56
|
+
editor: editor,
|
57
|
+
dragData: active
|
58
|
+
})
|
59
|
+
}), /*#__PURE__*/_jsx("div", {
|
60
|
+
ref: setNodeRef,
|
61
|
+
style: {
|
62
|
+
display: selected ? "block" : "none"
|
63
|
+
},
|
64
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
65
|
+
...listeners,
|
66
|
+
...dragAttributes,
|
67
|
+
style: {
|
68
|
+
position: "absolute",
|
69
|
+
left: "-42px",
|
70
|
+
top: 0,
|
71
|
+
bottom: 0,
|
72
|
+
margin: "auto",
|
73
|
+
color: "#2684ff",
|
74
|
+
backgroundColor: "#FFF",
|
75
|
+
width: "42px",
|
76
|
+
height: "42px"
|
77
|
+
},
|
78
|
+
children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
|
79
|
+
})
|
80
|
+
})]
|
81
|
+
}), isDragging, isActiveDrag];
|
82
|
+
};
|
83
|
+
export default useDragAndDrop;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import html2canvas from "html2canvas";
|
2
|
+
import { rectIntersection, closestCenter } from "@dnd-kit/core";
|
2
3
|
export const getThumbnailImage = async (dom, options = {}) => {
|
3
4
|
try {
|
4
5
|
const canvas = await html2canvas(dom, options);
|
@@ -7,4 +8,17 @@ export const getThumbnailImage = async (dom, options = {}) => {
|
|
7
8
|
console.log(err);
|
8
9
|
return null;
|
9
10
|
}
|
10
|
-
};
|
11
|
+
};
|
12
|
+
export function customCollisionDetectionAlgorithm(args) {
|
13
|
+
// First, let's see if there are any collisions with the pointer
|
14
|
+
const pointerCollisions = closestCenter(args);
|
15
|
+
|
16
|
+
// Collision detection algorithms return an array of collisions
|
17
|
+
if (pointerCollisions.length >= 0 && rectIntersection(args)) {
|
18
|
+
console.log(rectIntersection(args));
|
19
|
+
return rectIntersection(args);
|
20
|
+
}
|
21
|
+
|
22
|
+
// If there are no collisions with the pointer, return rectangle intersections
|
23
|
+
return [];
|
24
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import { useEffect, useState } from "react";
|
2
|
+
const useWindowResize = () => {
|
3
|
+
const [size, setSize] = useState({
|
4
|
+
width: window.innerWidth,
|
5
|
+
height: window.innerHeight
|
6
|
+
});
|
7
|
+
const onResize = () => {
|
8
|
+
setSize({
|
9
|
+
width: window.innerWidth,
|
10
|
+
height: window.innerHeight
|
11
|
+
});
|
12
|
+
};
|
13
|
+
useEffect(() => {
|
14
|
+
window.addEventListener("resize", onResize);
|
15
|
+
return () => {
|
16
|
+
window.removeEventListener("resize", onResize);
|
17
|
+
};
|
18
|
+
}, []);
|
19
|
+
return [size];
|
20
|
+
};
|
21
|
+
export default useWindowResize;
|
@@ -1,15 +1,17 @@
|
|
1
1
|
import { useState } from "react";
|
2
2
|
const useResize = ({
|
3
3
|
parentDOM,
|
4
|
-
size: defaultSize
|
4
|
+
size: defaultSize,
|
5
|
+
isGrid
|
5
6
|
}) => {
|
6
7
|
const {
|
7
|
-
width
|
8
|
+
width,
|
9
|
+
height
|
8
10
|
} = parentDOM?.getBoundingClientRect() || {
|
9
11
|
...defaultSize
|
10
12
|
};
|
11
13
|
const [size, setSize] = useState({
|
12
|
-
height: 300,
|
14
|
+
height: isGrid ? height : 300,
|
13
15
|
widthInPercent: 100,
|
14
16
|
...defaultSize
|
15
17
|
});
|
@@ -17,7 +19,7 @@ const useResize = ({
|
|
17
19
|
const onLoad = defaultSize => {
|
18
20
|
setSize({
|
19
21
|
widthInPercent: 100,
|
20
|
-
height: 300,
|
22
|
+
height: isGrid ? height : 300,
|
21
23
|
...defaultSize
|
22
24
|
});
|
23
25
|
};
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { Transforms } from "slate";
|
2
2
|
import default_grid from "../Elements/Grid/templates/default_grid";
|
3
|
-
export const insertGrid = (editor, item) => {
|
3
|
+
export const insertGrid = (editor, item, path) => {
|
4
4
|
const grid = !item ? JSON.parse(default_grid) : item;
|
5
5
|
const {
|
6
6
|
selection
|
7
7
|
} = editor;
|
8
8
|
Transforms.insertNodes(editor, grid, {
|
9
|
-
at: selection.focus.path
|
9
|
+
at: path || selection.focus.path,
|
10
|
+
select: true
|
10
11
|
});
|
11
|
-
Transforms.move(editor);
|
12
12
|
};
|
package/package.json
CHANGED
@@ -1,12 +1,14 @@
|
|
1
1
|
{
|
2
2
|
"name": "@flozy/editor",
|
3
|
-
"version": "1.4.
|
3
|
+
"version": "1.4.4",
|
4
4
|
"description": "An Editor for flozy app brain",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
7
7
|
],
|
8
8
|
"main": "dist/index.js",
|
9
9
|
"dependencies": {
|
10
|
+
"@dnd-kit/core": "^6.1.0",
|
11
|
+
"@dnd-kit/sortable": "^8.0.0",
|
10
12
|
"@emotion/react": "^11.11.1",
|
11
13
|
"@emotion/styled": "^11.11.0",
|
12
14
|
"@hocuspocus/provider": "^2.5.0",
|