@atlaskit/editor-plugin-block-menu 6.0.47 → 6.0.48

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 6.0.48
+
+### Patch Changes
+
+- [`3cfeff169fe0d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3cfeff169fe0d) -
+  [ux] Persist width marks for supported node types when transforming
+- [`8d553b883996b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d553b883996b) -
+  Add block menu transform experience tracking
+- Updated dependencies
+
 ## 6.0.47
 
 ### Patch Changes

package/dist/cjs/editor-commands/transform-node-utils/steps/wrapMixedContentStep.js

@@ -6,21 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapMixedContentStep = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _marks = require("../marks");
 var _types = require("../types");
-var _utils = require("../utils");
+var _utils2 = require("../utils");
 /**
  * Creates a layout section with two columns, where the first column contains the provided content.
+ * Preserves breakout marks if provided.
  */
-var createLayoutSection = function createLayoutSection(content, layoutSection, layoutColumn) {
+var createLayoutSection = function createLayoutSection(content, layoutSection, layoutColumn, marks) {
   var columnOne = layoutColumn.createAndFill({}, (0, _marks.removeDisallowedMarks)(content, layoutColumn));
   var columnTwo = layoutColumn.createAndFill();
   if (!columnOne || !columnTwo) {
     return null;
   }
-  return layoutSection.createAndFill({}, [columnOne, columnTwo]);
+  return layoutSection.createAndFill({}, [columnOne, columnTwo], marks);
 };
 
 /**
@@ -140,6 +142,25 @@ var wrapMixedContentStep = exports.wrapMixedContentStep = function wrapMixedCont
   var _schema$nodes = schema.nodes,
     layoutSection = _schema$nodes.layoutSection,
     layoutColumn = _schema$nodes.layoutColumn;
+
+  // [FEATURE FLAG: platform_editor_preserve_breakout_on_transform]
+  // Preserves breakout mark width when transforming to layoutSection from resizable nodes.
+  // This ensures that custom width settings are maintained during block type transformations.
+  // To clean up: remove the if-else block and keep only the flag-on behavior (lines 151-159).
+  var breakoutMark;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_preserve_breakout_on_transform')) {
+    // NEW BEHAVIOR: Preserve breakout mark when both source and target support resizing
+    var sourceSupportsBreakout = _utils.breakoutResizableNodes.includes(fromNode.type.name);
+    var targetSupportsBreakout = _utils.breakoutResizableNodes.includes(targetNodeTypeName);
+    var shouldPreserveBreakout = sourceSupportsBreakout && targetSupportsBreakout;
+    if (shouldPreserveBreakout) {
+      breakoutMark = fromNode.marks.find(function (mark) {
+        return mark.type.name === 'breakout';
+      });
+    }
+  }
+  // else: OLD BEHAVIOR - no breakout mark preservation (to be removed when flag is cleaned up)
+
   var result = [];
   var currentContainerContent = [];
   var hasCreatedContainer = false;
@@ -149,7 +170,7 @@ var wrapMixedContentStep = exports.wrapMixedContentStep = function wrapMixedCont
     }
     var container = null;
     if (isLayout) {
-      container = createLayoutSection(currentContainerContent, layoutSection, layoutColumn);
+      container = createLayoutSection(currentContainerContent, layoutSection, layoutColumn, breakoutMark ? [breakoutMark] : undefined);
     } else if (isCodeblock) {
       container = createTextContentContainer(currentContainerContent, targetNodeType, schema);
     } else {
@@ -171,10 +192,10 @@ var wrapMixedContentStep = exports.wrapMixedContentStep = function wrapMixedCont
     (_currentContainerCont = currentContainerContent).push.apply(_currentContainerCont, (0, _toConsumableArray2.default)((0, _marks.removeDisallowedMarks)([node], validationType)));
   };
   var handleCodeblockTextNode = function handleCodeblockTextNode(node) {
-    currentContainerContent.push((0, _utils.createTextContent)(node));
+    currentContainerContent.push((0, _utils2.createTextContent)(node));
   };
   var handleConvertibleTextNode = function handleConvertibleTextNode(node) {
-    var paragraph = (0, _utils.convertTextNodeToParagraph)(node, schema);
+    var paragraph = (0, _utils2.convertTextNodeToParagraph)(node, schema);
     if (paragraph) {
       currentContainerContent.push(paragraph);
     }
@@ -188,11 +209,11 @@ var wrapMixedContentStep = exports.wrapMixedContentStep = function wrapMixedCont
       handleWrappableNode(node);
       return;
     }
-    if ((0, _utils.isTextNode)(node) && isCodeblock) {
+    if ((0, _utils2.isTextNode)(node) && isCodeblock) {
       handleCodeblockTextNode(node);
       return;
     }
-    if ((0, _utils.isTextNode)(node)) {
+    if ((0, _utils2.isTextNode)(node)) {
       handleConvertibleTextNode(node);
       return;
     }

package/dist/cjs/editor-commands/transform-node-utils/wrapStep.js

@@ -4,17 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapStep = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _marks = require("./marks");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 /**
  * Wraps nodes into the target container type.
  * When wrapping into expand, any expand children are converted to nestedExpand
  * since expand cannot be a direct child of expand.
+ * 
+ * Preserves breakout marks when both source and target nodes support resizing
+ * (codeBlock, expand, layoutSection).
  */
 var wrapStep = exports.wrapStep = function wrapStep(nodes, context) {
   var schema = context.schema,
-    targetNodeTypeName = context.targetNodeTypeName;
+    targetNodeTypeName = context.targetNodeTypeName,
+    fromNode = context.fromNode;
 
   // When wrapping into expand, convert any expand children to nestedExpand
   // since expand cannot be a direct child of expand
@@ -22,7 +27,7 @@ var wrapStep = exports.wrapStep = function wrapStep(nodes, context) {
   if (targetNodeTypeName === 'expand') {
     processedNodes = nodes.map(function (node) {
       if (node.type.name === 'expand') {
-        var nestedExpandNode = (0, _utils.convertExpandToNestedExpand)(node, schema);
+        var nestedExpandNode = (0, _utils2.convertExpandToNestedExpand)(node, schema);
         return nestedExpandNode !== null && nestedExpandNode !== void 0 ? nestedExpandNode : node;
       }
       return node;
@@ -39,6 +44,28 @@ var wrapStep = exports.wrapStep = function wrapStep(nodes, context) {
   var nodeAttrs = isExpandType && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_expand_localid_fix') ? {
     localId: crypto.randomUUID()
   } : {};
-  var outputNode = targetNodeType.createAndFill(nodeAttrs, (0, _marks.removeDisallowedMarks)(processedNodes, schema.nodes[targetNodeTypeName]));
+
+  // [FEATURE FLAG: platform_editor_preserve_breakout_on_transform]
+  // Preserves breakout mark width when transforming between resizable nodes (codeBlock, expand, layoutSection).
+  // This ensures that custom width settings are maintained during block type transformations.
+  // To clean up: remove the if-else block and keep only the flag-on behavior (lines 47-58).
+  var marks;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_preserve_breakout_on_transform')) {
+    // NEW BEHAVIOR: Preserve breakout marks when both source and target support resizing
+    var sourceSupportsBreakout = _utils.breakoutResizableNodes.includes(fromNode.type.name);
+    var targetSupportsBreakout = _utils.breakoutResizableNodes.includes(targetNodeType.name);
+    var shouldPreserveBreakout = sourceSupportsBreakout && targetSupportsBreakout;
+    if (shouldPreserveBreakout) {
+      var breakoutMark = fromNode.marks.find(function (mark) {
+        return mark.type.name === 'breakout';
+      });
+      if (breakoutMark) {
+        marks = [breakoutMark];
+      }
+    }
+  }
+  // else: OLD BEHAVIOR - no breakout mark preservation (to be removed when flag is cleaned up)
+
+  var outputNode = targetNodeType.createAndFill(nodeAttrs, (0, _marks.removeDisallowedMarks)(processedNodes, schema.nodes[targetNodeTypeName]), marks);
   return outputNode ? [outputNode] : nodes;
 };

package/dist/cjs/pm-plugins/experiences/block-menu-experiences.js

@@ -91,6 +91,17 @@ var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = func
       observeConfig: actionObserveConfig
     })]
   });
+  var blockTransformExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
+    action: _analytics.ACTION.TRANSFORMED,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.TRANSFORM_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: _experienceCheckUtils.handleTransformDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
   var handleMenuOpened = function handleMenuOpened(method) {
     // Don't start if block menu is already visible
     if ((0, _experienceCheckUtils.isBlockMenuVisible)(getPopupsTarget())) {
@@ -100,7 +111,20 @@ var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = func
       method: method
     });
   };
+  var handleTransformActioned = function handleTransformActioned(target) {
+    if (!target.closest('[data-testid="editor-turn-into-menu--content"]')) {
+      return false;
+    }
+    var turnIntoButton = target.closest('button');
+    if (turnIntoButton && turnIntoButton instanceof HTMLElement && !turnIntoButton.hasAttribute('disabled') && turnIntoButton.getAttribute('aria-disabled') !== 'true') {
+      blockTransformExperience.start();
+    }
+    return true;
+  };
   var handleItemActioned = function handleItemActioned(target) {
+    if (handleTransformActioned(target)) {
+      return;
+    }
     var button = target.closest('button[data-testid]');
     if (!button || !(button instanceof HTMLButtonElement) || button.disabled || button.getAttribute('aria-disabled') === 'true') {
       return;
@@ -180,6 +204,9 @@ var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = func
           blockDeleteExperience.abort({
             reason: ABORT_REASON.EDITOR_DESTROYED
           });
+          blockTransformExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
           editorView = undefined;
           unbindClickListener();
           unbindKeydownListener();

package/dist/cjs/pm-plugins/experiences/experience-check-utils.js

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDragHandleElement = exports.isBlockMenuVisible = exports.handleMoveDomMutation = exports.handleMenuOpenDomMutation = exports.handleDeleteDomMutation = exports.getParentDOMAtSelection = void 0;
+exports.isDragHandleElement = exports.isBlockMenuVisible = exports.handleTransformDomMutation = exports.handleMoveDomMutation = exports.handleMenuOpenDomMutation = exports.handleDeleteDomMutation = exports.getParentDOMAtSelection = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _experiences = require("@atlaskit/editor-common/experiences");
+var _editorTables = require("@atlaskit/editor-tables");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -38,19 +39,31 @@ var isBlockMenuVisible = exports.isBlockMenuVisible = function isBlockMenuVisibl
  * from the provided editor view.
  *
  * @param editorView - The editor view from which to get the parent DOM element
- * @returns The parent HTMLElement at the selection start, or null if not found
+ * @returns The parent HTMLElement of the block at the selection, or null if not found
  */
 var getParentDOMAtSelection = exports.getParentDOMAtSelection = function getParentDOMAtSelection(editorView) {
   if (!editorView) {
     return null;
   }
   var selection = editorView.state.selection;
+  if (selection instanceof _editorTables.CellSelection) {
+    // $anchorCell resolves inside the row (before the cell), so
+    // $anchorCell.depth is the row's depth. Table is one level up.
+    var $cell = selection.$anchorCell;
+    var tableDepth = $cell.depth - 1;
+    if (tableDepth > 0) {
+      var dom = editorView.nodeDOM($cell.before(tableDepth));
+      if (dom instanceof HTMLElement && dom.parentElement) {
+        return dom.parentElement;
+      }
+    }
+  }
   var from = selection.from;
   var nodeDOM = editorView.nodeDOM(from);
   if (nodeDOM instanceof HTMLElement) {
     return nodeDOM.parentElement;
   }
-  return null;
+  return editorView.dom || null;
 };
 var isBlockMenuAddedInMutation = function isBlockMenuAddedInMutation(_ref) {
   var type = _ref.type,
@@ -144,4 +157,29 @@ var handleDeleteDomMutation = exports.handleDeleteDomMutation = function handleD
     };
   }
   return undefined;
+};
+
+/**
+ * Handles DOM mutations to determine if a transform action was performed.
+ *
+ * Transforms replace one block type with another (e.g. paragraph → heading),
+ * producing childList mutations with both removed (old node) and added (new node).
+ *
+ * @param options.mutations - The list of DOM mutation records
+ * @returns An ExperienceCheckResult indicating success if a transform was detected, otherwise undefined
+ */
+var handleTransformDomMutation = exports.handleTransformDomMutation = function handleTransformDomMutation(_ref5) {
+  var mutations = _ref5.mutations;
+  var hasRemovedNodes = mutations.some(function (m) {
+    return m.type === 'childList' && m.removedNodes.length > 0;
+  });
+  var hasAddedNodes = mutations.some(function (m) {
+    return m.type === 'childList' && m.addedNodes.length > 0;
+  });
+  if (hasRemovedNodes && hasAddedNodes) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
 };

package/dist/es2019/editor-commands/transform-node-utils/steps/wrapMixedContentStep.js

@@ -1,3 +1,4 @@
+import { breakoutResizableNodes } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { removeDisallowedMarks } from '../marks';
@@ -6,14 +7,15 @@ import { convertTextNodeToParagraph, createTextContent, isTextNode } from '../ut
 
 /**
  * Creates a layout section with two columns, where the first column contains the provided content.
+ * Preserves breakout marks if provided.
  */
-const createLayoutSection = (content, layoutSection, layoutColumn) => {
+const createLayoutSection = (content, layoutSection, layoutColumn, marks) => {
   const columnOne = layoutColumn.createAndFill({}, removeDisallowedMarks(content, layoutColumn));
   const columnTwo = layoutColumn.createAndFill();
   if (!columnOne || !columnTwo) {
     return null;
   }
-  return layoutSection.createAndFill({}, [columnOne, columnTwo]);
+  return layoutSection.createAndFill({}, [columnOne, columnTwo], marks);
 };
 
 /**
@@ -136,6 +138,23 @@ export const wrapMixedContentStep = (nodes, context) => {
     layoutSection,
     layoutColumn
   } = schema.nodes;
+
+  // [FEATURE FLAG: platform_editor_preserve_breakout_on_transform]
+  // Preserves breakout mark width when transforming to layoutSection from resizable nodes.
+  // This ensures that custom width settings are maintained during block type transformations.
+  // To clean up: remove the if-else block and keep only the flag-on behavior (lines 151-159).
+  let breakoutMark;
+  if (fg('platform_editor_preserve_breakout_on_transform')) {
+    // NEW BEHAVIOR: Preserve breakout mark when both source and target support resizing
+    const sourceSupportsBreakout = breakoutResizableNodes.includes(fromNode.type.name);
+    const targetSupportsBreakout = breakoutResizableNodes.includes(targetNodeTypeName);
+    const shouldPreserveBreakout = sourceSupportsBreakout && targetSupportsBreakout;
+    if (shouldPreserveBreakout) {
+      breakoutMark = fromNode.marks.find(mark => mark.type.name === 'breakout');
+    }
+  }
+  // else: OLD BEHAVIOR - no breakout mark preservation (to be removed when flag is cleaned up)
+
   const result = [];
   let currentContainerContent = [];
   let hasCreatedContainer = false;
@@ -145,7 +164,7 @@ export const wrapMixedContentStep = (nodes, context) => {
     }
     let container = null;
     if (isLayout) {
-      container = createLayoutSection(currentContainerContent, layoutSection, layoutColumn);
+      container = createLayoutSection(currentContainerContent, layoutSection, layoutColumn, breakoutMark ? [breakoutMark] : undefined);
     } else if (isCodeblock) {
       container = createTextContentContainer(currentContainerContent, targetNodeType, schema);
     } else {

package/dist/es2019/editor-commands/transform-node-utils/wrapStep.js

@@ -1,3 +1,4 @@
+import { breakoutResizableNodes } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { removeDisallowedMarks } from './marks';
 import { convertExpandToNestedExpand } from './utils';
@@ -6,11 +7,15 @@ import { convertExpandToNestedExpand } from './utils';
  * Wraps nodes into the target container type.
  * When wrapping into expand, any expand children are converted to nestedExpand
  * since expand cannot be a direct child of expand.
+ * 
+ * Preserves breakout marks when both source and target nodes support resizing
+ * (codeBlock, expand, layoutSection).
  */
 export const wrapStep = (nodes, context) => {
   const {
     schema,
-    targetNodeTypeName
+    targetNodeTypeName,
+    fromNode
   } = context;
 
   // When wrapping into expand, convert any expand children to nestedExpand
@@ -36,6 +41,26 @@ export const wrapStep = (nodes, context) => {
   const nodeAttrs = isExpandType && fg('platform_editor_block_menu_expand_localid_fix') ? {
     localId: crypto.randomUUID()
   } : {};
-  const outputNode = targetNodeType.createAndFill(nodeAttrs, removeDisallowedMarks(processedNodes, schema.nodes[targetNodeTypeName]));
+
+  // [FEATURE FLAG: platform_editor_preserve_breakout_on_transform]
+  // Preserves breakout mark width when transforming between resizable nodes (codeBlock, expand, layoutSection).
+  // This ensures that custom width settings are maintained during block type transformations.
+  // To clean up: remove the if-else block and keep only the flag-on behavior (lines 47-58).
+  let marks;
+  if (fg('platform_editor_preserve_breakout_on_transform')) {
+    // NEW BEHAVIOR: Preserve breakout marks when both source and target support resizing
+    const sourceSupportsBreakout = breakoutResizableNodes.includes(fromNode.type.name);
+    const targetSupportsBreakout = breakoutResizableNodes.includes(targetNodeType.name);
+    const shouldPreserveBreakout = sourceSupportsBreakout && targetSupportsBreakout;
+    if (shouldPreserveBreakout) {
+      const breakoutMark = fromNode.marks.find(mark => mark.type.name === 'breakout');
+      if (breakoutMark) {
+        marks = [breakoutMark];
+      }
+    }
+  }
+  // else: OLD BEHAVIOR - no breakout mark preservation (to be removed when flag is cleaned up)
+
+  const outputNode = targetNodeType.createAndFill(nodeAttrs, removeDisallowedMarks(processedNodes, schema.nodes[targetNodeTypeName]), marks);
   return outputNode ? [outputNode] : nodes;
 };

package/dist/es2019/pm-plugins/experiences/block-menu-experiences.js

@@ -4,7 +4,7 @@ import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView } from '@atlaskit/editor-common/experiences';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { getParentDOMAtSelection, handleDeleteDomMutation, handleMenuOpenDomMutation, handleMoveDomMutation, isBlockMenuVisible, isDragHandleElement } from './experience-check-utils';
+import { getParentDOMAtSelection, handleDeleteDomMutation, handleMenuOpenDomMutation, handleMoveDomMutation, handleTransformDomMutation, isBlockMenuVisible, isDragHandleElement } from './experience-check-utils';
 const TIMEOUT_DURATION = 1000;
 const pluginKey = new PluginKey('blockMenuExperiences');
 const START_METHOD = {
@@ -82,6 +82,17 @@ export const getBlockMenuExperiencesPlugin = ({
       observeConfig: actionObserveConfig
     })]
   });
+  const blockTransformExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.TRANSFORMED,
+    actionSubjectId: ACTION_SUBJECT_ID.TRANSFORM_BLOCK,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleTransformDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
   const handleMenuOpened = method => {
     // Don't start if block menu is already visible
     if (isBlockMenuVisible(getPopupsTarget())) {
@@ -91,7 +102,20 @@ export const getBlockMenuExperiencesPlugin = ({
       method
     });
   };
+  const handleTransformActioned = target => {
+    if (!target.closest('[data-testid="editor-turn-into-menu--content"]')) {
+      return false;
+    }
+    const turnIntoButton = target.closest('button');
+    if (turnIntoButton && turnIntoButton instanceof HTMLElement && !turnIntoButton.hasAttribute('disabled') && turnIntoButton.getAttribute('aria-disabled') !== 'true') {
+      blockTransformExperience.start();
+    }
+    return true;
+  };
   const handleItemActioned = target => {
+    if (handleTransformActioned(target)) {
+      return;
+    }
     const button = target.closest('button[data-testid]');
     if (!button || !(button instanceof HTMLButtonElement) || button.disabled || button.getAttribute('aria-disabled') === 'true') {
       return;
@@ -171,6 +195,9 @@ export const getBlockMenuExperiencesPlugin = ({
           blockDeleteExperience.abort({
             reason: ABORT_REASON.EDITOR_DESTROYED
           });
+          blockTransformExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
           editorView = undefined;
           unbindClickListener();
           unbindKeydownListener();

package/dist/es2019/pm-plugins/experiences/experience-check-utils.js

@@ -1,4 +1,6 @@
 import { popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+import { CellSelection } from '@atlaskit/editor-tables';
+
 /**
  * Checks if the given element or any of its ancestors is a drag handle element.
  *
@@ -27,7 +29,7 @@ export const isBlockMenuVisible = popupsTarget => {
  * from the provided editor view.
  *
  * @param editorView - The editor view from which to get the parent DOM element
- * @returns The parent HTMLElement at the selection start, or null if not found
+ * @returns The parent HTMLElement of the block at the selection, or null if not found
  */
 export const getParentDOMAtSelection = editorView => {
   if (!editorView) {
@@ -36,12 +38,24 @@ export const getParentDOMAtSelection = editorView => {
   const {
     selection
   } = editorView.state;
+  if (selection instanceof CellSelection) {
+    // $anchorCell resolves inside the row (before the cell), so
+    // $anchorCell.depth is the row's depth. Table is one level up.
+    const $cell = selection.$anchorCell;
+    const tableDepth = $cell.depth - 1;
+    if (tableDepth > 0) {
+      const dom = editorView.nodeDOM($cell.before(tableDepth));
+      if (dom instanceof HTMLElement && dom.parentElement) {
+        return dom.parentElement;
+      }
+    }
+  }
   const from = selection.from;
   const nodeDOM = editorView.nodeDOM(from);
   if (nodeDOM instanceof HTMLElement) {
     return nodeDOM.parentElement;
   }
-  return null;
+  return editorView.dom || null;
 };
 const isBlockMenuAddedInMutation = ({
   type,
@@ -122,4 +136,26 @@ export const handleDeleteDomMutation = ({
     };
   }
   return undefined;
+};
+
+/**
+ * Handles DOM mutations to determine if a transform action was performed.
+ *
+ * Transforms replace one block type with another (e.g. paragraph → heading),
+ * producing childList mutations with both removed (old node) and added (new node).
+ *
+ * @param options.mutations - The list of DOM mutation records
+ * @returns An ExperienceCheckResult indicating success if a transform was detected, otherwise undefined
+ */
+export const handleTransformDomMutation = ({
+  mutations
+}) => {
+  const hasRemovedNodes = mutations.some(m => m.type === 'childList' && m.removedNodes.length > 0);
+  const hasAddedNodes = mutations.some(m => m.type === 'childList' && m.addedNodes.length > 0);
+  if (hasRemovedNodes && hasAddedNodes) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
 };

package/dist/esm/editor-commands/transform-node-utils/steps/wrapMixedContentStep.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { breakoutResizableNodes } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { removeDisallowedMarks } from '../marks';
@@ -7,14 +8,15 @@ import { convertTextNodeToParagraph, createTextContent, isTextNode } from '../ut
 
 /**
  * Creates a layout section with two columns, where the first column contains the provided content.
+ * Preserves breakout marks if provided.
  */
-var createLayoutSection = function createLayoutSection(content, layoutSection, layoutColumn) {
+var createLayoutSection = function createLayoutSection(content, layoutSection, layoutColumn, marks) {
   var columnOne = layoutColumn.createAndFill({}, removeDisallowedMarks(content, layoutColumn));
   var columnTwo = layoutColumn.createAndFill();
   if (!columnOne || !columnTwo) {
     return null;
   }
-  return layoutSection.createAndFill({}, [columnOne, columnTwo]);
+  return layoutSection.createAndFill({}, [columnOne, columnTwo], marks);
 };
 
 /**
@@ -134,6 +136,25 @@ export var wrapMixedContentStep = function wrapMixedContentStep(nodes, context)
   var _schema$nodes = schema.nodes,
     layoutSection = _schema$nodes.layoutSection,
     layoutColumn = _schema$nodes.layoutColumn;
+
+  // [FEATURE FLAG: platform_editor_preserve_breakout_on_transform]
+  // Preserves breakout mark width when transforming to layoutSection from resizable nodes.
+  // This ensures that custom width settings are maintained during block type transformations.
+  // To clean up: remove the if-else block and keep only the flag-on behavior (lines 151-159).
+  var breakoutMark;
+  if (fg('platform_editor_preserve_breakout_on_transform')) {
+    // NEW BEHAVIOR: Preserve breakout mark when both source and target support resizing
+    var sourceSupportsBreakout = breakoutResizableNodes.includes(fromNode.type.name);
+    var targetSupportsBreakout = breakoutResizableNodes.includes(targetNodeTypeName);
+    var shouldPreserveBreakout = sourceSupportsBreakout && targetSupportsBreakout;
+    if (shouldPreserveBreakout) {
+      breakoutMark = fromNode.marks.find(function (mark) {
+        return mark.type.name === 'breakout';
+      });
+    }
+  }
+  // else: OLD BEHAVIOR - no breakout mark preservation (to be removed when flag is cleaned up)
+
   var result = [];
   var currentContainerContent = [];
   var hasCreatedContainer = false;
@@ -143,7 +164,7 @@ export var wrapMixedContentStep = function wrapMixedContentStep(nodes, context)
     }
     var container = null;
     if (isLayout) {
-      container = createLayoutSection(currentContainerContent, layoutSection, layoutColumn);
+      container = createLayoutSection(currentContainerContent, layoutSection, layoutColumn, breakoutMark ? [breakoutMark] : undefined);
     } else if (isCodeblock) {
       container = createTextContentContainer(currentContainerContent, targetNodeType, schema);
     } else {

package/dist/esm/editor-commands/transform-node-utils/wrapStep.js

@@ -1,3 +1,4 @@
+import { breakoutResizableNodes } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { removeDisallowedMarks } from './marks';
 import { convertExpandToNestedExpand } from './utils';
@@ -6,10 +7,14 @@ import { convertExpandToNestedExpand } from './utils';
  * Wraps nodes into the target container type.
  * When wrapping into expand, any expand children are converted to nestedExpand
  * since expand cannot be a direct child of expand.
+ * 
+ * Preserves breakout marks when both source and target nodes support resizing
+ * (codeBlock, expand, layoutSection).
  */
 export var wrapStep = function wrapStep(nodes, context) {
   var schema = context.schema,
-    targetNodeTypeName = context.targetNodeTypeName;
+    targetNodeTypeName = context.targetNodeTypeName,
+    fromNode = context.fromNode;
 
   // When wrapping into expand, convert any expand children to nestedExpand
   // since expand cannot be a direct child of expand
@@ -34,6 +39,28 @@ export var wrapStep = function wrapStep(nodes, context) {
   var nodeAttrs = isExpandType && fg('platform_editor_block_menu_expand_localid_fix') ? {
     localId: crypto.randomUUID()
   } : {};
-  var outputNode = targetNodeType.createAndFill(nodeAttrs, removeDisallowedMarks(processedNodes, schema.nodes[targetNodeTypeName]));
+
+  // [FEATURE FLAG: platform_editor_preserve_breakout_on_transform]
+  // Preserves breakout mark width when transforming between resizable nodes (codeBlock, expand, layoutSection).
+  // This ensures that custom width settings are maintained during block type transformations.
+  // To clean up: remove the if-else block and keep only the flag-on behavior (lines 47-58).
+  var marks;
+  if (fg('platform_editor_preserve_breakout_on_transform')) {
+    // NEW BEHAVIOR: Preserve breakout marks when both source and target support resizing
+    var sourceSupportsBreakout = breakoutResizableNodes.includes(fromNode.type.name);
+    var targetSupportsBreakout = breakoutResizableNodes.includes(targetNodeType.name);
+    var shouldPreserveBreakout = sourceSupportsBreakout && targetSupportsBreakout;
+    if (shouldPreserveBreakout) {
+      var breakoutMark = fromNode.marks.find(function (mark) {
+        return mark.type.name === 'breakout';
+      });
+      if (breakoutMark) {
+        marks = [breakoutMark];
+      }
+    }
+  }
+  // else: OLD BEHAVIOR - no breakout mark preservation (to be removed when flag is cleaned up)
+
+  var outputNode = targetNodeType.createAndFill(nodeAttrs, removeDisallowedMarks(processedNodes, schema.nodes[targetNodeTypeName]), marks);
   return outputNode ? [outputNode] : nodes;
 };

package/dist/esm/pm-plugins/experiences/block-menu-experiences.js

@@ -4,7 +4,7 @@ import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView } from '@atlaskit/editor-common/experiences';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { getParentDOMAtSelection, handleDeleteDomMutation, handleMenuOpenDomMutation, handleMoveDomMutation, isBlockMenuVisible, isDragHandleElement } from './experience-check-utils';
+import { getParentDOMAtSelection, handleDeleteDomMutation, handleMenuOpenDomMutation, handleMoveDomMutation, handleTransformDomMutation, isBlockMenuVisible, isDragHandleElement } from './experience-check-utils';
 var TIMEOUT_DURATION = 1000;
 var pluginKey = new PluginKey('blockMenuExperiences');
 var START_METHOD = {
@@ -85,6 +85,17 @@ export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugi
       observeConfig: actionObserveConfig
     })]
   });
+  var blockTransformExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.TRANSFORMED,
+    actionSubjectId: ACTION_SUBJECT_ID.TRANSFORM_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleTransformDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
   var handleMenuOpened = function handleMenuOpened(method) {
     // Don't start if block menu is already visible
     if (isBlockMenuVisible(getPopupsTarget())) {
@@ -94,7 +105,20 @@ export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugi
       method: method
     });
   };
+  var handleTransformActioned = function handleTransformActioned(target) {
+    if (!target.closest('[data-testid="editor-turn-into-menu--content"]')) {
+      return false;
+    }
+    var turnIntoButton = target.closest('button');
+    if (turnIntoButton && turnIntoButton instanceof HTMLElement && !turnIntoButton.hasAttribute('disabled') && turnIntoButton.getAttribute('aria-disabled') !== 'true') {
+      blockTransformExperience.start();
+    }
+    return true;
+  };
   var handleItemActioned = function handleItemActioned(target) {
+    if (handleTransformActioned(target)) {
+      return;
+    }
     var button = target.closest('button[data-testid]');
     if (!button || !(button instanceof HTMLButtonElement) || button.disabled || button.getAttribute('aria-disabled') === 'true') {
       return;
@@ -174,6 +198,9 @@ export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugi
           blockDeleteExperience.abort({
             reason: ABORT_REASON.EDITOR_DESTROYED
           });
+          blockTransformExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
           editorView = undefined;
           unbindClickListener();
           unbindKeydownListener();

package/dist/esm/pm-plugins/experiences/experience-check-utils.js

@@ -3,6 +3,8 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+import { CellSelection } from '@atlaskit/editor-tables';
+
 /**
  * Checks if the given element or any of its ancestors is a drag handle element.
  *
@@ -31,19 +33,31 @@ export var isBlockMenuVisible = function isBlockMenuVisible(popupsTarget) {
  * from the provided editor view.
  *
  * @param editorView - The editor view from which to get the parent DOM element
- * @returns The parent HTMLElement at the selection start, or null if not found
+ * @returns The parent HTMLElement of the block at the selection, or null if not found
  */
 export var getParentDOMAtSelection = function getParentDOMAtSelection(editorView) {
   if (!editorView) {
     return null;
   }
   var selection = editorView.state.selection;
+  if (selection instanceof CellSelection) {
+    // $anchorCell resolves inside the row (before the cell), so
+    // $anchorCell.depth is the row's depth. Table is one level up.
+    var $cell = selection.$anchorCell;
+    var tableDepth = $cell.depth - 1;
+    if (tableDepth > 0) {
+      var dom = editorView.nodeDOM($cell.before(tableDepth));
+      if (dom instanceof HTMLElement && dom.parentElement) {
+        return dom.parentElement;
+      }
+    }
+  }
   var from = selection.from;
   var nodeDOM = editorView.nodeDOM(from);
   if (nodeDOM instanceof HTMLElement) {
     return nodeDOM.parentElement;
   }
-  return null;
+  return editorView.dom || null;
 };
 var isBlockMenuAddedInMutation = function isBlockMenuAddedInMutation(_ref) {
   var type = _ref.type,
@@ -137,4 +151,29 @@ export var handleDeleteDomMutation = function handleDeleteDomMutation(_ref4) {
     };
   }
   return undefined;
+};
+
+/**
+ * Handles DOM mutations to determine if a transform action was performed.
+ *
+ * Transforms replace one block type with another (e.g. paragraph → heading),
+ * producing childList mutations with both removed (old node) and added (new node).
+ *
+ * @param options.mutations - The list of DOM mutation records
+ * @returns An ExperienceCheckResult indicating success if a transform was detected, otherwise undefined
+ */
+export var handleTransformDomMutation = function handleTransformDomMutation(_ref5) {
+  var mutations = _ref5.mutations;
+  var hasRemovedNodes = mutations.some(function (m) {
+    return m.type === 'childList' && m.removedNodes.length > 0;
+  });
+  var hasAddedNodes = mutations.some(function (m) {
+    return m.type === 'childList' && m.addedNodes.length > 0;
+  });
+  if (hasRemovedNodes && hasAddedNodes) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
 };

package/dist/types/editor-commands/transform-node-utils/wrapStep.d.ts

@@ -3,5 +3,8 @@ import type { TransformStep } from './types';
  * Wraps nodes into the target container type.
  * When wrapping into expand, any expand children are converted to nestedExpand
  * since expand cannot be a direct child of expand.
+ *
+ * Preserves breakout marks when both source and target nodes support resizing
+ * (codeBlock, expand, layoutSection).
  */
 export declare const wrapStep: TransformStep;

package/dist/types/pm-plugins/experiences/experience-check-utils.d.ts

@@ -19,7 +19,7 @@ export declare const isBlockMenuVisible: (popupsTarget: HTMLElement | undefined)
  * from the provided editor view.
  *
  * @param editorView - The editor view from which to get the parent DOM element
- * @returns The parent HTMLElement at the selection start, or null if not found
+ * @returns The parent HTMLElement of the block at the selection, or null if not found
  */
 export declare const getParentDOMAtSelection: (editorView?: EditorView) => HTMLElement | null;
 /**
@@ -60,3 +60,15 @@ export declare const handleMoveDomMutation: ({ mutations, }: {
 export declare const handleDeleteDomMutation: ({ mutations, }: {
     mutations: MutationRecord[];
 }) => ExperienceCheckResult | undefined;
+/**
+ * Handles DOM mutations to determine if a transform action was performed.
+ *
+ * Transforms replace one block type with another (e.g. paragraph → heading),
+ * producing childList mutations with both removed (old node) and added (new node).
+ *
+ * @param options.mutations - The list of DOM mutation records
+ * @returns An ExperienceCheckResult indicating success if a transform was detected, otherwise undefined
+ */
+export declare const handleTransformDomMutation: ({ mutations, }: {
+    mutations: MutationRecord[];
+}) => ExperienceCheckResult | undefined;

package/dist/types-ts4.5/editor-commands/transform-node-utils/wrapStep.d.ts

@@ -3,5 +3,8 @@ import type { TransformStep } from './types';
  * Wraps nodes into the target container type.
  * When wrapping into expand, any expand children are converted to nestedExpand
  * since expand cannot be a direct child of expand.
+ *
+ * Preserves breakout marks when both source and target nodes support resizing
+ * (codeBlock, expand, layoutSection).
  */
 export declare const wrapStep: TransformStep;

package/dist/types-ts4.5/pm-plugins/experiences/experience-check-utils.d.ts

@@ -19,7 +19,7 @@ export declare const isBlockMenuVisible: (popupsTarget: HTMLElement | undefined)
  * from the provided editor view.
  *
  * @param editorView - The editor view from which to get the parent DOM element
- * @returns The parent HTMLElement at the selection start, or null if not found
+ * @returns The parent HTMLElement of the block at the selection, or null if not found
  */
 export declare const getParentDOMAtSelection: (editorView?: EditorView) => HTMLElement | null;
 /**
@@ -60,3 +60,15 @@ export declare const handleMoveDomMutation: ({ mutations, }: {
 export declare const handleDeleteDomMutation: ({ mutations, }: {
     mutations: MutationRecord[];
 }) => ExperienceCheckResult | undefined;
+/**
+ * Handles DOM mutations to determine if a transform action was performed.
+ *
+ * Transforms replace one block type with another (e.g. paragraph → heading),
+ * producing childList mutations with both removed (old node) and added (new node).
+ *
+ * @param options.mutations - The list of DOM mutation records
+ * @returns An ExperienceCheckResult indicating success if a transform was detected, otherwise undefined
+ */
+export declare const handleTransformDomMutation: ({ mutations, }: {
+    mutations: MutationRecord[];
+}) => ExperienceCheckResult | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "6.0.47",
+	"version": "6.0.48",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,13 +46,13 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^29.0.0",
+		"@atlaskit/tmp-editor-statsig": "^29.1.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.16.0",
+		"@atlaskit/editor-common": "^111.17.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
@@ -104,6 +104,9 @@
 		},
 		"platform_editor_table_transform_selection_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_preserve_breakout_on_transform": {
+			"type": "boolean"
 		}
 	}
 }