@atlaskit/editor-plugin-block-controls 13.0.7 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.1.0
+
+### Minor Changes
+
+- [`bb48c26acb8ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb48c26acb8ba) -
+  Add platform_editor_layout_column_menu_kill_switch_1 kill switch and render the full block drag
+  handle icon for layout columns when the new behaviour is enabled (gate OFF). When the new
+  behaviour is enabled, re-clicking the layout column whose menu is already open now closes the
+  menu, while clicking a different column switches the menu to that column. The layout column menu
+  now opens below the drag handle with left-aligned edges (relying on the popup's built-in placement
+  to invert horizontally or nudge up when space is tight) instead of the previous centred
+  prefer-above behaviour. The layout column Delete hover/focus danger preview now matches the table
+  delete affordance exactly, using the translucent color.blanket.danger fill and a 1px
+  color.border.danger border instead of the previous low-alpha fill with a 2px border, and clears
+  the concurrent blue selected blanket while the danger preview is active so the preview reads as
+  pure red with no blue cast.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.0.7
 
 ### Patch Changes

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

@@ -41,6 +41,7 @@ var _selection = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
 var _dragPreview = require("./drag-preview");
+var _shouldUseNestedDragHandleIcon = require("./should-use-nested-drag-handle-icon");
 var _anchorName = require("./utils/anchor-name");
 var _domAttrName = require("./utils/dom-attr-name");
 var _visibilityContainer = require("./visibility-container");
@@ -370,6 +371,18 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
+
+// Kill switch OFF: omit `isOpen` so the reducer toggles per clicked column. ON: keep
+// `isOpen: true` for legacy always-open. Centralised so all dispatch sites stay in sync.
+var buildToggleLayoutColumnMenuMeta = function buildToggleLayoutColumnMenuMeta(anchorPos, openedViaKeyboard) {
+  return _objectSpread(_objectSpread({
+    anchorPos: anchorPos
+  }, (0, _platformFeatureFlags.fg)('platform_editor_layout_column_menu_kill_switch_1') ? {
+    isOpen: true
+  } : {}), {}, {
+    openedViaKeyboard: openedViaKeyboard
+  });
+};
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var _api$core4, _api$blockControls8;
   var view = _ref.view,
@@ -498,11 +511,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         return tr;
       }
       if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
-        tr.setMeta('toggleLayoutColumnMenu', {
-          anchorPos: startPos,
-          isOpen: true,
-          openedViaKeyboard: false
-        });
+        tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
       }
       var resolvedStartPos = tr.doc.resolve(startPos);
       var selection = ((_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
@@ -553,11 +562,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         return tr;
       }
       if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
-        tr.setMeta('toggleLayoutColumnMenu', {
-          anchorPos: startPos,
-          isOpen: true,
-          openedViaKeyboard: false
-        });
+        tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
       }
       var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
       var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
@@ -645,11 +650,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           tr: tr
         });
         if (nodeType === 'layoutColumn' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
-          tr.setMeta('toggleLayoutColumnMenu', {
-            anchorPos: startPos,
-            isOpen: true,
-            openedViaKeyboard: true
-          });
+          tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, true));
         }
         var rootPos = (0, _experiments.editorExperiment)('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
         var triggerByNode = (0, _experiments.editorExperiment)('platform_synced_block', true) ? {
@@ -1091,7 +1092,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, (0, _expValEquals.expValEquals)('platform_editor_nested_drag_handle_icon', 'isEnabled', true) && !isTopLevelNodeValue ? (0, _react2.jsx)(_dragHandleNestedIcon.DragHandleNestedIcon, null) : (0, _react2.jsx)(_dragHandleVertical.default, {
+      }, (0, _shouldUseNestedDragHandleIcon.shouldUseNestedDragHandleIcon)(isTopLevelNodeValue, isLayoutColumn) ? (0, _react2.jsx)(_dragHandleNestedIcon.DragHandleNestedIcon, null) : (0, _react2.jsx)(_dragHandleVertical.default, {
         spacing: "spacious",
         label: "",
         size: "small"

package/dist/cjs/ui/should-use-nested-drag-handle-icon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldUseNestedDragHandleIcon = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+// Nested icon for non-top-level nodes when the experiment is on. Exception: with the
+// kill switch OFF, layout columns use the full block handle instead.
+// TODO: EDITOR-7732 - remove this whole function when
+// `platform_editor_layout_column_menu_kill_switch_1` is cleaned up
+var shouldUseNestedDragHandleIcon = exports.shouldUseNestedDragHandleIcon = function shouldUseNestedDragHandleIcon(isTopLevelNode, isLayoutColumn) {
+  if (!(0, _expValEquals.expValEquals)('platform_editor_nested_drag_handle_icon', 'isEnabled', true)) {
+    return false;
+  }
+  if (isTopLevelNode) {
+    return false;
+  }
+  if (isLayoutColumn && !(0, _platformFeatureFlags.fg)('platform_editor_layout_column_menu_kill_switch_1')) {
+    return false;
+  }
+  return true;
+};

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

@@ -38,6 +38,7 @@ import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from
 import { ACTIVE_DRAG_HANDLE_ATTR, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { DragHandleNestedIcon } from './drag-handle-nested-icon';
 import { dragPreview } from './drag-preview';
+import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
 import { refreshAnchorName } from './utils/anchor-name';
 import { getAnchorAttrName } from './utils/dom-attr-name';
 import { VisibilityContainer } from './visibility-container';
@@ -364,6 +365,16 @@ const getNodeMargins = node => {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
+
+// Kill switch OFF: omit `isOpen` so the reducer toggles per clicked column. ON: keep
+// `isOpen: true` for legacy always-open. Centralised so all dispatch sites stay in sync.
+const buildToggleLayoutColumnMenuMeta = (anchorPos, openedViaKeyboard) => ({
+  anchorPos,
+  ...(fg('platform_editor_layout_column_menu_kill_switch_1') ? {
+    isOpen: true
+  } : {}),
+  openedViaKeyboard
+});
 export const DragHandle = ({
   view,
   api,
@@ -473,11 +484,7 @@ export const DragHandle = ({
         return tr;
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
-        tr.setMeta('toggleLayoutColumnMenu', {
-          anchorPos: startPos,
-          isOpen: true,
-          openedViaKeyboard: false
-        });
+        tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
       }
       const resolvedStartPos = tr.doc.resolve(startPos);
       const selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
@@ -529,11 +536,7 @@ export const DragHandle = ({
         return tr;
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
-        tr.setMeta('toggleLayoutColumnMenu', {
-          anchorPos: startPos,
-          isOpen: true,
-          openedViaKeyboard: false
-        });
+        tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
       }
       const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
       const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
@@ -621,11 +624,7 @@ export const DragHandle = ({
           tr
         });
         if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
-          tr.setMeta('toggleLayoutColumnMenu', {
-            anchorPos: startPos,
-            isOpen: true,
-            openedViaKeyboard: true
-          });
+          tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, true));
         }
         const rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
         const triggerByNode = editorExperiment('platform_synced_block', true) ? {
@@ -1073,7 +1072,7 @@ export const DragHandle = ({
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     ,
     onDragStart: handleIconDragStart
-  }, expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) && !isTopLevelNodeValue ? jsx(DragHandleNestedIcon, null) : jsx(DragHandleVerticalIcon, {
+  }, shouldUseNestedDragHandleIcon(isTopLevelNodeValue, isLayoutColumn) ? jsx(DragHandleNestedIcon, null) : jsx(DragHandleVerticalIcon, {
     spacing: "spacious",
     label: "",
     size: "small"

package/dist/es2019/ui/should-use-nested-drag-handle-icon.js

@@ -0,0 +1,19 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+
+// Nested icon for non-top-level nodes when the experiment is on. Exception: with the
+// kill switch OFF, layout columns use the full block handle instead.
+// TODO: EDITOR-7732 - remove this whole function when
+// `platform_editor_layout_column_menu_kill_switch_1` is cleaned up
+export const shouldUseNestedDragHandleIcon = (isTopLevelNode, isLayoutColumn) => {
+  if (!expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true)) {
+    return false;
+  }
+  if (isTopLevelNode) {
+    return false;
+  }
+  if (isLayoutColumn && !fg('platform_editor_layout_column_menu_kill_switch_1')) {
+    return false;
+  }
+  return true;
+};

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

@@ -43,6 +43,7 @@ import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from
 import { ACTIVE_DRAG_HANDLE_ATTR, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { DragHandleNestedIcon } from './drag-handle-nested-icon';
 import { dragPreview } from './drag-preview';
+import { shouldUseNestedDragHandleIcon } from './should-use-nested-drag-handle-icon';
 import { refreshAnchorName } from './utils/anchor-name';
 import { getAnchorAttrName } from './utils/dom-attr-name';
 import { VisibilityContainer } from './visibility-container';
@@ -366,6 +367,18 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
+
+// Kill switch OFF: omit `isOpen` so the reducer toggles per clicked column. ON: keep
+// `isOpen: true` for legacy always-open. Centralised so all dispatch sites stay in sync.
+var buildToggleLayoutColumnMenuMeta = function buildToggleLayoutColumnMenuMeta(anchorPos, openedViaKeyboard) {
+  return _objectSpread(_objectSpread({
+    anchorPos: anchorPos
+  }, fg('platform_editor_layout_column_menu_kill_switch_1') ? {
+    isOpen: true
+  } : {}), {}, {
+    openedViaKeyboard: openedViaKeyboard
+  });
+};
 export var DragHandle = function DragHandle(_ref) {
   var _api$core4, _api$blockControls8;
   var view = _ref.view,
@@ -494,11 +507,7 @@ export var DragHandle = function DragHandle(_ref) {
         return tr;
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
-        tr.setMeta('toggleLayoutColumnMenu', {
-          anchorPos: startPos,
-          isOpen: true,
-          openedViaKeyboard: false
-        });
+        tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
       }
       var resolvedStartPos = tr.doc.resolve(startPos);
       var selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
@@ -549,11 +558,7 @@ export var DragHandle = function DragHandle(_ref) {
         return tr;
       }
       if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
-        tr.setMeta('toggleLayoutColumnMenu', {
-          anchorPos: startPos,
-          isOpen: true,
-          openedViaKeyboard: false
-        });
+        tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, false));
       }
       var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
       var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
@@ -641,11 +646,7 @@ export var DragHandle = function DragHandle(_ref) {
           tr: tr
         });
         if (nodeType === 'layoutColumn' && expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
-          tr.setMeta('toggleLayoutColumnMenu', {
-            anchorPos: startPos,
-            isOpen: true,
-            openedViaKeyboard: true
-          });
+          tr.setMeta('toggleLayoutColumnMenu', buildToggleLayoutColumnMenuMeta(startPos, true));
         }
         var rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
         var triggerByNode = editorExperiment('platform_synced_block', true) ? {
@@ -1087,7 +1088,7 @@ export var DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true) && !isTopLevelNodeValue ? jsx(DragHandleNestedIcon, null) : jsx(DragHandleVerticalIcon, {
+      }, shouldUseNestedDragHandleIcon(isTopLevelNodeValue, isLayoutColumn) ? jsx(DragHandleNestedIcon, null) : jsx(DragHandleVerticalIcon, {
         spacing: "spacious",
         label: "",
         size: "small"

package/dist/esm/ui/should-use-nested-drag-handle-icon.js

@@ -0,0 +1,19 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+
+// Nested icon for non-top-level nodes when the experiment is on. Exception: with the
+// kill switch OFF, layout columns use the full block handle instead.
+// TODO: EDITOR-7732 - remove this whole function when
+// `platform_editor_layout_column_menu_kill_switch_1` is cleaned up
+export var shouldUseNestedDragHandleIcon = function shouldUseNestedDragHandleIcon(isTopLevelNode, isLayoutColumn) {
+  if (!expValEquals('platform_editor_nested_drag_handle_icon', 'isEnabled', true)) {
+    return false;
+  }
+  if (isTopLevelNode) {
+    return false;
+  }
+  if (isLayoutColumn && !fg('platform_editor_layout_column_menu_kill_switch_1')) {
+    return false;
+  }
+  return true;
+};

package/dist/types/ui/should-use-nested-drag-handle-icon.d.ts

@@ -0,0 +1 @@
+export declare const shouldUseNestedDragHandleIcon: (isTopLevelNode: boolean, isLayoutColumn: boolean) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "13.0.7",
+	"version": "13.1.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.0.0",
 		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/theme": "^26.0.0",
-		"@atlaskit/tmp-editor-statsig": "^110.0.0",
+		"@atlaskit/tmp-editor-statsig": "^111.0.0",
 		"@atlaskit/tokens": "^15.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -141,6 +141,10 @@
 		},
 		"confluence_frontend_native_tabs_extension": {
 			"type": "boolean"
+		},
+		"platform_editor_layout_column_menu_kill_switch_1": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	},
 	"devDependencies": {