@atlaskit/editor-plugin-layout 17.0.1 → 17.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/layoutPlugin.js +3 -1
  3. package/dist/cjs/ui/LayoutColumnMenu/index.js +17 -4
  4. package/dist/es2019/layoutPlugin.js +3 -1
  5. package/dist/es2019/ui/LayoutColumnMenu/index.js +15 -2
  6. package/dist/esm/layoutPlugin.js +3 -1
  7. package/dist/esm/ui/LayoutColumnMenu/index.js +17 -4
  8. package/dist/types/ui/LayoutColumnMenu/index.d.ts +1 -0
  9. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 17.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e62dacf4416fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e62dacf4416fd) -
8
+ Add the shared popup-anchor contract, registry-backed drag handle, and menu integrations behind
9
+ `platform_editor_block_control_migration`.
10
+ - Updated dependencies
11
+
12
+ ## 17.0.2
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 17.0.1
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/layoutPlugin.js CHANGED
@@ -63,6 +63,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
63
63
  var _ref$config = _ref.config,
64
64
  options = _ref$config === void 0 ? {} : _ref$config,
65
65
  api = _ref.api;
66
+ var blockControlMigrationEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
66
67
  var isAdvancedLayoutEnabled = (0, _experiments.editorExperiment)('advanced_layouts', true);
67
68
  var allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && (0, _experiments.editorExperiment)('single_column_layouts', true, {
68
69
  exposure: true
@@ -386,7 +387,8 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
386
387
  editorView: editorView,
387
388
  mountTo: popupsMountPoint,
388
389
  boundariesElement: popupsBoundariesElement,
389
- scrollableElement: popupsScrollableElement
390
+ scrollableElement: popupsScrollableElement,
391
+ useRegistryAnchor: blockControlMigrationEnabled
390
392
  }) : null);
391
393
  },
392
394
  getSharedState: function getSharedState(editorState) {
package/dist/cjs/ui/LayoutColumnMenu/index.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.LayoutColumnMenu = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _bindEventListener = require("bind-event-listener");
10
+ var _surfaceDragHandleElement = require("@atlaskit/editor-common/block-controls/surface-drag-handle-element");
10
11
  var _hooks = require("@atlaskit/editor-common/hooks");
11
12
  var _styles = require("@atlaskit/editor-common/styles");
12
13
  var _ui = require("@atlaskit/editor-common/ui");
@@ -50,7 +51,8 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
50
51
  editorView = _ref.editorView,
51
52
  mountTo = _ref.mountTo,
52
53
  boundariesElement = _ref.boundariesElement,
53
- scrollableElement = _ref.scrollableElement;
54
+ scrollableElement = _ref.scrollableElement,
55
+ useRegistryAnchor = _ref.useRegistryAnchor;
54
56
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['layout', 'selection'], function (states) {
55
57
  var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
56
58
  return {
@@ -121,9 +123,20 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
121
123
  });
122
124
  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
123
125
  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 : [];
124
- var target = (0, _react.useMemo)(function () {
125
- return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
126
- }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
126
+ var legacyTarget = (0, _react.useMemo)(function () {
127
+ return isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
128
+ }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
129
+ var surfaceTargetRef = (0, _react.useRef)(null);
130
+ var surfaceAnchorPosRef = (0, _react.useRef)(undefined);
131
+ if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
132
+ surfaceTargetRef.current = null;
133
+ surfaceAnchorPosRef.current = undefined;
134
+ } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
135
+ var _surfaceDragHandleEle;
136
+ surfaceTargetRef.current = (_surfaceDragHandleEle = _surfaceDragHandleElement.surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
137
+ surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
138
+ }
139
+ var target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
127
140
  var hasValidTarget = target instanceof HTMLElement;
128
141
  var positionLayoutColumnMenu = (0, _react.useCallback)(function (position) {
129
142
  var _menuWrapperRef$curre;
package/dist/es2019/layoutPlugin.js CHANGED
@@ -55,6 +55,7 @@ export const layoutPlugin = ({
55
55
  api
56
56
  }) => {
57
57
  var _api$analytics2;
58
+ const blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
58
59
  const isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true);
59
60
  const allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && editorExperiment('single_column_layouts', true, {
60
61
  exposure: true
@@ -358,7 +359,8 @@ export const layoutPlugin = ({
358
359
  editorView: editorView,
359
360
  mountTo: popupsMountPoint,
360
361
  boundariesElement: popupsBoundariesElement,
361
- scrollableElement: popupsScrollableElement
362
+ scrollableElement: popupsScrollableElement,
363
+ useRegistryAnchor: blockControlMigrationEnabled
362
364
  }) : null);
363
365
  },
364
366
  getSharedState(editorState) {
package/dist/es2019/ui/LayoutColumnMenu/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback, useEffect, useMemo, useRef } from 'react';
2
2
  import { bind } from 'bind-event-listener';
3
+ import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
5
6
  import { Popup } from '@atlaskit/editor-common/ui';
@@ -41,7 +42,8 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
41
42
  editorView,
42
43
  mountTo,
43
44
  boundariesElement,
44
- scrollableElement
45
+ scrollableElement,
46
+ useRegistryAnchor
45
47
  }) {
46
48
  var _api$uiControlRegistr, _api$uiControlRegistr2;
47
49
  const {
@@ -115,7 +117,18 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
115
117
  });
116
118
  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
117
119
  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 : [];
118
- const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
120
+ const legacyTarget = useMemo(() => isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
121
+ const surfaceTargetRef = useRef(null);
122
+ const surfaceAnchorPosRef = useRef(undefined);
123
+ if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
124
+ surfaceTargetRef.current = null;
125
+ surfaceAnchorPosRef.current = undefined;
126
+ } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
127
+ var _surfaceDragHandleEle;
128
+ surfaceTargetRef.current = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
129
+ surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
130
+ }
131
+ const target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
119
132
  const hasValidTarget = target instanceof HTMLElement;
120
133
  const positionLayoutColumnMenu = useCallback(position => {
121
134
  var _menuWrapperRef$curre;
package/dist/esm/layoutPlugin.js CHANGED
@@ -56,6 +56,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
56
56
  var _ref$config = _ref.config,
57
57
  options = _ref$config === void 0 ? {} : _ref$config,
58
58
  api = _ref.api;
59
+ var blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
59
60
  var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true);
60
61
  var allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && editorExperiment('single_column_layouts', true, {
61
62
  exposure: true
@@ -379,7 +380,8 @@ export var layoutPlugin = function layoutPlugin(_ref) {
379
380
  editorView: editorView,
380
381
  mountTo: popupsMountPoint,
381
382
  boundariesElement: popupsBoundariesElement,
382
- scrollableElement: popupsScrollableElement
383
+ scrollableElement: popupsScrollableElement,
384
+ useRegistryAnchor: blockControlMigrationEnabled
383
385
  }) : null);
384
386
  },
385
387
  getSharedState: function getSharedState(editorState) {
package/dist/esm/ui/LayoutColumnMenu/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback, useEffect, useMemo, useRef } from 'react';
2
2
  import { bind } from 'bind-event-listener';
3
+ import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
3
4
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
5
  import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
5
6
  import { Popup } from '@atlaskit/editor-common/ui';
@@ -42,7 +43,8 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
42
43
  editorView = _ref.editorView,
43
44
  mountTo = _ref.mountTo,
44
45
  boundariesElement = _ref.boundariesElement,
45
- scrollableElement = _ref.scrollableElement;
46
+ scrollableElement = _ref.scrollableElement,
47
+ useRegistryAnchor = _ref.useRegistryAnchor;
46
48
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout', 'selection'], function (states) {
47
49
  var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
48
50
  return {
@@ -113,9 +115,20 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
113
115
  });
114
116
  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
115
117
  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 : [];
116
- var target = useMemo(function () {
117
- return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
118
- }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
118
+ var legacyTarget = useMemo(function () {
119
+ return isLayoutColumnMenuOpen && !useRegistryAnchor ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
120
+ }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection, useRegistryAnchor]);
121
+ var surfaceTargetRef = useRef(null);
122
+ var surfaceAnchorPosRef = useRef(undefined);
123
+ if (!useRegistryAnchor || !isLayoutColumnMenuOpen) {
124
+ surfaceTargetRef.current = null;
125
+ surfaceAnchorPosRef.current = undefined;
126
+ } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
127
+ var _surfaceDragHandleEle;
128
+ surfaceTargetRef.current = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
129
+ surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
130
+ }
131
+ var target = useRegistryAnchor ? surfaceTargetRef.current : legacyTarget;
119
132
  var hasValidTarget = target instanceof HTMLElement;
120
133
  var positionLayoutColumnMenu = useCallback(function (position) {
121
134
  var _menuWrapperRef$curre;
package/dist/types/ui/LayoutColumnMenu/index.d.ts CHANGED
@@ -8,6 +8,7 @@ type LayoutColumnMenuProps = {
8
8
  editorView: EditorView;
9
9
  mountTo?: HTMLElement;
10
10
  scrollableElement?: HTMLElement;
11
+ useRegistryAnchor: boolean;
11
12
  };
12
13
  export declare const LayoutColumnMenu: React.NamedExoticComponent<LayoutColumnMenuProps>;
13
14
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "17.0.1",
3
+ "version": "17.0.3",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,7 +24,7 @@
24
24
  "@atlaskit/adf-schema": "^57.1.0",
25
25
  "@atlaskit/css": "^1.0.0",
26
26
  "@atlaskit/editor-plugin-analytics": "^16.0.0",
27
- "@atlaskit/editor-plugin-block-controls": "^17.0.0",
27
+ "@atlaskit/editor-plugin-block-controls": "^17.1.0",
28
28
  "@atlaskit/editor-plugin-block-menu": "^15.0.0",
29
29
  "@atlaskit/editor-plugin-decorations": "^16.0.0",
30
30
  "@atlaskit/editor-plugin-editor-disabled": "^16.0.0",
@@ -43,14 +43,14 @@
43
43
  "@atlaskit/icon-lab": "^7.7.0",
44
44
  "@atlaskit/platform-feature-experiments": "^0.3.0",
45
45
  "@atlaskit/platform-feature-flags": "^2.1.0",
46
- "@atlaskit/tmp-editor-statsig": "^161.0.0",
46
+ "@atlaskit/tmp-editor-statsig": "^162.0.0",
47
47
  "@atlaskit/tokens": "^16.8.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1",
50
50
  "bind-event-listener": "^3.0.0"
51
51
  },
52
52
  "peerDependencies": {
53
- "@atlaskit/editor-common": "^120.0.0",
53
+ "@atlaskit/editor-common": "^120.3.0",
54
54
  "react": "^18.2.0 || ^19.2.0",
55
55
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
56
56
  },