@atlaskit/editor-plugin-block-controls 13.4.0 → 13.4.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.4.1
+
+### Patch Changes
+
+- [`82270dfb1e67e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82270dfb1e67e) -
+  Migrate block-controls drag-handle render/unmount to the React 18/19 createRoot API behind
+  nike_r19_render_unmount
+- Updated dependencies
+
 ## 13.4.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations-common.js

@@ -8,10 +8,10 @@ exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAncho
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _reactRootRegistry = require("./react-root-registry");
 var _validation = require("./utils/validation");
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 
@@ -60,6 +60,6 @@ var unmountDecorations = exports.unmountDecorations = function unmountDecoration
   // as it was more responsive and causes less re-rendering
   var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
   decorationsToRemove.forEach(function (el) {
-    _reactDom.default.unmountComponentAtNode(el);
+    (0, _reactRootRegistry.unmountFromMountPoint)(el);
   });
 };

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

@@ -8,7 +8,6 @@ exports.findHandleDec = exports.findActiveDragHandleNodeDec = exports.emptyParag
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -17,6 +16,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
+var _reactRootRegistry = require("./react-root-registry");
 var _marks = require("./utils/marks");
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 
@@ -157,7 +157,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     // 	);
 
     if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandleWithVisibility, {
+      (0, _reactRootRegistry.renderToMountPoint)( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandleWithVisibility, {
         view: view,
         api: api,
         formatMessage: formatMessage,
@@ -169,7 +169,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
         anchorRectCache: anchorRectCache
       }), element);
     } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+      (0, _reactRootRegistry.renderToMountPoint)( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
         view: view,
         api: api,
         formatMessage: formatMessage,

package/dist/cjs/pm-plugins/react-root-registry.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unmountFromMountPoint = exports.renderToMountPoint = void 0;
+var _reactDom = _interopRequireWildcard(require("react-dom"));
+var _client = require("react-dom/client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Shared registry of React roots created via `createRoot`.
+ *
+ * Both `decorations-drag-handle.ts` (render) and `decorations-common.ts`
+ * (unmount) must operate on the **same** root for a given DOM element, so
+ * the WeakMap lives here and is imported by both modules.
+ */
+var reactRoots = new WeakMap();
+
+/**
+ * Mounts `element` into `mountPoint`.
+ *
+ * When `nike_r19_render_unmount` is **on**, uses the React 18/19 `createRoot`
+ * API wrapped in `flushSync` so the render is synchronous – matching the
+ * legacy `ReactDOM.render` timing that ProseMirror decoration widgets depend
+ * on (focus management, anchor positioning, block-menu visibility all read
+ * the rendered DOM immediately after the callback returns).
+ *
+ * When the gate is **off**, falls back to the legacy `ReactDOM.render` path.
+ */
+var renderToMountPoint = exports.renderToMountPoint = function renderToMountPoint(element, mountPoint) {
+  if ((0, _platformFeatureFlags.fg)('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = (0, _client.createRoot)(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    var activeRoot = root;
+
+    // flushSync makes createRoot render synchronously, matching legacy
+    // ReactDOM.render timing that the widget/focus/positioning code depends on.
+    (0, _reactDom.flushSync)(function () {
+      return activeRoot.render(element);
+    });
+  } else {
+    _reactDom.default.render(element, mountPoint);
+  }
+};
+
+/**
+ * Unmounts the React tree at `mountPoint`.
+ *
+ * When `nike_r19_render_unmount` is **on**, looks up the root in the shared
+ * registry, calls `root.unmount()`, and removes the entry.
+ *
+ * When the gate is **off**, falls back to `ReactDOM.unmountComponentAtNode`.
+ */
+var unmountFromMountPoint = exports.unmountFromMountPoint = function unmountFromMountPoint(mountPoint) {
+  if ((0, _platformFeatureFlags.fg)('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (root) {
+      root.unmount();
+      reactRoots.delete(mountPoint);
+    }
+  } else {
+    _reactDom.default.unmountComponentAtNode(mountPoint);
+  }
+};

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

@@ -1011,7 +1011,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
     };
   }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
+  var isHandleShown = positionStylesOld.display !== 'none';
   (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('nike_r19_render_unmount')) {
+      return;
+    }
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
         var _buttonRef$current;
@@ -1023,6 +1027,43 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('nike_r19_render_unmount')) {
+      return;
+    }
+    if (!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && isHandleShown && buttonRef.current)) {
+      return;
+    }
+
+    // isHandleShown means the handle has been positioned, but an ancestor can still be
+    // visibility:hidden or display:none for a frame, in which case focus() is a silent no-op.
+    // Focus now, and if activeElement shows it did not land, retry on the next few frames.
+    var rafId;
+    var attempts = 0;
+    var MAX_ATTEMPTS = 5;
+    var _focusHandle = function focusHandle() {
+      var _getDocument2;
+      var button = buttonRef.current;
+      if (!button) {
+        return;
+      }
+      button.focus();
+      // getDocument() is the same document handleKeyDownNew reads activeElement from, so
+      // this confirms Space/Enter will act on the handle rather than silently no-op.
+      if (((_getDocument2 = (0, _browserApis.getDocument)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.activeElement) === button || attempts >= MAX_ATTEMPTS) {
+        return;
+      }
+      attempts++;
+      rafId = requestAnimationFrame(_focusHandle);
+    };
+    _focusHandle();
+    return function () {
+      if (rafId !== undefined) {
+        cancelAnimationFrame(rafId);
+      }
+      view.focus();
+    };
+  }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view, isHandleShown]);
   (0, _react.useEffect)(function () {
     if (typeof start !== 'number' || !selection) {
       return;

package/dist/es2019/pm-plugins/decorations-common.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import ReactDOM from 'react-dom';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { unmountFromMountPoint } from './react-root-registry';
 import { isFontSizeMarkActive } from './utils/validation';
 export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export const TYPE_HANDLE_DEC = 'drag-handle';
@@ -44,6 +44,6 @@ export const unmountDecorations = (nodeViewPortalProviderAPI, selector, key) =>
   // as it was more responsive and causes less re-rendering
   const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
   decorationsToRemove.forEach(el => {
-    ReactDOM.unmountComponentAtNode(el);
+    unmountFromMountPoint(el);
   });
 };

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

@@ -1,6 +1,5 @@
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
-import ReactDOM from 'react-dom';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -10,6 +9,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ACTIVE_DRAG_HANDLE_ATTR } from '../ui/consts';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+import { renderToMountPoint } from './react-root-registry';
 import { getMatchingBlockMarks } from './utils/marks';
 const TYPE_ACTIVE_HANDLE_DEC = 'active-drag-handle-node';
 
@@ -144,7 +144,7 @@ export const dragHandleDecoration = ({
     // 	);
 
     if (editorExperiment('platform_editor_controls', 'variant1')) {
-      ReactDOM.render( /*#__PURE__*/createElement(DragHandleWithVisibility, {
+      renderToMountPoint( /*#__PURE__*/createElement(DragHandleWithVisibility, {
         view,
         api,
         formatMessage,
@@ -156,7 +156,7 @@ export const dragHandleDecoration = ({
         anchorRectCache
       }), element);
     } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      renderToMountPoint( /*#__PURE__*/createElement(DragHandle, {
         view,
         api,
         formatMessage,

package/dist/es2019/pm-plugins/react-root-registry.js

@@ -0,0 +1,60 @@
+import ReactDOM, { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * Shared registry of React roots created via `createRoot`.
+ *
+ * Both `decorations-drag-handle.ts` (render) and `decorations-common.ts`
+ * (unmount) must operate on the **same** root for a given DOM element, so
+ * the WeakMap lives here and is imported by both modules.
+ */
+const reactRoots = new WeakMap();
+
+/**
+ * Mounts `element` into `mountPoint`.
+ *
+ * When `nike_r19_render_unmount` is **on**, uses the React 18/19 `createRoot`
+ * API wrapped in `flushSync` so the render is synchronous – matching the
+ * legacy `ReactDOM.render` timing that ProseMirror decoration widgets depend
+ * on (focus management, anchor positioning, block-menu visibility all read
+ * the rendered DOM immediately after the callback returns).
+ *
+ * When the gate is **off**, falls back to the legacy `ReactDOM.render` path.
+ */
+export const renderToMountPoint = (element, mountPoint) => {
+  if (fg('nike_r19_render_unmount')) {
+    let root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = createRoot(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    const activeRoot = root;
+
+    // flushSync makes createRoot render synchronously, matching legacy
+    // ReactDOM.render timing that the widget/focus/positioning code depends on.
+    flushSync(() => activeRoot.render(element));
+  } else {
+    ReactDOM.render(element, mountPoint);
+  }
+};
+
+/**
+ * Unmounts the React tree at `mountPoint`.
+ *
+ * When `nike_r19_render_unmount` is **on**, looks up the root in the shared
+ * registry, calls `root.unmount()`, and removes the entry.
+ *
+ * When the gate is **off**, falls back to `ReactDOM.unmountComponentAtNode`.
+ */
+export const unmountFromMountPoint = mountPoint => {
+  if (fg('nike_r19_render_unmount')) {
+    const root = reactRoots.get(mountPoint);
+    if (root) {
+      root.unmount();
+      reactRoots.delete(mountPoint);
+    }
+  } else {
+    ReactDOM.unmountComponentAtNode(mountPoint);
+  }
+};

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

@@ -992,7 +992,11 @@ export const DragHandle = ({
       (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 ? void 0 : _cleanUpTransitionLis2();
     };
   }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
+  const isHandleShown = positionStylesOld.display !== 'none';
   useEffect(() => {
+    if (fg('nike_r19_render_unmount')) {
+      return;
+    }
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       const id = requestAnimationFrame(() => {
         var _buttonRef$current;
@@ -1004,6 +1008,43 @@ export const DragHandle = ({
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
+  useEffect(() => {
+    if (!fg('nike_r19_render_unmount')) {
+      return;
+    }
+    if (!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && isHandleShown && buttonRef.current)) {
+      return;
+    }
+
+    // isHandleShown means the handle has been positioned, but an ancestor can still be
+    // visibility:hidden or display:none for a frame, in which case focus() is a silent no-op.
+    // Focus now, and if activeElement shows it did not land, retry on the next few frames.
+    let rafId;
+    let attempts = 0;
+    const MAX_ATTEMPTS = 5;
+    const focusHandle = () => {
+      var _getDocument2;
+      const button = buttonRef.current;
+      if (!button) {
+        return;
+      }
+      button.focus();
+      // getDocument() is the same document handleKeyDownNew reads activeElement from, so
+      // this confirms Space/Enter will act on the handle rather than silently no-op.
+      if (((_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.activeElement) === button || attempts >= MAX_ATTEMPTS) {
+        return;
+      }
+      attempts++;
+      rafId = requestAnimationFrame(focusHandle);
+    };
+    focusHandle();
+    return () => {
+      if (rafId !== undefined) {
+        cancelAnimationFrame(rafId);
+      }
+      view.focus();
+    };
+  }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view, isHandleShown]);
   useEffect(() => {
     if (typeof start !== 'number' || !selection) {
       return;

package/dist/esm/pm-plugins/decorations-common.js

@@ -1,11 +1,11 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import ReactDOM from 'react-dom';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { unmountFromMountPoint } from './react-root-registry';
 import { isFontSizeMarkActive } from './utils/validation';
 export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export var TYPE_HANDLE_DEC = 'drag-handle';
@@ -52,6 +52,6 @@ export var unmountDecorations = function unmountDecorations(nodeViewPortalProvid
   // as it was more responsive and causes less re-rendering
   var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
   decorationsToRemove.forEach(function (el) {
-    ReactDOM.unmountComponentAtNode(el);
+    unmountFromMountPoint(el);
   });
 };

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
-import ReactDOM from 'react-dom';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -11,6 +10,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ACTIVE_DRAG_HANDLE_ATTR } from '../ui/consts';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
+import { renderToMountPoint } from './react-root-registry';
 import { getMatchingBlockMarks } from './utils/marks';
 var TYPE_ACTIVE_HANDLE_DEC = 'active-drag-handle-node';
 
@@ -149,7 +149,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
     // 	);
 
     if (editorExperiment('platform_editor_controls', 'variant1')) {
-      ReactDOM.render( /*#__PURE__*/createElement(DragHandleWithVisibility, {
+      renderToMountPoint( /*#__PURE__*/createElement(DragHandleWithVisibility, {
         view: view,
         api: api,
         formatMessage: formatMessage,
@@ -161,7 +161,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
         anchorRectCache: anchorRectCache
       }), element);
     } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+      renderToMountPoint( /*#__PURE__*/createElement(DragHandle, {
         view: view,
         api: api,
         formatMessage: formatMessage,

package/dist/esm/pm-plugins/react-root-registry.js

@@ -0,0 +1,62 @@
+import ReactDOM, { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * Shared registry of React roots created via `createRoot`.
+ *
+ * Both `decorations-drag-handle.ts` (render) and `decorations-common.ts`
+ * (unmount) must operate on the **same** root for a given DOM element, so
+ * the WeakMap lives here and is imported by both modules.
+ */
+var reactRoots = new WeakMap();
+
+/**
+ * Mounts `element` into `mountPoint`.
+ *
+ * When `nike_r19_render_unmount` is **on**, uses the React 18/19 `createRoot`
+ * API wrapped in `flushSync` so the render is synchronous – matching the
+ * legacy `ReactDOM.render` timing that ProseMirror decoration widgets depend
+ * on (focus management, anchor positioning, block-menu visibility all read
+ * the rendered DOM immediately after the callback returns).
+ *
+ * When the gate is **off**, falls back to the legacy `ReactDOM.render` path.
+ */
+export var renderToMountPoint = function renderToMountPoint(element, mountPoint) {
+  if (fg('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = createRoot(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    var activeRoot = root;
+
+    // flushSync makes createRoot render synchronously, matching legacy
+    // ReactDOM.render timing that the widget/focus/positioning code depends on.
+    flushSync(function () {
+      return activeRoot.render(element);
+    });
+  } else {
+    ReactDOM.render(element, mountPoint);
+  }
+};
+
+/**
+ * Unmounts the React tree at `mountPoint`.
+ *
+ * When `nike_r19_render_unmount` is **on**, looks up the root in the shared
+ * registry, calls `root.unmount()`, and removes the entry.
+ *
+ * When the gate is **off**, falls back to `ReactDOM.unmountComponentAtNode`.
+ */
+export var unmountFromMountPoint = function unmountFromMountPoint(mountPoint) {
+  if (fg('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (root) {
+      root.unmount();
+      reactRoots.delete(mountPoint);
+    }
+  } else {
+    ReactDOM.unmountComponentAtNode(mountPoint);
+  }
+};

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

@@ -1007,7 +1007,11 @@ export var DragHandle = function DragHandle(_ref2) {
       (_cleanUpTransitionLis2 = cleanUpTransitionListener) === null || _cleanUpTransitionLis2 === void 0 || _cleanUpTransitionLis2();
     };
   }, [isReliableAnchorEnabled, calculatePositionOld, view.dom, anchorName, nodeType, docDepForReliableAnchor]);
+  var isHandleShown = positionStylesOld.display !== 'none';
   useEffect(function () {
+    if (fg('nike_r19_render_unmount')) {
+      return;
+    }
     if (handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && buttonRef.current) {
       var id = requestAnimationFrame(function () {
         var _buttonRef$current;
@@ -1019,6 +1023,43 @@ export var DragHandle = function DragHandle(_ref2) {
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
+  useEffect(function () {
+    if (!fg('nike_r19_render_unmount')) {
+      return;
+    }
+    if (!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && isHandleShown && buttonRef.current)) {
+      return;
+    }
+
+    // isHandleShown means the handle has been positioned, but an ancestor can still be
+    // visibility:hidden or display:none for a frame, in which case focus() is a silent no-op.
+    // Focus now, and if activeElement shows it did not land, retry on the next few frames.
+    var rafId;
+    var attempts = 0;
+    var MAX_ATTEMPTS = 5;
+    var _focusHandle = function focusHandle() {
+      var _getDocument2;
+      var button = buttonRef.current;
+      if (!button) {
+        return;
+      }
+      button.focus();
+      // getDocument() is the same document handleKeyDownNew reads activeElement from, so
+      // this confirms Space/Enter will act on the handle rather than silently no-op.
+      if (((_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.activeElement) === button || attempts >= MAX_ATTEMPTS) {
+        return;
+      }
+      attempts++;
+      rafId = requestAnimationFrame(_focusHandle);
+    };
+    _focusHandle();
+    return function () {
+      if (rafId !== undefined) {
+        cancelAnimationFrame(rafId);
+      }
+      view.focus();
+    };
+  }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view, isHandleShown]);
   useEffect(function () {
     if (typeof start !== 'number' || !selection) {
       return;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "13.4.0",
+	"version": "13.4.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^135.7.0",
+		"@atlaskit/tmp-editor-statsig": "^135.10.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -59,7 +59,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.45.0",
+		"@atlaskit/editor-common": "^116.47.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -137,6 +137,9 @@
 		"platform-dst-top-layer-tooltip": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"nike_r19_render_unmount": {
+			"type": "boolean"
 		}
 	},
 	"devDependencies": {