@atlaskit/editor-plugin-block-controls 3.8.2 → 3.8.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.4
+
+### Patch Changes
+
+- [#136942](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136942)
+  [`47faad73d7f6c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47faad73d7f6c) -
+  Add visibility container which wraps both block control widgets to control their visibility
+
+## 3.8.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.8.2
 
 ### Patch Changes

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

@@ -11,6 +11,7 @@ var _bindEventListener = require("bind-event-listener");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
@@ -92,18 +93,31 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     // 		key,
     // 	);
 
-    _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
-      view: view,
-      api: api,
-      formatMessage: formatMessage,
-      getPos: getPos,
-      anchorName: anchorName,
-      nodeType: nodeType,
-      handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode,
-      anchorRectCache: anchorRectCache
-    }), element);
-    //}
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility')) {
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandleWithVisibility, {
+        view: view,
+        api: api,
+        formatMessage: formatMessage,
+        getPos: getPos,
+        anchorName: anchorName,
+        nodeType: nodeType,
+        handleOptions: handleOptions,
+        isTopLevelNode: isTopLevelNode,
+        anchorRectCache: anchorRectCache
+      }), element);
+    } else {
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+        view: view,
+        api: api,
+        formatMessage: formatMessage,
+        getPos: getPos,
+        anchorName: anchorName,
+        nodeType: nodeType,
+        handleOptions: handleOptions,
+        isTopLevelNode: isTopLevelNode,
+        anchorRectCache: anchorRectCache
+      }), element);
+    }
     return element;
   }, {
     side: -1,

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

@@ -8,6 +8,7 @@ exports.quickInsertButtonDecoration = exports.findQuickInsertInsertButtonDecorat
 var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _quickInsertButton = require("../ui/quick-insert-button");
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
@@ -22,19 +23,37 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
-    nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.TypeAheadControl, {
-        api: api,
-        getPos: getPos,
-        formatMessage: formatMessage,
-        view: view,
-        nodeType: nodeType,
-        anchorName: anchorName,
-        rootAnchorName: rootAnchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
-        anchorRectCache: anchorRectCache
-      });
-    }, element, key);
+
+    // all changes already under experiment
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility')) {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.QuickInsertWithVisibility, {
+          api: api,
+          getPos: getPos,
+          formatMessage: formatMessage,
+          view: view,
+          nodeType: nodeType,
+          anchorName: anchorName,
+          rootAnchorName: rootAnchorName,
+          rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+          anchorRectCache: anchorRectCache
+        });
+      }, element, key);
+    } else {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/(0, _react.createElement)(_quickInsertButton.TypeAheadControl, {
+          api: api,
+          getPos: getPos,
+          formatMessage: formatMessage,
+          view: view,
+          nodeType: nodeType,
+          anchorName: anchorName,
+          rootAnchorName: rootAnchorName,
+          rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+          anchorRectCache: anchorRectCache
+        });
+      }, element, key);
+    }
     return element;
   }, {
     side: -2,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DragHandle = void 0;
+exports.DragHandleWithVisibility = exports.DragHandle = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -35,6 +35,7 @@ var _selection = require("../pm-plugins/utils/selection");
 var _consts = require("./consts");
 var _dragPreview = require("./drag-preview");
 var _anchorName = require("./utils/anchor-name");
+var _visibilityContainer = require("./visibility-container");
 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; } /**
  * @jsxRuntime classic
@@ -782,4 +783,24 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyRender : render;
+};
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
+  var view = _ref8.view,
+    api = _ref8.api,
+    formatMessage = _ref8.formatMessage,
+    getPos = _ref8.getPos,
+    anchorName = _ref8.anchorName,
+    nodeType = _ref8.nodeType,
+    anchorRectCache = _ref8.anchorRectCache;
+  return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
+    api: api
+  }, (0, _react2.jsx)(DragHandle, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    anchorName: anchorName,
+    nodeType: nodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TypeAheadControl = void 0;
+exports.TypeAheadControl = exports.QuickInsertWithVisibility = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -25,6 +25,7 @@ var _consts = require("./consts");
 var _anchorName = require("./utils/anchor-name");
 var _documentChecks = require("./utils/document-checks");
 var _editorCommands = require("./utils/editor-commands");
+var _visibilityContainer = require("./visibility-container");
 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; }
@@ -114,6 +115,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     rootNodeType = _ref.rootNodeType,
     anchorRectCache = _ref.anchorRectCache;
   var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
+  // remove when platform_editor_controls_patch_1 is removed
   var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
   var _useState = (0, _react.useState)({
       display: 'none'
@@ -267,21 +269,51 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       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],
+      xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles,
+      // remove disabledStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+      isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? disabledStyles : undefined],
       onClick: handleQuickInsert,
       onMouseDown: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
-      isDisabled: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+      isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && isTypeAheadOpen
     }, /*#__PURE__*/_react.default.createElement(_add.default, {
       label: "add",
-      color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+      color:
+      // remove color.icon.disabled when platform_editor_controls_patch_1 is removed
+      isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? "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]
+    xcss: [containerStaticStyles,
+    // remove disabledContainerStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledContainerStyles]
   }, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: [tooltipContainerStyles]
   }, tooltipPressable()) : tooltipPressable());
+};
+var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref4) {
+  var view = _ref4.view,
+    api = _ref4.api,
+    formatMessage = _ref4.formatMessage,
+    getPos = _ref4.getPos,
+    nodeType = _ref4.nodeType,
+    anchorName = _ref4.anchorName,
+    rootAnchorName = _ref4.rootAnchorName,
+    rootNodeType = _ref4.rootNodeType,
+    anchorRectCache = _ref4.anchorRectCache;
+  return /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+    api: api
+  }, /*#__PURE__*/_react.default.createElement(TypeAheadControl, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    nodeType: nodeType,
+    anchorName: anchorName,
+    rootAnchorName: rootAnchorName,
+    rootNodeType: rootNodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

package/dist/cjs/ui/visibility-container.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VisibilityContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _primitives = require("@atlaskit/primitives");
+var baseStyles = (0, _primitives.xcss)({
+  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
+});
+var visibleStyles = (0, _primitives.xcss)({
+  opacity: 1,
+  visibility: 'visible'
+});
+var hiddenStyles = (0, _primitives.xcss)({
+  opacity: 0,
+  // CONFIRM this change doesnt cause this issue to regress https://product-fabric.atlassian.net/browse/ED-24136
+  visibility: 'hidden'
+});
+var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
+  var api = _ref.api,
+    children = _ref.children;
+  var isOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [baseStyles, isOpen ? hiddenStyles : visibleStyles]
+  }, children);
+};

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

@@ -3,8 +3,9 @@ import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DragHandle } from '../ui/drag-handle';
+import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
 export const emptyParagraphNodeDecorations = () => {
   const anchorName = `--node-anchor-paragraph-0`;
@@ -83,18 +84,31 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     // 		key,
     // 	);
 
-    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-      view,
-      api,
-      formatMessage,
-      getPos,
-      anchorName,
-      nodeType,
-      handleOptions,
-      isTopLevelNode,
-      anchorRectCache
-    }), element);
-    //}
+    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility')) {
+      ReactDOM.render( /*#__PURE__*/createElement(DragHandleWithVisibility, {
+        view,
+        api,
+        formatMessage,
+        getPos,
+        anchorName,
+        nodeType,
+        handleOptions,
+        isTopLevelNode,
+        anchorRectCache
+      }), element);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+        view,
+        api,
+        formatMessage,
+        getPos,
+        anchorName,
+        nodeType,
+        handleOptions,
+        isTopLevelNode,
+        anchorRectCache
+      }), element);
+    }
     return element;
   }, {
     side: -1,

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

@@ -1,7 +1,8 @@
 import { createElement } from 'react';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { TypeAheadControl } from '../ui/quick-insert-button';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
@@ -13,17 +14,33 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
-    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(TypeAheadControl, {
-      api,
-      getPos,
-      formatMessage,
-      view,
-      nodeType,
-      anchorName,
-      rootAnchorName,
-      rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
-      anchorRectCache
-    }), element, key);
+
+    // all changes already under experiment
+    if (fg('platform_editor_controls_widget_visibility')) {
+      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(QuickInsertWithVisibility, {
+        api,
+        getPos,
+        formatMessage,
+        view,
+        nodeType,
+        anchorName,
+        rootAnchorName,
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+        anchorRectCache
+      }), element, key);
+    } else {
+      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(TypeAheadControl, {
+        api,
+        getPos,
+        formatMessage,
+        view,
+        nodeType,
+        anchorName,
+        rootAnchorName,
+        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+        anchorRectCache
+      }), element, key);
+    }
     return element;
   }, {
     side: -2,

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

@@ -32,6 +32,7 @@ import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from
 import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 import { refreshAnchorName } from './utils/anchor-name';
+import { VisibilityContainer } from './visibility-container';
 const iconWrapperStyles = xcss({
   display: 'flex',
   justifyContent: 'center',
@@ -761,4 +762,25 @@ export const DragHandle = ({
   const stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   const render = isTooltip ? buttonWithTooltip() : renderButton();
   return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
+};
+export const DragHandleWithVisibility = ({
+  view,
+  api,
+  formatMessage,
+  getPos,
+  anchorName,
+  nodeType,
+  anchorRectCache
+}) => {
+  return jsx(VisibilityContainer, {
+    api: api
+  }, jsx(DragHandle, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    anchorName: anchorName,
+    nodeType: nodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

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

@@ -15,6 +15,7 @@ import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_I
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { createNewLine } from './utils/editor-commands';
+import { VisibilityContainer } from './visibility-container';
 const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
 const buttonStyles = xcss({
   boxSizing: 'border-box',
@@ -101,6 +102,7 @@ export const TypeAheadControl = ({
   anchorRectCache
 }) => {
   const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  // remove when platform_editor_controls_patch_1 is removed
   const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
   const [positionStyles, setPositionStyles] = useState({
     display: 'none'
@@ -252,20 +254,51 @@ export const TypeAheadControl = ({
     testId: "editor-quick-insert-button",
     type: "button",
     "aria-label": formatMessage(messages.insert),
-    xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
+    xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles,
+    // remove disabledStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') ? disabledStyles : undefined],
     onClick: handleQuickInsert,
     onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
-    isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+    isDisabled: !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && isTypeAheadOpen
   }, /*#__PURE__*/React.createElement(AddIcon, {
     label: "add",
-    color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+    color:
+    // remove color.icon.disabled when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
   })));
   return /*#__PURE__*/React.createElement(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
-    xcss: [containerStaticStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
+    xcss: [containerStaticStyles,
+    // remove disabledContainerStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
   }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
     xcss: [tooltipContainerStyles]
   }, tooltipPressable()) : tooltipPressable());
+};
+export const QuickInsertWithVisibility = ({
+  view,
+  api,
+  formatMessage,
+  getPos,
+  nodeType,
+  anchorName,
+  rootAnchorName,
+  rootNodeType,
+  anchorRectCache
+}) => {
+  return /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api
+  }, /*#__PURE__*/React.createElement(TypeAheadControl, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    nodeType: nodeType,
+    anchorName: anchorName,
+    rootAnchorName: rootAnchorName,
+    rootNodeType: rootNodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

package/dist/es2019/ui/visibility-container.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { Box, xcss } from '@atlaskit/primitives';
+const baseStyles = xcss({
+  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
+});
+const visibleStyles = xcss({
+  opacity: 1,
+  visibility: 'visible'
+});
+const hiddenStyles = xcss({
+  opacity: 0,
+  // CONFIRM this change doesnt cause this issue to regress https://product-fabric.atlassian.net/browse/ED-24136
+  visibility: 'hidden'
+});
+export const VisibilityContainer = ({
+  api,
+  children
+}) => {
+  const isOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [baseStyles, isOpen ? hiddenStyles : visibleStyles]
+  }, children);
+};

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

@@ -4,8 +4,9 @@ import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DragHandle } from '../ui/drag-handle';
+import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
 export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
@@ -85,18 +86,31 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     // 		key,
     // 	);
 
-    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-      view: view,
-      api: api,
-      formatMessage: formatMessage,
-      getPos: getPos,
-      anchorName: anchorName,
-      nodeType: nodeType,
-      handleOptions: handleOptions,
-      isTopLevelNode: isTopLevelNode,
-      anchorRectCache: anchorRectCache
-    }), element);
-    //}
+    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility')) {
+      ReactDOM.render( /*#__PURE__*/createElement(DragHandleWithVisibility, {
+        view: view,
+        api: api,
+        formatMessage: formatMessage,
+        getPos: getPos,
+        anchorName: anchorName,
+        nodeType: nodeType,
+        handleOptions: handleOptions,
+        isTopLevelNode: isTopLevelNode,
+        anchorRectCache: anchorRectCache
+      }), element);
+    } else {
+      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+        view: view,
+        api: api,
+        formatMessage: formatMessage,
+        getPos: getPos,
+        anchorName: anchorName,
+        nodeType: nodeType,
+        handleOptions: handleOptions,
+        isTopLevelNode: isTopLevelNode,
+        anchorRectCache: anchorRectCache
+      }), element);
+    }
     return element;
   }, {
     side: -1,

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

@@ -1,7 +1,8 @@
 import { createElement } from 'react';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { TypeAheadControl } from '../ui/quick-insert-button';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
   return decorations.find(from, to, function (spec) {
@@ -15,19 +16,37 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
-    nodeViewPortalProviderAPI.render(function () {
-      return /*#__PURE__*/createElement(TypeAheadControl, {
-        api: api,
-        getPos: getPos,
-        formatMessage: formatMessage,
-        view: view,
-        nodeType: nodeType,
-        anchorName: anchorName,
-        rootAnchorName: rootAnchorName,
-        rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
-        anchorRectCache: anchorRectCache
-      });
-    }, element, key);
+
+    // all changes already under experiment
+    if (fg('platform_editor_controls_widget_visibility')) {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/createElement(QuickInsertWithVisibility, {
+          api: api,
+          getPos: getPos,
+          formatMessage: formatMessage,
+          view: view,
+          nodeType: nodeType,
+          anchorName: anchorName,
+          rootAnchorName: rootAnchorName,
+          rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+          anchorRectCache: anchorRectCache
+        });
+      }, element, key);
+    } else {
+      nodeViewPortalProviderAPI.render(function () {
+        return /*#__PURE__*/createElement(TypeAheadControl, {
+          api: api,
+          getPos: getPos,
+          formatMessage: formatMessage,
+          view: view,
+          nodeType: nodeType,
+          anchorName: anchorName,
+          rootAnchorName: rootAnchorName,
+          rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
+          anchorRectCache: anchorRectCache
+        });
+      }, element, key);
+    }
     return element;
   }, {
     side: -2,

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

@@ -37,6 +37,7 @@ import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from
 import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 import { refreshAnchorName } from './utils/anchor-name';
+import { VisibilityContainer } from './visibility-container';
 var iconWrapperStyles = xcss({
   display: 'flex',
   justifyContent: 'center',
@@ -779,4 +780,24 @@ export var DragHandle = function DragHandle(_ref) {
   var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
+};
+export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
+  var view = _ref8.view,
+    api = _ref8.api,
+    formatMessage = _ref8.formatMessage,
+    getPos = _ref8.getPos,
+    anchorName = _ref8.anchorName,
+    nodeType = _ref8.nodeType,
+    anchorRectCache = _ref8.anchorRectCache;
+  return jsx(VisibilityContainer, {
+    api: api
+  }, jsx(DragHandle, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    anchorName: anchorName,
+    nodeType: nodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

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

@@ -19,6 +19,7 @@ import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_I
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { createNewLine } from './utils/editor-commands';
+import { VisibilityContainer } from './visibility-container';
 var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
 var buttonStyles = xcss({
   boxSizing: 'border-box',
@@ -104,6 +105,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     rootNodeType = _ref.rootNodeType,
     anchorRectCache = _ref.anchorRectCache;
   var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  // remove when platform_editor_controls_patch_1 is removed
   var isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
   var _useState = useState({
       display: 'none'
@@ -257,21 +259,51 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       testId: "editor-quick-insert-button",
       type: "button",
       "aria-label": formatMessage(messages.insert),
-      xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledStyles],
+      xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles,
+      // remove disabledStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+      isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') ? disabledStyles : undefined],
       onClick: handleQuickInsert,
       onMouseDown: fg('platform_editor_controls_patch_1') ? undefined : handleMouseDown,
-      isDisabled: fg('platform_editor_controls_patch_1') ? isTypeAheadOpen : undefined
+      isDisabled: !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && isTypeAheadOpen
     }, /*#__PURE__*/React.createElement(AddIcon, {
       label: "add",
-      color: isTypeAheadOpen ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
+      color:
+      // remove color.icon.disabled when platform_editor_controls_patch_1 is removed
+      isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
     })));
   };
   return /*#__PURE__*/React.createElement(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
-    xcss: [containerStaticStyles, isTypeAheadOpen && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
+    xcss: [containerStaticStyles,
+    // remove disabledContainerStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
+    isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
   }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
     xcss: [tooltipContainerStyles]
   }, tooltipPressable()) : tooltipPressable());
+};
+export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref4) {
+  var view = _ref4.view,
+    api = _ref4.api,
+    formatMessage = _ref4.formatMessage,
+    getPos = _ref4.getPos,
+    nodeType = _ref4.nodeType,
+    anchorName = _ref4.anchorName,
+    rootAnchorName = _ref4.rootAnchorName,
+    rootNodeType = _ref4.rootNodeType,
+    anchorRectCache = _ref4.anchorRectCache;
+  return /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api
+  }, /*#__PURE__*/React.createElement(TypeAheadControl, {
+    view: view,
+    api: api,
+    formatMessage: formatMessage,
+    getPos: getPos,
+    nodeType: nodeType,
+    anchorName: anchorName,
+    rootAnchorName: rootAnchorName,
+    rootNodeType: rootNodeType,
+    anchorRectCache: anchorRectCache
+  }));
 };

package/dist/esm/ui/visibility-container.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { Box, xcss } from '@atlaskit/primitives';
+var baseStyles = xcss({
+  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
+});
+var visibleStyles = xcss({
+  opacity: 1,
+  visibility: 'visible'
+});
+var hiddenStyles = xcss({
+  opacity: 0,
+  // CONFIRM this change doesnt cause this issue to regress https://product-fabric.atlassian.net/browse/ED-24136
+  visibility: 'hidden'
+});
+export var VisibilityContainer = function VisibilityContainer(_ref) {
+  var api = _ref.api,
+    children = _ref.children;
+  var isOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [baseStyles, isOpen ? hiddenStyles : visibleStyles]
+  }, children);
+};

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

@@ -4,7 +4,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
-export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: {
+type DragHandleProps = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     formatMessage: IntlShape['formatMessage'];
@@ -12,6 +12,9 @@ export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
-    isTopLevelNode?: boolean | undefined;
-    anchorRectCache?: AnchorRectCache | undefined;
-}) => jsx.JSX.Element;
+    isTopLevelNode?: boolean;
+    anchorRectCache?: AnchorRectCache;
+};
+export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
+export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
+export {};

package/dist/types/ui/quick-insert-button.d.ts

@@ -16,4 +16,5 @@ type Props = {
     anchorRectCache?: AnchorRectCache;
 };
 export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
+export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
 export {};

package/dist/types/ui/visibility-container.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { BlockControlsPlugin } from '../blockControlsPluginType';
+interface VisibilityContainerProps {
+    api?: ExtractInjectionAPI<BlockControlsPlugin>;
+    children: React.ReactNode;
+}
+export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => React.JSX.Element;
+export {};

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

@@ -4,7 +4,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import { AnchorRectCache } from '../pm-plugins/utils/anchor-utils';
-export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: {
+type DragHandleProps = {
     view: EditorView;
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     formatMessage: IntlShape['formatMessage'];
@@ -12,6 +12,9 @@ export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName
     anchorName: string;
     nodeType: string;
     handleOptions?: HandleOptions;
-    isTopLevelNode?: boolean | undefined;
-    anchorRectCache?: AnchorRectCache | undefined;
-}) => jsx.JSX.Element;
+    isTopLevelNode?: boolean;
+    anchorRectCache?: AnchorRectCache;
+};
+export declare const DragHandle: ({ view, api, formatMessage, getPos, anchorName, nodeType, handleOptions, isTopLevelNode, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
+export declare const DragHandleWithVisibility: ({ view, api, formatMessage, getPos, anchorName, nodeType, anchorRectCache, }: DragHandleProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/quick-insert-button.d.ts

@@ -16,4 +16,5 @@ type Props = {
     anchorRectCache?: AnchorRectCache;
 };
 export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
+export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/visibility-container.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { BlockControlsPlugin } from '../blockControlsPluginType';
+interface VisibilityContainerProps {
+    api?: ExtractInjectionAPI<BlockControlsPlugin>;
+    children: React.ReactNode;
+}
+export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.8.2",
+	"version": "3.8.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.18.0",
+		"@atlaskit/editor-common": "^103.0.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/primitives": "^14.3.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.6.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -173,6 +173,9 @@
 		},
 		"platform_editor_controls_patch_2": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_widget_visibility": {
+			"type": "boolean"
 		}
 	}
 }