@atlaskit/editor-plugin-block-controls 3.7.1 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.0
+
+### Minor Changes
+
+- [#132443](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132443)
+  [`d4f6243b5f21a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4f6243b5f21a) -
+  [ux] Add sticky controls under experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.7.1
 
 ### Patch Changes

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

@@ -28,7 +28,7 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
     return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
   });
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
   (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   var unbind;
   var key = (0, _uuid.default)();
@@ -100,7 +100,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       anchorName: anchorName,
       nodeType: nodeType,
       handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode
+      isTopLevelNode: isTopLevelNode,
+      anchorRectCache: anchorRectCache
     }), element);
     //}
     return element;

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

@@ -15,7 +15,7 @@ var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonD
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
-var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) {
+var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
   var key = (0, _uuid.default)();
   return _view.Decoration.widget(rootPos, function (view, getPos) {
     var element = document.createElement('span');
@@ -31,7 +31,8 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
         nodeType: nodeType,
         anchorName: anchorName,
         rootAnchorName: rootAnchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+        anchorRectCache: anchorRectCache
       });
     }, element, key);
     return element;

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

@@ -355,14 +355,14 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
       var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
       decorations = decorations.remove(_oldHandle);
-      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
+      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
       var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
       var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
-      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
+      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType, anchorRectCache);
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/cjs/pm-plugins/utils/drag-handle-positions.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTopPosition = exports.getLeftPosition = void 0;
+exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../../ui/consts");
+var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
     return 'auto';
@@ -48,4 +50,26 @@ var getLeftPosition = exports.getLeftPosition = function getLeftPosition(dom, ty
   var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
   return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - (0, _consts.dragHandleGap)(type, parentType) - _consts.DRAG_HANDLE_WIDTH, "px");
+};
+
+// anchorRectCache seems to have a 100% cache miss rate
+var getNodeHeight = exports.getNodeHeight = function getNodeHeight(dom, anchor, anchorRectCache) {
+  return (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
+};
+var shouldBeSticky = exports.shouldBeSticky = function shouldBeSticky(nodeType) {
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
+};
+var getControlBottomCSSValue = exports.getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    bottom: 'unset'
+  } : {
+    bottom: "anchor(".concat(anchor, " end)")
+  };
+};
+var getControlHeightCSSValue = exports.getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeight, isSticky, isTopLevelNode, fallbackPxHeight, isLayoutColumn) {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    height: 'unset'
+  } : {
+    height: "".concat(nodeHeight || fallbackPxHeight, "px")
+  };
 };

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

@@ -50,6 +50,43 @@ var dragHandleColor = (0, _react2.css)({
   color: "var(--ds-icon-subtle, #626F86)"
 });
 var dragHandleButtonStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: _consts.DRAG_HANDLE_HEIGHT,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: _consts.DRAG_HANDLE_WIDTH,
+  border: 'none',
+  background: 'transparent',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
+  // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
+  color: "var(--ds-icon, #44546F)",
+  cursor: 'grab',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: _consts.DRAG_HANDLE_ZINDEX,
+  outline: 'none',
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+  },
+  '&:active': {
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+  },
+  '&:focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  },
+  '&:disabled': {
+    color: "var(--ds-icon-disabled, #8993A4)",
+    backgroundColor: 'transparent'
+  },
+  '&:hover:disabled': {
+    backgroundColor: "var(--ds-background-disabled, transparent)"
+  }
+});
+var dragHandleButtonStylesOld = (0, _react2.css)({
   position: 'absolute',
   padding: "var(--ds-space-025, 2px)".concat(" 0"),
   boxSizing: 'border-box',
@@ -88,6 +125,16 @@ var dragHandleButtonStyles = (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var dragHandleContainerStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  boxSizing: 'border-box',
+  zIndex: 'card'
+});
+var controlContainerStyles = (0, _primitives.xcss)({
+  top: '0',
+  position: 'sticky',
+  zIndex: 'card'
+});
 var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
   '&::selection': {
     backgroundColor: 'transparent'
@@ -151,7 +198,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     nodeType = _ref.nodeType,
     handleOptions = _ref.handleOptions,
     _ref$isTopLevelNode = _ref.isTopLevelNode,
-    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode;
+    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
+    anchorRectCache = _ref.anchorRectCache;
   var start = getPos();
   var buttonRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(768),
@@ -490,17 +538,20 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
     if (supportsAnchor) {
-      return {
+      var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(anchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(anchorName, " right) + anchor(").concat(anchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
         top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(anchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
-      };
+      }, bottom);
     }
-    return {
+    var height = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, anchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
-    };
-  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates, getPos, isLayoutColumn]);
+    }, height);
+  }, [anchorName, view.dom, view.state.doc, nodeType, blockCardWidth, macroInteractionUpdates, isTopLevelNode, isLayoutColumn, getPos, anchorRectCache]);
   var _useState7 = (0, _react.useState)({
       display: 'none'
     }),
@@ -637,14 +688,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       (0, _react2.jsx)("button", {
         type: "button",
-        css: [dragHandleButtonStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
+        css: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
         _browser.browser.gecko && (0, _platformFeatureFlags.fg)('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: positionStyles,
+        style: !(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && positionStyles || {},
         onClick: handleOnClick,
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown
@@ -668,17 +719,60 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       })))
     );
   };
-  return !dragHandleDisabled && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
-    content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
-      helpDescriptors: helpDescriptors
-    }),
-    ignoreTooltipPointerEvents: true,
-    position: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'top' : undefined,
-    onShow: function onShow() {
-      var _api$accessibilityUti;
-      api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
-        priority: 'important'
-      });
-    }
-  }, renderButton()) : renderButton();
+  var stickyWithTooltip = function stickyWithTooltip() {
+    return (0, _react2.jsx)(_primitives.Box
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    , {
+      style: positionStyles,
+      xcss: [dragHandleContainerStyles],
+      as: "span",
+      testId: "block-ctrl-drag-handle-container"
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: [controlContainerStyles],
+      as: "span"
+    }, (0, _react2.jsx)(_tooltip.default, {
+      content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
+        helpDescriptors: helpDescriptors
+      }),
+      ignoreTooltipPointerEvents: true,
+      position: 'top',
+      onShow: function onShow() {
+        var _api$accessibilityUti;
+        api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
+          priority: 'important'
+        });
+      }
+    }, renderButton())));
+  };
+  var stickyWithoutTooltip = function stickyWithoutTooltip() {
+    return (0, _react2.jsx)(_primitives.Box
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    , {
+      style: positionStyles,
+      xcss: [dragHandleContainerStyles],
+      as: "span",
+      testId: "block-ctrl-drag-handle-container"
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: [controlContainerStyles],
+      as: "span"
+    }, renderButton()));
+  };
+  var buttonWithTooltip = function buttonWithTooltip() {
+    return (0, _react2.jsx)(_tooltip.default, {
+      content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
+        helpDescriptors: helpDescriptors
+      }),
+      ignoreTooltipPointerEvents: true,
+      onShow: function onShow() {
+        var _api$accessibilityUti2;
+        api === null || api === void 0 || (_api$accessibilityUti2 = api.accessibilityUtils) === null || _api$accessibilityUti2 === void 0 || _api$accessibilityUti2.actions.ariaNotify(message, {
+          priority: 'important'
+        });
+      }
+    }, renderButton());
+  };
+  var isTooltip = !dragHandleDisabled && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873');
+  var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
+  var render = isTooltip ? buttonWithTooltip() : renderButton();
+  return (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyRender : render;
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TypeAheadControl = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
@@ -25,6 +26,8 @@ var _documentChecks = require("./utils/document-checks");
 var _editorCommands = require("./utils/editor-commands");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
 var buttonStyles = (0, _primitives.xcss)({
   boxSizing: 'border-box',
@@ -58,6 +61,31 @@ var disabledStyles = (0, _primitives.xcss)({
     backgroundColor: 'color.background.disabled'
   }
 });
+var stickyButtonStyles = (0, _primitives.xcss)({
+  top: '0',
+  position: 'sticky',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-300, 24px)",
+  width: "var(--ds-space-300, 24px)",
+  border: 'none',
+  backgroundColor: 'color.background.neutral.subtle',
+  borderRadius: '50%',
+  zIndex: 'card',
+  outline: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  },
+  ':focus': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
+  }
+});
 var containerStaticStyles = (0, _primitives.xcss)({
   position: 'absolute',
   zIndex: 'card'
@@ -65,6 +93,11 @@ var containerStaticStyles = (0, _primitives.xcss)({
 var disabledContainerStyles = (0, _primitives.xcss)({
   cursor: 'not-allowed'
 });
+var tooltipContainerStyles = (0, _primitives.xcss)({
+  top: '0',
+  position: 'sticky',
+  zIndex: 'card'
+});
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
@@ -73,8 +106,11 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     api = _ref.api,
     formatMessage = _ref.formatMessage,
     getPos = _ref.getPos,
+    nodeType = _ref.nodeType,
+    anchorName = _ref.anchorName,
     rootAnchorName = _ref.rootAnchorName,
-    rootNodeType = _ref.rootNodeType;
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache;
   var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
   var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
   var _useState = (0, _react.useState)({
@@ -111,17 +147,25 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       }
     }
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
+    var isSticky = (0, _dragHandlePositions.shouldBeSticky)(rootNodeType);
+    var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(rootAnchorName || anchorName, isSticky, true) : {};
     if (supportsAnchor) {
-      return {
+      return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
         top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
-      };
+      }, bottom);
     }
-    return {
+
+    // expensive, calls offsetHeight, guard behind FG
+    var nodeHeight =
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _dragHandlePositions.getNodeHeight)(dom, rootAnchorName || anchorName, anchorRectCache) || 0;
+    var height = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)") : {};
+    return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
       top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType)
-    };
-  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
+    }, height);
+  }, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates, anchorName, anchorRectCache]);
   (0, _react.useEffect)(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
@@ -206,26 +250,31 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       });
     }
   }, [api, view.state]);
+  var tooltipPressable = function tooltipPressable() {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      position: "top",
+      content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        description: formatMessage(_messages.blockControlsMessages.insert)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      testId: "editor-quick-insert-button",
+      type: "button",
+      "aria-label": formatMessage(_messages.blockControlsMessages.insert),
+      xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledStyles],
+      onClick: handleQuickInsert,
+      onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
+      isDisabled: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+    }, /*#__PURE__*/_react.default.createElement(_add.default, {
+      label: "add",
+      color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+    })));
+  };
   return /*#__PURE__*/_react.default.createElement(_primitives.Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
     xcss: [containerStaticStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledContainerStyles]
-  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    position: "top",
-    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
-      description: formatMessage(_messages.blockControlsMessages.insert)
-    })
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    testId: "editor-quick-insert-button",
-    type: "button",
-    "aria-label": formatMessage(_messages.blockControlsMessages.insert),
-    xcss: [buttonStyles, isTypeAheadOpen && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledStyles],
-    onClick: handleQuickInsert,
-    onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
-    isDisabled: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
-  }, /*#__PURE__*/_react.default.createElement(_add.default, {
-    label: "add",
-    color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
-  }))));
+  }, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [tooltipContainerStyles]
+  }, tooltipPressable()) : tooltipPressable());
 };

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

@@ -19,7 +19,7 @@ export const emptyParagraphNodeDecorations = () => {
 export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
-export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions) => {
+export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) => {
   unmountDecorations(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   let unbind;
   const key = uuid();
@@ -91,7 +91,8 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
       anchorName,
       nodeType,
       handleOptions,
-      isTopLevelNode
+      isTopLevelNode,
+      anchorRectCache
     }), element);
     //}
     return element;

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

@@ -6,7 +6,7 @@ const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
 };
-export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType) => {
+export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) => {
   const key = uuid();
   return Decoration.widget(rootPos, (view, getPos) => {
     const element = document.createElement('span');
@@ -21,7 +21,8 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
       nodeType,
       anchorName,
       rootAnchorName,
-      rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType
+      rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+      anchorRectCache
     }), element, key);
     return element;
   }, {

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

@@ -352,14 +352,14 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
       var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       const oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
       decorations = decorations.remove(oldHandle);
-      const handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
+      const handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
       var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
       const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
-      const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
+      const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType, anchorRectCache);
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/es2019/pm-plugins/utils/drag-handle-positions.js

@@ -1,4 +1,6 @@
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
+const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 export const getTopPosition = (dom, type) => {
   if (!dom) {
     return 'auto';
@@ -42,4 +44,24 @@ export const getLeftPosition = (dom, type, innerContainer, macroInteractionUpdat
   const relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
   const leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
   return getComputedStyle(innerContainer).transform === 'none' ? `${innerContainer.offsetLeft + leftAdjustment - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px` : `${innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH}px`;
+};
+
+// anchorRectCache seems to have a 100% cache miss rate
+export const getNodeHeight = (dom, anchor, anchorRectCache) => (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
+export const shouldBeSticky = nodeType => {
+  return editorExperiment('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
+};
+export const getControlBottomCSSValue = (anchor, isSticky, isTopLevelNode, isLayoutColumn) => {
+  return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    bottom: 'unset'
+  } : {
+    bottom: `anchor(${anchor} end)`
+  };
+};
+export const getControlHeightCSSValue = (nodeHeight, isSticky, isTopLevelNode, fallbackPxHeight, isLayoutColumn) => {
+  return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
+    height: 'unset'
+  } : {
+    height: `${nodeHeight || fallbackPxHeight}px`
+  };
 };