@atlaskit/editor-plugin-block-controls 3.5.3 → 3.6.0
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/editor-commands/move-node.js +8 -8
- package/dist/cjs/pm-plugins/main.js +8 -5
- package/dist/cjs/ui/drag-handle.js +3 -5
- package/dist/cjs/ui/quick-insert-button.js +38 -15
- package/dist/cjs/ui/utils/document-checks.js +12 -1
- package/dist/es2019/editor-commands/move-node.js +8 -8
- package/dist/es2019/pm-plugins/main.js +8 -5
- package/dist/es2019/ui/drag-handle.js +3 -5
- package/dist/es2019/ui/quick-insert-button.js +38 -16
- package/dist/es2019/ui/utils/document-checks.js +12 -1
- package/dist/esm/editor-commands/move-node.js +8 -8
- package/dist/esm/pm-plugins/main.js +8 -5
- package/dist/esm/ui/drag-handle.js +3 -5
- package/dist/esm/ui/quick-insert-button.js +39 -16
- package/dist/esm/ui/utils/document-checks.js +12 -1
- package/dist/types/ui/utils/document-checks.d.ts +1 -0
- package/dist/types-ts4.5/ui/utils/document-checks.d.ts +1 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 3.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#134217](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134217)
|
|
8
|
+
[`96617e3a637fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96617e3a637fe) -
|
|
9
|
+
ED-27127 updated text selection insertion logic
|
|
10
|
+
|
|
11
|
+
## 3.5.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#131064](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131064)
|
|
16
|
+
[`24cad3d2de85a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24cad3d2de85a) -
|
|
17
|
+
ED-27155: Clean up platform_editor_advanced_layouts_accessibility
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 3.5.3
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -158,7 +158,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
158
158
|
var nodeIndex = $currentNodePos.index();
|
|
159
159
|
var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
|
|
160
160
|
if (direction === _consts.DIRECTION.LEFT && shouldEnableNestedDndA11y) {
|
|
161
|
-
if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)
|
|
161
|
+
if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
162
162
|
var _api$core, _api$core2;
|
|
163
163
|
var nodeBefore = $currentNodePos.nodeBefore;
|
|
164
164
|
if (nodeBefore) {
|
|
@@ -183,7 +183,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
183
183
|
});
|
|
184
184
|
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
|
|
185
185
|
return true;
|
|
186
|
-
} else if (isLayoutColumnSelected
|
|
186
|
+
} else if (isLayoutColumnSelected) {
|
|
187
187
|
var _$currentNodePos$node, _api$core3, _api$blockControls2;
|
|
188
188
|
moveToPos = selection.from - (((_$currentNodePos$node = $currentNodePos.nodeBefore) === null || _$currentNodePos$node === void 0 ? void 0 : _$currentNodePos$node.nodeSize) || 1);
|
|
189
189
|
api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
|
|
@@ -202,7 +202,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
202
202
|
moveToPos = $currentNodePos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
|
|
203
203
|
}
|
|
204
204
|
} else if (direction === _consts.DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
|
|
205
|
-
if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)
|
|
205
|
+
if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
206
206
|
var _api$core4, _api$core5;
|
|
207
207
|
var endOfDoc = $currentNodePos.end();
|
|
208
208
|
moveToPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
|
|
@@ -224,7 +224,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
224
224
|
});
|
|
225
225
|
api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.focus();
|
|
226
226
|
return true;
|
|
227
|
-
} else if (isLayoutColumnSelected
|
|
227
|
+
} else if (isLayoutColumnSelected) {
|
|
228
228
|
var _api$core6, _api$blockControls4;
|
|
229
229
|
var _index = $currentNodePos.index($currentNodePos.depth);
|
|
230
230
|
var parent = $currentNodePos.node($currentNodePos.depth);
|
|
@@ -250,7 +250,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
250
250
|
moveToPos = $currentNodePos.after($currentNodePos.depth) + 1;
|
|
251
251
|
}
|
|
252
252
|
} else if (direction === _consts.DIRECTION.UP) {
|
|
253
|
-
if (isLayoutColumnSelected
|
|
253
|
+
if (isLayoutColumnSelected) {
|
|
254
254
|
moveToPos = $currentNodePos.start() - 1;
|
|
255
255
|
} else {
|
|
256
256
|
var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
|
|
@@ -263,7 +263,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
263
263
|
if (nodeAfterPos > _endOfDoc) {
|
|
264
264
|
return false;
|
|
265
265
|
}
|
|
266
|
-
if (isLayoutColumnSelected
|
|
266
|
+
if (isLayoutColumnSelected) {
|
|
267
267
|
moveToPos = state.selection.$from.end() + 1;
|
|
268
268
|
} else {
|
|
269
269
|
var nodeAfter = state.doc.nodeAt(nodeAfterPos);
|
|
@@ -278,10 +278,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
|
|
|
278
278
|
if (moveToPos > -1 && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_2')) {
|
|
279
279
|
var isDestDepthSameAsSource = $currentNodePos.depth === state.doc.resolve(moveToPos).depth;
|
|
280
280
|
var isSourceLayoutColumn = nodeType === 'layoutColumn';
|
|
281
|
-
shouldMoveNode = (shouldEnableNestedDndA11y ? isDestDepthSameAsSource || isSourceLayoutColumn : true) || isSourceLayoutColumn
|
|
281
|
+
shouldMoveNode = (shouldEnableNestedDndA11y ? isDestDepthSameAsSource || isSourceLayoutColumn : true) || isSourceLayoutColumn;
|
|
282
282
|
} else {
|
|
283
283
|
// only move the node if the destination is at the same depth, not support moving a nested node to a parent node
|
|
284
|
-
shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn'
|
|
284
|
+
shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn';
|
|
285
285
|
}
|
|
286
286
|
var _expandSelectionBound = (0, _selection.expandSelectionBounds)($currentNodePos, selection.$to),
|
|
287
287
|
$newAnchor = _expandSelectionBound.$anchor,
|
|
@@ -208,12 +208,15 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
|
|
|
208
208
|
numReplaceSteps = _getTrMetadata.numReplaceSteps,
|
|
209
209
|
isAllText = _getTrMetadata.isAllText,
|
|
210
210
|
isReplacedWithSameSize = _getTrMetadata.isReplacedWithSameSize;
|
|
211
|
+
var meta = tr.getMeta(key);
|
|
211
212
|
|
|
212
213
|
// When steps exist, remap existing decorations, activeNode and multi select positions
|
|
213
214
|
if (tr.docChanged) {
|
|
214
215
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
215
|
-
|
|
216
|
-
|
|
216
|
+
|
|
217
|
+
// don't remap activeNode if it's being dragged
|
|
218
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
|
|
219
|
+
if (activeNode) {
|
|
217
220
|
var mappedPos = tr.mapping.mapResult(activeNode.pos);
|
|
218
221
|
isActiveNodeDeleted = mappedPos.deleted;
|
|
219
222
|
activeNode = {
|
|
@@ -221,7 +224,9 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
|
|
|
221
224
|
anchorName: activeNode.anchorName,
|
|
222
225
|
nodeType: activeNode.nodeType
|
|
223
226
|
};
|
|
224
|
-
}
|
|
227
|
+
}
|
|
228
|
+
} else {
|
|
229
|
+
if (activeNode && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== true) {
|
|
225
230
|
var _mappedRootPos$pos, _mappedRootPos;
|
|
226
231
|
var _mappedPos = tr.mapping.mapResult(activeNode.pos, -1);
|
|
227
232
|
isActiveNodeDeleted = _mappedPos.deletedAfter;
|
|
@@ -245,7 +250,6 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
|
|
|
245
250
|
multiSelectDnD.head = tr.mapping.map(multiSelectDnD.head);
|
|
246
251
|
}
|
|
247
252
|
}
|
|
248
|
-
var meta = tr.getMeta(key);
|
|
249
253
|
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
250
254
|
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
251
255
|
multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
|
|
@@ -295,7 +299,6 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
|
|
|
295
299
|
}
|
|
296
300
|
}
|
|
297
301
|
} else {
|
|
298
|
-
// active node may have been deleted or replaced with another of the same size, if replaced go ahead and remap the active node
|
|
299
302
|
if (latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
|
|
300
303
|
var _nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
|
|
301
304
|
var rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
|
|
@@ -561,7 +561,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
561
561
|
setDragHandleDisabled(false);
|
|
562
562
|
}
|
|
563
563
|
}, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
|
|
564
|
-
var helpDescriptors = isTopLevelNode
|
|
564
|
+
var helpDescriptors = isTopLevelNode ? [{
|
|
565
565
|
description: formatMessage(_messages.blockControlsMessages.dragToMove)
|
|
566
566
|
}, {
|
|
567
567
|
description: formatMessage(_messages.blockControlsMessages.moveUp),
|
|
@@ -585,7 +585,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
585
585
|
keymap: _keymaps.dragToMoveDown
|
|
586
586
|
}];
|
|
587
587
|
var isParentNodeOfTypeLayout;
|
|
588
|
-
if (!isTopLevelNode && (
|
|
588
|
+
if (!isTopLevelNode && (0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
589
589
|
var pos = getPos();
|
|
590
590
|
if (typeof pos === 'number') {
|
|
591
591
|
var _$pos$parent;
|
|
@@ -605,7 +605,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
605
605
|
|
|
606
606
|
// When advanced layout is on, layout column drag handle show only show 'Drag to move', no shortcuts
|
|
607
607
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true) && nodeType === 'layoutColumn') {
|
|
608
|
-
helpDescriptors =
|
|
608
|
+
helpDescriptors = [{
|
|
609
609
|
description: formatMessage(_messages.blockControlsMessages.dragToRearrange)
|
|
610
610
|
}, {
|
|
611
611
|
description: formatMessage(_messages.blockControlsMessages.moveUp),
|
|
@@ -619,8 +619,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
619
619
|
}, {
|
|
620
620
|
description: formatMessage(_messages.blockControlsMessages.moveRight),
|
|
621
621
|
keymap: _keymaps.dragToMoveRight
|
|
622
|
-
}] : [{
|
|
623
|
-
description: formatMessage(_messages.blockControlsMessages.dragToMove)
|
|
624
622
|
}];
|
|
625
623
|
}
|
|
626
624
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
@@ -13,7 +13,9 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
|
13
13
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
14
14
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
15
15
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
16
|
+
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
16
17
|
var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
|
|
18
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
19
|
var _primitives = require("@atlaskit/primitives");
|
|
18
20
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
19
21
|
var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
|
|
@@ -23,6 +25,7 @@ var _documentChecks = require("./utils/document-checks");
|
|
|
23
25
|
var _editorCommands = require("./utils/editor-commands");
|
|
24
26
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
25
27
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
28
|
+
var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
|
|
26
29
|
var buttonStyles = (0, _primitives.xcss)({
|
|
27
30
|
boxSizing: 'border-box',
|
|
28
31
|
display: 'flex',
|
|
@@ -140,22 +143,42 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
140
143
|
if (!(0, _documentChecks.isSelectionInNode)(start, view) || (0, _documentChecks.isNonEditableBlock)(start, view)) {
|
|
141
144
|
api.core.actions.execute((0, _editorCommands.createNewLine)(start));
|
|
142
145
|
}
|
|
143
|
-
if ((0, _documentChecks.isSelectionInNode)(start, view)
|
|
144
|
-
//
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
var
|
|
153
|
-
|
|
154
|
-
|
|
146
|
+
if ((0, _documentChecks.isSelectionInNode)(start, view)) {
|
|
147
|
+
// text or element with be deselected and the / added immediately after the paragraph
|
|
148
|
+
// unless the selection is empty
|
|
149
|
+
var currentSelection = view.state.selection;
|
|
150
|
+
if ((0, _documentChecks.isInTextSelection)(view) && currentSelection.from !== currentSelection.to && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
|
|
151
|
+
var currentParagraphNode = (0, _utils.findParentNode)(function (node) {
|
|
152
|
+
return TEXT_PARENT_TYPES.includes(node.type.name);
|
|
153
|
+
})(currentSelection);
|
|
154
|
+
if (currentParagraphNode) {
|
|
155
|
+
var newPos =
|
|
156
|
+
//if the current selection is selected from right to left, then set the selection to the start of the paragraph
|
|
157
|
+
currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
|
|
158
|
+
api.core.actions.execute(function (_ref2) {
|
|
159
|
+
var tr = _ref2.tr;
|
|
160
|
+
tr.setSelection(_state.TextSelection.create(view.state.selection.$from.doc, newPos));
|
|
161
|
+
return tr;
|
|
155
162
|
});
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
if ((0, _documentChecks.isNestedNodeSelected)(view)) {
|
|
166
|
+
// if the nested selected node is non-editable, then insert a newline below the selected node
|
|
167
|
+
if ((0, _documentChecks.isNonEditableBlock)(view.state.selection.from, view)) {
|
|
168
|
+
api.core.actions.execute((0, _editorCommands.createNewLine)(view.state.selection.from));
|
|
169
|
+
} else {
|
|
170
|
+
// otherwise need to force the selection to be at the start of the node, because
|
|
171
|
+
// prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
|
|
172
|
+
// consistent NodeSelection for root level nodes.
|
|
173
|
+
api.core.actions.execute(function (_ref3) {
|
|
174
|
+
var tr = _ref3.tr;
|
|
175
|
+
(0, _editorCommands.createNewLine)(view.state.selection.from)({
|
|
176
|
+
tr: tr
|
|
177
|
+
});
|
|
178
|
+
tr.setSelection(_state.TextSelection.create(tr.doc, view.state.selection.from));
|
|
179
|
+
return tr;
|
|
180
|
+
});
|
|
181
|
+
}
|
|
159
182
|
}
|
|
160
183
|
}
|
|
161
184
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.isSelectionInNode = exports.isNonEditableBlock = exports.isNestedNodeSelected = void 0;
|
|
6
|
+
exports.isSelectionInNode = exports.isNonEditableBlock = exports.isNestedNodeSelected = exports.isInTextSelection = void 0;
|
|
7
7
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
8
8
|
var isNestedNodeSelected = exports.isNestedNodeSelected = function isNestedNodeSelected(view) {
|
|
9
9
|
var selection = view.state.selection;
|
|
@@ -21,6 +21,17 @@ var isSelectionInNode = exports.isSelectionInNode = function isSelectionInNode(s
|
|
|
21
21
|
$to = _view$state$selection.$to;
|
|
22
22
|
return $from.pos >= startPos && endPos >= $to.pos;
|
|
23
23
|
};
|
|
24
|
+
|
|
25
|
+
// checks if the selection is in a text node
|
|
26
|
+
var isInTextSelection = exports.isInTextSelection = function isInTextSelection(view) {
|
|
27
|
+
var selection = view.state.selection;
|
|
28
|
+
if (selection instanceof _state.TextSelection) {
|
|
29
|
+
return true;
|
|
30
|
+
} else if (selection instanceof _state.NodeSelection) {
|
|
31
|
+
// check if this is a node that can appear among text
|
|
32
|
+
return selection.node.isInline;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
24
35
|
var isNonEditableBlock = exports.isNonEditableBlock = function isNonEditableBlock(start, view) {
|
|
25
36
|
var node = view.state.doc.nodeAt(start);
|
|
26
37
|
if (node === null) {
|
|
@@ -157,7 +157,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
157
157
|
const nodeIndex = $currentNodePos.index();
|
|
158
158
|
const isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
|
|
159
159
|
if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
|
|
160
|
-
if (isTopLevelNode && editorExperiment('advanced_layouts', true)
|
|
160
|
+
if (isTopLevelNode && editorExperiment('advanced_layouts', true)) {
|
|
161
161
|
var _api$core, _api$core2;
|
|
162
162
|
const nodeBefore = $currentNodePos.nodeBefore;
|
|
163
163
|
if (nodeBefore) {
|
|
@@ -183,7 +183,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
183
183
|
});
|
|
184
184
|
api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
|
|
185
185
|
return true;
|
|
186
|
-
} else if (isLayoutColumnSelected
|
|
186
|
+
} else if (isLayoutColumnSelected) {
|
|
187
187
|
var _$currentNodePos$node, _api$core3, _api$blockControls2, _api$blockControls2$c;
|
|
188
188
|
moveToPos = selection.from - (((_$currentNodePos$node = $currentNodePos.nodeBefore) === null || _$currentNodePos$node === void 0 ? void 0 : _$currentNodePos$node.nodeSize) || 1);
|
|
189
189
|
api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(currentNodePos, moveToPos, {
|
|
@@ -202,7 +202,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
202
202
|
moveToPos = $currentNodePos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
|
|
203
203
|
}
|
|
204
204
|
} else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
|
|
205
|
-
if (isTopLevelNode && editorExperiment('advanced_layouts', true)
|
|
205
|
+
if (isTopLevelNode && editorExperiment('advanced_layouts', true)) {
|
|
206
206
|
var _api$core4, _api$core5;
|
|
207
207
|
const endOfDoc = $currentNodePos.end();
|
|
208
208
|
moveToPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
|
|
@@ -225,7 +225,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
225
225
|
});
|
|
226
226
|
api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.focus();
|
|
227
227
|
return true;
|
|
228
|
-
} else if (isLayoutColumnSelected
|
|
228
|
+
} else if (isLayoutColumnSelected) {
|
|
229
229
|
var _api$core6, _api$blockControls4, _api$blockControls4$c;
|
|
230
230
|
const index = $currentNodePos.index($currentNodePos.depth);
|
|
231
231
|
const parent = $currentNodePos.node($currentNodePos.depth);
|
|
@@ -251,7 +251,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
251
251
|
moveToPos = $currentNodePos.after($currentNodePos.depth) + 1;
|
|
252
252
|
}
|
|
253
253
|
} else if (direction === DIRECTION.UP) {
|
|
254
|
-
if (isLayoutColumnSelected
|
|
254
|
+
if (isLayoutColumnSelected) {
|
|
255
255
|
moveToPos = $currentNodePos.start() - 1;
|
|
256
256
|
} else {
|
|
257
257
|
const nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
|
|
@@ -264,7 +264,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
264
264
|
if (nodeAfterPos > endOfDoc) {
|
|
265
265
|
return false;
|
|
266
266
|
}
|
|
267
|
-
if (isLayoutColumnSelected
|
|
267
|
+
if (isLayoutColumnSelected) {
|
|
268
268
|
moveToPos = state.selection.$from.end() + 1;
|
|
269
269
|
} else {
|
|
270
270
|
const nodeAfter = state.doc.nodeAt(nodeAfterPos);
|
|
@@ -279,10 +279,10 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
|
|
|
279
279
|
if (moveToPos > -1 && fg('platform_editor_elements_dnd_multi_select_patch_2')) {
|
|
280
280
|
const isDestDepthSameAsSource = $currentNodePos.depth === state.doc.resolve(moveToPos).depth;
|
|
281
281
|
const isSourceLayoutColumn = nodeType === 'layoutColumn';
|
|
282
|
-
shouldMoveNode = (shouldEnableNestedDndA11y ? isDestDepthSameAsSource || isSourceLayoutColumn : true) || isSourceLayoutColumn
|
|
282
|
+
shouldMoveNode = (shouldEnableNestedDndA11y ? isDestDepthSameAsSource || isSourceLayoutColumn : true) || isSourceLayoutColumn;
|
|
283
283
|
} else {
|
|
284
284
|
// only move the node if the destination is at the same depth, not support moving a nested node to a parent node
|
|
285
|
-
shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn'
|
|
285
|
+
shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn';
|
|
286
286
|
}
|
|
287
287
|
const {
|
|
288
288
|
$anchor: $newAnchor,
|
|
@@ -207,12 +207,15 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
|
|
|
207
207
|
isAllText,
|
|
208
208
|
isReplacedWithSameSize
|
|
209
209
|
} = getTrMetadata(tr);
|
|
210
|
+
const meta = tr.getMeta(key);
|
|
210
211
|
|
|
211
212
|
// When steps exist, remap existing decorations, activeNode and multi select positions
|
|
212
213
|
if (tr.docChanged) {
|
|
213
214
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
214
|
-
|
|
215
|
-
|
|
215
|
+
|
|
216
|
+
// don't remap activeNode if it's being dragged
|
|
217
|
+
if (editorExperiment('platform_editor_controls', 'control')) {
|
|
218
|
+
if (activeNode) {
|
|
216
219
|
const mappedPos = tr.mapping.mapResult(activeNode.pos);
|
|
217
220
|
isActiveNodeDeleted = mappedPos.deleted;
|
|
218
221
|
activeNode = {
|
|
@@ -220,7 +223,9 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
|
|
|
220
223
|
anchorName: activeNode.anchorName,
|
|
221
224
|
nodeType: activeNode.nodeType
|
|
222
225
|
};
|
|
223
|
-
}
|
|
226
|
+
}
|
|
227
|
+
} else {
|
|
228
|
+
if (activeNode && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== true) {
|
|
224
229
|
var _mappedRootPos$pos, _mappedRootPos;
|
|
225
230
|
const mappedPos = tr.mapping.mapResult(activeNode.pos, -1);
|
|
226
231
|
isActiveNodeDeleted = mappedPos.deletedAfter;
|
|
@@ -244,7 +249,6 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
|
|
|
244
249
|
multiSelectDnD.head = tr.mapping.map(multiSelectDnD.head);
|
|
245
250
|
}
|
|
246
251
|
}
|
|
247
|
-
const meta = tr.getMeta(key);
|
|
248
252
|
const resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
249
253
|
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
250
254
|
multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
|
|
@@ -292,7 +296,6 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
|
|
|
292
296
|
}
|
|
293
297
|
}
|
|
294
298
|
} else {
|
|
295
|
-
// active node may have been deleted or replaced with another of the same size, if replaced go ahead and remap the active node
|
|
296
299
|
if (latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
|
|
297
300
|
const nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
|
|
298
301
|
const rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
|
|
@@ -547,7 +547,7 @@ export const DragHandle = ({
|
|
|
547
547
|
setDragHandleDisabled(false);
|
|
548
548
|
}
|
|
549
549
|
}, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
|
|
550
|
-
let helpDescriptors = isTopLevelNode
|
|
550
|
+
let helpDescriptors = isTopLevelNode ? [{
|
|
551
551
|
description: formatMessage(blockControlsMessages.dragToMove)
|
|
552
552
|
}, {
|
|
553
553
|
description: formatMessage(blockControlsMessages.moveUp),
|
|
@@ -571,7 +571,7 @@ export const DragHandle = ({
|
|
|
571
571
|
keymap: dragToMoveDown
|
|
572
572
|
}];
|
|
573
573
|
let isParentNodeOfTypeLayout;
|
|
574
|
-
if (!isTopLevelNode &&
|
|
574
|
+
if (!isTopLevelNode && editorExperiment('nested-dnd', true)) {
|
|
575
575
|
const pos = getPos();
|
|
576
576
|
if (typeof pos === 'number') {
|
|
577
577
|
var _$pos$parent;
|
|
@@ -591,7 +591,7 @@ export const DragHandle = ({
|
|
|
591
591
|
|
|
592
592
|
// When advanced layout is on, layout column drag handle show only show 'Drag to move', no shortcuts
|
|
593
593
|
if (editorExperiment('advanced_layouts', true) && nodeType === 'layoutColumn') {
|
|
594
|
-
helpDescriptors =
|
|
594
|
+
helpDescriptors = [{
|
|
595
595
|
description: formatMessage(blockControlsMessages.dragToRearrange)
|
|
596
596
|
}, {
|
|
597
597
|
description: formatMessage(blockControlsMessages.moveUp),
|
|
@@ -605,8 +605,6 @@ export const DragHandle = ({
|
|
|
605
605
|
}, {
|
|
606
606
|
description: formatMessage(blockControlsMessages.moveRight),
|
|
607
607
|
keymap: dragToMoveRight
|
|
608
|
-
}] : [{
|
|
609
|
-
description: formatMessage(blockControlsMessages.dragToMove)
|
|
610
608
|
}];
|
|
611
609
|
}
|
|
612
610
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -4,14 +4,17 @@ import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
|
4
4
|
import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
5
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
6
6
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
+
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
7
8
|
import AddIcon from '@atlaskit/icon/utility/add';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
10
|
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
9
11
|
import Tooltip from '@atlaskit/tooltip';
|
|
10
12
|
import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
|
|
11
13
|
import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
|
|
12
14
|
import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
|
|
13
|
-
import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
|
|
15
|
+
import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
|
|
14
16
|
import { createNewLine } from './utils/editor-commands';
|
|
17
|
+
const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
|
|
15
18
|
const buttonStyles = xcss({
|
|
16
19
|
boxSizing: 'border-box',
|
|
17
20
|
display: 'flex',
|
|
@@ -127,23 +130,42 @@ export const TypeAheadControl = ({
|
|
|
127
130
|
if (!isSelectionInNode(start, view) || isNonEditableBlock(start, view)) {
|
|
128
131
|
api.core.actions.execute(createNewLine(start));
|
|
129
132
|
}
|
|
130
|
-
if (isSelectionInNode(start, view)
|
|
131
|
-
//
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
createNewLine(view.state.selection.from)({
|
|
133
|
+
if (isSelectionInNode(start, view)) {
|
|
134
|
+
// text or element with be deselected and the / added immediately after the paragraph
|
|
135
|
+
// unless the selection is empty
|
|
136
|
+
const currentSelection = view.state.selection;
|
|
137
|
+
if (isInTextSelection(view) && currentSelection.from !== currentSelection.to && fg('platform_editor_controls_patch_1')) {
|
|
138
|
+
const currentParagraphNode = findParentNode(node => TEXT_PARENT_TYPES.includes(node.type.name))(currentSelection);
|
|
139
|
+
if (currentParagraphNode) {
|
|
140
|
+
const newPos =
|
|
141
|
+
//if the current selection is selected from right to left, then set the selection to the start of the paragraph
|
|
142
|
+
currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
|
|
143
|
+
api.core.actions.execute(({
|
|
142
144
|
tr
|
|
145
|
+
}) => {
|
|
146
|
+
tr.setSelection(TextSelection.create(view.state.selection.$from.doc, newPos));
|
|
147
|
+
return tr;
|
|
143
148
|
});
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
if (isNestedNodeSelected(view)) {
|
|
152
|
+
// if the nested selected node is non-editable, then insert a newline below the selected node
|
|
153
|
+
if (isNonEditableBlock(view.state.selection.from, view)) {
|
|
154
|
+
api.core.actions.execute(createNewLine(view.state.selection.from));
|
|
155
|
+
} else {
|
|
156
|
+
// otherwise need to force the selection to be at the start of the node, because
|
|
157
|
+
// prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
|
|
158
|
+
// consistent NodeSelection for root level nodes.
|
|
159
|
+
api.core.actions.execute(({
|
|
160
|
+
tr
|
|
161
|
+
}) => {
|
|
162
|
+
createNewLine(view.state.selection.from)({
|
|
163
|
+
tr
|
|
164
|
+
});
|
|
165
|
+
tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
|
|
166
|
+
return tr;
|
|
167
|
+
});
|
|
168
|
+
}
|
|
147
169
|
}
|
|
148
170
|
}
|
|
149
171
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
1
|
+
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
export const isNestedNodeSelected = view => {
|
|
3
3
|
const selection = view.state.selection;
|
|
4
4
|
return selection instanceof NodeSelection && selection.$from.depth > 1;
|
|
@@ -16,6 +16,17 @@ export const isSelectionInNode = (start, view) => {
|
|
|
16
16
|
} = view.state.selection;
|
|
17
17
|
return $from.pos >= startPos && endPos >= $to.pos;
|
|
18
18
|
};
|
|
19
|
+
|
|
20
|
+
// checks if the selection is in a text node
|
|
21
|
+
export const isInTextSelection = view => {
|
|
22
|
+
const selection = view.state.selection;
|
|
23
|
+
if (selection instanceof TextSelection) {
|
|
24
|
+
return true;
|
|
25
|
+
} else if (selection instanceof NodeSelection) {
|
|
26
|
+
// check if this is a node that can appear among text
|
|
27
|
+
return selection.node.isInline;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
19
30
|
export const isNonEditableBlock = (start, view) => {
|
|
20
31
|
const node = view.state.doc.nodeAt(start);
|
|
21
32
|
if (node === null) {
|
|
@@ -152,7 +152,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
152
152
|
var nodeIndex = $currentNodePos.index();
|
|
153
153
|
var isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
|
|
154
154
|
if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
|
|
155
|
-
if (isTopLevelNode && editorExperiment('advanced_layouts', true)
|
|
155
|
+
if (isTopLevelNode && editorExperiment('advanced_layouts', true)) {
|
|
156
156
|
var _api$core, _api$core2;
|
|
157
157
|
var nodeBefore = $currentNodePos.nodeBefore;
|
|
158
158
|
if (nodeBefore) {
|
|
@@ -177,7 +177,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
177
177
|
});
|
|
178
178
|
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
|
|
179
179
|
return true;
|
|
180
|
-
} else if (isLayoutColumnSelected
|
|
180
|
+
} else if (isLayoutColumnSelected) {
|
|
181
181
|
var _$currentNodePos$node, _api$core3, _api$blockControls2;
|
|
182
182
|
moveToPos = selection.from - (((_$currentNodePos$node = $currentNodePos.nodeBefore) === null || _$currentNodePos$node === void 0 ? void 0 : _$currentNodePos$node.nodeSize) || 1);
|
|
183
183
|
api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
|
|
@@ -196,7 +196,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
196
196
|
moveToPos = $currentNodePos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
|
|
197
197
|
}
|
|
198
198
|
} else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
|
|
199
|
-
if (isTopLevelNode && editorExperiment('advanced_layouts', true)
|
|
199
|
+
if (isTopLevelNode && editorExperiment('advanced_layouts', true)) {
|
|
200
200
|
var _api$core4, _api$core5;
|
|
201
201
|
var endOfDoc = $currentNodePos.end();
|
|
202
202
|
moveToPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
|
|
@@ -218,7 +218,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
218
218
|
});
|
|
219
219
|
api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.focus();
|
|
220
220
|
return true;
|
|
221
|
-
} else if (isLayoutColumnSelected
|
|
221
|
+
} else if (isLayoutColumnSelected) {
|
|
222
222
|
var _api$core6, _api$blockControls4;
|
|
223
223
|
var _index = $currentNodePos.index($currentNodePos.depth);
|
|
224
224
|
var parent = $currentNodePos.node($currentNodePos.depth);
|
|
@@ -244,7 +244,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
244
244
|
moveToPos = $currentNodePos.after($currentNodePos.depth) + 1;
|
|
245
245
|
}
|
|
246
246
|
} else if (direction === DIRECTION.UP) {
|
|
247
|
-
if (isLayoutColumnSelected
|
|
247
|
+
if (isLayoutColumnSelected) {
|
|
248
248
|
moveToPos = $currentNodePos.start() - 1;
|
|
249
249
|
} else {
|
|
250
250
|
var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
|
|
@@ -257,7 +257,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
257
257
|
if (nodeAfterPos > _endOfDoc) {
|
|
258
258
|
return false;
|
|
259
259
|
}
|
|
260
|
-
if (isLayoutColumnSelected
|
|
260
|
+
if (isLayoutColumnSelected) {
|
|
261
261
|
moveToPos = state.selection.$from.end() + 1;
|
|
262
262
|
} else {
|
|
263
263
|
var nodeAfter = state.doc.nodeAt(nodeAfterPos);
|
|
@@ -272,10 +272,10 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
|
|
|
272
272
|
if (moveToPos > -1 && fg('platform_editor_elements_dnd_multi_select_patch_2')) {
|
|
273
273
|
var isDestDepthSameAsSource = $currentNodePos.depth === state.doc.resolve(moveToPos).depth;
|
|
274
274
|
var isSourceLayoutColumn = nodeType === 'layoutColumn';
|
|
275
|
-
shouldMoveNode = (shouldEnableNestedDndA11y ? isDestDepthSameAsSource || isSourceLayoutColumn : true) || isSourceLayoutColumn
|
|
275
|
+
shouldMoveNode = (shouldEnableNestedDndA11y ? isDestDepthSameAsSource || isSourceLayoutColumn : true) || isSourceLayoutColumn;
|
|
276
276
|
} else {
|
|
277
277
|
// only move the node if the destination is at the same depth, not support moving a nested node to a parent node
|
|
278
|
-
shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn'
|
|
278
|
+
shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $currentNodePos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn';
|
|
279
279
|
}
|
|
280
280
|
var _expandSelectionBound = expandSelectionBounds($currentNodePos, selection.$to),
|
|
281
281
|
$newAnchor = _expandSelectionBound.$anchor,
|
|
@@ -201,12 +201,15 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
|
|
|
201
201
|
numReplaceSteps = _getTrMetadata.numReplaceSteps,
|
|
202
202
|
isAllText = _getTrMetadata.isAllText,
|
|
203
203
|
isReplacedWithSameSize = _getTrMetadata.isReplacedWithSameSize;
|
|
204
|
+
var meta = tr.getMeta(key);
|
|
204
205
|
|
|
205
206
|
// When steps exist, remap existing decorations, activeNode and multi select positions
|
|
206
207
|
if (tr.docChanged) {
|
|
207
208
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
208
|
-
|
|
209
|
-
|
|
209
|
+
|
|
210
|
+
// don't remap activeNode if it's being dragged
|
|
211
|
+
if (editorExperiment('platform_editor_controls', 'control')) {
|
|
212
|
+
if (activeNode) {
|
|
210
213
|
var mappedPos = tr.mapping.mapResult(activeNode.pos);
|
|
211
214
|
isActiveNodeDeleted = mappedPos.deleted;
|
|
212
215
|
activeNode = {
|
|
@@ -214,7 +217,9 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
|
|
|
214
217
|
anchorName: activeNode.anchorName,
|
|
215
218
|
nodeType: activeNode.nodeType
|
|
216
219
|
};
|
|
217
|
-
}
|
|
220
|
+
}
|
|
221
|
+
} else {
|
|
222
|
+
if (activeNode && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== true) {
|
|
218
223
|
var _mappedRootPos$pos, _mappedRootPos;
|
|
219
224
|
var _mappedPos = tr.mapping.mapResult(activeNode.pos, -1);
|
|
220
225
|
isActiveNodeDeleted = _mappedPos.deletedAfter;
|
|
@@ -238,7 +243,6 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
|
|
|
238
243
|
multiSelectDnD.head = tr.mapping.map(multiSelectDnD.head);
|
|
239
244
|
}
|
|
240
245
|
}
|
|
241
|
-
var meta = tr.getMeta(key);
|
|
242
246
|
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
243
247
|
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
244
248
|
multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
|
|
@@ -288,7 +292,6 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
|
|
|
288
292
|
}
|
|
289
293
|
}
|
|
290
294
|
} else {
|
|
291
|
-
// active node may have been deleted or replaced with another of the same size, if replaced go ahead and remap the active node
|
|
292
295
|
if (latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
|
|
293
296
|
var _nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
|
|
294
297
|
var rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
|
|
@@ -558,7 +558,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
558
558
|
setDragHandleDisabled(false);
|
|
559
559
|
}
|
|
560
560
|
}, [api === null || api === void 0 ? void 0 : api.blockControls.sharedState, isMultiSelect, isShiftDown, isTopLevelNode, view.state.doc, view.state.selection]);
|
|
561
|
-
var helpDescriptors = isTopLevelNode
|
|
561
|
+
var helpDescriptors = isTopLevelNode ? [{
|
|
562
562
|
description: formatMessage(blockControlsMessages.dragToMove)
|
|
563
563
|
}, {
|
|
564
564
|
description: formatMessage(blockControlsMessages.moveUp),
|
|
@@ -582,7 +582,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
582
582
|
keymap: dragToMoveDown
|
|
583
583
|
}];
|
|
584
584
|
var isParentNodeOfTypeLayout;
|
|
585
|
-
if (!isTopLevelNode &&
|
|
585
|
+
if (!isTopLevelNode && editorExperiment('nested-dnd', true)) {
|
|
586
586
|
var pos = getPos();
|
|
587
587
|
if (typeof pos === 'number') {
|
|
588
588
|
var _$pos$parent;
|
|
@@ -602,7 +602,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
602
602
|
|
|
603
603
|
// When advanced layout is on, layout column drag handle show only show 'Drag to move', no shortcuts
|
|
604
604
|
if (editorExperiment('advanced_layouts', true) && nodeType === 'layoutColumn') {
|
|
605
|
-
helpDescriptors =
|
|
605
|
+
helpDescriptors = [{
|
|
606
606
|
description: formatMessage(blockControlsMessages.dragToRearrange)
|
|
607
607
|
}, {
|
|
608
608
|
description: formatMessage(blockControlsMessages.moveUp),
|
|
@@ -616,8 +616,6 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
616
616
|
}, {
|
|
617
617
|
description: formatMessage(blockControlsMessages.moveRight),
|
|
618
618
|
keymap: dragToMoveRight
|
|
619
|
-
}] : [{
|
|
620
|
-
description: formatMessage(blockControlsMessages.dragToMove)
|
|
621
619
|
}];
|
|
622
620
|
}
|
|
623
621
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -5,14 +5,17 @@ import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
|
5
5
|
import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
6
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
7
7
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
8
|
+
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
8
9
|
import AddIcon from '@atlaskit/icon/utility/add';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
11
|
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
10
12
|
import Tooltip from '@atlaskit/tooltip';
|
|
11
13
|
import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
|
|
12
14
|
import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
|
|
13
15
|
import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
|
|
14
|
-
import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
|
|
16
|
+
import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
|
|
15
17
|
import { createNewLine } from './utils/editor-commands';
|
|
18
|
+
var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
|
|
16
19
|
var buttonStyles = xcss({
|
|
17
20
|
boxSizing: 'border-box',
|
|
18
21
|
display: 'flex',
|
|
@@ -130,22 +133,42 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
130
133
|
if (!isSelectionInNode(start, view) || isNonEditableBlock(start, view)) {
|
|
131
134
|
api.core.actions.execute(createNewLine(start));
|
|
132
135
|
}
|
|
133
|
-
if (isSelectionInNode(start, view)
|
|
134
|
-
//
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
var
|
|
143
|
-
|
|
144
|
-
|
|
136
|
+
if (isSelectionInNode(start, view)) {
|
|
137
|
+
// text or element with be deselected and the / added immediately after the paragraph
|
|
138
|
+
// unless the selection is empty
|
|
139
|
+
var currentSelection = view.state.selection;
|
|
140
|
+
if (isInTextSelection(view) && currentSelection.from !== currentSelection.to && fg('platform_editor_controls_patch_1')) {
|
|
141
|
+
var currentParagraphNode = findParentNode(function (node) {
|
|
142
|
+
return TEXT_PARENT_TYPES.includes(node.type.name);
|
|
143
|
+
})(currentSelection);
|
|
144
|
+
if (currentParagraphNode) {
|
|
145
|
+
var newPos =
|
|
146
|
+
//if the current selection is selected from right to left, then set the selection to the start of the paragraph
|
|
147
|
+
currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
|
|
148
|
+
api.core.actions.execute(function (_ref2) {
|
|
149
|
+
var tr = _ref2.tr;
|
|
150
|
+
tr.setSelection(TextSelection.create(view.state.selection.$from.doc, newPos));
|
|
151
|
+
return tr;
|
|
145
152
|
});
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
if (isNestedNodeSelected(view)) {
|
|
156
|
+
// if the nested selected node is non-editable, then insert a newline below the selected node
|
|
157
|
+
if (isNonEditableBlock(view.state.selection.from, view)) {
|
|
158
|
+
api.core.actions.execute(createNewLine(view.state.selection.from));
|
|
159
|
+
} else {
|
|
160
|
+
// otherwise need to force the selection to be at the start of the node, because
|
|
161
|
+
// prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
|
|
162
|
+
// consistent NodeSelection for root level nodes.
|
|
163
|
+
api.core.actions.execute(function (_ref3) {
|
|
164
|
+
var tr = _ref3.tr;
|
|
165
|
+
createNewLine(view.state.selection.from)({
|
|
166
|
+
tr: tr
|
|
167
|
+
});
|
|
168
|
+
tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
|
|
169
|
+
return tr;
|
|
170
|
+
});
|
|
171
|
+
}
|
|
149
172
|
}
|
|
150
173
|
}
|
|
151
174
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
1
|
+
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
export var isNestedNodeSelected = function isNestedNodeSelected(view) {
|
|
3
3
|
var selection = view.state.selection;
|
|
4
4
|
return selection instanceof NodeSelection && selection.$from.depth > 1;
|
|
@@ -15,6 +15,17 @@ export var isSelectionInNode = function isSelectionInNode(start, view) {
|
|
|
15
15
|
$to = _view$state$selection.$to;
|
|
16
16
|
return $from.pos >= startPos && endPos >= $to.pos;
|
|
17
17
|
};
|
|
18
|
+
|
|
19
|
+
// checks if the selection is in a text node
|
|
20
|
+
export var isInTextSelection = function isInTextSelection(view) {
|
|
21
|
+
var selection = view.state.selection;
|
|
22
|
+
if (selection instanceof TextSelection) {
|
|
23
|
+
return true;
|
|
24
|
+
} else if (selection instanceof NodeSelection) {
|
|
25
|
+
// check if this is a node that can appear among text
|
|
26
|
+
return selection.node.isInline;
|
|
27
|
+
}
|
|
28
|
+
};
|
|
18
29
|
export var isNonEditableBlock = function isNonEditableBlock(start, view) {
|
|
19
30
|
var node = view.state.doc.nodeAt(start);
|
|
20
31
|
if (node === null) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
2
|
export declare const isNestedNodeSelected: (view: EditorView) => boolean;
|
|
3
3
|
export declare const isSelectionInNode: (start: number, view: EditorView) => boolean;
|
|
4
|
+
export declare const isInTextSelection: (view: EditorView) => boolean | undefined;
|
|
4
5
|
export declare const isNonEditableBlock: (start: number, view: EditorView) => boolean;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
2
|
export declare const isNestedNodeSelected: (view: EditorView) => boolean;
|
|
3
3
|
export declare const isSelectionInNode: (start: number, view: EditorView) => boolean;
|
|
4
|
+
export declare const isInTextSelection: (view: EditorView) => boolean | undefined;
|
|
4
5
|
export declare const isNonEditableBlock: (start: number, view: EditorView) => boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
36
|
-
"@atlaskit/editor-common": "^102.
|
|
36
|
+
"@atlaskit/editor-common": "^102.15.0",
|
|
37
37
|
"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
47
47
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
48
48
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
49
|
-
"@atlaskit/icon": "^25.
|
|
49
|
+
"@atlaskit/icon": "^25.3.0",
|
|
50
50
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
51
51
|
"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
|
|
54
54
|
"@atlaskit/primitives": "^14.2.0",
|
|
55
55
|
"@atlaskit/theme": "^18.0.0",
|
|
56
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
56
|
+
"@atlaskit/tmp-editor-statsig": "^4.5.0",
|
|
57
57
|
"@atlaskit/tokens": "^4.5.0",
|
|
58
58
|
"@atlaskit/tooltip": "^20.0.0",
|
|
59
59
|
"@babel/runtime": "^7.0.0",
|
|
@@ -129,9 +129,6 @@
|
|
|
129
129
|
"platform_editor_dnd_handle_highlight_fix_firefox": {
|
|
130
130
|
"type": "boolean"
|
|
131
131
|
},
|
|
132
|
-
"platform_editor_advanced_layouts_accessibility": {
|
|
133
|
-
"type": "boolean"
|
|
134
|
-
},
|
|
135
132
|
"platform_editor_track_node_types": {
|
|
136
133
|
"type": "boolean"
|
|
137
134
|
},
|
|
@@ -164,6 +161,9 @@
|
|
|
164
161
|
},
|
|
165
162
|
"platform_editor_multi_body_extension_extensibility": {
|
|
166
163
|
"type": "boolean"
|
|
164
|
+
},
|
|
165
|
+
"platform_editor_controls_patch_1": {
|
|
166
|
+
"type": "boolean"
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
}
|