@atlaskit/editor-plugin-block-controls 8.0.2 → 8.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 +7 -0
- package/dist/cjs/pm-plugins/utils/getSelection.js +15 -41
- package/dist/cjs/pm-plugins/utils/selection.js +2 -6
- package/dist/cjs/ui/drag-handle.js +4 -3
- package/dist/es2019/pm-plugins/utils/getSelection.js +12 -38
- package/dist/es2019/pm-plugins/utils/selection.js +1 -4
- package/dist/es2019/ui/drag-handle.js +5 -4
- package/dist/esm/pm-plugins/utils/getSelection.js +14 -40
- package/dist/esm/pm-plugins/utils/selection.js +2 -6
- package/dist/esm/ui/drag-handle.js +5 -4
- package/dist/types/pm-plugins/utils/getSelection.d.ts +0 -13
- package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts +0 -13
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 8.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`fabf67c3ca239`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fabf67c3ca239) -
|
|
8
|
+
EDITOR-4191 Use node selection for all nodes selected via drag handle
|
|
9
|
+
|
|
3
10
|
## 8.0.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isNodeWithCodeBlock = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos =
|
|
6
|
+
exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isNodeWithCodeBlock = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
|
|
7
7
|
var _selection2 = require("@atlaskit/editor-common/selection");
|
|
8
8
|
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
|
|
9
9
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
@@ -86,22 +86,22 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
|
|
|
86
86
|
var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
|
|
87
87
|
var nodeSize = node ? node.nodeSize : 1;
|
|
88
88
|
var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
|
|
89
|
+
if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
|
|
90
|
+
// if mediaGroup only has a single child, we want to select the child
|
|
91
|
+
if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
|
|
92
|
+
var $mediaStartPos = doc.resolve(start + 1);
|
|
93
|
+
return new _state.NodeSelection($mediaStartPos);
|
|
94
|
+
}
|
|
95
|
+
return new _state.NodeSelection(doc.resolve(start));
|
|
96
|
+
}
|
|
89
97
|
|
|
90
98
|
// this is a fix for empty paragraph selection - put first to avoid any extra work
|
|
91
|
-
if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0
|
|
99
|
+
if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
|
|
92
100
|
return false;
|
|
93
101
|
}
|
|
94
|
-
var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
|
|
95
|
-
var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.textContent) === '';
|
|
96
|
-
|
|
97
|
-
// if block menu and empty line format menu are enabled,
|
|
98
|
-
// we want to set the selection to avoid the selection goes to the top of the document
|
|
99
|
-
if ((isParagraphHeadingEmpty || isListEmpty) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
|
|
100
|
-
return _state.TextSelection.create(doc, start + 1, start + 1);
|
|
101
|
-
}
|
|
102
102
|
var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
|
|
103
103
|
var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
|
|
104
|
-
if (isNodeSelection &&
|
|
104
|
+
if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
|
|
105
105
|
// decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
|
|
106
106
|
['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
|
|
107
107
|
return new _state.NodeSelection(doc.resolve(start));
|
|
@@ -109,10 +109,10 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
|
|
|
109
109
|
|
|
110
110
|
// if mediaGroup only has a single child, we want to select the child
|
|
111
111
|
if (nodeName === 'mediaGroup') {
|
|
112
|
-
var $mediaStartPos = doc.resolve(start + 1);
|
|
113
|
-
return new _state.NodeSelection($mediaStartPos);
|
|
112
|
+
var _$mediaStartPos = doc.resolve(start + 1);
|
|
113
|
+
return new _state.NodeSelection(_$mediaStartPos);
|
|
114
114
|
}
|
|
115
|
-
if (nodeName === 'taskList'
|
|
115
|
+
if (nodeName === 'taskList') {
|
|
116
116
|
return _state.TextSelection.create(doc, start, start + nodeSize);
|
|
117
117
|
}
|
|
118
118
|
var _getInlineNodePos2 = getInlineNodePos(doc, start, nodeSize),
|
|
@@ -121,7 +121,7 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
|
|
|
121
121
|
return new _state.TextSelection(doc.resolve(inlineNodePos), doc.resolve(inlineNodeEndPos));
|
|
122
122
|
};
|
|
123
123
|
var getSelection = exports.getSelection = function getSelection(tr, start, api) {
|
|
124
|
-
if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
|
|
124
|
+
if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
|
|
125
125
|
return newGetSelection(tr.doc, tr.selection.empty, start);
|
|
126
126
|
}
|
|
127
127
|
return oldGetSelection(tr, start);
|
|
@@ -219,30 +219,4 @@ var rootTaskListDepth = exports.rootTaskListDepth = function rootTaskListDepth(t
|
|
|
219
219
|
}
|
|
220
220
|
}
|
|
221
221
|
return depth;
|
|
222
|
-
};
|
|
223
|
-
|
|
224
|
-
/**
|
|
225
|
-
* Collapses the given $from and $to resolved positions to the nearest valid selection range.
|
|
226
|
-
*
|
|
227
|
-
* Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
|
|
228
|
-
*
|
|
229
|
-
* @param $from the resolved start position
|
|
230
|
-
* @param $to the resolved end position
|
|
231
|
-
* @returns An object containing the collapsed $from and $to resolved positions
|
|
232
|
-
*/
|
|
233
|
-
var collapseToSelectionRange = exports.collapseToSelectionRange = function collapseToSelectionRange($from, $to) {
|
|
234
|
-
var _$to$nodeBefore$nodeS, _$to$nodeBefore;
|
|
235
|
-
// Get the selections that would be made for the first and last node in the range
|
|
236
|
-
// We re-use the getSelection logic as it already handles various node types and edge cases
|
|
237
|
-
// always pass true for selectionEmpty to emulate a cursor selection within the node
|
|
238
|
-
var firstNodeSelection = newGetSelection($from.doc, true, $from.pos);
|
|
239
|
-
var lastNodeSize = (_$to$nodeBefore$nodeS = (_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.nodeSize) !== null && _$to$nodeBefore$nodeS !== void 0 ? _$to$nodeBefore$nodeS : 0;
|
|
240
|
-
var lastNodeStartPos = $to.pos - lastNodeSize;
|
|
241
|
-
var lastNodeSelection = newGetSelection($from.doc, true, lastNodeStartPos);
|
|
242
|
-
|
|
243
|
-
// Return a selection spanning from the start of the first node selection to the end of the last node selection
|
|
244
|
-
return {
|
|
245
|
-
$from: $from.doc.resolve(firstNodeSelection ? firstNodeSelection.from : $from.pos),
|
|
246
|
-
$to: $to.doc.resolve(lastNodeSelection ? lastNodeSelection.to : $to.pos)
|
|
247
|
-
};
|
|
248
222
|
};
|
|
@@ -7,7 +7,6 @@ exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMu
|
|
|
7
7
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var _main = require("../main");
|
|
10
|
-
var _getSelection = require("./getSelection");
|
|
11
10
|
var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
|
|
12
11
|
var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
|
|
13
12
|
var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
|
|
@@ -112,11 +111,8 @@ var mapPreservedSelection = exports.mapPreservedSelection = function mapPreserve
|
|
|
112
111
|
if (isSelectionEmpty && expandedSelectionEmpty) {
|
|
113
112
|
return _state.TextSelection.create(tr.doc, from);
|
|
114
113
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
var _collapseToSelectionR = (0, _getSelection.collapseToSelectionRange)(expanded.$from, expanded.$to),
|
|
118
|
-
$from = _collapseToSelectionR.$from,
|
|
119
|
-
$to = _collapseToSelectionR.$to;
|
|
114
|
+
var $from = expanded.$from,
|
|
115
|
+
$to = expanded.$to;
|
|
120
116
|
|
|
121
117
|
// stop preserving if preserved selection becomes invalid
|
|
122
118
|
if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
|
|
@@ -23,6 +23,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
|
|
|
23
23
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
24
24
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
25
25
|
var _consts = require("@atlaskit/editor-shared-styles/consts");
|
|
26
|
+
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
26
27
|
var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
|
|
27
28
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
28
29
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
@@ -381,10 +382,10 @@ var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
|
|
|
381
382
|
|
|
382
383
|
// Set selection to expanded selection range if it encompases the clicked drag handle
|
|
383
384
|
if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && (0, _selection.isMultiBlockRange)(expandedRange.range)) {
|
|
384
|
-
var collapsed = (0, _getSelection.collapseToSelectionRange)(expandedRange.$from, expandedRange.$to);
|
|
385
|
-
|
|
386
385
|
// Then create a selection from the start of the first node to the end of the last node
|
|
387
|
-
tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from,
|
|
386
|
+
tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
|
|
387
|
+
} else if (nodeType === 'table') {
|
|
388
|
+
(0, _utils2.selectTableClosestToPos)(tr, tr.doc.resolve(startPos + 1));
|
|
388
389
|
} else {
|
|
389
390
|
// Select the clicked drag handle's node only
|
|
390
391
|
(0, _getSelection.selectNode)(tr, startPos, nodeType, api);
|
|
@@ -81,22 +81,22 @@ const newGetSelection = (doc, selectionEmpty, start) => {
|
|
|
81
81
|
const isNodeSelection = node && NodeSelection.isSelectable(node);
|
|
82
82
|
const nodeSize = node ? node.nodeSize : 1;
|
|
83
83
|
const nodeName = node === null || node === void 0 ? void 0 : node.type.name;
|
|
84
|
+
if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
85
|
+
// if mediaGroup only has a single child, we want to select the child
|
|
86
|
+
if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
|
|
87
|
+
const $mediaStartPos = doc.resolve(start + 1);
|
|
88
|
+
return new NodeSelection($mediaStartPos);
|
|
89
|
+
}
|
|
90
|
+
return new NodeSelection(doc.resolve(start));
|
|
91
|
+
}
|
|
84
92
|
|
|
85
93
|
// this is a fix for empty paragraph selection - put first to avoid any extra work
|
|
86
|
-
if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0
|
|
94
|
+
if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
|
|
87
95
|
return false;
|
|
88
96
|
}
|
|
89
|
-
const isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
|
|
90
|
-
const isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.textContent) === '';
|
|
91
|
-
|
|
92
|
-
// if block menu and empty line format menu are enabled,
|
|
93
|
-
// we want to set the selection to avoid the selection goes to the top of the document
|
|
94
|
-
if ((isParagraphHeadingEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
95
|
-
return TextSelection.create(doc, start + 1, start + 1);
|
|
96
|
-
}
|
|
97
97
|
const isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
|
|
98
98
|
const isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
|
|
99
|
-
if (isNodeSelection &&
|
|
99
|
+
if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
|
|
100
100
|
// decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
|
|
101
101
|
['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
|
|
102
102
|
return new NodeSelection(doc.resolve(start));
|
|
@@ -107,7 +107,7 @@ const newGetSelection = (doc, selectionEmpty, start) => {
|
|
|
107
107
|
const $mediaStartPos = doc.resolve(start + 1);
|
|
108
108
|
return new NodeSelection($mediaStartPos);
|
|
109
109
|
}
|
|
110
|
-
if (nodeName === 'taskList'
|
|
110
|
+
if (nodeName === 'taskList') {
|
|
111
111
|
return TextSelection.create(doc, start, start + nodeSize);
|
|
112
112
|
}
|
|
113
113
|
const {
|
|
@@ -117,7 +117,7 @@ const newGetSelection = (doc, selectionEmpty, start) => {
|
|
|
117
117
|
return new TextSelection(doc.resolve(inlineNodePos), doc.resolve(inlineNodeEndPos));
|
|
118
118
|
};
|
|
119
119
|
export const getSelection = (tr, start, api) => {
|
|
120
|
-
if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
|
|
120
|
+
if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
121
121
|
return newGetSelection(tr.doc, tr.selection.empty, start);
|
|
122
122
|
}
|
|
123
123
|
return oldGetSelection(tr, start);
|
|
@@ -216,30 +216,4 @@ export const rootTaskListDepth = taskListPos => {
|
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
return depth;
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Collapses the given $from and $to resolved positions to the nearest valid selection range.
|
|
223
|
-
*
|
|
224
|
-
* Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
|
|
225
|
-
*
|
|
226
|
-
* @param $from the resolved start position
|
|
227
|
-
* @param $to the resolved end position
|
|
228
|
-
* @returns An object containing the collapsed $from and $to resolved positions
|
|
229
|
-
*/
|
|
230
|
-
export const collapseToSelectionRange = ($from, $to) => {
|
|
231
|
-
var _$to$nodeBefore$nodeS, _$to$nodeBefore;
|
|
232
|
-
// Get the selections that would be made for the first and last node in the range
|
|
233
|
-
// We re-use the getSelection logic as it already handles various node types and edge cases
|
|
234
|
-
// always pass true for selectionEmpty to emulate a cursor selection within the node
|
|
235
|
-
const firstNodeSelection = newGetSelection($from.doc, true, $from.pos);
|
|
236
|
-
const lastNodeSize = (_$to$nodeBefore$nodeS = (_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.nodeSize) !== null && _$to$nodeBefore$nodeS !== void 0 ? _$to$nodeBefore$nodeS : 0;
|
|
237
|
-
const lastNodeStartPos = $to.pos - lastNodeSize;
|
|
238
|
-
const lastNodeSelection = newGetSelection($from.doc, true, lastNodeStartPos);
|
|
239
|
-
|
|
240
|
-
// Return a selection spanning from the start of the first node selection to the end of the last node selection
|
|
241
|
-
return {
|
|
242
|
-
$from: $from.doc.resolve(firstNodeSelection ? firstNodeSelection.from : $from.pos),
|
|
243
|
-
$to: $to.doc.resolve(lastNodeSelection ? lastNodeSelection.to : $to.pos)
|
|
244
|
-
};
|
|
245
219
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { expandToBlockRange } from '@atlaskit/editor-common/selection';
|
|
2
2
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { getBlockControlsMeta, key } from '../main';
|
|
4
|
-
import { collapseToSelectionRange } from './getSelection';
|
|
5
4
|
export const getMultiSelectionIfPosInside = (api, pos, tr) => {
|
|
6
5
|
var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
|
|
7
6
|
const pluginState = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
|
|
@@ -108,12 +107,10 @@ export const mapPreservedSelection = (selection, tr) => {
|
|
|
108
107
|
if (isSelectionEmpty && expandedSelectionEmpty) {
|
|
109
108
|
return TextSelection.create(tr.doc, from);
|
|
110
109
|
}
|
|
111
|
-
|
|
112
|
-
// collapse the expanded range to a valid selection range
|
|
113
110
|
const {
|
|
114
111
|
$from,
|
|
115
112
|
$to
|
|
116
|
-
} =
|
|
113
|
+
} = expanded;
|
|
117
114
|
|
|
118
115
|
// stop preserving if preserved selection becomes invalid
|
|
119
116
|
if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
|
|
@@ -20,6 +20,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
|
|
|
20
20
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
21
21
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
22
22
|
import { akEditorFullPageNarrowBreakout, akEditorTableToolbarSize, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
|
|
23
|
+
import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
|
|
23
24
|
import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
|
|
24
25
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
25
26
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
@@ -35,7 +36,7 @@ import { key } from '../pm-plugins/main';
|
|
|
35
36
|
import { selectionPreservationPluginKey } from '../pm-plugins/selection-preservation/plugin-key';
|
|
36
37
|
import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
|
|
37
38
|
import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
|
|
38
|
-
import {
|
|
39
|
+
import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
|
|
39
40
|
import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
|
|
40
41
|
import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
|
|
41
42
|
import { dragPreview } from './drag-preview';
|
|
@@ -378,10 +379,10 @@ const expandAndUpdateSelection = ({
|
|
|
378
379
|
|
|
379
380
|
// Set selection to expanded selection range if it encompases the clicked drag handle
|
|
380
381
|
if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiBlockRange(expandedRange.range)) {
|
|
381
|
-
const collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
|
|
382
|
-
|
|
383
382
|
// Then create a selection from the start of the first node to the end of the last node
|
|
384
|
-
tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from,
|
|
383
|
+
tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
|
|
384
|
+
} else if (nodeType === 'table') {
|
|
385
|
+
selectTableClosestToPos(tr, tr.doc.resolve(startPos + 1));
|
|
385
386
|
} else {
|
|
386
387
|
// Select the clicked drag handle's node only
|
|
387
388
|
selectNode(tr, startPos, nodeType, api);
|
|
@@ -80,22 +80,22 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
|
|
|
80
80
|
var isNodeSelection = node && NodeSelection.isSelectable(node);
|
|
81
81
|
var nodeSize = node ? node.nodeSize : 1;
|
|
82
82
|
var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
|
|
83
|
+
if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
84
|
+
// if mediaGroup only has a single child, we want to select the child
|
|
85
|
+
if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
|
|
86
|
+
var $mediaStartPos = doc.resolve(start + 1);
|
|
87
|
+
return new NodeSelection($mediaStartPos);
|
|
88
|
+
}
|
|
89
|
+
return new NodeSelection(doc.resolve(start));
|
|
90
|
+
}
|
|
83
91
|
|
|
84
92
|
// this is a fix for empty paragraph selection - put first to avoid any extra work
|
|
85
|
-
if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0
|
|
93
|
+
if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
|
|
86
94
|
return false;
|
|
87
95
|
}
|
|
88
|
-
var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
|
|
89
|
-
var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && (node === null || node === void 0 ? void 0 : node.textContent) === '';
|
|
90
|
-
|
|
91
|
-
// if block menu and empty line format menu are enabled,
|
|
92
|
-
// we want to set the selection to avoid the selection goes to the top of the document
|
|
93
|
-
if ((isParagraphHeadingEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
94
|
-
return TextSelection.create(doc, start + 1, start + 1);
|
|
95
|
-
}
|
|
96
96
|
var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
|
|
97
97
|
var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
|
|
98
|
-
if (isNodeSelection &&
|
|
98
|
+
if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
|
|
99
99
|
// decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
|
|
100
100
|
['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
|
|
101
101
|
return new NodeSelection(doc.resolve(start));
|
|
@@ -103,10 +103,10 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
|
|
|
103
103
|
|
|
104
104
|
// if mediaGroup only has a single child, we want to select the child
|
|
105
105
|
if (nodeName === 'mediaGroup') {
|
|
106
|
-
var $mediaStartPos = doc.resolve(start + 1);
|
|
107
|
-
return new NodeSelection($mediaStartPos);
|
|
106
|
+
var _$mediaStartPos = doc.resolve(start + 1);
|
|
107
|
+
return new NodeSelection(_$mediaStartPos);
|
|
108
108
|
}
|
|
109
|
-
if (nodeName === 'taskList'
|
|
109
|
+
if (nodeName === 'taskList') {
|
|
110
110
|
return TextSelection.create(doc, start, start + nodeSize);
|
|
111
111
|
}
|
|
112
112
|
var _getInlineNodePos2 = getInlineNodePos(doc, start, nodeSize),
|
|
@@ -115,7 +115,7 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
|
|
|
115
115
|
return new TextSelection(doc.resolve(inlineNodePos), doc.resolve(inlineNodeEndPos));
|
|
116
116
|
};
|
|
117
117
|
export var getSelection = function getSelection(tr, start, api) {
|
|
118
|
-
if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
|
|
118
|
+
if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
|
|
119
119
|
return newGetSelection(tr.doc, tr.selection.empty, start);
|
|
120
120
|
}
|
|
121
121
|
return oldGetSelection(tr, start);
|
|
@@ -213,30 +213,4 @@ export var rootTaskListDepth = function rootTaskListDepth(taskListPos) {
|
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
215
|
return depth;
|
|
216
|
-
};
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Collapses the given $from and $to resolved positions to the nearest valid selection range.
|
|
220
|
-
*
|
|
221
|
-
* Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
|
|
222
|
-
*
|
|
223
|
-
* @param $from the resolved start position
|
|
224
|
-
* @param $to the resolved end position
|
|
225
|
-
* @returns An object containing the collapsed $from and $to resolved positions
|
|
226
|
-
*/
|
|
227
|
-
export var collapseToSelectionRange = function collapseToSelectionRange($from, $to) {
|
|
228
|
-
var _$to$nodeBefore$nodeS, _$to$nodeBefore;
|
|
229
|
-
// Get the selections that would be made for the first and last node in the range
|
|
230
|
-
// We re-use the getSelection logic as it already handles various node types and edge cases
|
|
231
|
-
// always pass true for selectionEmpty to emulate a cursor selection within the node
|
|
232
|
-
var firstNodeSelection = newGetSelection($from.doc, true, $from.pos);
|
|
233
|
-
var lastNodeSize = (_$to$nodeBefore$nodeS = (_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.nodeSize) !== null && _$to$nodeBefore$nodeS !== void 0 ? _$to$nodeBefore$nodeS : 0;
|
|
234
|
-
var lastNodeStartPos = $to.pos - lastNodeSize;
|
|
235
|
-
var lastNodeSelection = newGetSelection($from.doc, true, lastNodeStartPos);
|
|
236
|
-
|
|
237
|
-
// Return a selection spanning from the start of the first node selection to the end of the last node selection
|
|
238
|
-
return {
|
|
239
|
-
$from: $from.doc.resolve(firstNodeSelection ? firstNodeSelection.from : $from.pos),
|
|
240
|
-
$to: $to.doc.resolve(lastNodeSelection ? lastNodeSelection.to : $to.pos)
|
|
241
|
-
};
|
|
242
216
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { expandToBlockRange } from '@atlaskit/editor-common/selection';
|
|
2
2
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { getBlockControlsMeta, key } from '../main';
|
|
4
|
-
import { collapseToSelectionRange } from './getSelection';
|
|
5
4
|
export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
|
|
6
5
|
var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
|
|
7
6
|
var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
|
|
@@ -106,11 +105,8 @@ export var mapPreservedSelection = function mapPreservedSelection(selection, tr)
|
|
|
106
105
|
if (isSelectionEmpty && expandedSelectionEmpty) {
|
|
107
106
|
return TextSelection.create(tr.doc, from);
|
|
108
107
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
var _collapseToSelectionR = collapseToSelectionRange(expanded.$from, expanded.$to),
|
|
112
|
-
$from = _collapseToSelectionR.$from,
|
|
113
|
-
$to = _collapseToSelectionR.$to;
|
|
108
|
+
var $from = expanded.$from,
|
|
109
|
+
$to = expanded.$to;
|
|
114
110
|
|
|
115
111
|
// stop preserving if preserved selection becomes invalid
|
|
116
112
|
if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
|
|
@@ -25,6 +25,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
|
|
|
25
25
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
26
26
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
27
27
|
import { akEditorFullPageNarrowBreakout, akEditorTableToolbarSize, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
|
|
28
|
+
import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
|
|
28
29
|
import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
|
|
29
30
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
30
31
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
@@ -40,7 +41,7 @@ import { key } from '../pm-plugins/main';
|
|
|
40
41
|
import { selectionPreservationPluginKey } from '../pm-plugins/selection-preservation/plugin-key';
|
|
41
42
|
import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
|
|
42
43
|
import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
|
|
43
|
-
import {
|
|
44
|
+
import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
|
|
44
45
|
import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
|
|
45
46
|
import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
|
|
46
47
|
import { dragPreview } from './drag-preview';
|
|
@@ -378,10 +379,10 @@ var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
|
|
|
378
379
|
|
|
379
380
|
// Set selection to expanded selection range if it encompases the clicked drag handle
|
|
380
381
|
if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiBlockRange(expandedRange.range)) {
|
|
381
|
-
var collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
|
|
382
|
-
|
|
383
382
|
// Then create a selection from the start of the first node to the end of the last node
|
|
384
|
-
tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from,
|
|
383
|
+
tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
|
|
384
|
+
} else if (nodeType === 'table') {
|
|
385
|
+
selectTableClosestToPos(tr, tr.doc.resolve(startPos + 1));
|
|
385
386
|
} else {
|
|
386
387
|
// Select the clicked drag handle's node only
|
|
387
388
|
selectNode(tr, startPos, nodeType, api);
|
|
@@ -20,16 +20,3 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
|
|
|
20
20
|
export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
|
|
21
21
|
export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
|
|
22
22
|
export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;
|
|
23
|
-
/**
|
|
24
|
-
* Collapses the given $from and $to resolved positions to the nearest valid selection range.
|
|
25
|
-
*
|
|
26
|
-
* Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
|
|
27
|
-
*
|
|
28
|
-
* @param $from the resolved start position
|
|
29
|
-
* @param $to the resolved end position
|
|
30
|
-
* @returns An object containing the collapsed $from and $to resolved positions
|
|
31
|
-
*/
|
|
32
|
-
export declare const collapseToSelectionRange: ($from: ResolvedPos, $to: ResolvedPos) => {
|
|
33
|
-
$from: ResolvedPos;
|
|
34
|
-
$to: ResolvedPos;
|
|
35
|
-
};
|
|
@@ -20,16 +20,3 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
|
|
|
20
20
|
export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
|
|
21
21
|
export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
|
|
22
22
|
export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;
|
|
23
|
-
/**
|
|
24
|
-
* Collapses the given $from and $to resolved positions to the nearest valid selection range.
|
|
25
|
-
*
|
|
26
|
-
* Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
|
|
27
|
-
*
|
|
28
|
-
* @param $from the resolved start position
|
|
29
|
-
* @param $to the resolved end position
|
|
30
|
-
* @returns An object containing the collapsed $from and $to resolved positions
|
|
31
|
-
*/
|
|
32
|
-
export declare const collapseToSelectionRange: ($from: ResolvedPos, $to: ResolvedPos) => {
|
|
33
|
-
$from: ResolvedPos;
|
|
34
|
-
$to: ResolvedPos;
|
|
35
|
-
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.3",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,14 +47,14 @@
|
|
|
47
47
|
"@atlaskit/editor-shared-styles": "^3.10.0",
|
|
48
48
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
49
49
|
"@atlaskit/icon": "^29.3.0",
|
|
50
|
-
"@atlaskit/link": "^3.
|
|
50
|
+
"@atlaskit/link": "^3.3.0",
|
|
51
51
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
54
54
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
|
|
55
55
|
"@atlaskit/primitives": "^17.0.0",
|
|
56
56
|
"@atlaskit/theme": "^21.0.0",
|
|
57
|
-
"@atlaskit/tmp-editor-statsig": "^16.
|
|
57
|
+
"@atlaskit/tmp-editor-statsig": "^16.4.0",
|
|
58
58
|
"@atlaskit/tokens": "^9.0.0",
|
|
59
59
|
"@atlaskit/tooltip": "^20.11.0",
|
|
60
60
|
"@babel/runtime": "^7.0.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"uuid": "^3.1.0"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
|
-
"@atlaskit/editor-common": "^111.
|
|
69
|
+
"@atlaskit/editor-common": "^111.2.0",
|
|
70
70
|
"react": "^18.2.0",
|
|
71
71
|
"react-dom": "^18.2.0",
|
|
72
72
|
"react-intl-next": "npm:react-intl@^5.18.1"
|