@atlaskit/editor-plugin-block-controls 8.7.1 → 8.8.0

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

@@ -243,8 +243,12 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-var _apply = exports.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 = exports.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,
@@ -352,6 +356,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   }
   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;
   }
@@ -463,12 +468,35 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
           _iterator.f();
         }
       }
+      if (rightSideControlsEnabled && (0, _expValEquals.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 = (0, _decorationsDragHandle.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 = (0, _decorationsDragHandle.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 = (0, _decorationsDragHandle.dragHandleDecoration)({
         api: api,
@@ -485,9 +513,9 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     }
     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 = (0, _decorationsQuickInsertButton.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 = (0, _decorationsQuickInsertButton.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 = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)({
         api: api,
@@ -503,13 +531,13 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
       if ((0, _platformFeatureFlags.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);
@@ -524,16 +552,83 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
             });
             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 && (0, _expValEquals.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 && (0, _expValEquals.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
@@ -580,12 +675,15 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   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) && (0, _decorationsDragHandle.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 = (0, _decorationsDragHandle.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) && (0, _decorationsDragHandle.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) && (0, _decorationsDragHandle.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 ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
@@ -630,6 +728,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   };
 };
 var createPlugin = exports.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 = (0, _experiments.editorExperiment)('advanced_layouts', true, {
@@ -656,7 +755,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
         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: {
@@ -667,7 +766,12 @@ 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) {
-          return;
+          var _api$editorViewMode2;
+          var remixRightSideEnabled = rightSideControlsEnabled && (0, _expValEquals.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/cjs/pm-plugins/vanilla-quick-insert.js

@@ -13,6 +13,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _documentChecks = require("../ui/utils/document-checks");
 var _editorCommands = require("../ui/utils/editor-commands");
 var _quickInsertCalculatePosition = require("./quick-insert-calculate-position");
@@ -63,7 +64,7 @@ var vanillaQuickInsert = function vanillaQuickInsert(_ref) {
  * Create a Node which contains the quick insert button
  */
 var createVanillaButton = exports.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 = _model.DOMSerializer.renderSpec(document, vanillaQuickInsert(props)),
     dom = _DOMSerializer$render.dom;
   if (dom instanceof HTMLElement) {
@@ -82,11 +83,18 @@ var createVanillaButton = exports.createVanillaButton = function createVanillaBu
   // 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 && (0, _expValEquals.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 {
@@ -100,19 +108,34 @@ var createVanillaButton = exports.createVanillaButton = function createVanillaBu
     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 && (0, _expValEquals.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();
@@ -141,8 +164,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(_state.TextSelection.create(view.state.selection.$from.doc, newPos));
             return tr;
           });
@@ -156,8 +179,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;
             (0, _editorCommands.createNewLine)(view.state.selection.from)({
               tr: tr
             });
@@ -169,8 +192,8 @@ var handleQuickInsert = function handleQuickInsert(_ref4) {
       if (currentSelection instanceof _cellSelection.CellSelection) {
         // find the last inline position in the selection
         var lastInlinePosition = _state.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 _state.TextSelection)) {
             // this will create a new line after the node
             (0, _editorCommands.createNewLine)(lastInlinePosition.from)({

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

@@ -19,7 +19,6 @@ 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 _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
@@ -435,16 +434,19 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
     isFocused = _useState10[0],
     setIsFocused = _useState10[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags'], function (states) {
-      var _states$featureFlagsS;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
-  var isShiftDown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isShiftDown');
-  var interactionState = (0, _useSharedPluginStateSelector.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 = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true);
@@ -1122,6 +1124,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
         onDrop: handleOnDrop,
         disabled: dragHandleDisabled,
         "data-editor-block-ctrl-drag-handle": true,
+        "data-blocks-drag-handle": (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true) || undefined,
         "data-testid": "block-ctrl-drag-handle",
         "aria-label": dragHandleAriaLabel,
         onBlur: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? function () {
@@ -1208,8 +1211,15 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
     handleOptions = _ref10.handleOptions,
     isTopLevelNode = _ref10.isTopLevelNode,
     anchorRectCache = _ref10.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;
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
-    api: api
+    api: api,
+    controlSide: rightSideControlsEnabled ? 'left' : undefined
   }, (0, _react2.jsx)(DragHandle, {
     view: view,
     api: api,

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _styles = require("@atlaskit/editor-common/styles");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _constants = require("@atlaskit/theme/constants");
@@ -301,7 +301,7 @@ var quickInsertStyles = function quickInsertStyles() {
       maxWidth: '240px',
       backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
       color: "var(--ds-text-inverse, #FFFFFF)",
-      font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+      font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
       insetBlockStart: "var(--ds-space-0, 0px)",
       insetInlineStart: "var(--ds-space-0, 0px)",
       overflowWrap: 'break-word',
@@ -459,9 +459,14 @@ var dragAnchorStyles = (0, _react.css)({
 });
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var api = _ref.api;
-  var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
-    disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
-  });
+  var _useSharedPluginState = (0, _hooks.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 = (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
   var shouldRenderAnchors = (0, _styles.isCSSAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return (0, _react.jsx)(_react.Global, {

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

@@ -11,10 +11,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -160,7 +160,13 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     rootAnchorName = _ref.rootAnchorName,
     rootNodeType = _ref.rootNodeType,
     anchorRectCache = _ref.anchorRectCache;
-  var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
+  var _useSharedPluginState = (0, _hooks.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 = (0, _react.useState)({
       display: 'none'
     }),
@@ -364,8 +370,15 @@ var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function Qui
     rootAnchorName = _ref5.rootAnchorName,
     rootNodeType = _ref5.rootNodeType,
     anchorRectCache = _ref5.anchorRectCache;
+  var rightSideControlsEnabled = (0, _hooks.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 (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
-    api: api
+    api: api,
+    controlSide: rightSideControlsEnabled ? 'left' : undefined
   }, (0, _react2.jsx)(TypeAheadControl, {
     view: view,
     api: api,

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

@@ -1,17 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VisibilityContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _primitives = require("@atlaskit/primitives");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -21,6 +25,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 
+var RIGHT_CONTROL_HIDE_DELAY_MS = 150;
 var baseStyles = (0, _primitives.xcss)({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
 });
@@ -48,14 +53,70 @@ var hiddenStylesCSS = (0, _react2.css)({
 });
 var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
-    children = _ref.children;
-  var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
-  var isEditing = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isEditing');
-  var isMouseOut = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMouseOut');
+    children = _ref.children,
+    controlSide = _ref.controlSide;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
+      var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
+      return {
+        isTypeAheadOpen: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isOpen,
+        isEditing: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isEditing,
+        isMouseOut: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isMouseOut,
+        hoverSide: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.hoverSide,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
+        userIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
+        rightSideControlsEnabled: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.rightSideControlsEnabled
+      };
+    }),
+    isTypeAheadOpen = _useSharedPluginState.isTypeAheadOpen,
+    isEditing = _useSharedPluginState.isEditing,
+    isMouseOut = _useSharedPluginState.isMouseOut,
+    hoverSide = _useSharedPluginState.hoverSide,
+    editorViewMode = _useSharedPluginState.editorViewMode,
+    userIntent = _useSharedPluginState.userIntent,
+    rightSideControlsEnabled = _useSharedPluginState.rightSideControlsEnabled;
+  var isViewMode = editorViewMode === 'view';
+  var shouldRestrictBySide = rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true) && 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.
+  var sideHidden = shouldRestrictBySide && hoverSide !== undefined ? hoverSide !== controlSide : false;
+  // In view mode with right-side controls, we delay hiding on isMouseOut (see below) so the right-edge
+  // button stays visible when the user moves from the block toward the button (e.g. in edit/live
+  // pages), avoiding flicker as the mouse crosses boundaries.
+  var hideOnMouseOut = isMouseOut;
+  var shouldHideImmediate = isTypeAheadOpen || isEditing || hideOnMouseOut || userIntent === 'aiStreaming' || sideHidden;
 
-  // when ai streaming, hide the block controls
-  var userIntent = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userIntent.currentUserIntent');
-  var shouldHide = isTypeAheadOpen || isEditing || isMouseOut || userIntent === 'aiStreaming';
+  // Delay hiding the right control in view mode to reduce flickering when moving from block
+  // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).
+  var isRightControlViewMode = isViewMode && rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true) && controlSide === 'right';
+  // When in right-control view mode, we delay hiding so start visible; useEffect will update after delay
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    delayedShouldHide = _useState2[0],
+    setDelayedShouldHide = _useState2[1];
+  var hideTimeoutRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!isRightControlViewMode) {
+      return;
+    }
+    if (!shouldHideImmediate) {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+      setDelayedShouldHide(false);
+      return;
+    }
+    hideTimeoutRef.current = setTimeout(function () {
+      hideTimeoutRef.current = null;
+      setDelayedShouldHide(true);
+    }, RIGHT_CONTROL_HIDE_DELAY_MS);
+    return function () {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
+    };
+  }, [shouldHideImmediate, isRightControlViewMode]);
+  var shouldHide = isRightControlViewMode ? delayedShouldHide : shouldHideImmediate;
   if ((0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
   })) {