@atlaskit/editor-plugin-block-controls 7.7.8 → 7.8.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.8.0
+
+### Minor Changes
+
+- [`54f21810515c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54f21810515c4) -
+  ED-29642 use native anchor global css style instead of inline style
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.7.9
+
+### Patch Changes
+
+- [`ae4f9cd8ff5f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae4f9cd8ff5f7) -
+  [ux] [EDITOR-2757] Remove breakout mark when drag and drop node in bodiedSyncBlock
+- Updated dependencies
+
 ## 7.7.8
 
 ### Patch Changes

package/dist/cjs/editor-commands/move-node.js

@@ -18,6 +18,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _main = require("../pm-plugins/main");
@@ -313,7 +314,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.DRAG_AND_DROP;
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref7) {
-      var _api$blockControls$co, _api$accessibilityUti;
+      var _convertedNodeSlice, _api$blockControls$co, _api$accessibilityUti;
       var tr = _ref7.tr;
       if (!api || start < 0 || to < 0) {
         return tr;
@@ -350,7 +351,8 @@ var moveNode = exports.moveNode = function moveNode(api) {
       var $to = tr.doc.resolve(to);
       var $handlePos = tr.doc.resolve(start);
       var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
-      var destType = $to.node().type;
+      var destNode = $to.node();
+      var destType = destNode.type;
       var destParent = $to.node($to.depth);
       var sourceNode = $handlePos.nodeAfter;
 
@@ -379,7 +381,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
         return tr;
       }
       var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
-      var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
+      var convertedNode = (_convertedNodeSlice = convertedNodeSlice) === null || _convertedNodeSlice === void 0 ? void 0 : _convertedNodeSlice.content;
       if (!convertedNode) {
         return tr;
       }
@@ -387,6 +389,20 @@ var moveNode = exports.moveNode = function moveNode(api) {
         sliceFrom = sliceFrom - 1;
       }
 
+      // Currently we don't support breakout mark for children nodes of bodiedSyncBlock node
+      // Hence strip out the mark for now
+      if (destNode.type.name === 'bodiedSyncBlock' && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true)) {
+        var _convertedNodeSlice2;
+        var nodes = [];
+        (_convertedNodeSlice2 = convertedNodeSlice) === null || _convertedNodeSlice2 === void 0 || _convertedNodeSlice2.content.forEach(function (node) {
+          nodes.push(node.mark(node.marks.filter(function (mark) {
+            return mark.type.name !== 'breakout';
+          })));
+        });
+        convertedNodeSlice = new _model.Slice(_model.Fragment.from(nodes), 0, 0);
+        convertedNode = convertedNodeSlice.content;
+      }
+
       // delete the content from the original position
       tr.delete(sliceFrom, sliceTo);
       var mappedTo = tr.mapping.map(to);

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

@@ -12,6 +12,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -405,17 +406,43 @@ var blockCardWithoutLayout = (0, _react.css)({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+var dragHandlerAnchorStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    }
+  }
+});
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var api = _ref.api;
   var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
     disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
+  var shouldRenderAnchors = (0, _styles.isCSSAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_native_anchor_use_css_style');
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return (0, _react.jsx)(_react.Global, {
     styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
     }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? _styles.nativeAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

package/dist/es2019/editor-commands/move-node.js

@@ -5,11 +5,12 @@ import { expandSelectionBounds, GapCursorSelection } from '@atlaskit/editor-comm
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 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 { key } from '../pm-plugins/main';
@@ -315,7 +316,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
 export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP, formatMessage) => ({
   tr
 }) => {
-  var _api$blockControls$co2, _api$accessibilityUti;
+  var _convertedNodeSlice, _api$blockControls$co2, _api$accessibilityUti;
   if (!api || start < 0 || to < 0) {
     return tr;
   }
@@ -352,7 +353,8 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   const $to = tr.doc.resolve(to);
   const $handlePos = tr.doc.resolve(start);
   const nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
-  const destType = $to.node().type;
+  const destNode = $to.node();
+  const destType = destNode.type;
   const destParent = $to.node($to.depth);
   const sourceNode = $handlePos.nodeAfter;
 
@@ -380,8 +382,8 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   if (!canMoveNodeToIndex(destParent, $to.index(), $handlePos.node().child($handlePos.index()), $to)) {
     return tr;
   }
-  const convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
-  const convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
+  let convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
+  let convertedNode = (_convertedNodeSlice = convertedNodeSlice) === null || _convertedNodeSlice === void 0 ? void 0 : _convertedNodeSlice.content;
   if (!convertedNode) {
     return tr;
   }
@@ -389,6 +391,18 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     sliceFrom = sliceFrom - 1;
   }
 
+  // Currently we don't support breakout mark for children nodes of bodiedSyncBlock node
+  // Hence strip out the mark for now
+  if (destNode.type.name === 'bodiedSyncBlock' && expValEquals('platform_synced_block', 'isEnabled', true)) {
+    var _convertedNodeSlice2;
+    const nodes = [];
+    (_convertedNodeSlice2 = convertedNodeSlice) === null || _convertedNodeSlice2 === void 0 ? void 0 : _convertedNodeSlice2.content.forEach(node => {
+      nodes.push(node.mark(node.marks.filter(mark => mark.type.name !== 'breakout')));
+    });
+    convertedNodeSlice = new Slice(Fragment.from(nodes), 0, 0);
+    convertedNode = convertedNodeSlice.content;
+  }
+
   // delete the content from the original position
   tr.delete(sliceFrom, sliceTo);
   const mappedTo = tr.mapping.map(to);

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

@@ -4,11 +4,12 @@
  */
 // 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 { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
+import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, nativeAnchorStyles, 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, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -483,18 +484,44 @@ const blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+const dragHandlerAnchorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    }
+  }
+});
 export const GlobalStylesWrapper = ({
   api
 }) => {
   const isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
     disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
+  const shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('platform_native_anchor_use_css_style');
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return jsx(Global, {
     styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
     }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? nativeAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

package/dist/esm/editor-commands/move-node.js

@@ -8,11 +8,12 @@ import { expandSelectionBounds, GapCursorSelection } from '@atlaskit/editor-comm
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { DIRECTION } from '@atlaskit/editor-common/types';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 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 { key } from '../pm-plugins/main';
@@ -307,7 +308,7 @@ export var moveNode = function moveNode(api) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref7) {
-      var _api$blockControls$co, _api$accessibilityUti;
+      var _convertedNodeSlice, _api$blockControls$co, _api$accessibilityUti;
       var tr = _ref7.tr;
       if (!api || start < 0 || to < 0) {
         return tr;
@@ -344,7 +345,8 @@ export var moveNode = function moveNode(api) {
       var $to = tr.doc.resolve(to);
       var $handlePos = tr.doc.resolve(start);
       var nodeCopy = tr.doc.slice(sliceFrom, sliceTo, false); // cut the content
-      var destType = $to.node().type;
+      var destNode = $to.node();
+      var destType = destNode.type;
       var destParent = $to.node($to.depth);
       var sourceNode = $handlePos.nodeAfter;
 
@@ -373,7 +375,7 @@ export var moveNode = function moveNode(api) {
         return tr;
       }
       var convertedNodeSlice = transformSourceSlice(nodeCopy, destType);
-      var convertedNode = convertedNodeSlice === null || convertedNodeSlice === void 0 ? void 0 : convertedNodeSlice.content;
+      var convertedNode = (_convertedNodeSlice = convertedNodeSlice) === null || _convertedNodeSlice === void 0 ? void 0 : _convertedNodeSlice.content;
       if (!convertedNode) {
         return tr;
       }
@@ -381,6 +383,20 @@ export var moveNode = function moveNode(api) {
         sliceFrom = sliceFrom - 1;
       }
 
+      // Currently we don't support breakout mark for children nodes of bodiedSyncBlock node
+      // Hence strip out the mark for now
+      if (destNode.type.name === 'bodiedSyncBlock' && expValEquals('platform_synced_block', 'isEnabled', true)) {
+        var _convertedNodeSlice2;
+        var nodes = [];
+        (_convertedNodeSlice2 = convertedNodeSlice) === null || _convertedNodeSlice2 === void 0 || _convertedNodeSlice2.content.forEach(function (node) {
+          nodes.push(node.mark(node.marks.filter(function (mark) {
+            return mark.type.name !== 'breakout';
+          })));
+        });
+        convertedNodeSlice = new Slice(Fragment.from(nodes), 0, 0);
+        convertedNode = convertedNodeSlice.content;
+      }
+
       // delete the content from the original position
       tr.delete(sliceFrom, sliceTo);
       var mappedTo = tr.mapping.map(to);

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

@@ -5,11 +5,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 // 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 { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
+import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, nativeAnchorStyles, 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, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -398,17 +399,43 @@ var blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+var dragHandlerAnchorStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
+    }
+  }
+});
 export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var api = _ref.api;
   var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
     disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
   });
+  var shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('platform_native_anchor_use_css_style');
   var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   return jsx(Global, {
     styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
     }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone]
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? nativeAnchorStyles : dragHandlerAnchorStyles)]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.7.8",
+	"version": "7.8.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -52,10 +52,10 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^16.2.0",
+		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.42.0",
-		"@atlaskit/tokens": "^8.2.0",
+		"@atlaskit/tmp-editor-statsig": "^13.43.0",
+		"@atlaskit/tokens": "^8.3.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.34.0",
+		"@atlaskit/editor-common": "^110.35.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -143,6 +143,9 @@
 		"dst-a11y__replace-anchor-with-link__editor-jenga": {
 			"type": "boolean"
 		},
+		"platform_native_anchor_use_css_style": {
+			"type": "boolean"
+		},
 		"editor_native_anchor_remove_decoration_in_apply": {
 			"type": "boolean"
 		},