@atlaskit/editor-plugin-block-controls 3.15.6 → 3.15.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/pm-plugins/main.js +11 -10
  3. package/dist/cjs/ui/block-menu.js +1 -2
  4. package/dist/cjs/ui/consts.js +16 -7
  5. package/dist/cjs/ui/quick-insert-button.js +1 -2
  6. package/dist/es2019/pm-plugins/main.js +11 -10
  7. package/dist/es2019/ui/consts.js +16 -7
  8. package/dist/esm/pm-plugins/main.js +11 -10
  9. package/dist/esm/ui/consts.js +16 -7
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 3.15.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#163125](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163125)
8
+ [`d0ae2ab52765d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0ae2ab52765d) -
9
+ [ux] ED-28034 fix block controls positioning for new resizing experience behind
10
+ platform_editor_breakout_resizing
11
+ - Updated dependencies
12
+
3
13
  ## 3.15.6
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -263,6 +263,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
263
263
  }
264
264
  var resizerMeta = tr.getMeta('is-resizer-resizing');
265
265
  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
266
+ var hasJustFinishedResizing = resizerMeta === false;
266
267
  multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
267
268
  if (multiSelectDnD && flags.isMultiSelectEnabled) {
268
269
  multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
@@ -281,7 +282,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
281
282
 
282
283
  // Re-create node decorations
283
284
  var isDecSetEmpty = decorations === _view2.DecorationSet.empty;
284
- var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged;
285
+ var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
285
286
  var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging));
286
287
  var isActiveNodeModified = false;
287
288
  if (api && shouldRedrawNodeDecs) {
@@ -367,17 +368,17 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
367
368
  } else if (api) {
368
369
  var _latestActiveNode5;
369
370
  if (shouldRecreateHandle) {
370
- var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
371
- var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
371
+ var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
372
+ var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
372
373
  decorations = decorations.remove(_oldHandle);
373
374
  var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
374
375
  decorations = decorations.add(newState.doc, [handleDec]);
375
376
  }
376
377
  if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
377
- var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
378
- var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
378
+ var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
379
+ var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
379
380
  decorations = decorations.remove(_oldQuickInsertButton);
380
- var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType, anchorRectCache);
381
+ var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
381
382
  decorations = decorations.add(newState.doc, [quickInsertButton]);
382
383
  }
383
384
  }
@@ -407,12 +408,12 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
407
408
  }
408
409
  var newActiveNode;
409
410
  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
410
- var _latestActiveNode11, _latestActiveNode12;
411
+ var _latestActiveNode1, _latestActiveNode10;
411
412
  // remove isEmptyDoc check and let decorations render and determine their own visibility
412
- newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
413
+ newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.pos, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos).length === 0 ? null : latestActiveNode;
413
414
  } else {
414
- var _latestActiveNode13, _latestActiveNode14;
415
- newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
415
+ var _latestActiveNode11, _latestActiveNode12;
416
+ newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
416
417
  }
417
418
  var isMenuOpenNew = isMenuOpen;
418
419
  if (_consts.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
package/dist/cjs/ui/block-menu.js CHANGED
@@ -15,8 +15,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
15
15
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
16
16
  var _blockMenuItems = require("./block-menu-items");
17
17
  var _consts = require("./consts");
18
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
19
  var useBlockMenuPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
21
20
  var isMenuOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMenuOpen');
22
21
  var menuTriggerBy = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.menuTriggerBy');
package/dist/cjs/ui/consts.js CHANGED
@@ -43,15 +43,20 @@ var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
43
43
  };
44
44
  var QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_LEFT_OFFSET = 16;
45
45
  var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
46
+ var breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
46
47
  var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
47
- if (nodeType === 'layoutSection') {
48
- return DRAG_HANDLE_DEFAULT_GAP + 20;
49
- }
50
48
  if (parentNodeType && parentNodeType !== 'doc') {
51
49
  return DRAG_HANDLE_NARROW_GAP;
52
50
  }
53
- if (nodeType === 'layoutSection' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
54
- return DRAG_HANDLE_MAX_GAP + 12;
51
+ if ((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && breakoutResizableNodes.includes(nodeType)) {
52
+ if (nodeType === 'layoutSection') {
53
+ return DRAG_HANDLE_MAX_GAP + 20;
54
+ } else {
55
+ return DRAG_HANDLE_MAX_GAP;
56
+ }
57
+ }
58
+ if (nodeType === 'layoutSection') {
59
+ return DRAG_HANDLE_DEFAULT_GAP + 20;
55
60
  }
56
61
  if (nodeTypeExcludeList.includes(nodeType)) {
57
62
  return DRAG_HANDLE_MAX_GAP;
@@ -61,8 +66,12 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
61
66
 
62
67
  // use for returning hap only for root level elements
63
68
  var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType) {
64
- if (nodeTypeExcludeList.includes(nodeType)) {
65
- return DRAG_HANDLE_MAX_GAP;
69
+ if (nodeTypeExcludeList.includes(nodeType) || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && breakoutResizableNodes.includes(nodeType)) {
70
+ if (nodeType === 'layoutSection') {
71
+ return DRAG_HANDLE_MAX_GAP + 20;
72
+ } else {
73
+ return DRAG_HANDLE_MAX_GAP;
74
+ }
66
75
  }
67
76
  if (nodeType === 'layoutSection') {
68
77
  return DRAG_HANDLE_MAX_GAP + 12;
package/dist/cjs/ui/quick-insert-button.js CHANGED
@@ -29,8 +29,7 @@ var _anchorName = require("./utils/anchor-name");
29
29
  var _documentChecks = require("./utils/document-checks");
30
30
  var _editorCommands = require("./utils/editor-commands");
31
31
  var _visibilityContainer = require("./visibility-container");
32
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
33
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
34
33
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
35
34
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
36
35
  * @jsxRuntime classic
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -263,6 +263,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
263
263
  }
264
264
  const resizerMeta = tr.getMeta('is-resizer-resizing');
265
265
  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
266
+ const hasJustFinishedResizing = resizerMeta === false;
266
267
  multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
267
268
  if (multiSelectDnD && flags.isMultiSelectEnabled) {
268
269
  multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
@@ -281,7 +282,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
281
282
 
282
283
  // Re-create node decorations
283
284
  const isDecSetEmpty = decorations === DecorationSet.empty;
284
- const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged;
285
+ const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
285
286
  const shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging));
286
287
  let isActiveNodeModified = false;
287
288
  if (api && shouldRedrawNodeDecs) {
@@ -365,17 +366,17 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
365
366
  } else if (api) {
366
367
  var _latestActiveNode5;
367
368
  if (shouldRecreateHandle) {
368
- var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
369
- const oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
369
+ var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
370
+ const oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
370
371
  decorations = decorations.remove(oldHandle);
371
372
  const handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
372
373
  decorations = decorations.add(newState.doc, [handleDec]);
373
374
  }
374
375
  if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
375
- var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
376
- const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
376
+ var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
377
+ const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
377
378
  decorations = decorations.remove(oldQuickInsertButton);
378
- const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType, anchorRectCache);
379
+ const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
379
380
  decorations = decorations.add(newState.doc, [quickInsertButton]);
380
381
  }
381
382
  }
@@ -405,12 +406,12 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
405
406
  }
406
407
  let newActiveNode;
407
408
  if (editorExperiment('platform_editor_controls', 'variant1')) {
408
- var _latestActiveNode11, _latestActiveNode12;
409
+ var _latestActiveNode1, _latestActiveNode10;
409
410
  // remove isEmptyDoc check and let decorations render and determine their own visibility
410
- newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
411
+ newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.pos, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos).length === 0 ? null : latestActiveNode;
411
412
  } else {
412
- var _latestActiveNode13, _latestActiveNode14;
413
- newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
413
+ var _latestActiveNode11, _latestActiveNode12;
414
+ newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
414
415
  }
415
416
  let isMenuOpenNew = isMenuOpen;
416
417
  if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
package/dist/es2019/ui/consts.js CHANGED
@@ -34,15 +34,20 @@ export const QUICK_INSERT_DIMENSIONS = {
34
34
  };
35
35
  export const QUICK_INSERT_LEFT_OFFSET = 16;
36
36
  const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
37
+ const breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
37
38
  export const dragHandleGap = (nodeType, parentNodeType) => {
38
- if (nodeType === 'layoutSection') {
39
- return DRAG_HANDLE_DEFAULT_GAP + 20;
40
- }
41
39
  if (parentNodeType && parentNodeType !== 'doc') {
42
40
  return DRAG_HANDLE_NARROW_GAP;
43
41
  }
44
- if (nodeType === 'layoutSection' && editorExperiment('advanced_layouts', true)) {
45
- return DRAG_HANDLE_MAX_GAP + 12;
42
+ if (editorExperiment('platform_editor_breakout_resizing', true) && breakoutResizableNodes.includes(nodeType)) {
43
+ if (nodeType === 'layoutSection') {
44
+ return DRAG_HANDLE_MAX_GAP + 20;
45
+ } else {
46
+ return DRAG_HANDLE_MAX_GAP;
47
+ }
48
+ }
49
+ if (nodeType === 'layoutSection') {
50
+ return DRAG_HANDLE_DEFAULT_GAP + 20;
46
51
  }
47
52
  if (nodeTypeExcludeList.includes(nodeType)) {
48
53
  return DRAG_HANDLE_MAX_GAP;
@@ -52,8 +57,12 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
52
57
 
53
58
  // use for returning hap only for root level elements
54
59
  export const rootElementGap = nodeType => {
55
- if (nodeTypeExcludeList.includes(nodeType)) {
56
- return DRAG_HANDLE_MAX_GAP;
60
+ if (nodeTypeExcludeList.includes(nodeType) || editorExperiment('platform_editor_breakout_resizing', true) && breakoutResizableNodes.includes(nodeType)) {
61
+ if (nodeType === 'layoutSection') {
62
+ return DRAG_HANDLE_MAX_GAP + 20;
63
+ } else {
64
+ return DRAG_HANDLE_MAX_GAP;
65
+ }
57
66
  }
58
67
  if (nodeType === 'layoutSection') {
59
68
  return DRAG_HANDLE_MAX_GAP + 12;
package/dist/esm/pm-plugins/main.js CHANGED
@@ -256,6 +256,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
256
256
  }
257
257
  var resizerMeta = tr.getMeta('is-resizer-resizing');
258
258
  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
259
+ var hasJustFinishedResizing = resizerMeta === false;
259
260
  multiSelectDnD = (_meta$multiSelectDnD = meta === null || meta === void 0 ? void 0 : meta.multiSelectDnD) !== null && _meta$multiSelectDnD !== void 0 ? _meta$multiSelectDnD : multiSelectDnD;
260
261
  if (multiSelectDnD && flags.isMultiSelectEnabled) {
261
262
  multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
@@ -274,7 +275,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
274
275
 
275
276
  // Re-create node decorations
276
277
  var isDecSetEmpty = decorations === DecorationSet.empty;
277
- var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged;
278
+ var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged || editorExperiment('platform_editor_breakout_resizing', true) && hasJustFinishedResizing;
278
279
  var shouldRedrawNodeDecs = !isResizerResizing && (isNodeDecsMissing || (meta === null || meta === void 0 ? void 0 : meta.isDragging));
279
280
  var isActiveNodeModified = false;
280
281
  if (api && shouldRedrawNodeDecs) {
@@ -360,17 +361,17 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
360
361
  } else if (api) {
361
362
  var _latestActiveNode5;
362
363
  if (shouldRecreateHandle) {
363
- var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
364
- var _oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
364
+ var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
365
+ var _oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
365
366
  decorations = decorations.remove(_oldHandle);
366
367
  var handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
367
368
  decorations = decorations.add(newState.doc, [handleDec]);
368
369
  }
369
370
  if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
370
- var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
371
- var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
371
+ var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
372
+ var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
372
373
  decorations = decorations.remove(_oldQuickInsertButton);
373
- var quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType, anchorRectCache);
374
+ var quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
374
375
  decorations = decorations.add(newState.doc, [quickInsertButton]);
375
376
  }
376
377
  }
@@ -400,12 +401,12 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
400
401
  }
401
402
  var newActiveNode;
402
403
  if (editorExperiment('platform_editor_controls', 'variant1')) {
403
- var _latestActiveNode11, _latestActiveNode12;
404
+ var _latestActiveNode1, _latestActiveNode10;
404
405
  // remove isEmptyDoc check and let decorations render and determine their own visibility
405
- newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
406
+ newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode1 = latestActiveNode) === null || _latestActiveNode1 === void 0 ? void 0 : _latestActiveNode1.pos, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.pos).length === 0 ? null : latestActiveNode;
406
407
  } else {
407
- var _latestActiveNode13, _latestActiveNode14;
408
- newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
408
+ var _latestActiveNode11, _latestActiveNode12;
409
+ newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
409
410
  }
410
411
  var isMenuOpenNew = isMenuOpen;
411
412
  if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
package/dist/esm/ui/consts.js CHANGED
@@ -36,15 +36,20 @@ export var QUICK_INSERT_DIMENSIONS = {
36
36
  };
37
37
  export var QUICK_INSERT_LEFT_OFFSET = 16;
38
38
  var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
39
+ var breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
39
40
  export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
40
- if (nodeType === 'layoutSection') {
41
- return DRAG_HANDLE_DEFAULT_GAP + 20;
42
- }
43
41
  if (parentNodeType && parentNodeType !== 'doc') {
44
42
  return DRAG_HANDLE_NARROW_GAP;
45
43
  }
46
- if (nodeType === 'layoutSection' && editorExperiment('advanced_layouts', true)) {
47
- return DRAG_HANDLE_MAX_GAP + 12;
44
+ if (editorExperiment('platform_editor_breakout_resizing', true) && breakoutResizableNodes.includes(nodeType)) {
45
+ if (nodeType === 'layoutSection') {
46
+ return DRAG_HANDLE_MAX_GAP + 20;
47
+ } else {
48
+ return DRAG_HANDLE_MAX_GAP;
49
+ }
50
+ }
51
+ if (nodeType === 'layoutSection') {
52
+ return DRAG_HANDLE_DEFAULT_GAP + 20;
48
53
  }
49
54
  if (nodeTypeExcludeList.includes(nodeType)) {
50
55
  return DRAG_HANDLE_MAX_GAP;
@@ -54,8 +59,12 @@ export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
54
59
 
55
60
  // use for returning hap only for root level elements
56
61
  export var rootElementGap = function rootElementGap(nodeType) {
57
- if (nodeTypeExcludeList.includes(nodeType)) {
58
- return DRAG_HANDLE_MAX_GAP;
62
+ if (nodeTypeExcludeList.includes(nodeType) || editorExperiment('platform_editor_breakout_resizing', true) && breakoutResizableNodes.includes(nodeType)) {
63
+ if (nodeType === 'layoutSection') {
64
+ return DRAG_HANDLE_MAX_GAP + 20;
65
+ } else {
66
+ return DRAG_HANDLE_MAX_GAP;
67
+ }
59
68
  }
60
69
  if (nodeType === 'layoutSection') {
61
70
  return DRAG_HANDLE_MAX_GAP + 12;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "3.15.6",
3
+ "version": "3.15.7",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -56,7 +56,7 @@
56
56
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
57
57
  "@atlaskit/primitives": "^14.8.0",
58
58
  "@atlaskit/theme": "^18.0.0",
59
- "@atlaskit/tmp-editor-statsig": "^5.5.0",
59
+ "@atlaskit/tmp-editor-statsig": "^5.6.0",
60
60
  "@atlaskit/tokens": "^4.9.0",
61
61
  "@atlaskit/tooltip": "^20.2.0",
62
62
  "@babel/runtime": "^7.0.0",