@atlaskit/editor-plugin-block-controls 3.19.12 → 3.19.14

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.19.14
+
+### Patch Changes
+
+- [#180346](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180346)
+  [`d00d1d362bd18`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d00d1d362bd18) -
+  ED-28086 Clean up platform_editor_no_cursor_on_live_doc_init
+- Updated dependencies
+
+## 3.19.13
+
+### Patch Changes
+
+- [#180394](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180394)
+  [`3d81ac950c9a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d81ac950c9a0) -
+  Add alignment mark to widget spec under FG platform_editor_breakout_resizing_widget_fix
+
 ## 3.19.12
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -15,6 +15,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
+var _marks = require("./utils/marks");
 var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
   var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
@@ -29,7 +30,16 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
     return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
   });
 };
-var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
+var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    pos = _ref.pos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    handleOptions = _ref.handleOptions,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
     exposure: true
   })) {
@@ -43,11 +53,10 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+    marks: (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_widget_fix') ? (0, _marks.getActiveBlockMarks)(editorState, pos) : [],
     destroy: function destroy(node) {
       unbind && unbind();
       if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -11,6 +11,7 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _quickInsertButton = require("../ui/quick-insert-button");
+var _marks = require("./utils/marks");
 var _vanillaQuickInsert = require("./vanilla-quick-insert");
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
@@ -18,7 +19,17 @@ var findQuickInsertInsertButtonDecoration = exports.findQuickInsertInsertButtonD
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
-var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
+var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function quickInsertButtonDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    rootPos = _ref.rootPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    rootAnchorName = _ref.rootAnchorName,
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   var key = (0, _uuid.default)();
   var cleanupCallbacks = [];
   var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
@@ -26,11 +37,11 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     type: TYPE_QUICK_INSERT,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+
+    marks: (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_widget_fix') ? (0, _marks.getActiveBlockMarks)(editorState, rootPos) : [],
     destroy: function destroy(_) {
       if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
         nodeViewPortalProviderAPI.remove(key);

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

@@ -419,14 +419,35 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
       var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
       decorations = decorations.remove(_oldHandle);
-      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
+      var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)({
+        api: api,
+        formatMessage: formatMessage,
+        pos: (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos,
+        anchorName: (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName,
+        nodeType: (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType,
+        handleOptions: (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
       var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
       var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
-      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
+      var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)({
+        api: api,
+        formatMessage: formatMessage,
+        anchorName: (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.anchorName,
+        nodeType: (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.nodeType,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        rootPos: (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.rootPos,
+        rootAnchorName: (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName,
+        rootNodeType: (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/cjs/pm-plugins/utils/marks.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActiveBlockMarks = void 0;
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+var getActiveBlockMarks = exports.getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
+  var alignment = state.schema.marks.alignment;
+  var resolvedPos = state.doc.resolve(pos);
+  // find all active marks at the position
+  var marks = resolvedPos.marks();
+  return marks.filter(function (mark) {
+    return mark.type === alignment;
+  });
+};

package/dist/cjs/ui/drag-handle.js

@@ -862,7 +862,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var handleOnDrop = function handleOnDrop(event) {
     (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
   };
-  var hasHadInteraction = !(0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') || interactionState !== 'hasNotHadInteraction';
+  var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
   var renderButton = function renderButton() {
     return (
       // eslint-disable-next-line @atlaskit/design-system/no-html-button

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -7,6 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+import { getActiveBlockMarks } from './utils/marks';
 export const emptyParagraphNodeDecorations = () => {
   const anchorName = `--node-anchor-paragraph-0`;
   const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
@@ -20,7 +21,17 @@ export const emptyParagraphNodeDecorations = () => {
 export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
-export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) => {
+export const dragHandleDecoration = ({
+  api,
+  formatMessage,
+  pos,
+  anchorName,
+  nodeType,
+  nodeViewPortalProviderAPI,
+  handleOptions,
+  anchorRectCache,
+  editorState
+}) => {
   if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
     exposure: true
   })) {
@@ -34,11 +45,10 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, pos) : [],
     destroy: node => {
       unbind && unbind();
       if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -4,12 +4,24 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
+import { getActiveBlockMarks } from './utils/marks';
 import { createVanillaButton } from './vanilla-quick-insert';
 const TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export const findQuickInsertInsertButtonDecoration = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_QUICK_INSERT);
 };
-export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) => {
+export const quickInsertButtonDecoration = ({
+  api,
+  formatMessage,
+  rootPos,
+  anchorName,
+  nodeType,
+  nodeViewPortalProviderAPI,
+  rootAnchorName,
+  rootNodeType,
+  anchorRectCache,
+  editorState
+}) => {
   const key = uuid();
   const cleanupCallbacks = [];
   const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
@@ -17,11 +29,11 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
     type: TYPE_QUICK_INSERT,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, rootPos) : [],
     destroy: _ => {
       if (fg('platform_editor_fix_widget_destroy')) {
         nodeViewPortalProviderAPI.remove(key);

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

@@ -418,14 +418,35 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       const oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
       decorations = decorations.remove(oldHandle);
-      const handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
+      const handleDec = dragHandleDecoration({
+        api,
+        formatMessage,
+        pos: (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos,
+        anchorName: (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName,
+        nodeType: (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType,
+        handleOptions: (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions,
+        nodeViewPortalProviderAPI,
+        anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
       var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
       const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
-      const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
+      const quickInsertButton = quickInsertButtonDecoration({
+        api,
+        formatMessage,
+        anchorName: (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.anchorName,
+        nodeType: (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.nodeType,
+        nodeViewPortalProviderAPI,
+        rootPos: (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.rootPos,
+        rootAnchorName: (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName,
+        rootNodeType: (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType,
+        anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/es2019/pm-plugins/utils/marks.js

@@ -0,0 +1,23 @@
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export const getActiveBlockMarks = (state, pos) => {
+  const {
+    alignment
+  } = state.schema.marks;
+  const resolvedPos = state.doc.resolve(pos);
+  // find all active marks at the position
+  const marks = resolvedPos.marks();
+  return marks.filter(mark => mark.type === alignment);
+};

package/dist/es2019/ui/drag-handle.js

@@ -850,7 +850,7 @@ export const DragHandle = ({
   const handleOnDrop = event => {
     editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
   };
-  const hasHadInteraction = !fg('platform_editor_no_cursor_on_live_doc_init') || interactionState !== 'hasNotHadInteraction';
+  const hasHadInteraction = interactionState !== 'hasNotHadInteraction';
   const renderButton = () =>
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -8,6 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+import { getActiveBlockMarks } from './utils/marks';
 export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
   var anchorName = "--node-anchor-paragraph-0";
   var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
@@ -22,7 +23,16 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
     return spec.type === TYPE_HANDLE_DEC;
   });
 };
-export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache) {
+export var dragHandleDecoration = function dragHandleDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    pos = _ref.pos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    handleOptions = _ref.handleOptions,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   if (!editorExperiment('platform_editor_block_control_optimise_render', true, {
     exposure: true
   })) {
@@ -36,11 +46,10 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, pos) : [],
     destroy: function destroy(node) {
       unbind && unbind();
       if (editorExperiment('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -4,6 +4,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { QuickInsertWithVisibility, TypeAheadControl } from '../ui/quick-insert-button';
+import { getActiveBlockMarks } from './utils/marks';
 import { createVanillaButton } from './vanilla-quick-insert';
 var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
 export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
@@ -11,7 +12,17 @@ export var findQuickInsertInsertButtonDecoration = function findQuickInsertInser
     return spec.type === TYPE_QUICK_INSERT;
   });
 };
-export var quickInsertButtonDecoration = function quickInsertButtonDecoration(api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache) {
+export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_ref) {
+  var api = _ref.api,
+    formatMessage = _ref.formatMessage,
+    rootPos = _ref.rootPos,
+    anchorName = _ref.anchorName,
+    nodeType = _ref.nodeType,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
+    rootAnchorName = _ref.rootAnchorName,
+    rootNodeType = _ref.rootNodeType,
+    anchorRectCache = _ref.anchorRectCache,
+    editorState = _ref.editorState;
   var key = uuid();
   var cleanupCallbacks = [];
   var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
@@ -19,11 +30,11 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
     type: TYPE_QUICK_INSERT,
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
-     * Leaving this 'undefined' causes the widget to be wrapped in the mark before this position which creates
-     * weird stacking context issues. Providing an empty array causes the widget to correctly render before
-     * this exact position at the top of the DOM.
+     * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
+     * Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
      */
-    marks: [],
+
+    marks: fg('platform_editor_breakout_resizing_widget_fix') ? getActiveBlockMarks(editorState, rootPos) : [],
     destroy: function destroy(_) {
       if (fg('platform_editor_fix_widget_destroy')) {
         nodeViewPortalProviderAPI.remove(key);

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

@@ -412,14 +412,35 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
       var _activeNode9, _activeNode0, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       var _oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode0 = activeNode) === null || _activeNode0 === void 0 ? void 0 : _activeNode0.pos);
       decorations = decorations.remove(_oldHandle);
-      var handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions, anchorRectCache);
+      var handleDec = dragHandleDecoration({
+        api: api,
+        formatMessage: formatMessage,
+        pos: (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos,
+        anchorName: (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName,
+        nodeType: (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType,
+        handleOptions: (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
       var _activeNode1, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode0;
       var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode1 = activeNode) === null || _activeNode1 === void 0 ? void 0 : _activeNode1.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
-      var quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType, anchorRectCache);
+      var quickInsertButton = quickInsertButtonDecoration({
+        api: api,
+        formatMessage: formatMessage,
+        anchorName: (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.anchorName,
+        nodeType: (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.nodeType,
+        nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
+        rootPos: (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.rootPos,
+        rootAnchorName: (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName,
+        rootNodeType: (_latestActiveNode0 = latestActiveNode) === null || _latestActiveNode0 === void 0 ? void 0 : _latestActiveNode0.rootNodeType,
+        anchorRectCache: anchorRectCache,
+        editorState: newState
+      });
       decorations = decorations.add(newState.doc, [quickInsertButton]);
     }
   }

package/dist/esm/pm-plugins/utils/marks.js

@@ -0,0 +1,23 @@
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export var getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
+  var alignment = state.schema.marks.alignment;
+  var resolvedPos = state.doc.resolve(pos);
+  // find all active marks at the position
+  var marks = resolvedPos.marks();
+  return marks.filter(function (mark) {
+    return mark.type === alignment;
+  });
+};

package/dist/esm/ui/drag-handle.js

@@ -859,7 +859,7 @@ export var DragHandle = function DragHandle(_ref) {
   var handleOnDrop = function handleOnDrop(event) {
     editorExperiment('platform_editor_element_drag_and_drop_multiselect', true) && event.stopPropagation();
   };
-  var hasHadInteraction = !fg('platform_editor_no_cursor_on_live_doc_init') || interactionState !== 'hasNotHadInteraction';
+  var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
   var renderButton = function renderButton() {
     return (
       // eslint-disable-next-line @atlaskit/design-system/no-html-button

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

@@ -1,9 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions, anchorRectCache?: AnchorRectCache) => Decoration;
+type DragHandleDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    pos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    handleOptions?: HandleOptions;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const dragHandleDecoration: ({ api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache, editorState, }: DragHandleDecorationParams) => Decoration;
+export {};

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

@@ -1,8 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string, anchorRectCache?: AnchorRectCache) => Decoration;
+type QuickInsertButtonDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    rootPos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
+export {};

package/dist/types/pm-plugins/utils/marks.d.ts

@@ -0,0 +1,16 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export declare const getActiveBlockMarks: (state: EditorState, pos: number) => import("prosemirror-model").Mark[];

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

@@ -1,9 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const emptyParagraphNodeDecorations: () => Decoration;
 export declare const findHandleDec: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, handleOptions?: HandleOptions, anchorRectCache?: AnchorRectCache) => Decoration;
+type DragHandleDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    pos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    handleOptions?: HandleOptions;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const dragHandleDecoration: ({ api, formatMessage, pos, anchorName, nodeType, nodeViewPortalProviderAPI, handleOptions, anchorRectCache, editorState, }: DragHandleDecorationParams) => Decoration;
+export {};

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

@@ -1,8 +1,22 @@
 import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const findQuickInsertInsertButtonDecoration: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
-export declare const quickInsertButtonDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], rootPos: number, anchorName: string, nodeType: string, nodeViewPortalProviderAPI: PortalProviderAPI, rootAnchorName?: string, rootNodeType?: string, anchorRectCache?: AnchorRectCache) => Decoration;
+type QuickInsertButtonDecorationParams = {
+    api: ExtractInjectionAPI<BlockControlsPlugin>;
+    formatMessage: IntlShape['formatMessage'];
+    rootPos: number;
+    anchorName: string;
+    nodeType: string;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
+    rootAnchorName?: string;
+    rootNodeType?: string;
+    anchorRectCache?: AnchorRectCache;
+    editorState: EditorState;
+};
+export declare const quickInsertButtonDecoration: ({ api, formatMessage, rootPos, anchorName, nodeType, nodeViewPortalProviderAPI, rootAnchorName, rootNodeType, anchorRectCache, editorState, }: QuickInsertButtonDecorationParams) => Decoration;
+export {};

package/dist/types-ts4.5/pm-plugins/utils/marks.d.ts

@@ -0,0 +1,16 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Returns list of block marks on schema that widgets are allowed to render inside
+ * Currently
+ * - indent
+ * - alignment
+ * @param state - The editor state
+ * @returns The block marks
+ * @example
+ * ```ts
+ * const marks = getBlockMarks(state);
+ * console.log(marks);
+ * // [indent, alignment]
+ * ```
+ */
+export declare const getActiveBlockMarks: (state: EditorState, pos: number) => import("prosemirror-model").Mark[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.19.12",
+	"version": "3.19.14",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -8,8 +8,7 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"atlassian": {
-		"team": "Editor: Jenga",
-		"runReact18": true
+		"team": "Editor: Jenga"
 	},
 	"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
 	"main": "dist/cjs/index.js",
@@ -33,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^107.3.0",
+		"@atlaskit/editor-common": "^107.4.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
 		"@atlaskit/editor-plugin-interaction": "^3.0.0",
-		"@atlaskit/editor-plugin-metrics": "^3.5.0",
+		"@atlaskit/editor-plugin-metrics": "^3.6.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.6.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.7.0",
@@ -56,7 +55,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^8.5.0",
+		"@atlaskit/tmp-editor-statsig": "^8.6.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -156,9 +155,6 @@
 		"platform_editor_controls_widget_visibility": {
 			"type": "boolean"
 		},
-		"platform_editor_no_cursor_on_live_doc_init": {
-			"type": "boolean"
-		},
 		"platform_editor_drag_and_drop_perf_analytics": {
 			"type": "boolean"
 		},
@@ -188,6 +184,9 @@
 		},
 		"platform_editor_controls_patch_15": {
 			"type": "boolean"
+		},
+		"platform_editor_breakout_resizing_widget_fix": {
+			"type": "boolean"
 		}
 	}
 }