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

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

@@ -5,6 +5,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';
@@ -55,7 +56,7 @@ const vanillaQuickInsert = ({
  * Create a Node which contains the quick insert button
  */
 export const createVanillaButton = props => {
-  var _props$api$typeAhead, _props$api$typeAhead$, _props$api$blockContr, _props$api$blockContr2, _props$api$typeAhead2, _props$api$blockContr3;
+  var _props$api$typeAhead, _props$api$typeAhead$, _props$api$blockContr, _props$api$blockContr2, _props$api$blockContr3, _props$api$blockContr4, _props$api$blockContr5, _props$api$blockContr6, _props$api$blockContr7, _props$api$editorView, _props$api$editorView2, _props$api$typeAhead2, _props$api$blockContr8;
   const {
     dom
   } = DOMSerializer.renderSpec(document, vanillaQuickInsert(props));
@@ -73,11 +74,18 @@ export const createVanillaButton = props => {
   // Dynamically control the visibility of the node
   let isTypeAheadOpen = (_props$api$typeAhead = props.api.typeAhead) === null || _props$api$typeAhead === void 0 ? void 0 : (_props$api$typeAhead$ = _props$api$typeAhead.sharedState.currentState()) === null || _props$api$typeAhead$ === void 0 ? void 0 : _props$api$typeAhead$.isOpen;
   let isEditing = (_props$api$blockContr = props.api.blockControls) === null || _props$api$blockContr === void 0 ? void 0 : (_props$api$blockContr2 = _props$api$blockContr.sharedState.currentState()) === null || _props$api$blockContr2 === void 0 ? void 0 : _props$api$blockContr2.isEditing;
+  let hoverSide = (_props$api$blockContr3 = props.api.blockControls) === null || _props$api$blockContr3 === void 0 ? void 0 : (_props$api$blockContr4 = _props$api$blockContr3.sharedState.currentState()) === null || _props$api$blockContr4 === void 0 ? void 0 : _props$api$blockContr4.hoverSide;
+  let rightSideControlsEnabled = (_props$api$blockContr5 = (_props$api$blockContr6 = props.api.blockControls) === null || _props$api$blockContr6 === void 0 ? void 0 : (_props$api$blockContr7 = _props$api$blockContr6.sharedState.currentState()) === null || _props$api$blockContr7 === void 0 ? void 0 : _props$api$blockContr7.rightSideControlsEnabled) !== null && _props$api$blockContr5 !== void 0 ? _props$api$blockContr5 : false;
+  let editorViewMode = (_props$api$editorView = props.api.editorViewMode) === null || _props$api$editorView === void 0 ? void 0 : (_props$api$editorView2 = _props$api$editorView.sharedState.currentState()) === null || _props$api$editorView2 === void 0 ? void 0 : _props$api$editorView2.mode;
   const changeDOMVisibility = () => {
     if (!(dom instanceof HTMLElement)) {
       return;
     }
-    if (isTypeAheadOpen || isEditing) {
+    const isViewMode = editorViewMode === 'view';
+    const shouldRestrictBySide = rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true) && !isViewMode;
+    // Only restrict by side when hoverSide is known. When undefined, show quick insert.
+    const 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 {
@@ -92,12 +100,28 @@ export const createVanillaButton = props => {
     isTypeAheadOpen = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.isOpen;
     changeDOMVisibility();
   }));
-  props.cleanupCallbacks.push((_props$api$blockContr3 = props.api.blockControls) === null || _props$api$blockContr3 === void 0 ? void 0 : _props$api$blockContr3.sharedState.onChange(({
+  props.cleanupCallbacks.push((_props$api$blockContr8 = props.api.blockControls) === null || _props$api$blockContr8 === void 0 ? void 0 : _props$api$blockContr8.sharedState.onChange(({
     nextSharedState
   }) => {
+    var _nextSharedState$righ;
     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$editorView3, _props$api$editorView4, _props$api$editorView5;
+    const unsubscribeViewMode = (_props$api$editorView3 = props.api.editorViewMode) === null || _props$api$editorView3 === void 0 ? void 0 : (_props$api$editorView4 = (_props$api$editorView5 = _props$api$editorView3.sharedState).onChange) === null || _props$api$editorView4 === void 0 ? void 0 : _props$api$editorView4.call(_props$api$editorView5, ({
+      nextSharedState
+    }) => {
+      editorViewMode = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode;
+      changeDOMVisibility();
+    });
+    if (unsubscribeViewMode) {
+      props.cleanupCallbacks.push(unsubscribeViewMode);
+    }
+  }
   return dom;
 };
 const TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];

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

@@ -16,7 +16,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';
@@ -415,16 +414,19 @@ export const DragHandle = ({
   });
   const [isFocused, setIsFocused] = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused));
   const {
-    macroInteractionUpdates
-  } = useSharedPluginStateWithSelector(api, ['featureFlags'], states => {
-    var _states$featureFlagsS;
+    macroInteractionUpdates,
+    selection,
+    isShiftDown,
+    interactionState
+  } = useSharedPluginStateWithSelector(api, ['featureFlags', 'selection', 'blockControls', 'interaction'], 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
     };
   });
-  const selection = useSharedPluginStateSelector(api, 'selection.selection');
-  const isShiftDown = useSharedPluginStateSelector(api, 'blockControls.isShiftDown');
-  const interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
   const start = getPos();
   const isLayoutColumn = nodeType === 'layoutColumn';
   const isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true);
@@ -1110,6 +1112,7 @@ export const DragHandle = ({
     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) ? () => setIsFocused(false) : undefined
@@ -1187,8 +1190,15 @@ export const DragHandleWithVisibility = ({
   isTopLevelNode,
   anchorRectCache
 }) => {
+  const rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], 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/es2019/ui/global-styles.js

@@ -4,9 +4,9 @@
  */
 // 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';
@@ -544,9 +544,15 @@ const dragAnchorStyles = css({
 export const GlobalStylesWrapper = ({
   api
 }) => {
-  const isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
-    disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
+  const {
+    isDragging: isDraggingFromState
+  } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
+    var _states$blockControls;
+    return {
+      isDragging: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isDragging
+    };
   });
+  const isDragging = expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
   const shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return jsx(Global, {

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

@@ -8,10 +8,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';
@@ -152,7 +152,14 @@ export const TypeAheadControl = ({
   rootNodeType,
   anchorRectCache
 }) => {
-  const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
+  const {
+    macroInteractionUpdates
+  } = useSharedPluginStateWithSelector(api, ['featureFlags'], states => {
+    var _states$featureFlagsS;
+    return {
+      macroInteractionUpdates: (_states$featureFlagsS = states.featureFlagsState) === null || _states$featureFlagsS === void 0 ? void 0 : _states$featureFlagsS.macroInteractionUpdates
+    };
+  });
   const [positionStyles, setPositionStyles] = useState({
     display: 'none'
   });
@@ -359,8 +366,15 @@ export const QuickInsertWithVisibility = ({
   rootNodeType,
   anchorRectCache
 }) => {
+  const rightSideControlsEnabled = useSharedPluginStateWithSelector(api, ['blockControls'], 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,

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

@@ -2,15 +2,17 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useEffect, useRef, 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 { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+const RIGHT_CONTROL_HIDE_DELAY_MS = 150;
 const baseStyles = xcss({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
 });
@@ -40,15 +42,69 @@ const hiddenStylesCSS = css({
 });
 export const VisibilityContainer = ({
   api,
-  children
+  children,
+  controlSide
 }) => {
-  const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
-  const isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
-  const isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
+  const {
+    isTypeAheadOpen,
+    isEditing,
+    isMouseOut,
+    hoverSide,
+    editorViewMode,
+    userIntent,
+    rightSideControlsEnabled
+  } = useSharedPluginStateWithSelector(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], 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
+    };
+  });
+  const isViewMode = editorViewMode === 'view';
+  const shouldRestrictBySide = rightSideControlsEnabled && 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.
+  const 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.
+  const hideOnMouseOut = isMouseOut;
+  const shouldHideImmediate = isTypeAheadOpen || isEditing || hideOnMouseOut || userIntent === 'aiStreaming' || sideHidden;
 
-  // when ai streaming, hide the block controls
-  const userIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
-  const 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).
+  const isRightControlViewMode = isViewMode && rightSideControlsEnabled && 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
+  const [delayedShouldHide, setDelayedShouldHide] = useState(false);
+  const hideTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (!isRightControlViewMode) {
+      return;
+    }
+    if (!shouldHideImmediate) {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = null;
+      }
+      setDelayedShouldHide(false);
+      return;
+    }
+    hideTimeoutRef.current = setTimeout(() => {
+      hideTimeoutRef.current = null;
+      setDelayedShouldHide(true);
+    }, RIGHT_CONTROL_HIDE_DELAY_MS);
+    return () => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
+    };
+  }, [shouldHideImmediate, isRightControlViewMode]);
+  const shouldHide = isRightControlViewMode ? delayedShouldHide : shouldHideImmediate;
   if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
   })) {

package/dist/esm/blockControlsPlugin.js

@@ -6,6 +6,7 @@ import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDownWithPreservedSelection } from './editor-commands/handle-key-down-with-preserved-selection';
@@ -23,8 +24,11 @@ import { createSelectionPreservationPlugin } from './pm-plugins/selection-preser
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export var blockControlsPlugin = function blockControlsPlugin(_ref) {
-  var api = _ref.api;
+  var _config$rightSideCont;
+  var api = _ref.api,
+    config = _ref.config;
   var nodeDecorationRegistry = [];
+  var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   return {
     name: 'blockControls',
     actions: {
@@ -46,13 +50,15 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true));
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
           name: 'blockControlsInteractionTrackingPlugin',
-          plugin: createInteractionTrackingPlugin
+          plugin: function plugin() {
+            return createInteractionTrackingPlugin(rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true));
+          }
         });
       }
       if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
@@ -325,6 +331,11 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
+        sharedState.rightSideControlsEnabled = rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true);
+        if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+          var _interactionTrackingP4;
+          sharedState.hoverSide = (_interactionTrackingP4 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP4 === void 0 ? void 0 : _interactionTrackingP4.hoverSide;
+        }
       }
       if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
         var _selectionPreservatio;

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

@@ -77,6 +77,9 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     var element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
     element.style.display = 'block';
+    if (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      element.setAttribute('data-blocks-decorator-widget', 'true');
+    }
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     element.setAttribute('data-blocks-drag-handle-key', key);

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

@@ -68,6 +68,9 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_r
     }
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
+    if (expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      element.setAttribute('data-blocks-quick-insert-button', 'true');
+    }
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
     if (editorExperiment('platform_editor_block_control_optimise_render', true, {
       exposure: true

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

@@ -38,7 +38,7 @@ var getDefaultNodeSelector = memoizeOne(function () {
   return getNodeSelector([].concat(_toConsumableArray(IGNORE_NODES_NEXT), ['media']), [].concat(_toConsumableArray(IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
 });
 export var handleMouseOver = function handleMouseOver(view, event, api) {
-  var _api$blockControls, _api$editorDisabled, _target$classList;
+  var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$blockControls$sh, _api$blockControls2, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
     isDragging = _ref.isDragging,
     activeNode = _ref.activeNode,
@@ -49,10 +49,14 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       editorDisabled: false
     },
     editorDisabled = _ref2.editorDisabled;
+  var editorViewMode = 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;
+  var isViewMode = editorViewMode === 'view';
   var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
 
-  // We shouldn't be firing mouse over transactions when the editor is disabled
-  if (editorDisabled) {
+  // 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 && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)))) {
     return false;
   }
 
@@ -75,6 +79,18 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     return false;
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest(isNativeAnchorSupported ? getDefaultNodeSelector() : "[data-drag-handler-anchor-name]");
+
+  // 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 && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    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');
+      if (anchor) {
+        rootElement = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(CSS.escape(anchor), "\"]"));
+      }
+    }
+  }
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
@@ -183,22 +199,22 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
           // as when it is a multi-selection, the showDragHandleAt command interfere with selection
           // sometimes makes the multi-selection not continous after block menu is opened with keyboard
           if (!(isMultipleSelected && isMenuOpen && blockMenuOptions !== null && blockMenuOptions !== void 0 && blockMenuOptions.openedViaKeyboard)) {
-            var _api$core, _api$blockControls2;
-            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
+            var _api$core, _api$blockControls3;
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
           }
         } else {
-          var _api$core2, _api$blockControls3;
-          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
+          var _api$core2, _api$blockControls4;
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
         }
       } else {
-        var _api$core3, _api$blockControls4;
-        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType));
+        var _api$core3, _api$blockControls5;
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.showDragHandleAt(targetPos, anchorName, nodeType));
       }
       if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
         var _api$userIntent;
         if (isMenuOpen && originalAnchorName && (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'blockMenuOpen') {
-          var _api$core4, _api$blockControls5;
-          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu());
+          var _api$core4, _api$blockControls6;
+          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.toggleBlockMenu());
         }
       }
     }

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

@@ -18,4 +18,15 @@ export var mouseEnter = function mouseEnter(view) {
   view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
     type: 'mouseEnter'
   }));
+};
+export var setHoverSide = function setHoverSide(view, side) {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'setHoverSide',
+    side: side
+  }));
+};
+export var clearHoverSide = function clearHoverSide(view) {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'clearHoverSide'
+  }));
 };

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

@@ -1,14 +1,110 @@
-import { mouseEnter, mouseLeave, stopEditing } from './commands';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { clearHoverSide, mouseEnter, mouseLeave, setHoverSide, stopEditing } from './commands';
 import { getInteractionTrackingState } from './pm-plugin';
-export var handleMouseMove = function handleMouseMove(view) {
+
+/** Per-view pending hover state; avoids cross-editor singleton. */
+var pendingByView = new WeakMap();
+
+/** Per-view RAF handle so clearPendingHoverSide cancels only that view's callback. */
+var rafIdByView = new WeakMap();
+var cancelScheduledProcessForView = function cancelScheduledProcessForView(view) {
+  var id = rafIdByView.get(view);
+  if (id !== undefined) {
+    cancelAnimationFrame(id);
+    rafIdByView.delete(view);
+  }
+};
+var clearPendingHoverSide = function clearPendingHoverSide(view) {
+  pendingByView.delete(view);
+  cancelScheduledProcessForView(view);
+};
+var BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
+var TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var isInsideTable = function isInsideTable(element) {
+  var _element$getAttribute;
+  return element.closest(TABLE_SELECTOR) !== null || ((_element$getAttribute = element.getAttribute) === null || _element$getAttribute === void 0 ? void 0 : _element$getAttribute.call(element, 'data-prosemirror-node-name')) === 'table';
+};
+var processHoverSide = function processHoverSide(view) {
+  var event = pendingByView.get(view);
+  if (!event) {
+    return;
+  }
+  pendingByView.delete(view);
+  rafIdByView.delete(view);
+  var editorContentArea = view.dom.closest('.ak-editor-content-area');
+  if (!(editorContentArea instanceof HTMLElement)) {
+    return;
+  }
+  var state = getInteractionTrackingState(view.state);
+  var target = event.target instanceof HTMLElement ? event.target : null;
+
+  // When hovering over block controls directly, infer side from which control we're over.
+  // This is more reliable than bounds when controls are in portals outside the editor DOM.
+  var rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(RIGHT_EDGE_SELECTOR);
+  if (rightEdgeElement) {
+    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
+      setHoverSide(view, 'right');
+    }
+    return;
+  }
+  var leftControlElement = target === null || target === void 0 ? void 0 : target.closest('[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"]');
+  if (leftControlElement) {
+    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'left') {
+      setHoverSide(view, 'left');
+    }
+    return;
+  }
+
+  // Use the hovered block's midpoint when hovering over block content.
+  var blockElement = target === null || target === void 0 ? void 0 : target.closest(BLOCK_SELECTORS);
+  var boundsElement = blockElement instanceof HTMLElement ? blockElement : editorContentArea;
+
+  // Tables show block controls at table level; don't restrict by side so drag handle
+  // stays visible when hovering anywhere in the table (e.g. paragraph in second cell).
+  if (isInsideTable(boundsElement)) {
+    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== undefined) {
+      clearHoverSide(view);
+    }
+    return;
+  }
+  var _boundsElement$getBou = boundsElement.getBoundingClientRect(),
+    left = _boundsElement$getBou.left,
+    right = _boundsElement$getBou.right;
+  var midpoint = (left + right) / 2;
+  var nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
+  if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
+    setHoverSide(view, nextHoverSide);
+  }
+};
+export var handleMouseMove = function handleMouseMove(view, event) {
+  var rightSideControlsEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var state = getInteractionTrackingState(view.state);
   // if user has stopped editing and moved their mouse, show block controls again
   if (state !== null && state !== void 0 && state.isEditing) {
     stopEditing(view);
   }
+
+  // Only track hover side when right-side controls are enabled and experiment is on (performance)
+  if (!rightSideControlsEnabled || !expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    return false;
+  }
+  if (!(event instanceof MouseEvent)) {
+    return false;
+  }
+  pendingByView.set(view, event);
+  cancelScheduledProcessForView(view);
+  var id = requestAnimationFrame(function () {
+    processHoverSide(view);
+  });
+  rafIdByView.set(view, id);
   return false;
 };
 export var handleMouseLeave = function handleMouseLeave(view) {
+  var rightSideControlsEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    clearPendingHoverSide(view);
+  }
   mouseLeave(view);
   return false;
 };