@atlaskit/editor-plugin-block-controls 1.12.5 → 1.12.7
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 +16 -0
- package/dist/cjs/commands/move-node.js +2 -1
- package/dist/cjs/pm-plugins/decorations.js +9 -10
- package/dist/cjs/pm-plugins/handle-mouse-over.js +5 -2
- package/dist/cjs/pm-plugins/main.js +9 -9
- package/dist/cjs/ui/drag-handle.js +2 -1
- package/dist/cjs/ui/global-styles.js +2 -1
- package/dist/es2019/commands/move-node.js +2 -1
- package/dist/es2019/pm-plugins/decorations.js +9 -10
- package/dist/es2019/pm-plugins/handle-mouse-over.js +5 -2
- package/dist/es2019/pm-plugins/main.js +9 -9
- package/dist/es2019/ui/drag-handle.js +2 -1
- package/dist/es2019/ui/global-styles.js +2 -1
- package/dist/esm/commands/move-node.js +2 -1
- package/dist/esm/pm-plugins/decorations.js +9 -10
- package/dist/esm/pm-plugins/handle-mouse-over.js +5 -2
- package/dist/esm/pm-plugins/main.js +9 -9
- package/dist/esm/ui/drag-handle.js +2 -1
- package/dist/esm/ui/global-styles.js +2 -1
- package/package.json +4 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 1.12.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#136078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136078)
|
|
8
|
+
[`09414d7233497`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/09414d7233497) -
|
|
9
|
+
ED-24507 Switch nested dnd FG to experiment and include padding changes"
|
|
10
|
+
|
|
11
|
+
## 1.12.6
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#135137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135137)
|
|
16
|
+
[`c1cc86c3c898f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1cc86c3c898f) -
|
|
17
|
+
[ux] Fix bug where drag handles may be missing
|
|
18
|
+
|
|
3
19
|
## 1.12.5
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -12,6 +12,7 @@ var _selection = require("@atlaskit/editor-common/selection");
|
|
|
12
12
|
var _transforms = require("@atlaskit/editor-common/transforms");
|
|
13
13
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
14
14
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
15
16
|
var _consts = require("../consts");
|
|
16
17
|
var _main = require("../pm-plugins/main");
|
|
17
18
|
var _utils2 = require("../utils");
|
|
@@ -132,7 +133,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
132
133
|
var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
|
|
133
134
|
var end = start + size;
|
|
134
135
|
var mappedTo;
|
|
135
|
-
if ((0,
|
|
136
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
136
137
|
var _transformSourceSlice;
|
|
137
138
|
var nodeCopy = tr.doc.slice(start, end, false); // cut the content
|
|
138
139
|
var $to = tr.doc.resolve(to);
|
|
@@ -14,7 +14,6 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
|
14
14
|
var _reactIntlNext = require("react-intl-next");
|
|
15
15
|
var _uuid = _interopRequireDefault(require("uuid"));
|
|
16
16
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
17
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
17
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
19
18
|
var _dragHandle = require("../ui/drag-handle");
|
|
20
19
|
var _dropTarget = require("../ui/drop-target");
|
|
@@ -24,7 +23,7 @@ var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'lis
|
|
|
24
23
|
var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
|
|
25
24
|
var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
|
|
26
25
|
var getNestedDepth = function getNestedDepth() {
|
|
27
|
-
return (0,
|
|
26
|
+
return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
|
|
28
27
|
};
|
|
29
28
|
var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
|
|
30
29
|
return _view.Decoration.widget(pos, function () {
|
|
@@ -51,7 +50,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
51
50
|
var depth = 0;
|
|
52
51
|
// drop target dco at the end position
|
|
53
52
|
var endPosDeco = null;
|
|
54
|
-
if ((0,
|
|
53
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
55
54
|
depth = newState.doc.resolve(pos).depth;
|
|
56
55
|
if (node.isInline || !parent) {
|
|
57
56
|
prevNode = node;
|
|
@@ -91,7 +90,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
91
90
|
}
|
|
92
91
|
decs.push(createDropTargetDecoration(pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
|
|
93
92
|
api: api,
|
|
94
|
-
id: (0,
|
|
93
|
+
id: (0, _experiments.editorExperiment)('nested-dnd', true) ? pos : index,
|
|
95
94
|
formatMessage: formatMessage,
|
|
96
95
|
prevNode: prevNode,
|
|
97
96
|
nextNode: node,
|
|
@@ -117,7 +116,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
117
116
|
*
|
|
118
117
|
*/
|
|
119
118
|
var lastPos = newState.doc.content.size;
|
|
120
|
-
if ((0,
|
|
119
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
121
120
|
decorationState.push({
|
|
122
121
|
id: lastPos,
|
|
123
122
|
pos: lastPos
|
|
@@ -133,7 +132,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
|
|
|
133
132
|
element.setAttribute('data-blocks-drop-target-container', 'true');
|
|
134
133
|
_reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
|
|
135
134
|
api: api,
|
|
136
|
-
id: (0,
|
|
135
|
+
id: (0, _experiments.editorExperiment)('nested-dnd', true) ? lastPos : decorationState.length,
|
|
137
136
|
formatMessage: formatMessage
|
|
138
137
|
}), element);
|
|
139
138
|
return element;
|
|
@@ -181,11 +180,11 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
|
|
|
181
180
|
var shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
|
|
182
181
|
if ((0, _experiments.editorExperiment)('dnd-input-performance-optimisation', true, {
|
|
183
182
|
exposure: true
|
|
184
|
-
}) || (0,
|
|
183
|
+
}) || (0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
185
184
|
var handleId = ObjHash.getForNode(node);
|
|
186
185
|
anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
|
|
187
186
|
}
|
|
188
|
-
if ((0,
|
|
187
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
189
188
|
var _anchorName;
|
|
190
189
|
// Doesn't descend into a node
|
|
191
190
|
if (node.isInline) {
|
|
@@ -219,7 +218,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
219
218
|
element.style.display = 'inline';
|
|
220
219
|
element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
|
|
221
220
|
element.setAttribute('data-blocks-drag-handle-container', 'true');
|
|
222
|
-
if ((0,
|
|
221
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
223
222
|
unbind = (0, _bindEventListener.bind)(element, {
|
|
224
223
|
type: 'mouseover',
|
|
225
224
|
listener: function listener(e) {
|
|
@@ -247,7 +246,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
|
|
|
247
246
|
side: -1,
|
|
248
247
|
id: 'drag-handle',
|
|
249
248
|
destroy: function destroy() {
|
|
250
|
-
if ((0,
|
|
249
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
251
250
|
unbind && unbind();
|
|
252
251
|
}
|
|
253
252
|
}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.handleMouseOver = void 0;
|
|
7
7
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
8
9
|
var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
|
|
9
10
|
var _api$blockControls;
|
|
10
11
|
var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
|
|
@@ -28,9 +29,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
|
|
|
28
29
|
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24227')) {
|
|
29
30
|
return false;
|
|
30
31
|
}
|
|
31
|
-
var pos = view.posAtDOM(rootElement, 0,
|
|
32
|
+
var pos = view.posAtDOM(rootElement, 0, -1);
|
|
32
33
|
var rootPos;
|
|
33
|
-
if ((0,
|
|
34
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true, {
|
|
35
|
+
exposure: true
|
|
36
|
+
})) {
|
|
34
37
|
var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
|
|
35
38
|
var $rootPos = view.state.doc.resolve(pos);
|
|
36
39
|
var depth = $rootPos.depth;
|
|
@@ -115,14 +115,14 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
115
115
|
childCount = currentState.childCount;
|
|
116
116
|
var isPerformanceFix = (0, _experiments.editorExperiment)('dnd-input-performance-optimisation', true, {
|
|
117
117
|
exposure: true
|
|
118
|
-
}) || (0,
|
|
118
|
+
}) || (0, _experiments.editorExperiment)('nested-dnd', true);
|
|
119
119
|
var activeNodeWithNewNodeType = null;
|
|
120
120
|
var meta = tr.getMeta(key);
|
|
121
|
-
var newChildCount = tr.docChanged && (0,
|
|
121
|
+
var newChildCount = tr.docChanged && (0, _experiments.editorExperiment)('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
|
|
122
122
|
// If tables or media are being resized, we want to hide the drag handle
|
|
123
123
|
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
124
124
|
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
125
|
-
var nodeCountChanged = (0,
|
|
125
|
+
var nodeCountChanged = (0, _experiments.editorExperiment)('nested-dnd', true) ? childCount !== newChildCount : oldState.doc.childCount !== newState.doc.childCount;
|
|
126
126
|
var shouldRemoveHandle = !tr.getMeta('isRemote');
|
|
127
127
|
|
|
128
128
|
// During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
|
|
@@ -142,7 +142,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
142
142
|
var spec = _ref6.spec;
|
|
143
143
|
return spec.id === 'drag-handle';
|
|
144
144
|
});
|
|
145
|
-
var decsLength = (0,
|
|
145
|
+
var decsLength = (0, _experiments.editorExperiment)('nested-dnd', true) ? decorations.find().filter(function (_ref7) {
|
|
146
146
|
var spec = _ref7.spec;
|
|
147
147
|
return spec.type === 'node-decoration';
|
|
148
148
|
}).length : decorations.find().filter(function (_ref8) {
|
|
@@ -150,7 +150,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
150
150
|
return spec.id !== 'drag-handle';
|
|
151
151
|
}).length;
|
|
152
152
|
var newNodeDecs;
|
|
153
|
-
if ((0,
|
|
153
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
154
154
|
// naive solution while we work on performance optimised approach under ED-24503
|
|
155
155
|
newNodeDecs = (0, _decorations.nodeDecorations)(newState);
|
|
156
156
|
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newNodeDecs.length;
|
|
@@ -162,7 +162,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
162
162
|
}).length;
|
|
163
163
|
var _getIntl = getIntl(),
|
|
164
164
|
formatMessage = _getIntl.formatMessage;
|
|
165
|
-
if (
|
|
165
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', false)) {
|
|
166
166
|
isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
|
|
167
167
|
}
|
|
168
168
|
|
|
@@ -187,7 +187,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
187
187
|
decorations = decorations.remove(oldNodeDecs);
|
|
188
188
|
newNodeDecs = (_newNodeDecs = newNodeDecs) !== null && _newNodeDecs !== void 0 ? _newNodeDecs : (0, _decorations.nodeDecorations)(newState);
|
|
189
189
|
decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(newNodeDecs));
|
|
190
|
-
if (activeNode && !isDecsMissing) {
|
|
190
|
+
if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
|
|
191
191
|
var mappedPosisiton = tr.mapping.map(activeNode.pos);
|
|
192
192
|
var prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
|
|
193
193
|
|
|
@@ -250,7 +250,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
250
250
|
var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
251
251
|
var shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
|
|
252
252
|
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
253
|
-
if ((0,
|
|
253
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
254
254
|
var remainingDecs = decorations.find(undefined, undefined, function (spec) {
|
|
255
255
|
return spec.type !== 'drop-target-decoration';
|
|
256
256
|
});
|
|
@@ -291,7 +291,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
291
291
|
if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
|
|
292
292
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
293
293
|
}
|
|
294
|
-
var isEmptyDoc = (0,
|
|
294
|
+
var isEmptyDoc = (0, _experiments.editorExperiment)('nested-dnd', true) ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
|
|
295
295
|
var hasNodeDecoration = decorations.find().some(function (_ref12) {
|
|
296
296
|
var spec = _ref12.spec;
|
|
297
297
|
return spec.type === 'node-decoration';
|
|
@@ -19,6 +19,7 @@ var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-han
|
|
|
19
19
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
20
|
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
21
21
|
var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
|
|
22
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
22
23
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
23
24
|
var _main = require("../pm-plugins/main");
|
|
24
25
|
var _utils = require("../utils");
|
|
@@ -254,7 +255,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
254
255
|
var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
|
|
255
256
|
var calculatePosition = (0, _react.useCallback)(function () {
|
|
256
257
|
var parentNodeType;
|
|
257
|
-
if ((0,
|
|
258
|
+
if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
|
|
258
259
|
var pos = getPos();
|
|
259
260
|
var $pos = pos && view.state.doc.resolve(pos);
|
|
260
261
|
var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
|
|
@@ -8,6 +8,7 @@ exports.GlobalStylesWrapper = void 0;
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
11
12
|
var _consts = require("./consts");
|
|
12
13
|
/**
|
|
13
14
|
* @jsxRuntime classic
|
|
@@ -130,6 +131,6 @@ var getTextNodeStyle = function getTextNodeStyle() {
|
|
|
130
131
|
};
|
|
131
132
|
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
132
133
|
return (0, _react.jsx)(_react.Global, {
|
|
133
|
-
styles: [globalStyles, (0,
|
|
134
|
+
styles: [globalStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
|
|
134
135
|
});
|
|
135
136
|
};
|
|
@@ -4,6 +4,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
|
|
|
4
4
|
import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
|
|
5
5
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
8
|
import { DIRECTION } from '../consts';
|
|
8
9
|
import { key } from '../pm-plugins/main';
|
|
9
10
|
import { selectNode } from '../utils';
|
|
@@ -126,7 +127,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
|
|
|
126
127
|
const size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
|
|
127
128
|
const end = start + size;
|
|
128
129
|
let mappedTo;
|
|
129
|
-
if (
|
|
130
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
130
131
|
var _transformSourceSlice;
|
|
131
132
|
const nodeCopy = tr.doc.slice(start, end, false); // cut the content
|
|
132
133
|
const $to = tr.doc.resolve(to);
|
|
@@ -5,7 +5,6 @@ import ReactDOM from 'react-dom';
|
|
|
5
5
|
import { RawIntlProvider } from 'react-intl-next';
|
|
6
6
|
import uuid from 'uuid';
|
|
7
7
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
9
|
import { DragHandle } from '../ui/drag-handle';
|
|
11
10
|
import { DropTarget } from '../ui/drop-target';
|
|
@@ -14,7 +13,7 @@ import { canMoveNodeToIndex } from '../utils/validation';
|
|
|
14
13
|
const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
|
|
15
14
|
const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
|
|
16
15
|
const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
|
|
17
|
-
const getNestedDepth = () =>
|
|
16
|
+
const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
|
|
18
17
|
const createDropTargetDecoration = (pos, dropTargetDec) => {
|
|
19
18
|
return Decoration.widget(pos, () => {
|
|
20
19
|
const element = document.createElement('div');
|
|
@@ -40,7 +39,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
|
|
|
40
39
|
let depth = 0;
|
|
41
40
|
// drop target dco at the end position
|
|
42
41
|
let endPosDeco = null;
|
|
43
|
-
if (
|
|
42
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
44
43
|
depth = newState.doc.resolve(pos).depth;
|
|
45
44
|
if (node.isInline || !parent) {
|
|
46
45
|
prevNode = node;
|
|
@@ -80,7 +79,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
|
|
|
80
79
|
}
|
|
81
80
|
decs.push(createDropTargetDecoration(pos, /*#__PURE__*/createElement(DropTarget, {
|
|
82
81
|
api,
|
|
83
|
-
id:
|
|
82
|
+
id: editorExperiment('nested-dnd', true) ? pos : index,
|
|
84
83
|
formatMessage,
|
|
85
84
|
prevNode,
|
|
86
85
|
nextNode: node,
|
|
@@ -106,7 +105,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
|
|
|
106
105
|
*
|
|
107
106
|
*/
|
|
108
107
|
const lastPos = newState.doc.content.size;
|
|
109
|
-
if (
|
|
108
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
110
109
|
decorationState.push({
|
|
111
110
|
id: lastPos,
|
|
112
111
|
pos: lastPos
|
|
@@ -122,7 +121,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
|
|
|
122
121
|
element.setAttribute('data-blocks-drop-target-container', 'true');
|
|
123
122
|
ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
|
|
124
123
|
api,
|
|
125
|
-
id:
|
|
124
|
+
id: editorExperiment('nested-dnd', true) ? lastPos : decorationState.length,
|
|
126
125
|
formatMessage
|
|
127
126
|
}), element);
|
|
128
127
|
return element;
|
|
@@ -163,11 +162,11 @@ export const nodeDecorations = newState => {
|
|
|
163
162
|
const shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
|
|
164
163
|
if (editorExperiment('dnd-input-performance-optimisation', true, {
|
|
165
164
|
exposure: true
|
|
166
|
-
}) ||
|
|
165
|
+
}) || editorExperiment('nested-dnd', true)) {
|
|
167
166
|
const handleId = ObjHash.getForNode(node);
|
|
168
167
|
anchorName = `--node-anchor-${node.type.name}-${handleId}`;
|
|
169
168
|
}
|
|
170
|
-
if (
|
|
169
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
171
170
|
var _anchorName;
|
|
172
171
|
// Doesn't descend into a node
|
|
173
172
|
if (node.isInline) {
|
|
@@ -204,7 +203,7 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
|
|
|
204
203
|
element.style.display = 'inline';
|
|
205
204
|
element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
|
|
206
205
|
element.setAttribute('data-blocks-drag-handle-container', 'true');
|
|
207
|
-
if (
|
|
206
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
208
207
|
unbind = bind(element, {
|
|
209
208
|
type: 'mouseover',
|
|
210
209
|
listener: e => {
|
|
@@ -232,7 +231,7 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
|
|
|
232
231
|
side: -1,
|
|
233
232
|
id: 'drag-handle',
|
|
234
233
|
destroy: () => {
|
|
235
|
-
if (
|
|
234
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
236
235
|
unbind && unbind();
|
|
237
236
|
}
|
|
238
237
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
2
3
|
export const handleMouseOver = (view, event, api) => {
|
|
3
4
|
var _api$blockControls;
|
|
4
5
|
const {
|
|
@@ -23,9 +24,11 @@ export const handleMouseOver = (view, event, api) => {
|
|
|
23
24
|
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && fg('platform_editor_element_drag_and_drop_ed_24227')) {
|
|
24
25
|
return false;
|
|
25
26
|
}
|
|
26
|
-
const pos = view.posAtDOM(rootElement, 0,
|
|
27
|
+
const pos = view.posAtDOM(rootElement, 0, -1);
|
|
27
28
|
let rootPos;
|
|
28
|
-
if (
|
|
29
|
+
if (editorExperiment('nested-dnd', true, {
|
|
30
|
+
exposure: true
|
|
31
|
+
})) {
|
|
29
32
|
var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
|
|
30
33
|
const $rootPos = view.state.doc.resolve(pos);
|
|
31
34
|
const depth = $rootPos.depth;
|
|
@@ -111,14 +111,14 @@ export const createPlugin = (api, getIntl) => {
|
|
|
111
111
|
} = currentState;
|
|
112
112
|
const isPerformanceFix = editorExperiment('dnd-input-performance-optimisation', true, {
|
|
113
113
|
exposure: true
|
|
114
|
-
}) ||
|
|
114
|
+
}) || editorExperiment('nested-dnd', true);
|
|
115
115
|
let activeNodeWithNewNodeType = null;
|
|
116
116
|
const meta = tr.getMeta(key);
|
|
117
|
-
const newChildCount = tr.docChanged &&
|
|
117
|
+
const newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
|
|
118
118
|
// If tables or media are being resized, we want to hide the drag handle
|
|
119
119
|
const resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
120
120
|
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
121
|
-
const nodeCountChanged =
|
|
121
|
+
const nodeCountChanged = editorExperiment('nested-dnd', true) ? childCount !== newChildCount : oldState.doc.childCount !== newState.doc.childCount;
|
|
122
122
|
const shouldRemoveHandle = !tr.getMeta('isRemote');
|
|
123
123
|
|
|
124
124
|
// During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
|
|
@@ -136,13 +136,13 @@ export const createPlugin = (api, getIntl) => {
|
|
|
136
136
|
const isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(({
|
|
137
137
|
spec
|
|
138
138
|
}) => spec.id === 'drag-handle');
|
|
139
|
-
const decsLength =
|
|
139
|
+
const decsLength = editorExperiment('nested-dnd', true) ? decorations.find().filter(({
|
|
140
140
|
spec
|
|
141
141
|
}) => spec.type === 'node-decoration').length : decorations.find().filter(({
|
|
142
142
|
spec
|
|
143
143
|
}) => spec.id !== 'drag-handle').length;
|
|
144
144
|
let newNodeDecs;
|
|
145
|
-
if (
|
|
145
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
146
146
|
// naive solution while we work on performance optimised approach under ED-24503
|
|
147
147
|
newNodeDecs = nodeDecorations(newState);
|
|
148
148
|
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newNodeDecs.length;
|
|
@@ -153,7 +153,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
153
153
|
const {
|
|
154
154
|
formatMessage
|
|
155
155
|
} = getIntl();
|
|
156
|
-
if (
|
|
156
|
+
if (editorExperiment('nested-dnd', false)) {
|
|
157
157
|
isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
|
|
158
158
|
}
|
|
159
159
|
|
|
@@ -176,7 +176,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
176
176
|
decorations = decorations.remove(oldNodeDecs);
|
|
177
177
|
newNodeDecs = (_newNodeDecs = newNodeDecs) !== null && _newNodeDecs !== void 0 ? _newNodeDecs : nodeDecorations(newState);
|
|
178
178
|
decorations = decorations.add(newState.doc, [...newNodeDecs]);
|
|
179
|
-
if (activeNode && !isDecsMissing) {
|
|
179
|
+
if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
|
|
180
180
|
let mappedPosisiton = tr.mapping.map(activeNode.pos);
|
|
181
181
|
const prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
|
|
182
182
|
|
|
@@ -231,7 +231,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
231
231
|
const shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
232
232
|
const shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
|
|
233
233
|
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
234
|
-
if (
|
|
234
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
235
235
|
const remainingDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
|
|
236
236
|
decorations = DecorationSet.create(newState.doc, remainingDecs);
|
|
237
237
|
} else {
|
|
@@ -270,7 +270,7 @@ export const createPlugin = (api, getIntl) => {
|
|
|
270
270
|
if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
|
|
271
271
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
272
272
|
}
|
|
273
|
-
const isEmptyDoc =
|
|
273
|
+
const isEmptyDoc = editorExperiment('nested-dnd', true) ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
|
|
274
274
|
const hasNodeDecoration = decorations.find().some(({
|
|
275
275
|
spec
|
|
276
276
|
}) => spec.type === 'node-decoration');
|
|
@@ -16,6 +16,7 @@ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
|
|
|
16
16
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
17
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
18
18
|
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
|
19
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
19
20
|
import Tooltip from '@atlaskit/tooltip';
|
|
20
21
|
import { key } from '../pm-plugins/main';
|
|
21
22
|
import { selectNode } from '../utils';
|
|
@@ -242,7 +243,7 @@ const DragHandleInternal = ({
|
|
|
242
243
|
const macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
|
|
243
244
|
const calculatePosition = useCallback(() => {
|
|
244
245
|
let parentNodeType;
|
|
245
|
-
if (
|
|
246
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
246
247
|
const pos = getPos();
|
|
247
248
|
const $pos = pos && view.state.doc.resolve(pos);
|
|
248
249
|
const parentPos = $pos && $pos.depth ? $pos.before() : undefined;
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
6
|
import { css, Global, jsx } from '@emotion/react';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
8
9
|
import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
|
|
9
10
|
const extendedHoverZone = css({
|
|
10
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -134,6 +135,6 @@ const getTextNodeStyle = () => {
|
|
|
134
135
|
};
|
|
135
136
|
export const GlobalStylesWrapper = () => {
|
|
136
137
|
return jsx(Global, {
|
|
137
|
-
styles: [globalStyles,
|
|
138
|
+
styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
|
|
138
139
|
});
|
|
139
140
|
};
|
|
@@ -7,6 +7,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
|
|
|
7
7
|
import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
|
|
8
8
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
9
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
11
|
import { DIRECTION } from '../consts';
|
|
11
12
|
import { key } from '../pm-plugins/main';
|
|
12
13
|
import { selectNode } from '../utils';
|
|
@@ -126,7 +127,7 @@ export var moveNode = function moveNode(api) {
|
|
|
126
127
|
var size = (_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 1;
|
|
127
128
|
var end = start + size;
|
|
128
129
|
var mappedTo;
|
|
129
|
-
if (
|
|
130
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
130
131
|
var _transformSourceSlice;
|
|
131
132
|
var nodeCopy = tr.doc.slice(start, end, false); // cut the content
|
|
132
133
|
var $to = tr.doc.resolve(to);
|
|
@@ -7,7 +7,6 @@ import ReactDOM from 'react-dom';
|
|
|
7
7
|
import { RawIntlProvider } from 'react-intl-next';
|
|
8
8
|
import uuid from 'uuid';
|
|
9
9
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
10
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
11
|
import { DragHandle } from '../ui/drag-handle';
|
|
13
12
|
import { DropTarget } from '../ui/drop-target';
|
|
@@ -17,7 +16,7 @@ var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'lis
|
|
|
17
16
|
var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
|
|
18
17
|
var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
|
|
19
18
|
var getNestedDepth = function getNestedDepth() {
|
|
20
|
-
return
|
|
19
|
+
return editorExperiment('nested-dnd', true) ? 100 : 0;
|
|
21
20
|
};
|
|
22
21
|
var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
|
|
23
22
|
return Decoration.widget(pos, function () {
|
|
@@ -44,7 +43,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
|
|
|
44
43
|
var depth = 0;
|
|
45
44
|
// drop target dco at the end position
|
|
46
45
|
var endPosDeco = null;
|
|
47
|
-
if (
|
|
46
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
48
47
|
depth = newState.doc.resolve(pos).depth;
|
|
49
48
|
if (node.isInline || !parent) {
|
|
50
49
|
prevNode = node;
|
|
@@ -84,7 +83,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
|
|
|
84
83
|
}
|
|
85
84
|
decs.push(createDropTargetDecoration(pos, /*#__PURE__*/createElement(DropTarget, {
|
|
86
85
|
api: api,
|
|
87
|
-
id:
|
|
86
|
+
id: editorExperiment('nested-dnd', true) ? pos : index,
|
|
88
87
|
formatMessage: formatMessage,
|
|
89
88
|
prevNode: prevNode,
|
|
90
89
|
nextNode: node,
|
|
@@ -110,7 +109,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
|
|
|
110
109
|
*
|
|
111
110
|
*/
|
|
112
111
|
var lastPos = newState.doc.content.size;
|
|
113
|
-
if (
|
|
112
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
114
113
|
decorationState.push({
|
|
115
114
|
id: lastPos,
|
|
116
115
|
pos: lastPos
|
|
@@ -126,7 +125,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
|
|
|
126
125
|
element.setAttribute('data-blocks-drop-target-container', 'true');
|
|
127
126
|
ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
|
|
128
127
|
api: api,
|
|
129
|
-
id:
|
|
128
|
+
id: editorExperiment('nested-dnd', true) ? lastPos : decorationState.length,
|
|
130
129
|
formatMessage: formatMessage
|
|
131
130
|
}), element);
|
|
132
131
|
return element;
|
|
@@ -174,11 +173,11 @@ export var nodeDecorations = function nodeDecorations(newState) {
|
|
|
174
173
|
var shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
|
|
175
174
|
if (editorExperiment('dnd-input-performance-optimisation', true, {
|
|
176
175
|
exposure: true
|
|
177
|
-
}) ||
|
|
176
|
+
}) || editorExperiment('nested-dnd', true)) {
|
|
178
177
|
var handleId = ObjHash.getForNode(node);
|
|
179
178
|
anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
|
|
180
179
|
}
|
|
181
|
-
if (
|
|
180
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
182
181
|
var _anchorName;
|
|
183
182
|
// Doesn't descend into a node
|
|
184
183
|
if (node.isInline) {
|
|
@@ -212,7 +211,7 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
|
|
|
212
211
|
element.style.display = 'inline';
|
|
213
212
|
element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
|
|
214
213
|
element.setAttribute('data-blocks-drag-handle-container', 'true');
|
|
215
|
-
if (
|
|
214
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
216
215
|
unbind = bind(element, {
|
|
217
216
|
type: 'mouseover',
|
|
218
217
|
listener: function listener(e) {
|
|
@@ -240,7 +239,7 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
|
|
|
240
239
|
side: -1,
|
|
241
240
|
id: 'drag-handle',
|
|
242
241
|
destroy: function destroy() {
|
|
243
|
-
if (
|
|
242
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
244
243
|
unbind && unbind();
|
|
245
244
|
}
|
|
246
245
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
2
3
|
export var handleMouseOver = function handleMouseOver(view, event, api) {
|
|
3
4
|
var _api$blockControls;
|
|
4
5
|
var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
|
|
@@ -22,9 +23,11 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
|
|
|
22
23
|
if (['wrap-right', 'wrap-left'].includes(rootElement.getAttribute('layout') || '') && fg('platform_editor_element_drag_and_drop_ed_24227')) {
|
|
23
24
|
return false;
|
|
24
25
|
}
|
|
25
|
-
var pos = view.posAtDOM(rootElement, 0,
|
|
26
|
+
var pos = view.posAtDOM(rootElement, 0, -1);
|
|
26
27
|
var rootPos;
|
|
27
|
-
if (
|
|
28
|
+
if (editorExperiment('nested-dnd', true, {
|
|
29
|
+
exposure: true
|
|
30
|
+
})) {
|
|
28
31
|
var _$rootPos$parent, _$rootPos$parent2, _$rootPos$nodeAfter;
|
|
29
32
|
var $rootPos = view.state.doc.resolve(pos);
|
|
30
33
|
var depth = $rootPos.depth;
|
|
@@ -108,14 +108,14 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
108
108
|
childCount = currentState.childCount;
|
|
109
109
|
var isPerformanceFix = editorExperiment('dnd-input-performance-optimisation', true, {
|
|
110
110
|
exposure: true
|
|
111
|
-
}) ||
|
|
111
|
+
}) || editorExperiment('nested-dnd', true);
|
|
112
112
|
var activeNodeWithNewNodeType = null;
|
|
113
113
|
var meta = tr.getMeta(key);
|
|
114
|
-
var newChildCount = tr.docChanged &&
|
|
114
|
+
var newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
|
|
115
115
|
// If tables or media are being resized, we want to hide the drag handle
|
|
116
116
|
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
117
117
|
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
118
|
-
var nodeCountChanged =
|
|
118
|
+
var nodeCountChanged = editorExperiment('nested-dnd', true) ? childCount !== newChildCount : oldState.doc.childCount !== newState.doc.childCount;
|
|
119
119
|
var shouldRemoveHandle = !tr.getMeta('isRemote');
|
|
120
120
|
|
|
121
121
|
// During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
|
|
@@ -135,7 +135,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
135
135
|
var spec = _ref6.spec;
|
|
136
136
|
return spec.id === 'drag-handle';
|
|
137
137
|
});
|
|
138
|
-
var decsLength =
|
|
138
|
+
var decsLength = editorExperiment('nested-dnd', true) ? decorations.find().filter(function (_ref7) {
|
|
139
139
|
var spec = _ref7.spec;
|
|
140
140
|
return spec.type === 'node-decoration';
|
|
141
141
|
}).length : decorations.find().filter(function (_ref8) {
|
|
@@ -143,7 +143,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
143
143
|
return spec.id !== 'drag-handle';
|
|
144
144
|
}).length;
|
|
145
145
|
var newNodeDecs;
|
|
146
|
-
if (
|
|
146
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
147
147
|
// naive solution while we work on performance optimised approach under ED-24503
|
|
148
148
|
newNodeDecs = nodeDecorations(newState);
|
|
149
149
|
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newNodeDecs.length;
|
|
@@ -155,7 +155,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
155
155
|
}).length;
|
|
156
156
|
var _getIntl = getIntl(),
|
|
157
157
|
formatMessage = _getIntl.formatMessage;
|
|
158
|
-
if (
|
|
158
|
+
if (editorExperiment('nested-dnd', false)) {
|
|
159
159
|
isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
|
|
160
160
|
}
|
|
161
161
|
|
|
@@ -180,7 +180,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
180
180
|
decorations = decorations.remove(oldNodeDecs);
|
|
181
181
|
newNodeDecs = (_newNodeDecs = newNodeDecs) !== null && _newNodeDecs !== void 0 ? _newNodeDecs : nodeDecorations(newState);
|
|
182
182
|
decorations = decorations.add(newState.doc, _toConsumableArray(newNodeDecs));
|
|
183
|
-
if (activeNode && !isDecsMissing) {
|
|
183
|
+
if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
|
|
184
184
|
var mappedPosisiton = tr.mapping.map(activeNode.pos);
|
|
185
185
|
var prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
|
|
186
186
|
|
|
@@ -243,7 +243,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
243
243
|
var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
244
244
|
var shouldMapDropTargets = !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
|
|
245
245
|
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
246
|
-
if (
|
|
246
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
247
247
|
var remainingDecs = decorations.find(undefined, undefined, function (spec) {
|
|
248
248
|
return spec.type !== 'drop-target-decoration';
|
|
249
249
|
});
|
|
@@ -284,7 +284,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
284
284
|
if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
|
|
285
285
|
decorations = decorations.map(tr.mapping, tr.doc);
|
|
286
286
|
}
|
|
287
|
-
var isEmptyDoc =
|
|
287
|
+
var isEmptyDoc = editorExperiment('nested-dnd', true) ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
|
|
288
288
|
var hasNodeDecoration = decorations.find().some(function (_ref12) {
|
|
289
289
|
var spec = _ref12.spec;
|
|
290
290
|
return spec.type === 'node-decoration';
|
|
@@ -17,6 +17,7 @@ import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
|
|
|
17
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
18
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
19
19
|
import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
|
|
20
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
21
|
import Tooltip from '@atlaskit/tooltip';
|
|
21
22
|
import { key } from '../pm-plugins/main';
|
|
22
23
|
import { selectNode } from '../utils';
|
|
@@ -245,7 +246,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
245
246
|
var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
|
|
246
247
|
var calculatePosition = useCallback(function () {
|
|
247
248
|
var parentNodeType;
|
|
248
|
-
if (
|
|
249
|
+
if (editorExperiment('nested-dnd', true)) {
|
|
249
250
|
var pos = getPos();
|
|
250
251
|
var $pos = pos && view.state.doc.resolve(pos);
|
|
251
252
|
var parentPos = $pos && $pos.depth ? $pos.before() : undefined;
|
|
@@ -6,6 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, Global, jsx } from '@emotion/react';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
10
|
import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
|
|
10
11
|
var extendedHoverZone = css({
|
|
11
12
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -122,6 +123,6 @@ var getTextNodeStyle = function getTextNodeStyle() {
|
|
|
122
123
|
};
|
|
123
124
|
export var GlobalStylesWrapper = function GlobalStylesWrapper() {
|
|
124
125
|
return jsx(Global, {
|
|
125
|
-
styles: [globalStyles,
|
|
126
|
+
styles: [globalStyles, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
|
|
126
127
|
});
|
|
127
128
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.7",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -8,9 +8,7 @@
|
|
|
8
8
|
"registry": "https://registry.npmjs.org/"
|
|
9
9
|
},
|
|
10
10
|
"atlassian": {
|
|
11
|
-
"team": "Editor: Jenga"
|
|
12
|
-
"inPublicMirror": false,
|
|
13
|
-
"releaseModel": "continuous"
|
|
11
|
+
"team": "Editor: Jenga"
|
|
14
12
|
},
|
|
15
13
|
"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
|
|
16
14
|
"main": "dist/cjs/index.js",
|
|
@@ -31,7 +29,7 @@
|
|
|
31
29
|
".": "./src/index.ts"
|
|
32
30
|
},
|
|
33
31
|
"dependencies": {
|
|
34
|
-
"@atlaskit/editor-common": "^88.
|
|
32
|
+
"@atlaskit/editor-common": "^88.6.0",
|
|
35
33
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
|
|
36
34
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
37
35
|
"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
|
|
@@ -46,7 +44,7 @@
|
|
|
46
44
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
|
|
47
45
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
|
|
48
46
|
"@atlaskit/theme": "^13.0.0",
|
|
49
|
-
"@atlaskit/tmp-editor-statsig": "^1.
|
|
47
|
+
"@atlaskit/tmp-editor-statsig": "^1.4.0",
|
|
50
48
|
"@atlaskit/tokens": "^1.59.0",
|
|
51
49
|
"@atlaskit/tooltip": "^18.7.0",
|
|
52
50
|
"@babel/runtime": "^7.0.0",
|
|
@@ -122,9 +120,6 @@
|
|
|
122
120
|
"platform_editor_element_drag_and_drop_ed_24227": {
|
|
123
121
|
"type": "boolean"
|
|
124
122
|
},
|
|
125
|
-
"platform_editor_elements_dnd_nested": {
|
|
126
|
-
"type": "boolean"
|
|
127
|
-
},
|
|
128
123
|
"platform_editor_element_drag_and_drop_ed_24304": {
|
|
129
124
|
"type": "boolean"
|
|
130
125
|
},
|