@atlaskit/editor-plugin-block-controls 23.0.1 → 23.0.3
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 +17 -0
- package/dist/cjs/blockControlsPlugin.js +3 -4
- package/dist/cjs/pm-plugins/main.js +2 -20
- package/dist/cjs/pm-plugins/utils/selection.js +1 -30
- package/dist/cjs/ui/block-controls-surface-drag-handle.js +5 -21
- package/dist/cjs/ui/consts.js +1 -9
- package/dist/cjs/ui/drag-handle.js +15 -56
- package/dist/es2019/blockControlsPlugin.js +3 -4
- package/dist/es2019/pm-plugins/main.js +2 -22
- package/dist/es2019/pm-plugins/utils/selection.js +1 -30
- package/dist/es2019/ui/block-controls-surface-drag-handle.js +5 -21
- package/dist/es2019/ui/consts.js +0 -8
- package/dist/es2019/ui/drag-handle.js +5 -41
- package/dist/esm/blockControlsPlugin.js +3 -4
- package/dist/esm/pm-plugins/main.js +2 -20
- package/dist/esm/pm-plugins/utils/selection.js +1 -30
- package/dist/esm/ui/block-controls-surface-drag-handle.js +5 -21
- package/dist/esm/ui/consts.js +0 -8
- package/dist/esm/ui/drag-handle.js +16 -57
- package/dist/types/blockControlsPluginType.d.ts +0 -2
- package/dist/types/pm-plugins/main.d.ts +0 -2
- package/dist/types/pm-plugins/utils/selection.d.ts +2 -14
- package/dist/types/ui/consts.d.ts +0 -7
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 23.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`50c2251fcc095`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50c2251fcc095) -
|
|
8
|
+
Clean up feature gate `platform_editor_elements_dnd_shift_click_select`. The gate is removed as
|
|
9
|
+
`false`, so shift-click multi-select via the drag handle, the associated `isShiftDown` plugin
|
|
10
|
+
state, and the unused `expandSelectionHeadToNodeAtPos` / `alignAnchorHeadInDirectionOfPos` helpers
|
|
11
|
+
are removed.
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 23.0.2
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 23.0.1
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -458,7 +458,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
458
458
|
}
|
|
459
459
|
},
|
|
460
460
|
getSharedState: function getSharedState(editorState) {
|
|
461
|
-
var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$
|
|
461
|
+
var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$lastDra, _key$getState0, _interactionTrackingP, _key$getState$isSelec, _key$getState1, _selectionPreservatio;
|
|
462
462
|
if (!editorState) {
|
|
463
463
|
return undefined;
|
|
464
464
|
}
|
|
@@ -472,10 +472,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
472
472
|
isDragging: (_key$getState$isDragg = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
|
|
473
473
|
isPMDragging: (_key$getState$isPMDra = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
|
|
474
474
|
multiSelectDnD: (_key$getState$multiSe = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
|
|
475
|
-
|
|
476
|
-
lastDragCancelled: (_key$getState$lastDra = (_key$getState1 = _main.key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
|
|
475
|
+
lastDragCancelled: (_key$getState$lastDra = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
|
|
477
476
|
isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
|
|
478
|
-
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$
|
|
477
|
+
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState1 = _main.key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
|
|
479
478
|
};
|
|
480
479
|
if (registryBlockControlsEnabled) {
|
|
481
480
|
var surfaces = _sparseSurfaces.sparseSurfacesKey.getState(editorState);
|
|
@@ -241,7 +241,7 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
|
|
|
241
241
|
return nodeDecAtActivePos;
|
|
242
242
|
};
|
|
243
243
|
var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
|
|
244
|
-
var _meta$multiSelectDnD, _api$editorViewMode, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$
|
|
244
|
+
var _meta$multiSelectDnD, _api$editorViewMode, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$lastDragCancell;
|
|
245
245
|
var rightSideControlsEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
|
|
246
246
|
var quickInsertButtonEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : true;
|
|
247
247
|
var anchorRectCache = arguments.length > 10 ? arguments[10] : undefined;
|
|
@@ -262,7 +262,6 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
|
|
|
262
262
|
menuTriggerByNode = currentState.menuTriggerByNode,
|
|
263
263
|
blockMenuOptions = currentState.blockMenuOptions,
|
|
264
264
|
isPMDragging = currentState.isPMDragging,
|
|
265
|
-
isShiftDown = currentState.isShiftDown,
|
|
266
265
|
lastDragCancelled = currentState.lastDragCancelled,
|
|
267
266
|
isSelectedViaDragHandle = currentState.isSelectedViaDragHandle;
|
|
268
267
|
var isActiveNodeDeleted = false;
|
|
@@ -973,7 +972,6 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
|
|
|
973
972
|
isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
|
|
974
973
|
isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
|
|
975
974
|
multiSelectDnD: multiSelectDnD,
|
|
976
|
-
isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
|
|
977
975
|
lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
|
|
978
976
|
isSelectedViaDragHandle: isSelectedViaDragHandleNew
|
|
979
977
|
};
|
|
@@ -1216,29 +1214,13 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
|
|
|
1216
1214
|
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
|
|
1217
1215
|
}
|
|
1218
1216
|
}
|
|
1219
|
-
if (!event.repeat && event.shiftKey && (0, _fg.fg)('platform_editor_elements_dnd_shift_click_select')) {
|
|
1220
|
-
view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
|
|
1221
|
-
isShiftDown: true
|
|
1222
|
-
})));
|
|
1223
|
-
}
|
|
1224
1217
|
return false;
|
|
1225
1218
|
},
|
|
1226
|
-
|
|
1219
|
+
blur: function blur(view, event) {
|
|
1227
1220
|
var _api$limitedMode0;
|
|
1228
1221
|
if (api !== null && api !== void 0 && (_api$limitedMode0 = api.limitedMode) !== null && _api$limitedMode0 !== void 0 && (_api$limitedMode0 = _api$limitedMode0.sharedState.currentState()) !== null && _api$limitedMode0 !== void 0 && _api$limitedMode0.enabled) {
|
|
1229
1222
|
return;
|
|
1230
1223
|
}
|
|
1231
|
-
if (!event.repeat && event.key === 'Shift') {
|
|
1232
|
-
view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
|
|
1233
|
-
isShiftDown: false
|
|
1234
|
-
})));
|
|
1235
|
-
}
|
|
1236
|
-
},
|
|
1237
|
-
blur: function blur(view, event) {
|
|
1238
|
-
var _api$limitedMode1;
|
|
1239
|
-
if (api !== null && api !== void 0 && (_api$limitedMode1 = api.limitedMode) !== null && _api$limitedMode1 !== void 0 && (_api$limitedMode1 = _api$limitedMode1.sharedState.currentState()) !== null && _api$limitedMode1 !== void 0 && _api$limitedMode1.enabled) {
|
|
1240
|
-
return;
|
|
1241
|
-
}
|
|
1242
1224
|
if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
1243
1225
|
var _api$core2;
|
|
1244
1226
|
// Focus moving into the registry surface remains inside the editor experience.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.
|
|
6
|
+
exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.createPreservedSelection = exports.adjustSelectionBoundsForEdgePositions = void 0;
|
|
7
7
|
var _blockType = require("@atlaskit/editor-common/block-type");
|
|
8
8
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
9
9
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
@@ -54,35 +54,6 @@ var getSelectedSlicePosition = exports.getSelectedSlicePosition = function getSe
|
|
|
54
54
|
};
|
|
55
55
|
};
|
|
56
56
|
|
|
57
|
-
/**
|
|
58
|
-
* Takes a position and expands the selection to encompass the node at that position. Ignores empty or out of range selections.
|
|
59
|
-
* Ignores positions that are in text blocks (i.e. not start of a node)
|
|
60
|
-
* @returns TextSelection if expanded, otherwise returns Selection that was passed in.
|
|
61
|
-
*/
|
|
62
|
-
var expandSelectionHeadToNodeAtPos = exports.expandSelectionHeadToNodeAtPos = function expandSelectionHeadToNodeAtPos(selection, nodePos) {
|
|
63
|
-
var doc = selection.$anchor.doc;
|
|
64
|
-
if (nodePos < 0 || nodePos > doc.nodeSize - 2 || selection.empty) {
|
|
65
|
-
return selection;
|
|
66
|
-
}
|
|
67
|
-
var $pos = doc.resolve(nodePos);
|
|
68
|
-
var node = $pos.nodeAfter;
|
|
69
|
-
if ($pos.node().isTextblock || !node) {
|
|
70
|
-
return selection;
|
|
71
|
-
}
|
|
72
|
-
var $newHead = nodePos < selection.anchor ? $pos : doc.resolve(node.nodeSize + nodePos);
|
|
73
|
-
var textSelection = new _state.TextSelection(selection.$anchor, $newHead);
|
|
74
|
-
return textSelection;
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* This swaps the anchor/head for NodeSelections when its anchor > pos.
|
|
79
|
-
* This is because NodeSelection always has an anchor at the start of the node,
|
|
80
|
-
* which may not align with the existing selection.
|
|
81
|
-
*/
|
|
82
|
-
var alignAnchorHeadInDirectionOfPos = exports.alignAnchorHeadInDirectionOfPos = function alignAnchorHeadInDirectionOfPos(selection, pos) {
|
|
83
|
-
return selection instanceof _state.NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new _state.TextSelection(selection.$head, selection.$anchor) : selection;
|
|
84
|
-
};
|
|
85
|
-
|
|
86
57
|
/**
|
|
87
58
|
* This maps a preserved selection through a transaction, expanding text selections to block boundaries.
|
|
88
59
|
*
|
|
@@ -30,7 +30,6 @@ var _collapsedHeading = require("../pm-plugins/utils/collapsed-heading");
|
|
|
30
30
|
var _expandAndUpdateSelection = require("../pm-plugins/utils/expand-and-update-selection");
|
|
31
31
|
var _getSelection = require("../pm-plugins/utils/getSelection");
|
|
32
32
|
var _blockControlsSurfaceDragHandleUtils = require("./block-controls-surface-drag-handle-utils");
|
|
33
|
-
var _consts = require("./consts");
|
|
34
33
|
var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
|
|
35
34
|
var _shouldUseNestedDragHandleIcon = require("./should-use-nested-drag-handle-icon");
|
|
36
35
|
var _surfaceEditorViewContext = require("./surface-editor-view-context");
|
|
@@ -88,19 +87,17 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
88
87
|
return posRef.current;
|
|
89
88
|
}, []);
|
|
90
89
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'interaction', 'selection'], function (states) {
|
|
91
|
-
var _states$blockControls, _states$blockControls2, _states$interactionSt, _states$
|
|
90
|
+
var _states$blockControls, _states$blockControls2, _states$interactionSt, _states$selectionStat;
|
|
92
91
|
return {
|
|
93
92
|
activeNodeAnchorName: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 || (_states$blockControls = _states$blockControls.activeNode) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.anchorName,
|
|
94
93
|
handleOptions: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 || (_states$blockControls2 = _states$blockControls2.activeNode) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.handleOptions,
|
|
95
94
|
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
96
|
-
isShiftDown: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isShiftDown,
|
|
97
95
|
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
98
96
|
};
|
|
99
97
|
}),
|
|
100
98
|
activeNodeAnchorName = _useSharedPluginState.activeNodeAnchorName,
|
|
101
99
|
handleOptions = _useSharedPluginState.handleOptions,
|
|
102
100
|
interactionState = _useSharedPluginState.interactionState,
|
|
103
|
-
isShiftDown = _useSharedPluginState.isShiftDown,
|
|
104
101
|
selection = _useSharedPluginState.selection;
|
|
105
102
|
var _useState = (0, _react.useState)(false),
|
|
106
103
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -111,21 +108,9 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
111
108
|
}, [pos, selection, view]);
|
|
112
109
|
var isLayoutColumn = nodeType === 'layoutColumn';
|
|
113
110
|
var isTopLevelNode = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.parentType) === 'doc';
|
|
114
|
-
var isDisabled = (0, _react.useMemo)(function () {
|
|
115
|
-
var _api$blockControls$sh;
|
|
116
|
-
if (!isShiftDown || !view || view.state.selection.empty || !(0, _fg.fg)('platform_editor_elements_dnd_shift_click_select')) {
|
|
117
|
-
return false;
|
|
118
|
-
}
|
|
119
|
-
if (isLayoutColumn && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
120
|
-
return false;
|
|
121
|
-
}
|
|
122
|
-
var multiSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
123
|
-
var $anchor = (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.anchor) !== undefined ? view.state.doc.resolve(multiSelect.anchor) : view.state.selection.$anchor;
|
|
124
|
-
return !isTopLevelNode || $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
|
|
125
|
-
}, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
|
|
126
111
|
var getAnchorName = (0, _react.useCallback)(function () {
|
|
127
|
-
var _api$blockControls$
|
|
128
|
-
var surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 || (_api$blockControls$
|
|
112
|
+
var _api$blockControls$sh, _ref2, _ref3, _dom$getAttribute, _dom$closest;
|
|
113
|
+
var surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 || (_api$blockControls$sh = _api$blockControls$sh.surfaceAnchors) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.get(posRef.current);
|
|
129
114
|
if (surfaceAnchor) {
|
|
130
115
|
return surfaceAnchor;
|
|
131
116
|
}
|
|
@@ -193,7 +178,7 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
193
178
|
}, [api]);
|
|
194
179
|
var handleClick = (0, _react.useCallback)(function (event) {
|
|
195
180
|
var _api$core2;
|
|
196
|
-
if (!view
|
|
181
|
+
if (!view) {
|
|
197
182
|
return;
|
|
198
183
|
}
|
|
199
184
|
var openedViaKeyboard = event.detail === 0;
|
|
@@ -253,7 +238,7 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
253
238
|
return tr;
|
|
254
239
|
});
|
|
255
240
|
view.focus();
|
|
256
|
-
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos,
|
|
241
|
+
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos, nodeType, view]);
|
|
257
242
|
var label = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
|
|
258
243
|
br: ' '
|
|
259
244
|
});
|
|
@@ -281,7 +266,6 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
281
266
|
ref: buttonRef,
|
|
282
267
|
type: "button",
|
|
283
268
|
"aria-label": label,
|
|
284
|
-
disabled: isDisabled,
|
|
285
269
|
onClick: handleClick,
|
|
286
270
|
onMouseDown: handleMouseDown
|
|
287
271
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop -- Pragmatic DnD owns this native drag source.
|
package/dist/cjs/ui/consts.js
CHANGED
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.
|
|
7
|
+
exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
@@ -47,14 +47,6 @@ var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_LAYOUT_SECTI
|
|
|
47
47
|
var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
|
|
48
48
|
var DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
|
|
49
49
|
var DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
|
|
50
|
-
|
|
51
|
-
/** We only want to shift-select nodes that are at the top level of a document.
|
|
52
|
-
* This is because funky things happen when selecting inside of tableCells, but we
|
|
53
|
-
* also want to avoid heavily nested cases to descope potential corner cases.
|
|
54
|
-
* Various top level nodes have their selection 'from' at depths other than 0,
|
|
55
|
-
* so we allow for some leniency to capture them all. e.g. Table is depth 3.
|
|
56
|
-
*/
|
|
57
|
-
var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
|
|
58
50
|
var STICKY_CONTROLS_TOP_MARGIN = exports.STICKY_CONTROLS_TOP_MARGIN = 8;
|
|
59
51
|
var STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
|
|
60
52
|
var QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_HEIGHT = 24;
|
|
@@ -353,7 +353,6 @@ var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
|
|
|
353
353
|
return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
|
|
354
354
|
};
|
|
355
355
|
var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
356
|
-
var _api$blockControls7;
|
|
357
356
|
var view = _ref2.view,
|
|
358
357
|
api = _ref2.api,
|
|
359
358
|
formatMessage = _ref2.formatMessage,
|
|
@@ -368,41 +367,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
368
367
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
369
368
|
dragHandleSelected = _useState2[0],
|
|
370
369
|
setDragHandleSelected = _useState2[1];
|
|
371
|
-
var _useState3 = (0, _react.useState)(
|
|
370
|
+
var _useState3 = (0, _react.useState)(768),
|
|
372
371
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
var _useState5 = (0, _react.useState)(
|
|
376
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
377
|
-
blockCardWidth = _useState6[0],
|
|
378
|
-
setBlockCardWidth = _useState6[1];
|
|
379
|
-
var _useState7 = (0, _react.useState)({
|
|
372
|
+
blockCardWidth = _useState4[0],
|
|
373
|
+
setBlockCardWidth = _useState4[1];
|
|
374
|
+
var _useState5 = (0, _react.useState)({
|
|
380
375
|
display: 'none'
|
|
381
376
|
}),
|
|
382
|
-
|
|
383
|
-
positionStylesOld =
|
|
384
|
-
setPositionStylesOld =
|
|
377
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
378
|
+
positionStylesOld = _useState6[0],
|
|
379
|
+
setPositionStylesOld = _useState6[1];
|
|
385
380
|
// Tracks whether the initial position calculation has been performed at least once.
|
|
386
381
|
// The reliable-anchor early-return optimisation must not fire before the first calculation,
|
|
387
382
|
// otherwise positionStylesOld stays as { display: 'none' } and the handle is never shown.
|
|
388
383
|
var hasCalculatedInitialPosition = (0, _react.useRef)(false);
|
|
389
|
-
var
|
|
390
|
-
|
|
391
|
-
isFocused =
|
|
392
|
-
setIsFocused =
|
|
384
|
+
var _useState7 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
|
|
385
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
386
|
+
isFocused = _useState8[0],
|
|
387
|
+
setIsFocused = _useState8[1];
|
|
393
388
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags', 'selection', 'blockControls', 'interaction', 'userIntent'], function (states) {
|
|
394
|
-
var _states$featureFlagsS, _states$selectionStat, _states$
|
|
389
|
+
var _states$featureFlagsS, _states$selectionStat, _states$interactionSt, _states$userIntentSta;
|
|
395
390
|
return {
|
|
396
391
|
macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates,
|
|
397
392
|
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
|
|
398
|
-
isShiftDown: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isShiftDown,
|
|
399
393
|
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
400
394
|
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
|
|
401
395
|
};
|
|
402
396
|
}),
|
|
403
397
|
macroInteractionUpdates = _useSharedPluginState.macroInteractionUpdates,
|
|
404
398
|
selection = _useSharedPluginState.selection,
|
|
405
|
-
isShiftDown = _useSharedPluginState.isShiftDown,
|
|
406
399
|
interactionState = _useSharedPluginState.interactionState,
|
|
407
400
|
currentUserIntent = _useSharedPluginState.currentUserIntent;
|
|
408
401
|
var start = getPos();
|
|
@@ -953,20 +946,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
953
946
|
}
|
|
954
947
|
setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
|
|
955
948
|
}, [start, selection, view]);
|
|
956
|
-
(0, _react.useEffect)(function () {
|
|
957
|
-
var _api$blockControls$sh3;
|
|
958
|
-
if (isShiftDown === undefined || view.state.selection.empty || !(0, _fg.fg)('platform_editor_elements_dnd_shift_click_select')) {
|
|
959
|
-
return;
|
|
960
|
-
}
|
|
961
|
-
var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
|
|
962
|
-
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
|
|
963
|
-
var isLayoutColumnMenuEnabled = (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true);
|
|
964
|
-
if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
|
|
965
|
-
setDragHandleDisabled(true);
|
|
966
|
-
} else {
|
|
967
|
-
setDragHandleDisabled(false);
|
|
968
|
-
}
|
|
969
|
-
}, [api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
|
|
970
949
|
var dragHandleMessage = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
|
|
971
950
|
br: (0, _react2.jsx)("br", null)
|
|
972
951
|
});
|
|
@@ -1068,7 +1047,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
1068
1047
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
|
|
1069
1048
|
,
|
|
1070
1049
|
onDrop: handleOnDrop,
|
|
1071
|
-
disabled: dragHandleDisabled,
|
|
1072
1050
|
"data-editor-block-ctrl-drag-handle": true,
|
|
1073
1051
|
"data-blocks-drag-handle": (0, _fg.fg)('confluence_remix_button_right_side_block_fg') || undefined,
|
|
1074
1052
|
"data-testid": "block-ctrl-drag-handle",
|
|
@@ -1135,22 +1113,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
1135
1113
|
css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && buttonWrapperStylesNoBackground, buttonWrapperStylesPatch]
|
|
1136
1114
|
}, renderButton()))));
|
|
1137
1115
|
};
|
|
1138
|
-
var stickyWithoutTooltip = function stickyWithoutTooltip() {
|
|
1139
|
-
return (0, _react2.jsx)(_primitives.Box
|
|
1140
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
1141
|
-
, {
|
|
1142
|
-
style: positionStylesOld
|
|
1143
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
1144
|
-
,
|
|
1145
|
-
xcss: [dragHandleContainerStyles],
|
|
1146
|
-
as: "span",
|
|
1147
|
-
testId: "block-ctrl-drag-handle-container"
|
|
1148
|
-
}, (0, _react2.jsx)("span", {
|
|
1149
|
-
css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
|
|
1150
|
-
}, (0, _react2.jsx)("span", {
|
|
1151
|
-
css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && buttonWrapperStylesNoBackground, buttonWrapperStylesPatch]
|
|
1152
|
-
}, renderButton())));
|
|
1153
|
-
};
|
|
1154
1116
|
var buttonWithTooltip = function buttonWithTooltip() {
|
|
1155
1117
|
return (0, _react2.jsx)(_Tooltip.default, {
|
|
1156
1118
|
content: tooltipContent,
|
|
@@ -1168,10 +1130,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
1168
1130
|
var tooltipContent = isLayoutColumn && (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
|
|
1169
1131
|
helpDescriptors: helpDescriptors
|
|
1170
1132
|
});
|
|
1171
|
-
|
|
1172
|
-
var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
|
|
1173
|
-
var render = isTooltip ? buttonWithTooltip() : renderButton();
|
|
1174
|
-
return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
|
|
1133
|
+
return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? stickyWithTooltip() : buttonWithTooltip();
|
|
1175
1134
|
};
|
|
1176
1135
|
var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
|
|
1177
1136
|
var view = _ref0.view,
|
|
@@ -1184,9 +1143,9 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
|
|
|
1184
1143
|
isTopLevelNode = _ref0.isTopLevelNode,
|
|
1185
1144
|
anchorRectCache = _ref0.anchorRectCache;
|
|
1186
1145
|
var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
|
|
1187
|
-
var _states$
|
|
1146
|
+
var _states$blockControls, _states$blockControls2;
|
|
1188
1147
|
return {
|
|
1189
|
-
rightSideControlsEnabled: (_states$
|
|
1148
|
+
rightSideControlsEnabled: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.rightSideControlsEnabled) !== null && _states$blockControls !== void 0 ? _states$blockControls : false
|
|
1190
1149
|
};
|
|
1191
1150
|
}).rightSideControlsEnabled;
|
|
1192
1151
|
// Layout column drag handles sit at the top-centre of each column, not on a left/right edge.
|
|
@@ -448,7 +448,7 @@ export const blockControlsPlugin = ({
|
|
|
448
448
|
stopPreservingSelection: () => stopPreservingSelection
|
|
449
449
|
},
|
|
450
450
|
getSharedState(editorState) {
|
|
451
|
-
var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$
|
|
451
|
+
var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$lastDra, _key$getState0, _interactionTrackingP, _key$getState$isSelec, _key$getState1, _selectionPreservatio;
|
|
452
452
|
if (!editorState) {
|
|
453
453
|
return undefined;
|
|
454
454
|
}
|
|
@@ -462,10 +462,9 @@ export const blockControlsPlugin = ({
|
|
|
462
462
|
isDragging: (_key$getState$isDragg = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
|
|
463
463
|
isPMDragging: (_key$getState$isPMDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
|
|
464
464
|
multiSelectDnD: (_key$getState$multiSe = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
|
|
465
|
-
|
|
466
|
-
lastDragCancelled: (_key$getState$lastDra = (_key$getState1 = key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
|
|
465
|
+
lastDragCancelled: (_key$getState$lastDra = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
|
|
467
466
|
isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
|
|
468
|
-
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$
|
|
467
|
+
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState1 = key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
|
|
469
468
|
};
|
|
470
469
|
if (registryBlockControlsEnabled) {
|
|
471
470
|
const surfaces = sparseSurfacesKey.getState(editorState);
|
|
@@ -233,7 +233,7 @@ const getDecorationAtPos = (state, decorations, pos, to) => {
|
|
|
233
233
|
return nodeDecAtActivePos;
|
|
234
234
|
};
|
|
235
235
|
export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, anchorRectCache, resizeObserverWidth, pragmaticCleanup, limitedModeTeardown) => {
|
|
236
|
-
var _meta$multiSelectDnD, _api$editorViewMode, _api$editorViewMode$s, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$
|
|
236
|
+
var _meta$multiSelectDnD, _api$editorViewMode, _api$editorViewMode$s, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$lastDragCancell;
|
|
237
237
|
let {
|
|
238
238
|
activeNode,
|
|
239
239
|
decorations,
|
|
@@ -253,7 +253,6 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
|
|
|
253
253
|
menuTriggerByNode,
|
|
254
254
|
blockMenuOptions,
|
|
255
255
|
isPMDragging,
|
|
256
|
-
isShiftDown,
|
|
257
256
|
lastDragCancelled,
|
|
258
257
|
isSelectedViaDragHandle
|
|
259
258
|
} = currentState;
|
|
@@ -877,7 +876,6 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
|
|
|
877
876
|
isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
|
|
878
877
|
isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
|
|
879
878
|
multiSelectDnD,
|
|
880
|
-
isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
|
|
881
879
|
lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
|
|
882
880
|
isSelectedViaDragHandle: isSelectedViaDragHandleNew
|
|
883
881
|
};
|
|
@@ -1124,31 +1122,13 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
|
|
|
1124
1122
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
|
|
1125
1123
|
}
|
|
1126
1124
|
}
|
|
1127
|
-
if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
1128
|
-
view.dispatch(view.state.tr.setMeta(key, {
|
|
1129
|
-
...view.state.tr.getMeta(key),
|
|
1130
|
-
isShiftDown: true
|
|
1131
|
-
}));
|
|
1132
|
-
}
|
|
1133
1125
|
return false;
|
|
1134
1126
|
},
|
|
1135
|
-
|
|
1127
|
+
blur(view, event) {
|
|
1136
1128
|
var _api$limitedMode0, _api$limitedMode0$sha;
|
|
1137
1129
|
if (api !== null && api !== void 0 && (_api$limitedMode0 = api.limitedMode) !== null && _api$limitedMode0 !== void 0 && (_api$limitedMode0$sha = _api$limitedMode0.sharedState.currentState()) !== null && _api$limitedMode0$sha !== void 0 && _api$limitedMode0$sha.enabled) {
|
|
1138
1130
|
return;
|
|
1139
1131
|
}
|
|
1140
|
-
if (!event.repeat && event.key === 'Shift') {
|
|
1141
|
-
view.dispatch(view.state.tr.setMeta(key, {
|
|
1142
|
-
...view.state.tr.getMeta(key),
|
|
1143
|
-
isShiftDown: false
|
|
1144
|
-
}));
|
|
1145
|
-
}
|
|
1146
|
-
},
|
|
1147
|
-
blur(view, event) {
|
|
1148
|
-
var _api$limitedMode1, _api$limitedMode1$sha;
|
|
1149
|
-
if (api !== null && api !== void 0 && (_api$limitedMode1 = api.limitedMode) !== null && _api$limitedMode1 !== void 0 && (_api$limitedMode1$sha = _api$limitedMode1.sharedState.currentState()) !== null && _api$limitedMode1$sha !== void 0 && _api$limitedMode1$sha.enabled) {
|
|
1150
|
-
return;
|
|
1151
|
-
}
|
|
1152
1132
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
1153
1133
|
var _api$core2;
|
|
1154
1134
|
// Focus moving into the registry surface remains inside the editor experience.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { INSERTED_TRAILING_PARAGRAPH_TO_LAST_NODE_META } from '@atlaskit/editor-common/block-type';
|
|
2
2
|
import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
|
|
3
|
-
import {
|
|
3
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { getTableSelectionClosesToPos } from '@atlaskit/editor-tables/utils';
|
|
5
5
|
import { getBlockControlsMeta, key } from '../main';
|
|
6
6
|
import { newGetSelection } from './getSelection';
|
|
@@ -49,35 +49,6 @@ export const getSelectedSlicePosition = (handlePos, tr, api) => {
|
|
|
49
49
|
};
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
/**
|
|
53
|
-
* Takes a position and expands the selection to encompass the node at that position. Ignores empty or out of range selections.
|
|
54
|
-
* Ignores positions that are in text blocks (i.e. not start of a node)
|
|
55
|
-
* @returns TextSelection if expanded, otherwise returns Selection that was passed in.
|
|
56
|
-
*/
|
|
57
|
-
export const expandSelectionHeadToNodeAtPos = (selection, nodePos) => {
|
|
58
|
-
const doc = selection.$anchor.doc;
|
|
59
|
-
if (nodePos < 0 || nodePos > doc.nodeSize - 2 || selection.empty) {
|
|
60
|
-
return selection;
|
|
61
|
-
}
|
|
62
|
-
const $pos = doc.resolve(nodePos);
|
|
63
|
-
const node = $pos.nodeAfter;
|
|
64
|
-
if ($pos.node().isTextblock || !node) {
|
|
65
|
-
return selection;
|
|
66
|
-
}
|
|
67
|
-
const $newHead = nodePos < selection.anchor ? $pos : doc.resolve(node.nodeSize + nodePos);
|
|
68
|
-
const textSelection = new TextSelection(selection.$anchor, $newHead);
|
|
69
|
-
return textSelection;
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* This swaps the anchor/head for NodeSelections when its anchor > pos.
|
|
74
|
-
* This is because NodeSelection always has an anchor at the start of the node,
|
|
75
|
-
* which may not align with the existing selection.
|
|
76
|
-
*/
|
|
77
|
-
export const alignAnchorHeadInDirectionOfPos = (selection, pos) => {
|
|
78
|
-
return selection instanceof NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new TextSelection(selection.$head, selection.$anchor) : selection;
|
|
79
|
-
};
|
|
80
|
-
|
|
81
52
|
/**
|
|
82
53
|
* This maps a preserved selection through a transaction, expanding text selections to block boundaries.
|
|
83
54
|
*
|
|
@@ -24,7 +24,6 @@ import { prepareCollapsedHeadingSelection } from '../pm-plugins/utils/collapsed-
|
|
|
24
24
|
import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
|
|
25
25
|
import { isHandleCorrelatedToSelection } from '../pm-plugins/utils/getSelection';
|
|
26
26
|
import { buildLayoutColumnMenuMeta } from './block-controls-surface-drag-handle-utils';
|
|
27
|
-
import { DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH } from './consts';
|
|
28
27
|
import { DragHandleNestedIcon } from './drag-handle-nested-icon';
|
|
29
28
|
import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
|
|
30
29
|
import { useSurfaceEditorView } from './surface-editor-view-context';
|
|
@@ -84,15 +83,13 @@ export const BlockControlsSurfaceDragHandle = ({
|
|
|
84
83
|
activeNodeAnchorName,
|
|
85
84
|
handleOptions,
|
|
86
85
|
interactionState,
|
|
87
|
-
isShiftDown,
|
|
88
86
|
selection
|
|
89
87
|
} = useSharedPluginStateWithSelector(api, ['blockControls', 'interaction', 'selection'], states => {
|
|
90
|
-
var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$interactionSt, _states$
|
|
88
|
+
var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$interactionSt, _states$selectionStat;
|
|
91
89
|
return {
|
|
92
90
|
activeNodeAnchorName: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : (_states$blockControls2 = _states$blockControls.activeNode) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.anchorName,
|
|
93
91
|
handleOptions: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : (_states$blockControls4 = _states$blockControls3.activeNode) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.handleOptions,
|
|
94
92
|
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
95
|
-
isShiftDown: (_states$blockControls5 = states.blockControlsState) === null || _states$blockControls5 === void 0 ? void 0 : _states$blockControls5.isShiftDown,
|
|
96
93
|
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
97
94
|
};
|
|
98
95
|
});
|
|
@@ -102,21 +99,9 @@ export const BlockControlsSurfaceDragHandle = ({
|
|
|
102
99
|
}, [pos, selection, view]);
|
|
103
100
|
const isLayoutColumn = nodeType === 'layoutColumn';
|
|
104
101
|
const isTopLevelNode = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.parentType) === 'doc';
|
|
105
|
-
const isDisabled = useMemo(() => {
|
|
106
|
-
var _api$blockControls$sh;
|
|
107
|
-
if (!isShiftDown || !view || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
108
|
-
return false;
|
|
109
|
-
}
|
|
110
|
-
if (isLayoutColumn && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
111
|
-
return false;
|
|
112
|
-
}
|
|
113
|
-
const multiSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
114
|
-
const $anchor = (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.anchor) !== undefined ? view.state.doc.resolve(multiSelect.anchor) : view.state.selection.$anchor;
|
|
115
|
-
return !isTopLevelNode || $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
|
|
116
|
-
}, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
|
|
117
102
|
const getAnchorName = useCallback(() => {
|
|
118
|
-
var _api$blockControls$
|
|
119
|
-
const surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 ? void 0 : (_api$blockControls$
|
|
103
|
+
var _api$blockControls$sh, _api$blockControls$sh2, _ref, _ref2, _dom$getAttribute, _dom$closest;
|
|
104
|
+
const surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : (_api$blockControls$sh2 = _api$blockControls$sh.surfaceAnchors) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.get(posRef.current);
|
|
120
105
|
if (surfaceAnchor) {
|
|
121
106
|
return surfaceAnchor;
|
|
122
107
|
}
|
|
@@ -182,7 +167,7 @@ export const BlockControlsSurfaceDragHandle = ({
|
|
|
182
167
|
}, [api]);
|
|
183
168
|
const handleClick = useCallback(event => {
|
|
184
169
|
var _api$core2;
|
|
185
|
-
if (!view
|
|
170
|
+
if (!view) {
|
|
186
171
|
return;
|
|
187
172
|
}
|
|
188
173
|
const openedViaKeyboard = event.detail === 0;
|
|
@@ -243,7 +228,7 @@ export const BlockControlsSurfaceDragHandle = ({
|
|
|
243
228
|
return tr;
|
|
244
229
|
});
|
|
245
230
|
view.focus();
|
|
246
|
-
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos,
|
|
231
|
+
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos, nodeType, view]);
|
|
247
232
|
const label = formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
|
|
248
233
|
br: ' '
|
|
249
234
|
});
|
|
@@ -269,7 +254,6 @@ export const BlockControlsSurfaceDragHandle = ({
|
|
|
269
254
|
ref: buttonRef,
|
|
270
255
|
type: "button",
|
|
271
256
|
"aria-label": label,
|
|
272
|
-
disabled: isDisabled,
|
|
273
257
|
onClick: handleClick,
|
|
274
258
|
onMouseDown: handleMouseDown
|
|
275
259
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop -- Pragmatic DnD owns this native drag source.
|
package/dist/es2019/ui/consts.js
CHANGED
|
@@ -35,14 +35,6 @@ export const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
|
|
|
35
35
|
export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
|
|
36
36
|
export const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
|
|
37
37
|
export const DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
|
|
38
|
-
|
|
39
|
-
/** We only want to shift-select nodes that are at the top level of a document.
|
|
40
|
-
* This is because funky things happen when selecting inside of tableCells, but we
|
|
41
|
-
* also want to avoid heavily nested cases to descope potential corner cases.
|
|
42
|
-
* Various top level nodes have their selection 'from' at depths other than 0,
|
|
43
|
-
* so we allow for some leniency to capture them all. e.g. Table is depth 3.
|
|
44
|
-
*/
|
|
45
|
-
export const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
|
|
46
38
|
export const STICKY_CONTROLS_TOP_MARGIN = 8;
|
|
47
39
|
export const STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
|
|
48
40
|
export const QUICK_INSERT_HEIGHT = 24;
|
|
@@ -34,7 +34,7 @@ import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics
|
|
|
34
34
|
import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
|
|
35
35
|
import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
|
|
36
36
|
import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
|
|
37
|
-
import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT,
|
|
37
|
+
import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
|
|
38
38
|
import { DragHandleNestedIcon } from './drag-handle-nested-icon';
|
|
39
39
|
import { dragPreview } from './drag-preview';
|
|
40
40
|
import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
|
|
@@ -355,11 +355,9 @@ export const DragHandle = ({
|
|
|
355
355
|
handleOptions,
|
|
356
356
|
anchorRectCache
|
|
357
357
|
}) => {
|
|
358
|
-
var _api$blockControls7;
|
|
359
358
|
const buttonRef = useRef(null);
|
|
360
359
|
const mouseDownRef = useRef(false);
|
|
361
360
|
const [dragHandleSelected, setDragHandleSelected] = useState(false);
|
|
362
|
-
const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
|
|
363
361
|
const [blockCardWidth, setBlockCardWidth] = useState(768);
|
|
364
362
|
const [positionStylesOld, setPositionStylesOld] = useState({
|
|
365
363
|
display: 'none'
|
|
@@ -372,15 +370,13 @@ export const DragHandle = ({
|
|
|
372
370
|
const {
|
|
373
371
|
macroInteractionUpdates,
|
|
374
372
|
selection,
|
|
375
|
-
isShiftDown,
|
|
376
373
|
interactionState,
|
|
377
374
|
currentUserIntent
|
|
378
375
|
} = useSharedPluginStateWithSelector(api, ['featureFlags', 'selection', 'blockControls', 'interaction', 'userIntent'], states => {
|
|
379
|
-
var _states$featureFlagsS, _states$selectionStat, _states$
|
|
376
|
+
var _states$featureFlagsS, _states$selectionStat, _states$interactionSt, _states$userIntentSta;
|
|
380
377
|
return {
|
|
381
378
|
macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates,
|
|
382
379
|
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
|
|
383
|
-
isShiftDown: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isShiftDown,
|
|
384
380
|
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
385
381
|
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
|
|
386
382
|
};
|
|
@@ -935,20 +931,6 @@ export const DragHandle = ({
|
|
|
935
931
|
}
|
|
936
932
|
setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
|
|
937
933
|
}, [start, selection, view]);
|
|
938
|
-
useEffect(() => {
|
|
939
|
-
var _api$blockControls$sh3;
|
|
940
|
-
if (isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
941
|
-
return;
|
|
942
|
-
}
|
|
943
|
-
const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
|
|
944
|
-
const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
|
|
945
|
-
const isLayoutColumnMenuEnabled = expValEquals('platform_editor_layout_column_menu', 'isEnabled', true);
|
|
946
|
-
if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
|
|
947
|
-
setDragHandleDisabled(true);
|
|
948
|
-
} else {
|
|
949
|
-
setDragHandleDisabled(false);
|
|
950
|
-
}
|
|
951
|
-
}, [api === null || api === void 0 ? void 0 : (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
|
|
952
934
|
const dragHandleMessage = formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
|
|
953
935
|
br: jsx("br", null)
|
|
954
936
|
});
|
|
@@ -1049,7 +1031,6 @@ export const DragHandle = ({
|
|
|
1049
1031
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
|
|
1050
1032
|
,
|
|
1051
1033
|
onDrop: handleOnDrop,
|
|
1052
|
-
disabled: dragHandleDisabled,
|
|
1053
1034
|
"data-editor-block-ctrl-drag-handle": true,
|
|
1054
1035
|
"data-blocks-drag-handle": fg('confluence_remix_button_right_side_block_fg') || undefined,
|
|
1055
1036
|
"data-testid": "block-ctrl-drag-handle",
|
|
@@ -1113,20 +1094,6 @@ export const DragHandle = ({
|
|
|
1113
1094
|
}, jsx("span", {
|
|
1114
1095
|
css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStylesNoBackground, buttonWrapperStylesPatch]
|
|
1115
1096
|
}, renderButton()))));
|
|
1116
|
-
const stickyWithoutTooltip = () => jsx(Box
|
|
1117
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
1118
|
-
, {
|
|
1119
|
-
style: positionStylesOld
|
|
1120
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
1121
|
-
,
|
|
1122
|
-
xcss: [dragHandleContainerStyles],
|
|
1123
|
-
as: "span",
|
|
1124
|
-
testId: "block-ctrl-drag-handle-container"
|
|
1125
|
-
}, jsx("span", {
|
|
1126
|
-
css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
|
|
1127
|
-
}, jsx("span", {
|
|
1128
|
-
css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStylesNoBackground, buttonWrapperStylesPatch]
|
|
1129
|
-
}, renderButton())));
|
|
1130
1097
|
const buttonWithTooltip = () => jsx(Tooltip, {
|
|
1131
1098
|
content: tooltipContent,
|
|
1132
1099
|
ignoreTooltipPointerEvents: true
|
|
@@ -1142,10 +1109,7 @@ export const DragHandle = ({
|
|
|
1142
1109
|
const tooltipContent = isLayoutColumn && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : jsx(TooltipContentWithMultipleShortcuts, {
|
|
1143
1110
|
helpDescriptors: helpDescriptors
|
|
1144
1111
|
});
|
|
1145
|
-
|
|
1146
|
-
const stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
|
|
1147
|
-
const render = isTooltip ? buttonWithTooltip() : renderButton();
|
|
1148
|
-
return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
|
|
1112
|
+
return editorExperiment('platform_editor_controls', 'variant1') ? stickyWithTooltip() : buttonWithTooltip();
|
|
1149
1113
|
};
|
|
1150
1114
|
export const DragHandleWithVisibility = ({
|
|
1151
1115
|
view,
|
|
@@ -1159,9 +1123,9 @@ export const DragHandleWithVisibility = ({
|
|
|
1159
1123
|
anchorRectCache
|
|
1160
1124
|
}) => {
|
|
1161
1125
|
const rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
|
|
1162
|
-
var _states$
|
|
1126
|
+
var _states$blockControls, _states$blockControls2;
|
|
1163
1127
|
return {
|
|
1164
|
-
rightSideControlsEnabled: (_states$
|
|
1128
|
+
rightSideControlsEnabled: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.rightSideControlsEnabled) !== null && _states$blockControls !== void 0 ? _states$blockControls : false
|
|
1165
1129
|
};
|
|
1166
1130
|
}).rightSideControlsEnabled;
|
|
1167
1131
|
// Layout column drag handles sit at the top-centre of each column, not on a left/right edge.
|
|
@@ -451,7 +451,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
|
|
|
451
451
|
}
|
|
452
452
|
},
|
|
453
453
|
getSharedState: function getSharedState(editorState) {
|
|
454
|
-
var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$
|
|
454
|
+
var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$menuTri2, _key$getState3, _key$getState$blockMe, _key$getState4, _key$getState$activeN, _key$getState5, _key$getState$activeD, _key$getState6, _key$getState$isDragg, _key$getState7, _key$getState$isPMDra, _key$getState8, _key$getState$multiSe, _key$getState9, _key$getState$lastDra, _key$getState0, _interactionTrackingP, _key$getState$isSelec, _key$getState1, _selectionPreservatio;
|
|
455
455
|
if (!editorState) {
|
|
456
456
|
return undefined;
|
|
457
457
|
}
|
|
@@ -465,10 +465,9 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
|
|
|
465
465
|
isDragging: (_key$getState$isDragg = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
|
|
466
466
|
isPMDragging: (_key$getState$isPMDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
|
|
467
467
|
multiSelectDnD: (_key$getState$multiSe = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
|
|
468
|
-
|
|
469
|
-
lastDragCancelled: (_key$getState$lastDra = (_key$getState1 = key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
|
|
468
|
+
lastDragCancelled: (_key$getState$lastDra = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
|
|
470
469
|
isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
|
|
471
|
-
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$
|
|
470
|
+
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState1 = key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
|
|
472
471
|
};
|
|
473
472
|
if (registryBlockControlsEnabled) {
|
|
474
473
|
var surfaces = sparseSurfacesKey.getState(editorState);
|
|
@@ -234,7 +234,7 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
|
|
|
234
234
|
return nodeDecAtActivePos;
|
|
235
235
|
};
|
|
236
236
|
var _apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
|
|
237
|
-
var _meta$multiSelectDnD, _api$editorViewMode, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$
|
|
237
|
+
var _meta$multiSelectDnD, _api$editorViewMode, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$toggleMenu, _meta$isDragging3, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$lastDragCancell;
|
|
238
238
|
var rightSideControlsEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
|
|
239
239
|
var quickInsertButtonEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : true;
|
|
240
240
|
var anchorRectCache = arguments.length > 10 ? arguments[10] : undefined;
|
|
@@ -255,7 +255,6 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
|
|
|
255
255
|
menuTriggerByNode = currentState.menuTriggerByNode,
|
|
256
256
|
blockMenuOptions = currentState.blockMenuOptions,
|
|
257
257
|
isPMDragging = currentState.isPMDragging,
|
|
258
|
-
isShiftDown = currentState.isShiftDown,
|
|
259
258
|
lastDragCancelled = currentState.lastDragCancelled,
|
|
260
259
|
isSelectedViaDragHandle = currentState.isSelectedViaDragHandle;
|
|
261
260
|
var isActiveNodeDeleted = false;
|
|
@@ -966,7 +965,6 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
|
|
|
966
965
|
isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
|
|
967
966
|
isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
|
|
968
967
|
multiSelectDnD: multiSelectDnD,
|
|
969
|
-
isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
|
|
970
968
|
lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
|
|
971
969
|
isSelectedViaDragHandle: isSelectedViaDragHandleNew
|
|
972
970
|
};
|
|
@@ -1210,29 +1208,13 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
|
|
|
1210
1208
|
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
|
|
1211
1209
|
}
|
|
1212
1210
|
}
|
|
1213
|
-
if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
1214
|
-
view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
|
|
1215
|
-
isShiftDown: true
|
|
1216
|
-
})));
|
|
1217
|
-
}
|
|
1218
1211
|
return false;
|
|
1219
1212
|
},
|
|
1220
|
-
|
|
1213
|
+
blur: function blur(view, event) {
|
|
1221
1214
|
var _api$limitedMode0;
|
|
1222
1215
|
if (api !== null && api !== void 0 && (_api$limitedMode0 = api.limitedMode) !== null && _api$limitedMode0 !== void 0 && (_api$limitedMode0 = _api$limitedMode0.sharedState.currentState()) !== null && _api$limitedMode0 !== void 0 && _api$limitedMode0.enabled) {
|
|
1223
1216
|
return;
|
|
1224
1217
|
}
|
|
1225
|
-
if (!event.repeat && event.key === 'Shift') {
|
|
1226
|
-
view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
|
|
1227
|
-
isShiftDown: false
|
|
1228
|
-
})));
|
|
1229
|
-
}
|
|
1230
|
-
},
|
|
1231
|
-
blur: function blur(view, event) {
|
|
1232
|
-
var _api$limitedMode1;
|
|
1233
|
-
if (api !== null && api !== void 0 && (_api$limitedMode1 = api.limitedMode) !== null && _api$limitedMode1 !== void 0 && (_api$limitedMode1 = _api$limitedMode1.sharedState.currentState()) !== null && _api$limitedMode1 !== void 0 && _api$limitedMode1.enabled) {
|
|
1234
|
-
return;
|
|
1235
|
-
}
|
|
1236
1218
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
1237
1219
|
var _api$core2;
|
|
1238
1220
|
// Focus moving into the registry surface remains inside the editor experience.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { INSERTED_TRAILING_PARAGRAPH_TO_LAST_NODE_META } from '@atlaskit/editor-common/block-type';
|
|
2
2
|
import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
|
|
3
|
-
import {
|
|
3
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { getTableSelectionClosesToPos } from '@atlaskit/editor-tables/utils';
|
|
5
5
|
import { getBlockControlsMeta, key } from '../main';
|
|
6
6
|
import { newGetSelection } from './getSelection';
|
|
@@ -48,35 +48,6 @@ export var getSelectedSlicePosition = function getSelectedSlicePosition(handlePo
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
/**
|
|
52
|
-
* Takes a position and expands the selection to encompass the node at that position. Ignores empty or out of range selections.
|
|
53
|
-
* Ignores positions that are in text blocks (i.e. not start of a node)
|
|
54
|
-
* @returns TextSelection if expanded, otherwise returns Selection that was passed in.
|
|
55
|
-
*/
|
|
56
|
-
export var expandSelectionHeadToNodeAtPos = function expandSelectionHeadToNodeAtPos(selection, nodePos) {
|
|
57
|
-
var doc = selection.$anchor.doc;
|
|
58
|
-
if (nodePos < 0 || nodePos > doc.nodeSize - 2 || selection.empty) {
|
|
59
|
-
return selection;
|
|
60
|
-
}
|
|
61
|
-
var $pos = doc.resolve(nodePos);
|
|
62
|
-
var node = $pos.nodeAfter;
|
|
63
|
-
if ($pos.node().isTextblock || !node) {
|
|
64
|
-
return selection;
|
|
65
|
-
}
|
|
66
|
-
var $newHead = nodePos < selection.anchor ? $pos : doc.resolve(node.nodeSize + nodePos);
|
|
67
|
-
var textSelection = new TextSelection(selection.$anchor, $newHead);
|
|
68
|
-
return textSelection;
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* This swaps the anchor/head for NodeSelections when its anchor > pos.
|
|
73
|
-
* This is because NodeSelection always has an anchor at the start of the node,
|
|
74
|
-
* which may not align with the existing selection.
|
|
75
|
-
*/
|
|
76
|
-
export var alignAnchorHeadInDirectionOfPos = function alignAnchorHeadInDirectionOfPos(selection, pos) {
|
|
77
|
-
return selection instanceof NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new TextSelection(selection.$head, selection.$anchor) : selection;
|
|
78
|
-
};
|
|
79
|
-
|
|
80
51
|
/**
|
|
81
52
|
* This maps a preserved selection through a transaction, expanding text selections to block boundaries.
|
|
82
53
|
*
|
|
@@ -25,7 +25,6 @@ import { prepareCollapsedHeadingSelection } from '../pm-plugins/utils/collapsed-
|
|
|
25
25
|
import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
|
|
26
26
|
import { isHandleCorrelatedToSelection } from '../pm-plugins/utils/getSelection';
|
|
27
27
|
import { buildLayoutColumnMenuMeta } from './block-controls-surface-drag-handle-utils';
|
|
28
|
-
import { DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH } from './consts';
|
|
29
28
|
import { DragHandleNestedIcon } from './drag-handle-nested-icon';
|
|
30
29
|
import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
|
|
31
30
|
import { useSurfaceEditorView } from './surface-editor-view-context';
|
|
@@ -82,19 +81,17 @@ export var BlockControlsSurfaceDragHandle = function BlockControlsSurfaceDragHan
|
|
|
82
81
|
return posRef.current;
|
|
83
82
|
}, []);
|
|
84
83
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'interaction', 'selection'], function (states) {
|
|
85
|
-
var _states$blockControls, _states$blockControls2, _states$interactionSt, _states$
|
|
84
|
+
var _states$blockControls, _states$blockControls2, _states$interactionSt, _states$selectionStat;
|
|
86
85
|
return {
|
|
87
86
|
activeNodeAnchorName: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 || (_states$blockControls = _states$blockControls.activeNode) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.anchorName,
|
|
88
87
|
handleOptions: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 || (_states$blockControls2 = _states$blockControls2.activeNode) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.handleOptions,
|
|
89
88
|
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
90
|
-
isShiftDown: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isShiftDown,
|
|
91
89
|
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
92
90
|
};
|
|
93
91
|
}),
|
|
94
92
|
activeNodeAnchorName = _useSharedPluginState.activeNodeAnchorName,
|
|
95
93
|
handleOptions = _useSharedPluginState.handleOptions,
|
|
96
94
|
interactionState = _useSharedPluginState.interactionState,
|
|
97
|
-
isShiftDown = _useSharedPluginState.isShiftDown,
|
|
98
95
|
selection = _useSharedPluginState.selection;
|
|
99
96
|
var _useState = useState(false),
|
|
100
97
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -105,21 +102,9 @@ export var BlockControlsSurfaceDragHandle = function BlockControlsSurfaceDragHan
|
|
|
105
102
|
}, [pos, selection, view]);
|
|
106
103
|
var isLayoutColumn = nodeType === 'layoutColumn';
|
|
107
104
|
var isTopLevelNode = (activeNode === null || activeNode === void 0 ? void 0 : activeNode.parentType) === 'doc';
|
|
108
|
-
var isDisabled = useMemo(function () {
|
|
109
|
-
var _api$blockControls$sh;
|
|
110
|
-
if (!isShiftDown || !view || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
111
|
-
return false;
|
|
112
|
-
}
|
|
113
|
-
if (isLayoutColumn && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
114
|
-
return false;
|
|
115
|
-
}
|
|
116
|
-
var multiSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
|
|
117
|
-
var $anchor = (multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.anchor) !== undefined ? view.state.doc.resolve(multiSelect.anchor) : view.state.selection.$anchor;
|
|
118
|
-
return !isTopLevelNode || $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH;
|
|
119
|
-
}, [api, isLayoutColumn, isShiftDown, isTopLevelNode, view]);
|
|
120
105
|
var getAnchorName = useCallback(function () {
|
|
121
|
-
var _api$blockControls$
|
|
122
|
-
var surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 || (_api$blockControls$
|
|
106
|
+
var _api$blockControls$sh, _ref2, _ref3, _dom$getAttribute, _dom$closest;
|
|
107
|
+
var surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 || (_api$blockControls$sh = _api$blockControls$sh.surfaceAnchors) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.get(posRef.current);
|
|
123
108
|
if (surfaceAnchor) {
|
|
124
109
|
return surfaceAnchor;
|
|
125
110
|
}
|
|
@@ -187,7 +172,7 @@ export var BlockControlsSurfaceDragHandle = function BlockControlsSurfaceDragHan
|
|
|
187
172
|
}, [api]);
|
|
188
173
|
var handleClick = useCallback(function (event) {
|
|
189
174
|
var _api$core2;
|
|
190
|
-
if (!view
|
|
175
|
+
if (!view) {
|
|
191
176
|
return;
|
|
192
177
|
}
|
|
193
178
|
var openedViaKeyboard = event.detail === 0;
|
|
@@ -247,7 +232,7 @@ export var BlockControlsSurfaceDragHandle = function BlockControlsSurfaceDragHan
|
|
|
247
232
|
return tr;
|
|
248
233
|
});
|
|
249
234
|
view.focus();
|
|
250
|
-
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos,
|
|
235
|
+
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos, nodeType, view]);
|
|
251
236
|
var label = formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
|
|
252
237
|
br: ' '
|
|
253
238
|
});
|
|
@@ -275,7 +260,6 @@ export var BlockControlsSurfaceDragHandle = function BlockControlsSurfaceDragHan
|
|
|
275
260
|
ref: buttonRef,
|
|
276
261
|
type: "button",
|
|
277
262
|
"aria-label": label,
|
|
278
|
-
disabled: isDisabled,
|
|
279
263
|
onClick: handleClick,
|
|
280
264
|
onMouseDown: handleMouseDown
|
|
281
265
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop -- Pragmatic DnD owns this native drag source.
|
package/dist/esm/ui/consts.js
CHANGED
|
@@ -40,14 +40,6 @@ export var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
|
|
|
40
40
|
export var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
|
|
41
41
|
export var DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
|
|
42
42
|
export var DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
|
|
43
|
-
|
|
44
|
-
/** We only want to shift-select nodes that are at the top level of a document.
|
|
45
|
-
* This is because funky things happen when selecting inside of tableCells, but we
|
|
46
|
-
* also want to avoid heavily nested cases to descope potential corner cases.
|
|
47
|
-
* Various top level nodes have their selection 'from' at depths other than 0,
|
|
48
|
-
* so we allow for some leniency to capture them all. e.g. Table is depth 3.
|
|
49
|
-
*/
|
|
50
|
-
export var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
|
|
51
43
|
export var STICKY_CONTROLS_TOP_MARGIN = 8;
|
|
52
44
|
export var STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
|
|
53
45
|
export var QUICK_INSERT_HEIGHT = 24;
|
|
@@ -39,7 +39,7 @@ import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics
|
|
|
39
39
|
import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
|
|
40
40
|
import { expandAndUpdateSelection } from '../pm-plugins/utils/expand-and-update-selection';
|
|
41
41
|
import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
|
|
42
|
-
import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT,
|
|
42
|
+
import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
|
|
43
43
|
import { DragHandleNestedIcon } from './drag-handle-nested-icon';
|
|
44
44
|
import { dragPreview } from './drag-preview';
|
|
45
45
|
import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
|
|
@@ -349,7 +349,6 @@ var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
|
|
|
349
349
|
return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
|
|
350
350
|
};
|
|
351
351
|
export var DragHandle = function DragHandle(_ref2) {
|
|
352
|
-
var _api$blockControls7;
|
|
353
352
|
var view = _ref2.view,
|
|
354
353
|
api = _ref2.api,
|
|
355
354
|
formatMessage = _ref2.formatMessage,
|
|
@@ -364,41 +363,35 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
364
363
|
_useState2 = _slicedToArray(_useState, 2),
|
|
365
364
|
dragHandleSelected = _useState2[0],
|
|
366
365
|
setDragHandleSelected = _useState2[1];
|
|
367
|
-
var _useState3 = useState(
|
|
366
|
+
var _useState3 = useState(768),
|
|
368
367
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
var _useState5 = useState(
|
|
372
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
373
|
-
blockCardWidth = _useState6[0],
|
|
374
|
-
setBlockCardWidth = _useState6[1];
|
|
375
|
-
var _useState7 = useState({
|
|
368
|
+
blockCardWidth = _useState4[0],
|
|
369
|
+
setBlockCardWidth = _useState4[1];
|
|
370
|
+
var _useState5 = useState({
|
|
376
371
|
display: 'none'
|
|
377
372
|
}),
|
|
378
|
-
|
|
379
|
-
positionStylesOld =
|
|
380
|
-
setPositionStylesOld =
|
|
373
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
374
|
+
positionStylesOld = _useState6[0],
|
|
375
|
+
setPositionStylesOld = _useState6[1];
|
|
381
376
|
// Tracks whether the initial position calculation has been performed at least once.
|
|
382
377
|
// The reliable-anchor early-return optimisation must not fire before the first calculation,
|
|
383
378
|
// otherwise positionStylesOld stays as { display: 'none' } and the handle is never shown.
|
|
384
379
|
var hasCalculatedInitialPosition = useRef(false);
|
|
385
|
-
var
|
|
386
|
-
|
|
387
|
-
isFocused =
|
|
388
|
-
setIsFocused =
|
|
380
|
+
var _useState7 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
|
|
381
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
382
|
+
isFocused = _useState8[0],
|
|
383
|
+
setIsFocused = _useState8[1];
|
|
389
384
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags', 'selection', 'blockControls', 'interaction', 'userIntent'], function (states) {
|
|
390
|
-
var _states$featureFlagsS, _states$selectionStat, _states$
|
|
385
|
+
var _states$featureFlagsS, _states$selectionStat, _states$interactionSt, _states$userIntentSta;
|
|
391
386
|
return {
|
|
392
387
|
macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates,
|
|
393
388
|
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
|
|
394
|
-
isShiftDown: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isShiftDown,
|
|
395
389
|
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
396
390
|
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
|
|
397
391
|
};
|
|
398
392
|
}),
|
|
399
393
|
macroInteractionUpdates = _useSharedPluginState.macroInteractionUpdates,
|
|
400
394
|
selection = _useSharedPluginState.selection,
|
|
401
|
-
isShiftDown = _useSharedPluginState.isShiftDown,
|
|
402
395
|
interactionState = _useSharedPluginState.interactionState,
|
|
403
396
|
currentUserIntent = _useSharedPluginState.currentUserIntent;
|
|
404
397
|
var start = getPos();
|
|
@@ -949,20 +942,6 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
949
942
|
}
|
|
950
943
|
setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
|
|
951
944
|
}, [start, selection, view]);
|
|
952
|
-
useEffect(function () {
|
|
953
|
-
var _api$blockControls$sh3;
|
|
954
|
-
if (isShiftDown === undefined || view.state.selection.empty || !fg('platform_editor_elements_dnd_shift_click_select')) {
|
|
955
|
-
return;
|
|
956
|
-
}
|
|
957
|
-
var mSelect = api === null || api === void 0 || (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh3 === void 0 ? void 0 : _api$blockControls$sh3.multiSelectDnD;
|
|
958
|
-
var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
|
|
959
|
-
var isLayoutColumnMenuEnabled = expValEquals('platform_editor_layout_column_menu', 'isEnabled', true);
|
|
960
|
-
if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
|
|
961
|
-
setDragHandleDisabled(true);
|
|
962
|
-
} else {
|
|
963
|
-
setDragHandleDisabled(false);
|
|
964
|
-
}
|
|
965
|
-
}, [api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
|
|
966
945
|
var dragHandleMessage = formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
|
|
967
946
|
br: jsx("br", null)
|
|
968
947
|
});
|
|
@@ -1064,7 +1043,6 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1064
1043
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
|
|
1065
1044
|
,
|
|
1066
1045
|
onDrop: handleOnDrop,
|
|
1067
|
-
disabled: dragHandleDisabled,
|
|
1068
1046
|
"data-editor-block-ctrl-drag-handle": true,
|
|
1069
1047
|
"data-blocks-drag-handle": fg('confluence_remix_button_right_side_block_fg') || undefined,
|
|
1070
1048
|
"data-testid": "block-ctrl-drag-handle",
|
|
@@ -1131,22 +1109,6 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1131
1109
|
css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStylesNoBackground, buttonWrapperStylesPatch]
|
|
1132
1110
|
}, renderButton()))));
|
|
1133
1111
|
};
|
|
1134
|
-
var stickyWithoutTooltip = function stickyWithoutTooltip() {
|
|
1135
|
-
return jsx(Box
|
|
1136
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
1137
|
-
, {
|
|
1138
|
-
style: positionStylesOld
|
|
1139
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
1140
|
-
,
|
|
1141
|
-
xcss: [dragHandleContainerStyles],
|
|
1142
|
-
as: "span",
|
|
1143
|
-
testId: "block-ctrl-drag-handle-container"
|
|
1144
|
-
}, jsx("span", {
|
|
1145
|
-
css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && tooltipContainerStylesStickyHeaderWithoutMask]
|
|
1146
|
-
}, jsx("span", {
|
|
1147
|
-
css: [shouldMaskNodeControls(nodeType, isTopLevelNodeValue) && buttonWrapperStylesNoBackground, buttonWrapperStylesPatch]
|
|
1148
|
-
}, renderButton())));
|
|
1149
|
-
};
|
|
1150
1112
|
var buttonWithTooltip = function buttonWithTooltip() {
|
|
1151
1113
|
return jsx(Tooltip, {
|
|
1152
1114
|
content: tooltipContent,
|
|
@@ -1164,10 +1126,7 @@ export var DragHandle = function DragHandle(_ref2) {
|
|
|
1164
1126
|
var tooltipContent = isLayoutColumn && expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : jsx(TooltipContentWithMultipleShortcuts, {
|
|
1165
1127
|
helpDescriptors: helpDescriptors
|
|
1166
1128
|
});
|
|
1167
|
-
|
|
1168
|
-
var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
|
|
1169
|
-
var render = isTooltip ? buttonWithTooltip() : renderButton();
|
|
1170
|
-
return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
|
|
1129
|
+
return editorExperiment('platform_editor_controls', 'variant1') ? stickyWithTooltip() : buttonWithTooltip();
|
|
1171
1130
|
};
|
|
1172
1131
|
export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
|
|
1173
1132
|
var view = _ref0.view,
|
|
@@ -1180,9 +1139,9 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
|
|
|
1180
1139
|
isTopLevelNode = _ref0.isTopLevelNode,
|
|
1181
1140
|
anchorRectCache = _ref0.anchorRectCache;
|
|
1182
1141
|
var rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
|
|
1183
|
-
var _states$
|
|
1142
|
+
var _states$blockControls, _states$blockControls2;
|
|
1184
1143
|
return {
|
|
1185
|
-
rightSideControlsEnabled: (_states$
|
|
1144
|
+
rightSideControlsEnabled: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.rightSideControlsEnabled) !== null && _states$blockControls !== void 0 ? _states$blockControls : false
|
|
1186
1145
|
};
|
|
1187
1146
|
}).rightSideControlsEnabled;
|
|
1188
1147
|
// Layout column drag handles sit at the top-centre of each column, not on a left/right edge.
|
|
@@ -74,7 +74,6 @@ export interface PluginState {
|
|
|
74
74
|
isPMDragging: boolean;
|
|
75
75
|
isResizerResizing: boolean;
|
|
76
76
|
isSelectedViaDragHandle?: boolean;
|
|
77
|
-
isShiftDown?: boolean;
|
|
78
77
|
lastDragCancelled: boolean;
|
|
79
78
|
menuTriggerBy?: string;
|
|
80
79
|
menuTriggerByNode?: TriggerByNode;
|
|
@@ -108,7 +107,6 @@ export type BlockControlsSharedState = {
|
|
|
108
107
|
isMouseOut?: boolean;
|
|
109
108
|
isPMDragging: boolean;
|
|
110
109
|
isSelectedViaDragHandle?: boolean;
|
|
111
|
-
isShiftDown?: boolean;
|
|
112
110
|
lastDragCancelled: boolean;
|
|
113
111
|
menuTriggerBy?: string;
|
|
114
112
|
menuTriggerByNode?: TriggerByNode;
|
|
@@ -32,7 +32,6 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
|
|
|
32
32
|
isPMDragging: any;
|
|
33
33
|
isResizerResizing: boolean;
|
|
34
34
|
isSelectedViaDragHandle: any;
|
|
35
|
-
isShiftDown: any;
|
|
36
35
|
lastDragCancelled: any;
|
|
37
36
|
menuTriggerBy: any;
|
|
38
37
|
menuTriggerByNode: any;
|
|
@@ -57,7 +56,6 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
|
|
|
57
56
|
isPMDragging: any;
|
|
58
57
|
isResizerResizing: boolean;
|
|
59
58
|
isSelectedViaDragHandle: any;
|
|
60
|
-
isShiftDown: any;
|
|
61
59
|
lastDragCancelled: any;
|
|
62
60
|
menuTriggerBy: any;
|
|
63
61
|
menuTriggerByNode: any;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
-
import {
|
|
4
|
-
import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
import type { NodeSelection, ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import type { CellSelection } from '@atlaskit/editor-tables';
|
|
6
6
|
import type { BlockControlsPlugin } from '../../blockControlsPluginType';
|
|
7
7
|
export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number, tr?: Transaction) => {
|
|
@@ -21,18 +21,6 @@ export declare const getSelectedSlicePosition: (handlePos: number, tr: Transacti
|
|
|
21
21
|
from: number;
|
|
22
22
|
to: number;
|
|
23
23
|
};
|
|
24
|
-
/**
|
|
25
|
-
* Takes a position and expands the selection to encompass the node at that position. Ignores empty or out of range selections.
|
|
26
|
-
* Ignores positions that are in text blocks (i.e. not start of a node)
|
|
27
|
-
* @returns TextSelection if expanded, otherwise returns Selection that was passed in.
|
|
28
|
-
*/
|
|
29
|
-
export declare const expandSelectionHeadToNodeAtPos: (selection: Selection, nodePos: number) => Selection;
|
|
30
|
-
/**
|
|
31
|
-
* This swaps the anchor/head for NodeSelections when its anchor > pos.
|
|
32
|
-
* This is because NodeSelection always has an anchor at the start of the node,
|
|
33
|
-
* which may not align with the existing selection.
|
|
34
|
-
*/
|
|
35
|
-
export declare const alignAnchorHeadInDirectionOfPos: (selection: Selection, pos: number) => Selection;
|
|
36
24
|
/**
|
|
37
25
|
* This maps a preserved selection through a transaction, expanding text selections to block boundaries.
|
|
38
26
|
*
|
|
@@ -21,13 +21,6 @@ export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
|
|
|
21
21
|
export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
|
|
22
22
|
export declare const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
|
|
23
23
|
export declare const DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
|
|
24
|
-
/** We only want to shift-select nodes that are at the top level of a document.
|
|
25
|
-
* This is because funky things happen when selecting inside of tableCells, but we
|
|
26
|
-
* also want to avoid heavily nested cases to descope potential corner cases.
|
|
27
|
-
* Various top level nodes have their selection 'from' at depths other than 0,
|
|
28
|
-
* so we allow for some leniency to capture them all. e.g. Table is depth 3.
|
|
29
|
-
*/
|
|
30
|
-
export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
|
|
31
24
|
export declare const STICKY_CONTROLS_TOP_MARGIN = 8;
|
|
32
25
|
export declare const STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
|
|
33
26
|
export declare const QUICK_INSERT_HEIGHT = 24;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "23.0.
|
|
3
|
+
"version": "23.0.3",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@atlaskit/primitives": "^22.5.0",
|
|
62
62
|
"@atlaskit/section-message": "^10.2.0",
|
|
63
63
|
"@atlaskit/theme": "^28.2.0",
|
|
64
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
64
|
+
"@atlaskit/tmp-editor-statsig": "^212.0.0",
|
|
65
65
|
"@atlaskit/tokens": "^20.1.0",
|
|
66
66
|
"@atlaskit/tooltip": "^24.3.0",
|
|
67
67
|
"@babel/runtime": "^7.0.0",
|
|
@@ -79,9 +79,6 @@
|
|
|
79
79
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
80
80
|
},
|
|
81
81
|
"platform-feature-flags": {
|
|
82
|
-
"platform_editor_elements_dnd_shift_click_select": {
|
|
83
|
-
"type": "boolean"
|
|
84
|
-
},
|
|
85
82
|
"platform_editor_ease_of_use_metrics": {
|
|
86
83
|
"type": "boolean"
|
|
87
84
|
},
|