@flozy/editor 4.3.0 → 4.3.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useEffect, useState, memo } from "react";
2
2
  import { useSlateStatic, ReactEditor } from "slate-react";
3
3
  import { Node, Transforms, Editor } from "slate";
4
4
  import AspectRatioIcon from "@mui/icons-material/AspectRatio";
@@ -62,9 +62,9 @@ const ImageContent = props => {
62
62
  setOpenSettings,
63
63
  handleImageClick,
64
64
  onTouchEnd,
65
- path
65
+ path,
66
+ theme
66
67
  } = props;
67
- const theme = useTheme();
68
68
  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
69
69
  component: "button",
70
70
  className: "element-empty-btn",
@@ -97,12 +97,13 @@ const ImageContent = props => {
97
97
  draggable: false
98
98
  });
99
99
  };
100
- const Image = ({
101
- attributes,
102
- element,
103
- children,
104
- customProps
105
- }) => {
100
+ const Image = props => {
101
+ const {
102
+ attributes,
103
+ element,
104
+ children,
105
+ customProps
106
+ } = props;
106
107
  const theme = useTheme();
107
108
  const {
108
109
  url,
@@ -281,7 +282,8 @@ const Image = ({
281
282
  setOpenSettings: setOpenSettings,
282
283
  handleImageClick: handleImageClick,
283
284
  onTouchEnd: onTouchEnd,
284
- path: path
285
+ path: path,
286
+ theme: theme
285
287
  }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
286
288
  component: "div",
287
289
  className: "image-frame",
@@ -388,7 +388,10 @@ const FreeGrid = props => {
388
388
  }, theme);
389
389
  return /*#__PURE__*/_jsx(RnD, {
390
390
  id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
391
- className: `freegrid-section breakpoint-${breakpoint}`,
391
+ className: `
392
+ freegrid-section breakpoint-${breakpoint}
393
+ freegrid-section_${path.join("_")}
394
+ `,
392
395
  editor: editor,
393
396
  path: path,
394
397
  disableDragging: true,
@@ -253,20 +253,20 @@ const FreeGridItem = props => {
253
253
  component: "div",
254
254
  ...attributes,
255
255
  className: `fgi_type_${childType}`,
256
- children: [children, /*#__PURE__*/_jsx(Workflow, {
256
+ children: [children, popup === "workflow" ? /*#__PURE__*/_jsx(Workflow, {
257
257
  openWorkflow: popup === "workflow",
258
258
  element: element,
259
259
  customWorkflowElement: element?.children?.[0] || null,
260
260
  closeWorkflow: onClose,
261
261
  onSave: onWorkflowSave
262
- }), /*#__PURE__*/_jsx(EmbedScriptPopup, {
262
+ }) : null, popup === "embedScript" ? /*#__PURE__*/_jsx(EmbedScriptPopup, {
263
263
  open: popup === "embedScript",
264
264
  customProps: customProps,
265
265
  editor: editor,
266
266
  onClose: onClose,
267
267
  updatePath: [...path, 0],
268
268
  parentPath: [...path]
269
- })]
269
+ }) : null]
270
270
  })
271
271
  });
272
272
  };
@@ -11,15 +11,20 @@ const useFreeGridStyles = ({
11
11
  padding: "0px",
12
12
  height: "100%",
13
13
  position: "static",
14
- overflow: "hidden",
14
+ // for drag item visibility beyond section
15
+ // overflow: "hidden",
15
16
  "& .freegrid-item, & .freegrid-box-item": {
16
17
  gridArea: "var(--gridArea)",
17
18
  left: "var(--left)",
18
19
  marginTop: "var(--marginTop)",
19
20
  marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
20
- zIndex: "var(--zIndex) !important",
21
- "&.active-drag": {},
22
- "&.inactive-drag": {},
21
+ "&.active-drag": {
22
+ pointerEvents: "none",
23
+ zIndex: "9999 !important"
24
+ },
25
+ "&.inactive-drag": {
26
+ zIndex: "var(--zIndex) !important"
27
+ },
23
28
  "& .editor-blocker": {
24
29
  position: "absolute",
25
30
  left: 0,
@@ -9,14 +9,11 @@ const DragInfo = props => {
9
9
  dragging,
10
10
  anchorEl
11
11
  } = props;
12
- const {
13
- position
14
- } = dragging;
15
12
  const {
16
13
  diffX
17
- } = position || {};
14
+ } = dragging || {};
18
15
  const classes = useDragInfoStyle();
19
- const x = parseInt(position?.x - window.innerWidth / 2 + 490 - diffX);
16
+ const x = parseInt(dragging?.x - window.innerWidth / 2 + 490 - diffX);
20
17
  return open ? /*#__PURE__*/_jsx(Popper, {
21
18
  open: open,
22
19
  anchorEl: anchorEl,
@@ -24,7 +21,7 @@ const DragInfo = props => {
24
21
  sx: classes.root,
25
22
  children: /*#__PURE__*/_jsxs(Paper, {
26
23
  className: "papper-root",
27
- children: ["x: ", x, ", y: ", position?.y]
24
+ children: ["x: ", x, ", y: ", dragging?.y]
28
25
  })
29
26
  }) : null;
30
27
  };
@@ -16,7 +16,8 @@ const DragOver = props => {
16
16
  const [anchorEl, setAnchorEl] = useState(null);
17
17
  const open = Boolean(anchorEl);
18
18
  const isSectionHover = status && type === "parent";
19
- const isContainerHover = hover_on.has(path) && type === "parent-container";
19
+ const isContainerHover = hover_on === path && type === "parent-container";
20
+ console.log(isSectionHover, isContainerHover);
20
21
  useEffect(() => {
21
22
  if (ref?.current) {
22
23
  const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();
@@ -77,7 +77,12 @@ const reRenderChildNodes = (editor, path) => {
77
77
  };
78
78
  function isContainerElement(editor, moveTopath, props) {
79
79
  try {
80
- const dragItemPath = props.path;
80
+ const {
81
+ path,
82
+ parentPath,
83
+ dragOver
84
+ } = props;
85
+ const dragItemPath = path;
81
86
  const dragItem = Node.get(editor, dragItemPath);
82
87
  let parentNode = null;
83
88
  // if freegrid item
@@ -86,16 +91,20 @@ function isContainerElement(editor, moveTopath, props) {
86
91
  parentNode = Node.get(editor, Path.parent(dragItemPath));
87
92
  }
88
93
  const moveToNode = Node.get(editor, moveTopath);
89
- console.log(parentNode, moveToNode);
90
94
  if (moveToNode.type === "freegridBox") {
91
95
  if (parentNode.type === "freegridBox") {
92
- return props.calX;
96
+ // same box
97
+ if (parentPath === dragOver) {
98
+ return props.calX;
99
+ } else {
100
+ // for different box
101
+ return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
102
+ }
93
103
  } else {
94
104
  return props.calX - moveToNode?.left;
95
105
  }
96
106
  } else if (moveToNode.type === "freegrid") {
97
107
  if (parentNode.type === "freegridBox") {
98
- console.log(props.x);
99
108
  return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
100
109
  } else {
101
110
  return props.calX;
@@ -2,7 +2,7 @@ import { Transforms, Node } from "slate";
2
2
  import { ReactEditor } from "slate-react";
3
3
  import { getNearestItem } from "./calculateDropItem";
4
4
  const GUIDE_LINE_THRESHOLD = 5;
5
- const GUIDE_LINE_OVERLAP_THRESHOLD = 50;
5
+ const GUIDE_LINE_OVERLAP_THRESHOLD = 5;
6
6
  const handleMoveNode = (editor, path, newPath, {
7
7
  isEmpty
8
8
  }) => {
@@ -7,7 +7,7 @@ import Handles from "./TransformHandles";
7
7
  import { useEditorContext } from "../../hooks/useMouseMove";
8
8
  import ElementOptions from "./ElementOptions";
9
9
  import ElementSettings from "./ElementSettings";
10
- import { getClosestDraggable, getParentSectionPath, isDragOver } from "./Utils";
10
+ import { getClosestDraggable, getParentSectionPath } from "./Utils";
11
11
  import DragInfo from "./DragInfo";
12
12
  import GuideLines from "./GuideLines";
13
13
  import ShadowElement from "./ShadowElement";
@@ -23,7 +23,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
23
23
  import { Fragment as _Fragment } from "react/jsx-runtime";
24
24
  const ITEM_TYPES = ["child", "parent-container"];
25
25
  const EDIT_MODES = ["text", "form", "table"];
26
- let hover_on = new Set();
27
26
  const RnD = props => {
28
27
  const rndRef = useRef(null);
29
28
  const {
@@ -60,7 +59,7 @@ const RnD = props => {
60
59
  isSelectedElement,
61
60
  setSelectedElement,
62
61
  dragging,
63
- setDragging,
62
+ updateDragging,
64
63
  contextMenu,
65
64
  setContextMenu,
66
65
  theme
@@ -80,15 +79,19 @@ const RnD = props => {
80
79
  const {
81
80
  active,
82
81
  id,
83
- lines,
84
- position,
85
- dragOver,
86
- parentPath
82
+ parentPath,
83
+ dragOver
87
84
  } = dragging;
88
85
  const dragInfoOpen = id === str_path;
89
86
  const dragOverStatus = dragOver === str_path && parentPath !== str_path;
90
87
  const [absPosition, setAbsPosition] = useState({});
91
88
  const openContextMenu = contextMenu?.path === str_path;
89
+ const [position, setPosition] = useState({
90
+ x: 0,
91
+ y: 0
92
+ });
93
+ const pathIsDragging = dragOver === str_path && dragging?.isDragging;
94
+ const parentSectionPath = str_path?.split("|").slice(0, 2).join("_");
92
95
  useEffect(() => {
93
96
  if (ITEM_TYPES.includes(type)) {
94
97
  if (enable === 1) {
@@ -99,25 +102,6 @@ const RnD = props => {
99
102
  }
100
103
  }
101
104
  }, [enable]);
102
- useEffect(() => {
103
- if (position?.x !== undefined && position?.y !== undefined && active && (type === "parent" || type === "parent-container")) {
104
- const dragOverSt = isDragOver(rndRef?.current?.getBoundingClientRect(), {
105
- x: position.x,
106
- y: position.y
107
- });
108
- if (dragOverSt) {
109
- if (!dragInfoOpen) {
110
- hover_on.add(str_path);
111
- }
112
- setDragging({
113
- ...dragging,
114
- dragOver: str_path
115
- });
116
- } else {
117
- hover_on.delete(str_path);
118
- }
119
- }
120
- }, [active, position?.x, position?.y]);
121
105
  const getCurrentEle = () => {
122
106
  return positionRef.current?.resizableElement?.current;
123
107
  };
@@ -280,11 +264,12 @@ const RnD = props => {
280
264
  updatePosition();
281
265
  if (updated_at) {
282
266
  // disable dragging
283
- setDragging({
267
+ updateDragging({
284
268
  active: false,
285
269
  id: null,
286
- isDragging: false
287
- });
270
+ isDragging: false,
271
+ dragOver: null
272
+ }, null);
288
273
  }
289
274
  };
290
275
  const onDragStart = e => {
@@ -297,16 +282,19 @@ const RnD = props => {
297
282
  height
298
283
  } = e?.target?.getBoundingClientRect();
299
284
  const ref = positionRef.current?.resizableElement?.current;
300
- setDragging({
285
+ const updatedPosition = {
286
+ x: e.clientX,
287
+ y: e.clientY,
288
+ strXY: `${e.clientX},${e.clientY}`,
289
+ diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
290
+ diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
291
+ };
292
+ updateDragging({
301
293
  ...dragging,
302
294
  active: true,
303
295
  id: str_path,
304
296
  position: {
305
- x: e.clientX,
306
- y: e.clientY,
307
- strXY: `${e.clientX},${e.clientY}`,
308
- diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
309
- diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
297
+ ...updatedPosition
310
298
  },
311
299
  dimension: {
312
300
  width,
@@ -317,18 +305,21 @@ const RnD = props => {
317
305
  ref
318
306
  }, ".freegrid-container-parent")
319
307
  });
308
+ setPosition({
309
+ ...updatedPosition
310
+ });
320
311
  }
321
312
  };
322
313
  const onDrag = (e, d) => {
323
314
  e.preventDefault();
324
- const lines = getClosestDraggable(e.clientX, e.clientY, ".freegrid-item.path-3.inactive-drag:not(.exclude-virtual)", ".freegrid-item.path-3.active-drag:not(.exclude-virtual)");
315
+ const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
316
+ console.log(lines);
325
317
  setAbsPosition({
326
318
  ...absPosition,
327
319
  "--zIndex": 2000
328
320
  });
329
- setDragging({
321
+ updateDragging({
330
322
  isDragging: true,
331
- ...dragging,
332
323
  position: {
333
324
  ...dragging.position,
334
325
  x: e.clientX,
@@ -336,34 +327,28 @@ const RnD = props => {
336
327
  },
337
328
  lines: lines
338
329
  });
339
- };
340
- const getContainerPath = () => {
341
- let maxLengthString = "";
342
- let maxLength = 0;
343
- // Iterate through the set
344
- hover_on.forEach(str => {
345
- if (str.length > maxLength) {
346
- maxLength = str.length;
347
- maxLengthString = str;
348
- }
330
+ setPosition({
331
+ ...dragging.position,
332
+ x: e.clientX,
333
+ y: e.clientY,
334
+ lines: lines
349
335
  });
350
- return maxLengthString;
351
336
  };
352
337
  const onDragStop = (e, d) => {
353
338
  e.preventDefault();
354
339
  e.stopPropagation();
355
- if (dragging?.isDragging && position.strXY) {
340
+ if (dragging?.isDragging && dragging?.position?.strXY) {
356
341
  d.x = e.x;
357
342
  d.y = e.y;
358
343
  d.offsetX = e.offsetX;
359
344
  d.offsetY = e.offsetY;
360
- d.dragOver = getContainerPath();
345
+ d.dragOver = dragOver;
361
346
  d.parentPath = parentPath;
362
347
  d.diffX = position?.diffX;
363
348
  d.diffY = position?.diffY;
364
349
  d.calX = itemData?.left + d.lastX;
365
350
  // avoid x, y value replace issue
366
- const [x, y] = position.strXY.split(",");
351
+ const [x, y] = dragging?.position?.strXY.split(",");
367
352
  d.startPosition = {
368
353
  ...position,
369
354
  x: parseInt(x),
@@ -379,7 +364,9 @@ const RnD = props => {
379
364
  ...absPosition
380
365
  };
381
366
  delete ud["--zIndex"];
382
- hover_on.clear();
367
+ updateDragging({
368
+ dragOver: ""
369
+ }, null);
383
370
  setAbsPosition({
384
371
  ...ud
385
372
  });
@@ -391,17 +378,6 @@ const RnD = props => {
391
378
  width: delta?.width + d.width,
392
379
  height: delta?.height + d.height
393
380
  };
394
- // calculate the text height
395
- // const nodeList =
396
- // positionRef?.current?.resizableElement?.current?.childNodes || [];
397
- // const textElement = Array.from(nodeList).filter((node) =>
398
- // node.classList.contains("fgi_type_text")
399
- // );
400
- // if (textElement[0] && type === "child") {
401
- // const textRect = textElement[0]?.getBoundingClientRect();
402
- // updatedSize.height = textRect.height;
403
- // positionRef.current.updateSize({ ...updatedSize });
404
- // }
405
381
  onChange({
406
382
  ...updatedSize
407
383
  });
@@ -439,6 +415,14 @@ const RnD = props => {
439
415
  });
440
416
  }
441
417
  };
418
+ const onMouseOver = e => {
419
+ e.stopPropagation();
420
+ if (type !== "child") {
421
+ updateDragging({
422
+ dragOver: str_path
423
+ }, str_path);
424
+ }
425
+ };
442
426
  const getEventProps = () => {
443
427
  if (!readOnly) {
444
428
  return {
@@ -450,7 +434,8 @@ const RnD = props => {
450
434
  onDragStop: onDragStop,
451
435
  onResizeStop: onResizeStop,
452
436
  onClick: onClick,
453
- onContextMenu: handleContextMenu
437
+ onContextMenu: handleContextMenu,
438
+ onMouseOver: onMouseOver
454
439
  };
455
440
  } else {
456
441
  return {};
@@ -473,7 +458,7 @@ const RnD = props => {
473
458
  caretColor: enable === 2 ? "auto" : "transparent",
474
459
  userSelect: enable === 2 || readOnly ? "auto" : "none",
475
460
  ...style,
476
- zIndex: enable === 1 ? 1 : "inherit",
461
+ // zIndex: enable === 1 ? 1 : "inherit",
477
462
  left: "var(--left)",
478
463
  ...absPosition
479
464
  },
@@ -507,14 +492,14 @@ const RnD = props => {
507
492
  className: "editor-blocker",
508
493
  "data-path": path,
509
494
  contentEditable: false
510
- }) : null, /*#__PURE__*/_jsx(DragOver, {
495
+ }) : null, pathIsDragging ? /*#__PURE__*/_jsx(DragOver, {
511
496
  status: dragOverStatus,
512
- hover_on: hover_on,
497
+ hover_on: dragOver,
513
498
  path: str_path,
514
499
  parentPath: parentPath,
515
500
  type: type,
516
501
  childType: childType
517
- })]
502
+ }) : null]
518
503
  }, eId), !active && rndRef?.current && open ? /*#__PURE__*/_jsx(ElementOptions, {
519
504
  id: `opt_ref_${str_path}`,
520
505
  open: open,
@@ -539,12 +524,12 @@ const RnD = props => {
539
524
  ...settingsProps,
540
525
  elementProps: elementProps,
541
526
  theme: theme
542
- }), /*#__PURE__*/_jsx(DragInfo, {
527
+ }), dragInfoOpen ? /*#__PURE__*/_jsx(DragInfo, {
543
528
  anchorEl: rndRef?.current,
544
529
  open: dragInfoOpen,
545
- dragging: dragging
546
- }), /*#__PURE__*/_jsx(GuideLines, {
547
- lines: lines
530
+ dragging: position
531
+ }) : null, /*#__PURE__*/_jsx(GuideLines, {
532
+ lines: position?.lines || []
548
533
  }), !readOnly && type === "parent" ? /*#__PURE__*/_jsx(BoundaryLine, {}) : null, /*#__PURE__*/_jsx(ShadowElement, {
549
534
  type: type,
550
535
  enable: enable,
@@ -27,7 +27,7 @@ export const EditorProvider = ({
27
27
  const [selectedPath, setSelectedPath] = useState(null);
28
28
  const [selectedElement, setSelectedElement] = useState({});
29
29
  const [dragging, setDragging] = useState({});
30
- const [event] = useMouseMove(dragging);
30
+ const [event] = useMouseMove(window.dragging);
31
31
  const path = event?.target?.getAttribute("data-path");
32
32
  const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
33
33
  const [openAI, setOpenAI] = useState("");
@@ -65,28 +65,42 @@ export const EditorProvider = ({
65
65
  };
66
66
  }
67
67
  }, [path, editor?.selection]);
68
+ const updateDragging = d => {
69
+ if (d) {
70
+ // console.log("Updating dragOver", d);
71
+ setDragging(prevState => {
72
+ return {
73
+ ...prevState,
74
+ ...d
75
+ };
76
+ });
77
+ }
78
+ };
79
+ const otherValues = useMemo(() => ({
80
+ ...(value || {}),
81
+ onDrop: onDrop,
82
+ drop,
83
+ theme: theme,
84
+ selectedPath: selectedPath,
85
+ setSelectedPath: setSelectedPath,
86
+ selectedElement: selectedElement,
87
+ setSelectedElement: setSelectedElement,
88
+ isSelectedElement: isSelectedElement,
89
+ dragging: {
90
+ ...dragging
91
+ } || {},
92
+ popupType,
93
+ setPopupType,
94
+ setContextMenu,
95
+ contextMenu,
96
+ openAI,
97
+ setOpenAI,
98
+ updateDragging,
99
+ fontFamilies,
100
+ setFontFamilies
101
+ }), [path, editor?.selection, selectedPath, selectedElement, dragging.active, dragging.isDragging, dragging.dragOver, contextMenu, openAI, popupType, drop, fontFamilies]);
68
102
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
69
- value: {
70
- ...(value || {}),
71
- onDrop: onDrop,
72
- drop,
73
- theme: theme,
74
- selectedPath: selectedPath,
75
- setSelectedPath: setSelectedPath,
76
- selectedElement: selectedElement,
77
- setSelectedElement: setSelectedElement,
78
- isSelectedElement: isSelectedElement,
79
- setDragging: setDragging,
80
- dragging: dragging,
81
- popupType,
82
- setPopupType,
83
- setContextMenu,
84
- contextMenu,
85
- openAI,
86
- setOpenAI,
87
- fontFamilies,
88
- setFontFamilies
89
- },
103
+ value: otherValues,
90
104
  children: children
91
105
  });
92
106
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "4.3.0",
3
+ "version": "4.3.1",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"