@atlaskit/editor-plugin-layout 20.0.2 → 20.0.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-layout
 
+## 20.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
+
 ## 20.0.2
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -63,7 +63,6 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
-  var blockControlMigrationEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
   var isAdvancedLayoutEnabled = (0, _editorExperiment.editorExperiment)('advanced_layouts', true);
   var allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && (0, _editorExperiment.editorExperiment)('single_column_layouts', true, {
     exposure: true
@@ -297,8 +296,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         editorView: editorView,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement,
-        useRegistryAnchor: blockControlMigrationEnabled
+        scrollableElement: popupsScrollableElement
       }) : null);
     },
     getSharedState: function getSharedState(editorState) {

package/dist/cjs/ui/LayoutColumnMenu/index.js

@@ -17,6 +17,7 @@ var _userIntent = require("@atlaskit/editor-common/user-intent");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
 var _components = require("./components");
 var _keys = require("./keys");
@@ -51,8 +52,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     editorView = _ref.editorView,
     mountTo = _ref.mountTo,
     boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement,
-    useRegistryAnchor = _ref.useRegistryAnchor;
+    scrollableElement = _ref.scrollableElement;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout', 'selection'], function (states) {
       var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
       return {
@@ -123,12 +123,13 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     });
   }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_keys.LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var hasValidMenuSelection = !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') || selection !== undefined && (0, _layoutColumnSelection.getLayoutColumnMenuAnchorPos)(selection, layoutColumnMenuAnchorPos) !== undefined;
   var legacyTarget = (0, _react.useMemo)(function () {
-    return isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
-  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
+    return isLayoutColumnMenuOpen && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
+  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   var surfaceTargetRef = (0, _react.useRef)(null);
   var surfaceAnchorPosRef = (0, _react.useRef)(undefined);
-  if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
+  if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') || !isLayoutColumnMenuOpen) {
     surfaceTargetRef.current = null;
     surfaceAnchorPosRef.current = undefined;
   } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
@@ -136,7 +137,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     surfaceTargetRef.current = (_surfaceDragHandleEle = _surfaceDragHandleElement.surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
     surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
   }
-  var target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
+  var target = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? surfaceTargetRef.current : legacyTarget;
   var hasValidTarget = target instanceof HTMLElement;
   var positionLayoutColumnMenu = (0, _react.useCallback)(function (position) {
     var _menuWrapperRef$curre;
@@ -155,10 +156,10 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     return position;
   }, [editorView, scrollableElement, target]);
   (0, _react.useEffect)(function () {
-    if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
+    if (isLayoutColumnMenuOpen && (!hasValidMenuSelection || !hasValidTarget || components.length === 0)) {
       closeLayoutColumnMenu();
     }
-  }, [closeLayoutColumnMenu, components.length, hasValidTarget, isLayoutColumnMenuOpen]);
+  }, [closeLayoutColumnMenu, components.length, hasValidMenuSelection, hasValidTarget, isLayoutColumnMenuOpen]);
   var _useMemo = (0, _react.useMemo)(function () {
       return (0, _utils.getLayoutColumnMenuPositioningProps)();
     }, []),
@@ -166,7 +167,7 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     alignY = _useMemo.alignY,
     offset = _useMemo.offset,
     useManualBelowFlip = _useMemo.useManualBelowFlip;
-  if (!isLayoutColumnMenuOpen || components.length === 0 || !hasValidTarget) {
+  if (!isLayoutColumnMenuOpen || !hasValidMenuSelection || components.length === 0 || !hasValidTarget) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {

package/dist/es2019/layoutPlugin.js

@@ -55,7 +55,6 @@ export const layoutPlugin = ({
   api
 }) => {
   var _api$blockMenu, _api$analytics2;
-  const blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
   const isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true);
   const allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && editorExperiment('single_column_layouts', true, {
     exposure: true
@@ -277,8 +276,7 @@ export const layoutPlugin = ({
         editorView: editorView,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement,
-        useRegistryAnchor: blockControlMigrationEnabled
+        scrollableElement: popupsScrollableElement
       }) : null);
     },
     getSharedState(editorState) {

package/dist/es2019/ui/LayoutColumnMenu/index.js

@@ -10,6 +10,7 @@ import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
@@ -42,8 +43,7 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   editorView,
   mountTo,
   boundariesElement,
-  scrollableElement,
-  useRegistryAnchor
+  scrollableElement
 }) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   const {
@@ -117,10 +117,11 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     });
   }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  const legacyTarget = useMemo(() => isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
+  const hasValidMenuSelection = !isExperimentEnabled('platform_editor_block_control_migration') || selection !== undefined && getLayoutColumnMenuAnchorPos(selection, layoutColumnMenuAnchorPos) !== undefined;
+  const legacyTarget = useMemo(() => isLayoutColumnMenuOpen && !isExperimentEnabled('platform_editor_block_control_migration') ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   const surfaceTargetRef = useRef(null);
   const surfaceAnchorPosRef = useRef(undefined);
-  if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
+  if (!isExperimentEnabled('platform_editor_block_control_migration') || !isLayoutColumnMenuOpen) {
     surfaceTargetRef.current = null;
     surfaceAnchorPosRef.current = undefined;
   } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
@@ -128,7 +129,7 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     surfaceTargetRef.current = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
     surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
   }
-  const target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
+  const target = isExperimentEnabled('platform_editor_block_control_migration') ? surfaceTargetRef.current : legacyTarget;
   const hasValidTarget = target instanceof HTMLElement;
   const positionLayoutColumnMenu = useCallback(position => {
     var _menuWrapperRef$curre;
@@ -147,17 +148,17 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     return position;
   }, [editorView, scrollableElement, target]);
   useEffect(() => {
-    if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
+    if (isLayoutColumnMenuOpen && (!hasValidMenuSelection || !hasValidTarget || components.length === 0)) {
       closeLayoutColumnMenu();
     }
-  }, [closeLayoutColumnMenu, components.length, hasValidTarget, isLayoutColumnMenuOpen]);
+  }, [closeLayoutColumnMenu, components.length, hasValidMenuSelection, hasValidTarget, isLayoutColumnMenuOpen]);
   const {
     alignX,
     alignY,
     offset,
     useManualBelowFlip
   } = useMemo(() => getLayoutColumnMenuPositioningProps(), []);
-  if (!isLayoutColumnMenuOpen || components.length === 0 || !hasValidTarget) {
+  if (!isLayoutColumnMenuOpen || !hasValidMenuSelection || components.length === 0 || !hasValidTarget) {
     return null;
   }
   return /*#__PURE__*/React.createElement(PopupWithListeners, {

package/dist/esm/layoutPlugin.js

@@ -56,7 +56,6 @@ export var layoutPlugin = function layoutPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
-  var blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true);
   var allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && editorExperiment('single_column_layouts', true, {
     exposure: true
@@ -290,8 +289,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         editorView: editorView,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement,
-        useRegistryAnchor: blockControlMigrationEnabled
+        scrollableElement: popupsScrollableElement
       }) : null);
     },
     getSharedState: function getSharedState(editorState) {

package/dist/esm/ui/LayoutColumnMenu/index.js

@@ -10,6 +10,7 @@ import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
@@ -43,8 +44,7 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     editorView = _ref.editorView,
     mountTo = _ref.mountTo,
     boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement,
-    useRegistryAnchor = _ref.useRegistryAnchor;
+    scrollableElement = _ref.scrollableElement;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout', 'selection'], function (states) {
       var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
       return {
@@ -115,12 +115,13 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     });
   }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
   var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var hasValidMenuSelection = !isExperimentEnabled('platform_editor_block_control_migration') || selection !== undefined && getLayoutColumnMenuAnchorPos(selection, layoutColumnMenuAnchorPos) !== undefined;
   var legacyTarget = useMemo(function () {
-    return isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
-  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
+    return isLayoutColumnMenuOpen && !isExperimentEnabled('platform_editor_block_control_migration') ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
+  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   var surfaceTargetRef = useRef(null);
   var surfaceAnchorPosRef = useRef(undefined);
-  if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
+  if (!isExperimentEnabled('platform_editor_block_control_migration') || !isLayoutColumnMenuOpen) {
     surfaceTargetRef.current = null;
     surfaceAnchorPosRef.current = undefined;
   } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
@@ -128,7 +129,7 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     surfaceTargetRef.current = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
     surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
   }
-  var target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
+  var target = isExperimentEnabled('platform_editor_block_control_migration') ? surfaceTargetRef.current : legacyTarget;
   var hasValidTarget = target instanceof HTMLElement;
   var positionLayoutColumnMenu = useCallback(function (position) {
     var _menuWrapperRef$curre;
@@ -147,10 +148,10 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     return position;
   }, [editorView, scrollableElement, target]);
   useEffect(function () {
-    if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
+    if (isLayoutColumnMenuOpen && (!hasValidMenuSelection || !hasValidTarget || components.length === 0)) {
       closeLayoutColumnMenu();
     }
-  }, [closeLayoutColumnMenu, components.length, hasValidTarget, isLayoutColumnMenuOpen]);
+  }, [closeLayoutColumnMenu, components.length, hasValidMenuSelection, hasValidTarget, isLayoutColumnMenuOpen]);
   var _useMemo = useMemo(function () {
       return getLayoutColumnMenuPositioningProps();
     }, []),
@@ -158,7 +159,7 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     alignY = _useMemo.alignY,
     offset = _useMemo.offset,
     useManualBelowFlip = _useMemo.useManualBelowFlip;
-  if (!isLayoutColumnMenuOpen || components.length === 0 || !hasValidTarget) {
+  if (!isLayoutColumnMenuOpen || !hasValidMenuSelection || components.length === 0 || !hasValidTarget) {
     return null;
   }
   return /*#__PURE__*/React.createElement(PopupWithListeners, {

package/dist/types/ui/LayoutColumnMenu/index.d.ts

@@ -8,7 +8,6 @@ type LayoutColumnMenuProps = {
     editorView: EditorView;
     mountTo?: HTMLElement;
     scrollableElement?: HTMLElement;
-    useRegistryAnchor: boolean;
 };
 export declare const LayoutColumnMenu: React.NamedExoticComponent<LayoutColumnMenuProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "20.0.2",
+	"version": "20.0.3",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,7 +24,7 @@
 		"@atlaskit/adf-schema": "^57.5.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-block-menu": "^18.0.0",
 		"@atlaskit/editor-plugin-decorations": "^19.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^19.0.0",
@@ -32,13 +32,13 @@
 		"@atlaskit/editor-plugin-interaction": "^32.0.0",
 		"@atlaskit/editor-plugin-selection": "^19.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^16.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^13.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^13.1.0",
 		"@atlaskit/editor-plugin-user-intent": "^17.0.0",
 		"@atlaskit/editor-plugin-width": "^20.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-toolbar": "^2.7.0",
-		"@atlaskit/editor-ui-control-model": "^2.9.0",
+		"@atlaskit/editor-ui-control-model": "^2.10.0",
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/icon-lab": "^7.9.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
@@ -50,7 +50,7 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.2.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"
 	},