@atlaskit/editor-plugin-block-menu 18.0.1 → 18.0.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 18.0.3
+
+### Patch Changes
+
+- [`fc26bfc51dd5c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fc26bfc51dd5c) -
+  Add sparse block-control surface anchors, intersection-driven candidates, and explicit visibility
+  invalidation for registry-backed block controls. Expose registration change subscriptions from the
+  UI control registry model, and refresh cached visibility from suggestion and collapse transaction
+  metadata. Under `platform_editor_block_control_migration`, use native node-anchor identity across
+  Editor and Block Controls, and route expand keyboard focus through the shared Block Controls
+  command. Preserve Show Diff visibility checks in both migration cohorts so block controls stay
+  hidden while a diff is displayed. Keep the block menu closed when a migrated layout-column handle
+  opens the layout menu, and close the layout menu when the selection moves away from its selected
+  columns.
+- Updated dependencies
+
+## 18.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.0.1
 
 ### Patch Changes

package/dist/cjs/blockMenuPlugin.js

@@ -24,7 +24,6 @@ var _flag = require("./ui/flag");
 var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
-  var blockControlMigrationEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
   var registry = (0, _editorActions.createBlockMenuRegistry)();
   var transformSourceRegistry = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_menu_transform_extensions') ? (0, _transformSourceRegistry.createBlockMenuTransformSourceRegistry)() : undefined;
   registry.register((0, _blockMenuComponents.getBlockMenuComponents)({
@@ -134,8 +133,7 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement,
-        useRegistryAnchor: blockControlMigrationEnabled
+        scrollableElement: popupsScrollableElement
       }), /*#__PURE__*/_react.default.createElement(_flag.Flag, {
         api: api
       }));

package/dist/cjs/ui/block-menu.js

@@ -180,8 +180,7 @@ var BlockMenu = function BlockMenu(_ref5) {
     api = _ref5.api,
     mountTo = _ref5.mountTo,
     boundariesElement = _ref5.boundariesElement,
-    scrollableElement = _ref5.scrollableElement,
-    useRegistryAnchor = _ref5.useRegistryAnchor;
+    scrollableElement = _ref5.scrollableElement;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
       var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
@@ -206,7 +205,7 @@ var BlockMenu = function BlockMenu(_ref5) {
     surfaceDragHandle = _React$useState2[0],
     setSurfaceDragHandle = _React$useState2[1];
   _react.default.useLayoutEffect(function () {
-    if (!useRegistryAnchor) {
+    if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
       return;
     }
     var readElement = function readElement() {
@@ -218,7 +217,7 @@ var BlockMenu = function BlockMenu(_ref5) {
         readElement();
       }
     });
-  }, [editorView, useRegistryAnchor]);
+  }, [editorView]);
   var openMenuHandleRef = _react.default.useRef(null);
   var anchoredToRef = _react.default.useRef(undefined);
   if (!isMenuOpen) {
@@ -229,7 +228,7 @@ var BlockMenu = function BlockMenu(_ref5) {
     openMenuHandleRef.current = (_ref6 = (_surfaceDragHandleEle = _surfaceDragHandleElement.surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : openMenuHandleRef.current) !== null && _ref6 !== void 0 ? _ref6 : surfaceDragHandle;
     anchoredToRef.current = menuTriggerBy;
   }
-  var targetHandleRef = useRegistryAnchor ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
+  var targetHandleRef = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
   var closeMenu = _react.default.useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls, _api$userIntent2;
@@ -268,13 +267,20 @@ var BlockMenu = function BlockMenu(_ref5) {
     onDropdownOpenChanged(true);
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen, onDropdownOpenChanged]);
+
+  // Nested dropdowns are portaled outside the block-menu popup. Sparse surface reconciliation
+  // dispatches after the menu opens, so a re-render can occur while focus is inside that portal.
   var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   popupRef.current.contains(document.activeElement) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-  popupRef.current === document.activeElement)) !== null && _ref8 !== void 0 ? _ref8 : false;
+  popupRef.current === document.activeElement) || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') &&
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+  document.activeElement instanceof HTMLElement &&
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+  document.activeElement.closest(_styles.NESTED_DROPDOWN_MENU) !== null) !== null && _ref8 !== void 0 ? _ref8 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag

package/dist/cjs/ui/flag.js

@@ -10,9 +10,9 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _autoDismissFlag = _interopRequireDefault(require("@atlaskit/flag/auto-dismiss-flag"));
 var _flag = _interopRequireDefault(require("@atlaskit/flag/flag"));
 var _flagGroup = require("@atlaskit/flag/flag-group");
-var _autoDismissFlag = _interopRequireDefault(require("@atlaskit/flag/auto-dismiss-flag"));
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/core/check-circle"));
 var _blockMenuPluginType = require("../blockMenuPluginType");
 var _main = require("../pm-plugins/main");

package/dist/es2019/blockMenuPlugin.js

@@ -17,7 +17,6 @@ export const blockMenuPlugin = ({
   api,
   config
 }) => {
-  const blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
   const registry = createBlockMenuRegistry();
   const transformSourceRegistry = isExperimentEnabled('platform_editor_block_menu_transform_extensions') ? createBlockMenuTransformSourceRegistry() : undefined;
   registry.register(getBlockMenuComponents({
@@ -118,8 +117,7 @@ export const blockMenuPlugin = ({
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement,
-        useRegistryAnchor: blockControlMigrationEnabled
+        scrollableElement: popupsScrollableElement
       }), /*#__PURE__*/React.createElement(Flag, {
         api: api
       }));

package/dist/es2019/entry-points/blockMenuPlugin.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { blockMenuPlugin } from '../blockMenuPlugin';

package/dist/es2019/ui/block-menu.js

@@ -166,8 +166,7 @@ const BlockMenu = ({
   api,
   mountTo,
   boundariesElement,
-  scrollableElement,
-  useRegistryAnchor
+  scrollableElement
 }) => {
   var _openMenuHandleRef$cu, _editorView$dom, _ref2, _api$analytics2;
   const {
@@ -193,7 +192,7 @@ const BlockMenu = ({
   isMenuOpenRef.current = isMenuOpen;
   const [surfaceDragHandle, setSurfaceDragHandle] = React.useState(null);
   React.useLayoutEffect(() => {
-    if (!useRegistryAnchor) {
+    if (!isExperimentEnabled('platform_editor_block_control_migration')) {
       return;
     }
     const readElement = () => setSurfaceDragHandle(surfaceDragHandleElementStore.get(editorView));
@@ -203,7 +202,7 @@ const BlockMenu = ({
         readElement();
       }
     });
-  }, [editorView, useRegistryAnchor]);
+  }, [editorView]);
   const openMenuHandleRef = React.useRef(null);
   const anchoredToRef = React.useRef(undefined);
   if (!isMenuOpen) {
@@ -214,7 +213,7 @@ const BlockMenu = ({
     openMenuHandleRef.current = (_ref = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : openMenuHandleRef.current) !== null && _ref !== void 0 ? _ref : surfaceDragHandle;
     anchoredToRef.current = menuTriggerBy;
   }
-  const targetHandleRef = useRegistryAnchor ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  const targetHandleRef = isExperimentEnabled('platform_editor_block_control_migration') ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   const closeMenu = React.useCallback(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
@@ -251,13 +250,20 @@ const BlockMenu = ({
     onDropdownOpenChanged(true);
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen, onDropdownOpenChanged]);
+
+  // Nested dropdowns are portaled outside the block-menu popup. Sparse surface reconciliation
+  // dispatches after the menu opens, so a re-render can occur while focus is inside that portal.
   const hasFocus = (_ref2 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   popupRef.current.contains(document.activeElement) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-  popupRef.current === document.activeElement)) !== null && _ref2 !== void 0 ? _ref2 : false;
+  popupRef.current === document.activeElement) || isExperimentEnabled('platform_editor_block_control_migration') &&
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+  document.activeElement instanceof HTMLElement &&
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+  document.activeElement.closest(NESTED_DROPDOWN_MENU) !== null) !== null && _ref2 !== void 0 ? _ref2 : false;
   const selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag

package/dist/es2019/ui/flag.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
+import AutoDismissFlag from '@atlaskit/flag/auto-dismiss-flag';
 import AkFlag from '@atlaskit/flag/flag';
 import { FlagGroup } from '@atlaskit/flag/flag-group';
-import AutoDismissFlag from '@atlaskit/flag/auto-dismiss-flag';
 import SuccessIcon from '@atlaskit/icon/core/check-circle';
 import { FLAG_ID } from '../blockMenuPluginType';
 import { blockMenuPluginKey } from '../pm-plugins/main';

package/dist/esm/blockMenuPlugin.js

@@ -17,7 +17,6 @@ import { Flag } from './ui/flag';
 export var blockMenuPlugin = function blockMenuPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
-  var blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
   var registry = createBlockMenuRegistry();
   var transformSourceRegistry = isExperimentEnabled('platform_editor_block_menu_transform_extensions') ? createBlockMenuTransformSourceRegistry() : undefined;
   registry.register(getBlockMenuComponents({
@@ -127,8 +126,7 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement,
-        useRegistryAnchor: blockControlMigrationEnabled
+        scrollableElement: popupsScrollableElement
       }), /*#__PURE__*/React.createElement(Flag, {
         api: api
       }));

package/dist/esm/entry-points/blockMenuPlugin.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { blockMenuPlugin } from '../blockMenuPlugin';

package/dist/esm/ui/block-menu.js

@@ -171,8 +171,7 @@ var BlockMenu = function BlockMenu(_ref5) {
     api = _ref5.api,
     mountTo = _ref5.mountTo,
     boundariesElement = _ref5.boundariesElement,
-    scrollableElement = _ref5.scrollableElement,
-    useRegistryAnchor = _ref5.useRegistryAnchor;
+    scrollableElement = _ref5.scrollableElement;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], function (states) {
       var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
@@ -197,7 +196,7 @@ var BlockMenu = function BlockMenu(_ref5) {
     surfaceDragHandle = _React$useState2[0],
     setSurfaceDragHandle = _React$useState2[1];
   React.useLayoutEffect(function () {
-    if (!useRegistryAnchor) {
+    if (!isExperimentEnabled('platform_editor_block_control_migration')) {
       return;
     }
     var readElement = function readElement() {
@@ -209,7 +208,7 @@ var BlockMenu = function BlockMenu(_ref5) {
         readElement();
       }
     });
-  }, [editorView, useRegistryAnchor]);
+  }, [editorView]);
   var openMenuHandleRef = React.useRef(null);
   var anchoredToRef = React.useRef(undefined);
   if (!isMenuOpen) {
@@ -220,7 +219,7 @@ var BlockMenu = function BlockMenu(_ref5) {
     openMenuHandleRef.current = (_ref6 = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : openMenuHandleRef.current) !== null && _ref6 !== void 0 ? _ref6 : surfaceDragHandle;
     anchoredToRef.current = menuTriggerBy;
   }
-  var targetHandleRef = useRegistryAnchor ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var targetHandleRef = isExperimentEnabled('platform_editor_block_control_migration') ? (_openMenuHandleRef$cu = openMenuHandleRef.current) !== null && _openMenuHandleRef$cu !== void 0 ? _openMenuHandleRef$cu : surfaceDragHandle : editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   var closeMenu = React.useCallback(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls, _api$userIntent2;
@@ -259,13 +258,20 @@ var BlockMenu = function BlockMenu(_ref5) {
     onDropdownOpenChanged(true);
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen, onDropdownOpenChanged]);
+
+  // Nested dropdowns are portaled outside the block-menu popup. Sparse surface reconciliation
+  // dispatches after the menu opens, so a re-render can occur while focus is inside that portal.
   var hasFocus = (_ref8 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   document.activeElement === targetHandleRef || popupRef.current && (
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
   popupRef.current.contains(document.activeElement) ||
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-  popupRef.current === document.activeElement)) !== null && _ref8 !== void 0 ? _ref8 : false;
+  popupRef.current === document.activeElement) || isExperimentEnabled('platform_editor_block_control_migration') &&
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+  document.activeElement instanceof HTMLElement &&
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+  document.activeElement.closest(NESTED_DROPDOWN_MENU) !== null) !== null && _ref8 !== void 0 ? _ref8 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag

package/dist/esm/ui/flag.js

@@ -3,9 +3,9 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
+import AutoDismissFlag from '@atlaskit/flag/auto-dismiss-flag';
 import AkFlag from '@atlaskit/flag/flag';
 import { FlagGroup } from '@atlaskit/flag/flag-group';
-import AutoDismissFlag from '@atlaskit/flag/auto-dismiss-flag';
 import SuccessIcon from '@atlaskit/icon/core/check-circle';
 import { FLAG_ID } from '../blockMenuPluginType';
 import { blockMenuPluginKey } from '../pm-plugins/main';

package/dist/types/ui/block-menu.d.ts

@@ -9,7 +9,6 @@ export type BlockMenuProps = {
     editorView: EditorView | undefined;
     mountTo?: HTMLElement;
     scrollableElement?: HTMLElement;
-    useRegistryAnchor: boolean;
 };
 declare const _default_1: React.FC<WithIntlProps<BlockMenuProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<BlockMenuProps & WrappedComponentProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "18.0.1",
+	"version": "18.0.3",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,28 +28,28 @@
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^19.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^20.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^20.1.0",
 		"@atlaskit/editor-plugin-decorations": "^19.0.0",
 		"@atlaskit/editor-plugin-selection": "^19.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^17.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
-		"@atlaskit/editor-toolbar": "^2.6.0",
+		"@atlaskit/editor-toolbar": "^2.7.0",
 		"@atlaskit/flag": "^18.5.0",
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
-		"@atlaskit/tmp-editor-statsig": "^200.0.0",
+		"@atlaskit/tmp-editor-statsig": "^201.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.0.0",
+		"@atlaskit/editor-common": "^123.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},