@atlaskit/editor-plugin-block-controls 8.7.2 → 8.8.1

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

@@ -4,11 +4,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
+
+/** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
+var BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var MOUSE_LEAVE_DEBOUNCE_MS = 200;
+var isMovingToBlockControlsArea = function isMovingToBlockControlsArea(target) {
+  return target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
+};
 export var interactionTrackingPluginKey = new PluginKey('interactionTrackingPlugin');
 export var createInteractionTrackingPlugin = function createInteractionTrackingPlugin() {
+  var rightSideControlsEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return new SafePlugin({
     key: interactionTrackingPluginKey,
     state: {
@@ -33,10 +42,17 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
             break;
           case 'mouseLeave':
             newState.isMouseOut = true;
+            newState.hoverSide = undefined;
             break;
           case 'mouseEnter':
             newState.isMouseOut = false;
             break;
+          case 'setHoverSide':
+            newState.hoverSide = meta.side;
+            break;
+          case 'clearHoverSide':
+            newState.hoverSide = undefined;
+            break;
         }
         return _objectSpread(_objectSpread({}, pluginState), newState);
       }
@@ -44,30 +60,104 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
     props: {
       handleKeyDown: handleKeyDown,
       handleDOMEvents: {
-        mousemove: handleMouseMove
+        mousemove: function mousemove(view, event) {
+          return handleMouseMove(view, event, rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true));
+        }
       }
     },
     view: editorExperiment('platform_editor_controls', 'variant1') ? function (view) {
       var editorContentArea = view.dom.closest('.ak-editor-content-area');
+      var remixRightSideEnabled = rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true);
       var unbindMouseEnter;
       var unbindMouseLeave;
+      var unbindDocumentMouseMove;
+      var mouseLeaveTimeoutId = null;
+      var lastMousePosition = {
+        x: 0,
+        y: 0
+      };
+      var scheduleMouseLeave = function scheduleMouseLeave(event) {
+        if (mouseLeaveTimeoutId) {
+          clearTimeout(mouseLeaveTimeoutId);
+          mouseLeaveTimeoutId = null;
+        }
+
+        // Don't set isMouseOut when moving to block controls (right-edge button, drag handle, etc.)
+        if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true) && isMovingToBlockControlsArea(event.relatedTarget)) {
+          return;
+        }
+        mouseLeaveTimeoutId = setTimeout(function () {
+          mouseLeaveTimeoutId = null;
+          // Before dispatching, check if mouse has moved to block controls (e.g. through empty space)
+          if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true) && typeof document !== 'undefined') {
+            var el = document.elementFromPoint(lastMousePosition.x, lastMousePosition.y);
+            if (el && isMovingToBlockControlsArea(el)) {
+              return;
+            }
+          }
+          handleMouseLeave(view, rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true));
+        }, MOUSE_LEAVE_DEBOUNCE_MS);
+      };
+      var cancelScheduledMouseLeave = function cancelScheduledMouseLeave() {
+        if (mouseLeaveTimeoutId) {
+          clearTimeout(mouseLeaveTimeoutId);
+          mouseLeaveTimeoutId = null;
+        }
+      };
       if (editorContentArea) {
+        if (remixRightSideEnabled && typeof document !== 'undefined') {
+          unbindDocumentMouseMove = bind(document, {
+            type: 'mousemove',
+            listener: function listener(event) {
+              lastMousePosition = {
+                x: event.clientX,
+                y: event.clientY
+              };
+              // Use document-level mousemove so we get events when hovering over block
+              // controls (which may be in portals outside the editor DOM). Without this,
+              // handleDOMEvents.mousemove only fires when over the editor content.
+              if (editorContentArea.contains(event.target) || isMovingToBlockControlsArea(event.target)) {
+                handleMouseMove(view, event, rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true));
+              }
+            },
+            options: {
+              passive: true
+            }
+          });
+        }
         unbindMouseEnter = bind(editorContentArea, {
           type: 'mouseenter',
           listener: function listener() {
+            if (remixRightSideEnabled) {
+              cancelScheduledMouseLeave();
+            }
             handleMouseEnter(view);
           }
         });
         unbindMouseLeave = bind(editorContentArea, {
           type: 'mouseleave',
-          listener: function listener() {
-            handleMouseLeave(view);
+          listener: function listener(event) {
+            var e = event;
+            lastMousePosition = {
+              x: e.clientX,
+              y: e.clientY
+            };
+            if (remixRightSideEnabled) {
+              scheduleMouseLeave(e);
+            } else {
+              handleMouseLeave(view, false);
+            }
           }
         });
       }
       return {
         destroy: function destroy() {
           var _unbindMouseEnter, _unbindMouseLeave;
+          if (remixRightSideEnabled) {
+            var _unbindDocumentMouseM;
+            cancelScheduledMouseLeave();
+            (_unbindDocumentMouseM = unbindDocumentMouseMove) === null || _unbindDocumentMouseM === void 0 || _unbindDocumentMouseM();
+          }
           (_unbindMouseEnter = unbindMouseEnter) === null || _unbindMouseEnter === void 0 || _unbindMouseEnter();
           (_unbindMouseLeave = unbindMouseLeave) === null || _unbindMouseLeave === void 0 || _unbindMouseLeave();
         }

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

@@ -236,8 +236,12 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-var _apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup) {
-  var _api$limitedMode, _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+var _apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
+  var _api$limitedMode, _meta$multiSelectDnD, _api$editorViewMode, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$toggleMenu6, _meta$toggleMenu7, _meta$toggleMenu8, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+  var rightSideControlsEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+  var anchorRectCache = arguments.length > 9 ? arguments[9] : undefined;
+  var resizeObserverWidth = arguments.length > 10 ? arguments[10] : undefined;
+  var pragmaticCleanup = arguments.length > 11 ? arguments[11] : undefined;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -345,6 +349,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   }
   var maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
   var latestActiveNode = meta === null || meta === void 0 ? void 0 : meta.activeNode;
+  var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
   if (!latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
     latestActiveNode = activeNode;
   }
@@ -456,12 +461,35 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
           _iterator.f();
         }
       }
+      if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true) && isViewMode) {
+        var _iterator2 = _createForOfIteratorHelper(nodeDecorationRegistry),
+          _step2;
+        try {
+          var _loop2 = function _loop2() {
+            var factory = _step2.value;
+            if (factory.showInViewMode) {
+              var _activeNode1, _activeNode10;
+              var old = decorations.find((_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, function (spec) {
+                return spec.type === factory.type;
+              });
+              decorations = decorations.remove(old);
+            }
+          };
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            _loop2();
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
     }
   } else if (api) {
-    var _latestActiveNode5;
-    if (shouldRecreateHandle) {
-      var _activeNode1, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      var _oldHandle = findHandleDec(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
+    var _latestActiveNode5, _latestActiveNode14;
+    if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
+      var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      var _oldHandle = findHandleDec(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
       decorations = decorations.remove(_oldHandle);
       var handleDec = dragHandleDecoration({
         api: api,
@@ -478,9 +506,9 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined &&
     // platform_editor_controls note: enables quick insert
-    flags.toolbarFlagsEnabled) {
-      var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
-      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
+    flags.toolbarFlagsEnabled && (!rightSideControlsEnabled || !isViewMode)) {
+      var _activeNode13, _activeNode14, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
+      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = quickInsertButtonDecoration({
         api: api,
@@ -496,13 +524,13 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
       if (fg('platform_editor_expose_block_controls_deco_api')) {
-        var _iterator2 = _createForOfIteratorHelper(nodeDecorationRegistry),
-          _step2;
+        var _iterator3 = _createForOfIteratorHelper(nodeDecorationRegistry),
+          _step3;
         try {
-          var _loop2 = function _loop2() {
-            var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
-            var factory = _step2.value;
-            var old = decorations.find((_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos, function (spec) {
+          var _loop3 = function _loop3() {
+            var _activeNode15, _activeNode16, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
+            var factory = _step3.value;
+            var old = decorations.find((_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.rootPos, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, function (spec) {
               return spec.type === factory.type;
             });
             decorations = decorations.remove(old);
@@ -517,16 +545,83 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
             });
             decorations = decorations.add(newState.doc, [dec]);
           };
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            _loop2();
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            _loop3();
           }
         } catch (err) {
-          _iterator2.e(err);
+          _iterator3.e(err);
         } finally {
-          _iterator2.f();
+          _iterator3.f();
         }
       }
     }
+
+    // In view mode (edit/live pages), show right-side controls on block hover (without drag handle or quick insert)
+    if (isViewMode && ((_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.rootPos) !== undefined && flags.toolbarFlagsEnabled && rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      var rootPos = latestActiveNode.rootPos;
+      var _iterator4 = _createForOfIteratorHelper(nodeDecorationRegistry),
+        _step4;
+      try {
+        var _loop4 = function _loop4() {
+          var factory = _step4.value;
+          if (factory.showInViewMode) {
+            var _latestActiveNode15, _latestActiveNode16, _latestActiveNode17, _latestActiveNode18, _latestActiveNode19;
+            var existingAtPos = decorations.find(rootPos, rootPos, function (spec) {
+              return spec.type === factory.type;
+            });
+            // Skip remove/re-add when decoration already exists at correct position - avoids
+            // flickering from widget destroy/recreate on every transaction (e.g. on hover).
+            if (existingAtPos.length > 0) {
+              return 1; // continue
+            }
+            // Remove any stale decoration at a different position (e.g. after moving to another block)
+            var stale = decorations.find(0, newState.doc.nodeSize, function (spec) {
+              return spec.type === factory.type;
+            });
+            decorations = decorations.remove(stale);
+            var dec = factory.create({
+              editorState: newState,
+              nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+              anchorName: (_latestActiveNode15 = latestActiveNode) === null || _latestActiveNode15 === void 0 ? void 0 : _latestActiveNode15.anchorName,
+              nodeType: (_latestActiveNode16 = latestActiveNode) === null || _latestActiveNode16 === void 0 ? void 0 : _latestActiveNode16.nodeType,
+              rootPos: (_latestActiveNode17 = latestActiveNode) === null || _latestActiveNode17 === void 0 ? void 0 : _latestActiveNode17.rootPos,
+              rootAnchorName: (_latestActiveNode18 = latestActiveNode) === null || _latestActiveNode18 === void 0 ? void 0 : _latestActiveNode18.rootAnchorName,
+              rootNodeType: (_latestActiveNode19 = latestActiveNode) === null || _latestActiveNode19 === void 0 ? void 0 : _latestActiveNode19.rootNodeType
+            });
+            decorations = decorations.add(newState.doc, [dec]);
+          }
+        };
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          if (_loop4()) continue;
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    } else if (isViewMode && rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      // Remove view-mode right-side decorations when no active node
+      var _iterator5 = _createForOfIteratorHelper(nodeDecorationRegistry),
+        _step5;
+      try {
+        var _loop5 = function _loop5() {
+          var factory = _step5.value;
+          if (factory.showInViewMode) {
+            var old = decorations.find(0, newState.doc.nodeSize, function (spec) {
+              return spec.type === factory.type;
+            });
+            decorations = decorations.remove(old);
+          }
+        };
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          _loop5();
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+    }
   }
 
   // Drop targets may be missing when the node count is being changed during a drag
@@ -573,12 +668,15 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var newActiveNode;
   // platform_editor_controls note: enables quick insert
   if (flags.toolbarFlagsEnabled) {
-    var _latestActiveNode14, _latestActiveNode15;
+    var _latestActiveNode20, _latestActiveNode21;
     // remove isEmptyDoc check and let decorations render and determine their own visibility
-    newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos, (_latestActiveNode15 = latestActiveNode) === null || _latestActiveNode15 === void 0 ? void 0 : _latestActiveNode15.pos).length === 0 ? null : latestActiveNode;
+    // In view mode with right-side controls we render node decorations (right-edge button), not the
+    // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
+    var hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode20 = latestActiveNode) === null || _latestActiveNode20 === void 0 ? void 0 : _latestActiveNode20.pos, (_latestActiveNode21 = latestActiveNode) === null || _latestActiveNode21 === void 0 ? void 0 : _latestActiveNode21.pos).length > 0 || isViewMode && rightSideControlsEnabled;
+    newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
-    var _latestActiveNode16, _latestActiveNode17;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode16 = latestActiveNode) === null || _latestActiveNode16 === void 0 ? void 0 : _latestActiveNode16.pos, (_latestActiveNode17 = latestActiveNode) === null || _latestActiveNode17 === void 0 ? void 0 : _latestActiveNode17.pos).length === 0 ? null : latestActiveNode;
+    var _latestActiveNode22, _latestActiveNode23;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode22 = latestActiveNode) === null || _latestActiveNode22 === void 0 ? void 0 : _latestActiveNode22.pos, (_latestActiveNode23 = latestActiveNode) === null || _latestActiveNode23 === void 0 ? void 0 : _latestActiveNode23.pos).length === 0 ? null : latestActiveNode;
   }
   var isMenuOpenNew = isMenuOpen;
   if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
@@ -624,6 +722,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
 };
 export { _apply as apply };
 export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) {
+  var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
@@ -650,7 +749,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         return initialState;
       },
       apply: function apply(tr, currentState, _, newState) {
-        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup);
+        return _apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup);
       }
     },
     props: {
@@ -661,7 +760,12 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
         }
         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) {
-          return;
+          var _api$editorViewMode2;
+          var remixRightSideEnabled = rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true);
+          // 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;
+          }
         }
         return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
       },

package/dist/esm/pm-plugins/vanilla-quick-insert.js

@@ -8,6 +8,7 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from '../ui/utils/document-checks';
 import { createNewLine } from '../ui/utils/editor-commands';
 import { calculatePosition } from './quick-insert-calculate-position';
@@ -56,7 +57,7 @@ var vanillaQuickInsert = function vanillaQuickInsert(_ref) {
  * Create a Node which contains the quick insert button
  */
 export var createVanillaButton = function createVanillaButton(props) {
-  var _props$api$typeAhead, _props$api$blockContr, _props$api$typeAhead2, _props$api$blockContr2;
+  var _props$api$typeAhead, _props$api$blockContr, _props$api$blockContr2, _props$api$blockContr3, _props$api$blockContr4, _props$api$editorView, _props$api$typeAhead2, _props$api$blockContr5;
   var _DOMSerializer$render = DOMSerializer.renderSpec(document, vanillaQuickInsert(props)),
     dom = _DOMSerializer$render.dom;
   if (dom instanceof HTMLElement) {
@@ -75,11 +76,18 @@ export var createVanillaButton = function createVanillaButton(props) {
   // Dynamically control the visibility of the node
   var isTypeAheadOpen = (_props$api$typeAhead = props.api.typeAhead) === null || _props$api$typeAhead === void 0 || (_props$api$typeAhead = _props$api$typeAhead.sharedState.currentState()) === null || _props$api$typeAhead === void 0 ? void 0 : _props$api$typeAhead.isOpen;
   var isEditing = (_props$api$blockContr = props.api.blockControls) === null || _props$api$blockContr === void 0 || (_props$api$blockContr = _props$api$blockContr.sharedState.currentState()) === null || _props$api$blockContr === void 0 ? void 0 : _props$api$blockContr.isEditing;
+  var hoverSide = (_props$api$blockContr2 = props.api.blockControls) === null || _props$api$blockContr2 === void 0 || (_props$api$blockContr2 = _props$api$blockContr2.sharedState.currentState()) === null || _props$api$blockContr2 === void 0 ? void 0 : _props$api$blockContr2.hoverSide;
+  var rightSideControlsEnabled = (_props$api$blockContr3 = (_props$api$blockContr4 = props.api.blockControls) === null || _props$api$blockContr4 === void 0 || (_props$api$blockContr4 = _props$api$blockContr4.sharedState.currentState()) === null || _props$api$blockContr4 === void 0 ? void 0 : _props$api$blockContr4.rightSideControlsEnabled) !== null && _props$api$blockContr3 !== void 0 ? _props$api$blockContr3 : false;
+  var editorViewMode = (_props$api$editorView = props.api.editorViewMode) === null || _props$api$editorView === void 0 || (_props$api$editorView = _props$api$editorView.sharedState.currentState()) === null || _props$api$editorView === void 0 ? void 0 : _props$api$editorView.mode;
   var changeDOMVisibility = function changeDOMVisibility() {
     if (!(dom instanceof HTMLElement)) {
       return;
     }
-    if (isTypeAheadOpen || isEditing) {
+    var isViewMode = editorViewMode === 'view';
+    var shouldRestrictBySide = rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true) && !isViewMode;
+    // Only restrict by side when hoverSide is known. When undefined, show quick insert.
+    var sideHidden = shouldRestrictBySide && hoverSide !== undefined ? hoverSide !== 'left' : false;
+    if (isTypeAheadOpen || isEditing || sideHidden) {
       dom.classList.add('blocks-quick-insert-invisible-container');
       dom.classList.remove('blocks-quick-insert-visible-container');
     } else {
@@ -93,19 +101,34 @@ export var createVanillaButton = function createVanillaButton(props) {
     isTypeAheadOpen = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isOpen;
     changeDOMVisibility();
   }));
-  props.cleanupCallbacks.push((_props$api$blockContr2 = props.api.blockControls) === null || _props$api$blockContr2 === void 0 ? void 0 : _props$api$blockContr2.sharedState.onChange(function (_ref3) {
+  props.cleanupCallbacks.push((_props$api$blockContr5 = props.api.blockControls) === null || _props$api$blockContr5 === void 0 ? void 0 : _props$api$blockContr5.sharedState.onChange(function (_ref3) {
+    var _nextSharedState$righ;
     var nextSharedState = _ref3.nextSharedState;
     isEditing = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isEditing;
+    hoverSide = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.hoverSide;
+    rightSideControlsEnabled = (_nextSharedState$righ = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.rightSideControlsEnabled) !== null && _nextSharedState$righ !== void 0 ? _nextSharedState$righ : false;
     changeDOMVisibility();
   }));
+  // Only subscribe to view mode when right-side controls are enabled (editorViewMode affects side restriction)
+  if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    var _props$api$editorView2, _props$api$editorView3, _props$api$editorView4;
+    var unsubscribeViewMode = (_props$api$editorView2 = props.api.editorViewMode) === null || _props$api$editorView2 === void 0 || (_props$api$editorView3 = (_props$api$editorView4 = _props$api$editorView2.sharedState).onChange) === null || _props$api$editorView3 === void 0 ? void 0 : _props$api$editorView3.call(_props$api$editorView4, function (_ref4) {
+      var nextSharedState = _ref4.nextSharedState;
+      editorViewMode = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode;
+      changeDOMVisibility();
+    });
+    if (unsubscribeViewMode) {
+      props.cleanupCallbacks.push(unsubscribeViewMode);
+    }
+  }
   return dom;
 };
 var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
-var handleQuickInsert = function handleQuickInsert(_ref4) {
+var handleQuickInsert = function handleQuickInsert(_ref5) {
   var _api$quickInsert;
-  var api = _ref4.api,
-    view = _ref4.view,
-    getPos = _ref4.getPos;
+  var api = _ref5.api,
+    view = _ref5.view,
+    getPos = _ref5.getPos;
   // if the selection is not within the node this decoration is rendered at
   // then insert a newline and trigger quick insert
   var start = getPos();
@@ -134,8 +157,8 @@ var handleQuickInsert = function handleQuickInsert(_ref4) {
           var newPos =
           //if the current selection is selected from right to left, then set the selection to the start of the paragraph
           currentSelection.anchor === currentSelection.to ? currentParagraphNode.pos : currentParagraphNode.pos + currentParagraphNode.node.nodeSize - 1;
-          api.core.actions.execute(function (_ref5) {
-            var tr = _ref5.tr;
+          api.core.actions.execute(function (_ref6) {
+            var tr = _ref6.tr;
             tr.setSelection(TextSelection.create(view.state.selection.$from.doc, newPos));
             return tr;
           });
@@ -149,8 +172,8 @@ var handleQuickInsert = function handleQuickInsert(_ref4) {
           // otherwise need to force the selection to be at the start of the node, because
           // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
           // consistent NodeSelection for root level nodes.
-          api.core.actions.execute(function (_ref6) {
-            var tr = _ref6.tr;
+          api.core.actions.execute(function (_ref7) {
+            var tr = _ref7.tr;
             createNewLine(view.state.selection.from)({
               tr: tr
             });
@@ -162,8 +185,8 @@ var handleQuickInsert = function handleQuickInsert(_ref4) {
       if (currentSelection instanceof CellSelection) {
         // find the last inline position in the selection
         var lastInlinePosition = TextSelection.near(view.state.selection.$to, -1);
-        lastInlinePosition && api.core.actions.execute(function (_ref7) {
-          var tr = _ref7.tr;
+        lastInlinePosition && api.core.actions.execute(function (_ref8) {
+          var tr = _ref8.tr;
           if (!(lastInlinePosition instanceof TextSelection)) {
             // this will create a new line after the node
             createNewLine(lastInlinePosition.from)({

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

@@ -21,7 +21,6 @@ import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaK
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { expandToBlockRange, isMultiBlockRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullPageNarrowBreakout, akEditorTableToolbarSize, relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles/consts';
@@ -432,16 +431,19 @@ export var DragHandle = function DragHandle(_ref3) {
     _useState10 = _slicedToArray(_useState1, 2),
     isFocused = _useState10[0],
     setIsFocused = _useState10[1];
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags'], function (states) {
-      var _states$featureFlagsS;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags', 'selection', 'blockControls', 'interaction'], function (states) {
+      var _states$featureFlagsS, _states$selectionStat, _states$blockControls, _states$interactionSt;
       return {
-        macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates
+        macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates,
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+        isShiftDown: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isShiftDown,
+        interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState
       };
     }),
-    macroInteractionUpdates = _useSharedPluginState.macroInteractionUpdates;
-  var selection = useSharedPluginStateSelector(api, 'selection.selection');
-  var isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
-  var interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
+    macroInteractionUpdates = _useSharedPluginState.macroInteractionUpdates,
+    selection = _useSharedPluginState.selection,
+    isShiftDown = _useSharedPluginState.isShiftDown,
+    interactionState = _useSharedPluginState.interactionState;
   var start = getPos();
   var isLayoutColumn = nodeType === 'layoutColumn';
   var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
@@ -1119,6 +1121,7 @@ export var DragHandle = function DragHandle(_ref3) {
         onDrop: handleOnDrop,
         disabled: dragHandleDisabled,
         "data-editor-block-ctrl-drag-handle": true,
+        "data-blocks-drag-handle": expValEquals('confluence_remix_icon_right_side', 'isEnabled', true) || undefined,
         "data-testid": "block-ctrl-drag-handle",
         "aria-label": dragHandleAriaLabel,
         onBlur: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) ? function () {
@@ -1205,8 +1208,15 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref10)
     handleOptions = _ref10.handleOptions,
     isTopLevelNode = _ref10.isTopLevelNode,
     anchorRectCache = _ref10.anchorRectCache;
+  var rightSideControlsEnabled = 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;
   return jsx(VisibilityContainer, {
-    api: api
+    api: api,
+    controlSide: rightSideControlsEnabled ? 'left' : undefined
   }, jsx(DragHandle, {
     view: view,
     api: api,

package/dist/esm/ui/global-styles.js

@@ -5,9 +5,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { layers } from '@atlaskit/theme/constants';
@@ -452,9 +452,14 @@ var dragAnchorStyles = css({
 });
 export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var api = _ref.api;
-  var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
-    disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
-  });
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
+      var _states$blockControls;
+      return {
+        isDragging: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isDragging
+      };
+    }),
+    isDraggingFromState = _useSharedPluginState.isDragging;
+  var isDragging = expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
   var shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return jsx(Global, {

package/dist/esm/ui/quick-insert-button.js

@@ -12,10 +12,10 @@ import React, { useCallback, useEffect, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { relativeSizeToBaseFontSize } from '@atlaskit/editor-shared-styles';
@@ -155,7 +155,13 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     rootAnchorName = _ref.rootAnchorName,
     rootNodeType = _ref.rootNodeType,
     anchorRectCache = _ref.anchorRectCache;
-  var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags'], function (states) {
+      var _states$featureFlagsS;
+      return {
+        macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates
+      };
+    }),
+    macroInteractionUpdates = _useSharedPluginState.macroInteractionUpdates;
   var _useState = useState({
       display: 'none'
     }),
@@ -359,8 +365,15 @@ export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5)
     rootAnchorName = _ref5.rootAnchorName,
     rootNodeType = _ref5.rootNodeType,
     anchorRectCache = _ref5.anchorRectCache;
+  var rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
+    var _states$blockControls, _states$blockControls2;
+    return {
+      rightSideControlsEnabled: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.rightSideControlsEnabled) !== null && _states$blockControls !== void 0 ? _states$blockControls : false
+    };
+  }).rightSideControlsEnabled;
   return jsx(VisibilityContainer, {
-    api: api
+    api: api,
+    controlSide: rightSideControlsEnabled ? 'left' : undefined
   }, jsx(TypeAheadControl, {
     view: view,
     api: api,