@atlaskit/editor-plugin-block-controls 12.1.1 → 12.2.1

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

@@ -12,7 +12,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
+import { ACTIVE_DRAG_HANDLE_ATTR, ACTIVE_QUICK_INSERT_ATTR, DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
 import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
 
 /**
@@ -356,6 +356,18 @@ var dragHandlerAnchorStyles = css({
     })
   }
 });
+var activeControlsSelector = "[".concat(ACTIVE_DRAG_HANDLE_ATTR, "], [").concat(ACTIVE_QUICK_INSERT_ATTR, "]");
+
+// Applies anchor-name via node decoration attributes rather than adjacency CSS selectors.
+// This is more reliable than dragHandlerAnchorStyles which depends on DOM structure.
+// Only nodes decorated with data-active-drag-handle / data-active-quick-insert get anchor-name.
+var staticControlsAnchorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': _defineProperty({}, activeControlsSelector, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+  })
+});
 
 // Styles applied to nodes with anchors when dragging
 var dragAnchorStyles = css({
@@ -404,6 +416,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
       exposure: true
     }) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles), expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) ? staticControlsAnchorStyles : undefined]
   });
 };

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

@@ -28,7 +28,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
+import { ACTIVE_QUICK_INSERT_ATTR, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
 import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -184,6 +184,14 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       anchorName: rootAnchorName
     });
     var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
+
+    // Defence-in-depth guard: the node decoration sets data-active-quick-insert on the
+    // active root node. Check for it directly — cheap DOM attribute read, no reflow.
+    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && !(dom !== null && dom !== void 0 && dom.hasAttribute(ACTIVE_QUICK_INSERT_ATTR))) {
+      return {
+        display: 'none'
+      };
+    }
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension' || rootNodeType === 'multiBodiedExtension' && fg('confluence_frontend_native_tabs_extension');
     var isBlockCard = rootNodeType === 'blockCard';

package/dist/types/pm-plugins/decorations-drag-handle.d.ts

@@ -6,6 +6,13 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import type { AnchorRectCache } from './utils/anchor-utils';
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-drag-handle="true"`.
+ * The CSS in staticControlsAnchorStyles then applies `anchor-name` to this attribute,
+ * which is more reliable than the adjacency-selector approach in dragHandlerAnchorStyles.
+ */
+export declare const createActiveDragHandleNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveDragHandleNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type DragHandleDecorationParams = {

package/dist/types/pm-plugins/decorations-quick-insert-button.d.ts

@@ -19,5 +19,12 @@ type QuickInsertButtonDecorationParams = {
     rootNodeType?: string;
     rootPos: number;
 };
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-quick-insert="true"`.
+ * The CSS in staticControlsAnchorStyles applies `anchor-name` to this attribute directly,
+ * replacing the unreliable adjacency selector `[block-ctrl-quick-insert-button] + *`.
+ */
+export declare const createActiveQuickInsertNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveQuickInsertNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
 export {};

package/dist/types/ui/consts.d.ts

@@ -1,3 +1,5 @@
+export declare const ACTIVE_DRAG_HANDLE_ATTR = "data-active-drag-handle";
+export declare const ACTIVE_QUICK_INSERT_ATTR = "data-active-quick-insert";
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;

package/dist/types-ts4.5/pm-plugins/decorations-drag-handle.d.ts

@@ -6,6 +6,13 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import type { AnchorRectCache } from './utils/anchor-utils';
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-drag-handle="true"`.
+ * The CSS in staticControlsAnchorStyles then applies `anchor-name` to this attribute,
+ * which is more reliable than the adjacency-selector approach in dragHandlerAnchorStyles.
+ */
+export declare const createActiveDragHandleNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveDragHandleNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 type DragHandleDecorationParams = {

package/dist/types-ts4.5/pm-plugins/decorations-quick-insert-button.d.ts

@@ -19,5 +19,12 @@ type QuickInsertButtonDecorationParams = {
     rootNodeType?: string;
     rootPos: number;
 };
+/**
+ * Creates a Decoration.node that marks the active node with `data-active-quick-insert="true"`.
+ * The CSS in staticControlsAnchorStyles applies `anchor-name` to this attribute directly,
+ * replacing the unreliable adjacency selector `[block-ctrl-quick-insert-button] + *`.
+ */
+export declare const createActiveQuickInsertNodeDecoration: (pos: number, nodeSize: number) => Decoration;
+export declare const findActiveQuickInsertNodeDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
 export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
 export {};

package/dist/types-ts4.5/ui/consts.d.ts

@@ -1,3 +1,5 @@
+export declare const ACTIVE_DRAG_HANDLE_ATTR = "data-active-drag-handle";
+export declare const ACTIVE_QUICK_INSERT_ATTR = "data-active-quick-insert";
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "12.1.1",
+	"version": "12.2.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^90.0.0",
+		"@atlaskit/tmp-editor-statsig": "^90.2.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@babel/runtime": "^7.0.0",