@atlaskit/editor-plugin-block-controls 9.0.33 → 9.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.1.1
+
+### Patch Changes
+
+- [`ef40f467da8e6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef40f467da8e6) -
+  Fix drag handle not appearing in last layout column and remix button not showing correctly when
+  confluence_remix_button_right_side_block_fg is enabled. Layout column drag handles now always show
+  regardless of hover side, remix button correctly shows on right-side hover only, and layoutSection
+  is always remixable regardless of content.
+- Updated dependencies
+
+## 9.1.0
+
+### Minor Changes
+
+- [`81e6d01a5d2b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81e6d01a5d2b5) -
+  Expose expandAndUpdateSelection as a plugin command so other plugins can update the ProseMirror
+  selection using the same block-control click logic
+
 ## 9.0.33
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -24,6 +24,7 @@ var _main = require("./pm-plugins/main");
 var _editorCommands = require("./pm-plugins/selection-preservation/editor-commands");
 var _pluginKey = require("./pm-plugins/selection-preservation/plugin-key");
 var _pmPlugin2 = require("./pm-plugins/selection-preservation/pm-plugin");
+var _expandAndUpdateSelection2 = require("./pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _globalStyles = require("./ui/global-styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -84,11 +85,29 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       return pmPlugins;
     },
     commands: {
+      expandAndUpdateSelection: function expandAndUpdateSelection(_ref3) {
+        var startPos = _ref3.startPos,
+          selection = _ref3.selection,
+          isShiftPressed = _ref3.isShiftPressed,
+          nodeType = _ref3.nodeType;
+        return function (_ref4) {
+          var tr = _ref4.tr;
+          (0, _expandAndUpdateSelection2.expandAndUpdateSelection)({
+            tr: tr,
+            selection: selection,
+            startPos: startPos,
+            isShiftPressed: isShiftPressed,
+            nodeType: nodeType,
+            api: api
+          });
+          return tr;
+        };
+      },
       moveNode: (0, _moveNode.moveNode)(api),
       moveToLayout: (0, _moveToLayout.moveToLayout)(api),
       showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions, rootPos, rootAnchorName, rootNodeType) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           var currMeta = tr.getMeta(_main.key);
           tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
             activeNode: {
@@ -105,9 +124,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       toggleBlockMenu: function toggleBlockMenu(options) {
-        return function (_ref4) {
+        return function (_ref6) {
           var _api$userIntent, _api$blockControls, _options$anchorName, _api$blockControls2;
-          var tr = _ref4.tr;
+          var tr = _ref6.tr;
           if (!(0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
             return tr;
           }
@@ -212,9 +231,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
-        return function (_ref5) {
+        return function (_ref7) {
           var _api$userIntent6;
-          var tr = _ref5.tr;
+          var tr = _ref7.tr;
           var pos = getPos();
           if (pos === undefined) {
             return tr;
@@ -244,9 +263,9 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setMultiSelectPositions: function setMultiSelectPositions(anchor, head) {
-        return function (_ref6) {
+        return function (_ref8) {
           var _api$selection, _$to$nodeBefore, _$from$nodeAfter;
-          var tr = _ref6.tr;
+          var tr = _ref8.tr;
           var _tr$selection = tr.selection,
             userAnchor = _tr$selection.anchor,
             userHead = _tr$selection.head;
@@ -292,8 +311,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         };
       },
       setSelectedViaDragHandle: function setSelectedViaDragHandle(isSelectedViaDragHandle) {
-        return function (_ref7) {
-          var tr = _ref7.tr;
+        return function (_ref9) {
+          var tr = _ref9.tr;
           var currMeta = tr.getMeta(_main.key);
           return tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
             isSelectedViaDragHandle: isSelectedViaDragHandle
@@ -337,7 +356,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
-        // rightSideControlsEnabled is the single source of truth (confluence_remix_icon_right_side from preset)
+        // rightSideControlsEnabled is the single source of truth (confluence_remix_button_right_side_block_fg from preset)
         sharedState.rightSideControlsEnabled = rightSideControlsEnabled;
         sharedState.hoverSide = rightSideControlsEnabled ? (_interactionTrackingP4 = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP4 === void 0 ? void 0 : _interactionTrackingP4.hoverSide : undefined;
       }

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -13,7 +13,6 @@ var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 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 _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
@@ -86,7 +85,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     var element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
     element.style.display = 'block';
-    if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    if ((0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
       element.setAttribute('data-blocks-decorator-widget', 'true');
     }
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -10,7 +10,6 @@ var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 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 _quickInsertButton = require("../ui/quick-insert-button");
 var _marks = require("./utils/marks");
@@ -76,7 +75,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     element.style.clear = 'unset';
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
-    if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    if ((0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
       element.setAttribute('data-blocks-quick-insert-button', 'true');
     }
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');

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

@@ -9,8 +9,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 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");
@@ -63,7 +63,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   // We shouldn't be firing mouse over transactions when the editor is disabled,
   // except in view mode when right-side controls are enabled (show controls on block hover)
   var rightSideControlsEnabled = (_api$blockControls$sh = api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.rightSideControlsEnabled) !== null && _api$blockControls$sh !== void 0 ? _api$blockControls$sh : false;
-  if (editorDisabled && (!isViewMode || !(rightSideControlsEnabled && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true)))) {
+  if (editorDisabled && (!isViewMode || !(rightSideControlsEnabled && (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')))) {
     return false;
   }
 
@@ -91,7 +91,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
 
   // When hovering over the right-edge button (rendered in a portal outside the block), resolve the
   // block from the container's anchor so activeNode stays set and the button remains visible.
-  if (!rootElement && rightSideControlsEnabled && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+  if (!rootElement && rightSideControlsEnabled && (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
     var rightEdgeContainer = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-right-edge-button-container]');
     if (rightEdgeContainer) {
       var anchor = rightEdgeContainer.getAttribute('data-blocks-right-edge-button-anchor');

package/dist/cjs/pm-plugins/interaction-tracking/handle-mouse-move.js

@@ -27,7 +27,7 @@ var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
 
 /**
  * Process hover position and set left/right side. Only invoked when right-side controls are
- * enabled (confluence_remix_icon_right_side); handleMouseMove returns early otherwise.
+ * enabled (confluence_remix_button_right_side_block_fg); handleMouseMove returns early otherwise.
  */
 var processHoverSide = function processHoverSide(view) {
   var event = pendingByView.get(view);
@@ -88,7 +88,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     (0, _commands.stopEditing)(view);
   }
 
-  // Only track hover side when right-side controls are enabled (single source: confluence_remix_icon_right_side via config)
+  // Only track hover side when right-side controls are enabled (single source: confluence_remix_button_right_side_block_fg via config)
   if (!rightSideControlsEnabled) {
     return false;
   }

package/dist/cjs/pm-plugins/interaction-tracking/pm-plugin.js

@@ -72,7 +72,7 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
     },
     view: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? function (view) {
       var editorContentArea = view.dom.closest('.ak-editor-content-area');
-      // rightSideControlsEnabled is the single source of truth (confluence_remix_icon_right_side from preset)
+      // rightSideControlsEnabled is the single source of truth (confluence_remix_button_right_side_block_fg from preset)
 
       var unbindMouseEnter;
       var unbindMouseLeave;

package/dist/cjs/pm-plugins/main.js

@@ -23,7 +23,6 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 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");
@@ -469,7 +468,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
           _iterator.f();
         }
       }
-      if (rightSideControlsEnabled && isViewMode && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      if (rightSideControlsEnabled && isViewMode && (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
         var _iterator2 = _createForOfIteratorHelper(nodeDecorationRegistry),
           _step2;
         try {
@@ -651,7 +650,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       } finally {
         _iterator5.f();
       }
-    } else if (isViewMode && rightSideControlsEnabled && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    } else if (isViewMode && rightSideControlsEnabled && (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
       // Remove view-mode right-side decorations when no active node
       var _iterator6 = _createForOfIteratorHelper(nodeDecorationRegistry),
         _step6;
@@ -813,7 +812,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         var isDisabled = api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 || (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.editorDisabled;
         if (isDisabled) {
           var _api$editorViewMode2;
-          var remixRightSideEnabled = rightSideControlsEnabled && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true);
+          var remixRightSideEnabled = rightSideControlsEnabled && (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg');
           // Hide decorations when disabled, except in view mode when right-side controls are enabled
           if (!remixRightSideEnabled || (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) !== 'view') {
             return;

package/dist/cjs/pm-plugins/utils/expand-and-update-selection.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandAndUpdateSelection = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _getSelection = require("./getSelection");
+var _selection2 = require("./selection");
+var isPosWithinRange = function isPosWithinRange(pos, range) {
+  return range.start <= pos && range.end >= pos + 1;
+};
+/**
+ * Expands the current selection to encompass the full block range
+ * starting from the given resolved position.
+ */
+var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
+  var selection = _ref.selection,
+    doc = _ref.doc,
+    resolvedStartPos = _ref.resolvedStartPos,
+    isShiftPressed = _ref.isShiftPressed;
+  // When not pressing shift, expand the current selection
+  // When shift selecting upwards, expand from start of node to selection end
+  // When shift selecting downwards, expand from selection start to end of node
+  var selectUp = resolvedStartPos.pos < selection.from;
+  var $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
+  var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
+  var adjusted = isShiftPressed ? {
+    $from: $from,
+    $to: $to
+  } : (0, _selection2.adjustSelectionBoundsForEdgePositions)($from, $to);
+  return (0, _selection.expandToBlockRange)(adjusted.$from, adjusted.$to);
+};
+/**
+ * Updates the transaction's selection based on the clicked drag handle position.
+ *
+ * - If the clicked handle is within an existing multi-block selection range, the selection
+ *   is expanded to cover both the existing range and the clicked node's range.
+ * - For tables, a table cell selection is used.
+ * - Otherwise, selects the single node at the clicked handle position.
+ */
+var expandAndUpdateSelection = exports.expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
+  var tr = _ref2.tr,
+    selection = _ref2.selection,
+    startPos = _ref2.startPos,
+    isShiftPressed = _ref2.isShiftPressed,
+    nodeType = _ref2.nodeType,
+    api = _ref2.api;
+  var resolvedStartPos = tr.doc.resolve(startPos);
+  var expandedRange = getExpandedSelectionRange({
+    doc: tr.doc,
+    selection: selection,
+    resolvedStartPos: resolvedStartPos,
+    isShiftPressed: isShiftPressed
+  });
+
+  // Set selection to expanded selection range if it encompasses the clicked drag handle
+  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && (0, _selection.isMultiBlockRange)(expandedRange.range)) {
+    // Then create a selection from the start of the first node to the end of the last node
+    tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
+  } else if (nodeType === 'table') {
+    (0, _utils.selectTableClosestToPos)(tr, tr.doc.resolve(startPos + 1));
+  } else {
+    // Select the clicked drag handle's node only
+    (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
+  }
+};

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

@@ -17,12 +17,10 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
-var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
-var _utils2 = require("@atlaskit/editor-tables/utils");
 var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -37,8 +35,9 @@ var _main = require("../pm-plugins/main");
 var _pluginKey = require("../pm-plugins/selection-preservation/plugin-key");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
+var _expandAndUpdateSelection = require("../pm-plugins/utils/expand-and-update-selection");
 var _getSelection = require("../pm-plugins/utils/getSelection");
-var _selection2 = require("../pm-plugins/utils/selection");
+var _selection = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragHandleNestedIcon = require("./drag-handle-nested-icon");
 var _dragPreview = require("./drag-preview");
@@ -340,73 +339,18 @@ var getNodeMargins = function getNodeMargins(node) {
   }
   return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
-var isPosWithinRange = function isPosWithinRange(pos, range) {
-  return range.start <= pos && range.end >= pos + 1;
-};
-/**
- * From the current selection and the position of the drag handle being clicked,
- * calculate the expanded block range up to the common ancestor.
- */
-var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
-  var selection = _ref.selection,
-    doc = _ref.doc,
-    resolvedStartPos = _ref.resolvedStartPos,
-    isShiftPressed = _ref.isShiftPressed;
-  // When not pressing shift, expand the current selection
-  // When shift selecting upwards, expand from start of node to selection end
-  // When shift selecting downwards, expand from selection start to end of node
-  var selectUp = resolvedStartPos.pos < selection.from;
-  var $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
-  var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
-  var adjusted = isShiftPressed ? {
-    $from: $from,
-    $to: $to
-  } : (0, _selection2.adjustSelectionBoundsForEdgePositions)($from, $to);
-  return (0, _selection.expandToBlockRange)(adjusted.$from, adjusted.$to);
-};
-/**
- * Updates the transaction with preserved selection logic.
- * Sets selection to expanded selection range if it encompasses the clicked drag handle,
- * otherwise selects the clicked drag handle's node only.
- */
-var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
-  var tr = _ref2.tr,
-    selection = _ref2.selection,
-    startPos = _ref2.startPos,
-    isShiftPressed = _ref2.isShiftPressed,
-    nodeType = _ref2.nodeType,
-    api = _ref2.api;
-  var resolvedStartPos = tr.doc.resolve(startPos);
-  var expandedRange = getExpandedSelectionRange({
-    doc: tr.doc,
-    selection: selection,
-    resolvedStartPos: resolvedStartPos,
-    isShiftPressed: isShiftPressed
-  });
-
-  // Set selection to expanded selection range if it encompases the clicked drag handle
-  if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && (0, _selection.isMultiBlockRange)(expandedRange.range)) {
-    // Then create a selection from the start of the first node to the end of the last node
-    tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, expandedRange.$from.pos), Math.max(selection.to, expandedRange.$to.pos)));
-  } else if (nodeType === 'table') {
-    (0, _utils2.selectTableClosestToPos)(tr, tr.doc.resolve(startPos + 1));
-  } else {
-    // Select the clicked drag handle's node only
-    (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
-  }
-};
-var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
+var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var _api$core4;
-  var view = _ref3.view,
-    api = _ref3.api,
-    formatMessage = _ref3.formatMessage,
-    getPos = _ref3.getPos,
-    anchorName = _ref3.anchorName,
-    nodeType = _ref3.nodeType,
-    handleOptions = _ref3.handleOptions,
-    _ref3$isTopLevelNode = _ref3.isTopLevelNode,
-    isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
-    anchorRectCache = _ref3.anchorRectCache;
+  var view = _ref.view,
+    api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    getPos = _ref.getPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    handleOptions = _ref.handleOptions,
+    _ref$isTopLevelNode = _ref.isTopLevelNode,
+    isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode,
+    anchorRectCache = _ref.anchorRectCache;
   var buttonRef = (0, _react.useRef)(null);
   var mouseDownRef = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(false),
@@ -521,9 +465,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
   }, []);
   var handleOnClickNew = (0, _react.useCallback)(function (e) {
     var _api$core;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
-      var tr = _ref4.tr;
+      var tr = _ref2.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -540,7 +484,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      expandAndUpdateSelection({
+      (0, _expandAndUpdateSelection.expandAndUpdateSelection)({
         tr: tr,
         selection: selection,
         startPos: startPos,
@@ -572,9 +516,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     if (!isMultiSelect) {
       setDragHandleSelected(!dragHandleSelected);
     }
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
       var _api$blockControls$sh, _api$analytics2;
-      var tr = _ref5.tr;
+      var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
@@ -585,8 +529,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
       } else if (isTopLevelNodeValue && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls3;
-        var alignAnchorHeadToSel = (0, _selection2.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
-        var selectionWithExpandedHead = (0, _selection2.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
+        var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
+        var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
         tr.setSelection(selectionWithExpandedHead);
         api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
           tr: tr
@@ -614,8 +558,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     if (!e.repeat && e.key === ' ') {
       var _api$core3;
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
-        var tr = _ref6.tr;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+        var tr = _ref4.tr;
         if (startPos === undefined) {
           return tr;
         }
@@ -649,14 +593,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
       e.preventDefault();
       e.stopPropagation();
       var startPos = getPos();
-      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref7) {
+      api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
         var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
-        var tr = _ref7.tr;
+        var tr = _ref5.tr;
         if (startPos === undefined) {
           return tr;
         }
         var selection = ((_selectionPreservatio2 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) || tr.selection;
-        expandAndUpdateSelection({
+        (0, _expandAndUpdateSelection.expandAndUpdateSelection)({
           tr: tr,
           selection: selection,
           startPos: startPos,
@@ -707,13 +651,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref8.nativeSetDragImage;
+        var nativeSetDragImage = _ref6.nativeSetDragImage;
         if (isMultiSelect) {
           var _api$core6;
-          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref9) {
-            var tr = _ref9.tr;
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
+            var tr = _ref7.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -791,8 +735,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
               };
             }
           },
-          render: function render(_ref0) {
-            var container = _ref0.container;
+          render: function render(_ref8) {
+            var container = _ref8.container;
             var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -828,9 +772,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref1) {
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref9) {
           var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
-          var tr = _ref1.tr;
+          var tr = _ref9.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -1150,7 +1094,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         onDrop: handleOnDrop,
         disabled: dragHandleDisabled,
         "data-editor-block-ctrl-drag-handle": true,
-        "data-blocks-drag-handle": (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_remix_icon_right_side', 'isEnabled', true) || undefined,
+        "data-blocks-drag-handle": (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg') || undefined,
         "data-testid": "block-ctrl-drag-handle",
         "aria-label": dragHandleAriaLabel,
         onBlur: (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ? function () {
@@ -1235,25 +1179,30 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
-  var view = _ref10.view,
-    api = _ref10.api,
-    formatMessage = _ref10.formatMessage,
-    getPos = _ref10.getPos,
-    anchorName = _ref10.anchorName,
-    nodeType = _ref10.nodeType,
-    handleOptions = _ref10.handleOptions,
-    isTopLevelNode = _ref10.isTopLevelNode,
-    anchorRectCache = _ref10.anchorRectCache;
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref0) {
+  var view = _ref0.view,
+    api = _ref0.api,
+    formatMessage = _ref0.formatMessage,
+    getPos = _ref0.getPos,
+    anchorName = _ref0.anchorName,
+    nodeType = _ref0.nodeType,
+    handleOptions = _ref0.handleOptions,
+    isTopLevelNode = _ref0.isTopLevelNode,
+    anchorRectCache = _ref0.anchorRectCache;
   var rightSideControlsEnabled = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
     var _states$blockControls2, _states$blockControls3;
     return {
       rightSideControlsEnabled: (_states$blockControls2 = (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.rightSideControlsEnabled) !== null && _states$blockControls2 !== void 0 ? _states$blockControls2 : false
     };
   }).rightSideControlsEnabled;
+  // Layout column drag handles sit at the top-centre of each column, not on a left/right edge.
+  // Don't restrict by hoverSide for layout columns — the drag handle should always be visible
+  // when hovering anywhere over the column, regardless of which side of the layoutSection the
+  // column is on. (The right-side remix button is a separate node decoration and is unaffected.)
+  var isLayoutColumn = nodeType === 'layoutColumn';
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api,
-    controlSide: rightSideControlsEnabled ? 'left' : undefined
+    controlSide: rightSideControlsEnabled && !isLayoutColumn ? 'left' : undefined
   }, (0, _react2.jsx)(DragHandle, {
     view: view,
     api: api,

package/dist/cjs/ui/visibility-container.js

@@ -74,7 +74,7 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     userIntent = _useSharedPluginState.userIntent,
     rightSideControlsEnabled = _useSharedPluginState.rightSideControlsEnabled;
   var isViewMode = editorViewMode === 'view';
-  // rightSideControlsEnabled is the single source of truth (confluence_remix_icon_right_side from preset)
+  // rightSideControlsEnabled is the single source of truth (confluence_remix_button_right_side_block_fg from preset)
   var shouldRestrictBySide = rightSideControlsEnabled && controlSide !== undefined && !isViewMode;
   // Only restrict by side when hoverSide is known (after mousemove). When undefined, show both
   // controls so drag handle is visible on load and for keyboard-only users.

package/dist/es2019/blockControlsPlugin.js

@@ -16,6 +16,7 @@ import { createPlugin, key } from './pm-plugins/main';
 import { startPreservingSelection, stopPreservingSelection } from './pm-plugins/selection-preservation/editor-commands';
 import { selectionPreservationPluginKey } from './pm-plugins/selection-preservation/plugin-key';
 import { createSelectionPreservationPlugin } from './pm-plugins/selection-preservation/pm-plugin';
+import { expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export const blockControlsPlugin = ({
@@ -70,6 +71,24 @@ export const blockControlsPlugin = ({
       return pmPlugins;
     },
     commands: {
+      expandAndUpdateSelection: ({
+        startPos,
+        selection,
+        isShiftPressed,
+        nodeType
+      }) => ({
+        tr
+      }) => {
+        expandAndUpdateSelection({
+          tr,
+          selection,
+          startPos,
+          isShiftPressed,
+          nodeType,
+          api: api
+        });
+        return tr;
+      },
       moveNode: moveNode(api),
       moveToLayout: moveToLayout(api),
       showDragHandleAt: (pos, anchorName, nodeType, handleOptions, rootPos, rootAnchorName, rootNodeType) => ({
@@ -320,7 +339,7 @@ export const blockControlsPlugin = ({
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3, _interactionTrackingP4;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
-        // rightSideControlsEnabled is the single source of truth (confluence_remix_icon_right_side from preset)
+        // rightSideControlsEnabled is the single source of truth (confluence_remix_button_right_side_block_fg from preset)
         sharedState.rightSideControlsEnabled = rightSideControlsEnabled;
         sharedState.hoverSide = rightSideControlsEnabled ? (_interactionTrackingP4 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP4 === void 0 ? void 0 : _interactionTrackingP4.hoverSide : undefined;
       }