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

package/dist/es2019/blockControlsPlugin.js

@@ -3,6 +3,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';
@@ -20,9 +21,12 @@ import { createSelectionPreservationPlugin } from './pm-plugins/selection-preser
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export const blockControlsPlugin = ({
-  api
+  api,
+  config
 }) => {
+  var _config$rightSideCont;
   const nodeDecorationRegistry = [];
+  const rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   return {
     name: 'blockControls',
     actions: {
@@ -42,12 +46,12 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry)
+        }) => 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: () => createInteractionTrackingPlugin(rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true))
         });
       }
       if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
@@ -317,6 +321,11 @@ export const blockControlsPlugin = ({
       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/es2019/pm-plugins/decorations-drag-handle.js

@@ -76,6 +76,9 @@ export const dragHandleDecoration = ({
     const 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/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -67,6 +67,9 @@ export const quickInsertButtonDecoration = ({
     }
     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/es2019/pm-plugins/handle-mouse-over.js

@@ -35,7 +35,7 @@ const getDefaultNodeSelector = memoizeOne(() => {
   return getNodeSelector([...IGNORE_NODES_NEXT, 'media'], [...IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, 'table']);
 });
 export const handleMouseOver = (view, event, api) => {
-  var _api$blockControls, _api$editorDisabled, _target$classList;
+  var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$editorViewMode$s, _api$blockControls$sh, _api$blockControls2, _api$blockControls2$s, _target$classList;
   const {
     isDragging,
     activeNode,
@@ -48,10 +48,14 @@ export const handleMouseOver = (view, event, api) => {
   } = (api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.sharedState.currentState()) || {
     editorDisabled: false
   };
+  const editorViewMode = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode;
+  const isViewMode = editorViewMode === 'view';
   const 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)
+  const rightSideControlsEnabled = (_api$blockControls$sh = api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$s = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2$s === void 0 ? void 0 : _api$blockControls2$s.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;
   }
 
@@ -74,6 +78,18 @@ export const handleMouseOver = (view, event, api) => {
     return false;
   }
   let 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)) {
+    const rightEdgeContainer = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-right-edge-button-container]');
+    if (rightEdgeContainer) {
+      const anchor = rightEdgeContainer.getAttribute('data-blocks-right-edge-button-anchor');
+      if (anchor) {
+        rootElement = view.dom.querySelector(`[${getAnchorAttrName()}="${CSS.escape(anchor)}"]`);
+      }
+    }
+  }
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
@@ -182,22 +198,22 @@ export const 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, _rootPos, _rootAnchorName, _rootNodeType;
-            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
+            var _api$core, _api$blockControls3, _rootPos, _rootAnchorName, _rootNodeType;
+            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
           }
         } else {
-          var _api$core2, _api$blockControls3, _rootPos2, _rootAnchorName2, _rootNodeType2;
-          api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos2 = rootPos) !== null && _rootPos2 !== void 0 ? _rootPos2 : targetPos, (_rootAnchorName2 = rootAnchorName) !== null && _rootAnchorName2 !== void 0 ? _rootAnchorName2 : anchorName, (_rootNodeType2 = rootNodeType) !== null && _rootNodeType2 !== void 0 ? _rootNodeType2 : nodeType));
+          var _api$core2, _api$blockControls4, _rootPos2, _rootAnchorName2, _rootNodeType2;
+          api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos2 = rootPos) !== null && _rootPos2 !== void 0 ? _rootPos2 : targetPos, (_rootAnchorName2 = rootAnchorName) !== null && _rootAnchorName2 !== void 0 ? _rootAnchorName2 : anchorName, (_rootNodeType2 = rootNodeType) !== null && _rootNodeType2 !== void 0 ? _rootNodeType2 : nodeType));
         }
       } else {
-        var _api$core3, _api$blockControls4;
-        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? 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 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? 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, _api$userIntent$share;
         if (isMenuOpen && originalAnchorName && (api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent) === 'blockMenuOpen') {
-          var _api$core4, _api$blockControls5;
-          api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(api === null || api === void 0 ? 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 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.toggleBlockMenu());
         }
       }
     }

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

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

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

@@ -1,14 +1,109 @@
-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 const handleMouseMove = view => {
+
+/** Per-view pending hover state; avoids cross-editor singleton. */
+const pendingByView = new WeakMap();
+
+/** Per-view RAF handle so clearPendingHoverSide cancels only that view's callback. */
+const rafIdByView = new WeakMap();
+const cancelScheduledProcessForView = view => {
+  const id = rafIdByView.get(view);
+  if (id !== undefined) {
+    cancelAnimationFrame(id);
+    rafIdByView.delete(view);
+  }
+};
+const clearPendingHoverSide = view => {
+  pendingByView.delete(view);
+  cancelScheduledProcessForView(view);
+};
+const BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
+const TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+const RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+const 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';
+};
+const processHoverSide = view => {
+  const event = pendingByView.get(view);
+  if (!event) {
+    return;
+  }
+  pendingByView.delete(view);
+  rafIdByView.delete(view);
+  const editorContentArea = view.dom.closest('.ak-editor-content-area');
+  if (!(editorContentArea instanceof HTMLElement)) {
+    return;
+  }
+  const state = getInteractionTrackingState(view.state);
+  const 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.
+  const 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;
+  }
+  const 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.
+  const blockElement = target === null || target === void 0 ? void 0 : target.closest(BLOCK_SELECTORS);
+  const 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;
+  }
+  const {
+    left,
+    right
+  } = boundsElement.getBoundingClientRect();
+  const midpoint = (left + right) / 2;
+  const nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
+  if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
+    setHoverSide(view, nextHoverSide);
+  }
+};
+export const handleMouseMove = (view, event, rightSideControlsEnabled = false) => {
   const 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);
+  const id = requestAnimationFrame(() => {
+    processHoverSide(view);
+  });
+  rafIdByView.set(view, id);
   return false;
 };
-export const handleMouseLeave = view => {
+export const handleMouseLeave = (view, rightSideControlsEnabled = false) => {
+  if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    clearPendingHoverSide(view);
+  }
   mouseLeave(view);
   return false;
 };

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

@@ -1,11 +1,17 @@
 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.) */
+const 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"]';
+const MOUSE_LEAVE_DEBOUNCE_MS = 200;
+const isMovingToBlockControlsArea = target => target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
 export const interactionTrackingPluginKey = new PluginKey('interactionTrackingPlugin');
-export const createInteractionTrackingPlugin = () => {
+export const createInteractionTrackingPlugin = (rightSideControlsEnabled = false) => {
   return new SafePlugin({
     key: interactionTrackingPluginKey,
     state: {
@@ -30,10 +36,17 @@ export const createInteractionTrackingPlugin = () => {
             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 {
           ...pluginState,
@@ -44,30 +57,102 @@ export const createInteractionTrackingPlugin = () => {
     props: {
       handleKeyDown,
       handleDOMEvents: {
-        mousemove: handleMouseMove
+        mousemove: (view, event) => handleMouseMove(view, event, rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true))
       }
     },
     view: editorExperiment('platform_editor_controls', 'variant1') ? view => {
       const editorContentArea = view.dom.closest('.ak-editor-content-area');
+      const remixRightSideEnabled = rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true);
       let unbindMouseEnter;
       let unbindMouseLeave;
+      let unbindDocumentMouseMove;
+      let mouseLeaveTimeoutId = null;
+      let lastMousePosition = {
+        x: 0,
+        y: 0
+      };
+      const 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(() => {
+          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') {
+            const 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);
+      };
+      const cancelScheduledMouseLeave = () => {
+        if (mouseLeaveTimeoutId) {
+          clearTimeout(mouseLeaveTimeoutId);
+          mouseLeaveTimeoutId = null;
+        }
+      };
       if (editorContentArea) {
+        if (remixRightSideEnabled && typeof document !== 'undefined') {
+          unbindDocumentMouseMove = bind(document, {
+            type: 'mousemove',
+            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: () => {
+            if (remixRightSideEnabled) {
+              cancelScheduledMouseLeave();
+            }
             handleMouseEnter(view);
           }
         });
         unbindMouseLeave = bind(editorContentArea, {
           type: 'mouseleave',
-          listener: () => {
-            handleMouseLeave(view);
+          listener: event => {
+            const e = event;
+            lastMousePosition = {
+              x: e.clientX,
+              y: e.clientY
+            };
+            if (remixRightSideEnabled) {
+              scheduleMouseLeave(e);
+            } else {
+              handleMouseLeave(view, false);
+            }
           }
         });
       }
       return {
         destroy: () => {
           var _unbindMouseEnter, _unbindMouseLeave;
+          if (remixRightSideEnabled) {
+            var _unbindDocumentMouseM;
+            cancelScheduledMouseLeave();
+            (_unbindDocumentMouseM = unbindDocumentMouseMove) === null || _unbindDocumentMouseM === void 0 ? void 0 : _unbindDocumentMouseM();
+          }
           (_unbindMouseEnter = unbindMouseEnter) === null || _unbindMouseEnter === void 0 ? void 0 : _unbindMouseEnter();
           (_unbindMouseLeave = unbindMouseLeave) === null || _unbindMouseLeave === void 0 ? void 0 : _unbindMouseLeave();
         }

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

@@ -234,8 +234,8 @@ const getDecorationAtPos = (state, decorations, pos, to) => {
   const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
   return nodeDecAtActivePos;
 };
-export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup) => {
-  var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2, _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;
+export const apply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, anchorRectCache, resizeObserverWidth, pragmaticCleanup) => {
+  var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2, _meta$multiSelectDnD, _api$editorViewMode, _api$editorViewMode$s, _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;
   let {
     activeNode,
     decorations,
@@ -348,6 +348,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   }
   const maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
   let latestActiveNode = meta === null || meta === void 0 ? void 0 : meta.activeNode;
+  const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
   if (!latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
     latestActiveNode = activeNode;
   }
@@ -443,12 +444,21 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
           decorations = decorations.remove(old);
         }
       }
+      if (rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true) && isViewMode) {
+        for (const factory of nodeDecorationRegistry) {
+          if (factory.showInViewMode) {
+            var _activeNode1, _activeNode10;
+            const old = decorations.find((_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos, spec => spec.type === factory.type);
+            decorations = decorations.remove(old);
+          }
+        }
+      }
     }
   } else if (api) {
-    var _latestActiveNode5;
-    if (shouldRecreateHandle) {
-      var _activeNode1, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      const 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;
+      const 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);
       const handleDec = dragHandleDecoration({
         api,
@@ -465,9 +475,9 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
     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;
-      const 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;
+      const 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);
       const quickInsertButton = quickInsertButtonDecoration({
         api,
@@ -484,8 +494,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       decorations = decorations.add(newState.doc, [quickInsertButton]);
       if (fg('platform_editor_expose_block_controls_deco_api')) {
         for (const factory of nodeDecorationRegistry) {
-          var _activeNode13, _activeNode14, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
-          const old = decorations.find((_activeNode13 = activeNode) === null || _activeNode13 === void 0 ? void 0 : _activeNode13.rootPos, (_activeNode14 = activeNode) === null || _activeNode14 === void 0 ? void 0 : _activeNode14.rootPos, spec => spec.type === factory.type);
+          var _activeNode15, _activeNode16, _latestActiveNode1, _latestActiveNode10, _latestActiveNode11, _latestActiveNode12, _latestActiveNode13;
+          const old = decorations.find((_activeNode15 = activeNode) === null || _activeNode15 === void 0 ? void 0 : _activeNode15.rootPos, (_activeNode16 = activeNode) === null || _activeNode16 === void 0 ? void 0 : _activeNode16.rootPos, spec => spec.type === factory.type);
           decorations = decorations.remove(old);
           const dec = factory.create({
             editorState: newState,
@@ -500,6 +510,43 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
         }
       }
     }
+
+    // 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)) {
+      const rootPos = latestActiveNode.rootPos;
+      for (const factory of nodeDecorationRegistry) {
+        if (factory.showInViewMode) {
+          var _latestActiveNode15, _latestActiveNode16, _latestActiveNode17, _latestActiveNode18, _latestActiveNode19;
+          const existingAtPos = decorations.find(rootPos, rootPos, spec => 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) {
+            continue;
+          }
+          // Remove any stale decoration at a different position (e.g. after moving to another block)
+          const stale = decorations.find(0, newState.doc.nodeSize, spec => spec.type === factory.type);
+          decorations = decorations.remove(stale);
+          const dec = factory.create({
+            editorState: newState,
+            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]);
+        }
+      }
+    } else if (isViewMode && rightSideControlsEnabled && expValEquals('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      // Remove view-mode right-side decorations when no active node
+      for (const factory of nodeDecorationRegistry) {
+        if (factory.showInViewMode) {
+          const old = decorations.find(0, newState.doc.nodeSize, spec => spec.type === factory.type);
+          decorations = decorations.remove(old);
+        }
+      }
+    }
   }
 
   // Drop targets may be missing when the node count is being changed during a drag
@@ -547,12 +594,15 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   let 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.
+    const 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;
   }
   let isMenuOpenNew = isMenuOpen;
   if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
@@ -596,7 +646,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false) => {
   const {
     formatMessage
   } = getIntl();
@@ -623,7 +673,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
       init() {
         return initialState;
       },
-      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, anchorRectCache, resizeObserverWidth, pragmaticCleanup)
+      apply: (tr, currentState, _, newState) => apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, anchorRectCache, resizeObserverWidth, pragmaticCleanup)
     },
     props: {
       decorations: state => {
@@ -633,7 +683,12 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
         }
         const isDisabled = api === null || api === void 0 ? void 0 : (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) === null || _api$editorDisabled$s === void 0 ? void 0 : _api$editorDisabled$s.editorDisabled;
         if (isDisabled) {
-          return;
+          var _api$editorViewMode2, _api$editorViewMode2$;
+          const 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 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? 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;
       },