@atlaskit/editor-plugin-layout 17.0.2 → 17.0.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-layout
 
+## 17.0.4
+
+### Patch Changes
+
+- [`d82ea790b5c1c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d82ea790b5c1c) -
+  Update registered slash-command menu icons, including the Jira datasource WorkItems icon, when the
+  `platform_editor_slash_command` experiment is enabled.
+- Updated dependencies
+
+## 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/cjs/ui/quick-insert/LayoutQuickInsertMenuItem.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,16 +9,19 @@ exports.LayoutQuickInsertMenuItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _assets = require("@atlaskit/editor-common/assets");
 var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _layoutThreeColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns"));
+var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
+var _layoutFiveColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-five-columns"));
+var _layoutFourColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-four-columns"));
 var _layoutPlugin = require("../../layoutPlugin");
 var _actions = require("../../pm-plugins/actions");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var icons = {
-  2: _assets.IconTwoColumnLayout,
-  3: _assets.IconThreeColumnLayout,
-  4: _assets.IconFourColumnLayout,
-  5: _assets.IconFiveColumnLayout
+  2: _layoutTwoColumns.default,
+  3: _layoutThreeColumns.default,
+  4: _layoutFourColumns.default,
+  5: _layoutFiveColumns.default
 };
 var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref) {
   var api = _ref.api,
@@ -46,7 +50,9 @@ var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function Lay
     return tr;
   }, [api, columnCount]);
   return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
-    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, null),
+    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: ""
+    }),
     onSelect: onSelect,
     title: formatMessage(title)
   });

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/es2019/ui/quick-insert/LayoutQuickInsertMenuItem.js

@@ -1,15 +1,18 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { IconFiveColumnLayout, IconFourColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/assets';
 import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
+import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
+import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
+import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
 import { selectIntoLayoutSection } from '../../layoutPlugin';
 import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
 const icons = {
-  2: IconTwoColumnLayout,
-  3: IconThreeColumnLayout,
-  4: IconFourColumnLayout,
-  5: IconFiveColumnLayout
+  2: LayoutTwoColumnsIcon,
+  3: LayoutThreeColumnsIcon,
+  4: LayoutFourColumnsIcon,
+  5: LayoutFiveColumnsIcon
 };
 export const LayoutQuickInsertMenuItem = ({
   api,
@@ -41,7 +44,9 @@ export const LayoutQuickInsertMenuItem = ({
     return tr;
   }, [api, columnCount]);
   return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
-    iconBefore: /*#__PURE__*/React.createElement(Icon, null),
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
     onSelect: onSelect,
     title: formatMessage(title)
   });

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/esm/ui/quick-insert/LayoutQuickInsertMenuItem.js

@@ -1,15 +1,18 @@
 import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { IconFiveColumnLayout, IconFourColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/assets';
 import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
+import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
+import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
+import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
 import { selectIntoLayoutSection } from '../../layoutPlugin';
 import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
 var icons = {
-  2: IconTwoColumnLayout,
-  3: IconThreeColumnLayout,
-  4: IconFourColumnLayout,
-  5: IconFiveColumnLayout
+  2: LayoutTwoColumnsIcon,
+  3: LayoutThreeColumnsIcon,
+  4: LayoutFourColumnsIcon,
+  5: LayoutFiveColumnsIcon
 };
 export var LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref) {
   var api = _ref.api,
@@ -38,7 +41,9 @@ export var LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref)
     return tr;
   }, [api, columnCount]);
   return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
-    iconBefore: /*#__PURE__*/React.createElement(Icon, null),
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
     onSelect: onSelect,
     title: formatMessage(title)
   });

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.4",
 	"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"
 	},