@portabletext/editor 1.41.3 → 1.41.4
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.
- package/lib/_chunks-cjs/behavior.core.cjs +52 -28
- package/lib/_chunks-cjs/behavior.core.cjs.map +1 -1
- package/lib/_chunks-cjs/behavior.markdown.cjs +11 -11
- package/lib/_chunks-cjs/behavior.markdown.cjs.map +1 -1
- package/lib/_chunks-cjs/editor-provider.cjs +24 -21
- package/lib/_chunks-cjs/editor-provider.cjs.map +1 -1
- package/lib/_chunks-cjs/selector.get-focus-inline-object.cjs +2 -2
- package/lib/_chunks-cjs/selector.get-focus-inline-object.cjs.map +1 -1
- package/lib/_chunks-cjs/selector.get-text-before.cjs +2 -2
- package/lib/_chunks-cjs/selector.get-text-before.cjs.map +1 -1
- package/lib/_chunks-cjs/selector.is-active-style.cjs +240 -0
- package/lib/_chunks-cjs/selector.is-active-style.cjs.map +1 -0
- package/lib/_chunks-cjs/selector.is-overlapping-selection.cjs +300 -218
- package/lib/_chunks-cjs/selector.is-overlapping-selection.cjs.map +1 -1
- package/lib/_chunks-es/behavior.core.js +27 -3
- package/lib/_chunks-es/behavior.core.js.map +1 -1
- package/lib/_chunks-es/behavior.markdown.js +1 -1
- package/lib/_chunks-es/editor-provider.js +5 -2
- package/lib/_chunks-es/editor-provider.js.map +1 -1
- package/lib/_chunks-es/selector.get-focus-inline-object.js +1 -1
- package/lib/_chunks-es/selector.get-text-before.js +1 -1
- package/lib/_chunks-es/selector.is-active-style.js +243 -0
- package/lib/_chunks-es/selector.is-active-style.js.map +1 -0
- package/lib/_chunks-es/selector.is-overlapping-selection.js +298 -217
- package/lib/_chunks-es/selector.is-overlapping-selection.js.map +1 -1
- package/lib/behaviors/index.cjs +9 -9
- package/lib/behaviors/index.cjs.map +1 -1
- package/lib/behaviors/index.js +1 -1
- package/lib/index.cjs +75 -102
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +66 -93
- package/lib/index.js.map +1 -1
- package/lib/plugins/index.cjs +6 -6
- package/lib/plugins/index.cjs.map +1 -1
- package/lib/plugins/index.js +1 -1
- package/lib/selectors/index.cjs +36 -36
- package/lib/selectors/index.cjs.map +1 -1
- package/lib/selectors/index.js +4 -4
- package/package.json +1 -1
- package/src/behaviors/behavior.core.dnd.ts +27 -0
- package/src/behaviors/behavior.core.ts +2 -0
- package/src/behaviors/behavior.default.ts +4 -0
- package/src/editor/Editable.tsx +22 -40
- package/lib/_chunks-cjs/selector.is-at-the-start-of-block.cjs +0 -322
- package/lib/_chunks-cjs/selector.is-at-the-start-of-block.cjs.map +0 -1
- package/lib/_chunks-es/selector.is-at-the-start-of-block.js +0 -324
- package/lib/_chunks-es/selector.is-at-the-start-of-block.js.map +0 -1
- package/src/internal-utils/dragging-on-drag-origin.ts +0 -22
package/lib/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
|
-
var editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), util_sliceBlocks = require("./_chunks-cjs/util.slice-blocks.cjs"),
|
|
3
|
+
var editorProvider = require("./_chunks-cjs/editor-provider.cjs"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), util_sliceBlocks = require("./_chunks-cjs/util.slice-blocks.cjs"), selector_isOverlappingSelection = require("./_chunks-cjs/selector.is-overlapping-selection.cjs"), selector_getFocusInlineObject = require("./_chunks-cjs/selector.get-focus-inline-object.cjs"), slateDom = require("slate-dom"), util_isSelectionCollapsed = require("./_chunks-cjs/util.is-selection-collapsed.cjs"), util_selectionPointToBlockOffset = require("./_chunks-cjs/util.selection-point-to-block-offset.cjs"), selector_isActiveStyle = require("./_chunks-cjs/selector.is-active-style.cjs"), behavior_core = require("./_chunks-cjs/behavior.core.cjs"), reactCompilerRuntime = require("react-compiler-runtime"), uniq = require("lodash/uniq.js"), useEffectEvent = require("use-effect-event");
|
|
4
4
|
function _interopDefaultCompat(e) {
|
|
5
5
|
return e && typeof e == "object" && "default" in e ? e : { default: e };
|
|
6
6
|
}
|
|
@@ -30,17 +30,17 @@ function getDragSelection({
|
|
|
30
30
|
}
|
|
31
31
|
}))
|
|
32
32
|
return dragSelection;
|
|
33
|
-
const draggingCollapsedSelection =
|
|
33
|
+
const draggingCollapsedSelection = selector_isOverlappingSelection.isSelectionCollapsed({
|
|
34
34
|
context: {
|
|
35
35
|
...snapshot.context,
|
|
36
36
|
selection: eventSelection
|
|
37
37
|
}
|
|
38
|
-
}), draggedTextBlock =
|
|
38
|
+
}), draggedTextBlock = selector_isOverlappingSelection.getFocusTextBlock({
|
|
39
39
|
context: {
|
|
40
40
|
...snapshot.context,
|
|
41
41
|
selection: eventSelection
|
|
42
42
|
}
|
|
43
|
-
}), draggedSpan =
|
|
43
|
+
}), draggedSpan = selector_isOverlappingSelection.getFocusSpan({
|
|
44
44
|
context: {
|
|
45
45
|
...snapshot.context,
|
|
46
46
|
selection: eventSelection
|
|
@@ -50,9 +50,9 @@ function getDragSelection({
|
|
|
50
50
|
anchor: util_sliceBlocks.getBlockStartPoint(draggedTextBlock),
|
|
51
51
|
focus: util_sliceBlocks.getBlockEndPoint(draggedTextBlock)
|
|
52
52
|
});
|
|
53
|
-
const selectedBlocks =
|
|
54
|
-
if (snapshot.context.selection &&
|
|
55
|
-
const selectionStartBlock =
|
|
53
|
+
const selectedBlocks = selector_isOverlappingSelection.getSelectedBlocks(snapshot);
|
|
54
|
+
if (snapshot.context.selection && selector_isOverlappingSelection.isSelectionExpanded(snapshot) && selectedBlocks.length > 1) {
|
|
55
|
+
const selectionStartBlock = selector_isOverlappingSelection.getSelectionStartBlock(snapshot), selectionEndBlock = selector_isOverlappingSelection.getSelectionEndBlock(snapshot);
|
|
56
56
|
if (!selectionStartBlock || !selectionEndBlock)
|
|
57
57
|
return dragSelection;
|
|
58
58
|
const selectionStartPoint = util_sliceBlocks.getBlockStartPoint(selectionStartBlock), selectionEndPoint = util_sliceBlocks.getBlockEndPoint(selectionEndBlock);
|
|
@@ -72,19 +72,6 @@ function getDragSelection({
|
|
|
72
72
|
}
|
|
73
73
|
return dragSelection;
|
|
74
74
|
}
|
|
75
|
-
function draggingOnDragOrigin({
|
|
76
|
-
snapshot,
|
|
77
|
-
position
|
|
78
|
-
}) {
|
|
79
|
-
const dragOrigin = snapshot.beta.internalDrag?.origin;
|
|
80
|
-
return dragOrigin ? selector_isOverlappingSelection.isOverlappingSelection(position.selection)({
|
|
81
|
-
...snapshot,
|
|
82
|
-
context: {
|
|
83
|
-
...snapshot.context,
|
|
84
|
-
selection: dragOrigin.selection
|
|
85
|
-
}
|
|
86
|
-
}) : !1;
|
|
87
|
-
}
|
|
88
75
|
function getEventPosition({
|
|
89
76
|
schema,
|
|
90
77
|
slateEditor,
|
|
@@ -363,7 +350,7 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
|
|
|
363
350
|
snapshot,
|
|
364
351
|
event
|
|
365
352
|
}) => {
|
|
366
|
-
const dropFocusBlock =
|
|
353
|
+
const dropFocusBlock = selector_isOverlappingSelection.getFocusBlock({
|
|
367
354
|
context: {
|
|
368
355
|
...snapshot.context,
|
|
369
356
|
selection: event.position.selection
|
|
@@ -372,12 +359,12 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
|
|
|
372
359
|
if (!dropFocusBlock || dropFocusBlock.node._key !== element._key)
|
|
373
360
|
return !1;
|
|
374
361
|
const dragOrigin = snapshot.beta.internalDrag?.origin;
|
|
375
|
-
return !dragOrigin ||
|
|
362
|
+
return !dragOrigin || selector_isOverlappingSelection.getSelectedBlocks({
|
|
376
363
|
context: {
|
|
377
364
|
...snapshot.context,
|
|
378
365
|
selection: dragOrigin.selection
|
|
379
366
|
}
|
|
380
|
-
}).some((draggedBlock) => draggedBlock.node._key === element._key) ? !1 :
|
|
367
|
+
}).some((draggedBlock) => draggedBlock.node._key === element._key) ? !1 : selector_isActiveStyle.isSelectingEntireBlocks({
|
|
381
368
|
context: {
|
|
382
369
|
...snapshot.context,
|
|
383
370
|
selection: dragOrigin.selection
|
|
@@ -1153,7 +1140,6 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
|
|
|
1153
1140
|
const handleDragStart = React.useCallback((event_8) => {
|
|
1154
1141
|
if (onDragStart?.(event_8), event_8.isDefaultPrevented() || event_8.isPropagationStopped())
|
|
1155
1142
|
return;
|
|
1156
|
-
event_8.stopPropagation();
|
|
1157
1143
|
const position_4 = getEventPosition({
|
|
1158
1144
|
schema: editorActor.getSnapshot().context.schema,
|
|
1159
1145
|
slateEditor,
|
|
@@ -1169,7 +1155,7 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
|
|
|
1169
1155
|
}), dragSelection = getDragSelection({
|
|
1170
1156
|
eventSelection: position_4.selection,
|
|
1171
1157
|
snapshot
|
|
1172
|
-
}), selectingEntireBlocks =
|
|
1158
|
+
}), selectingEntireBlocks = selector_isActiveStyle.isSelectingEntireBlocks({
|
|
1173
1159
|
context: {
|
|
1174
1160
|
...snapshot.context,
|
|
1175
1161
|
selection: dragSelection
|
|
@@ -1203,7 +1189,7 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
|
|
|
1203
1189
|
const childrenDomRect = getCompoundClientRect(draggedDomNodes.childNodes), x_1 = event_8.clientX - childrenDomRect.left, y_1 = event_8.clientY - childrenDomRect.top;
|
|
1204
1190
|
dragGhost.style.width = `${childrenDomRect.width}px`, dragGhost.style.height = `${childrenDomRect.height}px`, event_8.dataTransfer.setDragImage(dragGhost, x_1, y_1);
|
|
1205
1191
|
}
|
|
1206
|
-
editorActor.send({
|
|
1192
|
+
return editorActor.send({
|
|
1207
1193
|
type: "behavior event",
|
|
1208
1194
|
behaviorEvent: {
|
|
1209
1195
|
type: "select",
|
|
@@ -1232,87 +1218,79 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
|
|
|
1232
1218
|
}
|
|
1233
1219
|
},
|
|
1234
1220
|
editor: slateEditor
|
|
1235
|
-
});
|
|
1221
|
+
}), !0;
|
|
1236
1222
|
}, [onDragStart, editorActor, slateEditor]), handleDrag = React.useCallback((event_9) => {
|
|
1237
|
-
onDrag?.(event_9), !(event_9.isDefaultPrevented() || event_9.isPropagationStopped() ||
|
|
1223
|
+
if (onDrag?.(event_9), !(event_9.isDefaultPrevented() || event_9.isPropagationStopped() || !getEventPosition({
|
|
1238
1224
|
schema: editorActor.getSnapshot().context.schema,
|
|
1239
1225
|
slateEditor,
|
|
1240
1226
|
event: event_9.nativeEvent
|
|
1241
|
-
})))
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1227
|
+
})))
|
|
1228
|
+
return editorActor.send({
|
|
1229
|
+
type: "behavior event",
|
|
1230
|
+
behaviorEvent: {
|
|
1231
|
+
type: "drag.drag",
|
|
1232
|
+
originEvent: {
|
|
1233
|
+
dataTransfer: event_9.dataTransfer
|
|
1234
|
+
}
|
|
1235
|
+
},
|
|
1236
|
+
editor: slateEditor
|
|
1237
|
+
}), !0;
|
|
1251
1238
|
}, [onDrag, editorActor, slateEditor]), handleDragEnd = React.useCallback((event_10) => {
|
|
1252
|
-
onDragEnd?.(event_10), !(event_10.isDefaultPrevented() || event_10.isPropagationStopped())
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1239
|
+
if (onDragEnd?.(event_10), !(event_10.isDefaultPrevented() || event_10.isPropagationStopped()))
|
|
1240
|
+
return editorActor.send({
|
|
1241
|
+
type: "behavior event",
|
|
1242
|
+
behaviorEvent: {
|
|
1243
|
+
type: "drag.dragend",
|
|
1244
|
+
originEvent: {
|
|
1245
|
+
dataTransfer: event_10.dataTransfer
|
|
1246
|
+
}
|
|
1247
|
+
},
|
|
1248
|
+
editor: slateEditor
|
|
1249
|
+
}), !0;
|
|
1262
1250
|
}, [onDragEnd, editorActor, slateEditor]), handleDragEnter = React.useCallback((event_11) => {
|
|
1263
1251
|
if (onDragEnter?.(event_11), event_11.isDefaultPrevented() || event_11.isPropagationStopped())
|
|
1264
1252
|
return;
|
|
1265
|
-
event_11.stopPropagation();
|
|
1266
1253
|
const position_6 = getEventPosition({
|
|
1267
1254
|
schema: editorActor.getSnapshot().context.schema,
|
|
1268
1255
|
slateEditor,
|
|
1269
1256
|
event: event_11.nativeEvent
|
|
1270
1257
|
});
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1258
|
+
if (position_6)
|
|
1259
|
+
return editorActor.send({
|
|
1260
|
+
type: "behavior event",
|
|
1261
|
+
behaviorEvent: {
|
|
1262
|
+
type: "drag.dragenter",
|
|
1263
|
+
originEvent: {
|
|
1264
|
+
dataTransfer: event_11.dataTransfer
|
|
1265
|
+
},
|
|
1266
|
+
position: position_6
|
|
1277
1267
|
},
|
|
1278
|
-
|
|
1279
|
-
},
|
|
1280
|
-
editor: slateEditor
|
|
1281
|
-
});
|
|
1268
|
+
editor: slateEditor
|
|
1269
|
+
}), !0;
|
|
1282
1270
|
}, [onDragEnter, editorActor, slateEditor]), handleDragOver = React.useCallback((event_12) => {
|
|
1283
1271
|
if (onDragOver?.(event_12), event_12.isDefaultPrevented() || event_12.isPropagationStopped())
|
|
1284
1272
|
return;
|
|
1285
|
-
event_12.stopPropagation();
|
|
1286
1273
|
const position_7 = getEventPosition({
|
|
1287
1274
|
schema: editorActor.getSnapshot().context.schema,
|
|
1288
1275
|
slateEditor,
|
|
1289
1276
|
event: event_12.nativeEvent
|
|
1290
1277
|
});
|
|
1291
|
-
if (
|
|
1292
|
-
return
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
}) && event_12.preventDefault(), editorActor.send({
|
|
1301
|
-
type: "behavior event",
|
|
1302
|
-
behaviorEvent: {
|
|
1303
|
-
type: "drag.dragover",
|
|
1304
|
-
originEvent: {
|
|
1305
|
-
dataTransfer: event_12.dataTransfer
|
|
1278
|
+
if (position_7)
|
|
1279
|
+
return editorActor.send({
|
|
1280
|
+
type: "behavior event",
|
|
1281
|
+
behaviorEvent: {
|
|
1282
|
+
type: "drag.dragover",
|
|
1283
|
+
originEvent: {
|
|
1284
|
+
dataTransfer: event_12.dataTransfer
|
|
1285
|
+
},
|
|
1286
|
+
position: position_7
|
|
1306
1287
|
},
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
nativeEvent: event_12
|
|
1311
|
-
});
|
|
1288
|
+
editor: slateEditor,
|
|
1289
|
+
nativeEvent: event_12
|
|
1290
|
+
}), !0;
|
|
1312
1291
|
}, [onDragOver, editorActor, slateEditor]), handleDrop = React.useCallback((event_13) => {
|
|
1313
1292
|
if (onDrop?.(event_13), event_13.isDefaultPrevented() || event_13.isPropagationStopped())
|
|
1314
1293
|
return;
|
|
1315
|
-
event_13.preventDefault();
|
|
1316
1294
|
const position_8 = getEventPosition({
|
|
1317
1295
|
schema: editorActor.getSnapshot().context.schema,
|
|
1318
1296
|
slateEditor,
|
|
@@ -1322,14 +1300,7 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
|
|
|
1322
1300
|
console.warn("Could not find position for drop event");
|
|
1323
1301
|
return;
|
|
1324
1302
|
}
|
|
1325
|
-
editorActor.send({
|
|
1326
|
-
type: "behavior event",
|
|
1327
|
-
behaviorEvent: {
|
|
1328
|
-
type: "select",
|
|
1329
|
-
selection: position_8.selection
|
|
1330
|
-
},
|
|
1331
|
-
editor: slateEditor
|
|
1332
|
-
}), editorActor.send({
|
|
1303
|
+
return editorActor.send({
|
|
1333
1304
|
type: "behavior event",
|
|
1334
1305
|
behaviorEvent: {
|
|
1335
1306
|
type: "drag.drop",
|
|
@@ -1338,23 +1309,25 @@ const debug = editorProvider.debugWithName("component:Editable"), PLACEHOLDER_ST
|
|
|
1338
1309
|
},
|
|
1339
1310
|
position: position_8
|
|
1340
1311
|
},
|
|
1341
|
-
editor: slateEditor
|
|
1342
|
-
|
|
1312
|
+
editor: slateEditor,
|
|
1313
|
+
nativeEvent: event_13
|
|
1314
|
+
}), !0;
|
|
1343
1315
|
}, [onDrop, editorActor, slateEditor]), handleDragLeave = React.useCallback((event_14) => {
|
|
1344
|
-
onDragLeave?.(event_14), !(event_14.isDefaultPrevented() || event_14.isPropagationStopped() ||
|
|
1316
|
+
if (onDragLeave?.(event_14), !(event_14.isDefaultPrevented() || event_14.isPropagationStopped() || !getEventPosition({
|
|
1345
1317
|
schema: editorActor.getSnapshot().context.schema,
|
|
1346
1318
|
slateEditor,
|
|
1347
1319
|
event: event_14.nativeEvent
|
|
1348
|
-
})))
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1320
|
+
})))
|
|
1321
|
+
return editorActor.send({
|
|
1322
|
+
type: "behavior event",
|
|
1323
|
+
behaviorEvent: {
|
|
1324
|
+
type: "drag.dragleave",
|
|
1325
|
+
originEvent: {
|
|
1326
|
+
dataTransfer: event_14.dataTransfer
|
|
1327
|
+
}
|
|
1328
|
+
},
|
|
1329
|
+
editor: slateEditor
|
|
1330
|
+
}), !0;
|
|
1358
1331
|
}, [onDragLeave, editorActor, slateEditor]);
|
|
1359
1332
|
return portableTextEditor ? hasInvalidValue ? null : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1360
1333
|
slateReact.Editable,
|