@atlaskit/editor-plugin-layout 17.0.2 → 17.0.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-layout
 
+## 17.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
+
 ## 17.0.2
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -63,6 +63,7 @@ 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, _experiments.editorExperiment)('advanced_layouts', true);
   var allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && (0, _experiments.editorExperiment)('single_column_layouts', true, {
     exposure: true
@@ -386,7 +387,8 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         editorView: editorView,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement
+        scrollableElement: popupsScrollableElement,
+        useRegistryAnchor: blockControlMigrationEnabled
       }) : null);
     },
     getSharedState: function getSharedState(editorState) {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LayoutColumnMenu = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _surfaceDragHandleElement = require("@atlaskit/editor-common/block-controls/surface-drag-handle-element");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -50,7 +51,8 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     editorView = _ref.editorView,
     mountTo = _ref.mountTo,
     boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement;
+    scrollableElement = _ref.scrollableElement,
+    useRegistryAnchor = _ref.useRegistryAnchor;
   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 {
@@ -121,9 +123,20 @@ 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 target = (0, _react.useMemo)(function () {
-    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
-  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
+  var legacyTarget = (0, _react.useMemo)(function () {
+    return isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
+  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
+  var surfaceTargetRef = (0, _react.useRef)(null);
+  var surfaceAnchorPosRef = (0, _react.useRef)(undefined);
+  if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
+    surfaceTargetRef.current = null;
+    surfaceAnchorPosRef.current = undefined;
+  } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
+    var _surfaceDragHandleEle;
+    surfaceTargetRef.current = (_surfaceDragHandleEle = _surfaceDragHandleElement.surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
+    surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
+  }
+  var target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
   var hasValidTarget = target instanceof HTMLElement;
   var positionLayoutColumnMenu = (0, _react.useCallback)(function (position) {
     var _menuWrapperRef$curre;

package/dist/es2019/layoutPlugin.js

@@ -55,6 +55,7 @@ export const layoutPlugin = ({
   api
 }) => {
   var _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
@@ -358,7 +359,8 @@ export const layoutPlugin = ({
         editorView: editorView,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement
+        scrollableElement: popupsScrollableElement,
+        useRegistryAnchor: blockControlMigrationEnabled
       }) : null);
     },
     getSharedState(editorState) {

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { bind } from 'bind-event-listener';
+import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -41,7 +42,8 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   editorView,
   mountTo,
   boundariesElement,
-  scrollableElement
+  scrollableElement,
+  useRegistryAnchor
 }) {
   var _api$uiControlRegistr, _api$uiControlRegistr2;
   const {
@@ -115,7 +117,18 @@ 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 target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
+  const legacyTarget = useMemo(() => isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
+  const surfaceTargetRef = useRef(null);
+  const surfaceAnchorPosRef = useRef(undefined);
+  if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
+    surfaceTargetRef.current = null;
+    surfaceAnchorPosRef.current = undefined;
+  } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
+    var _surfaceDragHandleEle;
+    surfaceTargetRef.current = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
+    surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
+  }
+  const target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
   const hasValidTarget = target instanceof HTMLElement;
   const positionLayoutColumnMenu = useCallback(position => {
     var _menuWrapperRef$curre;

package/dist/esm/layoutPlugin.js

@@ -56,6 +56,7 @@ 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
@@ -379,7 +380,8 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         editorView: editorView,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement
+        scrollableElement: popupsScrollableElement,
+        useRegistryAnchor: blockControlMigrationEnabled
       }) : null);
     },
     getSharedState: function getSharedState(editorState) {

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { bind } from 'bind-event-listener';
+import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -42,7 +43,8 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     editorView = _ref.editorView,
     mountTo = _ref.mountTo,
     boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement;
+    scrollableElement = _ref.scrollableElement,
+    useRegistryAnchor = _ref.useRegistryAnchor;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout', 'selection'], function (states) {
       var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
       return {
@@ -113,9 +115,20 @@ 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 target = useMemo(function () {
-    return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
-  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
+  var legacyTarget = useMemo(function () {
+    return isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
+  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
+  var surfaceTargetRef = useRef(null);
+  var surfaceAnchorPosRef = useRef(undefined);
+  if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
+    surfaceTargetRef.current = null;
+    surfaceAnchorPosRef.current = undefined;
+  } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
+    var _surfaceDragHandleEle;
+    surfaceTargetRef.current = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
+    surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
+  }
+  var target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
   var hasValidTarget = target instanceof HTMLElement;
   var positionLayoutColumnMenu = useCallback(function (position) {
     var _menuWrapperRef$curre;

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

@@ -8,6 +8,7 @@ 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": "17.0.2",
+	"version": "17.0.3",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,7 +50,7 @@
 		"bind-event-listener": "^3.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"
 	},