@portabletext/editor 1.40.3 → 1.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/lib/_chunks-cjs/editor-provider.cjs +72 -34
  2. package/lib/_chunks-cjs/editor-provider.cjs.map +1 -1
  3. package/lib/_chunks-cjs/util.is-selection-collapsed.cjs +10 -0
  4. package/lib/_chunks-cjs/util.is-selection-collapsed.cjs.map +1 -0
  5. package/lib/_chunks-cjs/util.slice-blocks.cjs.map +1 -1
  6. package/lib/_chunks-es/editor-provider.js +73 -35
  7. package/lib/_chunks-es/editor-provider.js.map +1 -1
  8. package/lib/_chunks-es/util.is-selection-collapsed.js +11 -0
  9. package/lib/_chunks-es/util.is-selection-collapsed.js.map +1 -0
  10. package/lib/_chunks-es/util.slice-blocks.js.map +1 -1
  11. package/lib/index.cjs +307 -144
  12. package/lib/index.cjs.map +1 -1
  13. package/lib/index.js +309 -145
  14. package/lib/index.js.map +1 -1
  15. package/lib/utils/index.cjs +7 -5
  16. package/lib/utils/index.cjs.map +1 -1
  17. package/lib/utils/index.d.cts +23 -2
  18. package/lib/utils/index.d.ts +23 -2
  19. package/lib/utils/index.js +6 -3
  20. package/lib/utils/index.js.map +1 -1
  21. package/package.json +4 -4
  22. package/src/behavior-actions/behavior.action.insert-blocks.ts +5 -1
  23. package/src/converters/converter.text-plain.ts +24 -11
  24. package/src/editor/Editable.tsx +336 -223
  25. package/src/editor/components/drop-indicator.tsx +4 -1
  26. package/src/internal-utils/drag-selection.test.ts +74 -1
  27. package/src/internal-utils/drag-selection.ts +20 -4
  28. package/src/internal-utils/dragging-on-drag-origin.ts +22 -0
  29. package/src/internal-utils/event-position.ts +69 -10
  30. package/src/internal-utils/slate-utils.ts +74 -6
  31. package/src/utils/index.ts +2 -0
  32. package/src/utils/util.get-selection-end-point.ts +20 -0
  33. package/src/utils/util.get-selection-start-point.ts +20 -0
  34. package/src/utils/util.is-keyed-segment.ts +2 -2
package/lib/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { fromSlateValue, toPortableTextRange, toSlateRange, debugWithName, EditorActorContext, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, moveRangeByOperation, isEqualToEmptyEditor, getEditorSnapshot, useEditor } from "./_chunks-es/editor-provider.js";
1
+ import { getNodeBlock, getFirstBlock, getLastBlock, toPortableTextRange, fromSlateValue, toSlateRange, debugWithName, EditorActorContext, KEY_TO_VALUE_ELEMENT, usePortableTextEditor, PortableTextEditor, moveRangeByOperation, isEqualToEmptyEditor, getEditorSnapshot, useEditor } from "./_chunks-es/editor-provider.js";
2
2
  import { EditorProvider, defineSchema, defaultKeyGenerator, useEditorSelector, usePortableTextEditorSelection } from "./_chunks-es/editor-provider.js";
3
3
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
4
4
  import { useSelector } from "@xstate/react";
@@ -7,10 +7,11 @@ import noop from "lodash/noop.js";
7
7
  import { useContext, useRef, useState, useEffect, useMemo, startTransition, useCallback, forwardRef, useImperativeHandle } from "react";
8
8
  import { Editor, Range, Element as Element$2, Text, Transforms, Path } from "slate";
9
9
  import { useSlateStatic, useSelected, ReactEditor, useSlate, Editable } from "slate-react";
10
- import { getBlockEndPoint, getBlockStartPoint } from "./_chunks-es/util.slice-blocks.js";
10
+ import { getBlockEndPoint, getBlockStartPoint, isKeyedSegment } from "./_chunks-es/util.slice-blocks.js";
11
11
  import { isSelectionCollapsed, getFocusTextBlock, getFocusSpan, getSelectedBlocks, isSelectionExpanded, getSelectionStartBlock, getSelectionEndBlock, getFocusBlock } from "./_chunks-es/selector.is-at-the-start-of-block.js";
12
12
  import { isOverlappingSelection, isSelectingEntireBlocks } from "./_chunks-es/selector.is-overlapping-selection.js";
13
13
  import { DOMEditor, isDOMNode } from "slate-dom";
14
+ import { isSelectionCollapsed as isSelectionCollapsed$1, getSelectionEndPoint } from "./_chunks-es/util.is-selection-collapsed.js";
14
15
  import { parseBlocks } from "./_chunks-es/util.selection-point-to-block-offset.js";
15
16
  import { defineBehavior, isHotkey } from "./_chunks-es/behavior.core.js";
16
17
  import { c } from "react-compiler-runtime";
@@ -55,15 +56,40 @@ function getDragSelection({
55
56
  focus: getBlockEndPoint(focusTextBlock)
56
57
  });
57
58
  const selectedBlocks = getSelectedBlocks(snapshot);
58
- if (snapshot.context.selection && isSelectionExpanded(snapshot) && isOverlappingSelection(eventSelection)(snapshot) && selectedBlocks.length > 1) {
59
+ if (snapshot.context.selection && isSelectionExpanded(snapshot) && selectedBlocks.length > 1) {
59
60
  const selectionStartBlock = getSelectionStartBlock(snapshot), selectionEndBlock = getSelectionEndBlock(snapshot);
60
- selectionStartBlock && selectionEndBlock && (dragSelection = {
61
- anchor: getBlockStartPoint(selectionStartBlock),
62
- focus: getBlockEndPoint(selectionEndBlock)
61
+ if (!selectionStartBlock || !selectionEndBlock)
62
+ return dragSelection;
63
+ const selectionStartPoint = getBlockStartPoint(selectionStartBlock), selectionEndPoint = getBlockEndPoint(selectionEndBlock);
64
+ isOverlappingSelection(eventSelection)({
65
+ ...snapshot,
66
+ context: {
67
+ ...snapshot.context,
68
+ selection: {
69
+ anchor: selectionStartPoint,
70
+ focus: selectionEndPoint
71
+ }
72
+ }
73
+ }) && (dragSelection = {
74
+ anchor: selectionStartPoint,
75
+ focus: selectionEndPoint
63
76
  });
64
77
  }
65
78
  return dragSelection;
66
79
  }
80
+ function draggingOnDragOrigin({
81
+ snapshot,
82
+ position
83
+ }) {
84
+ const dragOrigin = snapshot.beta.internalDrag?.origin;
85
+ return dragOrigin ? isOverlappingSelection(position.selection)({
86
+ ...snapshot,
87
+ context: {
88
+ ...snapshot.context,
89
+ selection: dragOrigin.selection
90
+ }
91
+ }) : !1;
92
+ }
67
93
  function getEventPosition({
68
94
  schema,
69
95
  slateEditor,
@@ -75,7 +101,11 @@ function getEventPosition({
75
101
  });
76
102
  if (!node)
77
103
  return;
78
- const positionBlock = getEventPositionBlock({
104
+ const block = getNodeBlock({
105
+ editor: slateEditor,
106
+ schema,
107
+ node
108
+ }), positionBlock = getEventPositionBlock({
79
109
  node,
80
110
  slateEditor,
81
111
  event
@@ -84,9 +114,8 @@ function getEventPosition({
84
114
  slateEditor,
85
115
  event
86
116
  });
87
- if (positionBlock && !selection && !Editor.isEditor(node)) {
88
- const block = fromSlateValue([node], schema.block.name)?.at(0);
89
- return block ? {
117
+ if (block && positionBlock && !selection && !Editor.isEditor(node))
118
+ return {
90
119
  block: positionBlock,
91
120
  isEditor: !1,
92
121
  selection: {
@@ -103,10 +132,29 @@ function getEventPosition({
103
132
  }]
104
133
  })
105
134
  }
106
- } : void 0;
107
- }
108
- if (!(!positionBlock || !selection))
109
- return {
135
+ };
136
+ if (!positionBlock || !selection)
137
+ return;
138
+ const focusBlockPath = selection.focus.path.at(0), focusBlockKey = isKeyedSegment(focusBlockPath) ? focusBlockPath._key : void 0;
139
+ if (focusBlockKey)
140
+ return isSelectionCollapsed$1(selection) && block && focusBlockKey !== block._key ? {
141
+ block: positionBlock,
142
+ isEditor: !1,
143
+ selection: {
144
+ anchor: getBlockStartPoint({
145
+ node: block,
146
+ path: [{
147
+ _key: block._key
148
+ }]
149
+ }),
150
+ focus: getBlockEndPoint({
151
+ node: block,
152
+ path: [{
153
+ _key: block._key
154
+ }]
155
+ })
156
+ }
157
+ } : {
110
158
  block: positionBlock,
111
159
  isEditor: Editor.isEditor(node),
112
160
  selection
@@ -123,6 +171,22 @@ function getEventPositionBlock({
123
171
  slateEditor,
124
172
  event
125
173
  }) {
174
+ const [firstBlock] = getFirstBlock({
175
+ editor: slateEditor
176
+ });
177
+ if (!firstBlock)
178
+ return;
179
+ const firstBlockRect = DOMEditor.toDOMNode(slateEditor, firstBlock).getBoundingClientRect();
180
+ if (event.pageY < firstBlockRect.top)
181
+ return "start";
182
+ const [lastBlock] = getLastBlock({
183
+ editor: slateEditor
184
+ });
185
+ if (!lastBlock)
186
+ return;
187
+ const lastBlockRef = DOMEditor.toDOMNode(slateEditor, lastBlock).getBoundingClientRect();
188
+ if (event.pageY > lastBlockRef.bottom)
189
+ return "end";
126
190
  const elementRect = DOMEditor.toDOMNode(slateEditor, node).getBoundingClientRect(), top = elementRect.top, height = elementRect.height;
127
191
  return Math.abs(top - event.pageY) < height / 2 ? "start" : "end";
128
192
  }
@@ -141,7 +205,11 @@ function getSlateRangeFromEvent(editor, event) {
141
205
  let domRange;
142
206
  if (window2.document.caretPositionFromPoint !== void 0) {
143
207
  const position = window2.document.caretPositionFromPoint(event.clientX, event.clientY);
144
- position && (domRange = window2.document.createRange(), domRange.setStart(position.offsetNode, position.offset), domRange.setEnd(position.offsetNode, position.offset));
208
+ if (position)
209
+ try {
210
+ domRange = window2.document.createRange(), domRange.setStart(position.offsetNode, position.offset), domRange.setEnd(position.offsetNode, position.offset);
211
+ } catch {
212
+ }
145
213
  } else if (window2.document.caretRangeFromPoint !== void 0)
146
214
  domRange = window2.document.caretRangeFromPoint(event.clientX, event.clientY) ?? void 0;
147
215
  else {
@@ -269,13 +337,13 @@ function DefaultInlineObject(props) {
269
337
  function DropIndicator() {
270
338
  const $ = c(1);
271
339
  let t0;
272
- return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("div", { className: "pt-drop-indicator", style: {
340
+ return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("div", { contentEditable: !1, className: "pt-drop-indicator", style: {
273
341
  position: "absolute",
274
342
  width: "100%",
275
343
  height: 1,
276
344
  borderBottom: "1px solid currentColor",
277
345
  zIndex: 5
278
- } }), $[0] = t0) : t0 = $[0], t0;
346
+ }, children: /* @__PURE__ */ jsx("span", {}) }), $[0] = t0) : t0 = $[0], t0;
279
347
  }
280
348
  debugWithName("components:Element");
281
349
  const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
@@ -1088,78 +1156,111 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
1088
1156
  };
1089
1157
  }, [slateEditor, editorActor]);
1090
1158
  const handleDragStart = useCallback((event_8) => {
1091
- if (onDragStart?.(event_8), !event_8.isDefaultPrevented() && !event_8.isPropagationStopped()) {
1092
- const position_4 = getEventPosition({
1093
- schema: editorActor.getSnapshot().context.schema,
1094
- slateEditor,
1095
- event: event_8.nativeEvent
1096
- });
1097
- if (!position_4) {
1098
- console.warn("Could not find position for dragstart event");
1099
- return;
1159
+ if (onDragStart?.(event_8), event_8.isDefaultPrevented() || event_8.isPropagationStopped())
1160
+ return;
1161
+ event_8.stopPropagation();
1162
+ const position_4 = getEventPosition({
1163
+ schema: editorActor.getSnapshot().context.schema,
1164
+ slateEditor,
1165
+ event: event_8.nativeEvent
1166
+ });
1167
+ if (!position_4) {
1168
+ console.warn("Could not find position for dragstart event");
1169
+ return;
1170
+ }
1171
+ const snapshot = getEditorSnapshot({
1172
+ editorActorSnapshot: editorActor.getSnapshot(),
1173
+ slateEditorInstance: slateEditor
1174
+ }), dragSelection = getDragSelection({
1175
+ eventSelection: position_4.selection,
1176
+ snapshot
1177
+ }), selectingEntireBlocks = isSelectingEntireBlocks({
1178
+ context: {
1179
+ ...snapshot.context,
1180
+ selection: dragSelection
1100
1181
  }
1101
- const snapshot = getEditorSnapshot({
1102
- editorActorSnapshot: editorActor.getSnapshot(),
1103
- slateEditorInstance: slateEditor
1104
- }), dragSelection = getDragSelection({
1105
- eventSelection: position_4.selection,
1106
- snapshot
1107
- }), selectingEntireBlocks = isSelectingEntireBlocks({
1182
+ }), dragGhost = document.createElement("div"), draggedDomNodes = getSelectionDomNodes({
1183
+ snapshot: {
1108
1184
  context: {
1109
1185
  ...snapshot.context,
1110
1186
  selection: dragSelection
1111
1187
  }
1112
- }), dragGhost = document.createElement("div"), draggedDomNodes = getSelectionDomNodes({
1113
- snapshot: {
1114
- context: {
1115
- ...snapshot.context,
1116
- selection: dragSelection
1117
- }
1118
- },
1119
- slateEditor
1120
- });
1121
- if (selectingEntireBlocks) {
1122
- const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) => node.cloneNode(!0));
1123
- for (const block of clonedBlockNodes)
1124
- block instanceof HTMLElement && (block.style.position = "relative"), dragGhost.appendChild(block);
1125
- const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
1126
- if (customGhost && dragGhost.replaceChildren(customGhost), dragGhost.setAttribute("data-dragged", ""), dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost), customGhost) {
1127
- const customGhostRect = customGhost.getBoundingClientRect(), x = event_8.clientX - customGhostRect.left, y = event_8.clientY - customGhostRect.top;
1128
- dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x, y);
1129
- } else {
1130
- const blocksDomRect = getCompoundClientRect(draggedDomNodes.blockNodes), x_0 = event_8.clientX - blocksDomRect.left, y_0 = event_8.clientY - blocksDomRect.top;
1131
- dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_0, y_0);
1132
- }
1188
+ },
1189
+ slateEditor
1190
+ });
1191
+ if (selectingEntireBlocks) {
1192
+ const clonedBlockNodes = draggedDomNodes.blockNodes.map((node) => node.cloneNode(!0));
1193
+ for (const block of clonedBlockNodes)
1194
+ block instanceof HTMLElement && (block.style.position = "relative"), dragGhost.appendChild(block);
1195
+ const customGhost = dragGhost.querySelector("[data-pt-drag-ghost-element]");
1196
+ if (customGhost && dragGhost.replaceChildren(customGhost), dragGhost.setAttribute("data-dragged", ""), dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost), customGhost) {
1197
+ const customGhostRect = customGhost.getBoundingClientRect(), x = event_8.clientX - customGhostRect.left, y = event_8.clientY - customGhostRect.top;
1198
+ dragGhost.style.width = `${customGhostRect.width}px`, dragGhost.style.height = `${customGhostRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x, y);
1133
1199
  } else {
1134
- const clonedChildNodes = draggedDomNodes.childNodes.map((node_0) => node_0.cloneNode(!0));
1135
- for (const child of clonedChildNodes)
1136
- dragGhost.appendChild(child);
1137
- dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
1138
- const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x_1 = event_8.clientX - childrenDomRect.left, y_1 = event_8.clientY - childrenDomRect.top;
1139
- dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_1, y_1);
1200
+ const blocksDomRect = getCompoundClientRect(draggedDomNodes.blockNodes), x_0 = event_8.clientX - blocksDomRect.left, y_0 = event_8.clientY - blocksDomRect.top;
1201
+ dragGhost.style.width = `${blocksDomRect.width}px`, dragGhost.style.height = `${blocksDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_0, y_0);
1140
1202
  }
1141
- editorActor.send({
1142
- type: "dragstart",
1143
- origin: {
1144
- selection: dragSelection
1145
- },
1146
- ghost: dragGhost
1147
- }), editorActor.send({
1148
- type: "behavior event",
1149
- behaviorEvent: {
1150
- type: "drag.dragstart",
1151
- originEvent: {
1152
- dataTransfer: event_8.dataTransfer
1153
- },
1154
- position: {
1155
- selection: dragSelection
1156
- }
1157
- },
1158
- editor: slateEditor
1159
- }), event_8.stopPropagation();
1203
+ } else {
1204
+ const clonedChildNodes = draggedDomNodes.childNodes.map((node_0) => node_0.cloneNode(!0));
1205
+ for (const child of clonedChildNodes)
1206
+ dragGhost.appendChild(child);
1207
+ dragGhost.style.position = "absolute", dragGhost.style.left = "-99999px", dragGhost.style.boxSizing = "border-box", document.body.appendChild(dragGhost);
1208
+ const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x_1 = event_8.clientX - childrenDomRect.left, y_1 = event_8.clientY - childrenDomRect.top;
1209
+ dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_1, y_1);
1160
1210
  }
1211
+ editorActor.send({
1212
+ type: "behavior event",
1213
+ behaviorEvent: {
1214
+ type: "select",
1215
+ selection: isSelectionCollapsed$1(dragSelection) ? dragSelection : {
1216
+ anchor: getSelectionEndPoint(dragSelection),
1217
+ focus: getSelectionEndPoint(dragSelection),
1218
+ backward: !1
1219
+ }
1220
+ },
1221
+ editor: slateEditor
1222
+ }), editorActor.send({
1223
+ type: "dragstart",
1224
+ origin: {
1225
+ selection: dragSelection
1226
+ },
1227
+ ghost: dragGhost
1228
+ }), editorActor.send({
1229
+ type: "behavior event",
1230
+ behaviorEvent: {
1231
+ type: "drag.dragstart",
1232
+ originEvent: {
1233
+ dataTransfer: event_8.dataTransfer
1234
+ },
1235
+ position: {
1236
+ selection: dragSelection
1237
+ }
1238
+ },
1239
+ editor: slateEditor
1240
+ });
1161
1241
  }, [onDragStart, editorActor, slateEditor]), handleDrag = useCallback((event_9) => {
1162
- onDrag?.(event_9), !event_9.isDefaultPrevented() && !event_9.isPropagationStopped() && (editorActor.send({
1242
+ if (onDrag?.(event_9), event_9.isDefaultPrevented() || event_9.isPropagationStopped())
1243
+ return;
1244
+ event_9.stopPropagation();
1245
+ const position_5 = getEventPosition({
1246
+ schema: editorActor.getSnapshot().context.schema,
1247
+ slateEditor,
1248
+ event: event_9.nativeEvent
1249
+ });
1250
+ if (!position_5)
1251
+ return;
1252
+ const snapshot_0 = getEditorSnapshot({
1253
+ editorActorSnapshot: editorActor.getSnapshot(),
1254
+ slateEditorInstance: slateEditor
1255
+ });
1256
+ if (draggingOnDragOrigin({
1257
+ snapshot: snapshot_0,
1258
+ position: position_5
1259
+ })) {
1260
+ event_9.preventDefault();
1261
+ return;
1262
+ }
1263
+ editorActor.send({
1163
1264
  type: "behavior event",
1164
1265
  behaviorEvent: {
1165
1266
  type: "drag.drag",
@@ -1168,9 +1269,9 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
1168
1269
  }
1169
1270
  },
1170
1271
  editor: slateEditor
1171
- }), event_9.stopPropagation());
1272
+ });
1172
1273
  }, [onDrag, editorActor, slateEditor]), handleDragEnd = useCallback((event_10) => {
1173
- onDragEnd?.(event_10), !event_10.isDefaultPrevented() && !event_10.isPropagationStopped() && (editorActor.send({
1274
+ onDragEnd?.(event_10), !(event_10.isDefaultPrevented() || event_10.isPropagationStopped()) && (event_10.stopPropagation(), editorActor.send({
1174
1275
  type: "behavior event",
1175
1276
  behaviorEvent: {
1176
1277
  type: "drag.dragend",
@@ -1179,76 +1280,139 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
1179
1280
  }
1180
1281
  },
1181
1282
  editor: slateEditor
1182
- }), event_10.stopPropagation());
1283
+ }));
1183
1284
  }, [onDragEnd, editorActor, slateEditor]), handleDragEnter = useCallback((event_11) => {
1184
- if (onDragEnter?.(event_11), !event_11.isDefaultPrevented() && !event_11.isPropagationStopped()) {
1185
- const position_5 = getEventPosition({
1186
- schema: editorActor.getSnapshot().context.schema,
1187
- slateEditor,
1188
- event: event_11.nativeEvent
1189
- });
1190
- if (!position_5)
1191
- return;
1192
- editorActor.send({
1193
- type: "behavior event",
1194
- behaviorEvent: {
1195
- type: "drag.dragenter",
1196
- originEvent: {
1197
- dataTransfer: event_11.dataTransfer
1198
- },
1199
- position: position_5
1200
- },
1201
- editor: slateEditor
1202
- }), event_11.stopPropagation();
1285
+ if (onDragEnter?.(event_11), event_11.isDefaultPrevented() || event_11.isPropagationStopped())
1286
+ return;
1287
+ event_11.stopPropagation();
1288
+ const position_6 = getEventPosition({
1289
+ schema: editorActor.getSnapshot().context.schema,
1290
+ slateEditor,
1291
+ event: event_11.nativeEvent
1292
+ });
1293
+ if (!position_6)
1294
+ return;
1295
+ const snapshot_1 = getEditorSnapshot({
1296
+ editorActorSnapshot: editorActor.getSnapshot(),
1297
+ slateEditorInstance: slateEditor
1298
+ });
1299
+ if (draggingOnDragOrigin({
1300
+ snapshot: snapshot_1,
1301
+ position: position_6
1302
+ })) {
1303
+ event_11.preventDefault();
1304
+ return;
1203
1305
  }
1204
- }, [onDragEnter, editorActor, slateEditor]), handleDragOver = useCallback((event_12) => {
1205
- if (onDragOver?.(event_12), !event_12.isDefaultPrevented() && !event_12.isPropagationStopped()) {
1206
- const position_6 = getEventPosition({
1207
- schema: editorActor.getSnapshot().context.schema,
1208
- slateEditor,
1209
- event: event_12.nativeEvent
1210
- });
1211
- if (!position_6)
1212
- return;
1213
- editorActor.send({
1214
- type: "behavior event",
1215
- behaviorEvent: {
1216
- type: "drag.dragover",
1217
- originEvent: {
1218
- dataTransfer: event_12.dataTransfer
1219
- },
1220
- position: position_6
1306
+ editorActor.send({
1307
+ type: "behavior event",
1308
+ behaviorEvent: {
1309
+ type: "drag.dragenter",
1310
+ originEvent: {
1311
+ dataTransfer: event_11.dataTransfer
1221
1312
  },
1222
- editor: slateEditor,
1223
- nativeEvent: event_12
1224
- }), event_12.stopPropagation();
1313
+ position: position_6
1314
+ },
1315
+ editor: slateEditor
1316
+ });
1317
+ }, [onDragEnter, editorActor, slateEditor]), handleDragOver = useCallback((event_12) => {
1318
+ if (onDragOver?.(event_12), event_12.isDefaultPrevented() || event_12.isPropagationStopped())
1319
+ return;
1320
+ event_12.stopPropagation();
1321
+ const position_7 = getEventPosition({
1322
+ schema: editorActor.getSnapshot().context.schema,
1323
+ slateEditor,
1324
+ event: event_12.nativeEvent
1325
+ });
1326
+ if (!position_7)
1327
+ return;
1328
+ const snapshot_2 = getEditorSnapshot({
1329
+ editorActorSnapshot: editorActor.getSnapshot(),
1330
+ slateEditorInstance: slateEditor
1331
+ });
1332
+ if (draggingOnDragOrigin({
1333
+ snapshot: snapshot_2,
1334
+ position: position_7
1335
+ })) {
1336
+ event_12.preventDefault();
1337
+ return;
1225
1338
  }
1226
- }, [onDragOver, editorActor, slateEditor]), handleDrop = useCallback((event_13) => {
1227
- if (onDrop?.(event_13), !event_13.isDefaultPrevented() && !event_13.isPropagationStopped()) {
1228
- const position_7 = getEventPosition({
1229
- schema: editorActor.getSnapshot().context.schema,
1230
- slateEditor,
1231
- event: event_13.nativeEvent
1232
- });
1233
- if (!position_7) {
1234
- console.warn("Could not find position for drop event");
1235
- return;
1236
- }
1237
- const range = ReactEditor.findEventRange(slateEditor, event_13);
1238
- slateEditor.select(range), editorActor.send({
1239
- type: "behavior event",
1240
- behaviorEvent: {
1241
- type: "drag.drop",
1242
- originEvent: {
1243
- dataTransfer: event_13.dataTransfer
1244
- },
1245
- position: position_7
1339
+ editorActor.send({
1340
+ type: "behavior event",
1341
+ behaviorEvent: {
1342
+ type: "drag.dragover",
1343
+ originEvent: {
1344
+ dataTransfer: event_12.dataTransfer
1246
1345
  },
1247
- editor: slateEditor
1248
- }), event_13.preventDefault();
1346
+ position: position_7
1347
+ },
1348
+ editor: slateEditor,
1349
+ nativeEvent: event_12
1350
+ });
1351
+ }, [onDragOver, editorActor, slateEditor]), handleDrop = useCallback((event_13) => {
1352
+ if (onDrop?.(event_13), event_13.isDefaultPrevented() || event_13.isPropagationStopped())
1353
+ return;
1354
+ event_13.preventDefault();
1355
+ const position_8 = getEventPosition({
1356
+ schema: editorActor.getSnapshot().context.schema,
1357
+ slateEditor,
1358
+ event: event_13.nativeEvent
1359
+ });
1360
+ if (!position_8) {
1361
+ console.warn("Could not find position for drop event");
1362
+ return;
1363
+ }
1364
+ const snapshot_3 = getEditorSnapshot({
1365
+ editorActorSnapshot: editorActor.getSnapshot(),
1366
+ slateEditorInstance: slateEditor
1367
+ });
1368
+ if (draggingOnDragOrigin({
1369
+ snapshot: snapshot_3,
1370
+ position: position_8
1371
+ })) {
1372
+ event_13.preventDefault();
1373
+ return;
1249
1374
  }
1375
+ editorActor.send({
1376
+ type: "behavior event",
1377
+ behaviorEvent: {
1378
+ type: "select",
1379
+ selection: position_8.selection
1380
+ },
1381
+ editor: slateEditor
1382
+ }), editorActor.send({
1383
+ type: "behavior event",
1384
+ behaviorEvent: {
1385
+ type: "drag.drop",
1386
+ originEvent: {
1387
+ dataTransfer: event_13.dataTransfer
1388
+ },
1389
+ position: position_8
1390
+ },
1391
+ editor: slateEditor
1392
+ });
1250
1393
  }, [onDrop, editorActor, slateEditor]), handleDragLeave = useCallback((event_14) => {
1251
- onDragLeave?.(event_14), !event_14.isDefaultPrevented() && !event_14.isPropagationStopped() && editorActor.send({
1394
+ if (onDragLeave?.(event_14), event_14.isDefaultPrevented() || event_14.isPropagationStopped())
1395
+ return;
1396
+ event_14.stopPropagation();
1397
+ const position_9 = getEventPosition({
1398
+ schema: editorActor.getSnapshot().context.schema,
1399
+ slateEditor,
1400
+ event: event_14.nativeEvent
1401
+ });
1402
+ if (!position_9)
1403
+ return;
1404
+ const snapshot_4 = getEditorSnapshot({
1405
+ editorActorSnapshot: editorActor.getSnapshot(),
1406
+ slateEditorInstance: slateEditor
1407
+ });
1408
+ if (draggingOnDragOrigin({
1409
+ snapshot: snapshot_4,
1410
+ position: position_9
1411
+ })) {
1412
+ event_14.preventDefault();
1413
+ return;
1414
+ }
1415
+ editorActor.send({
1252
1416
  type: "behavior event",
1253
1417
  behaviorEvent: {
1254
1418
  type: "drag.dragleave",