@atlaskit/editor-plugin-block-controls 1.10.3 → 1.10.5
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/CHANGELOG.md +20 -0
- package/dist/cjs/pm-plugins/decorations.js +6 -53
- package/dist/cjs/pm-plugins/main.js +45 -102
- package/dist/cjs/ui/drag-handle.js +19 -44
- package/dist/cjs/ui/drag-preview.js +1 -4
- package/dist/cjs/ui/global-styles.js +1 -1
- package/dist/cjs/utils/getSelection.js +8 -21
- package/dist/es2019/pm-plugins/decorations.js +5 -52
- package/dist/es2019/pm-plugins/main.js +44 -101
- package/dist/es2019/ui/drag-handle.js +13 -39
- package/dist/es2019/ui/drag-preview.js +1 -4
- package/dist/es2019/ui/global-styles.js +1 -1
- package/dist/es2019/utils/getSelection.js +8 -21
- package/dist/esm/pm-plugins/decorations.js +5 -52
- package/dist/esm/pm-plugins/main.js +46 -103
- package/dist/esm/ui/drag-handle.js +19 -44
- package/dist/esm/ui/drag-preview.js +1 -4
- package/dist/esm/ui/global-styles.js +1 -1
- package/dist/esm/utils/getSelection.js +8 -21
- package/dist/types/pm-plugins/decorations.d.ts +0 -6
- package/dist/types/pm-plugins/main.d.ts +1 -14
- package/dist/types/types.d.ts +4 -0
- package/dist/types-ts4.5/pm-plugins/decorations.d.ts +0 -6
- package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -14
- package/dist/types-ts4.5/types.d.ts +4 -0
- package/package.json +2 -17
- package/dist/cjs/ui/mouse-move-wrapper.js +0 -148
- package/dist/es2019/ui/mouse-move-wrapper.js +0 -133
- package/dist/esm/ui/mouse-move-wrapper.js +0 -140
- package/dist/types/ui/mouse-move-wrapper.d.ts +0 -11
- package/dist/types-ts4.5/ui/mouse-move-wrapper.d.ts +0 -11
|
@@ -11,7 +11,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
|
|
|
11
11
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
12
12
|
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
13
13
|
import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
|
|
14
|
-
import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations,
|
|
14
|
+
import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, nodeDecorations } from './decorations';
|
|
15
15
|
import { handleMouseOver } from './handle-mouse-over';
|
|
16
16
|
import { boundKeydownHandler } from './keymap';
|
|
17
17
|
export var key = new PluginKey('blockControls');
|
|
@@ -78,7 +78,6 @@ var initialState = {
|
|
|
78
78
|
isDocSizeLimitEnabled: null,
|
|
79
79
|
isPMDragging: false
|
|
80
80
|
};
|
|
81
|
-
var DRAG_AND_DROP_DOC_SIZE_LIMIT = 50;
|
|
82
81
|
export var createPlugin = function createPlugin(api, getIntl) {
|
|
83
82
|
return new SafePlugin({
|
|
84
83
|
key: key,
|
|
@@ -88,16 +87,6 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
88
87
|
},
|
|
89
88
|
apply: function apply(tr, currentState, oldState, newState) {
|
|
90
89
|
var _meta$activeNode, _meta$activeNode$hand, _meta$activeNode4, _meta$isDragging, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
|
|
91
|
-
if (initialState.isDocSizeLimitEnabled === null) {
|
|
92
|
-
if (fg('platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq')) {
|
|
93
|
-
initialState.isDocSizeLimitEnabled = true;
|
|
94
|
-
} else {
|
|
95
|
-
initialState.isDocSizeLimitEnabled = false;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
if (initialState.isDocSizeLimitEnabled && newState.doc.childCount > DRAG_AND_DROP_DOC_SIZE_LIMIT) {
|
|
99
|
-
return initialState;
|
|
100
|
-
}
|
|
101
90
|
var activeNode = currentState.activeNode,
|
|
102
91
|
decorations = currentState.decorations,
|
|
103
92
|
isMenuOpen = currentState.isMenuOpen,
|
|
@@ -136,23 +125,20 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
136
125
|
decorations = decorations.remove(oldHandle);
|
|
137
126
|
}
|
|
138
127
|
var isDecsMissing = false;
|
|
139
|
-
var isHandleMissing = false;
|
|
140
128
|
var isDropTargetsMissing = false;
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
var
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}).length;
|
|
129
|
+
// Ensure decorations stay in sync when nodes are added or removed from the doc
|
|
130
|
+
var isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(function (_ref6) {
|
|
131
|
+
var spec = _ref6.spec;
|
|
132
|
+
return spec.id === 'drag-handle';
|
|
133
|
+
});
|
|
134
|
+
var decsLength = decorations.find().filter(function (_ref7) {
|
|
135
|
+
var spec = _ref7.spec;
|
|
136
|
+
return spec.id !== 'drag-handle';
|
|
137
|
+
}).length;
|
|
151
138
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}
|
|
139
|
+
//TODO: Fix this logic for nested scenarios
|
|
140
|
+
if (!fg('platform_editor_elements_dnd_nested')) {
|
|
141
|
+
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
|
|
156
142
|
}
|
|
157
143
|
if (fg('platform_editor_element_drag_and_drop_ed_24372')) {
|
|
158
144
|
var dropTargetLen = decorations.find().filter(function (_ref8) {
|
|
@@ -192,12 +178,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
192
178
|
decorations = DecorationSet.create(newState.doc, []);
|
|
193
179
|
}
|
|
194
180
|
var nodeDecs = nodeDecorations(newState);
|
|
195
|
-
|
|
196
|
-
decorations = decorations.add(newState.doc, _toConsumableArray(nodeDecs));
|
|
197
|
-
} else {
|
|
198
|
-
var mouseWrapperDecs = mouseMoveWrapperDecorations(newState, api);
|
|
199
|
-
decorations = decorations.add(newState.doc, [].concat(_toConsumableArray(nodeDecs), _toConsumableArray(mouseWrapperDecs)));
|
|
200
|
-
}
|
|
181
|
+
decorations = decorations.add(newState.doc, _toConsumableArray(nodeDecs));
|
|
201
182
|
|
|
202
183
|
// Note: Quite often the handle is not in the right position after a node is moved
|
|
203
184
|
// it is safer for now to not show it when a node is moved
|
|
@@ -379,6 +360,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
379
360
|
},
|
|
380
361
|
handleDOMEvents: {
|
|
381
362
|
drop: function drop(view, event) {
|
|
363
|
+
var _event$target;
|
|
382
364
|
// prosemirror has sends a default transaction on drop (meta where uiEvent is 'drop'),
|
|
383
365
|
// this duplicates an empty version of the node it was dropping,
|
|
384
366
|
// Adding some check here to prevent that if drop position is within activeNode
|
|
@@ -397,18 +379,13 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
397
379
|
// Currently we can only drag one node at a time
|
|
398
380
|
// so we only need to check first child
|
|
399
381
|
var draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
|
|
400
|
-
var
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
var _event$target;
|
|
404
|
-
var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
405
|
-
if (!nodeElement) {
|
|
406
|
-
return false;
|
|
407
|
-
}
|
|
408
|
-
var domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
409
|
-
var nodeTarget = state.doc.nodeAt(domPos);
|
|
410
|
-
isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
382
|
+
var nodeElement = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[data-drag-handler-anchor-name]');
|
|
383
|
+
if (!nodeElement) {
|
|
384
|
+
return false;
|
|
411
385
|
}
|
|
386
|
+
var domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
|
|
387
|
+
var nodeTarget = state.doc.nodeAt(domPos);
|
|
388
|
+
var isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
|
|
412
389
|
if (isSameNode) {
|
|
413
390
|
// Prevent the default drop behavior if the position is within the activeNode
|
|
414
391
|
event.preventDefault();
|
|
@@ -432,9 +409,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
432
409
|
}
|
|
433
410
|
},
|
|
434
411
|
mouseover: function mouseover(view, event) {
|
|
435
|
-
|
|
436
|
-
handleMouseOver(view, event, api);
|
|
437
|
-
}
|
|
412
|
+
handleMouseOver(view, event, api);
|
|
438
413
|
return false;
|
|
439
414
|
},
|
|
440
415
|
keydown: function keydown(view, event) {
|
|
@@ -467,74 +442,42 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
467
442
|
view: function view(editorView) {
|
|
468
443
|
var dom = editorView.dom;
|
|
469
444
|
var editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
|
|
470
|
-
var resizeObserverHeight;
|
|
471
|
-
var resizeObserverWidth;
|
|
472
|
-
if (!fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
|
|
473
|
-
// Use ResizeObserver to observe height changes
|
|
474
|
-
resizeObserverHeight = new ResizeObserver(rafSchedule(function (entries) {
|
|
475
|
-
var _entries$;
|
|
476
|
-
var editorHeight = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize[0]) === null || _entries$ === void 0 ? void 0 : _entries$.blockSize;
|
|
477
445
|
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
446
|
+
// Use ResizeObserver to observe width changes
|
|
447
|
+
var resizeObserverWidth = new ResizeObserver(rafSchedule(function (entries) {
|
|
448
|
+
var editorContentArea = entries[0].target;
|
|
449
|
+
var editorWidthRight = editorContentArea.getBoundingClientRect().right;
|
|
450
|
+
var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
|
|
451
|
+
|
|
452
|
+
// Update the plugin state when the height changes
|
|
453
|
+
var pluginState = key.getState(editorView.state);
|
|
454
|
+
if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
|
|
455
|
+
var isResizerResizing = !!dom.querySelector('.is-resizing');
|
|
456
|
+
var transaction = editorView.state.tr;
|
|
457
|
+
if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
|
|
458
|
+
transaction.setMeta('is-resizer-resizing', isResizerResizing);
|
|
459
|
+
}
|
|
460
|
+
if (!isResizerResizing) {
|
|
461
|
+
if (fg('platform_editor_elements_drag_and_drop_ed_23394')) {
|
|
487
462
|
transaction.setMeta(key, {
|
|
488
|
-
|
|
463
|
+
editorWidthLeft: editorWidthLeft,
|
|
464
|
+
editorWidthRight: editorWidthRight
|
|
489
465
|
});
|
|
490
466
|
}
|
|
491
|
-
editorView.dispatch(transaction);
|
|
492
467
|
}
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
// Start observing the editor DOM element
|
|
496
|
-
resizeObserverHeight.observe(dom);
|
|
497
|
-
}
|
|
498
|
-
if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
|
|
499
|
-
// Use ResizeObserver to observe width changes
|
|
500
|
-
resizeObserverWidth = new ResizeObserver(rafSchedule(function (entries) {
|
|
501
|
-
var editorContentArea = entries[0].target;
|
|
502
|
-
var editorWidthRight = editorContentArea.getBoundingClientRect().right;
|
|
503
|
-
var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
|
|
504
|
-
|
|
505
|
-
// Update the plugin state when the height changes
|
|
506
|
-
var pluginState = key.getState(editorView.state);
|
|
507
|
-
if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
|
|
508
|
-
var isResizerResizing = !!dom.querySelector('.is-resizing');
|
|
509
|
-
var transaction = editorView.state.tr;
|
|
510
|
-
if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
|
|
511
|
-
transaction.setMeta('is-resizer-resizing', isResizerResizing);
|
|
512
|
-
}
|
|
513
|
-
if (!isResizerResizing) {
|
|
514
|
-
if (fg('platform_editor_elements_drag_and_drop_ed_23394')) {
|
|
515
|
-
transaction.setMeta(key, {
|
|
516
|
-
editorWidthLeft: editorWidthLeft,
|
|
517
|
-
editorWidthRight: editorWidthRight
|
|
518
|
-
});
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
editorView.dispatch(transaction);
|
|
522
|
-
}
|
|
523
|
-
}));
|
|
524
|
-
if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
|
|
525
|
-
resizeObserverWidth.observe(editorContentArea);
|
|
468
|
+
editorView.dispatch(transaction);
|
|
526
469
|
}
|
|
470
|
+
}));
|
|
471
|
+
if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
|
|
472
|
+
resizeObserverWidth.observe(editorContentArea);
|
|
527
473
|
}
|
|
528
474
|
|
|
529
475
|
// Start pragmatic monitors
|
|
530
476
|
var pragmaticCleanup = destroyFn(api);
|
|
531
477
|
return {
|
|
532
478
|
destroy: function destroy() {
|
|
533
|
-
if (
|
|
534
|
-
|
|
535
|
-
}
|
|
536
|
-
if (editorContentArea && fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
|
|
537
|
-
fg('platform_editor_elements_drag_and_drop_ed_23394') && resizeObserverWidth.unobserve(editorContentArea);
|
|
479
|
+
if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
|
|
480
|
+
resizeObserverWidth.unobserve(editorContentArea);
|
|
538
481
|
}
|
|
539
482
|
pragmaticCleanup();
|
|
540
483
|
}
|
|
@@ -59,7 +59,7 @@ var selectedStyles = css({
|
|
|
59
59
|
color: "var(--ds-icon-selected, #0C66E4)"
|
|
60
60
|
});
|
|
61
61
|
var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
62
|
-
var _api$core2, _api$analytics2, _api$
|
|
62
|
+
var _api$core2, _api$analytics2, _api$core4, _api$core6;
|
|
63
63
|
var view = _ref.view,
|
|
64
64
|
api = _ref.api,
|
|
65
65
|
getPos = _ref.getPos,
|
|
@@ -128,32 +128,13 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
128
128
|
view.focus();
|
|
129
129
|
}, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, start, nodeType]);
|
|
130
130
|
|
|
131
|
-
//
|
|
132
|
-
//
|
|
133
|
-
//
|
|
131
|
+
// TODO - This needs to be investigated further. Drag preview generation is not always working
|
|
132
|
+
// as expected with a node selection. This workaround sets the selection to the node on mouseDown,
|
|
133
|
+
// but ensures the preview is generated correctly.
|
|
134
134
|
var handleMouseDown = useCallback(function () {
|
|
135
135
|
var _api$core3;
|
|
136
136
|
api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
|
|
137
137
|
var tr = _ref3.tr;
|
|
138
|
-
if (start === undefined) {
|
|
139
|
-
return tr;
|
|
140
|
-
}
|
|
141
|
-
tr = selectNode(tr, start, nodeType);
|
|
142
|
-
tr.setMeta(key, {
|
|
143
|
-
pos: start
|
|
144
|
-
});
|
|
145
|
-
return tr;
|
|
146
|
-
});
|
|
147
|
-
view.focus();
|
|
148
|
-
}, [start, api, view, nodeType]);
|
|
149
|
-
|
|
150
|
-
// TODO - This needs to be investigated further. Drag preview generation is not always working
|
|
151
|
-
// as expected with a node selection. This workaround sets the selection to the node on mouseDown,
|
|
152
|
-
// but ensures the preview is generated correctly.
|
|
153
|
-
var handleMouseDownWrapperRemoved = useCallback(function () {
|
|
154
|
-
var _api$core4;
|
|
155
|
-
api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
|
|
156
|
-
var tr = _ref4.tr;
|
|
157
138
|
var startPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
|
|
158
139
|
if (startPos === undefined) {
|
|
159
140
|
return tr;
|
|
@@ -170,16 +151,16 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
170
151
|
});
|
|
171
152
|
return tr;
|
|
172
153
|
});
|
|
173
|
-
}, [api === null || api === void 0 || (_api$
|
|
154
|
+
}, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, start]);
|
|
174
155
|
var handleKeyDown = useCallback(function (e) {
|
|
175
156
|
if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
|
|
176
157
|
// allow user to use spacebar to select the node
|
|
177
158
|
|
|
178
159
|
if (!e.repeat && e.key === ' ') {
|
|
179
|
-
var _api$
|
|
160
|
+
var _api$core5;
|
|
180
161
|
var startPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
|
|
181
|
-
api === null || api === void 0 || (_api$
|
|
182
|
-
var tr =
|
|
162
|
+
api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
|
|
163
|
+
var tr = _ref4.tr;
|
|
183
164
|
if (startPos === undefined) {
|
|
184
165
|
return tr;
|
|
185
166
|
}
|
|
@@ -203,7 +184,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
203
184
|
view.focus();
|
|
204
185
|
}
|
|
205
186
|
}
|
|
206
|
-
}, [getPos, start, api === null || api === void 0 || (_api$
|
|
187
|
+
}, [getPos, start, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
|
|
207
188
|
useEffect(function () {
|
|
208
189
|
var element = buttonRef.current;
|
|
209
190
|
if (!element) {
|
|
@@ -217,11 +198,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
217
198
|
start: start
|
|
218
199
|
};
|
|
219
200
|
},
|
|
220
|
-
onGenerateDragPreview: function onGenerateDragPreview(
|
|
221
|
-
var nativeSetDragImage =
|
|
201
|
+
onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
|
|
202
|
+
var nativeSetDragImage = _ref5.nativeSetDragImage;
|
|
222
203
|
setCustomNativeDragPreview({
|
|
223
|
-
render: function render(
|
|
224
|
-
var container =
|
|
204
|
+
render: function render(_ref6) {
|
|
205
|
+
var container = _ref6.container;
|
|
225
206
|
var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
|
|
226
207
|
if (!dom) {
|
|
227
208
|
return;
|
|
@@ -232,13 +213,13 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
232
213
|
});
|
|
233
214
|
},
|
|
234
215
|
onDragStart: function onDragStart() {
|
|
235
|
-
var _api$
|
|
216
|
+
var _api$core7;
|
|
236
217
|
if (start === undefined) {
|
|
237
218
|
return;
|
|
238
219
|
}
|
|
239
|
-
api === null || api === void 0 || (_api$
|
|
220
|
+
api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref7) {
|
|
240
221
|
var _api$blockControls, _api$analytics3;
|
|
241
|
-
var tr =
|
|
222
|
+
var tr = _ref7.tr;
|
|
242
223
|
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
|
|
243
224
|
tr: tr
|
|
244
225
|
});
|
|
@@ -283,20 +264,14 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
283
264
|
}
|
|
284
265
|
}
|
|
285
266
|
if (supportsAnchor) {
|
|
286
|
-
return
|
|
267
|
+
return {
|
|
287
268
|
left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
|
|
288
269
|
top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
|
|
289
|
-
} : {
|
|
290
|
-
left: hasResizer || isExtension || isBlockCard || isEmbedCard ? getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType), "px)"),
|
|
291
|
-
top: fg('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
|
|
292
270
|
};
|
|
293
271
|
}
|
|
294
|
-
return
|
|
272
|
+
return {
|
|
295
273
|
left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
|
|
296
274
|
top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
|
|
297
|
-
} : {
|
|
298
|
-
left: getLeftPosition(dom, nodeType, innerContainer, macroInteractionUpdates),
|
|
299
|
-
top: fg('platform_editor_elements_dnd_ed_23674') ? getTopPosition(dom, nodeType) : getTopPosition(dom)
|
|
300
275
|
};
|
|
301
276
|
}, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
|
|
302
277
|
var _useState5 = useState({
|
|
@@ -372,7 +347,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
372
347
|
,
|
|
373
348
|
style: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
|
|
374
349
|
onClick: handleOnClick,
|
|
375
|
-
onMouseDown:
|
|
350
|
+
onMouseDown: handleMouseDown,
|
|
376
351
|
onKeyDown: handleKeyDown,
|
|
377
352
|
"data-testid": "block-ctrl-drag-handle"
|
|
378
353
|
}, jsx(DragHandlerIcon, {
|
|
@@ -13,10 +13,7 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
|
|
|
13
13
|
container.style.pointerEvents = 'none';
|
|
14
14
|
var parent = document.createElement('div');
|
|
15
15
|
// ProseMirror class is required to make sure the cloned dom is styled correctly
|
|
16
|
-
parent.classList.add('ProseMirror');
|
|
17
|
-
if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
|
|
18
|
-
parent.classList.add('block-ctrl-drag-preview');
|
|
19
|
-
}
|
|
16
|
+
parent.classList.add('ProseMirror', 'block-ctrl-drag-preview');
|
|
20
17
|
var embedCard = dom.querySelector('.embedCardView-content-wrap');
|
|
21
18
|
var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
|
|
22
19
|
if (fg('platform_editor_elements_drag_and_drop_ed_23189')) {
|
|
@@ -122,6 +122,6 @@ var getTextNodeStyle = function getTextNodeStyle() {
|
|
|
122
122
|
};
|
|
123
123
|
export var GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
124
124
|
return jsx(Global, {
|
|
125
|
-
styles: [globalStyles, fg('
|
|
125
|
+
styles: [globalStyles, fg('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
|
|
126
126
|
});
|
|
127
127
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
3
|
export var getSelection = function getSelection(tr, start) {
|
|
5
4
|
var node = tr.doc.nodeAt(start);
|
|
6
5
|
var isNodeSelection = node && NodeSelection.isSelectable(node);
|
|
@@ -16,7 +15,7 @@ export var getSelection = function getSelection(tr, start) {
|
|
|
16
15
|
} else if (
|
|
17
16
|
// Even though mediaGroup is not selectable,
|
|
18
17
|
// we need a quick way to make all child media nodes appear as selected without the need for a custom selection
|
|
19
|
-
(node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup'
|
|
18
|
+
(node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup') {
|
|
20
19
|
return new NodeSelection($startPos);
|
|
21
20
|
} else {
|
|
22
21
|
// To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
|
|
@@ -25,28 +24,16 @@ export var getSelection = function getSelection(tr, start) {
|
|
|
25
24
|
var foundInlineNode = false;
|
|
26
25
|
var inlineNodeEndPos = 0;
|
|
27
26
|
tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
|
|
28
|
-
if (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
foundInlineNode = true;
|
|
35
|
-
}
|
|
36
|
-
} else {
|
|
37
|
-
if (foundInlineNode) {
|
|
38
|
-
return false;
|
|
39
|
-
}
|
|
40
|
-
if (n.isInline) {
|
|
41
|
-
inlineNodePos = pos;
|
|
42
|
-
foundInlineNode = true;
|
|
43
|
-
return false;
|
|
44
|
-
}
|
|
27
|
+
if (n.isInline) {
|
|
28
|
+
inlineNodeEndPos = pos + n.nodeSize;
|
|
29
|
+
}
|
|
30
|
+
if (n.isInline && !foundInlineNode) {
|
|
31
|
+
inlineNodePos = pos;
|
|
32
|
+
foundInlineNode = true;
|
|
45
33
|
}
|
|
46
34
|
return true;
|
|
47
35
|
});
|
|
48
|
-
|
|
49
|
-
return new TextSelection(tr.doc.resolve(fg('platform.editor.elements.drag-and-drop-ed-23905') ? inlineNodeEndPos : start + nodeSize - inlineNodeDepth), tr.doc.resolve(inlineNodePos));
|
|
36
|
+
return new TextSelection(tr.doc.resolve(inlineNodeEndPos), tr.doc.resolve(inlineNodePos));
|
|
50
37
|
}
|
|
51
38
|
};
|
|
52
39
|
export var selectNode = function selectNode(tr, start, nodeType) {
|
|
@@ -12,10 +12,4 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
|
|
|
12
12
|
};
|
|
13
13
|
export declare const emptyParagraphNodeDecorations: () => Decoration;
|
|
14
14
|
export declare const nodeDecorations: (newState: EditorState) => Decoration[];
|
|
15
|
-
/**
|
|
16
|
-
* Setting up decorations around each node to track mousemove events into each node
|
|
17
|
-
* When a mouseenter event is triggered on the node, we will set the activeNode to the node
|
|
18
|
-
* And show the drag handle
|
|
19
|
-
*/
|
|
20
|
-
export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
|
|
21
15
|
export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;
|
|
@@ -2,19 +2,6 @@ import { type IntlShape } from 'react-intl-next';
|
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
6
5
|
import type { BlockControlsPlugin, PluginState } from '../types';
|
|
7
6
|
export declare const key: PluginKey<PluginState>;
|
|
8
|
-
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState
|
|
9
|
-
decorations: DecorationSet;
|
|
10
|
-
decorationState: import("../types").DecorationState;
|
|
11
|
-
activeNode: any;
|
|
12
|
-
isDragging: any;
|
|
13
|
-
isMenuOpen: boolean | undefined;
|
|
14
|
-
editorHeight: any;
|
|
15
|
-
editorWidthLeft: any;
|
|
16
|
-
editorWidthRight: any;
|
|
17
|
-
isResizerResizing: boolean;
|
|
18
|
-
isDocSizeLimitEnabled: boolean;
|
|
19
|
-
isPMDragging: any;
|
|
20
|
-
}>;
|
|
7
|
+
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState>;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -22,6 +22,10 @@ export interface PluginState {
|
|
|
22
22
|
handleOptions?: HandleOptions;
|
|
23
23
|
} | null;
|
|
24
24
|
isResizerResizing: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* @private
|
|
27
|
+
* @deprecated Doc size limits no longer supported
|
|
28
|
+
*/
|
|
25
29
|
isDocSizeLimitEnabled: boolean | null;
|
|
26
30
|
/**
|
|
27
31
|
* is dragging the node without using drag handle, i,e, native prosemirror DnD
|
|
@@ -12,10 +12,4 @@ export declare const dropTargetDecorations: (oldState: EditorState, newState: Ed
|
|
|
12
12
|
};
|
|
13
13
|
export declare const emptyParagraphNodeDecorations: () => Decoration;
|
|
14
14
|
export declare const nodeDecorations: (newState: EditorState) => Decoration[];
|
|
15
|
-
/**
|
|
16
|
-
* Setting up decorations around each node to track mousemove events into each node
|
|
17
|
-
* When a mouseenter event is triggered on the node, we will set the activeNode to the node
|
|
18
|
-
* And show the drag handle
|
|
19
|
-
*/
|
|
20
|
-
export declare const mouseMoveWrapperDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => Decoration[];
|
|
21
15
|
export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;
|
|
@@ -2,19 +2,6 @@ import { type IntlShape } from 'react-intl-next';
|
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
|
|
6
5
|
import type { BlockControlsPlugin, PluginState } from '../types';
|
|
7
6
|
export declare const key: PluginKey<PluginState>;
|
|
8
|
-
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState
|
|
9
|
-
decorations: DecorationSet;
|
|
10
|
-
decorationState: import("../types").DecorationState;
|
|
11
|
-
activeNode: any;
|
|
12
|
-
isDragging: any;
|
|
13
|
-
isMenuOpen: boolean | undefined;
|
|
14
|
-
editorHeight: any;
|
|
15
|
-
editorWidthLeft: any;
|
|
16
|
-
editorWidthRight: any;
|
|
17
|
-
isResizerResizing: boolean;
|
|
18
|
-
isDocSizeLimitEnabled: boolean;
|
|
19
|
-
isPMDragging: any;
|
|
20
|
-
}>;
|
|
7
|
+
export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape) => SafePlugin<PluginState>;
|
|
@@ -22,6 +22,10 @@ export interface PluginState {
|
|
|
22
22
|
handleOptions?: HandleOptions;
|
|
23
23
|
} | null;
|
|
24
24
|
isResizerResizing: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* @private
|
|
27
|
+
* @deprecated Doc size limits no longer supported
|
|
28
|
+
*/
|
|
25
29
|
isDocSizeLimitEnabled: boolean | null;
|
|
26
30
|
/**
|
|
27
31
|
* is dragging the node without using drag handle, i,e, native prosemirror DnD
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.5",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/adf-schema": "^40.3.0",
|
|
35
|
-
"@atlaskit/editor-common": "^87.
|
|
35
|
+
"@atlaskit/editor-common": "^87.4.0",
|
|
36
36
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.6.0",
|
|
38
38
|
"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
|
|
@@ -95,12 +95,6 @@
|
|
|
95
95
|
}
|
|
96
96
|
},
|
|
97
97
|
"platform-feature-flags": {
|
|
98
|
-
"platform.editor.elements.drag-and-drop-doc-size-limit_7k4vq": {
|
|
99
|
-
"type": "boolean"
|
|
100
|
-
},
|
|
101
|
-
"platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2": {
|
|
102
|
-
"type": "boolean"
|
|
103
|
-
},
|
|
104
98
|
"platform.editor.elements.drag-and-drop-long-node-scroll": {
|
|
105
99
|
"type": "boolean"
|
|
106
100
|
},
|
|
@@ -108,18 +102,12 @@
|
|
|
108
102
|
"type": "boolean",
|
|
109
103
|
"referenceOnly": true
|
|
110
104
|
},
|
|
111
|
-
"platform.editor.elements.drag-and-drop-ed-23892": {
|
|
112
|
-
"type": "boolean"
|
|
113
|
-
},
|
|
114
105
|
"platform_editor_elements_drag_and_drop_ed_24000": {
|
|
115
106
|
"type": "boolean"
|
|
116
107
|
},
|
|
117
108
|
"platform.editor.elements.drag-and-drop-ed-23816": {
|
|
118
109
|
"type": "boolean"
|
|
119
110
|
},
|
|
120
|
-
"platform.editor.elements.drag-and-drop-ed-23905": {
|
|
121
|
-
"type": "boolean"
|
|
122
|
-
},
|
|
123
111
|
"platform_editor_elements_drag_and_drop_ed_23189": {
|
|
124
112
|
"type": "boolean"
|
|
125
113
|
},
|
|
@@ -129,9 +117,6 @@
|
|
|
129
117
|
"platform_editor_element_drag_and_drop_ed_23873": {
|
|
130
118
|
"type": "boolean"
|
|
131
119
|
},
|
|
132
|
-
"platform_editor_element_drag_and_drop_ed_23842": {
|
|
133
|
-
"type": "boolean"
|
|
134
|
-
},
|
|
135
120
|
"platform_editor_elements_drag_and_drop_ed_23394": {
|
|
136
121
|
"type": "boolean"
|
|
137
122
|
},
|