@atlaskit/editor-plugin-block-controls 2.0.5 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.1.0
+
+### Minor Changes
+
+- [#142740](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142740)
+  [`a9e5ecde7f694`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a9e5ecde7f694) -
+  Remove redundant childnode checks to improve performance
+
+### Patch Changes
+
+- [#142433](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142433)
+  [`896303d4b4390`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/896303d4b4390) -
+  ED-24552 Update document moved event to fire when nested nodes are cut/paste into nodes and add
+  nodeDepth attributes
+- [#142806](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142806)
+  [`f73667130fb7d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f73667130fb7d) -
+  [ux] Update drop target margin for nested panels
+- [#142433](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142433)
+  [`a4f9e2c346c40`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a4f9e2c346c40) -
+  ED-24925 re-enable tooltip for top level draghandle
+- Updated dependencies
+
+## 2.0.6
+
+### Patch Changes
+
+- [#142709](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142709)
+  [`7ca7608c6b4c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ca7608c6b4c8) -
+  [ux] ED-24883 Fixed bug which caused empty line prompt button to jump around in Firefox
+- Updated dependencies
+
 ## 2.0.5
 
 ### Patch Changes

package/dist/cjs/commands/move-node.js

@@ -169,15 +169,18 @@ var moveNode = exports.moveNode = function moveNode(api) {
         nodeMoved: true
       });
       api === null || api === void 0 || api.core.actions.focus();
+      var $mappedTo = tr.doc.resolve(mappedTo);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: _analytics.EVENT_TYPE.TRACK,
         action: _analytics.ACTION.MOVED,
         actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
         actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-        attributes: _objectSpread({
+        attributes: _objectSpread(_objectSpread({
           nodeDepth: resolvedNode.depth,
           nodeType: node.type.name
-        }, (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') && {
+        }, (0, _experiments.editorExperiment)('nested-dnd', true) && {
+          destinationNodeDepth: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth
+        }), (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') && {
           inputMethod: inputMethod
         })
       })(tr);

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

@@ -184,13 +184,23 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    var isTopLevelNode = true;
     if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
-      unbind = (0, _bindEventListener.bind)(element, {
-        type: 'mouseover',
-        listener: function listener(e) {
-          e.stopPropagation();
-        }
-      });
+      var $pos = view.state.doc.resolve(pos);
+      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      /*
+       * We disable mouseover event to fix flickering issue on hover
+       * However, the tooltip for nested drag handle is not long working.
+       */
+      if (!isTopLevelNode) {
+        // This will also hide the tooltip.
+        unbind = (0, _bindEventListener.bind)(element, {
+          type: 'mouseover',
+          listener: function listener(e) {
+            e.stopPropagation();
+          }
+        });
+      }
     }
     unmountDecorations('data-blocks-drag-handle-container');
 
@@ -205,7 +215,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       getPos: getPos,
       anchorName: anchorName,
       nodeType: nodeType,
-      handleOptions: handleOptions
+      handleOptions: handleOptions,
+      isTopLevelNode: isTopLevelNode
     })), element);
     return element;
   }, {

package/dist/cjs/pm-plugins/main.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.key = exports.createPlugin = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _steps = require("@atlaskit/adf-schema/steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -79,13 +81,6 @@ var destroyFn = function destroyFn(api) {
   }));
   return _combine.combine.apply(void 0, cleanupFn);
 };
-function getDocChildrenCount(newState) {
-  var size = 0;
-  newState.doc.descendants(function (node) {
-    size += node.childCount;
-  });
-  return size;
-}
 var initialState = {
   decorations: _view.DecorationSet.empty,
   activeNode: undefined,
@@ -128,11 +123,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
           exposure: true
         }) || (0, _experiments.editorExperiment)('nested-dnd', true);
         var activeNodeWithNewNodeType = null;
-        var newChildCount = tr.docChanged && (0, _experiments.editorExperiment)('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
+        var newChildCount = tr.docChanged && (0, _experiments.editorExperiment)('nested-dnd', true) ? 0 : childCount;
         // If tables or media are being resized, we want to hide the drag handle
         var resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        var nodeCountChanged = (0, _experiments.editorExperiment)('nested-dnd', true) ? childCount !== newChildCount : oldState.doc.childCount !== newState.doc.childCount;
+        var canIgnoreTr = function canIgnoreTr() {
+          return !tr.steps.every(function (e) {
+            return e instanceof _steps.AnalyticsStep;
+          });
+        };
+        var nodeCountChanged = (0, _experiments.editorExperiment)('nested-dnd', true) ? !(0, _utils.isTextInput)(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
         var shouldRemoveHandle = !tr.getMeta('isRemote');
 
         // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
@@ -162,10 +162,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         var newNodeDecs;
         if ((0, _experiments.editorExperiment)('nested-dnd', true)) {
           var _meta$isDragging;
-          // naive solution while we work on performance optimised approach under ED-24503
-          newNodeDecs = (0, _decorations.nodeDecorations)(newState);
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newNodeDecs.length;
-          isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && nodeCountChanged;
+          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && nodeCountChanged;
+          isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && nodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
         } else {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
@@ -187,17 +185,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
         // (when the table node rerenders)
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
-        var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && (isPerformanceFix || meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName));
+        var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          var _newNodeDecs;
           var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
             return spec.type !== 'drop-target-decoration';
           });
           decorations = decorations.remove(oldNodeDecs);
-          newNodeDecs = (_newNodeDecs = newNodeDecs) !== null && _newNodeDecs !== void 0 ? _newNodeDecs : (0, _decorations.nodeDecorations)(newState);
+          newNodeDecs = (0, _decorations.nodeDecorations)(newState);
           decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(newNodeDecs));
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
             var mappedPosisiton = tr.mapping.map(activeNode.pos);

package/dist/cjs/ui/consts.js

@@ -38,7 +38,7 @@ var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = fu
     case 'layoutColumn':
       return '20px';
     case 'panel':
-      return '44px';
+      return '40px';
     case 'tableCell':
       return '8px';
     case 'tableHeader':

package/dist/cjs/ui/drag-handle.js

@@ -76,7 +76,9 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
     formatMessage = _ref.intl.formatMessage,
-    handleOptions = _ref.handleOptions;
+    handleOptions = _ref.handleOptions,
+    _ref$isTopLevelNode = _ref.isTopLevelNode,
+    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode;
   var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(768),
@@ -359,7 +361,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       }))
     );
   };
-  return (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
+  return isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
     content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
     }),

package/dist/cjs/ui/empty-block-experiment/widget.js

@@ -102,11 +102,14 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
 };
 var TypeAheadControlWithIntl = (0, _reactIntlNext.injectIntl)(TypeAheadControl);
 var toDOM = function toDOM(api, getPos, getIntl) {
+  var wrapper = document.createElement('span');
+  wrapper.contentEditable = 'false';
+  wrapper.setAttribute('data-empty-block-experiment', 'true');
+  wrapper.setAttribute('class', 'empty-block-experiment');
   var element = document.createElement('span');
   element.contentEditable = 'false';
-  element.setAttribute('style', 'position: relative');
-  element.setAttribute('class', 'empty-block-experiment');
-  element.setAttribute('data-empty-block-experiment', 'true');
+  element.setAttribute('style', 'position: absolute;');
+  wrapper.appendChild(element);
   _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
     value: getIntl()
   }, /*#__PURE__*/(0, _react.createElement)(TypeAheadControlWithIntl, {
@@ -118,8 +121,8 @@ var toDOM = function toDOM(api, getPos, getIntl) {
   // // Cursor height cannot be controlled via CSS and is handled by the browser.
   // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
   var cursorHack = document.createTextNode(_whitespace.ZERO_WIDTH_SPACE);
-  element.appendChild(cursorHack);
-  return element;
+  wrapper.appendChild(cursorHack);
+  return wrapper;
 };
 var createEmptyBlockWidgetDecoration = exports.createEmptyBlockWidgetDecoration = function createEmptyBlockWidgetDecoration(selection, api, getIntl) {
   if (selection instanceof _state.TextSelection && selection.$cursor) {

package/dist/es2019/commands/move-node.js

@@ -163,6 +163,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     nodeMoved: true
   });
   api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  const $mappedTo = tr.doc.resolve(mappedTo);
   api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
     eventType: EVENT_TYPE.TRACK,
     action: ACTION.MOVED,
@@ -171,6 +172,9 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     attributes: {
       nodeDepth: resolvedNode.depth,
       nodeType: node.type.name,
+      ...(editorExperiment('nested-dnd', true) && {
+        destinationNodeDepth: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth
+      }),
       ...(fg('platform_editor_element_drag_and_drop_ed_23873') && {
         inputMethod
       })

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

@@ -165,13 +165,23 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    let isTopLevelNode = true;
     if (editorExperiment('nested-dnd', true)) {
-      unbind = bind(element, {
-        type: 'mouseover',
-        listener: e => {
-          e.stopPropagation();
-        }
-      });
+      const $pos = view.state.doc.resolve(pos);
+      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      /*
+       * We disable mouseover event to fix flickering issue on hover
+       * However, the tooltip for nested drag handle is not long working.
+       */
+      if (!isTopLevelNode) {
+        // This will also hide the tooltip.
+        unbind = bind(element, {
+          type: 'mouseover',
+          listener: e => {
+            e.stopPropagation();
+          }
+        });
+      }
     }
     unmountDecorations('data-blocks-drag-handle-container');
 
@@ -186,7 +196,8 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
       getPos,
       anchorName,
       nodeType,
-      handleOptions
+      handleOptions,
+      isTopLevelNode
     })), element);
     return element;
   }, {

package/dist/es2019/pm-plugins/main.js

@@ -1,7 +1,9 @@
 import rafSchedule from 'raf-schd';
+import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isTextInput } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -73,13 +75,6 @@ const destroyFn = api => {
   }));
   return combine(...cleanupFn);
 };
-function getDocChildrenCount(newState) {
-  let size = 0;
-  newState.doc.descendants(node => {
-    size += node.childCount;
-  });
-  return size;
-}
 const initialState = {
   decorations: DecorationSet.empty,
   activeNode: undefined,
@@ -124,11 +119,12 @@ export const createPlugin = (api, getIntl) => {
           exposure: true
         }) || editorExperiment('nested-dnd', true);
         let activeNodeWithNewNodeType = null;
-        const newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
+        const newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? 0 : childCount;
         // If tables or media are being resized, we want to hide the drag handle
         const resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        const nodeCountChanged = editorExperiment('nested-dnd', true) ? childCount !== newChildCount : oldState.doc.childCount !== newState.doc.childCount;
+        const canIgnoreTr = () => !tr.steps.every(e => e instanceof AnalyticsStep);
+        const nodeCountChanged = editorExperiment('nested-dnd', true) ? !isTextInput(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
         const shouldRemoveHandle = !tr.getMeta('isRemote');
 
         // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
@@ -154,10 +150,8 @@ export const createPlugin = (api, getIntl) => {
         let newNodeDecs;
         if (editorExperiment('nested-dnd', true)) {
           var _meta$isDragging;
-          // naive solution while we work on performance optimised approach under ED-24503
-          newNodeDecs = nodeDecorations(newState);
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newNodeDecs.length;
-          isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && nodeCountChanged;
+          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && nodeCountChanged;
+          isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && nodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
         } else {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
@@ -178,15 +172,14 @@ export const createPlugin = (api, getIntl) => {
         // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
         // (when the table node rerenders)
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
-        const maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && (isPerformanceFix || meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName));
+        const maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          var _newNodeDecs;
           const oldNodeDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
           decorations = decorations.remove(oldNodeDecs);
-          newNodeDecs = (_newNodeDecs = newNodeDecs) !== null && _newNodeDecs !== void 0 ? _newNodeDecs : nodeDecorations(newState);
+          newNodeDecs = nodeDecorations(newState);
           decorations = decorations.add(newState.doc, [...newNodeDecs]);
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
             let mappedPosisiton = tr.mapping.map(activeNode.pos);

package/dist/es2019/ui/consts.js

@@ -29,7 +29,7 @@ export const getNestedNodeLeftPaddingMargin = nodeType => {
     case 'layoutColumn':
       return '20px';
     case 'panel':
-      return '44px';
+      return '40px';
     case 'tableCell':
       return '8px';
     case 'tableHeader':

package/dist/es2019/ui/drag-handle.js

@@ -67,7 +67,8 @@ const DragHandleInternal = ({
   intl: {
     formatMessage
   },
-  handleOptions
+  handleOptions,
+  isTopLevelNode = true
 }) => {
   var _api$core2, _api$analytics2, _api$core4, _api$core6;
   const start = getPos();
@@ -341,7 +342,7 @@ const DragHandleInternal = ({
     label: "",
     size: "medium"
   }));
-  return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
+  return isTopLevelNode && fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
     }),

package/dist/es2019/ui/empty-block-experiment/widget.js

@@ -94,11 +94,14 @@ export const TypeAheadControl = ({
 };
 const TypeAheadControlWithIntl = injectIntl(TypeAheadControl);
 const toDOM = (api, getPos, getIntl) => {
+  const wrapper = document.createElement('span');
+  wrapper.contentEditable = 'false';
+  wrapper.setAttribute('data-empty-block-experiment', 'true');
+  wrapper.setAttribute('class', 'empty-block-experiment');
   const element = document.createElement('span');
   element.contentEditable = 'false';
-  element.setAttribute('style', 'position: relative');
-  element.setAttribute('class', 'empty-block-experiment');
-  element.setAttribute('data-empty-block-experiment', 'true');
+  element.setAttribute('style', 'position: absolute;');
+  wrapper.appendChild(element);
   ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
     value: getIntl()
   }, /*#__PURE__*/createElement(TypeAheadControlWithIntl, {
@@ -110,8 +113,8 @@ const toDOM = (api, getPos, getIntl) => {
   // // Cursor height cannot be controlled via CSS and is handled by the browser.
   // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
   const cursorHack = document.createTextNode(ZERO_WIDTH_SPACE);
-  element.appendChild(cursorHack);
-  return element;
+  wrapper.appendChild(cursorHack);
+  return wrapper;
 };
 export const createEmptyBlockWidgetDecoration = (selection, api, getIntl) => {
   if (selection instanceof TextSelection && selection.$cursor) {

package/dist/esm/commands/move-node.js

@@ -163,15 +163,18 @@ export var moveNode = function moveNode(api) {
         nodeMoved: true
       });
       api === null || api === void 0 || api.core.actions.focus();
+      var $mappedTo = tr.doc.resolve(mappedTo);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: EVENT_TYPE.TRACK,
         action: ACTION.MOVED,
         actionSubject: ACTION_SUBJECT.ELEMENT,
         actionSubjectId: ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
-        attributes: _objectSpread({
+        attributes: _objectSpread(_objectSpread({
           nodeDepth: resolvedNode.depth,
           nodeType: node.type.name
-        }, fg('platform_editor_element_drag_and_drop_ed_23873') && {
+        }, editorExperiment('nested-dnd', true) && {
+          destinationNodeDepth: $mappedTo === null || $mappedTo === void 0 ? void 0 : $mappedTo.depth
+        }), fg('platform_editor_element_drag_and_drop_ed_23873') && {
           inputMethod: inputMethod
         })
       })(tr);

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

@@ -177,13 +177,23 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
     element.style.display = 'inline';
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
+    var isTopLevelNode = true;
     if (editorExperiment('nested-dnd', true)) {
-      unbind = bind(element, {
-        type: 'mouseover',
-        listener: function listener(e) {
-          e.stopPropagation();
-        }
-      });
+      var $pos = view.state.doc.resolve(pos);
+      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      /*
+       * We disable mouseover event to fix flickering issue on hover
+       * However, the tooltip for nested drag handle is not long working.
+       */
+      if (!isTopLevelNode) {
+        // This will also hide the tooltip.
+        unbind = bind(element, {
+          type: 'mouseover',
+          listener: function listener(e) {
+            e.stopPropagation();
+          }
+        });
+      }
     }
     unmountDecorations('data-blocks-drag-handle-container');
 
@@ -198,7 +208,8 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
       getPos: getPos,
       anchorName: anchorName,
       nodeType: nodeType,
-      handleOptions: handleOptions
+      handleOptions: handleOptions,
+      isTopLevelNode: isTopLevelNode
     })), element);
     return element;
   }, {

package/dist/esm/pm-plugins/main.js

@@ -1,8 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import rafSchedule from 'raf-schd';
+import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isTextInput } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -72,13 +74,6 @@ var destroyFn = function destroyFn(api) {
   }));
   return combine.apply(void 0, cleanupFn);
 };
-function getDocChildrenCount(newState) {
-  var size = 0;
-  newState.doc.descendants(function (node) {
-    size += node.childCount;
-  });
-  return size;
-}
 var initialState = {
   decorations: DecorationSet.empty,
   activeNode: undefined,
@@ -121,11 +116,16 @@ export var createPlugin = function createPlugin(api, getIntl) {
           exposure: true
         }) || editorExperiment('nested-dnd', true);
         var activeNodeWithNewNodeType = null;
-        var newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
+        var newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? 0 : childCount;
         // If tables or media are being resized, we want to hide the drag handle
         var resizerMeta = tr.getMeta('is-resizer-resizing');
         isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        var nodeCountChanged = editorExperiment('nested-dnd', true) ? childCount !== newChildCount : oldState.doc.childCount !== newState.doc.childCount;
+        var canIgnoreTr = function canIgnoreTr() {
+          return !tr.steps.every(function (e) {
+            return e instanceof AnalyticsStep;
+          });
+        };
+        var nodeCountChanged = editorExperiment('nested-dnd', true) ? !isTextInput(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
         var shouldRemoveHandle = !tr.getMeta('isRemote');
 
         // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
@@ -155,10 +155,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
         var newNodeDecs;
         if (editorExperiment('nested-dnd', true)) {
           var _meta$isDragging;
-          // naive solution while we work on performance optimised approach under ED-24503
-          newNodeDecs = nodeDecorations(newState);
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newNodeDecs.length;
-          isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && nodeCountChanged;
+          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && nodeCountChanged;
+          isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && nodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
         } else {
           isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
         }
@@ -180,17 +178,16 @@ export var createPlugin = function createPlugin(api, getIntl) {
         // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
         // (when the table node rerenders)
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
-        var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && (isPerformanceFix || meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName));
+        var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         var redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
-          var _newNodeDecs;
           var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
             return spec.type !== 'drop-target-decoration';
           });
           decorations = decorations.remove(oldNodeDecs);
-          newNodeDecs = (_newNodeDecs = newNodeDecs) !== null && _newNodeDecs !== void 0 ? _newNodeDecs : nodeDecorations(newState);
+          newNodeDecs = nodeDecorations(newState);
           decorations = decorations.add(newState.doc, _toConsumableArray(newNodeDecs));
           if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
             var mappedPosisiton = tr.mapping.map(activeNode.pos);

package/dist/esm/ui/consts.js

@@ -31,7 +31,7 @@ export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMar
     case 'layoutColumn':
       return '20px';
     case 'panel':
-      return '44px';
+      return '40px';
     case 'tableCell':
       return '8px';
     case 'tableHeader':

package/dist/esm/ui/drag-handle.js

@@ -67,7 +67,9 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
     formatMessage = _ref.intl.formatMessage,
-    handleOptions = _ref.handleOptions;
+    handleOptions = _ref.handleOptions,
+    _ref$isTopLevelNode = _ref.isTopLevelNode,
+    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode;
   var start = getPos();
   var buttonRef = useRef(null);
   var _useState = useState(768),
@@ -350,7 +352,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       }))
     );
   };
-  return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
+  return isTopLevelNode && fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
     }),

package/dist/esm/ui/empty-block-experiment/widget.js

@@ -91,11 +91,14 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
 };
 var TypeAheadControlWithIntl = injectIntl(TypeAheadControl);
 var toDOM = function toDOM(api, getPos, getIntl) {
+  var wrapper = document.createElement('span');
+  wrapper.contentEditable = 'false';
+  wrapper.setAttribute('data-empty-block-experiment', 'true');
+  wrapper.setAttribute('class', 'empty-block-experiment');
   var element = document.createElement('span');
   element.contentEditable = 'false';
-  element.setAttribute('style', 'position: relative');
-  element.setAttribute('class', 'empty-block-experiment');
-  element.setAttribute('data-empty-block-experiment', 'true');
+  element.setAttribute('style', 'position: absolute;');
+  wrapper.appendChild(element);
   ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
     value: getIntl()
   }, /*#__PURE__*/createElement(TypeAheadControlWithIntl, {
@@ -107,8 +110,8 @@ var toDOM = function toDOM(api, getPos, getIntl) {
   // // Cursor height cannot be controlled via CSS and is handled by the browser.
   // // see Prosemirror forum: https://discuss.prosemirror.net/t/chrome-caret-cursor-larger-than-the-text-with-inlined-items/5946
   var cursorHack = document.createTextNode(ZERO_WIDTH_SPACE);
-  element.appendChild(cursorHack);
-  return element;
+  wrapper.appendChild(cursorHack);
+  return wrapper;
 };
 export var createEmptyBlockWidgetDecoration = function createEmptyBlockWidgetDecoration(selection, api, getIntl) {
   if (selection instanceof TextSelection && selection.$cursor) {

package/dist/types/ui/consts.d.ts

@@ -8,7 +8,7 @@ export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
 export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => 4 | 8 | 12;
-export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "44px";
+export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 /**
  * This document serves as a quick reference map for correlating various space matches

package/dist/types/ui/drag-handle.d.ts

@@ -10,6 +10,7 @@ export declare const DragHandle: import("react").FC<import("react-intl-next").Wi
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
+    isTopLevelNode?: Boolean | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<{
         view: EditorView;
@@ -18,5 +19,6 @@ export declare const DragHandle: import("react").FC<import("react-intl-next").Wi
         anchorName: string;
         nodeType: string;
         handleOptions?: HandleOptions;
+        isTopLevelNode?: Boolean | undefined;
     } & WrappedComponentProps>;
 };

package/dist/types-ts4.5/ui/consts.d.ts

@@ -8,7 +8,7 @@ export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP: number;
 export declare const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT: number;
 export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => 4 | 8 | 12;
-export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "44px";
+export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
 export declare const topPositionAdjustment: (nodeType: string) => number;
 /**
  * This document serves as a quick reference map for correlating various space matches

package/dist/types-ts4.5/ui/drag-handle.d.ts

@@ -10,6 +10,7 @@ export declare const DragHandle: import("react").FC<import("react-intl-next").Wi
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
+    isTopLevelNode?: Boolean | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<{
         view: EditorView;
@@ -18,5 +19,6 @@ export declare const DragHandle: import("react").FC<import("react-intl-next").Wi
         anchorName: string;
         nodeType: string;
         handleOptions?: HandleOptions;
+        isTopLevelNode?: Boolean | undefined;
     } & WrappedComponentProps>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.0.5",
+	"version": "2.1.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,12 +30,13 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^89.3.0",
+		"@atlaskit/adf-schema": "^40.9.0",
+		"@atlaskit/editor-common": "^90.0.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
-		"@atlaskit/editor-plugin-quick-insert": "^1.3.0",
+		"@atlaskit/editor-plugin-quick-insert": "^1.4.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^2.13.0",