@atlaskit/editor-plugin-block-controls 2.2.0 → 2.2.1
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 +8 -0
- package/dist/cjs/commands/move-node.js +2 -2
- package/dist/cjs/commands/show-drag-handle.js +11 -2
- package/dist/cjs/ui/drag-handle.js +3 -4
- package/dist/cjs/utils/getNestedNodePosition.js +27 -0
- package/dist/cjs/utils/index.js +8 -1
- package/dist/es2019/commands/move-node.js +3 -3
- package/dist/es2019/commands/show-drag-handle.js +13 -4
- package/dist/es2019/ui/drag-handle.js +2 -3
- package/dist/es2019/utils/getNestedNodePosition.js +23 -0
- package/dist/es2019/utils/index.js +2 -1
- package/dist/esm/commands/move-node.js +3 -3
- package/dist/esm/commands/show-drag-handle.js +11 -2
- package/dist/esm/ui/drag-handle.js +2 -3
- package/dist/esm/utils/getNestedNodePosition.js +21 -0
- package/dist/esm/utils/index.js +2 -1
- package/dist/types/utils/getNestedNodePosition.d.ts +2 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/dist/types-ts4.5/utils/getNestedNodePosition.d.ts +2 -0
- package/dist/types-ts4.5/utils/index.d.ts +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 2.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#150591](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150591)
|
|
8
|
+
[`13337452246bc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/13337452246bc) -
|
|
9
|
+
support a11y to move various node types with shortcut
|
|
10
|
+
|
|
3
11
|
## 2.2.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
@@ -69,8 +69,8 @@ var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayo
|
|
|
69
69
|
// 2. caret cursor is inside the node
|
|
70
70
|
// 3. the start of the selection is inside the node
|
|
71
71
|
currentNodePos = selection.$from.before(1);
|
|
72
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
73
|
-
currentNodePos =
|
|
72
|
+
if (selection.$from.depth > 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
73
|
+
currentNodePos = (0, _utils4.getNestedNodePosition)(state);
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
return currentNodePos;
|
|
@@ -7,6 +7,7 @@ exports.showDragHandleAtSelection = void 0;
|
|
|
7
7
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
8
8
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
9
|
var _main = require("../pm-plugins/main");
|
|
10
|
+
var _utils2 = require("../utils");
|
|
10
11
|
var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
|
|
11
12
|
return function (state, _, view) {
|
|
12
13
|
var $from = state.selection.$from;
|
|
@@ -18,13 +19,21 @@ var showDragHandleAtSelection = exports.showDragHandleAtSelection = function sho
|
|
|
18
19
|
|
|
19
20
|
// if the node is already focused, pressing the keymap second times should focus the parent node
|
|
20
21
|
shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
|
|
21
|
-
var parentPos = (0, _utils.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.
|
|
22
|
+
var parentPos = (0, _utils.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _utils2.getNestedNodePosition)(state) + 1;
|
|
22
23
|
var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
|
|
23
24
|
if (parentElement) {
|
|
24
25
|
var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
|
|
25
26
|
var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
|
|
27
|
+
if (!anchorName || !nodeType) {
|
|
28
|
+
// for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
|
|
29
|
+
var closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
|
|
30
|
+
if (closestParentElement) {
|
|
31
|
+
anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
|
|
32
|
+
nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
|
|
33
|
+
}
|
|
34
|
+
}
|
|
26
35
|
if (api && anchorName && nodeType) {
|
|
27
|
-
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(
|
|
36
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
|
|
28
37
|
isFocused: true
|
|
29
38
|
}));
|
|
30
39
|
return true;
|
|
@@ -16,7 +16,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
16
16
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
17
17
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
18
18
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
19
|
-
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
20
19
|
var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
|
|
21
20
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
21
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
@@ -24,7 +23,7 @@ var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/ele
|
|
|
24
23
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
25
24
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
26
25
|
var _main = require("../pm-plugins/main");
|
|
27
|
-
var
|
|
26
|
+
var _utils = require("../utils");
|
|
28
27
|
var _dragHandlePositions = require("../utils/drag-handle-positions");
|
|
29
28
|
var _consts = require("./consts");
|
|
30
29
|
var _dragPreview = require("./drag-preview");
|
|
@@ -120,7 +119,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
120
119
|
if (startPos === undefined) {
|
|
121
120
|
return tr;
|
|
122
121
|
}
|
|
123
|
-
tr = (0,
|
|
122
|
+
tr = (0, _utils.selectNode)(tr, startPos, nodeType);
|
|
124
123
|
var resolvedMovingNode = tr.doc.resolve(startPos);
|
|
125
124
|
var maybeNode = resolvedMovingNode.nodeAfter;
|
|
126
125
|
tr.setMeta('scrollIntoView', false);
|
|
@@ -379,7 +378,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
379
378
|
}];
|
|
380
379
|
var isParentNodeOfTypeLayout;
|
|
381
380
|
if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
|
|
382
|
-
isParentNodeOfTypeLayout = nodeType === 'layoutSection' ||
|
|
381
|
+
isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve((0, _utils.getNestedNodePosition)(view.state)).node().type.name === 'layoutColumn';
|
|
383
382
|
if (isParentNodeOfTypeLayout) {
|
|
384
383
|
helpDescriptors = [].concat((0, _toConsumableArray2.default)(helpDescriptors), [{
|
|
385
384
|
description: formatMessage(_messages.blockControlsMessages.moveLeft),
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getNestedNodePosition = void 0;
|
|
7
|
+
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
8
|
+
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
9
|
+
var getNestedNodePosition = exports.getNestedNodePosition = function getNestedNodePosition(state) {
|
|
10
|
+
var selection = state.selection;
|
|
11
|
+
var nestedNodePos = selection.$from.before(1);
|
|
12
|
+
if (selection instanceof _state.TextSelection) {
|
|
13
|
+
nestedNodePos = selection.$from.before();
|
|
14
|
+
var $pos = state.doc.resolve(nestedNodePos);
|
|
15
|
+
if ($pos.depth < 1) {
|
|
16
|
+
return nestedNodePos;
|
|
17
|
+
}
|
|
18
|
+
var parentNodeOfSpecificTypes = (0, _utils.findParentNodeOfType)([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList])(state.selection);
|
|
19
|
+
if (parentNodeOfSpecificTypes) {
|
|
20
|
+
var parentNodeType = parentNodeOfSpecificTypes.node.type.name;
|
|
21
|
+
nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
|
|
22
|
+
}
|
|
23
|
+
} else {
|
|
24
|
+
nestedNodePos = selection.$from.pos;
|
|
25
|
+
}
|
|
26
|
+
return nestedNodePos;
|
|
27
|
+
};
|
package/dist/cjs/utils/index.js
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "getNestedNodePosition", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _getNestedNodePosition.getNestedNodePosition;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
6
12
|
Object.defineProperty(exports, "getSelection", {
|
|
7
13
|
enumerable: true,
|
|
8
14
|
get: function get() {
|
|
@@ -15,4 +21,5 @@ Object.defineProperty(exports, "selectNode", {
|
|
|
15
21
|
return _getSelection.selectNode;
|
|
16
22
|
}
|
|
17
23
|
});
|
|
18
|
-
var _getSelection = require("./getSelection");
|
|
24
|
+
var _getSelection = require("./getSelection");
|
|
25
|
+
var _getNestedNodePosition = require("./getNestedNodePosition");
|
|
@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
9
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
10
|
import { DIRECTION } from '../consts';
|
|
11
11
|
import { key } from '../pm-plugins/main';
|
|
12
|
-
import { selectNode } from '../utils';
|
|
12
|
+
import { getNestedNodePosition, selectNode } from '../utils';
|
|
13
13
|
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -64,8 +64,8 @@ const getCurrentNodePos = (state, isParentNodeOfTypeLayout) => {
|
|
|
64
64
|
// 2. caret cursor is inside the node
|
|
65
65
|
// 3. the start of the selection is inside the node
|
|
66
66
|
currentNodePos = selection.$from.before(1);
|
|
67
|
-
if (fg('platform_editor_element_dnd_nested_a11y')) {
|
|
68
|
-
currentNodePos =
|
|
67
|
+
if (selection.$from.depth > 0 && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
68
|
+
currentNodePos = getNestedNodePosition(state);
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
return currentNodePos;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { isInTable } from '@atlaskit/editor-tables/utils';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
3
|
import { key } from '../pm-plugins/main';
|
|
4
|
+
import { getNestedNodePosition } from '../utils';
|
|
4
5
|
export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state, _, view) => {
|
|
5
6
|
const {
|
|
6
7
|
$from
|
|
@@ -14,13 +15,21 @@ export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state,
|
|
|
14
15
|
|
|
15
16
|
// if the node is already focused, pressing the keymap second times should focus the parent node
|
|
16
17
|
shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
|
|
17
|
-
const parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.
|
|
18
|
+
const parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : getNestedNodePosition(state) + 1;
|
|
18
19
|
const parentElement = view === null || view === void 0 ? void 0 : (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
|
|
19
20
|
if (parentElement) {
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
let anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
|
|
22
|
+
let nodeType = parentElement.getAttribute('data-drag-handler-node-type');
|
|
23
|
+
if (!anchorName || !nodeType) {
|
|
24
|
+
// for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
|
|
25
|
+
const closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
|
|
26
|
+
if (closestParentElement) {
|
|
27
|
+
anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
|
|
28
|
+
nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
|
|
29
|
+
}
|
|
30
|
+
}
|
|
22
31
|
if (api && anchorName && nodeType) {
|
|
23
|
-
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(
|
|
32
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
|
|
24
33
|
isFocused: true
|
|
25
34
|
}));
|
|
26
35
|
return true;
|
|
@@ -12,7 +12,6 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
|
12
12
|
import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
|
|
13
13
|
import { blockControlsMessages } from '@atlaskit/editor-common/messages';
|
|
14
14
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
15
|
-
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
16
15
|
import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
|
|
17
16
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
17
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
@@ -20,7 +19,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
|
|
|
20
19
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
21
20
|
import Tooltip from '@atlaskit/tooltip';
|
|
22
21
|
import { key } from '../pm-plugins/main';
|
|
23
|
-
import { selectNode } from '../utils';
|
|
22
|
+
import { getNestedNodePosition, selectNode } from '../utils';
|
|
24
23
|
import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
|
|
25
24
|
import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
|
|
26
25
|
import { dragPreview } from './drag-preview';
|
|
@@ -362,7 +361,7 @@ const DragHandleInternal = ({
|
|
|
362
361
|
}];
|
|
363
362
|
let isParentNodeOfTypeLayout;
|
|
364
363
|
if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
365
|
-
isParentNodeOfTypeLayout = nodeType === 'layoutSection' ||
|
|
364
|
+
isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve(getNestedNodePosition(view.state)).node().type.name === 'layoutColumn';
|
|
366
365
|
if (isParentNodeOfTypeLayout) {
|
|
367
366
|
helpDescriptors = [...helpDescriptors, {
|
|
368
367
|
description: formatMessage(blockControlsMessages.moveLeft),
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
export const getNestedNodePosition = state => {
|
|
4
|
+
const {
|
|
5
|
+
selection
|
|
6
|
+
} = state;
|
|
7
|
+
let nestedNodePos = selection.$from.before(1);
|
|
8
|
+
if (selection instanceof TextSelection) {
|
|
9
|
+
nestedNodePos = selection.$from.before();
|
|
10
|
+
const $pos = state.doc.resolve(nestedNodePos);
|
|
11
|
+
if ($pos.depth < 1) {
|
|
12
|
+
return nestedNodePos;
|
|
13
|
+
}
|
|
14
|
+
const parentNodeOfSpecificTypes = findParentNodeOfType([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList])(state.selection);
|
|
15
|
+
if (parentNodeOfSpecificTypes) {
|
|
16
|
+
const parentNodeType = parentNodeOfSpecificTypes.node.type.name;
|
|
17
|
+
nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
|
|
18
|
+
}
|
|
19
|
+
} else {
|
|
20
|
+
nestedNodePos = selection.$from.pos;
|
|
21
|
+
}
|
|
22
|
+
return nestedNodePos;
|
|
23
|
+
};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { getSelection, selectNode } from './getSelection';
|
|
1
|
+
export { getSelection, selectNode } from './getSelection';
|
|
2
|
+
export { getNestedNodePosition } from './getNestedNodePosition';
|
|
@@ -12,7 +12,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
12
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
13
|
import { DIRECTION } from '../consts';
|
|
14
14
|
import { key } from '../pm-plugins/main';
|
|
15
|
-
import { selectNode } from '../utils';
|
|
15
|
+
import { getNestedNodePosition, selectNode } from '../utils';
|
|
16
16
|
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
|
|
17
17
|
|
|
18
18
|
/**
|
|
@@ -63,8 +63,8 @@ var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayo
|
|
|
63
63
|
// 2. caret cursor is inside the node
|
|
64
64
|
// 3. the start of the selection is inside the node
|
|
65
65
|
currentNodePos = selection.$from.before(1);
|
|
66
|
-
if (fg('platform_editor_element_dnd_nested_a11y')) {
|
|
67
|
-
currentNodePos =
|
|
66
|
+
if (selection.$from.depth > 0 && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
67
|
+
currentNodePos = getNestedNodePosition(state);
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
return currentNodePos;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { isInTable } from '@atlaskit/editor-tables/utils';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
3
|
import { key } from '../pm-plugins/main';
|
|
4
|
+
import { getNestedNodePosition } from '../utils';
|
|
4
5
|
export var showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
|
|
5
6
|
return function (state, _, view) {
|
|
6
7
|
var $from = state.selection.$from;
|
|
@@ -12,13 +13,21 @@ export var showDragHandleAtSelection = function showDragHandleAtSelection(api, s
|
|
|
12
13
|
|
|
13
14
|
// if the node is already focused, pressing the keymap second times should focus the parent node
|
|
14
15
|
shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
|
|
15
|
-
var parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.
|
|
16
|
+
var parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : getNestedNodePosition(state) + 1;
|
|
16
17
|
var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
|
|
17
18
|
if (parentElement) {
|
|
18
19
|
var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
|
|
19
20
|
var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
|
|
21
|
+
if (!anchorName || !nodeType) {
|
|
22
|
+
// for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
|
|
23
|
+
var closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
|
|
24
|
+
if (closestParentElement) {
|
|
25
|
+
anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
|
|
26
|
+
nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
|
|
27
|
+
}
|
|
28
|
+
}
|
|
20
29
|
if (api && anchorName && nodeType) {
|
|
21
|
-
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(
|
|
30
|
+
api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
|
|
22
31
|
isFocused: true
|
|
23
32
|
}));
|
|
24
33
|
return true;
|
|
@@ -14,7 +14,6 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
|
14
14
|
import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
|
|
15
15
|
import { blockControlsMessages } from '@atlaskit/editor-common/messages';
|
|
16
16
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
17
|
-
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
18
17
|
import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
|
|
19
18
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
19
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
@@ -22,7 +21,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
|
|
|
22
21
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
23
22
|
import Tooltip from '@atlaskit/tooltip';
|
|
24
23
|
import { key } from '../pm-plugins/main';
|
|
25
|
-
import { selectNode } from '../utils';
|
|
24
|
+
import { getNestedNodePosition, selectNode } from '../utils';
|
|
26
25
|
import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
|
|
27
26
|
import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
|
|
28
27
|
import { dragPreview } from './drag-preview';
|
|
@@ -370,7 +369,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
370
369
|
}];
|
|
371
370
|
var isParentNodeOfTypeLayout;
|
|
372
371
|
if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && fg('platform_editor_element_dnd_nested_a11y')) {
|
|
373
|
-
isParentNodeOfTypeLayout = nodeType === 'layoutSection' ||
|
|
372
|
+
isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve(getNestedNodePosition(view.state)).node().type.name === 'layoutColumn';
|
|
374
373
|
if (isParentNodeOfTypeLayout) {
|
|
375
374
|
helpDescriptors = [].concat(_toConsumableArray(helpDescriptors), [{
|
|
376
375
|
description: formatMessage(blockControlsMessages.moveLeft),
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
export var getNestedNodePosition = function getNestedNodePosition(state) {
|
|
4
|
+
var selection = state.selection;
|
|
5
|
+
var nestedNodePos = selection.$from.before(1);
|
|
6
|
+
if (selection instanceof TextSelection) {
|
|
7
|
+
nestedNodePos = selection.$from.before();
|
|
8
|
+
var $pos = state.doc.resolve(nestedNodePos);
|
|
9
|
+
if ($pos.depth < 1) {
|
|
10
|
+
return nestedNodePos;
|
|
11
|
+
}
|
|
12
|
+
var parentNodeOfSpecificTypes = findParentNodeOfType([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList])(state.selection);
|
|
13
|
+
if (parentNodeOfSpecificTypes) {
|
|
14
|
+
var parentNodeType = parentNodeOfSpecificTypes.node.type.name;
|
|
15
|
+
nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
|
|
16
|
+
}
|
|
17
|
+
} else {
|
|
18
|
+
nestedNodePos = selection.$from.pos;
|
|
19
|
+
}
|
|
20
|
+
return nestedNodePos;
|
|
21
|
+
};
|
package/dist/esm/utils/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { getSelection, selectNode } from './getSelection';
|
|
1
|
+
export { getSelection, selectNode } from './getSelection';
|
|
2
|
+
export { getNestedNodePosition } from './getNestedNodePosition';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
42
42
|
"@atlaskit/editor-shared-styles": "^3.0.0",
|
|
43
43
|
"@atlaskit/editor-tables": "^2.8.0",
|
|
44
|
-
"@atlaskit/icon": "^22.
|
|
44
|
+
"@atlaskit/icon": "^22.22.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
46
46
|
"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
|
|
47
47
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
|
|
48
48
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
|
|
49
49
|
"@atlaskit/primitives": "^12.2.0",
|
|
50
50
|
"@atlaskit/theme": "^13.0.0",
|
|
51
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
51
|
+
"@atlaskit/tmp-editor-statsig": "^2.3.0",
|
|
52
52
|
"@atlaskit/tokens": "^2.0.0",
|
|
53
53
|
"@atlaskit/tooltip": "^18.8.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|