@atlaskit/editor-plugin-block-controls 2.20.0 → 2.21.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/pm-plugins/decorations-drop-target.js +24 -59
  3. package/dist/cjs/pm-plugins/main.js +1 -1
  4. package/dist/cjs/pm-plugins/utils/active-anchor-tracker.js +9 -0
  5. package/dist/es2019/pm-plugins/decorations-drop-target.js +28 -63
  6. package/dist/es2019/pm-plugins/main.js +1 -1
  7. package/dist/es2019/pm-plugins/utils/active-anchor-tracker.js +7 -0
  8. package/dist/esm/pm-plugins/decorations-drop-target.js +24 -59
  9. package/dist/esm/pm-plugins/main.js +1 -1
  10. package/dist/esm/pm-plugins/utils/active-anchor-tracker.js +9 -0
  11. package/dist/types/pm-plugins/utils/active-anchor-tracker.d.ts +1 -0
  12. package/dist/types-ts4.5/pm-plugins/utils/active-anchor-tracker.d.ts +1 -0
  13. package/package.json +5 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.21.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#102744](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102744)
8
+ [`289c0169e410a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/289c0169e410a) -
9
+ ED-26243 Cleaned up platform_editor_drag_and_drop_target_v2 FG
10
+
11
+ ## 2.21.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#102469](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102469)
16
+ [`bb834fe685b5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb834fe685b5a) -
17
+ ED-25924 makes drop hints appear more consistent
18
+
3
19
  ## 2.20.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/pm-plugins/decorations-drop-target.js CHANGED
@@ -14,7 +14,6 @@ var _view = require("@atlaskit/editor-prosemirror/view");
14
14
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
15
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
16
16
  var _consts = require("../ui/consts");
17
- var _dropTarget = require("../ui/drop-target");
18
17
  var _dropTargetLayout = require("../ui/drop-target-layout");
19
18
  var _dropTargetV = require("../ui/drop-target-v2");
20
19
  var _decorationsCommon = require("./decorations-common");
@@ -27,10 +26,7 @@ var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'lis
27
26
  var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
28
27
  var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
29
28
  var shouldDescend = function shouldDescend(node) {
30
- if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
31
- return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
32
- }
33
- return true;
29
+ return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
34
30
  };
35
31
  var getNodeMargins = function getNodeMargins(node) {
36
32
  if (!node) {
@@ -105,40 +101,26 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
105
101
  element.setAttribute('data-blocks-drop-target-container', 'true');
106
102
  element.setAttribute('data-blocks-drop-target-key', key);
107
103
  element.style.clear = 'unset';
108
- if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
109
- var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
110
- gap = _getGapAndOffset.gap,
111
- offset = _getGapAndOffset.offset;
112
- element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
113
- element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
114
- element.style.setProperty('display', 'block');
115
- if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
116
- nodeViewPortalProviderAPI.render(function () {
117
- return /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
118
- getPos: getPos,
119
- anchorRectCache: anchorRectCache,
120
- isSameLayout: isSameLayout
121
- }));
122
- }, element, key);
123
- } else {
124
- _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
104
+ var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
105
+ gap = _getGapAndOffset.gap,
106
+ offset = _getGapAndOffset.offset;
107
+ element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
108
+ element.style.setProperty(_dropTargetV.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
109
+ element.style.setProperty('display', 'block');
110
+ if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
111
+ nodeViewPortalProviderAPI.render(function () {
112
+ return /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
125
113
  getPos: getPos,
126
114
  anchorRectCache: anchorRectCache,
127
115
  isSameLayout: isSameLayout
128
- })), element);
129
- }
116
+ }));
117
+ }, element, key);
130
118
  } else {
131
- if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
132
- nodeViewPortalProviderAPI.render(function () {
133
- return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
134
- getPos: getPos
135
- }));
136
- }, element, key);
137
- } else {
138
- _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
139
- getPos: getPos
140
- })), element);
141
- }
119
+ _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetV.DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
120
+ getPos: getPos,
121
+ anchorRectCache: anchorRectCache,
122
+ isSameLayout: isSameLayout
123
+ })), element);
142
124
  }
143
125
  return element;
144
126
  }, {
@@ -190,7 +172,6 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
190
172
  var POS_END_OF_DOC = newState.doc.nodeSize - 2;
191
173
  var docFrom = from === undefined || from < 0 ? 0 : from;
192
174
  var docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
193
- var prevNode;
194
175
  var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
195
176
  var $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
196
177
  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
@@ -236,40 +217,28 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
236
217
  }
237
218
  }
238
219
  if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
239
- if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
240
- pushNodeStack(node, depth);
241
- } else {
242
- prevNode = node;
243
- }
220
+ pushNodeStack(node, depth);
244
221
  return false;
245
222
  }
246
223
  if (IGNORE_NODES.includes(node.type.name)) {
247
- if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
248
- pushNodeStack(node, depth);
249
- } else {
250
- prevNode = node;
251
- }
224
+ pushNodeStack(node, depth);
252
225
  return shouldDescend(node); //skip over, don't consider it a valid depth
253
226
  }
254
227
  var canDrop = activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node);
255
228
 
256
229
  //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
257
230
  if (!canDrop && !(0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
258
- if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
259
- pushNodeStack(node, depth);
260
- } else {
261
- prevNode = node;
262
- }
231
+ pushNodeStack(node, depth);
263
232
  return false; //not valid pos, so nested not valid either
264
233
  }
265
234
  if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
266
235
  endPos = pos + node.nodeSize;
267
236
  }
268
237
  }
269
- var previousNode = (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? popNodeStack(depth) : prevNode; // created scoped variable
238
+ var previousNode = popNodeStack(depth); // created scoped variable
270
239
 
271
240
  // only table and layout need to render full height drop target
272
- var isInSupportedContainer = (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
241
+ var isInSupportedContainer = ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
273
242
  var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (0, _utils.isEmptyParagraph)(node);
274
243
  decs.push(createDropTargetDecoration(pos, {
275
244
  api: api,
@@ -282,17 +251,13 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
282
251
  if (endPos !== undefined) {
283
252
  decs.push(createDropTargetDecoration(endPos, {
284
253
  api: api,
285
- prevNode: (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? node : undefined,
254
+ prevNode: node,
286
255
  parentNode: parent || undefined,
287
256
  formatMessage: formatMessage,
288
257
  dropTargetStyle: 'remainingHeight'
289
258
  }, nodeViewPortalProviderAPI, -1, anchorRectCache));
290
259
  }
291
- if ((0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
292
- pushNodeStack(node, depth);
293
- } else {
294
- prevNode = node;
295
- }
260
+ pushNodeStack(node, depth);
296
261
  return depth < (0, _decorationsCommon.getNestedDepth)() && shouldDescend(node);
297
262
  });
298
263
  if (docTo === POS_END_OF_DOC) {
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -430,7 +430,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
430
430
  isNestedEnabled: isNestedEnabled
431
431
  };
432
432
  var anchorRectCache;
433
- if (!(0, _anchorUtils.isAnchorSupported)() && (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2')) {
433
+ if (!(0, _anchorUtils.isAnchorSupported)()) {
434
434
  anchorRectCache = new _anchorUtils.AnchorRectCache();
435
435
  }
436
436
  return new _safePlugin.SafePlugin({
package/dist/cjs/pm-plugins/utils/active-anchor-tracker.js CHANGED
@@ -11,6 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
11
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
12
  var _events = require("events");
13
13
  var _react = require("react");
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
15
16
  var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function () {
16
17
  function ActiveAnchorTracker() {
@@ -19,6 +20,11 @@ var ActiveAnchorTracker = exports.ActiveAnchorTracker = /*#__PURE__*/function ()
19
20
  this.emitter = new _events.EventEmitter();
20
21
  }
21
22
  return (0, _createClass2.default)(ActiveAnchorTracker, [{
23
+ key: "getActiveAnchor",
24
+ value: function getActiveAnchor() {
25
+ return this.lastActiveAnchor;
26
+ }
27
+ }, {
22
28
  key: "subscribe",
23
29
  value: function subscribe(anchorName, callback) {
24
30
  if (this.emitter) {
@@ -68,6 +74,9 @@ var useActiveAnchorTracker = exports.useActiveAnchorTracker = function useActive
68
74
  (0, _react.useEffect)(function () {
69
75
  if (activeAnchorTracker && anchorName && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
70
76
  activeAnchorTracker.subscribe(anchorName, onActive);
77
+ if (activeAnchorTracker.getActiveAnchor() === anchorName && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_3')) {
78
+ setIsActive(true);
79
+ }
71
80
  var unsubscribe = function unsubscribe() {
72
81
  activeAnchorTracker.unsubscribe(anchorName, onActive);
73
82
  };
package/dist/es2019/pm-plugins/decorations-drop-target.js CHANGED
@@ -6,7 +6,6 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
8
8
  import { nodeMargins } from '../ui/consts';
9
- import { DropTarget } from '../ui/drop-target';
10
9
  import { DropTargetLayout } from '../ui/drop-target-layout';
11
10
  import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
12
11
  import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
@@ -17,10 +16,7 @@ const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'l
17
16
  const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
18
17
  const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
19
18
  const shouldDescend = node => {
20
- if (fg('platform_editor_drag_and_drop_target_v2')) {
21
- return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
22
- }
23
- return true;
19
+ return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
24
20
  };
25
21
  const getNodeMargins = node => {
26
22
  if (!node) {
@@ -93,41 +89,27 @@ export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI
93
89
  element.setAttribute('data-blocks-drop-target-container', 'true');
94
90
  element.setAttribute('data-blocks-drop-target-key', key);
95
91
  element.style.clear = 'unset';
96
- if (fg('platform_editor_drag_and_drop_target_v2')) {
97
- const {
98
- gap,
99
- offset
100
- } = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode);
101
- element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, `${offset}px`);
102
- element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
103
- element.style.setProperty('display', 'block');
104
- if (fg('platform_editor_react18_plugin_portalprovider')) {
105
- nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetV2, {
106
- ...props,
107
- getPos,
108
- anchorRectCache,
109
- isSameLayout
110
- }), element, key);
111
- } else {
112
- ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
113
- ...props,
114
- getPos,
115
- anchorRectCache,
116
- isSameLayout
117
- }), element);
118
- }
92
+ const {
93
+ gap,
94
+ offset
95
+ } = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode);
96
+ element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, `${offset}px`);
97
+ element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
98
+ element.style.setProperty('display', 'block');
99
+ if (fg('platform_editor_react18_plugin_portalprovider')) {
100
+ nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetV2, {
101
+ ...props,
102
+ getPos,
103
+ anchorRectCache,
104
+ isSameLayout
105
+ }), element, key);
119
106
  } else {
120
- if (fg('platform_editor_react18_plugin_portalprovider')) {
121
- nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTarget, {
122
- ...props,
123
- getPos
124
- }), element, key);
125
- } else {
126
- ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
127
- ...props,
128
- getPos
129
- }), element);
130
- }
107
+ ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, {
108
+ ...props,
109
+ getPos,
110
+ anchorRectCache,
111
+ isSameLayout
112
+ }), element);
131
113
  }
132
114
  return element;
133
115
  }, {
@@ -179,7 +161,6 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
179
161
  const POS_END_OF_DOC = newState.doc.nodeSize - 2;
180
162
  const docFrom = from === undefined || from < 0 ? 0 : from;
181
163
  const docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
182
- let prevNode;
183
164
  const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
184
165
  const $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
185
166
  const activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
@@ -225,40 +206,28 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
225
206
  }
226
207
  }
227
208
  if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
228
- if (fg('platform_editor_drag_and_drop_target_v2')) {
229
- pushNodeStack(node, depth);
230
- } else {
231
- prevNode = node;
232
- }
209
+ pushNodeStack(node, depth);
233
210
  return false;
234
211
  }
235
212
  if (IGNORE_NODES.includes(node.type.name)) {
236
- if (fg('platform_editor_drag_and_drop_target_v2')) {
237
- pushNodeStack(node, depth);
238
- } else {
239
- prevNode = node;
240
- }
213
+ pushNodeStack(node, depth);
241
214
  return shouldDescend(node); //skip over, don't consider it a valid depth
242
215
  }
243
216
  const canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node);
244
217
 
245
218
  //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
246
219
  if (!canDrop && !isBlocksDragTargetDebug()) {
247
- if (fg('platform_editor_drag_and_drop_target_v2')) {
248
- pushNodeStack(node, depth);
249
- } else {
250
- prevNode = node;
251
- }
220
+ pushNodeStack(node, depth);
252
221
  return false; //not valid pos, so nested not valid either
253
222
  }
254
223
  if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
255
224
  endPos = pos + node.nodeSize;
256
225
  }
257
226
  }
258
- const previousNode = fg('platform_editor_drag_and_drop_target_v2') ? popNodeStack(depth) : prevNode; // created scoped variable
227
+ const previousNode = popNodeStack(depth); // created scoped variable
259
228
 
260
229
  // only table and layout need to render full height drop target
261
- const isInSupportedContainer = fg('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
230
+ const isInSupportedContainer = ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
262
231
  const shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && isEmptyParagraph(node);
263
232
  decs.push(createDropTargetDecoration(pos, {
264
233
  api,
@@ -271,17 +240,13 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
271
240
  if (endPos !== undefined) {
272
241
  decs.push(createDropTargetDecoration(endPos, {
273
242
  api,
274
- prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
243
+ prevNode: node,
275
244
  parentNode: parent || undefined,
276
245
  formatMessage,
277
246
  dropTargetStyle: 'remainingHeight'
278
247
  }, nodeViewPortalProviderAPI, -1, anchorRectCache));
279
248
  }
280
- if (fg('platform_editor_drag_and_drop_target_v2')) {
281
- pushNodeStack(node, depth);
282
- } else {
283
- prevNode = node;
284
- }
249
+ pushNodeStack(node, depth);
285
250
  return depth < getNestedDepth() && shouldDescend(node);
286
251
  });
287
252
  if (docTo === POS_END_OF_DOC) {
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -412,7 +412,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
412
412
  isNestedEnabled
413
413
  };
414
414
  let anchorRectCache;
415
- if (!isAnchorSupported() && fg('platform_editor_drag_and_drop_target_v2')) {
415
+ if (!isAnchorSupported()) {
416
416
  anchorRectCache = new AnchorRectCache();
417
417
  }
418
418
  return new SafePlugin({
package/dist/es2019/pm-plugins/utils/active-anchor-tracker.js CHANGED
@@ -1,12 +1,16 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { EventEmitter } from 'events';
3
3
  import { useCallback, useEffect, useState } from 'react';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
6
  export class ActiveAnchorTracker {
6
7
  constructor() {
7
8
  _defineProperty(this, "lastActiveAnchor", '');
8
9
  this.emitter = new EventEmitter();
9
10
  }
11
+ getActiveAnchor() {
12
+ return this.lastActiveAnchor;
13
+ }
10
14
  subscribe(anchorName, callback) {
11
15
  if (this.emitter) {
12
16
  this.emitter.on(anchorName, callback);
@@ -46,6 +50,9 @@ export const useActiveAnchorTracker = (anchorName, activeAnchorTracker = default
46
50
  useEffect(() => {
47
51
  if (activeAnchorTracker && anchorName && editorExperiment('advanced_layouts', true)) {
48
52
  activeAnchorTracker.subscribe(anchorName, onActive);
53
+ if (activeAnchorTracker.getActiveAnchor() === anchorName && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
54
+ setIsActive(true);
55
+ }
49
56
  const unsubscribe = () => {
50
57
  activeAnchorTracker.unsubscribe(anchorName, onActive);
51
58
  };
package/dist/esm/pm-plugins/decorations-drop-target.js CHANGED
@@ -9,7 +9,6 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
11
  import { nodeMargins } from '../ui/consts';
12
- import { DropTarget } from '../ui/drop-target';
13
12
  import { DropTargetLayout } from '../ui/drop-target-layout';
14
13
  import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
15
14
  import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
@@ -20,10 +19,7 @@ var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'lis
20
19
  var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
21
20
  var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
22
21
  var shouldDescend = function shouldDescend(node) {
23
- if (fg('platform_editor_drag_and_drop_target_v2')) {
24
- return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
25
- }
26
- return true;
22
+ return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
27
23
  };
28
24
  var getNodeMargins = function getNodeMargins(node) {
29
25
  if (!node) {
@@ -98,40 +94,26 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
98
94
  element.setAttribute('data-blocks-drop-target-container', 'true');
99
95
  element.setAttribute('data-blocks-drop-target-key', key);
100
96
  element.style.clear = 'unset';
101
- if (fg('platform_editor_drag_and_drop_target_v2')) {
102
- var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
103
- gap = _getGapAndOffset.gap,
104
- offset = _getGapAndOffset.offset;
105
- element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
106
- element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
107
- element.style.setProperty('display', 'block');
108
- if (fg('platform_editor_react18_plugin_portalprovider')) {
109
- nodeViewPortalProviderAPI.render(function () {
110
- return /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
111
- getPos: getPos,
112
- anchorRectCache: anchorRectCache,
113
- isSameLayout: isSameLayout
114
- }));
115
- }, element, key);
116
- } else {
117
- ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
97
+ var _getGapAndOffset = getGapAndOffset(props.prevNode, props.nextNode, props.parentNode),
98
+ gap = _getGapAndOffset.gap,
99
+ offset = _getGapAndOffset.offset;
100
+ element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
101
+ element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
102
+ element.style.setProperty('display', 'block');
103
+ if (fg('platform_editor_react18_plugin_portalprovider')) {
104
+ nodeViewPortalProviderAPI.render(function () {
105
+ return /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
118
106
  getPos: getPos,
119
107
  anchorRectCache: anchorRectCache,
120
108
  isSameLayout: isSameLayout
121
- })), element);
122
- }
109
+ }));
110
+ }, element, key);
123
111
  } else {
124
- if (fg('platform_editor_react18_plugin_portalprovider')) {
125
- nodeViewPortalProviderAPI.render(function () {
126
- return /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
127
- getPos: getPos
128
- }));
129
- }, element, key);
130
- } else {
131
- ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
132
- getPos: getPos
133
- })), element);
134
- }
112
+ ReactDOM.render( /*#__PURE__*/createElement(DropTargetV2, _objectSpread(_objectSpread({}, props), {}, {
113
+ getPos: getPos,
114
+ anchorRectCache: anchorRectCache,
115
+ isSameLayout: isSameLayout
116
+ })), element);
135
117
  }
136
118
  return element;
137
119
  }, {
@@ -183,7 +165,6 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
183
165
  var POS_END_OF_DOC = newState.doc.nodeSize - 2;
184
166
  var docFrom = from === undefined || from < 0 ? 0 : from;
185
167
  var docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
186
- var prevNode;
187
168
  var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
188
169
  var $activeNodePos = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos);
189
170
  var activePMNode = $activeNodePos && $activeNodePos.nodeAfter;
@@ -229,40 +210,28 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
229
210
  }
230
211
  }
231
212
  if (node.isInline || !parent || DISABLE_CHILD_DROP_TARGET.includes(parent.type.name)) {
232
- if (fg('platform_editor_drag_and_drop_target_v2')) {
233
- pushNodeStack(node, depth);
234
- } else {
235
- prevNode = node;
236
- }
213
+ pushNodeStack(node, depth);
237
214
  return false;
238
215
  }
239
216
  if (IGNORE_NODES.includes(node.type.name)) {
240
- if (fg('platform_editor_drag_and_drop_target_v2')) {
241
- pushNodeStack(node, depth);
242
- } else {
243
- prevNode = node;
244
- }
217
+ pushNodeStack(node, depth);
245
218
  return shouldDescend(node); //skip over, don't consider it a valid depth
246
219
  }
247
220
  var canDrop = activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node);
248
221
 
249
222
  //NOTE: This will block drop targets showing for nodes that are valid after transformation (i.e. expand -> nestedExpand)
250
223
  if (!canDrop && !isBlocksDragTargetDebug()) {
251
- if (fg('platform_editor_drag_and_drop_target_v2')) {
252
- pushNodeStack(node, depth);
253
- } else {
254
- prevNode = node;
255
- }
224
+ pushNodeStack(node, depth);
256
225
  return false; //not valid pos, so nested not valid either
257
226
  }
258
227
  if (parent.lastChild === node && !isEmptyParagraph(node) && PARENT_WITH_END_DROP_TARGET.includes(parent.type.name)) {
259
228
  endPos = pos + node.nodeSize;
260
229
  }
261
230
  }
262
- var previousNode = fg('platform_editor_drag_and_drop_target_v2') ? popNodeStack(depth) : prevNode; // created scoped variable
231
+ var previousNode = popNodeStack(depth); // created scoped variable
263
232
 
264
233
  // only table and layout need to render full height drop target
265
- var isInSupportedContainer = fg('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
234
+ var isInSupportedContainer = ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
266
235
  var shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && isEmptyParagraph(node);
267
236
  decs.push(createDropTargetDecoration(pos, {
268
237
  api: api,
@@ -275,17 +244,13 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
275
244
  if (endPos !== undefined) {
276
245
  decs.push(createDropTargetDecoration(endPos, {
277
246
  api: api,
278
- prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
247
+ prevNode: node,
279
248
  parentNode: parent || undefined,
280
249
  formatMessage: formatMessage,
281
250
  dropTargetStyle: 'remainingHeight'
282
251
  }, nodeViewPortalProviderAPI, -1, anchorRectCache));
283
252
  }
284
- if (fg('platform_editor_drag_and_drop_target_v2')) {
285
- pushNodeStack(node, depth);
286
- } else {
287
- prevNode = node;
288
- }
253
+ pushNodeStack(node, depth);
289
254
  return depth < getNestedDepth() && shouldDescend(node);
290
255
  });
291
256
  if (docTo === POS_END_OF_DOC) {
package/dist/esm/pm-plugins/main.js CHANGED
@@ -423,7 +423,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
423
423
  isNestedEnabled: isNestedEnabled
424
424
  };
425
425
  var anchorRectCache;
426
- if (!isAnchorSupported() && fg('platform_editor_drag_and_drop_target_v2')) {
426
+ if (!isAnchorSupported()) {
427
427
  anchorRectCache = new AnchorRectCache();
428
428
  }
429
429
  return new SafePlugin({
package/dist/esm/pm-plugins/utils/active-anchor-tracker.js CHANGED
@@ -4,6 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
4
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  import { EventEmitter } from 'events';
6
6
  import { useCallback, useEffect, useState } from 'react';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
7
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
8
9
  export var ActiveAnchorTracker = /*#__PURE__*/function () {
9
10
  function ActiveAnchorTracker() {
@@ -12,6 +13,11 @@ export var ActiveAnchorTracker = /*#__PURE__*/function () {
12
13
  this.emitter = new EventEmitter();
13
14
  }
14
15
  return _createClass(ActiveAnchorTracker, [{
16
+ key: "getActiveAnchor",
17
+ value: function getActiveAnchor() {
18
+ return this.lastActiveAnchor;
19
+ }
20
+ }, {
15
21
  key: "subscribe",
16
22
  value: function subscribe(anchorName, callback) {
17
23
  if (this.emitter) {
@@ -63,6 +69,9 @@ export var useActiveAnchorTracker = function useActiveAnchorTracker(anchorName)
63
69
  useEffect(function () {
64
70
  if (activeAnchorTracker && anchorName && editorExperiment('advanced_layouts', true)) {
65
71
  activeAnchorTracker.subscribe(anchorName, onActive);
72
+ if (activeAnchorTracker.getActiveAnchor() === anchorName && fg('platform_editor_advanced_layouts_post_fix_patch_3')) {
73
+ setIsActive(true);
74
+ }
66
75
  var unsubscribe = function unsubscribe() {
67
76
  activeAnchorTracker.unsubscribe(anchorName, onActive);
68
77
  };
package/dist/types/pm-plugins/utils/active-anchor-tracker.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare class ActiveAnchorTracker {
6
6
  emitter: EventEmitter | null;
7
7
  lastActiveAnchor: string;
8
8
  constructor();
9
+ getActiveAnchor(): string;
9
10
  subscribe(anchorName: string, callback: (isActive: boolean) => void): void;
10
11
  unsubscribe(anchorName: string, callback: (isActive: boolean) => void): void;
11
12
  emit(anchorName: string): void;
package/dist/types-ts4.5/pm-plugins/utils/active-anchor-tracker.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare class ActiveAnchorTracker {
6
6
  emitter: EventEmitter | null;
7
7
  lastActiveAnchor: string;
8
8
  constructor();
9
+ getActiveAnchor(): string;
9
10
  subscribe(anchorName: string, callback: (isActive: boolean) => void): void;
10
11
  unsubscribe(anchorName: string, callback: (isActive: boolean) => void): void;
11
12
  emit(anchorName: string): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.20.0",
3
+ "version": "2.21.1",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@atlaskit/adf-schema": "^46.1.0",
34
- "@atlaskit/editor-common": "^99.1.0",
34
+ "@atlaskit/editor-common": "^99.3.0",
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -41,15 +41,15 @@
41
41
  "@atlaskit/editor-prosemirror": "6.2.1",
42
42
  "@atlaskit/editor-shared-styles": "^3.2.0",
43
43
  "@atlaskit/editor-tables": "^2.8.0",
44
- "@atlaskit/icon": "^23.3.0",
44
+ "@atlaskit/icon": "^23.4.0",
45
45
  "@atlaskit/platform-feature-flags": "^0.3.0",
46
46
  "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
48
48
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
49
49
  "@atlaskit/primitives": "^13.3.0",
50
50
  "@atlaskit/theme": "^14.0.0",
51
- "@atlaskit/tmp-editor-statsig": "^2.35.0",
52
- "@atlaskit/tokens": "^3.0.0",
51
+ "@atlaskit/tmp-editor-statsig": "^2.36.0",
52
+ "@atlaskit/tokens": "^3.1.0",
53
53
  "@atlaskit/tooltip": "^19.0.0",
54
54
  "@babel/runtime": "^7.0.0",
55
55
  "@emotion/react": "^11.7.1",
@@ -124,9 +124,6 @@
124
124
  "platform_editor_element_dnd_nested_a11y": {
125
125
  "type": "boolean"
126
126
  },
127
- "platform_editor_drag_and_drop_target_v2": {
128
- "type": "boolean"
129
- },
130
127
  "platform_editor_advanced_layouts_redraw_on_drag": {
131
128
  "type": "boolean"
132
129
  },