@atlaskit/editor-plugin-block-controls 1.13.11 → 2.0.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.
Files changed (28) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/plugin.js +12 -10
  3. package/dist/cjs/pm-plugins/decorations.js +26 -62
  4. package/dist/cjs/pm-plugins/main.js +12 -34
  5. package/dist/cjs/ui/drag-handle.js +10 -16
  6. package/dist/cjs/ui/drop-target.js +5 -9
  7. package/dist/cjs/utils/getSelection.js +4 -3
  8. package/dist/es2019/plugin.js +12 -10
  9. package/dist/es2019/pm-plugins/decorations.js +18 -58
  10. package/dist/es2019/pm-plugins/main.js +10 -34
  11. package/dist/es2019/ui/drag-handle.js +10 -16
  12. package/dist/es2019/ui/drop-target.js +5 -8
  13. package/dist/es2019/utils/getSelection.js +4 -3
  14. package/dist/esm/plugin.js +12 -10
  15. package/dist/esm/pm-plugins/decorations.js +26 -62
  16. package/dist/esm/pm-plugins/main.js +12 -34
  17. package/dist/esm/ui/drag-handle.js +10 -16
  18. package/dist/esm/ui/drop-target.js +5 -9
  19. package/dist/esm/utils/getSelection.js +4 -3
  20. package/dist/types/index.d.ts +1 -1
  21. package/dist/types/pm-plugins/decorations.d.ts +1 -7
  22. package/dist/types/types.d.ts +3 -9
  23. package/dist/types/ui/drop-target.d.ts +2 -2
  24. package/dist/types-ts4.5/index.d.ts +1 -1
  25. package/dist/types-ts4.5/pm-plugins/decorations.d.ts +1 -7
  26. package/dist/types-ts4.5/types.d.ts +3 -9
  27. package/dist/types-ts4.5/ui/drop-target.d.ts +2 -2
  28. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#140703](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140703)
8
+ [`a0d838419dd0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0d838419dd0d) -
9
+ [ux] Refactor decoration and plugin state for reliable collab drag and drop. DecorationState has
10
+ been removed from the plugin state. This is now handled internally.
11
+
3
12
  ## 1.13.11
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.blockControlsPlugin = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
11
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
11
12
  var _moveNode = require("./commands/move-node");
12
13
  var _emptyBlockExperiment = require("./pm-plugins/empty-block-experiment");
@@ -51,15 +52,17 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
51
52
  return tr;
52
53
  };
53
54
  },
54
- setNodeDragged: function setNodeDragged(pos, anchorName, nodeType) {
55
+ setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
55
56
  return function (_ref5) {
56
57
  var tr = _ref5.tr;
58
+ var pos = getPos();
57
59
  if (pos === undefined) {
58
60
  return tr;
59
61
  }
60
- var newTr = tr;
61
- newTr = (0, _utils.selectNode)(newTr, pos, nodeType);
62
- newTr.setMeta(_main.key, {
62
+ if (!(0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885')) {
63
+ tr = (0, _utils.selectNode)(tr, pos, nodeType);
64
+ }
65
+ tr.setMeta(_main.key, {
63
66
  isDragging: true,
64
67
  activeNode: {
65
68
  pos: pos,
@@ -67,21 +70,20 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
67
70
  nodeType: nodeType
68
71
  }
69
72
  });
70
- return newTr;
73
+ return tr;
71
74
  };
72
75
  }
73
76
  },
74
77
  getSharedState: function getSharedState(editorState) {
75
- var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5;
78
+ var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4;
76
79
  if (!editorState) {
77
80
  return undefined;
78
81
  }
79
82
  return {
80
83
  isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
81
- activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
82
- decorationState: (_key$getState$decorat = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
83
- isDragging: (_key$getState$isDragg = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
84
- isPMDragging: (_key$getState$isPMDra = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
84
+ activeNode: (_key$getState$activeN = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
85
+ isDragging: (_key$getState$isDragg = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
86
+ isPMDragging: (_key$getState$isPMDra = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
85
87
  };
86
88
  },
87
89
  contentComponent: function contentComponent() {
package/dist/cjs/pm-plugins/decorations.js CHANGED
@@ -27,11 +27,11 @@ var getNestedDepth = function getNestedDepth() {
27
27
  return (0, _experiments.editorExperiment)('nested-dnd', true) ? 100 : 0;
28
28
  };
29
29
  var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTargetDec) {
30
- return _view.Decoration.widget(pos, function () {
30
+ return _view.Decoration.widget(pos, function (_, getPos) {
31
31
  var element = document.createElement('div');
32
32
  element.setAttribute('data-blocks-drop-target-container', 'true');
33
33
  element.style.clear = 'unset';
34
- _reactDom.default.render(dropTargetDec, element);
34
+ _reactDom.default.render(dropTargetDec(getPos), element);
35
35
  return element;
36
36
  }, {
37
37
  type: 'drop-target-decoration',
@@ -41,16 +41,13 @@ var createDropTargetDecoration = function createDropTargetDecoration(pos, dropTa
41
41
  var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode) {
42
42
  var decs = [];
43
43
  unmountDecorations('data-blocks-drop-target-container');
44
- // Decoration state is used to keep track of the position of the drop targets
45
- // and allows us to easily map the updated position in the plugin apply method.
46
- var decorationState = [];
47
44
  var prevNode;
48
45
  var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
49
46
  var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
50
- newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, function (node, pos, parent, index) {
47
+ newState.doc.descendants(function (node, pos, parent, index) {
51
48
  var depth = 0;
52
49
  // drop target deco at the end position
53
- var endPosDeco = null;
50
+ var endPos;
54
51
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
55
52
  depth = newState.doc.resolve(pos).depth;
56
53
  if (node.isInline || !parent) {
@@ -68,82 +65,49 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
68
65
  prevNode = node;
69
66
  return false; //not valid pos, so nested not valid either
70
67
  }
71
- decorationState.push({
72
- id: pos,
73
- pos: pos
74
- });
75
68
  if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
76
- var endpos = pos + node.nodeSize;
77
- endPosDeco = {
78
- id: endpos,
79
- pos: endpos
80
- };
81
- decorationState.push({
82
- id: endpos,
83
- pos: endpos
84
- });
69
+ endPos = pos + node.nodeSize;
85
70
  }
86
- } else {
87
- decorationState.push({
88
- id: index,
89
- pos: pos
90
- });
91
71
  }
92
- decs.push(createDropTargetDecoration(pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
93
- api: api,
94
- id: (0, _experiments.editorExperiment)('nested-dnd', true) ? pos : index,
95
- formatMessage: formatMessage,
96
- prevNode: prevNode,
97
- nextNode: node,
98
- parentNode: parent
99
- })));
100
- if (endPosDeco) {
101
- decs.push(createDropTargetDecoration(endPosDeco.pos, /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
72
+ var previousNode = prevNode; // created scoped variable
73
+ decs.push(createDropTargetDecoration(pos, function (getPos) {
74
+ return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
102
75
  api: api,
103
- id: endPosDeco.id,
76
+ getPos: getPos,
77
+ prevNode: previousNode,
78
+ nextNode: node,
104
79
  parentNode: parent,
105
80
  formatMessage: formatMessage
106
- })));
81
+ });
82
+ }));
83
+ if (endPos !== undefined) {
84
+ decs.push(createDropTargetDecoration(endPos, function (getPos) {
85
+ return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
86
+ api: api,
87
+ getPos: getPos,
88
+ parentNode: parent,
89
+ formatMessage: formatMessage
90
+ });
91
+ }));
107
92
  }
108
93
  prevNode = node;
109
94
  return depth < getNestedDepth();
110
95
  });
111
96
 
112
- /**
113
- * We are adding a drop target at the end of the document because by default we
114
- * draw all drop targets at the top of every node. It's better to draw the drop targets
115
- * at the top of each node because that way we only need to know the start position of the
116
- * node and not its size.
117
- *
118
- */
119
- var lastPos = newState.doc.content.size;
120
- if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
121
- decorationState.push({
122
- id: lastPos,
123
- pos: lastPos
124
- });
125
- } else {
126
- decorationState.push({
127
- id: decorationState.length + 1,
128
- pos: newState.doc.nodeSize - 2
129
- });
130
- }
131
- decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function () {
97
+ //TODO: Should this use createDropTargetDecoration?
98
+ decs.push(_view.Decoration.widget(newState.doc.nodeSize - 2, function (_, getPos) {
132
99
  var element = document.createElement('div');
133
100
  element.setAttribute('data-blocks-drop-target-container', 'true');
134
101
  _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
135
102
  api: api,
136
- id: (0, _experiments.editorExperiment)('nested-dnd', true) ? lastPos : decorationState.length,
103
+ getPos: getPos,
137
104
  formatMessage: formatMessage
138
105
  }), element);
139
106
  return element;
140
107
  }, {
141
108
  type: 'drop-target-decoration'
142
109
  }));
143
- return {
144
- decs: decs,
145
- decorationState: decorationState
146
- };
110
+ return decs;
147
111
  };
148
112
  var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
149
113
  var anchorName = "--node-anchor-paragraph-0";
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -88,8 +88,7 @@ function getDocChildrenCount(newState) {
88
88
  }
89
89
  var initialState = {
90
90
  decorations: _view.DecorationSet.empty,
91
- decorationState: [],
92
- activeNode: null,
91
+ activeNode: undefined,
93
92
  isDragging: false,
94
93
  isMenuOpen: false,
95
94
  editorHeight: 0,
@@ -112,7 +111,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
112
111
  var activeNode = currentState.activeNode,
113
112
  decorations = currentState.decorations,
114
113
  isMenuOpen = currentState.isMenuOpen,
115
- decorationState = currentState.decorationState,
116
114
  editorHeight = currentState.editorHeight,
117
115
  editorWidthLeft = currentState.editorWidthLeft,
118
116
  editorWidthRight = currentState.editorWidthRight,
@@ -120,11 +118,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
120
118
  isDragging = currentState.isDragging,
121
119
  isPMDragging = currentState.isPMDragging,
122
120
  childCount = currentState.childCount;
121
+
122
+ // Remap existing decorations when document changes
123
+ if (tr.docChanged) {
124
+ decorations = decorations.map(tr.mapping, tr.doc);
125
+ }
126
+ var meta = tr.getMeta(key);
123
127
  var isPerformanceFix = (0, _experiments.editorExperiment)('dnd-input-performance-optimisation', true, {
124
128
  exposure: true
125
129
  }) || (0, _experiments.editorExperiment)('nested-dnd', true);
126
130
  var activeNodeWithNewNodeType = null;
127
- var meta = tr.getMeta(key);
128
131
  var newChildCount = tr.docChanged && (0, _experiments.editorExperiment)('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
129
132
  // If tables or media are being resized, we want to hide the drag handle
130
133
  var resizerMeta = tr.getMeta('is-resizer-resizing');
@@ -256,11 +259,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
256
259
  var _decs = (0, _decorations.dragHandleDecoration)(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
257
260
  decorations = decorations.add(newState.doc, [_decs]);
258
261
  }
259
- var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
260
-
261
- // During dragging if the the document is updated by remote user, or other processes
262
- // and update drop target is not required, We remap the drop target.
263
- var shouldMapDropTargets = (0, _experiments.editorExperiment)('nested-dnd', true) ? !shouldUpdateDropTargets && tr.docChanged && isDragging && !(meta !== null && meta !== void 0 && meta.nodeMoved) : !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
264
262
  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
265
263
  if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
266
264
  var remainingDecs = decorations.find(undefined, undefined, function (spec) {
@@ -282,38 +280,19 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
282
280
  anchorName: activeNode.anchorName,
283
281
  nodeType: activeNode.nodeType
284
282
  } : activeNode;
283
+ var shouldCreateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
285
284
  if (api) {
286
285
  // Add drop targets when node is being dragged
287
286
  // if the transaction is only for analytics and user is dragging, continue to draw drop targets
288
- if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
287
+ if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
289
288
  var _meta$activeNode6;
290
- var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, (0, _experiments.editorExperiment)('nested-dnd', true) ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode),
291
- _decs2 = _dropTargetDecoration.decs,
292
- updatedDecorationState = _dropTargetDecoration.decorationState;
293
- decorationState = updatedDecorationState;
289
+ var _decs2 = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, (0, _experiments.editorExperiment)('nested-dnd', true) ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode);
294
290
  decorations = decorations.add(newState.doc, _decs2);
295
291
  }
296
292
  }
297
-
298
- //Map drop target decoration positions when the document changes
299
- if (shouldMapDropTargets) {
300
- decorationState = decorationState.map(function (_ref11) {
301
- var id = _ref11.id,
302
- pos = _ref11.pos;
303
- return {
304
- id: id,
305
- pos: tr.mapping.map(pos)
306
- };
307
- });
308
- }
309
-
310
- // Map decorations if document changes and node decorations do not need to be redrawn
311
- if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
312
- decorations = decorations.map(tr.mapping, tr.doc);
313
- }
314
293
  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;
315
- var hasNodeDecoration = decorations.find().some(function (_ref12) {
316
- var spec = _ref12.spec;
294
+ var hasNodeDecoration = decorations.find().some(function (_ref11) {
295
+ var spec = _ref11.spec;
317
296
  return spec.type === 'node-decoration';
318
297
  });
319
298
  if (!hasNodeDecoration && isEmptyDoc) {
@@ -322,7 +301,6 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
322
301
  var newActiveNode = isEmptyDoc || isHandleMissing ? null : (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos;
323
302
  return {
324
303
  decorations: decorations,
325
- decorationState: decorationState,
326
304
  activeNode: newActiveNode,
327
305
  isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
328
306
  isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -112,14 +112,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
112
112
  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
113
113
  var _api$analytics;
114
114
  var tr = _ref2.tr;
115
- var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
115
+ var startPos = getPos();
116
116
  if (startPos === undefined) {
117
117
  return tr;
118
118
  }
119
119
  tr = (0, _utils.selectNode)(tr, startPos, nodeType);
120
- tr.setMeta(_main.key, {
121
- pos: startPos
122
- });
123
120
  var resolvedMovingNode = tr.doc.resolve(startPos);
124
121
  var maybeNode = resolvedMovingNode.nodeAfter;
125
122
  tr.setMeta('scrollIntoView', false);
@@ -136,7 +133,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
136
133
  return tr;
137
134
  });
138
135
  view.focus();
139
- }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, start, nodeType]);
136
+ }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, nodeType]);
140
137
 
141
138
  // TODO - This needs to be investigated further. Drag preview generation is not always working
142
139
  // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
@@ -145,7 +142,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
145
142
  var _api$core3;
146
143
  api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
147
144
  var tr = _ref3.tr;
148
- var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
145
+ var startPos = getPos();
149
146
  if (startPos === undefined) {
150
147
  return tr;
151
148
  }
@@ -156,19 +153,16 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
156
153
  var $startPos = tr.doc.resolve(startPos + node.nodeSize);
157
154
  var selection = new _state.TextSelection($startPos);
158
155
  tr.setSelection(selection);
159
- tr.setMeta(_main.key, {
160
- pos: startPos
161
- });
162
156
  return tr;
163
157
  });
164
- }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, start]);
158
+ }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
165
159
  var handleKeyDown = (0, _react.useCallback)(function (e) {
166
160
  if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
167
161
  // allow user to use spacebar to select the node
168
162
 
169
163
  if (!e.repeat && e.key === ' ') {
170
164
  var _api$core5;
171
- var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
165
+ var startPos = getPos();
172
166
  api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
173
167
  var tr = _ref4.tr;
174
168
  if (startPos === undefined) {
@@ -183,7 +177,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
183
177
  tr.setSelection(selection);
184
178
  tr.setMeta(_main.key, {
185
179
  pos: startPos
186
- });
180
+ }); ////WHERE IS THIS USED?
187
181
  return tr;
188
182
  });
189
183
  } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
@@ -194,7 +188,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
194
188
  view.focus();
195
189
  }
196
190
  }
197
- }, [getPos, start, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
191
+ }, [getPos, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
198
192
  (0, _react.useEffect)(function () {
199
193
  var element = buttonRef.current;
200
194
  if (!element) {
@@ -230,7 +224,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
230
224
  api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref7) {
231
225
  var _api$blockControls, _api$analytics3;
232
226
  var tr = _ref7.tr;
233
- api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
227
+ api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
234
228
  tr: tr
235
229
  });
236
230
  var resolvedMovingNode = tr.doc.resolve(start);
@@ -251,7 +245,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
251
245
  view.focus();
252
246
  }
253
247
  });
254
- }, [anchorName, api, nodeType, view, start]);
248
+ }, [anchorName, api, getPos, nodeType, start, view]);
255
249
  var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
256
250
  var calculatePosition = (0, _react.useCallback)(function () {
257
251
  var parentNodeType;
@@ -356,7 +350,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
356
350
  ,
357
351
  style: positionStyles,
358
352
  onClick: handleOnClick,
359
- onMouseDown: handleMouseDown,
353
+ onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
360
354
  onKeyDown: handleKeyDown,
361
355
  "data-testid": "block-ctrl-drag-handle"
362
356
  }, (0, _react2.jsx)(_dragHandler.default, {
package/dist/cjs/ui/drop-target.js CHANGED
@@ -82,7 +82,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
82
82
  var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
83
83
  var _dynamicStyle;
84
84
  var api = _ref3.api,
85
- id = _ref3.id,
85
+ getPos = _ref3.getPos,
86
86
  prevNode = _ref3.prevNode,
87
87
  nextNode = _ref3.nextNode,
88
88
  parentNode = _ref3.parentNode,
@@ -114,15 +114,11 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
114
114
  onDrop: function onDrop() {
115
115
  var _api$blockControls;
116
116
  var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
117
- activeNode = _ref4.activeNode,
118
- decorationState = _ref4.decorationState;
119
- if (!activeNode || !decorationState) {
117
+ activeNode = _ref4.activeNode;
118
+ if (!activeNode) {
120
119
  return;
121
120
  }
122
- var _ref5 = decorationState.find(function (dec) {
123
- return dec.id === id;
124
- }) || {},
125
- pos = _ref5.pos;
121
+ var pos = getPos();
126
122
  if (activeNode && pos !== undefined) {
127
123
  var _api$core, _api$blockControls2;
128
124
  var start = activeNode.pos;
@@ -130,7 +126,7 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
130
126
  }
131
127
  }
132
128
  });
133
- }, [id, api, formatMessage]);
129
+ }, [api, formatMessage, getPos]);
134
130
  var dropTargetOffsetStyle = (0, _react.useMemo)(function () {
135
131
  /**
136
132
  * First child of a nested node.
package/dist/cjs/utils/getSelection.js CHANGED
@@ -11,17 +11,18 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
11
11
  var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
12
12
  var nodeSize = node ? node.nodeSize : 1;
13
13
  var $startPos = tr.doc.resolve(start);
14
+ var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
14
15
 
15
16
  // decisionList node is not selectable, but we want to select the whole node not just text
16
- if (isNodeSelection || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
17
+ if (isNodeSelection || nodeName === 'decisionList') {
17
18
  return new _state.NodeSelection($startPos);
18
- } else if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup' && node.childCount === 1) {
19
+ } else if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
19
20
  var $mediaStartPos = tr.doc.resolve(start + 1);
20
21
  return new _state.NodeSelection($mediaStartPos);
21
22
  } else if (
22
23
  // Even though mediaGroup is not selectable,
23
24
  // we need a quick way to make all child media nodes appear as selected without the need for a custom selection
24
- (node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup') {
25
+ nodeName === 'mediaGroup') {
25
26
  return new _state.NodeSelection($startPos);
26
27
  } else {
27
28
  // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
package/dist/es2019/plugin.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
2
3
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
3
4
  import { moveNode } from './commands/move-node';
4
5
  import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
@@ -40,15 +41,17 @@ export const blockControlsPlugin = ({
40
41
  });
41
42
  return tr;
42
43
  },
43
- setNodeDragged: (pos, anchorName, nodeType) => ({
44
+ setNodeDragged: (getPos, anchorName, nodeType) => ({
44
45
  tr
45
46
  }) => {
47
+ const pos = getPos();
46
48
  if (pos === undefined) {
47
49
  return tr;
48
50
  }
49
- let newTr = tr;
50
- newTr = selectNode(newTr, pos, nodeType);
51
- newTr.setMeta(key, {
51
+ if (!fg('platform_editor_element_drag_and_drop_ed_24885')) {
52
+ tr = selectNode(tr, pos, nodeType);
53
+ }
54
+ tr.setMeta(key, {
52
55
  isDragging: true,
53
56
  activeNode: {
54
57
  pos,
@@ -56,20 +59,19 @@ export const blockControlsPlugin = ({
56
59
  nodeType
57
60
  }
58
61
  });
59
- return newTr;
62
+ return tr;
60
63
  }
61
64
  },
62
65
  getSharedState(editorState) {
63
- var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$decorat, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5;
66
+ var _key$getState$isMenuO, _key$getState, _key$getState$activeN, _key$getState2, _key$getState$isDragg, _key$getState3, _key$getState$isPMDra, _key$getState4;
64
67
  if (!editorState) {
65
68
  return undefined;
66
69
  }
67
70
  return {
68
71
  isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
69
- activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : null,
70
- decorationState: (_key$getState$decorat = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.decorationState) !== null && _key$getState$decorat !== void 0 ? _key$getState$decorat : [],
71
- isDragging: (_key$getState$isDragg = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
72
- isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
72
+ activeNode: (_key$getState$activeN = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
73
+ isDragging: (_key$getState$isDragg = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
74
+ isPMDragging: (_key$getState$isPMDra = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false
73
75
  };
74
76
  },
75
77
  contentComponent() {
package/dist/es2019/pm-plugins/decorations.js CHANGED
@@ -16,11 +16,11 @@ const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaS
16
16
  const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
17
17
  const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
18
18
  const createDropTargetDecoration = (pos, dropTargetDec) => {
19
- return Decoration.widget(pos, () => {
19
+ return Decoration.widget(pos, (_, getPos) => {
20
20
  const element = document.createElement('div');
21
21
  element.setAttribute('data-blocks-drop-target-container', 'true');
22
22
  element.style.clear = 'unset';
23
- ReactDOM.render(dropTargetDec, element);
23
+ ReactDOM.render(dropTargetDec(getPos), element);
24
24
  return element;
25
25
  }, {
26
26
  type: 'drop-target-decoration',
@@ -30,16 +30,13 @@ const createDropTargetDecoration = (pos, dropTargetDec) => {
30
30
  export const dropTargetDecorations = (newState, api, formatMessage, activeNode) => {
31
31
  const decs = [];
32
32
  unmountDecorations('data-blocks-drop-target-container');
33
- // Decoration state is used to keep track of the position of the drop targets
34
- // and allows us to easily map the updated position in the plugin apply method.
35
- const decorationState = [];
36
33
  let prevNode;
37
34
  const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
38
35
  const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
39
- newState.doc.nodesBetween(0, newState.doc.nodeSize - 2, (node, pos, parent, index) => {
36
+ newState.doc.descendants((node, pos, parent, index) => {
40
37
  let depth = 0;
41
38
  // drop target deco at the end position
42
- let endPosDeco = null;
39
+ let endPos;
43
40
  if (editorExperiment('nested-dnd', true)) {
44
41
  depth = newState.doc.resolve(pos).depth;
45
42
  if (node.isInline || !parent) {
@@ -57,39 +54,23 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
57
54
  prevNode = node;
58
55
  return false; //not valid pos, so nested not valid either
59
56
  }
60
- decorationState.push({
61
- id: pos,
62
- pos
63
- });
64
57
  if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
65
- const endpos = pos + node.nodeSize;
66
- endPosDeco = {
67
- id: endpos,
68
- pos: endpos
69
- };
70
- decorationState.push({
71
- id: endpos,
72
- pos: endpos
73
- });
58
+ endPos = pos + node.nodeSize;
74
59
  }
75
- } else {
76
- decorationState.push({
77
- id: index,
78
- pos
79
- });
80
60
  }
81
- decs.push(createDropTargetDecoration(pos, /*#__PURE__*/createElement(DropTarget, {
61
+ const previousNode = prevNode; // created scoped variable
62
+ decs.push(createDropTargetDecoration(pos, getPos => /*#__PURE__*/createElement(DropTarget, {
82
63
  api,
83
- id: editorExperiment('nested-dnd', true) ? pos : index,
84
- formatMessage,
85
- prevNode,
64
+ getPos,
65
+ prevNode: previousNode,
86
66
  nextNode: node,
87
- parentNode: parent
67
+ parentNode: parent,
68
+ formatMessage
88
69
  })));
89
- if (endPosDeco) {
90
- decs.push(createDropTargetDecoration(endPosDeco.pos, /*#__PURE__*/createElement(DropTarget, {
70
+ if (endPos !== undefined) {
71
+ decs.push(createDropTargetDecoration(endPos, getPos => /*#__PURE__*/createElement(DropTarget, {
91
72
  api,
92
- id: endPosDeco.id,
73
+ getPos,
93
74
  parentNode: parent,
94
75
  formatMessage
95
76
  })));
@@ -98,41 +79,20 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode)
98
79
  return depth < getNestedDepth();
99
80
  });
100
81
 
101
- /**
102
- * We are adding a drop target at the end of the document because by default we
103
- * draw all drop targets at the top of every node. It's better to draw the drop targets
104
- * at the top of each node because that way we only need to know the start position of the
105
- * node and not its size.
106
- *
107
- */
108
- const lastPos = newState.doc.content.size;
109
- if (editorExperiment('nested-dnd', true)) {
110
- decorationState.push({
111
- id: lastPos,
112
- pos: lastPos
113
- });
114
- } else {
115
- decorationState.push({
116
- id: decorationState.length + 1,
117
- pos: newState.doc.nodeSize - 2
118
- });
119
- }
120
- decs.push(Decoration.widget(newState.doc.nodeSize - 2, () => {
82
+ //TODO: Should this use createDropTargetDecoration?
83
+ decs.push(Decoration.widget(newState.doc.nodeSize - 2, (_, getPos) => {
121
84
  const element = document.createElement('div');
122
85
  element.setAttribute('data-blocks-drop-target-container', 'true');
123
86
  ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
124
87
  api,
125
- id: editorExperiment('nested-dnd', true) ? lastPos : decorationState.length,
88
+ getPos,
126
89
  formatMessage
127
90
  }), element);
128
91
  return element;
129
92
  }, {
130
93
  type: 'drop-target-decoration'
131
94
  }));
132
- return {
133
- decs,
134
- decorationState
135
- };
95
+ return decs;
136
96
  };
137
97
  export const emptyParagraphNodeDecorations = () => {
138
98
  const anchorName = `--node-anchor-paragraph-0`;