@atlaskit/editor-plugin-block-controls 3.18.0 → 3.19.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.19.1
+
+### Patch Changes
+
+- [#171113](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171113)
+  [`20200d3f20cfe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/20200d3f20cfe) -
+  Fix memory leak when cleaning up drop targets
+- Updated dependencies
+
+## 3.19.0
+
+### Minor Changes
+
+- [#170348](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170348)
+  [`8f9510a71c843`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f9510a71c843) -
+  ED-28158 implement active advanced layout drop targets
+
 ## 3.18.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations-drop-target-active.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.getActiveDropTargetDecorations = exports.canMoveNodeOrSliceToPos = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decorationsCommon = require("./decorations-common");
 var _decorationsDropTarget = require("./decorations-drop-target");
 var _decorationsFindSurroundingNodes = require("./decorations-find-surrounding-nodes");
 var _activeAnchorTracker = require("./utils/active-anchor-tracker");
+var _consts = require("./utils/consts");
 var _validation = require("./utils/validation");
 /**
  * List of parent node types that can have child nodes
@@ -58,7 +60,9 @@ var canMoveNodeOrSliceToPos = exports.canMoveNodeOrSliceToPos = function canMove
   return true;
 };
 var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, formatMessage, nodeViewPortalProviderAPI, activeNode) {
-  (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_block_controls_drop_target_mem_fix')) {
+    (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  }
   var decs = [];
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
@@ -134,6 +138,10 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
       }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
     }
   }
+  var rootNodeWithPos = {
+    node: node,
+    pos: pos
+  };
 
   // if the current node is not a top level node, we create one for advanced layout drop targets
   if (depth > 1) {
@@ -146,9 +154,30 @@ var getActiveDropTargetDecorations = exports.getActiveDropTargetDecorations = fu
       formatMessage: formatMessage,
       dropTargetStyle: 'default'
     }, nodeViewPortalProviderAPI, 0, undefined, false));
-    _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _decorationsCommon.getNodeAnchor)(root.node));
-  } else {
-    _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _decorationsCommon.getNodeAnchor)(node));
+    rootNodeWithPos = {
+      node: root.node,
+      pos: root.pos
+    };
+  }
+  if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
+    var _isSameLayout = $activeNodePos && (0, _validation.isInSameLayout)($activeNodePos, state.doc.resolve(rootNodeWithPos.pos));
+    if (rootNodeWithPos.node.type.name === 'layoutSection') {
+      var layoutSectionNode = rootNodeWithPos.node;
+      if (layoutSectionNode.childCount < (0, _consts.maxLayoutColumnSupported)() || _isSameLayout) {
+        layoutSectionNode.descendants(function (childNode, childPos, parent, index) {
+          if (childNode.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 // Not the first node
+          ) {
+            decs.push((0, _decorationsDropTarget.createLayoutDropTargetDecoration)(rootNodeWithPos.pos + childPos + 1, {
+              api: api,
+              parent: parent,
+              formatMessage: formatMessage
+            }, nodeViewPortalProviderAPI, undefined));
+          }
+          return false;
+        });
+      }
+    }
   }
+  _activeAnchorTracker.defaultActiveAnchorTracker.emit((0, _decorationsCommon.getNodeAnchor)(rootNodeWithPos.node));
   return decs;
 };

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -11,6 +11,7 @@ var _uuid = _interopRequireDefault(require("uuid"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
 var _dropTarget = require("../ui/drop-target");
@@ -112,7 +113,12 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC,
-    side: side
+    side: side,
+    destroy: function destroy() {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_block_controls_drop_target_mem_fix')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };
 var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
@@ -137,11 +143,18 @@ var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration
     }, element, key);
     return element;
   }, {
-    type: _decorationsCommon.TYPE_DROP_TARGET_DEC
+    type: _decorationsCommon.TYPE_DROP_TARGET_DEC,
+    destroy: function destroy() {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_block_controls_drop_target_mem_fix')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };
 var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) {
-  (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_block_controls_drop_target_mem_fix')) {
+    (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  }
   var decs = [];
   var POS_END_OF_DOC = newState.doc.nodeSize - 2;
   var docFrom = from === undefined || from < 0 ? 0 : from;

package/dist/es2019/pm-plugins/decorations-drop-target-active.js

@@ -1,10 +1,12 @@
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor, unmountDecorations } from './decorations-common';
-import { createDropTargetDecoration } from './decorations-drop-target';
+import { createDropTargetDecoration, createLayoutDropTargetDecoration } from './decorations-drop-target';
 import { findSurroundingNodes } from './decorations-find-surrounding-nodes';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
+import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
 
 /**
@@ -54,7 +56,9 @@ export const canMoveNodeOrSliceToPos = (state, node, parent, index, $toPos, acti
   return true;
 };
 export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api, formatMessage, nodeViewPortalProviderAPI, activeNode) => {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  if (!fg('platform_editor_block_controls_drop_target_mem_fix')) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  }
   const decs = [];
   const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   const $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
@@ -131,6 +135,10 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
       }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
     }
   }
+  let rootNodeWithPos = {
+    node,
+    pos
+  };
 
   // if the current node is not a top level node, we create one for advanced layout drop targets
   if (depth > 1) {
@@ -143,9 +151,30 @@ export const getActiveDropTargetDecorations = (activeDropTargetNode, state, api,
       formatMessage,
       dropTargetStyle: 'default'
     }, nodeViewPortalProviderAPI, 0, undefined, false));
-    defaultActiveAnchorTracker.emit(getNodeAnchor(root.node));
-  } else {
-    defaultActiveAnchorTracker.emit(getNodeAnchor(node));
+    rootNodeWithPos = {
+      node: root.node,
+      pos: root.pos
+    };
+  }
+  if (editorExperiment('advanced_layouts', true)) {
+    const isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, state.doc.resolve(rootNodeWithPos.pos));
+    if (rootNodeWithPos.node.type.name === 'layoutSection') {
+      const layoutSectionNode = rootNodeWithPos.node;
+      if (layoutSectionNode.childCount < maxLayoutColumnSupported() || isSameLayout) {
+        layoutSectionNode.descendants((childNode, childPos, parent, index) => {
+          if (childNode.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 // Not the first node
+          ) {
+            decs.push(createLayoutDropTargetDecoration(rootNodeWithPos.pos + childPos + 1, {
+              api,
+              parent,
+              formatMessage
+            }, nodeViewPortalProviderAPI, undefined));
+          }
+          return false;
+        });
+      }
+    }
   }
+  defaultActiveAnchorTracker.emit(getNodeAnchor(rootNodeWithPos.node));
   return decs;
 };

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -3,6 +3,7 @@ import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
@@ -100,7 +101,12 @@ export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC,
-    side
+    side,
+    destroy: () => {
+      if (fg('platform_editor_block_controls_drop_target_mem_fix')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };
 export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI, anchorRectCache) => {
@@ -124,11 +130,18 @@ export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProvi
     }), element, key);
     return element;
   }, {
-    type: TYPE_DROP_TARGET_DEC
+    type: TYPE_DROP_TARGET_DEC,
+    destroy: () => {
+      if (fg('platform_editor_block_controls_drop_target_mem_fix')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };
 export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) => {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  if (!fg('platform_editor_block_controls_drop_target_mem_fix')) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  }
   const decs = [];
   const POS_END_OF_DOC = newState.doc.nodeSize - 2;
   const docFrom = from === undefined || from < 0 ? 0 : from;

package/dist/esm/pm-plugins/decorations-drop-target-active.js

@@ -1,10 +1,12 @@
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getNodeAnchor, unmountDecorations } from './decorations-common';
-import { createDropTargetDecoration } from './decorations-drop-target';
+import { createDropTargetDecoration, createLayoutDropTargetDecoration } from './decorations-drop-target';
 import { findSurroundingNodes } from './decorations-find-surrounding-nodes';
 import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
+import { maxLayoutColumnSupported } from './utils/consts';
 import { canMoveNodeToIndex, canMoveSliceToIndex, isInSameLayout } from './utils/validation';
 
 /**
@@ -53,7 +55,9 @@ export var canMoveNodeOrSliceToPos = function canMoveNodeOrSliceToPos(state, nod
   return true;
 };
 export var getActiveDropTargetDecorations = function getActiveDropTargetDecorations(activeDropTargetNode, state, api, formatMessage, nodeViewPortalProviderAPI, activeNode) {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  if (!fg('platform_editor_block_controls_drop_target_mem_fix')) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  }
   var decs = [];
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var $activeNodePos = typeof activeNodePos === 'number' && state.doc.resolve(activeNodePos);
@@ -129,6 +133,10 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
       }, nodeViewPortalProviderAPI, -1, undefined, isSameLayout));
     }
   }
+  var rootNodeWithPos = {
+    node: node,
+    pos: pos
+  };
 
   // if the current node is not a top level node, we create one for advanced layout drop targets
   if (depth > 1) {
@@ -141,9 +149,30 @@ export var getActiveDropTargetDecorations = function getActiveDropTargetDecorati
       formatMessage: formatMessage,
       dropTargetStyle: 'default'
     }, nodeViewPortalProviderAPI, 0, undefined, false));
-    defaultActiveAnchorTracker.emit(getNodeAnchor(root.node));
-  } else {
-    defaultActiveAnchorTracker.emit(getNodeAnchor(node));
+    rootNodeWithPos = {
+      node: root.node,
+      pos: root.pos
+    };
+  }
+  if (editorExperiment('advanced_layouts', true)) {
+    var _isSameLayout = $activeNodePos && isInSameLayout($activeNodePos, state.doc.resolve(rootNodeWithPos.pos));
+    if (rootNodeWithPos.node.type.name === 'layoutSection') {
+      var layoutSectionNode = rootNodeWithPos.node;
+      if (layoutSectionNode.childCount < maxLayoutColumnSupported() || _isSameLayout) {
+        layoutSectionNode.descendants(function (childNode, childPos, parent, index) {
+          if (childNode.type.name === 'layoutColumn' && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutSection' && index !== 0 // Not the first node
+          ) {
+            decs.push(createLayoutDropTargetDecoration(rootNodeWithPos.pos + childPos + 1, {
+              api: api,
+              parent: parent,
+              formatMessage: formatMessage
+            }, nodeViewPortalProviderAPI, undefined));
+          }
+          return false;
+        });
+      }
+    }
   }
+  defaultActiveAnchorTracker.emit(getNodeAnchor(rootNodeWithPos.node));
   return decs;
 };

package/dist/esm/pm-plugins/decorations-drop-target.js

@@ -6,6 +6,7 @@ import uuid from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
@@ -105,7 +106,12 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC,
-    side: side
+    side: side,
+    destroy: function destroy() {
+      if (fg('platform_editor_block_controls_drop_target_mem_fix')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };
 export var createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
@@ -130,11 +136,18 @@ export var createLayoutDropTargetDecoration = function createLayoutDropTargetDec
     }, element, key);
     return element;
   }, {
-    type: TYPE_DROP_TARGET_DEC
+    type: TYPE_DROP_TARGET_DEC,
+    destroy: function destroy() {
+      if (fg('platform_editor_block_controls_drop_target_mem_fix')) {
+        nodeViewPortalProviderAPI.remove(key);
+      }
+    }
   });
 };
 export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, nodeViewPortalProviderAPI, activeNode, anchorRectCache, from, to) {
-  unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  if (!fg('platform_editor_block_controls_drop_target_mem_fix')) {
+    unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drop-target-container', 'data-blocks-drop-target-key');
+  }
   var decs = [];
   var POS_END_OF_DOC = newState.doc.nodeSize - 2;
   var docFrom = from === undefined || from < 0 ? 0 : from;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.18.0",
+	"version": "3.19.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.6.0",
+		"@atlaskit/editor-common": "^106.7.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^7.0.0",
-		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tokens": "^5.2.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -206,6 +206,9 @@
 		},
 		"platform_editor_breakout_resizing_hello_release": {
 			"type": "boolean"
+		},
+		"platform_editor_block_controls_drop_target_mem_fix": {
+			"type": "boolean"
 		}
 	}
 }