@atlaskit/editor-common 102.11.2 → 102.11.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 102.11.4
+
+### Patch Changes
+
+- [#129262](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129262)
+  [`9408a99b473bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9408a99b473bb) -
+  EDF-2570 Fixed config panel not closing when navigating to other page issue is fixed.
+
+## 102.11.3
+
+### Patch Changes
+
+- [#128680](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128680)
+  [`c621508ab44f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c621508ab44f7) -
+  Fixes rendering delay under virtualization
+
 ## 102.11.2
 
 ### Patch Changes

package/dist/cjs/extensions/messages.js

@@ -137,10 +137,5 @@ var configPanelMessages = exports.configPanelMessages = (0, _reactIntlNext.defin
     id: 'fabric.editor.configPanel.errorBoundary.note',
     defaultMessage: "We've let the team know. You can still edit and publish this page, or check the error console for more information.",
     description: 'Note for uncaught config panel error'
-  },
-  objectSidebarPanelHeaderLabel: {
-    id: 'fabric.editor.configPanel.objectSidebarPanelHeaderLabel',
-    defaultMessage: ' ',
-    description: 'Keep this empty. Defined it as headerLabel is required field.'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.11.2";
+var packageVersion = "102.11.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/portal/common.js

@@ -5,6 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PortalRenderWrapperInner = void 0;
 exports.createPortalRendererComponent = createPortalRendererComponent;
 exports.getPortalProviderAPI = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -41,6 +42,23 @@ function createPortalRendererComponent(portalManager) {
   };
 }
 
+/**
+ * Wraps the children of a portal to allow for React rendering
+ * lifecycle hook to be exposed, primarily for node virtualization.
+ */
+var PortalRenderWrapperInner = exports.PortalRenderWrapperInner = function PortalRenderWrapperInner(_ref) {
+  var getChildren = _ref.getChildren,
+    onBeforeRender = _ref.onBeforeRender;
+  (0, _react.useLayoutEffect)(function () {
+    if (onBeforeRender) {
+      onBeforeRender();
+    }
+  }, [onBeforeRender]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, getChildren());
+};
+var PortalRenderWrapper = /*#__PURE__*/(0, _react.memo)(PortalRenderWrapperInner);
+PortalRenderWrapper.displayName = 'PortalRenderWrapper';
+
 /**
  * Creates a portal provider for managing multiple React portals. The provider
  * facilitates rendering, removing, and destroying portals managed by a given
@@ -62,9 +80,17 @@ function createPortalRendererComponent(portalManager) {
 var getPortalProviderAPI = exports.getPortalProviderAPI = function getPortalProviderAPI(portalManager) {
   var portalsMap = new Map();
   return {
-    render: function render(children, container, key) {
-      var portal = /*#__PURE__*/(0, _reactDom.createPortal)(children(), container, key);
-      portalsMap.set(key, portalManager.registerPortal(key, portal));
+    render: function render(children, container, key, onBeforeReactDomRender) {
+      if (typeof onBeforeReactDomRender === 'function') {
+        var portal = /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(PortalRenderWrapper, {
+          getChildren: children,
+          onBeforeRender: onBeforeReactDomRender
+        }), container, key);
+        portalsMap.set(key, portalManager.registerPortal(key, portal));
+      } else {
+        var _portal = /*#__PURE__*/(0, _reactDom.createPortal)(children(), container, key);
+        portalsMap.set(key, portalManager.registerPortal(key, _portal));
+      }
     },
     remove: function remove(key) {
       var _portalsMap$get;

package/dist/cjs/portal/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "PortalManager", {
     return _PortalManager.PortalManager;
   }
 });
+Object.defineProperty(exports, "PortalRenderWrapperInner", {
+  enumerable: true,
+  get: function get() {
+    return _common.PortalRenderWrapperInner;
+  }
+});
 Object.defineProperty(exports, "usePortalProvider", {
   enumerable: true,
   get: function get() {
@@ -22,5 +28,6 @@ Object.defineProperty(exports, "usePortalProvider", {
   }
 });
 var _PortalManager = require("./PortalManager");
+var _common = require("./common");
 var _PortalBucket = require("./PortalBucket");
 var _usePortalProvider = require("./usePortalProvider");

package/dist/cjs/react-node-view/getInlineNodeViewProducer.js

@@ -100,12 +100,22 @@ function createNodeView(_ref) {
   var domRef = document.createElement('span');
   domRef.contentEditable = 'false';
   setDomAttrs(nodeViewParams.node, domRef);
+  var fallbackRef = {
+    current: null
+  };
 
   // @see ED-3790
   // something gets messed up during mutation processing inside of a
   // nodeView if DOM structure has nested plain "div"s, it doesn't see the
   // difference between them and it kills the nodeView
   domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "".concat(inlineNodeViewClassname));
+  function onBeforeReactDomRender() {
+    if (!fallbackRef.current) {
+      return;
+    }
+    domRef.removeChild(fallbackRef.current);
+    fallbackRef.current = null;
+  }
 
   // This util is shared for tracking rendering, and the ErrorBoundary that
   // is setup to wrap the Component when rendering
@@ -128,7 +138,7 @@ function createNodeView(_ref) {
       nodeViewParams: nodeViewParams,
       Component: Component,
       extraComponentProps: extraComponentProps
-    }), domRef, key);
+    }), domRef, key, enableVirtualization ? onBeforeReactDomRender : undefined);
   }
   var didRenderComponentWithIntersectionObserver = false;
   var destroyed = false;
@@ -137,6 +147,7 @@ function createNodeView(_ref) {
     var _currentNode$type;
     if (canRenderFallback(currentNode) && typeof ((_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 || (_currentNode$type = _currentNode$type.spec) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.toDOM) === 'function') {
       var fallback = _model.DOMSerializer.renderSpec(document, currentNode.type.spec.toDOM(currentNode));
+      fallbackRef.current = fallback.dom;
       domRef.replaceChildren(fallback.dom);
     }
   }
@@ -145,7 +156,6 @@ function createNodeView(_ref) {
     if (domRef) {
       removeIntersectionObserver = observer.observe(domRef, function () {
         if (!didRenderComponentWithIntersectionObserver && !destroyed) {
-          domRef.replaceChildren();
           renderComponent();
           didRenderComponentWithIntersectionObserver = true;
         }
@@ -243,6 +253,7 @@ function createNodeView(_ref) {
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.
       domRef = undefined;
+      fallbackRef.current = null;
       if (virtualizeNode) {
         destroyed = true;
       }

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "102.11.2";
+var packageVersion = "102.11.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/ui-menu/Dropdown/index.js

@@ -84,19 +84,28 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_PureComponent) {
         zIndex = _this$props.zIndex,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         dropdownListId = _this$props.dropdownListId,
-        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement;
+        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement,
+        targetProp = _this$props.target,
+        forcePlacement = _this$props.forcePlacement,
+        alignX = _this$props.alignX,
+        alignY = _this$props.alignY,
+        offset = _this$props.offset;
       return /*#__PURE__*/_react.default.createElement(_Popup.default, {
-        target: alignDropdownWithParentElement ? // Ignored via go/ees005
+        target: targetProp !== null && targetProp !== void 0 ? targetProp : alignDropdownWithParentElement ? // Ignored via go/ees005
         // eslint-disable-next-line @atlaskit/editor/no-as-casting
         target === null || target === void 0 ? void 0 : target.closest("[data-testid='editor-floating-toolbar']") : target,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
-        onPlacementChanged: this.updatePopupPlacement,
+        onPlacementChanged: forcePlacement ? undefined : this.updatePopupPlacement,
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex,
-        allowOutOfBounds: alignDropdownWithParentElement
+        allowOutOfBounds: alignDropdownWithParentElement,
+        alignX: alignX,
+        alignY: alignY,
+        forcePlacement: forcePlacement,
+        offset: offset
       }, /*#__PURE__*/_react.default.createElement(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -123,11 +132,11 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
         trigger = _this$props2.trigger,
         isOpen = _this$props2.isOpen;
-      return /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+      return trigger ? /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
           ref: _this2.handleRef(setOutsideClickTargetRef)
         }, trigger), isOpen ? _this2.renderDropdown() : null);
-      });
+      }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen ? this.renderDropdown() : null);
     }
   }]);
 }(_react.PureComponent);

package/dist/es2019/extensions/messages.js

@@ -131,10 +131,5 @@ export const configPanelMessages = defineMessages({
     id: 'fabric.editor.configPanel.errorBoundary.note',
     defaultMessage: `We've let the team know. You can still edit and publish this page, or check the error console for more information.`,
     description: 'Note for uncaught config panel error'
-  },
-  objectSidebarPanelHeaderLabel: {
-    id: 'fabric.editor.configPanel.objectSidebarPanelHeaderLabel',
-    defaultMessage: ' ',
-    description: 'Keep this empty. Defined it as headerLabel is required field.'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "102.11.2";
+const packageVersion = "102.11.4";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/portal/common.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useMemo, useState } from 'react';
+import React, { memo, useLayoutEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { PortalBucket } from './PortalBucket';
 export function createPortalRendererComponent(portalManager) {
@@ -22,6 +22,24 @@ export function createPortalRendererComponent(portalManager) {
   };
 }
 
+/**
+ * Wraps the children of a portal to allow for React rendering
+ * lifecycle hook to be exposed, primarily for node virtualization.
+ */
+export const PortalRenderWrapperInner = ({
+  getChildren,
+  onBeforeRender
+}) => {
+  useLayoutEffect(() => {
+    if (onBeforeRender) {
+      onBeforeRender();
+    }
+  }, [onBeforeRender]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getChildren());
+};
+const PortalRenderWrapper = /*#__PURE__*/memo(PortalRenderWrapperInner);
+PortalRenderWrapper.displayName = 'PortalRenderWrapper';
+
 /**
  * Creates a portal provider for managing multiple React portals. The provider
  * facilitates rendering, removing, and destroying portals managed by a given
@@ -43,9 +61,17 @@ export function createPortalRendererComponent(portalManager) {
 export const getPortalProviderAPI = portalManager => {
   const portalsMap = new Map();
   return {
-    render: (children, container, key) => {
-      const portal = /*#__PURE__*/createPortal(children(), container, key);
-      portalsMap.set(key, portalManager.registerPortal(key, portal));
+    render: (children, container, key, onBeforeReactDomRender) => {
+      if (typeof onBeforeReactDomRender === 'function') {
+        const portal = /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PortalRenderWrapper, {
+          getChildren: children,
+          onBeforeRender: onBeforeReactDomRender
+        }), container, key);
+        portalsMap.set(key, portalManager.registerPortal(key, portal));
+      } else {
+        const portal = /*#__PURE__*/createPortal(children(), container, key);
+        portalsMap.set(key, portalManager.registerPortal(key, portal));
+      }
     },
     remove: key => {
       var _portalsMap$get;

package/dist/es2019/portal/index.js

@@ -2,5 +2,6 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
 export { PortalManager } from './PortalManager';
+export { PortalRenderWrapperInner } from './common';
 export { PortalBucket } from './PortalBucket';
 export { usePortalProvider } from './usePortalProvider';

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -90,12 +90,22 @@ function createNodeView({
   let domRef = document.createElement('span');
   domRef.contentEditable = 'false';
   setDomAttrs(nodeViewParams.node, domRef);
+  const fallbackRef = {
+    current: null
+  };
 
   // @see ED-3790
   // something gets messed up during mutation processing inside of a
   // nodeView if DOM structure has nested plain "div"s, it doesn't see the
   // difference between them and it kills the nodeView
   domRef.classList.add(`${nodeViewParams.node.type.name}View-content-wrap`, `${inlineNodeViewClassname}`);
+  function onBeforeReactDomRender() {
+    if (!fallbackRef.current) {
+      return;
+    }
+    domRef.removeChild(fallbackRef.current);
+    fallbackRef.current = null;
+  }
 
   // This util is shared for tracking rendering, and the ErrorBoundary that
   // is setup to wrap the Component when rendering
@@ -118,7 +128,7 @@ function createNodeView({
       nodeViewParams,
       Component,
       extraComponentProps
-    }), domRef, key);
+    }), domRef, key, enableVirtualization ? onBeforeReactDomRender : undefined);
   }
   let didRenderComponentWithIntersectionObserver = false;
   let destroyed = false;
@@ -127,6 +137,7 @@ function createNodeView({
     var _currentNode$type, _currentNode$type$spe;
     if (canRenderFallback(currentNode) && typeof ((_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : (_currentNode$type$spe = _currentNode$type.spec) === null || _currentNode$type$spe === void 0 ? void 0 : _currentNode$type$spe.toDOM) === 'function') {
       const fallback = DOMSerializer.renderSpec(document, currentNode.type.spec.toDOM(currentNode));
+      fallbackRef.current = fallback.dom;
       domRef.replaceChildren(fallback.dom);
     }
   }
@@ -135,7 +146,6 @@ function createNodeView({
     if (domRef) {
       removeIntersectionObserver = observer.observe(domRef, () => {
         if (!didRenderComponentWithIntersectionObserver && !destroyed) {
-          domRef.replaceChildren();
           renderComponent();
           didRenderComponentWithIntersectionObserver = true;
         }
@@ -237,6 +247,7 @@ function createNodeView({
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.
       domRef = undefined;
+      fallbackRef.current = null;
       if (virtualizeNode) {
         destroyed = true;
       }

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "102.11.2";
+const packageVersion = "102.11.4";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/ui-menu/Dropdown/index.js

@@ -60,20 +60,29 @@ export class Dropdown extends PureComponent {
       zIndex,
       arrowKeyNavigationProviderOptions,
       dropdownListId,
-      alignDropdownWithParentElement
+      alignDropdownWithParentElement,
+      target: targetProp,
+      forcePlacement,
+      alignX,
+      alignY,
+      offset
     } = this.props;
     return /*#__PURE__*/React.createElement(Popup, {
-      target: alignDropdownWithParentElement ? // Ignored via go/ees005
+      target: targetProp !== null && targetProp !== void 0 ? targetProp : alignDropdownWithParentElement ? // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       target === null || target === void 0 ? void 0 : target.closest("[data-testid='editor-floating-toolbar']") : target,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
-      onPlacementChanged: this.updatePopupPlacement,
+      onPlacementChanged: forcePlacement ? undefined : this.updatePopupPlacement,
       fitHeight: fitHeight,
       fitWidth: fitWidth,
       zIndex: zIndex,
-      allowOutOfBounds: alignDropdownWithParentElement
+      allowOutOfBounds: alignDropdownWithParentElement,
+      alignX: alignX,
+      alignY: alignY,
+      forcePlacement: forcePlacement,
+      offset: offset
     }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
@@ -98,9 +107,9 @@ export class Dropdown extends PureComponent {
       trigger,
       isOpen
     } = this.props;
-    return /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    return trigger ? /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       ref: this.handleRef(setOutsideClickTargetRef)
-    }, trigger), isOpen ? this.renderDropdown() : null));
+    }, trigger), isOpen ? this.renderDropdown() : null)) : /*#__PURE__*/React.createElement(React.Fragment, null, isOpen ? this.renderDropdown() : null);
   }
 }
 const DropdownWithOuterListeners = withReactEditorViewOuterListeners(Dropdown);

package/dist/esm/extensions/messages.js

@@ -131,10 +131,5 @@ export var configPanelMessages = defineMessages({
     id: 'fabric.editor.configPanel.errorBoundary.note',
     defaultMessage: "We've let the team know. You can still edit and publish this page, or check the error console for more information.",
     description: 'Note for uncaught config panel error'
-  },
-  objectSidebarPanelHeaderLabel: {
-    id: 'fabric.editor.configPanel.objectSidebarPanelHeaderLabel',
-    defaultMessage: ' ',
-    description: 'Keep this empty. Defined it as headerLabel is required field.'
   }
 });

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.11.2";
+var packageVersion = "102.11.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/portal/common.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useLayoutEffect, useMemo, useState } from 'react';
+import React, { memo, useLayoutEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { PortalBucket } from './PortalBucket';
 export function createPortalRendererComponent(portalManager) {
@@ -30,6 +30,23 @@ export function createPortalRendererComponent(portalManager) {
   };
 }
 
+/**
+ * Wraps the children of a portal to allow for React rendering
+ * lifecycle hook to be exposed, primarily for node virtualization.
+ */
+export var PortalRenderWrapperInner = function PortalRenderWrapperInner(_ref) {
+  var getChildren = _ref.getChildren,
+    onBeforeRender = _ref.onBeforeRender;
+  useLayoutEffect(function () {
+    if (onBeforeRender) {
+      onBeforeRender();
+    }
+  }, [onBeforeRender]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getChildren());
+};
+var PortalRenderWrapper = /*#__PURE__*/memo(PortalRenderWrapperInner);
+PortalRenderWrapper.displayName = 'PortalRenderWrapper';
+
 /**
  * Creates a portal provider for managing multiple React portals. The provider
  * facilitates rendering, removing, and destroying portals managed by a given
@@ -51,9 +68,17 @@ export function createPortalRendererComponent(portalManager) {
 export var getPortalProviderAPI = function getPortalProviderAPI(portalManager) {
   var portalsMap = new Map();
   return {
-    render: function render(children, container, key) {
-      var portal = /*#__PURE__*/createPortal(children(), container, key);
-      portalsMap.set(key, portalManager.registerPortal(key, portal));
+    render: function render(children, container, key, onBeforeReactDomRender) {
+      if (typeof onBeforeReactDomRender === 'function') {
+        var portal = /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PortalRenderWrapper, {
+          getChildren: children,
+          onBeforeRender: onBeforeReactDomRender
+        }), container, key);
+        portalsMap.set(key, portalManager.registerPortal(key, portal));
+      } else {
+        var _portal = /*#__PURE__*/createPortal(children(), container, key);
+        portalsMap.set(key, portalManager.registerPortal(key, _portal));
+      }
     },
     remove: function remove(key) {
       var _portalsMap$get;

package/dist/esm/portal/index.js

@@ -2,5 +2,6 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
 export { PortalManager } from './PortalManager';
+export { PortalRenderWrapperInner } from './common';
 export { PortalBucket } from './PortalBucket';
 export { usePortalProvider } from './usePortalProvider';

package/dist/esm/react-node-view/getInlineNodeViewProducer.js

@@ -95,12 +95,22 @@ function createNodeView(_ref) {
   var domRef = document.createElement('span');
   domRef.contentEditable = 'false';
   setDomAttrs(nodeViewParams.node, domRef);
+  var fallbackRef = {
+    current: null
+  };
 
   // @see ED-3790
   // something gets messed up during mutation processing inside of a
   // nodeView if DOM structure has nested plain "div"s, it doesn't see the
   // difference between them and it kills the nodeView
   domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "".concat(inlineNodeViewClassname));
+  function onBeforeReactDomRender() {
+    if (!fallbackRef.current) {
+      return;
+    }
+    domRef.removeChild(fallbackRef.current);
+    fallbackRef.current = null;
+  }
 
   // This util is shared for tracking rendering, and the ErrorBoundary that
   // is setup to wrap the Component when rendering
@@ -123,7 +133,7 @@ function createNodeView(_ref) {
       nodeViewParams: nodeViewParams,
       Component: Component,
       extraComponentProps: extraComponentProps
-    }), domRef, key);
+    }), domRef, key, enableVirtualization ? onBeforeReactDomRender : undefined);
   }
   var didRenderComponentWithIntersectionObserver = false;
   var destroyed = false;
@@ -132,6 +142,7 @@ function createNodeView(_ref) {
     var _currentNode$type;
     if (canRenderFallback(currentNode) && typeof ((_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 || (_currentNode$type = _currentNode$type.spec) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.toDOM) === 'function') {
       var fallback = DOMSerializer.renderSpec(document, currentNode.type.spec.toDOM(currentNode));
+      fallbackRef.current = fallback.dom;
       domRef.replaceChildren(fallback.dom);
     }
   }
@@ -140,7 +151,6 @@ function createNodeView(_ref) {
     if (domRef) {
       removeIntersectionObserver = observer.observe(domRef, function () {
         if (!didRenderComponentWithIntersectionObserver && !destroyed) {
-          domRef.replaceChildren();
           renderComponent();
           didRenderComponentWithIntersectionObserver = true;
         }
@@ -238,6 +248,7 @@ function createNodeView(_ref) {
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.
       domRef = undefined;
+      fallbackRef.current = null;
       if (virtualizeNode) {
         destroyed = true;
       }

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "102.11.2";
+var packageVersion = "102.11.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/ui-menu/Dropdown/index.js

@@ -74,19 +74,28 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
         zIndex = _this$props.zIndex,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         dropdownListId = _this$props.dropdownListId,
-        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement;
+        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement,
+        targetProp = _this$props.target,
+        forcePlacement = _this$props.forcePlacement,
+        alignX = _this$props.alignX,
+        alignY = _this$props.alignY,
+        offset = _this$props.offset;
       return /*#__PURE__*/React.createElement(Popup, {
-        target: alignDropdownWithParentElement ? // Ignored via go/ees005
+        target: targetProp !== null && targetProp !== void 0 ? targetProp : alignDropdownWithParentElement ? // Ignored via go/ees005
         // eslint-disable-next-line @atlaskit/editor/no-as-casting
         target === null || target === void 0 ? void 0 : target.closest("[data-testid='editor-floating-toolbar']") : target,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
-        onPlacementChanged: this.updatePopupPlacement,
+        onPlacementChanged: forcePlacement ? undefined : this.updatePopupPlacement,
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex,
-        allowOutOfBounds: alignDropdownWithParentElement
+        allowOutOfBounds: alignDropdownWithParentElement,
+        alignX: alignX,
+        alignY: alignY,
+        forcePlacement: forcePlacement,
+        offset: offset
       }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -113,11 +122,11 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
         trigger = _this$props2.trigger,
         isOpen = _this$props2.isOpen;
-      return /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+      return trigger ? /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
           ref: _this2.handleRef(setOutsideClickTargetRef)
         }, trigger), isOpen ? _this2.renderDropdown() : null);
-      });
+      }) : /*#__PURE__*/React.createElement(React.Fragment, null, isOpen ? this.renderDropdown() : null);
     }
   }]);
 }(PureComponent);

package/dist/types/extensions/messages.d.ts

@@ -131,9 +131,4 @@ export declare const configPanelMessages: {
         defaultMessage: string;
         description: string;
     };
-    objectSidebarPanelHeaderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };

package/dist/types/portal/common.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type PortalManager } from './PortalManager';
-type RenderFn = (children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, key: string) => void;
+type RenderFn = (children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, key: string, onBeforeReactDomRender?: () => void) => void;
 type RemoveFn = (key: string) => void;
 type DestoryFn = () => void;
 export interface PortalProviderAPI {
@@ -11,6 +11,14 @@ export interface PortalProviderAPI {
 export type PortalRendererComponent = () => JSX.Element;
 export type UsePortalProviderReturnType = [PortalProviderAPI, PortalRendererComponent];
 export declare function createPortalRendererComponent(portalManager: PortalManager): () => React.JSX.Element;
+/**
+ * Wraps the children of a portal to allow for React rendering
+ * lifecycle hook to be exposed, primarily for node virtualization.
+ */
+export declare const PortalRenderWrapperInner: ({ getChildren, onBeforeRender, }: {
+    getChildren: () => React.ReactNode;
+    onBeforeRender: () => void;
+}) => React.JSX.Element;
 /**
  * Creates a portal provider for managing multiple React portals. The provider
  * facilitates rendering, removing, and destroying portals managed by a given

package/dist/types/portal/index.d.ts

@@ -1,4 +1,5 @@
 export { PortalManager } from './PortalManager';
+export { PortalRenderWrapperInner } from './common';
 export { PortalBucket } from './PortalBucket';
 export { usePortalProvider } from './usePortalProvider';
 export type { PortalProviderAPI } from './common';

package/dist/types/ui-menu/Dropdown/index.d.ts

@@ -7,7 +7,7 @@ export interface Props {
     mountTo?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
-    trigger: React.ReactElement<any>;
+    trigger?: React.ReactElement<any>;
     isOpen?: boolean;
     onOpenChange?: (attrs: OpenChangedEvent) => void;
     fitWidth?: number;
@@ -16,6 +16,11 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     dropdownListId?: string;
     alignDropdownWithParentElement?: boolean;
+    target?: HTMLElement;
+    forcePlacement?: boolean;
+    alignX?: 'left' | 'right' | 'center';
+    alignY?: 'start' | 'bottom' | 'top';
+    offset?: [number, number];
 }
 export interface State {
     target?: HTMLElement;

package/dist/types-ts4.5/extensions/messages.d.ts

@@ -131,9 +131,4 @@ export declare const configPanelMessages: {
         defaultMessage: string;
         description: string;
     };
-    objectSidebarPanelHeaderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };

package/dist/types-ts4.5/portal/common.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type PortalManager } from './PortalManager';
-type RenderFn = (children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, key: string) => void;
+type RenderFn = (children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, key: string, onBeforeReactDomRender?: () => void) => void;
 type RemoveFn = (key: string) => void;
 type DestoryFn = () => void;
 export interface PortalProviderAPI {
@@ -14,6 +14,14 @@ export type UsePortalProviderReturnType = [
     PortalRendererComponent
 ];
 export declare function createPortalRendererComponent(portalManager: PortalManager): () => React.JSX.Element;
+/**
+ * Wraps the children of a portal to allow for React rendering
+ * lifecycle hook to be exposed, primarily for node virtualization.
+ */
+export declare const PortalRenderWrapperInner: ({ getChildren, onBeforeRender, }: {
+    getChildren: () => React.ReactNode;
+    onBeforeRender: () => void;
+}) => React.JSX.Element;
 /**
  * Creates a portal provider for managing multiple React portals. The provider
  * facilitates rendering, removing, and destroying portals managed by a given

package/dist/types-ts4.5/portal/index.d.ts

@@ -1,4 +1,5 @@
 export { PortalManager } from './PortalManager';
+export { PortalRenderWrapperInner } from './common';
 export { PortalBucket } from './PortalBucket';
 export { usePortalProvider } from './usePortalProvider';
 export type { PortalProviderAPI } from './common';

package/dist/types-ts4.5/ui-menu/Dropdown/index.d.ts

@@ -7,7 +7,7 @@ export interface Props {
     mountTo?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
-    trigger: React.ReactElement<any>;
+    trigger?: React.ReactElement<any>;
     isOpen?: boolean;
     onOpenChange?: (attrs: OpenChangedEvent) => void;
     fitWidth?: number;
@@ -16,6 +16,14 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     dropdownListId?: string;
     alignDropdownWithParentElement?: boolean;
+    target?: HTMLElement;
+    forcePlacement?: boolean;
+    alignX?: 'left' | 'right' | 'center';
+    alignY?: 'start' | 'bottom' | 'top';
+    offset?: [
+        number,
+        number
+    ];
 }
 export interface State {
     target?: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "102.11.2",
+	"version": "102.11.4",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"