@atlaskit/editor-plugin-block-controls 23.0.2 → 23.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/cjs/blockControlsPlugin.js +4 -6
- package/dist/cjs/pm-plugins/handle-mouse-over.js +0 -5
- package/dist/cjs/pm-plugins/handle-sparse-mouse-over.js +0 -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-utils.js +3 -11
- package/dist/cjs/ui/block-controls-surface-drag-handle.js +6 -23
- package/dist/cjs/ui/consts.js +1 -9
- package/dist/cjs/ui/drag-handle.js +22 -67
- package/dist/cjs/ui/should-use-nested-drag-handle-icon.js +2 -6
- package/dist/es2019/blockControlsPlugin.js +4 -6
- package/dist/es2019/pm-plugins/handle-mouse-over.js +0 -5
- package/dist/es2019/pm-plugins/handle-sparse-mouse-over.js +0 -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-utils.js +0 -4
- package/dist/es2019/ui/block-controls-surface-drag-handle.js +6 -23
- package/dist/es2019/ui/consts.js +0 -8
- package/dist/es2019/ui/drag-handle.js +9 -49
- package/dist/es2019/ui/should-use-nested-drag-handle-icon.js +2 -7
- package/dist/esm/blockControlsPlugin.js +4 -6
- package/dist/esm/pm-plugins/handle-mouse-over.js +0 -5
- package/dist/esm/pm-plugins/handle-sparse-mouse-over.js +0 -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-utils.js +3 -10
- package/dist/esm/ui/block-controls-surface-drag-handle.js +6 -23
- package/dist/esm/ui/consts.js +0 -8
- package/dist/esm/ui/drag-handle.js +23 -68
- package/dist/esm/ui/should-use-nested-drag-handle-icon.js +2 -7
- 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/block-controls-surface-drag-handle-utils.d.ts +0 -1
- package/dist/types/ui/consts.d.ts +0 -7
- package/package.json +4 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 23.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`a4fe8636fa0ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a4fe8636fa0ec) -
|
|
8
|
+
Clean up the fully rolled out `platform_editor_layout_column_menu` experiment and the
|
|
9
|
+
`platform_editor_layout_column_menu_kill_switch_1` feature gate, retaining their shipped behavior.
|
|
10
|
+
Consumers must remove any direct `@atlaskit/tmp-editor-statsig` experiment override for
|
|
11
|
+
`platform_editor_layout_column_menu`.
|
|
12
|
+
- [`618d89a102880`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/618d89a102880) -
|
|
13
|
+
Clean up experiment `remix_iw_block_menu_table_calc_fix`
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 23.0.3
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [`50c2251fcc095`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50c2251fcc095) -
|
|
21
|
+
Clean up feature gate `platform_editor_elements_dnd_shift_click_select`. The gate is removed as
|
|
22
|
+
`false`, so shift-click multi-select via the drag handle, the associated `isShiftDown` plugin
|
|
23
|
+
state, and the unused `expandSelectionHeadToNodeAtPos` / `alignAnchorHeadInDirectionOfPos` helpers
|
|
24
|
+
are removed.
|
|
25
|
+
- Updated dependencies
|
|
26
|
+
|
|
3
27
|
## 23.0.2
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -16,7 +16,6 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
|
16
16
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
17
17
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
18
18
|
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
19
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
19
|
var _handleKeyDownWithPreservedSelection = require("./editor-commands/handle-key-down-with-preserved-selection");
|
|
21
20
|
var _mapPreservedSelection2 = require("./editor-commands/map-preserved-selection");
|
|
22
21
|
var _moveNode = require("./editor-commands/move-node");
|
|
@@ -87,7 +86,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
87
86
|
// so that adjacent cells are not fused (e.g. 'hello world' + 'foo' must not
|
|
88
87
|
// become 'hello worldfoo'). Intl.Segmenter word-counting requires correct
|
|
89
88
|
// word boundaries, which raw textContent fusion breaks.
|
|
90
|
-
if (preservedSelection instanceof _cellSelection.CellSelection
|
|
89
|
+
if (preservedSelection instanceof _cellSelection.CellSelection) {
|
|
91
90
|
// Use node(1) to reliably target the table node regardless of $anchorCell depth.
|
|
92
91
|
// node(-1) would return tableRow if $anchorCell is at tableCell depth.
|
|
93
92
|
var tableNode = preservedSelection.$anchorCell.node(1);
|
|
@@ -458,7 +457,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
458
457
|
}
|
|
459
458
|
},
|
|
460
459
|
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$
|
|
460
|
+
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
461
|
if (!editorState) {
|
|
463
462
|
return undefined;
|
|
464
463
|
}
|
|
@@ -472,10 +471,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
|
|
|
472
471
|
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
472
|
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
473
|
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,
|
|
474
|
+
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
475
|
isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
|
|
478
|
-
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$
|
|
476
|
+
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
477
|
};
|
|
480
478
|
if (registryBlockControlsEnabled) {
|
|
481
479
|
var surfaces = _sparseSurfaces.sparseSurfacesKey.getState(editorState);
|
|
@@ -250,11 +250,6 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
250
250
|
} else {
|
|
251
251
|
pos = view.posAtDOM(rootElement, 0);
|
|
252
252
|
}
|
|
253
|
-
if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && (0, _editorExperiment.editorExperiment)('advanced_layouts', true) && !(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
254
|
-
// Don't show drag handle for layout column in a single column layout,
|
|
255
|
-
// unless the layout column menu is enabled (menu needs the handle to be accessible).
|
|
256
|
-
return false;
|
|
257
|
-
}
|
|
258
253
|
var targetPos = view.state.doc.resolve(pos).pos;
|
|
259
254
|
var rootAnchorName;
|
|
260
255
|
var rootNodeType;
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.handleSparseMouseOver = void 0;
|
|
7
7
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
8
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
9
8
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
10
9
|
var _decorationsCommon = require("./decorations-common");
|
|
11
10
|
var OPAQUE_BLOCKS = new Set(['table', 'bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
|
|
@@ -109,9 +108,6 @@ var handleSparseMouseOver = exports.handleSparseMouseOver = function handleSpars
|
|
|
109
108
|
if (isPanelNodeTypeName(parentNode.type.name) && !(parentDOM instanceof HTMLElement && parentDOM.classList.contains('ak-editor-panel__no-icon')) && $target.index() === 0) {
|
|
110
109
|
return false;
|
|
111
110
|
}
|
|
112
|
-
if (node.type.name === 'layoutColumn' && parentNode.type.name === 'layoutSection' && parentNode.childCount === 1 && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('advanced_layouts', 'isEnabled', true) && !(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
113
|
-
return false;
|
|
114
|
-
}
|
|
115
111
|
var anchors = controls === null || controls === void 0 ? void 0 : controls.surfaceAnchors;
|
|
116
112
|
var anchorName = (_anchors$get = anchors === null || anchors === void 0 ? void 0 : anchors.get(targetPosition)) !== null && _anchors$get !== void 0 ? _anchors$get : api.core.actions.getAnchorIdForNode(node, targetPosition);
|
|
117
113
|
var rootPos = $target.depth > 0 ? $target.before(1) : targetPosition;
|
|
@@ -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
|
*
|
|
@@ -1,23 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.getNodeSpacingForDragPreview = exports.getNodeMarginsForDragPreview = exports.buildLayoutColumnMenuMeta = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
10
7
|
var _consts = require("./consts");
|
|
11
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
13
8
|
var buildLayoutColumnMenuMeta = exports.buildLayoutColumnMenuMeta = function buildLayoutColumnMenuMeta(anchorPos, openedViaKeyboard) {
|
|
14
|
-
return
|
|
15
|
-
anchorPos: anchorPos
|
|
16
|
-
}, (0, _fg.fg)('platform_editor_layout_column_menu_kill_switch_1') ? {
|
|
17
|
-
isOpen: true
|
|
18
|
-
} : {}), {}, {
|
|
9
|
+
return {
|
|
10
|
+
anchorPos: anchorPos,
|
|
19
11
|
openedViaKeyboard: openedViaKeyboard
|
|
20
|
-
}
|
|
12
|
+
};
|
|
21
13
|
};
|
|
22
14
|
var getNodeSpacingForDragPreview = exports.getNodeSpacingForDragPreview = function getNodeSpacingForDragPreview(node) {
|
|
23
15
|
var _spacingBetweenNodesF2;
|
|
@@ -23,14 +23,12 @@ var _messages = require("@atlaskit/editor-common/messages");
|
|
|
23
23
|
var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
|
|
24
24
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
25
25
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
26
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
27
26
|
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
|
|
28
27
|
var _pluginKey = require("../pm-plugins/selection-preservation/plugin-key");
|
|
29
28
|
var _collapsedHeading = require("../pm-plugins/utils/collapsed-heading");
|
|
30
29
|
var _expandAndUpdateSelection = require("../pm-plugins/utils/expand-and-update-selection");
|
|
31
30
|
var _getSelection = require("../pm-plugins/utils/getSelection");
|
|
32
31
|
var _blockControlsSurfaceDragHandleUtils = require("./block-controls-surface-drag-handle-utils");
|
|
33
|
-
var _consts = require("./consts");
|
|
34
32
|
var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
|
|
35
33
|
var _shouldUseNestedDragHandleIcon = require("./should-use-nested-drag-handle-icon");
|
|
36
34
|
var _surfaceEditorViewContext = require("./surface-editor-view-context");
|
|
@@ -88,19 +86,17 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
88
86
|
return posRef.current;
|
|
89
87
|
}, []);
|
|
90
88
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'interaction', 'selection'], function (states) {
|
|
91
|
-
var _states$blockControls, _states$blockControls2, _states$interactionSt, _states$
|
|
89
|
+
var _states$blockControls, _states$blockControls2, _states$interactionSt, _states$selectionStat;
|
|
92
90
|
return {
|
|
93
91
|
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
92
|
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
93
|
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
94
|
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
|
|
98
95
|
};
|
|
99
96
|
}),
|
|
100
97
|
activeNodeAnchorName = _useSharedPluginState.activeNodeAnchorName,
|
|
101
98
|
handleOptions = _useSharedPluginState.handleOptions,
|
|
102
99
|
interactionState = _useSharedPluginState.interactionState,
|
|
103
|
-
isShiftDown = _useSharedPluginState.isShiftDown,
|
|
104
100
|
selection = _useSharedPluginState.selection;
|
|
105
101
|
var _useState = (0, _react.useState)(false),
|
|
106
102
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -111,21 +107,9 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
111
107
|
}, [pos, selection, view]);
|
|
112
108
|
var isLayoutColumn = nodeType === 'layoutColumn';
|
|
113
109
|
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
110
|
var getAnchorName = (0, _react.useCallback)(function () {
|
|
127
|
-
var _api$blockControls$
|
|
128
|
-
var surfaceAnchor = posRef.current === undefined ? undefined : api === null || api === void 0 || (_api$blockControls$
|
|
111
|
+
var _api$blockControls$sh, _ref2, _ref3, _dom$getAttribute, _dom$closest;
|
|
112
|
+
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
113
|
if (surfaceAnchor) {
|
|
130
114
|
return surfaceAnchor;
|
|
131
115
|
}
|
|
@@ -193,7 +177,7 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
193
177
|
}, [api]);
|
|
194
178
|
var handleClick = (0, _react.useCallback)(function (event) {
|
|
195
179
|
var _api$core2;
|
|
196
|
-
if (!view
|
|
180
|
+
if (!view) {
|
|
197
181
|
return;
|
|
198
182
|
}
|
|
199
183
|
var openedViaKeyboard = event.detail === 0;
|
|
@@ -204,7 +188,7 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
204
188
|
if (startPos === undefined) {
|
|
205
189
|
return tr;
|
|
206
190
|
}
|
|
207
|
-
if (nodeType === 'layoutColumn'
|
|
191
|
+
if (nodeType === 'layoutColumn') {
|
|
208
192
|
tr.setMeta('toggleLayoutColumnMenu', (0, _blockControlsSurfaceDragHandleUtils.buildLayoutColumnMenuMeta)(startPos, openedViaKeyboard));
|
|
209
193
|
}
|
|
210
194
|
var selection = (_selectionPreservatio = (_selectionPreservatio2 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) !== null && _selectionPreservatio !== void 0 ? _selectionPreservatio : tr.selection;
|
|
@@ -253,7 +237,7 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
253
237
|
return tr;
|
|
254
238
|
});
|
|
255
239
|
view.focus();
|
|
256
|
-
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos,
|
|
240
|
+
}, [activeNode === null || activeNode === void 0 ? void 0 : activeNode.rootPos, api, getAnchorName, getPos, nodeType, view]);
|
|
257
241
|
var label = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
|
|
258
242
|
br: ' '
|
|
259
243
|
});
|
|
@@ -281,7 +265,6 @@ var BlockControlsSurfaceDragHandle = exports.BlockControlsSurfaceDragHandle = fu
|
|
|
281
265
|
ref: buttonRef,
|
|
282
266
|
type: "button",
|
|
283
267
|
"aria-label": label,
|
|
284
|
-
disabled: isDisabled,
|
|
285
268
|
onClick: handleClick,
|
|
286
269
|
onMouseDown: handleMouseDown
|
|
287
270
|
// 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;
|
|
@@ -333,16 +333,12 @@ var getNodeMargins = function getNodeMargins(node) {
|
|
|
333
333
|
return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
|
|
334
334
|
};
|
|
335
335
|
|
|
336
|
-
//
|
|
337
|
-
// `isOpen: true` for legacy always-open. Centralised so all dispatch sites stay in sync.
|
|
336
|
+
// Omit `isOpen` so the reducer toggles the menu for a re-clicked layout column.
|
|
338
337
|
var buildToggleLayoutColumnMenuMeta = function buildToggleLayoutColumnMenuMeta(anchorPos, openedViaKeyboard) {
|
|
339
|
-
return
|
|
340
|
-
anchorPos: anchorPos
|
|
341
|
-
}, (0, _fg.fg)('platform_editor_layout_column_menu_kill_switch_1') ? {
|
|
342
|
-
isOpen: true
|
|
343
|
-
} : {}), {}, {
|
|
338
|
+
return {
|
|
339
|
+
anchorPos: anchorPos,
|
|
344
340
|
openedViaKeyboard: openedViaKeyboard
|
|
345
|
-
}
|
|
341
|
+
};
|
|
346
342
|
};
|
|
347
343
|
var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
|
|
348
344
|
var edge = _ref.edge,
|
|
@@ -353,7 +349,6 @@ var getDragHandleAnchorReference = function getDragHandleAnchorReference(_ref) {
|
|
|
353
349
|
return "anchor(".concat(safeAnchorName, " ").concat(edge, ")");
|
|
354
350
|
};
|
|
355
351
|
var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
356
|
-
var _api$blockControls7;
|
|
357
352
|
var view = _ref2.view,
|
|
358
353
|
api = _ref2.api,
|
|
359
354
|
formatMessage = _ref2.formatMessage,
|
|
@@ -368,41 +363,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
368
363
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
369
364
|
dragHandleSelected = _useState2[0],
|
|
370
365
|
setDragHandleSelected = _useState2[1];
|
|
371
|
-
var _useState3 = (0, _react.useState)(
|
|
366
|
+
var _useState3 = (0, _react.useState)(768),
|
|
372
367
|
_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)({
|
|
368
|
+
blockCardWidth = _useState4[0],
|
|
369
|
+
setBlockCardWidth = _useState4[1];
|
|
370
|
+
var _useState5 = (0, _react.useState)({
|
|
380
371
|
display: 'none'
|
|
381
372
|
}),
|
|
382
|
-
|
|
383
|
-
positionStylesOld =
|
|
384
|
-
setPositionStylesOld =
|
|
373
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
374
|
+
positionStylesOld = _useState6[0],
|
|
375
|
+
setPositionStylesOld = _useState6[1];
|
|
385
376
|
// Tracks whether the initial position calculation has been performed at least once.
|
|
386
377
|
// The reliable-anchor early-return optimisation must not fire before the first calculation,
|
|
387
378
|
// otherwise positionStylesOld stays as { display: 'none' } and the handle is never shown.
|
|
388
379
|
var hasCalculatedInitialPosition = (0, _react.useRef)(false);
|
|
389
|
-
var
|
|
390
|
-
|
|
391
|
-
isFocused =
|
|
392
|
-
setIsFocused =
|
|
380
|
+
var _useState7 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
|
|
381
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
382
|
+
isFocused = _useState8[0],
|
|
383
|
+
setIsFocused = _useState8[1];
|
|
393
384
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags', 'selection', 'blockControls', 'interaction', 'userIntent'], function (states) {
|
|
394
|
-
var _states$featureFlagsS, _states$selectionStat, _states$
|
|
385
|
+
var _states$featureFlagsS, _states$selectionStat, _states$interactionSt, _states$userIntentSta;
|
|
395
386
|
return {
|
|
396
387
|
macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates,
|
|
397
388
|
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
389
|
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
400
390
|
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
|
|
401
391
|
};
|
|
402
392
|
}),
|
|
403
393
|
macroInteractionUpdates = _useSharedPluginState.macroInteractionUpdates,
|
|
404
394
|
selection = _useSharedPluginState.selection,
|
|
405
|
-
isShiftDown = _useSharedPluginState.isShiftDown,
|
|
406
395
|
interactionState = _useSharedPluginState.interactionState,
|
|
407
396
|
currentUserIntent = _useSharedPluginState.currentUserIntent;
|
|
408
397
|
var start = getPos();
|
|
@@ -473,7 +462,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
473
462
|
if (startPos === undefined) {
|
|
474
463
|
return tr;
|
|
475
464
|
}
|
|
476
|
-
if (nodeType === 'layoutColumn'
|
|
465
|
+
if (nodeType === 'layoutColumn') {
|
|
477
466
|
tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
|
|
478
467
|
}
|
|
479
468
|
var resolvedStartPos = tr.doc.resolve(startPos);
|
|
@@ -543,7 +532,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
543
532
|
api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.startPreservingSelection()({
|
|
544
533
|
tr: tr
|
|
545
534
|
});
|
|
546
|
-
if (nodeType === 'layoutColumn'
|
|
535
|
+
if (nodeType === 'layoutColumn') {
|
|
547
536
|
tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, true));
|
|
548
537
|
}
|
|
549
538
|
var triggerByNode = {
|
|
@@ -953,20 +942,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
953
942
|
}
|
|
954
943
|
setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
|
|
955
944
|
}, [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
945
|
var dragHandleMessage = formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
|
|
971
946
|
br: (0, _react2.jsx)("br", null)
|
|
972
947
|
});
|
|
@@ -1068,7 +1043,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
1068
1043
|
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
|
|
1069
1044
|
,
|
|
1070
1045
|
onDrop: handleOnDrop,
|
|
1071
|
-
disabled: dragHandleDisabled,
|
|
1072
1046
|
"data-editor-block-ctrl-drag-handle": true,
|
|
1073
1047
|
"data-blocks-drag-handle": (0, _fg.fg)('confluence_remix_button_right_side_block_fg') || undefined,
|
|
1074
1048
|
"data-testid": "block-ctrl-drag-handle",
|
|
@@ -1135,22 +1109,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
1135
1109
|
css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNodeValue) && buttonWrapperStylesNoBackground, buttonWrapperStylesPatch]
|
|
1136
1110
|
}, renderButton()))));
|
|
1137
1111
|
};
|
|
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
1112
|
var buttonWithTooltip = function buttonWithTooltip() {
|
|
1155
1113
|
return (0, _react2.jsx)(_Tooltip.default, {
|
|
1156
1114
|
content: tooltipContent,
|
|
@@ -1165,13 +1123,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
|
|
|
1165
1123
|
}
|
|
1166
1124
|
}, renderButton());
|
|
1167
1125
|
};
|
|
1168
|
-
var tooltipContent = isLayoutColumn &&
|
|
1126
|
+
var tooltipContent = isLayoutColumn && currentUserIntent === 'layoutColumnMenuPopupOpen' ? null : (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
|
|
1169
1127
|
helpDescriptors: helpDescriptors
|
|
1170
1128
|
});
|
|
1171
|
-
|
|
1172
|
-
var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
|
|
1173
|
-
var render = isTooltip ? buttonWithTooltip() : renderButton();
|
|
1174
|
-
return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
|
|
1129
|
+
return (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') ? stickyWithTooltip() : buttonWithTooltip();
|
|
1175
1130
|
};
|
|
1176
1131
|
var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
|
|
1177
1132
|
var view = _ref0.view,
|
|
@@ -1184,9 +1139,9 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
|
|
|
1184
1139
|
isTopLevelNode = _ref0.isTopLevelNode,
|
|
1185
1140
|
anchorRectCache = _ref0.anchorRectCache;
|
|
1186
1141
|
var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
|
|
1187
|
-
var _states$
|
|
1142
|
+
var _states$blockControls, _states$blockControls2;
|
|
1188
1143
|
return {
|
|
1189
|
-
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
|
|
1190
1145
|
};
|
|
1191
1146
|
}).rightSideControlsEnabled;
|
|
1192
1147
|
// Layout column drag handles sit at the top-centre of each column, not on a left/right edge.
|
|
@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.shouldUseNestedDragHandleIcon = void 0;
|
|
7
|
-
|
|
8
|
-
// Nested icon for non-top-level nodes. Exception: with the
|
|
9
|
-
// kill switch OFF, layout columns use the full block handle instead.
|
|
10
|
-
// TODO: EDITOR-7732 - remove this whole function when
|
|
11
|
-
// `platform_editor_layout_column_menu_kill_switch_1` is cleaned up
|
|
7
|
+
// Nested layout columns use the full block handle; other non-top-level nodes use the nested icon.
|
|
12
8
|
var shouldUseNestedDragHandleIcon = exports.shouldUseNestedDragHandleIcon = function shouldUseNestedDragHandleIcon(isTopLevelNode, isLayoutColumn) {
|
|
13
9
|
if (isTopLevelNode) {
|
|
14
10
|
return false;
|
|
15
11
|
}
|
|
16
|
-
if (isLayoutColumn
|
|
12
|
+
if (isLayoutColumn) {
|
|
17
13
|
return false;
|
|
18
14
|
}
|
|
19
15
|
return true;
|
|
@@ -7,7 +7,6 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
|
7
7
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
9
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
10
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
10
|
import { handleKeyDownWithPreservedSelection } from './editor-commands/handle-key-down-with-preserved-selection';
|
|
12
11
|
import { mapPreservedSelection } from './editor-commands/map-preserved-selection';
|
|
13
12
|
import { moveNode } from './editor-commands/move-node';
|
|
@@ -85,7 +84,7 @@ export const blockControlsPlugin = ({
|
|
|
85
84
|
// so that adjacent cells are not fused (e.g. 'hello world' + 'foo' must not
|
|
86
85
|
// become 'hello worldfoo'). Intl.Segmenter word-counting requires correct
|
|
87
86
|
// word boundaries, which raw textContent fusion breaks.
|
|
88
|
-
if (preservedSelection instanceof CellSelection
|
|
87
|
+
if (preservedSelection instanceof CellSelection) {
|
|
89
88
|
// Use node(1) to reliably target the table node regardless of $anchorCell depth.
|
|
90
89
|
// node(-1) would return tableRow if $anchorCell is at tableCell depth.
|
|
91
90
|
const tableNode = preservedSelection.$anchorCell.node(1);
|
|
@@ -448,7 +447,7 @@ export const blockControlsPlugin = ({
|
|
|
448
447
|
stopPreservingSelection: () => stopPreservingSelection
|
|
449
448
|
},
|
|
450
449
|
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$
|
|
450
|
+
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
451
|
if (!editorState) {
|
|
453
452
|
return undefined;
|
|
454
453
|
}
|
|
@@ -462,10 +461,9 @@ export const blockControlsPlugin = ({
|
|
|
462
461
|
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
462
|
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
463
|
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,
|
|
464
|
+
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
465
|
isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
|
|
468
|
-
isSelectedViaDragHandle: (_key$getState$isSelec = (_key$
|
|
466
|
+
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
467
|
};
|
|
470
468
|
if (registryBlockControlsEnabled) {
|
|
471
469
|
const surfaces = sparseSurfacesKey.getState(editorState);
|
|
@@ -242,11 +242,6 @@ export const handleMouseOver = (view, event, api) => {
|
|
|
242
242
|
} else {
|
|
243
243
|
pos = view.posAtDOM(rootElement, 0);
|
|
244
244
|
}
|
|
245
|
-
if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && !expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
|
|
246
|
-
// Don't show drag handle for layout column in a single column layout,
|
|
247
|
-
// unless the layout column menu is enabled (menu needs the handle to be accessible).
|
|
248
|
-
return false;
|
|
249
|
-
}
|
|
250
245
|
const targetPos = view.state.doc.resolve(pos).pos;
|
|
251
246
|
let rootAnchorName;
|
|
252
247
|
let rootNodeType;
|