@atlaskit/editor-plugin-block-controls 11.4.6 → 11.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 11.5.0
+
+### Minor Changes
+
+- [`71eaad00529a1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71eaad00529a1) -
+  Support multi-column layout column menu selections
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.4.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.4.6
 
 ### Patch Changes

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -11,6 +11,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _domAttrName = require("../ui/utils/dom-attr-name");
 var _decorationsAnchor = require("./decorations-anchor");
@@ -234,8 +235,9 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
-    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
-      // Don't show drag handle for layout column in a single column layout
+    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && (0, _experiments.editorExperiment)('advanced_layouts', true) && !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      // Don't show drag handle for layout column in a single column layout,
+      // unless the layout column menu is enabled (menu needs the handle to be accessible).
       return false;
     }
     var targetPos = view.state.doc.resolve(pos).pos;

package/dist/cjs/ui/drag-handle.js

@@ -466,6 +466,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
       if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
+          anchorPos: startPos,
           isOpen: true
         });
       }
@@ -519,6 +520,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       }
       if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
+          anchorPos: startPos,
           isOpen: true
         });
       }
@@ -895,12 +897,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
     var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
-    if (isShiftDown && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+    var isLayoutColumnMenuEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true);
+    if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 || (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isShiftDown, isTopLevelNodeValue, view]);
+  }, [api === null || api === void 0 || (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
   var dragHandleMessage = (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? formatMessage(_messages.blockControlsMessages.dragToMoveClickToOpen, {
     br: (0, _react2.jsx)("br", null)
   }) : formatMessage(_messages.blockControlsMessages.dragToMove);

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -3,6 +3,7 @@ import { isMultiBlockSelection } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
 import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
@@ -226,8 +227,9 @@ export const handleMouseOver = (view, event, api) => {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
-    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true)) {
-      // Don't show drag handle for layout column in a single column layout
+    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && !expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      // Don't show drag handle for layout column in a single column layout,
+      // unless the layout column menu is enabled (menu needs the handle to be accessible).
       return false;
     }
     const targetPos = view.state.doc.resolve(pos).pos;

package/dist/es2019/ui/drag-handle.js

@@ -441,6 +441,7 @@ export const DragHandle = ({
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
+          anchorPos: startPos,
           isOpen: true
         });
       }
@@ -495,6 +496,7 @@ export const DragHandle = ({
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
+          anchorPos: startPos,
           isOpen: true
         });
       }
@@ -877,12 +879,13 @@ export const DragHandle = ({
     }
     const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
     const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
-    if (isShiftDown && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+    const isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
+    if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 ? void 0 : (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isShiftDown, isTopLevelNodeValue, view]);
+  }, [api === null || api === void 0 ? void 0 : (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
   const dragHandleMessage = editorExperiment('platform_editor_block_menu', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: jsx("br", null)
   }) : formatMessage(blockControlsMessages.dragToMove);

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -4,6 +4,7 @@ import { isMultiBlockSelection } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
 import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
@@ -227,8 +228,9 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     } else {
       pos = view.posAtDOM(rootElement, 0);
     }
-    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true)) {
-      // Don't show drag handle for layout column in a single column layout
+    if (parentRootElement && parentRootElement.getAttribute('data-layout-section') === 'true' && parentRootElement.querySelectorAll('[data-layout-column]').length === 1 && editorExperiment('advanced_layouts', true) && !expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      // Don't show drag handle for layout column in a single column layout,
+      // unless the layout column menu is enabled (menu needs the handle to be accessible).
       return false;
     }
     var targetPos = view.state.doc.resolve(pos).pos;

package/dist/esm/ui/drag-handle.js

@@ -462,6 +462,7 @@ export var DragHandle = function DragHandle(_ref) {
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
+          anchorPos: startPos,
           isOpen: true
         });
       }
@@ -515,6 +516,7 @@ export var DragHandle = function DragHandle(_ref) {
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
         tr.setMeta('toggleLayoutColumnMenu', {
+          anchorPos: startPos,
           isOpen: true
         });
       }
@@ -891,12 +893,13 @@ export var DragHandle = function DragHandle(_ref) {
     }
     var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
     var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
-    if (isShiftDown && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
+    var isLayoutColumnMenuEnabled = expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true);
+    if (isShiftDown && !(isLayoutColumnMenuEnabled && isLayoutColumn) && (!isTopLevelNodeValue || isTopLevelNodeValue && $anchor.depth > DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
       setDragHandleDisabled(true);
     } else {
       setDragHandleDisabled(false);
     }
-  }, [api === null || api === void 0 || (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isShiftDown, isTopLevelNodeValue, view]);
+  }, [api === null || api === void 0 || (_api$blockControls8 = api.blockControls) === null || _api$blockControls8 === void 0 ? void 0 : _api$blockControls8.sharedState, isLayoutColumn, isShiftDown, isTopLevelNodeValue, view]);
   var dragHandleMessage = editorExperiment('platform_editor_block_menu', true) ? formatMessage(blockControlsMessages.dragToMoveClickToOpen, {
     br: jsx("br", null)
   }) : formatMessage(blockControlsMessages.dragToMove);

package/editor-plugin-block-controls.docs.tsx

@@ -5,37 +5,39 @@
 
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
 import packageJson from './package.json';
 
 const packagePath = path.resolve(__dirname);
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'Editor Plugin Block Controls',
-		description: 'Block controls plugin for @atlaskit/editor-core',
-		status: 'general-availability',
-		import: {
-			name: 'blockControlsPlugin',
-			package: '@atlaskit/editor-plugin-block-controls',
-			type: 'named',
-			packagePath,
-			packageJson,
-		},
-		usageGuidelines: [],
-		contentGuidelines: [],
-		accessibilityGuidelines: [],
-		keywords: ['editor', 'editor-plugin-block-controls', 'atlaskit'],
-		categories: ['editor'],
-		examples: [
-			{
-				name: 'Basic',
-				description: 'Block controls plugin in composable editor.',
-				source: path.resolve(packagePath, './examples/1-basic.tsx'),
+const documentation: StructuredContentSource = {
+	components: [
+		{
+			name: 'Editor Plugin Block Controls',
+			description: 'Block controls plugin for @atlaskit/editor-core',
+			status: 'general-availability',
+			import: {
+				name: 'blockControlsPlugin',
+				package: '@atlaskit/editor-plugin-block-controls',
+				type: 'named',
+				packagePath,
+				packageJson,
 			},
-		],
-	},
-];
+			usageGuidelines: [],
+			contentGuidelines: [],
+			accessibilityGuidelines: [],
+			keywords: ['editor', 'editor-plugin-block-controls', 'atlaskit'],
+			categories: ['editor'],
+			examples: [
+				{
+					name: 'Basic',
+					description: 'Block controls plugin in composable editor.',
+					source: path.resolve(packagePath, './examples/1-basic.tsx'),
+				},
+			],
+		},
+	],
+};
 
 export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "11.4.6",
+	"version": "11.5.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-plugin-quick-insert": "^10.4.0",
 		"@atlaskit/editor-plugin-selection": "^10.1.0",
 		"@atlaskit/editor-plugin-toolbar": "^7.3.0",
-		"@atlaskit/editor-plugin-type-ahead": "^10.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^10.2.0",
 		"@atlaskit/editor-plugin-user-intent": "^8.2.0",
 		"@atlaskit/editor-plugin-width": "^11.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
@@ -55,10 +55,10 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/theme": "^23.2.0",
-		"@atlaskit/tmp-editor-statsig": "^82.0.0",
+		"@atlaskit/theme": "^24.0.0",
+		"@atlaskit/tmp-editor-statsig": "^82.5.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^22.2.0",
+		"@atlaskit/tooltip": "^22.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.37.0",
+		"@atlaskit/editor-common": "^114.45.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -150,6 +150,8 @@
 	},
 	"devDependencies": {
 		"@atlassian/structured-docs-types": "workspace:^",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-intl": "^6.6.2"
 	}
 }