@atlaskit/editor-plugin-insert-block 2.4.0 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.4.2
+
+### Patch Changes
+
+- [#156556](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156556)
+  [`fa4db989cfa70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fa4db989cfa70) -
+  [HOT-112603] Reduce memory leak footage by using WeakRef to store HTML element
+
+## 2.4.1
+
+### Patch Changes
+
+- [#155333](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155333)
+  [`8b2c7d6c20aa1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b2c7d6c20aa1) -
+  change logic to ensure plus menu can open in comment when insert-right-rail experiment is enabled
+- [#155735](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155735)
+  [`1beeeda29023a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1beeeda29023a) -
+  Upgrades editor packages to react 18
+- [#155345](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155345)
+  [`9f00717c4915b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f00717c4915b) -
+  [ux] Add layout placeholder behind feature gate
+- Updated dependencies
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/cjs/ui/ToolbarInsertBlock/index.js

@@ -125,7 +125,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       });
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
         var _ref2;
-        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || _ref2.focus();
+        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || (_ref2 = _ref2.deref()) === null || _ref2 === void 0 || _ref2.focus();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleEmojiPicker", function () {
@@ -154,7 +154,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiPressEscape", function () {
       var _this$emojiButtonRef;
       _this.toggleEmojiPicker(_analytics.INPUT_METHOD.KEYBOARD);
-      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
+      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || (_this$emojiButtonRef = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiClickOutside", function (e) {
       // Ignore click events for detached elements.
@@ -172,22 +172,22 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         }
         switch (buttonName) {
           case 'emoji':
-            _this.emojiButtonRef = ref;
+            _this.emojiButtonRef = new WeakRef(ref);
             break;
           case 'media':
-            _this.mediaButtonRef = ref;
+            _this.mediaButtonRef = new WeakRef(ref);
             break;
         }
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
-        _this.plusButtonRef = ref;
+        _this.plusButtonRef = new WeakRef(ref);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDropDownButtonRef", function (ref) {
       if (ref) {
-        _this.dropdownButtonRef = ref;
+        _this.dropdownButtonRef = new WeakRef(ref);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleTableSelector", function () {
@@ -350,8 +350,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       var _pluginInjectionApi$l;
       var _this$props4 = _this.props,
         editorView = _this$props4.editorView,
-        pluginInjectionApi = _this$props4.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 || _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
+        pluginInjectionApi = _this$props4.pluginInjectionApi,
+        intl = _this$props4.intl;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 || _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod, intl.formatMessage)(editorView.state, editorView.dispatch);
       return true;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createStatus", function (inputMethod) {
@@ -364,10 +365,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        var _this$props$popupsMou;
-        var args = _this.mediaButtonRef ? {
-          ref: _this.mediaButtonRef,
-          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
+        var _this$mediaButtonRef, _this$props$popupsMou;
+        var ref = (_this$mediaButtonRef = _this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
+        var args = ref ? {
+          ref: ref,
+          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
         } : undefined;
         onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
@@ -554,7 +556,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           bubbles: true,
           key: 'ArrowDown'
         });
-        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || (_this$dropdownButtonR = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
         this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
           isOpenedByKeyboard: false
         }));
@@ -597,7 +599,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         });
       };
       return (0, _react2.jsx)(_ui.Popup, {
-        target: ref,
+        target: ref.deref(),
         fitHeight: 350,
         fitWidth: 350,
         offset: [0, 3],
@@ -670,6 +672,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableSelectorButton5,
         _tableSelectorButton6,
         _this$props$isDisable,
+        _this$plusButtonRef,
         _this$props$pluginInj3;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
@@ -786,8 +789,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           editorView: this.props.editorView,
           spacing: this.props.isReducedSpacing ? 'none' : 'default',
           label: this.props.intl.formatMessage(_messages.messages.insertMenu),
-          open: this.state.isPlusMenuOpen && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', false),
-          plusButtonRef: this.plusButtonRef,
+          open: (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
+          plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
           items: this.state.dropdownItems,
           onRef: this.handleDropDownButtonRef,
           onPlusButtonRef: this.handlePlusButtonRef,

package/dist/es2019/ui/ToolbarInsertBlock/index.js

@@ -126,8 +126,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
         isPlusMenuOpen: !isPlusMenuOpen
       });
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
-        var _ref;
-        (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : _ref.focus();
+        var _ref, _ref$deref;
+        (_ref = this.plusButtonRef || this.dropdownButtonRef) === null || _ref === void 0 ? void 0 : (_ref$deref = _ref.deref()) === null || _ref$deref === void 0 ? void 0 : _ref$deref.focus();
       }
     });
     _defineProperty(this, "toggleEmojiPicker", (inputMethod = INPUT_METHOD.TOOLBAR) => {
@@ -153,9 +153,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     });
     _defineProperty(this, "handleEmojiPressEscape", () => {
-      var _this$emojiButtonRef;
+      var _this$emojiButtonRef, _this$emojiButtonRef$;
       this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
-      (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : _this$emojiButtonRef.focus();
+      (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : (_this$emojiButtonRef$ = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef$ === void 0 ? void 0 : _this$emojiButtonRef$.focus();
     });
     _defineProperty(this, "handleEmojiClickOutside", e => {
       // Ignore click events for detached elements.
@@ -172,21 +172,21 @@ export class ToolbarInsertBlock extends React.PureComponent {
       }
       switch (buttonName) {
         case 'emoji':
-          this.emojiButtonRef = ref;
+          this.emojiButtonRef = new WeakRef(ref);
           break;
         case 'media':
-          this.mediaButtonRef = ref;
+          this.mediaButtonRef = new WeakRef(ref);
           break;
       }
     });
     _defineProperty(this, "handlePlusButtonRef", ref => {
       if (ref) {
-        this.plusButtonRef = ref;
+        this.plusButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(this, "handleDropDownButtonRef", ref => {
       if (ref) {
-        this.dropdownButtonRef = ref;
+        this.dropdownButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(this, "toggleTableSelector", (inputMethod = INPUT_METHOD.TOOLBAR) => {
@@ -360,9 +360,10 @@ export class ToolbarInsertBlock extends React.PureComponent {
       var _pluginInjectionApi$l;
       const {
         editorView,
-        pluginInjectionApi
+        pluginInjectionApi,
+        intl
       } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod, intl.formatMessage)(editorView.state, editorView.dispatch);
       return true;
     });
     _defineProperty(this, "createStatus", inputMethod => {
@@ -378,10 +379,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
         dispatchAnalyticsEvent
       } = this.props;
       if (onShowMediaPicker) {
-        var _this$props$popupsMou;
-        const args = this.mediaButtonRef ? {
-          ref: this.mediaButtonRef,
-          mountPoint: (_this$props$popupsMou = this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : this.mediaButtonRef
+        var _this$mediaButtonRef, _this$props$popupsMou;
+        const ref = (_this$mediaButtonRef = this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
+        const args = ref ? {
+          ref,
+          mountPoint: (_this$props$popupsMou = this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
         } : undefined;
         onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
@@ -606,12 +608,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     }
     if (this.state.isOpenedByKeyboard) {
-      var _this$dropdownButtonR;
+      var _this$dropdownButtonR, _this$dropdownButtonR2;
       const downArrowEvent = new KeyboardEvent('keydown', {
         bubbles: true,
         key: 'ArrowDown'
       });
-      (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+      (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : (_this$dropdownButtonR2 = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR2 === void 0 ? void 0 : _this$dropdownButtonR2.dispatchEvent(downArrowEvent);
       this.setState({
         ...this.state,
         isOpenedByKeyboard: false
@@ -657,7 +659,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       });
     };
     return jsx(Popup, {
-      target: ref,
+      target: ref.deref(),
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 3],
@@ -713,7 +715,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     });
   }
   render() {
-    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$pluginInj7;
+    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$plusButtonRef, _this$props$pluginInj7;
     const {
       buttons,
       dropdownItems,
@@ -820,8 +822,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
         editorView: this.props.editorView,
         spacing: this.props.isReducedSpacing ? 'none' : 'default',
         label: this.props.intl.formatMessage(messages.insertMenu),
-        open: this.state.isPlusMenuOpen && editorExperiment('insert-menu-in-right-rail', false),
-        plusButtonRef: this.plusButtonRef,
+        open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
+        plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
         items: this.state.dropdownItems,
         onRef: this.handleDropDownButtonRef,
         onPlusButtonRef: this.handlePlusButtonRef,

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -116,7 +116,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       });
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
         var _ref2;
-        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || _ref2.focus();
+        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || (_ref2 = _ref2.deref()) === null || _ref2 === void 0 || _ref2.focus();
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleEmojiPicker", function () {
@@ -145,7 +145,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleEmojiPressEscape", function () {
       var _this$emojiButtonRef;
       _this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
-      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
+      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || (_this$emojiButtonRef = _this$emojiButtonRef.deref()) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
     });
     _defineProperty(_assertThisInitialized(_this), "handleEmojiClickOutside", function (e) {
       // Ignore click events for detached elements.
@@ -163,22 +163,22 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         }
         switch (buttonName) {
           case 'emoji':
-            _this.emojiButtonRef = ref;
+            _this.emojiButtonRef = new WeakRef(ref);
             break;
           case 'media':
-            _this.mediaButtonRef = ref;
+            _this.mediaButtonRef = new WeakRef(ref);
             break;
         }
       };
     });
     _defineProperty(_assertThisInitialized(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
-        _this.plusButtonRef = ref;
+        _this.plusButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleDropDownButtonRef", function (ref) {
       if (ref) {
-        _this.dropdownButtonRef = ref;
+        _this.dropdownButtonRef = new WeakRef(ref);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleTableSelector", function () {
@@ -341,8 +341,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       var _pluginInjectionApi$l;
       var _this$props4 = _this.props,
         editorView = _this$props4.editorView,
-        pluginInjectionApi = _this$props4.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 || _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
+        pluginInjectionApi = _this$props4.pluginInjectionApi,
+        intl = _this$props4.intl;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 || _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod, intl.formatMessage)(editorView.state, editorView.dispatch);
       return true;
     });
     _defineProperty(_assertThisInitialized(_this), "createStatus", function (inputMethod) {
@@ -355,10 +356,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        var _this$props$popupsMou;
-        var args = _this.mediaButtonRef ? {
-          ref: _this.mediaButtonRef,
-          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
+        var _this$mediaButtonRef, _this$props$popupsMou;
+        var ref = (_this$mediaButtonRef = _this.mediaButtonRef) === null || _this$mediaButtonRef === void 0 ? void 0 : _this$mediaButtonRef.deref();
+        var args = ref ? {
+          ref: ref,
+          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : ref
         } : undefined;
         onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
@@ -545,7 +547,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           bubbles: true,
           key: 'ArrowDown'
         });
-        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || (_this$dropdownButtonR = _this$dropdownButtonR.deref()) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
         this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
           isOpenedByKeyboard: false
         }));
@@ -588,7 +590,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         });
       };
       return jsx(Popup, {
-        target: ref,
+        target: ref.deref(),
         fitHeight: 350,
         fitWidth: 350,
         offset: [0, 3],
@@ -661,6 +663,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _tableSelectorButton5,
         _tableSelectorButton6,
         _this$props$isDisable,
+        _this$plusButtonRef,
         _this$props$pluginInj3;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
@@ -777,8 +780,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           editorView: this.props.editorView,
           spacing: this.props.isReducedSpacing ? 'none' : 'default',
           label: this.props.intl.formatMessage(messages.insertMenu),
-          open: this.state.isPlusMenuOpen && editorExperiment('insert-menu-in-right-rail', false),
-          plusButtonRef: this.plusButtonRef,
+          open: editorExperiment('insert-menu-in-right-rail', true) ? !isFullPageAppearance && this.state.isPlusMenuOpen : this.state.isPlusMenuOpen,
+          plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
           items: this.state.dropdownItems,
           onRef: this.handleDropDownButtonRef,
           onPlusButtonRef: this.handlePlusButtonRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.4.0",
+	"version": "2.4.2",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -10,7 +10,7 @@
 	"atlassian": {
 		"team": "Editor: Lego",
 		"singleton": true,
-		"runReact18": false
+		"runReact18": true
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",
@@ -31,8 +31,8 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^94.1.0",
+		"@atlaskit/button": "^20.3.0",
+		"@atlaskit/editor-common": "^94.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-block-type": "^3.16.0",
 		"@atlaskit/editor-plugin-code-block": "^3.5.0",
@@ -60,12 +60,12 @@
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/heading": "2.4.6",
-		"@atlaskit/icon": "^22.23.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/icon-lab": "^1.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.7.0",
+		"@atlaskit/tmp-editor-statsig": "^2.9.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "18.8.5",
 		"@babel/runtime": "^7.0.0",
@@ -85,7 +85,6 @@
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
-		"react-dom": "^16.8.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {