@atlaskit/editor-plugin-block-controls 3.1.9 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.2.0
+
+### Minor Changes
+
+- [#120472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120472)
+  [`73c800ab5f2fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c800ab5f2fc) -
+  ED-26766 update adf-schema from 47.2.1 to 47.6.0 and adf-schema-json from 1.27.0 to 1.31.0
+
+### Patch Changes
+
+- [#121077](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121077)
+  [`a41495c81457e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a41495c81457e) -
+  remap root anchor name and node type when document changes to fix quick insert button positioning
+  issues
+- Updated dependencies
+
 ## 3.1.9
 
 ### Patch Changes

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

@@ -98,7 +98,9 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
         return shouldDescend; //skip over, don't consider it a valid depth
       }
     }
-    var anchorStyles = "anchor-name: ".concat(anchorName, ";");
+    var anchorStyles = pos === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
+    // we're rendering quick insert button and drag handle. For now override margin-top to 0
+    "anchor-name: ".concat(anchorName, ";margin-top:0px;") : "anchor-name: ".concat(anchorName, ";");
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
       style: anchorStyles
     }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -20,6 +20,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
   return _view.Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
     element.contentEditable = 'false';
+    element.setAttribute('data-blocks-quick-insert-container', 'true');
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.TypeAheadControl, {
         api: api,

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

@@ -166,6 +166,19 @@ var getDecorations = exports.getDecorations = function getDecorations(state) {
   var _key$getState;
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
+var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
+  // Find the newly minted node decs that touch the active node
+  var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, pos - 1, to);
+
+  // Find the specific dec that the active node corresponds to
+  var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
+    return (dec === null || dec === void 0 ? void 0 : dec.from) === pos;
+  });
+
+  // If multiple decorations at the active node pos, we want the last one
+  var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
+  return nodeDecAtActivePos;
+};
 var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
   var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
@@ -189,14 +202,28 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     if (activeNode) {
       var mappedPos = tr.mapping.mapResult(activeNode.pos);
       isActiveNodeDeleted = mappedPos.deleted;
-      activeNode = {
-        pos: mappedPos.pos,
-        anchorName: activeNode.anchorName,
-        nodeType: activeNode.nodeType,
-        rootPos: activeNode.rootPos,
-        rootAnchorName: activeNode.rootAnchorName,
-        rootNodeType: activeNode.rootNodeType
-      };
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+        activeNode = {
+          pos: mappedPos.pos,
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType
+        };
+      } else {
+        var _mappedRootPos$pos, _mappedRootPos;
+        // for editor controls, remap the rootPos as well
+        var mappedRootPos;
+        if (activeNode.rootPos !== undefined) {
+          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos);
+        }
+        activeNode = {
+          pos: mappedPos.pos,
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType,
+          rootPos: (_mappedRootPos$pos = (_mappedRootPos = mappedRootPos) === null || _mappedRootPos === void 0 ? void 0 : _mappedRootPos.pos) !== null && _mappedRootPos$pos !== void 0 ? _mappedRootPos$pos : activeNode.rootPos,
+          rootAnchorName: activeNode.rootAnchorName,
+          rootNodeType: activeNode.rootNodeType
+        };
+      }
     }
     if (multiSelectDnD && flags.isMultiSelectEnabled) {
       multiSelectDnD.anchor = tr.mapping.map(multiSelectDnD.anchor);
@@ -229,22 +256,40 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
     if (latestActiveNode && !isActiveNodeDeleted) {
-      // Find the newly minted node decs that touch the active node
-      var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+        // Find the newly minted node decs that touch the active node
+        var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
 
-      // Find the specific dec that the active node corresponds to
-      var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
-        return (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos;
-      });
+        // Find the specific dec that the active node corresponds to
+        var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
+          return (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos;
+        });
 
-      // If multiple decorations at the active node pos, we want the last one
-      var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
+        // If multiple decorations at the active node pos, we want the last one
+        var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
 
-      // Update the active node anchor-name and type for accurate positioning
-      if (nodeDecAtActivePos) {
-        isActiveNodeModified = true;
-        latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
-        latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+        // Update the active node anchor-name and type for accurate positioning
+        if (nodeDecAtActivePos) {
+          isActiveNodeModified = true;
+          latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+        }
+      } else {
+        var _nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
+        var rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
+        if (_nodeDecAtActivePos || rootNodeDecAtActivePos) {
+          isActiveNodeModified = true;
+        }
+
+        // Update the active node anchor-name and type for accurate positioning
+        if (_nodeDecAtActivePos) {
+          latestActiveNode.anchorName = _nodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.nodeType = _nodeDecAtActivePos.spec.nodeType;
+        }
+        if (rootNodeDecAtActivePos) {
+          latestActiveNode.rootAnchorName = rootNodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.rootNodeType = rootNodeDecAtActivePos.spec.nodeType;
+        }
       }
     }
   }

package/dist/cjs/ui/global-styles.js

@@ -155,18 +155,6 @@ var topLevelNodeMarginStyles = (0, _react.css)({
     }
   }
 });
-
-// when quick insert is rendered there are 2 widgets before the first block node
-var topLevelNodeMarginWithQuickInsertStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .ProseMirror-widget:nth-child(-n + 2) + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:nth-child(-n + 2) + *:not([data-layout-section="true"])': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginTop: '0 !important'
-    }
-  }
-});
 var withDividerInPanelStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   marginTop: '0 !important'
@@ -228,6 +216,6 @@ var blockCardWithoutLayout = (0, _react.css)({
 });
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? topLevelNodeMarginWithQuickInsertStyles : topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
   });
 };

package/dist/cjs/ui/quick-insert-button.js

@@ -13,7 +13,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
@@ -151,8 +151,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       xcss: [containerStaticStyles]
     }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
-        description: formatMessage(_messages.blockControlsMessages.insert),
-        shortcutOverride: "/"
+        description: formatMessage(_messages.blockControlsMessages.insert)
       })
     }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
       type: "button",
@@ -179,8 +178,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
         api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
       }
     }, /*#__PURE__*/_react.default.createElement(_add.default, {
-      label: "add",
-      size: "medium"
+      label: "add"
     }))))
   );
 };

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

@@ -88,7 +88,10 @@ export const nodeDecorations = (newState, from, to) => {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
     }
-    const anchorStyles = `anchor-name: ${anchorName};`;
+    const anchorStyles = pos === 0 && editorExperiment('platform_editor_controls', 'variant1') ?
+    // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
+    // we're rendering quick insert button and drag handle. For now override margin-top to 0
+    `anchor-name: ${anchorName};margin-top:0px;` : `anchor-name: ${anchorName};`;
     decs.push(Decoration.node(pos, pos + node.nodeSize, {
       style: anchorStyles,
       ['data-drag-handler-anchor-name']: anchorName,

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -11,6 +11,7 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
   return Decoration.widget(rootPos, (view, getPos) => {
     const element = document.createElement('span');
     element.contentEditable = 'false';
+    element.setAttribute('data-blocks-quick-insert-container', 'true');
     nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(TypeAheadControl, {
       api,
       getPos,

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

@@ -162,6 +162,17 @@ export const getDecorations = state => {
   var _key$getState;
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
+const getDecorationAtPos = (decorations, pos, to) => {
+  // Find the newly minted node decs that touch the active node
+  const findNewNodeDecs = findNodeDecs(decorations, pos - 1, to);
+
+  // Find the specific dec that the active node corresponds to
+  const nodeDecsAtActivePos = findNewNodeDecs.filter(dec => (dec === null || dec === void 0 ? void 0 : dec.from) === pos);
+
+  // If multiple decorations at the active node pos, we want the last one
+  const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
+  return nodeDecAtActivePos;
+};
 export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
   var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   let {
@@ -189,14 +200,28 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     if (activeNode) {
       const mappedPos = tr.mapping.mapResult(activeNode.pos);
       isActiveNodeDeleted = mappedPos.deleted;
-      activeNode = {
-        pos: mappedPos.pos,
-        anchorName: activeNode.anchorName,
-        nodeType: activeNode.nodeType,
-        rootPos: activeNode.rootPos,
-        rootAnchorName: activeNode.rootAnchorName,
-        rootNodeType: activeNode.rootNodeType
-      };
+      if (editorExperiment('platform_editor_controls', 'control')) {
+        activeNode = {
+          pos: mappedPos.pos,
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType
+        };
+      } else {
+        var _mappedRootPos$pos, _mappedRootPos;
+        // for editor controls, remap the rootPos as well
+        let mappedRootPos;
+        if (activeNode.rootPos !== undefined) {
+          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos);
+        }
+        activeNode = {
+          pos: mappedPos.pos,
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType,
+          rootPos: (_mappedRootPos$pos = (_mappedRootPos = mappedRootPos) === null || _mappedRootPos === void 0 ? void 0 : _mappedRootPos.pos) !== null && _mappedRootPos$pos !== void 0 ? _mappedRootPos$pos : activeNode.rootPos,
+          rootAnchorName: activeNode.rootAnchorName,
+          rootNodeType: activeNode.rootNodeType
+        };
+      }
     }
     if (multiSelectDnD && flags.isMultiSelectEnabled) {
       multiSelectDnD.anchor = tr.mapping.map(multiSelectDnD.anchor);
@@ -230,20 +255,38 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     const newNodeDecs = nodeDecorations(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
     if (latestActiveNode && !isActiveNodeDeleted) {
-      // Find the newly minted node decs that touch the active node
-      const findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
+      if (editorExperiment('platform_editor_controls', 'control')) {
+        // Find the newly minted node decs that touch the active node
+        const findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
 
-      // Find the specific dec that the active node corresponds to
-      const nodeDecsAtActivePos = findNewNodeDecs.filter(dec => (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos);
+        // Find the specific dec that the active node corresponds to
+        const nodeDecsAtActivePos = findNewNodeDecs.filter(dec => (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos);
 
-      // If multiple decorations at the active node pos, we want the last one
-      const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
+        // If multiple decorations at the active node pos, we want the last one
+        const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
 
-      // Update the active node anchor-name and type for accurate positioning
-      if (nodeDecAtActivePos) {
-        isActiveNodeModified = true;
-        latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
-        latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+        // Update the active node anchor-name and type for accurate positioning
+        if (nodeDecAtActivePos) {
+          isActiveNodeModified = true;
+          latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+        }
+      } else {
+        const nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
+        const rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
+        if (nodeDecAtActivePos || rootNodeDecAtActivePos) {
+          isActiveNodeModified = true;
+        }
+
+        // Update the active node anchor-name and type for accurate positioning
+        if (nodeDecAtActivePos) {
+          latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+        }
+        if (rootNodeDecAtActivePos) {
+          latestActiveNode.rootAnchorName = rootNodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.rootNodeType = rootNodeDecAtActivePos.spec.nodeType;
+        }
       }
     }
   }

package/dist/es2019/ui/global-styles.js

@@ -178,18 +178,6 @@ const topLevelNodeMarginStyles = css({
     }
   }
 });
-
-// when quick insert is rendered there are 2 widgets before the first block node
-const topLevelNodeMarginWithQuickInsertStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .ProseMirror-widget:nth-child(-n + 2) + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:nth-child(-n + 2) + *:not([data-layout-section="true"])': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginTop: '0 !important'
-    }
-  }
-});
 const withDividerInPanelStyleFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`${dividerBodiedInCustomPanelWithNoIconSelector}`]: {
@@ -272,6 +260,6 @@ const blockCardWithoutLayout = css({
 });
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, editorExperiment('platform_editor_controls', 'variant1') ? topLevelNodeMarginWithQuickInsertStyles : topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
   });
 };

package/dist/es2019/ui/quick-insert-button.js

@@ -4,7 +4,7 @@ import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import AddIcon from '@atlaskit/icon/utility/add';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
@@ -139,8 +139,7 @@ export const TypeAheadControl = ({
       xcss: [containerStaticStyles]
     }, /*#__PURE__*/React.createElement(Tooltip, {
       content: /*#__PURE__*/React.createElement(ToolTipContent, {
-        description: formatMessage(messages.insert),
-        shortcutOverride: "/"
+        description: formatMessage(messages.insert)
       })
     }, /*#__PURE__*/React.createElement(Pressable, {
       type: "button",
@@ -167,9 +166,8 @@ export const TypeAheadControl = ({
         }
         api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
       }
-    }, /*#__PURE__*/React.createElement(EditorAddIcon, {
-      label: "add",
-      size: "medium"
+    }, /*#__PURE__*/React.createElement(AddIcon, {
+      label: "add"
     }))))
   );
 };

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

@@ -91,7 +91,9 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
         return shouldDescend; //skip over, don't consider it a valid depth
       }
     }
-    var anchorStyles = "anchor-name: ".concat(anchorName, ";");
+    var anchorStyles = pos === 0 && editorExperiment('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
+    // we're rendering quick insert button and drag handle. For now override margin-top to 0
+    "anchor-name: ".concat(anchorName, ";margin-top:0px;") : "anchor-name: ".concat(anchorName, ";");
     decs.push(Decoration.node(pos, pos + node.nodeSize, _defineProperty(_defineProperty(_defineProperty({
       style: anchorStyles
     }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -13,6 +13,7 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
   return Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
     element.contentEditable = 'false';
+    element.setAttribute('data-blocks-quick-insert-container', 'true');
     nodeViewPortalProviderAPI.render(function () {
       return /*#__PURE__*/createElement(TypeAheadControl, {
         api: api,

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

@@ -159,6 +159,19 @@ export var getDecorations = function getDecorations(state) {
   var _key$getState;
   return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
 };
+var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
+  // Find the newly minted node decs that touch the active node
+  var findNewNodeDecs = findNodeDecs(decorations, pos - 1, to);
+
+  // Find the specific dec that the active node corresponds to
+  var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
+    return (dec === null || dec === void 0 ? void 0 : dec.from) === pos;
+  });
+
+  // If multiple decorations at the active node pos, we want the last one
+  var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
+  return nodeDecAtActivePos;
+};
 export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
   var _meta$multiSelectDnD, _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
@@ -182,14 +195,28 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     if (activeNode) {
       var mappedPos = tr.mapping.mapResult(activeNode.pos);
       isActiveNodeDeleted = mappedPos.deleted;
-      activeNode = {
-        pos: mappedPos.pos,
-        anchorName: activeNode.anchorName,
-        nodeType: activeNode.nodeType,
-        rootPos: activeNode.rootPos,
-        rootAnchorName: activeNode.rootAnchorName,
-        rootNodeType: activeNode.rootNodeType
-      };
+      if (editorExperiment('platform_editor_controls', 'control')) {
+        activeNode = {
+          pos: mappedPos.pos,
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType
+        };
+      } else {
+        var _mappedRootPos$pos, _mappedRootPos;
+        // for editor controls, remap the rootPos as well
+        var mappedRootPos;
+        if (activeNode.rootPos !== undefined) {
+          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos);
+        }
+        activeNode = {
+          pos: mappedPos.pos,
+          anchorName: activeNode.anchorName,
+          nodeType: activeNode.nodeType,
+          rootPos: (_mappedRootPos$pos = (_mappedRootPos = mappedRootPos) === null || _mappedRootPos === void 0 ? void 0 : _mappedRootPos.pos) !== null && _mappedRootPos$pos !== void 0 ? _mappedRootPos$pos : activeNode.rootPos,
+          rootAnchorName: activeNode.rootAnchorName,
+          rootNodeType: activeNode.rootNodeType
+        };
+      }
     }
     if (multiSelectDnD && flags.isMultiSelectEnabled) {
       multiSelectDnD.anchor = tr.mapping.map(multiSelectDnD.anchor);
@@ -222,22 +249,40 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     var newNodeDecs = nodeDecorations(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
     if (latestActiveNode && !isActiveNodeDeleted) {
-      // Find the newly minted node decs that touch the active node
-      var findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
+      if (editorExperiment('platform_editor_controls', 'control')) {
+        // Find the newly minted node decs that touch the active node
+        var findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
 
-      // Find the specific dec that the active node corresponds to
-      var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
-        return (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos;
-      });
+        // Find the specific dec that the active node corresponds to
+        var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
+          return (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos;
+        });
 
-      // If multiple decorations at the active node pos, we want the last one
-      var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
+        // If multiple decorations at the active node pos, we want the last one
+        var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
 
-      // Update the active node anchor-name and type for accurate positioning
-      if (nodeDecAtActivePos) {
-        isActiveNodeModified = true;
-        latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
-        latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+        // Update the active node anchor-name and type for accurate positioning
+        if (nodeDecAtActivePos) {
+          isActiveNodeModified = true;
+          latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+        }
+      } else {
+        var _nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
+        var rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
+        if (_nodeDecAtActivePos || rootNodeDecAtActivePos) {
+          isActiveNodeModified = true;
+        }
+
+        // Update the active node anchor-name and type for accurate positioning
+        if (_nodeDecAtActivePos) {
+          latestActiveNode.anchorName = _nodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.nodeType = _nodeDecAtActivePos.spec.nodeType;
+        }
+        if (rootNodeDecAtActivePos) {
+          latestActiveNode.rootAnchorName = rootNodeDecAtActivePos.spec.anchorName;
+          latestActiveNode.rootNodeType = rootNodeDecAtActivePos.spec.nodeType;
+        }
       }
     }
   }

package/dist/esm/ui/global-styles.js

@@ -148,18 +148,6 @@ var topLevelNodeMarginStyles = css({
     }
   }
 });
-
-// when quick insert is rendered there are 2 widgets before the first block node
-var topLevelNodeMarginWithQuickInsertStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .ProseMirror-widget:nth-child(-n + 2) + .ProseMirror-gapcursor + *:not([data-layout-section="true"]), > .ProseMirror-widget:nth-child(-n + 2) + *:not([data-layout-section="true"])': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginTop: '0 !important'
-    }
-  }
-});
 var withDividerInPanelStyleFix = css(_defineProperty({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   marginTop: '0 !important'
@@ -221,6 +209,6 @@ var blockCardWithoutLayout = css({
 });
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, editorExperiment('platform_editor_controls', 'variant1') ? topLevelNodeMarginWithQuickInsertStyles : topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
   });
 };

package/dist/esm/ui/quick-insert-button.js

@@ -5,7 +5,7 @@ import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import AddIcon from '@atlaskit/icon/utility/add';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
@@ -141,8 +141,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       xcss: [containerStaticStyles]
     }, /*#__PURE__*/React.createElement(Tooltip, {
       content: /*#__PURE__*/React.createElement(ToolTipContent, {
-        description: formatMessage(messages.insert),
-        shortcutOverride: "/"
+        description: formatMessage(messages.insert)
       })
     }, /*#__PURE__*/React.createElement(Pressable, {
       type: "button",
@@ -168,9 +167,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
         }
         api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
       }
-    }, /*#__PURE__*/React.createElement(EditorAddIcon, {
-      label: "add",
-      size: "medium"
+    }, /*#__PURE__*/React.createElement(AddIcon, {
+      label: "add"
     }))))
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.1.9",
+	"version": "3.2.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,10 +32,10 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^100.4.0",
+		"@atlaskit/adf-schema": "^47.6.0",
+		"@atlaskit/editor-common": "^100.5.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
-		"@atlaskit/editor-plugin-analytics": "^2.0.0",
+		"@atlaskit/editor-plugin-analytics": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.3.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.0.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.3.0",
+		"@atlaskit/tmp-editor-statsig": "^3.4.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",