@atlaskit/editor-plugin-block-controls 17.2.4 → 17.3.0

package/dist/esm/ui/utils/get-surface-placement.js

@@ -15,25 +15,39 @@ export var getAbsoluteSurfacePlacement = function getAbsoluteSurfacePlacement(_r
 };
 
 /**
- * Positions the Task 1 left surface beside the legacy drag-handle slot.
- * The surface's own width is handled by the transform, so later controls do not require measuring it.
+ * Positions the surface beside the legacy drag-handle slot, on either the left or right edge
+ * of the target node. Node-type-specific gap/top-adjustment maths (layouts, tables, media, cards,
+ * extensions, etc.) live in one place so left/right edge cases can't drift out of sync.
+ *
+ * The left side grows away from the node without knowing its own width, so it needs
+ * `translateX(-100%)` to anchor its right edge at `nodeRect.left` and extend backward. The right
+ * side grows in the normal box-flow direction (away from the node, into the margin), so the gap
+ * can be folded straight into `left` with no transform needed.
  */
 export var getSurfacePlacement = function getSurfacePlacement(_ref2) {
   var layout = _ref2.layout,
     nodeRect = _ref2.nodeRect,
     nodeType = _ref2.nodeType,
     nodeTypeWithLevel = _ref2.nodeTypeWithLevel,
-    parentNodeType = _ref2.parentNodeType;
+    parentNodeType = _ref2.parentNodeType,
+    side = _ref2.side;
   if (nodeType === 'layoutColumn') {
+    // nodeRect.left + width/2 === nodeRect.right - width/2 — side-independent.
     return {
       left: nodeRect.left + nodeRect.width / 2,
       top: nodeRect.top,
       transform: 'translate(-50%, -50%)'
     };
   }
-  return {
+  var gap = dragHandleGap(nodeType, parentNodeType);
+  var top = nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout);
+  return side === 'right' ? {
+    left: nodeRect.right + gap,
+    top: top,
+    transform: ''
+  } : {
     left: nodeRect.left,
-    top: nodeRect.top + topPositionAdjustment(nodeTypeWithLevel, layout),
-    transform: "translateX(calc(-100% - ".concat(dragHandleGap(nodeType, parentNodeType), "px))")
+    top: top,
+    transform: "translateX(calc(-100% - ".concat(gap, "px))")
   };
 };

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

@@ -13,7 +13,7 @@ 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';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 var RIGHT_CONTROL_HIDE_DELAY_MS = 150;
 var baseStyles = xcss({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'

package/dist/types/pm-plugins/main.d.ts

@@ -19,7 +19,7 @@ export interface FlagType {
     toolbarFlagsEnabled: boolean;
 }
 export declare const getDecorations: (state: EditorState) => DecorationSet | undefined;
-export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, anchorRectCache?: AnchorRectCache, resizeObserverWidth?: ResizeObserver, pragmaticCleanup?: (() => void) | null, resolvedSurface?: ResolvedSurface) => PluginState | {
+export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, anchorRectCache?: AnchorRectCache, resizeObserverWidth?: ResizeObserver, pragmaticCleanup?: (() => void) | null, resolvedSurfaces?: readonly ResolvedSurface[]) => PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {
@@ -44,7 +44,7 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     multiSelectDnD: MultiSelectDnD | undefined;
     surfaceNodePositions: number[];
 };
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean, surfaceNodePositionsEnabled?: boolean) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean, surfaceNodePositionsEnabled?: boolean, rightSurfaceEnabled?: boolean) => SafePlugin<PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {

package/dist/types/pm-plugins/react-root-registry.d.ts

@@ -2,21 +2,21 @@ import type { ReactElement } from 'react';
 /**
  * Mounts `element` into `mountPoint`.
  *
- * When `nike_r19_render_unmount` is **on**, uses the React 18/19 `createRoot`
+ * When `platform_editor_react19_migration` is **on**, uses the React 18/19 `createRoot`
  * API wrapped in `flushSync` so the render is synchronous – matching the
  * legacy `ReactDOM.render` timing that ProseMirror decoration widgets depend
  * on (focus management, anchor positioning, block-menu visibility all read
  * the rendered DOM immediately after the callback returns).
  *
- * When the gate is **off**, falls back to the legacy `ReactDOM.render` path.
+ * Otherwise, falls back to the legacy `ReactDOM.render` path.
  */
 export declare const renderToMountPoint: (element: ReactElement, mountPoint: Element) => void;
 /**
  * Unmounts the React tree at `mountPoint`.
  *
- * When `nike_r19_render_unmount` is **on**, looks up the root in the shared
+ * When `platform_editor_react19_migration` is **on**, looks up the root in the shared
  * registry, calls `root.unmount()`, and removes the entry.
  *
- * When the gate is **off**, falls back to `ReactDOM.unmountComponentAtNode`.
+ * Otherwise, falls back to `ReactDOM.unmountComponentAtNode`.
  */
 export declare const unmountFromMountPoint: (mountPoint: Element) => void;

package/dist/types/pm-plugins/utils/surface-node-positions.d.ts

@@ -1,14 +1,14 @@
 import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import type { ResolvedSurface } from '@atlaskit/editor-ui-control-model/surface-renderer/types';
 import type { ActiveNode } from '../../blockControlsPluginType';
-export declare const getSurfaceNodePositions: (state: EditorState, resolvedSurface: ResolvedSurface, activeNode?: ActiveNode, from?: number, to?: number) => number[];
-export declare const updateSurfaceNodePositions: ({ activeNode, currentPositions, from, newState, previousActiveNode, resolvedSurface, to, tr, }: {
+export declare const getSurfaceNodePositions: (state: EditorState, resolvedSurfaces: readonly ResolvedSurface[], activeNode?: ActiveNode, from?: number, to?: number) => number[];
+export declare const updateSurfaceNodePositions: ({ activeNode, currentPositions, from, newState, previousActiveNode, resolvedSurfaces, to, tr, }: {
     activeNode: ActiveNode | null | undefined;
     currentPositions: number[];
     from: number;
     newState: EditorState;
     previousActiveNode: ActiveNode | null | undefined;
-    resolvedSurface: ResolvedSurface;
+    resolvedSurfaces: readonly ResolvedSurface[];
     to: number;
     tr: ReadonlyTransaction;
 }) => number[];

package/dist/types/ui/block-controls-left-surface.d.ts

@@ -8,14 +8,14 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import type { SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
-import type { BlockControlsLeftSurfaceTarget } from './block-controls-left-surface-targets';
+import type { BlockControlsSurfaceTarget } from './block-controls-surface-targets';
 import type { SurfacePlacement } from './utils/get-surface-placement';
 type BlockControlsLeftSurfaceProps = {
     api: ExtractInjectionAPI<BlockControlsPlugin>;
     components: React.ComponentProps<typeof SurfaceRenderer>['components'];
     forceVisibleOnMouseOut: boolean;
     placement: SurfacePlacement | undefined;
-    source: BlockControlsLeftSurfaceTarget['source'];
+    source: BlockControlsSurfaceTarget['source'];
     surfaceContext: SurfaceContext;
 };
 /** Renders one left block-controls surface at a document position. */

package/dist/types/ui/block-controls-right-surface.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import type { SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+import type { BlockControlsSurfaceTarget } from './block-controls-surface-targets';
+import type { SurfacePlacement } from './utils/get-surface-placement';
+type BlockControlsRightSurfaceProps = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    components: React.ComponentProps<typeof SurfaceRenderer>['components'];
+    forceVisibleOnMouseOut: boolean;
+    placement: SurfacePlacement | undefined;
+    source: BlockControlsSurfaceTarget['source'];
+    surfaceContext: SurfaceContext;
+};
+/** Renders one right block-controls surface at a document position. */
+export declare const BlockControlsRightSurface: ({ api, components, forceVisibleOnMouseOut, placement, source, surfaceContext, }: BlockControlsRightSurfaceProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/block-controls-right-surfaces.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type Props = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    editorView: EditorView;
+};
+/**
+ * Registry-backed right surface tree. Mirrors the left surface's single-tree, measured-placement
+ * approach, but keeps its own components lookup, targets, placements and measurement lifecycle so
+ * the right surface never depends on the left surface's render pass.
+ */
+export declare const BlockControlsRightSurfaces: ({ api, editorView, }: Props) => React.JSX.Element | null;
+export {};

package/dist/types/ui/block-controls-surface-targets.d.ts

@@ -0,0 +1,13 @@
+import type { ActiveNode } from '../blockControlsPluginType';
+export type BlockControlsSurfaceTarget = {
+    position: number;
+    source: 'active' | 'root' | 'stored';
+};
+/**
+ * Combines hover-driven and stored surface positions into one deduplicated list.
+ * Shared by both the left and right surfaces: this is pure position bookkeeping with no
+ * surface-specific behavior, so there's nothing to keep independent between them. What *is*
+ * kept independent is each surface's own React tree (component lookup, measurement effects,
+ * observers) — see block-controls-left-surfaces.tsx / block-controls-right-surfaces.tsx.
+ */
+export declare const getBlockControlsSurfaceTargets: (activeNode: ActiveNode | undefined, storedPositions: readonly number[]) => readonly BlockControlsSurfaceTarget[];

package/dist/types/ui/utils/get-surface-placement.d.ts

@@ -3,12 +3,14 @@ export type SurfacePlacement = {
     top: number;
     transform: string;
 };
+export type SurfaceSide = 'left' | 'right';
 export type SurfacePlacementOptions = {
     layout: string;
-    nodeRect: Pick<DOMRect, 'left' | 'top' | 'width'>;
+    nodeRect: Pick<DOMRect, 'left' | 'right' | 'top' | 'width'>;
     nodeType: string;
     nodeTypeWithLevel: string;
     parentNodeType?: string;
+    side: SurfaceSide;
 };
 export declare const getAbsoluteSurfacePlacement: ({ offsetParentRect, offsetParentScrollLeft, offsetParentScrollTop, placement, }: {
     offsetParentRect?: Pick<DOMRect, 'left' | 'top'>;
@@ -17,7 +19,13 @@ export declare const getAbsoluteSurfacePlacement: ({ offsetParentRect, offsetPar
     placement: SurfacePlacement;
 }) => SurfacePlacement;
 /**
- * Positions the Task 1 left surface beside the legacy drag-handle slot.
- * The surface's own width is handled by the transform, so later controls do not require measuring it.
+ * Positions the surface beside the legacy drag-handle slot, on either the left or right edge
+ * of the target node. Node-type-specific gap/top-adjustment maths (layouts, tables, media, cards,
+ * extensions, etc.) live in one place so left/right edge cases can't drift out of sync.
+ *
+ * The left side grows away from the node without knowing its own width, so it needs
+ * `translateX(-100%)` to anchor its right edge at `nodeRect.left` and extend backward. The right
+ * side grows in the normal box-flow direction (away from the node, into the margin), so the gap
+ * can be folded straight into `left` with no transform needed.
  */
-export declare const getSurfacePlacement: ({ layout, nodeRect, nodeType, nodeTypeWithLevel, parentNodeType, }: SurfacePlacementOptions) => SurfacePlacement;
+export declare const getSurfacePlacement: ({ layout, nodeRect, nodeType, nodeTypeWithLevel, parentNodeType, side, }: SurfacePlacementOptions) => SurfacePlacement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "17.2.4",
+	"version": "17.3.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,43 +21,43 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.2.0",
-		"@atlaskit/button": "^25.2.0",
+		"@atlaskit/button": "^25.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/docs": "^12.2.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^16.0.0",
-		"@atlaskit/editor-plugin-analytics": "^16.0.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^16.0.0",
+		"@atlaskit/editor-plugin-analytics": "^16.1.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^16.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^18.0.0",
-		"@atlaskit/editor-plugin-feature-flags": "^15.0.0",
+		"@atlaskit/editor-plugin-feature-flags": "^15.1.0",
 		"@atlaskit/editor-plugin-interaction": "^27.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^13.0.0",
 		"@atlaskit/editor-plugin-metrics": "^17.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^16.1.0",
-		"@atlaskit/editor-plugin-selection": "^16.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^16.2.0",
+		"@atlaskit/editor-plugin-selection": "^16.1.0",
 		"@atlaskit/editor-plugin-show-diff": "^14.2.0",
 		"@atlaskit/editor-plugin-toolbar": "^13.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^17.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^17.1.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^14.0.0",
-		"@atlaskit/editor-plugin-width": "^17.0.0",
+		"@atlaskit/editor-plugin-width": "^17.1.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
-		"@atlaskit/editor-shared-styles": "^4.0.0",
-		"@atlaskit/editor-tables": "^3.0.0",
+		"@atlaskit/editor-shared-styles": "^4.1.0",
+		"@atlaskit/editor-tables": "^3.1.0",
 		"@atlaskit/editor-ui-control-model": "^2.9.0",
-		"@atlaskit/icon": "^37.5.0",
+		"@atlaskit/icon": "^37.6.0",
 		"@atlaskit/icon-lab": "^7.7.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
-		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
-		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
-		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.1.0",
-		"@atlaskit/primitives": "^22.4.0",
-		"@atlaskit/section-message": "^10.1.0",
-		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^167.0.0",
-		"@atlaskit/tokens": "^16.9.0",
-		"@atlaskit/tooltip": "^24.2.0",
+		"@atlaskit/platform-feature-flags": "^2.2.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
+		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.2.0",
+		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/section-message": "^10.2.0",
+		"@atlaskit/theme": "^28.2.0",
+		"@atlaskit/tmp-editor-statsig": "^168.0.0",
+		"@atlaskit/tokens": "^16.10.0",
+		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"@emotion/react": "^11.7.1",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.7.0",
+		"@atlaskit/editor-common": "^120.10.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -139,9 +139,6 @@
 		"platform-dst-top-layer-tooltip": {
 			"type": "boolean",
 			"referenceOnly": true
-		},
-		"nike_r19_render_unmount": {
-			"type": "boolean"
 		}
 	},
 	"devDependencies": {

package/dist/types/ui/block-controls-left-surface-targets.d.ts

@@ -1,7 +0,0 @@
-import type { ActiveNode } from '../blockControlsPluginType';
-export type BlockControlsLeftSurfaceTarget = {
-    position: number;
-    source: 'active' | 'root' | 'stored';
-};
-/** Combines hover-driven and stored surface positions into one deduplicated list. */
-export declare const getBlockControlsLeftSurfaceTargets: (activeNode: ActiveNode | undefined, storedPositions: readonly number[]) => readonly BlockControlsLeftSurfaceTarget[];