@atlaskit/editor-plugin-block-menu 15.0.2 → 15.0.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 15.0.3
+
+### Patch Changes
+
+- [`e62dacf4416fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e62dacf4416fd) -
+  Add the shared popup-anchor contract, registry-backed drag handle, and menu integrations behind
+  `platform_editor_block_control_migration`.
+- Updated dependencies
+
 ## 15.0.2
 
 ### Patch Changes

package/dist/cjs/blockMenuPlugin.js

@@ -23,6 +23,7 @@ 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)({
@@ -128,7 +129,8 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement
+        scrollableElement: popupsScrollableElement,
+        useRegistryAnchor: blockControlMigrationEnabled
       }), /*#__PURE__*/_react.default.createElement(_flag.Flag, {
         api: api
       }));

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

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _css = require("@atlaskit/css");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _surfaceDragHandleElement = require("@atlaskit/editor-common/block-controls/surface-drag-handle-element");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -175,12 +176,13 @@ var BlockMenuContent = function BlockMenuContent(_ref4) {
   })));
 };
 var BlockMenu = function BlockMenu(_ref5) {
-  var _editorView$dom, _ref7, _api$analytics2;
+  var _openMenuHandleRef$cu, _editorView$dom, _ref8, _api$analytics2;
   var editorView = _ref5.editorView,
     api = _ref5.api,
     mountTo = _ref5.mountTo,
     boundariesElement = _ref5.boundariesElement,
-    scrollableElement = _ref5.scrollableElement;
+    scrollableElement = _ref5.scrollableElement,
+    useRegistryAnchor = _ref5.useRegistryAnchor;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
       var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
@@ -198,11 +200,41 @@ var BlockMenu = function BlockMenu(_ref5) {
     openedViaKeyboard = _useSharedPluginState.openedViaKeyboard;
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
-  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
+  var isMenuOpenRef = _react.default.useRef(isMenuOpen);
+  isMenuOpenRef.current = isMenuOpen;
+  var _React$useState = _react.default.useState(null),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    surfaceDragHandle = _React$useState2[0],
+    setSurfaceDragHandle = _React$useState2[1];
+  _react.default.useLayoutEffect(function () {
+    if (!useRegistryAnchor) {
+      return;
+    }
+    var readElement = function readElement() {
+      return setSurfaceDragHandle(_surfaceDragHandleElement.surfaceDragHandleElementStore.get(editorView));
+    };
+    readElement();
+    return _surfaceDragHandleElement.surfaceDragHandleElementStore.subscribe(editorView, function () {
+      if (!isMenuOpenRef.current) {
+        readElement();
+      }
+    });
+  }, [editorView, useRegistryAnchor]);
+  var openMenuHandleRef = _react.default.useRef(null);
+  var anchoredToRef = _react.default.useRef(undefined);
+  if (!isMenuOpen) {
+    openMenuHandleRef.current = null;
+    anchoredToRef.current = undefined;
+  } else if (!openMenuHandleRef.current || anchoredToRef.current !== menuTriggerBy) {
+    var _ref6, _surfaceDragHandleEle;
+    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 closeMenu = _react.default.useCallback(function () {
-    api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls, _api$userIntent2;
-      var tr = _ref6.tr;
+      var tr = _ref7.tr;
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
         closeMenu: true
       })({
@@ -224,10 +256,10 @@ var BlockMenu = function BlockMenu(_ref5) {
   });
   var prevIsMenuOpenRef = (0, _react.useRef)(false);
   var popupRef = (0, _react.useRef)(undefined);
-  var _React$useState = _react.default.useState(0),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    menuHeight = _React$useState2[0],
-    setMenuHeight = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(0),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    menuHeight = _React$useState4[0],
+    setMenuHeight = _React$useState4[1];
   var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
   _react.default.useLayoutEffect(function () {
     var _popupRef$current;
@@ -236,13 +268,13 @@ var BlockMenu = function BlockMenu(_ref5) {
     }
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen]);
-  var hasFocus = (_ref7 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  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 && _ref7 !== void 0 ? _ref7 : false;
+  popupRef.current === document.activeElement)) !== null && _ref8 !== void 0 ? _ref8 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag

package/dist/es2019/blockMenuPlugin.js

@@ -16,6 +16,7 @@ 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({
@@ -114,7 +115,8 @@ export const blockMenuPlugin = ({
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement
+        scrollableElement: popupsScrollableElement,
+        useRegistryAnchor: blockControlMigrationEnabled
       }), /*#__PURE__*/React.createElement(Flag, {
         api: api
       }));

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

@@ -5,6 +5,7 @@ import React, { useContext, useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl';
 import { cx } from '@atlaskit/css';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
 import { BLOCK_MENU_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -166,9 +167,10 @@ const BlockMenu = ({
   api,
   mountTo,
   boundariesElement,
-  scrollableElement
+  scrollableElement,
+  useRegistryAnchor
 }) => {
-  var _editorView$dom, _ref, _api$analytics2;
+  var _openMenuHandleRef$cu, _editorView$dom, _ref2, _api$analytics2;
   const {
     menuTriggerBy,
     isSelectedViaDragHandle,
@@ -188,7 +190,32 @@ const BlockMenu = ({
   const {
     onDropdownOpenChanged
   } = useBlockMenu();
-  const targetHandleRef = 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 isMenuOpenRef = React.useRef(isMenuOpen);
+  isMenuOpenRef.current = isMenuOpen;
+  const [surfaceDragHandle, setSurfaceDragHandle] = React.useState(null);
+  React.useLayoutEffect(() => {
+    if (!useRegistryAnchor) {
+      return;
+    }
+    const readElement = () => setSurfaceDragHandle(surfaceDragHandleElementStore.get(editorView));
+    readElement();
+    return surfaceDragHandleElementStore.subscribe(editorView, () => {
+      if (!isMenuOpenRef.current) {
+        readElement();
+      }
+    });
+  }, [editorView, useRegistryAnchor]);
+  const openMenuHandleRef = React.useRef(null);
+  const anchoredToRef = React.useRef(undefined);
+  if (!isMenuOpen) {
+    openMenuHandleRef.current = null;
+    anchoredToRef.current = undefined;
+  } else if (!openMenuHandleRef.current || anchoredToRef.current !== menuTriggerBy) {
+    var _ref, _surfaceDragHandleEle;
+    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 closeMenu = React.useCallback(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
@@ -224,13 +251,13 @@ const BlockMenu = ({
     }
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen]);
-  const hasFocus = (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  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 && _ref !== void 0 ? _ref : false;
+  popupRef.current === document.activeElement)) !== null && _ref2 !== void 0 ? _ref2 : false;
   const selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag

package/dist/esm/blockMenuPlugin.js

@@ -16,6 +16,7 @@ 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({
@@ -121,7 +122,8 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         api: api,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement
+        scrollableElement: popupsScrollableElement,
+        useRegistryAnchor: blockControlMigrationEnabled
       }), /*#__PURE__*/React.createElement(Flag, {
         api: api
       }));

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

@@ -6,6 +6,7 @@ import React, { useContext, useEffect, useRef } from 'react';
 import { injectIntl } from 'react-intl';
 import { cx } from '@atlaskit/css';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
 import { BLOCK_MENU_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -166,12 +167,13 @@ var BlockMenuContent = function BlockMenuContent(_ref4) {
   })));
 };
 var BlockMenu = function BlockMenu(_ref5) {
-  var _editorView$dom, _ref7, _api$analytics2;
+  var _openMenuHandleRef$cu, _editorView$dom, _ref8, _api$analytics2;
   var editorView = _ref5.editorView,
     api = _ref5.api,
     mountTo = _ref5.mountTo,
     boundariesElement = _ref5.boundariesElement,
-    scrollableElement = _ref5.scrollableElement;
+    scrollableElement = _ref5.scrollableElement,
+    useRegistryAnchor = _ref5.useRegistryAnchor;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], function (states) {
       var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
       return {
@@ -189,11 +191,41 @@ var BlockMenu = function BlockMenu(_ref5) {
     openedViaKeyboard = _useSharedPluginState.openedViaKeyboard;
   var _useBlockMenu = useBlockMenu(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
-  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var isMenuOpenRef = React.useRef(isMenuOpen);
+  isMenuOpenRef.current = isMenuOpen;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    surfaceDragHandle = _React$useState2[0],
+    setSurfaceDragHandle = _React$useState2[1];
+  React.useLayoutEffect(function () {
+    if (!useRegistryAnchor) {
+      return;
+    }
+    var readElement = function readElement() {
+      return setSurfaceDragHandle(surfaceDragHandleElementStore.get(editorView));
+    };
+    readElement();
+    return surfaceDragHandleElementStore.subscribe(editorView, function () {
+      if (!isMenuOpenRef.current) {
+        readElement();
+      }
+    });
+  }, [editorView, useRegistryAnchor]);
+  var openMenuHandleRef = React.useRef(null);
+  var anchoredToRef = React.useRef(undefined);
+  if (!isMenuOpen) {
+    openMenuHandleRef.current = null;
+    anchoredToRef.current = undefined;
+  } else if (!openMenuHandleRef.current || anchoredToRef.current !== menuTriggerBy) {
+    var _ref6, _surfaceDragHandleEle;
+    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 closeMenu = React.useCallback(function () {
-    api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls, _api$userIntent2;
-      var tr = _ref6.tr;
+      var tr = _ref7.tr;
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
         closeMenu: true
       })({
@@ -215,10 +247,10 @@ var BlockMenu = function BlockMenu(_ref5) {
   });
   var prevIsMenuOpenRef = useRef(false);
   var popupRef = useRef(undefined);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    menuHeight = _React$useState2[0],
-    setMenuHeight = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    menuHeight = _React$useState4[0],
+    setMenuHeight = _React$useState4[1];
   var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
   React.useLayoutEffect(function () {
     var _popupRef$current;
@@ -227,13 +259,13 @@ var BlockMenu = function BlockMenu(_ref5) {
     }
     setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
   }, [isMenuOpen]);
-  var hasFocus = (_ref7 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
+  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 && _ref7 !== void 0 ? _ref7 : false;
+  popupRef.current === document.activeElement)) !== null && _ref8 !== void 0 ? _ref8 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
   // Use conditional hook based on feature flag

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

@@ -9,6 +9,7 @@ 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": "15.0.2",
+	"version": "15.0.3",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,7 +44,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.2.0",
+		"@atlaskit/editor-common": "^120.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},