@atlaskit/editor-common 118.10.3 → 118.12.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-common
 
+## 118.12.0
+
+### Minor Changes
+
+- [`13e86ff9f1588`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13e86ff9f1588) -
+  [ux] Display avatars for mention nodes.
+- [`da5eaf0bc37da`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da5eaf0bc37da) -
+  Clean up the platform_editor_editor_ssr_streaming experiment. The SSR streaming code paths are now
+  permanent and the isSSRStreaming() utility has been removed from
+  @atlaskit/editor-common/core-utils.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 118.11.0
+
+### Minor Changes
+
+- [`2d23b40eed4f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d23b40eed4f0) -
+  Add gated content-visibility:auto to tables, expands and media singles to improve editor rendering
+  performance on large documents. Applied only to nodes whose rendered size can be estimated closely
+  — structurally (row/child counts) for tables and expands, and from the media's own dimensions and
+  the renderer's width calculation for media singles. Behind the
+  cc_editor_limited_mode_perf_improvements experiment and only active when limited mode is enabled
+  for the document (shared large-document detection with the limited-mode plugin).
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 118.10.3
 
 ### Patch Changes

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/8aba7f6e-457b-4200-9b6f-00adf2350107
 name: '@atlaskit/editor-common'
-ownerId: ari:cloud:identity::team/og-da2205cb-ea5e-4059-9215-30c9b26c971f # Fabric - Editor
+ownerId: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb # Editor Developers
 labels:
   - platform-code
   - platform-afm
@@ -23,7 +23,7 @@ links:
 customFields:
   - name: Department
     type: text
-    value: Eng - Editor Frontend Platform
+    value: Editor Developers
   - name: Trusted Reviewer Teams
     type: text
     value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb

package/dist/cjs/core-utils/index.js

@@ -21,13 +21,6 @@ Object.defineProperty(exports, "isSSR", {
     return _isSsr.isSSR;
   }
 });
-Object.defineProperty(exports, "isSSRStreaming", {
-  enumerable: true,
-  get: function get() {
-    return _isSsrStreaming.isSSRStreaming;
-  }
-});
 var _inside = require("./inside");
 var _documentLogger = require("./document-logger");
-var _isSsr = require("./is-ssr");
-var _isSsrStreaming = require("./is-ssr-streaming");
+var _isSsr = require("./is-ssr");

package/dist/cjs/extensibility/ExtensionSSRReactContextsProvider.js

@@ -8,11 +8,10 @@ exports.ExtensionSSRReactContextsProvider = ExtensionSSRReactContextsProvider;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _isSsr = require("../core-utils/is-ssr");
-var _isSsrStreaming = require("../core-utils/is-ssr-streaming");
 function ExtensionSSRReactContextsProvider(_ref) {
   var children = _ref.children,
     intl = _ref.intl;
-  if (!(0, _isSsr.isSSR)() || !(0, _isSsrStreaming.isSSRStreaming)()) {
+  if (!(0, _isSsr.isSSR)()) {
     return children;
   }
   if (!intl) {

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "118.10.2";
+var packageVersion = "118.11.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/portal/common.js

@@ -20,7 +20,6 @@ exports.getPortalProviderAPI = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _isSsr = require("../core-utils/is-ssr");
-var _isSsrStreaming = require("../core-utils/is-ssr-streaming");
 var _PortalRenderWrapperInner = require("./PortalRenderWrapperInner");
 var _createPortalRendererComponent = require("./createPortalRendererComponent");
 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); }
@@ -60,7 +59,7 @@ var getPortalProviderAPI = exports.getPortalProviderAPI = function getPortalProv
   return {
     render: function render(children, container, key, onBeforeReactDomRender) {
       var immediate = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-      if ((0, _isSsr.isSSR)() && (0, _isSsrStreaming.isSSRStreaming)()) {
+      if ((0, _isSsr.isSSR)()) {
         var html = '';
         try {
           var renderToStaticMarkup = getRenderToStaticMarkup();
@@ -93,7 +92,7 @@ var getPortalProviderAPI = exports.getPortalProviderAPI = function getPortalProv
     },
     remove: function remove(key) {
       var _portalsMap$get;
-      if ((0, _isSsr.isSSR)() && (0, _isSsrStreaming.isSSRStreaming)()) {
+      if ((0, _isSsr.isSSR)()) {
         return;
       }
       (_portalsMap$get = portalsMap.get(key)) === null || _portalsMap$get === void 0 || _portalsMap$get();

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

@@ -9,7 +9,6 @@ exports.NodeViewContentHole = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _isSsr = require("../core-utils/is-ssr");
-var _isSsrStreaming = require("../core-utils/is-ssr-streaming");
 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); }
 /**
  * A component that serves as a placeholder for the content DOM of a ProseMirror NodeView.
@@ -18,6 +17,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var NodeViewContentHole = exports.NodeViewContentHole = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, props, {
     ref: ref,
-    "data-ssr-content-dom-ref": (0, _isSsr.isSSR)() && (0, _isSsrStreaming.isSSRStreaming)() ? '' : undefined
+    "data-ssr-content-dom-ref": (0, _isSsr.isSSR)() ? '' : undefined
   }));
 });

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

@@ -123,7 +123,7 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
         // contentDOMWrapper that was appended above. The React ref callback
         // (forwardRef) never fires in renderToStaticMarkup, so contentDOM is
         // left detached. Re-attach it by finding the marked SSR ref target.
-        if ((0, _coreUtils.isSSR)() && (0, _coreUtils.isSSRStreaming)() && this.domRef) {
+        if ((0, _coreUtils.isSSR)() && this.domRef) {
           var refTarget = this.domRef.querySelector('[data-ssr-content-dom-ref]');
           if (refTarget) {
             this.handleRef(refTarget);

package/dist/cjs/styles/shared/table.js

@@ -69,7 +69,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
 var tableSharedStyle = exports.tableSharedStyle = function tableSharedStyle() {
   var browser = (0, _browser.getBrowserInfo)();
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Appears safe to auto-fix, but leaving it up to the team to remediate as the readability only gets worse with autofixing
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", "\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin: 0 auto ", ";\n\t\t\tbox-sizing: border-box;\n\n\t\t\t/**\n\t\t\t * Fix block top alignment inside table cells.\n\t\t\t */\n\t\t\t.decisionItemView-content-wrap:first-of-type > div {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t", "\n\t\t}\n\t\t.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t\tclear: both;\n\t\t}\n\n\t\t.", " {\n\t\t\twill-change: width, margin-left;\n\t\t}\n\n\t\t.", " table {\n\t\t\twill-change: width;\n\t\t}\n\t\t.", " > table {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\n\t\t.", " > table,\n\t\t.", " > table {\n\t\t\tmargin: ", " ", " 0 0;\n\t\t}\n\n\t\t/* support panel nested in table */\n\t\t", "\n\n\t\t/* avoid applying styles to nested tables (possible via extensions) */\n\t.", " > table,\n\t.", " > table,\n\t.", " > table {\n\t\t\tborder-collapse: collapse;\n\t\t\t", "\n\t\t\ttable-layout: fixed;\n\t\t\tfont-size: 1em;\n\t\t\twidth: 100%;\n\t\t\t", "\n\n\t\t\t&[data-autosize='true'] {\n\t\t\t\ttable-layout: auto;\n\t\t\t}\n\n\t\t\t& {\n\t\t\t\t* {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\thr {\n\t\t\t\t\tbox-sizing: content-box;\n\t\t\t\t}\n\n\t\t\t\ttbody {\n\t\t\t\t\tborder-bottom: none;\n\t\t\t\t}\n\t\t\t\tth td {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > th,\n\t\t\t\t> tbody > tr > td {\n\t\t\t\t\tmin-width: ", "px;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tvertical-align: top;\n\t\t\t\t\t", "\n\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\tborder-right-width: 0;\n\t\t\t\t\tborder-bottom-width: 0;\n\n\t\t\t\t\tpadding: ", ";\n\t\t\t\t\t/* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n\t\t\t\t\t", "\n\n\t\t\t\t\t", "\n\n\t\t\t\tth p:not(:first-of-type),\n\t\t\t\ttd p:not(:first-of-type) {\n\t\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Ensures nested tables are compatible with parent table background color - uses specificity to ensure tables nested by extensions are not affected */\n\t\t\t\t> tbody > tr > td {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t\tth {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\ttext-align: left;\n\n\t\t\t\t\t/* only apply this styling to codeblocks in default background headercells */\n\t\t\t\t\t/* TODO this needs to be overhauled as it relies on unsafe selectors */\n\t\t\t\t\t", " {\n\t\t\t\t\t\t.", ":not(.danger) {\n\t\t\t\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t\t\t\t:not(.", ") {\n\t\t\t\t\t\t\t\tbox-shadow: 0px 0px 0px 1px ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\tbackground-image: ", ";\n\n\t\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t/* this is only relevant to the element taken care of by renderer */\n\t\t\t\t\t\t\t> [data-ds--code--code-block] {\n\t\t\t\t\t\t\t\tbackground-image: ", "!important;\n\n\t\t\t\t\t\t\t\tbackground-color: ", "!important;\n\n\t\t\t\t\t\t\t\t/* selector lives inside @atlaskit/code */\n\t\t\t\t\t\t\t\t--ds--code--line-number-bg-color: ", ";\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t"])), (0, _tableCell.tableCellBackgroundStyleOverride)(), _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Fake side borders are not needed when the rounded overlay owns the outer border. */\n\t\t\t\t.".concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t\t") : ".".concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 1px;\n\t\t\t\theight: calc(100% - ", "var(--ds-space-300, 24px)", ");\n\t\t\t\tbackground: ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: ", "var(--ds-space-300, 24px)", ";\n\t\t\t}\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_RIGHT_BORDER, " {\n\t\t\t\tright: 0;\n\t\t\t}\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, "[data-with-numbered-table='true'] {\n\t\t\t\tleft: ").concat(_editorSharedStyles.akEditorTableNumberColumnWidth - 1, "px;\n\t\t\t}"), _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _TableSharedCssClassName.TableSharedCssClassName.TABLE_RESIZER_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_RESIZER_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') ? ".".concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_NODE_WRAPPER, " .ak-editor-panel {\n\t\t\tborder: ", "var(--ds-border-width, 1px)", " solid ", "var(--ds-border, #0B120E24)", ";\n\t\t}") : '', _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_NODE_WRAPPER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_STICKY_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Keep a transparent border so the collapsed border model reserves the same 1px slot\n\t\t\t   on the table edge; the ::after overlay draws the visible rounded border instead. */\n\t\t\tborder: ".concat(tableCellBorderWidth, "px solid transparent;") : "border: ".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\tborder-left-color: transparent;\n\t\t\tborder-right-color: transparent;"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "position: relative;\n\n\t\t\t/* Table-width outer-border owner for overflow-safe rounded corners. */\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: -0.5px;\n\t\t\t\tborder: ".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\t\tborder-radius: ", "var(--ds-radius-xlarge, 12px)", ";\n\t\t\t\tpointer-events: none;\n\t\t\t\tz-index: 1;\n\t\t\t}") : '', "var(--ds-background-neutral-subtle, #00000000)", tableCellMinWidth, "var(--ds-font-weight-regular, 400)", (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) ? "&[data-valign='middle'] {\n\t\t\t\t\t\t\t\tvertical-align: middle;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t&[data-valign='bottom'] {\n\t\t\t\t\t\t\t\tvertical-align: bottom;\n\t\t\t\t\t\t\t}" : '', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-space-100, 8px)", browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', firstNodeWithNotMarginTop(), "var(--ds-space-150, 12px)", "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Let the wrapper overlay own the outer table perimeter.\n\t\t\t\t   data-reaches-* attributes are set by the TableCell node view. */\n\t\t\t\t> tbody > tr > th[data-reaches-top],\n\t\t\t\t> tbody > tr > td[data-reaches-top] {\n\t\t\t\t\tborder-top-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > th[data-reaches-left],\n\t\t\t\t> tbody > tr > td[data-reaches-left] {\n\t\t\t\t\tborder-left-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > td[data-reaches-left]::after {\n\t\t\t\t\tborder-left-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > td[data-reaches-bottom]::after,\n\t\t\t\t> tbody > tr > th[data-reaches-bottom]::after {\n\t\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t/* The rounded-table overlay owns transparent perimeter borders.\n\t\t\t\t   Paint edge cell backgrounds into that reserved border area so coloured\n\t\t\t\t   first/last rows do not show the page background through 1px seams. */\n\t\t\t\t> tbody > tr > th[data-reaches-top],\n\t\t\t\t> tbody > tr > td[data-reaches-top],\n\t\t\t\t> tbody > tr > th[data-reaches-bottom],\n\t\t\t\t> tbody > tr > td[data-reaches-bottom] {\n\t\t\t\t\tbackground-clip: border-box;\n\t\t\t\t}" : '', "var(--ds-background-accent-gray-subtlest, #F0F1F2)", (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? '&:not(.danger)' : '&:not([style]):not(.danger)', _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, #FFFFFF)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, #0B120E24)", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", "\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin: 0 auto ", ";\n\t\t\tbox-sizing: border-box;\n\n\t\t\t/**\n\t\t\t * Fix block top alignment inside table cells.\n\t\t\t */\n\t\t\t.decisionItemView-content-wrap:first-of-type > div {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\t", "\n\t\t}\n\t\t.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t\tclear: both;\n\t\t}\n\n\t\t.", " {\n\t\t\twill-change: width, margin-left;\n\t\t}\n\n\t\t.", " table {\n\t\t\twill-change: width;\n\t\t}\n\t\t.", " > table {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\n\t\t.", " > table,\n\t\t.", " > table {\n\t\t\tmargin: ", " ", " 0 0;\n\t\t}\n\n\t\t/* support panel nested in table */\n\t\t", "\n\n\t\t/* avoid applying styles to nested tables (possible via extensions) */\n\t.", " > table,\n\t.", " > table,\n\t.", " > table {\n\t\t\tborder-collapse: collapse;\n\t\t\t", "\n\t\t\ttable-layout: fixed;\n\t\t\tfont-size: 1em;\n\t\t\twidth: 100%;\n\t\t\t", "\n\n\t\t\t&[data-autosize='true'] {\n\t\t\t\ttable-layout: auto;\n\t\t\t}\n\n\t\t\t& {\n\t\t\t\t* {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\thr {\n\t\t\t\t\tbox-sizing: content-box;\n\t\t\t\t}\n\n\t\t\t\ttbody {\n\t\t\t\t\tborder-bottom: none;\n\t\t\t\t}\n\t\t\t\tth td {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > th,\n\t\t\t\t> tbody > tr > td {\n\t\t\t\t\tmin-width: ", "px;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tvertical-align: top;\n\t\t\t\t\t", "\n\t\t\t\t\tborder: 1px solid ", ";\n\t\t\t\t\tborder-right-width: 0;\n\t\t\t\t\tborder-bottom-width: 0;\n\n\t\t\t\t\tpadding: ", ";\n\t\t\t\t\t/* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n\t\t\t\t\t", "\n\n\t\t\t\t\t", "\n\n\t\t\t\tth p:not(:first-of-type),\n\t\t\t\ttd p:not(:first-of-type) {\n\t\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Ensures nested tables are compatible with parent table background color - uses specificity to ensure tables nested by extensions are not affected */\n\t\t\t\t> tbody > tr > td {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t\tth {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\ttext-align: left;\n\n\t\t\t\t\t/* only apply this styling to codeblocks in default background headercells */\n\t\t\t\t\t/* TODO this needs to be overhauled as it relies on unsafe selectors */\n\t\t\t\t\t", " {\n\t\t\t\t\t\t.", ":not(.danger) {\n\t\t\t\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t\t\t\t:not(.", ") {\n\t\t\t\t\t\t\t\tbox-shadow: 0px 0px 0px 1px ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\tbackground-image: ", ";\n\n\t\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t/* this is only relevant to the element taken care of by renderer */\n\t\t\t\t\t\t\t> [data-ds--code--code-block] {\n\t\t\t\t\t\t\t\tbackground-image: ", "!important;\n\n\t\t\t\t\t\t\t\tbackground-color: ", "!important;\n\n\t\t\t\t\t\t\t\t/* selector lives inside @atlaskit/code */\n\t\t\t\t\t\t\t\t--ds--code--line-number-bg-color: ", ";\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t"])), (0, _tableCell.tableCellBackgroundStyleOverride)(), _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Fake side borders are not needed when the rounded overlay owns the outer border. */\n\t\t\t\t.".concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t\t") : ".".concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 1px;\n\t\t\t\theight: calc(100% - ", "var(--ds-space-300, 24px)", ");\n\t\t\t\tbackground: ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: ", "var(--ds-space-300, 24px)", ";\n\t\t\t}\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_RIGHT_BORDER, " {\n\t\t\t\tright: 0;\n\t\t\t}\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t.").concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_LEFT_BORDER, "[data-with-numbered-table='true'] {\n\t\t\t\tleft: ").concat(_editorSharedStyles.akEditorTableNumberColumnWidth - 1, "px;\n\t\t\t}"), _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _TableSharedCssClassName.TableSharedCssClassName.TABLE_RESIZER_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_RESIZER_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') ? ".".concat(_TableSharedCssClassName.TableSharedCssClassName.TABLE_NODE_WRAPPER, " .ak-editor-panel {\n\t\t\tborder: ", "var(--ds-border-width, 1px)", " solid ", "var(--ds-border, #0B120E24)", ";\n\t\t}") : '', _TableSharedCssClassName.TableSharedCssClassName.TABLE_CONTAINER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_NODE_WRAPPER, _TableSharedCssClassName.TableSharedCssClassName.TABLE_STICKY_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Keep a transparent border so the collapsed border model reserves the same 1px slot\n\t\t\t   on the table edge; the ::after overlay draws the visible rounded border instead. */\n\t\t\tborder: ".concat(tableCellBorderWidth, "px solid transparent;") : "border: ".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\tborder-left-color: transparent;\n\t\t\tborder-right-color: transparent;"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "position: relative;\n\n\t\t\t/* Table-width outer-border owner for overflow-safe rounded corners. */\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tinset: -0.5px;\n\t\t\t\tborder: ".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n\t\t\t\tborder-radius: ", "var(--ds-radius-xlarge, 12px)", ";\n\t\t\t\tpointer-events: none;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\n\t\t\t/* When content-visibility is applied to the table (see editor-plugin-table nodeview), the\n\t\t\t   implied `contain: paint` clips descendant painting to the table's border-box. The\n\t\t\t   overlay above sits at `inset: -0.5px` (half a pixel outside), so it would be shaved \u2014\n\t\t\t   most visibly along the bottom. Pull it flush to the edge so it paints inside the clip. */\n\t\t\t&[data-content-visibility]::after {\n\t\t\t\tinset: 0;\n\t\t\t}") : '', "var(--ds-background-neutral-subtle, #00000000)", tableCellMinWidth, "var(--ds-font-weight-regular, 400)", (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) ? "&[data-valign='middle'] {\n\t\t\t\t\t\t\t\tvertical-align: middle;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t&[data-valign='bottom'] {\n\t\t\t\t\t\t\t\tvertical-align: bottom;\n\t\t\t\t\t\t\t}" : '', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-space-100, 8px)", browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', firstNodeWithNotMarginTop(), "var(--ds-space-150, 12px)", "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "/* Let the wrapper overlay own the outer table perimeter.\n\t\t\t\t   data-reaches-* attributes are set by the TableCell node view. */\n\t\t\t\t> tbody > tr > th[data-reaches-top],\n\t\t\t\t> tbody > tr > td[data-reaches-top] {\n\t\t\t\t\tborder-top-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > th[data-reaches-left],\n\t\t\t\t> tbody > tr > td[data-reaches-left] {\n\t\t\t\t\tborder-left-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > td[data-reaches-left]::after {\n\t\t\t\t\tborder-left-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t> tbody > tr > td[data-reaches-bottom]::after,\n\t\t\t\t> tbody > tr > th[data-reaches-bottom]::after {\n\t\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\t}\n\n\t\t\t\t/* The rounded-table overlay owns transparent perimeter borders.\n\t\t\t\t   Paint edge cell backgrounds into that reserved border area so coloured\n\t\t\t\t   first/last rows do not show the page background through 1px seams. */\n\t\t\t\t> tbody > tr > th[data-reaches-top],\n\t\t\t\t> tbody > tr > td[data-reaches-top],\n\t\t\t\t> tbody > tr > th[data-reaches-bottom],\n\t\t\t\t> tbody > tr > td[data-reaches-bottom] {\n\t\t\t\t\tbackground-clip: border-box;\n\t\t\t\t}" : '', "var(--ds-background-accent-gray-subtlest, #F0F1F2)", (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? '&:not(.danger)' : '&:not([style]):not(.danger)', _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, #FFFFFF)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, #0B120E24)", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"
   }), "var(--ds-background-neutral, #0515240F)", _codeBlock.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, #0515240F)", (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"

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

@@ -24,7 +24,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 = "118.10.2";
+var packageVersion = "118.11.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

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

@@ -13,6 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _providerFactory = require("../../provider-factory");
 var _mentionWithProviders = require("./mention-with-providers");
@@ -20,6 +21,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @repo/internal/react/no-class-components */
 var MENTION_PROVIDERS = ['mentionProvider', 'profilecardProvider'];
+var GENERIC_MENTION_IDS = ['HipChat', 'all', 'here'];
 var Mention = exports.default = /*#__PURE__*/function (_PureComponent) {
   function Mention(props) {
     var _this;
@@ -34,9 +36,26 @@ var Mention = exports.default = /*#__PURE__*/function (_PureComponent) {
         localId = _this$props.localId,
         userType = _this$props.userType,
         isDisabled = _this$props.isDisabled,
-        disabledTooltip = _this$props.disabledTooltip;
+        disabledTooltip = _this$props.disabledTooltip,
+        mentionNodeDataProvider = _this$props.mentionNodeDataProvider;
       var mentionProvider = providers.mentionProvider,
         profilecardProvider = providers.profilecardProvider;
+      var isAvatarEnabled = Boolean(mentionNodeDataProvider) && userType !== 'SPECIAL' && !GENERIC_MENTION_IDS.includes(id) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_avatar');
+      if (isAvatarEnabled && mentionNodeDataProvider) {
+        return /*#__PURE__*/_react.default.createElement(_mentionWithProviders.MentionWithAvatarProviders, {
+          id: id,
+          text: text,
+          accessLevel: accessLevel,
+          localId: localId,
+          userType: userType,
+          isDisabled: isDisabled,
+          disabledTooltip: disabledTooltip,
+          eventHandlers: eventHandlers,
+          mentionProvider: mentionProvider,
+          mentionNodeDataProvider: mentionNodeDataProvider,
+          profilecardProvider: profilecardProvider
+        });
+      }
       return /*#__PURE__*/_react.default.createElement(_mentionWithProviders.MentionWithProviders, {
         id: id,
         text: text,

package/dist/cjs/ui/Mention/mention-node-data-provider.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/Mention/mention-with-profilecard.js

@@ -47,11 +47,15 @@ function MentionWithProfileCard(_ref) {
     id = _ref.id,
     text = _ref.text,
     accessLevel = _ref.accessLevel,
+    appType = _ref.appType,
+    avatarUrl = _ref.avatarUrl,
+    isAvatarImagePreShaped = _ref.isAvatarImagePreShaped,
     mentionProvider = _ref.mentionProvider,
     profilecardProvider = _ref.profilecardProvider,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
+    renderAvatarSlot = _ref.renderAvatarSlot,
     localId = _ref.localId,
     ssrPlaceholderId = _ref.ssrPlaceholderId,
     userType = _ref.userType;
@@ -65,11 +69,15 @@ function MentionWithProfileCard(_ref) {
     id: id,
     text: text,
     accessLevel: accessLevel,
+    appType: appType,
+    avatarUrl: avatarUrl,
+    isAvatarImagePreShaped: isAvatarImagePreShaped,
     localId: localId,
     mentionProvider: mentionProvider,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
+    renderAvatarSlot: renderAvatarSlot,
     ssrPlaceholderId: ssrPlaceholderId
   });
 

package/dist/cjs/ui/Mention/mention-with-providers.js

@@ -5,28 +5,78 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MentionWithProviders = void 0;
+exports.MentionWithProviders = exports.MentionWithAvatarProviders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _element = require("@atlaskit/mention/element");
 var _mentionWithProfilecard = _interopRequireDefault(require("./mention-with-profilecard"));
+var _excluded = ["id", "mentionNodeDataProvider", "userType"];
 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); }
 var GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
-var MentionWithProviders = exports.MentionWithProviders = /*#__PURE__*/_react.default.memo(function (_ref) {
-  var accessLevel = _ref.accessLevel,
-    disabledTooltip = _ref.disabledTooltip,
-    eventHandlers = _ref.eventHandlers,
-    id = _ref.id,
-    isDisabled = _ref.isDisabled,
-    mentionProvider = _ref.mentionProvider,
-    profilecardProviderResolver = _ref.profilecardProvider,
-    text = _ref.text,
-    localId = _ref.localId,
+var useMentionNodeData = function useMentionNodeData(_ref) {
+  var _state$data;
+  var id = _ref.id,
+    mentionNodeDataProvider = _ref.mentionNodeDataProvider,
     userType = _ref.userType;
-  var _useState = (0, _react.useState)(null),
+  var mention = (0, _react.useMemo)(function () {
+    return {
+      id: id,
+      userType: userType
+    };
+  }, [id, userType]);
+  var mentionKey = "".concat(userType !== null && userType !== void 0 ? userType : 'DEFAULT', ":").concat(id);
+  var synchronousData = (0, _react.useMemo)(function () {
+    return mentionNodeDataProvider.getMentionDataFromCache(mention);
+  }, [mention, mentionNodeDataProvider]);
+  var _useState = (0, _react.useState)(function () {
+      return {
+        data: synchronousData,
+        key: mentionKey
+      };
+    }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    profilecardProvider = _useState2[0],
-    setProfilecardProvider = _useState2[1];
+    state = _useState2[0],
+    setState = _useState2[1];
+  var data = state.key === mentionKey ? (_state$data = state.data) !== null && _state$data !== void 0 ? _state$data : synchronousData : synchronousData;
+  (0, _react.useEffect)(function () {
+    if (synchronousData) {
+      return;
+    }
+    var isActive = true;
+    mentionNodeDataProvider.getMentionData(mention, function (payload) {
+      if (isActive && payload.data) {
+        setState({
+          data: payload.data,
+          key: mentionKey
+        });
+      }
+    });
+    return function () {
+      isActive = false;
+    };
+  }, [mention, mentionKey, mentionNodeDataProvider, synchronousData]);
+  return data;
+};
+var MentionWithProviders = exports.MentionWithProviders = /*#__PURE__*/_react.default.memo(function (_ref2) {
+  var accessLevel = _ref2.accessLevel,
+    disabledTooltip = _ref2.disabledTooltip,
+    eventHandlers = _ref2.eventHandlers,
+    id = _ref2.id,
+    isDisabled = _ref2.isDisabled,
+    mentionNodeData = _ref2.mentionNodeData,
+    mentionProvider = _ref2.mentionProvider,
+    profilecardProviderResolver = _ref2.profilecardProvider,
+    _ref2$renderAvatarSlo = _ref2.renderAvatarSlot,
+    renderAvatarSlot = _ref2$renderAvatarSlo === void 0 ? false : _ref2$renderAvatarSlo,
+    text = _ref2.text,
+    localId = _ref2.localId,
+    userType = _ref2.userType;
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    profilecardProvider = _useState4[0],
+    setProfilecardProvider = _useState4[1];
   var mountedRef = (0, _react.useRef)(true);
   (0, _react.useLayoutEffect)(function () {
     mountedRef.current = true;
@@ -61,11 +111,15 @@ var MentionWithProviders = exports.MentionWithProviders = /*#__PURE__*/_react.de
       accessLevel: accessLevel,
       localId: localId,
       mentionProvider: mentionProvider,
+      appType: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.appType,
+      avatarUrl: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.avatarUrl,
+      isAvatarImagePreShaped: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.isAvatarImagePreShaped,
       isDisabled: true,
       disabledTooltip: disabledTooltip,
       onClick: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onClick,
       onMouseEnter: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseEnter,
       onMouseLeave: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseLeave,
+      renderAvatarSlot: renderAvatarSlot,
       ssrPlaceholderId: ssrPlaceholderId
     });
   }
@@ -75,7 +129,10 @@ var MentionWithProviders = exports.MentionWithProviders = /*#__PURE__*/_react.de
     accessLevel: accessLevel,
     localId: localId,
     userType: userType,
-    mentionProvider: mentionProvider
+    mentionProvider: mentionProvider,
+    appType: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.appType,
+    avatarUrl: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.avatarUrl,
+    isAvatarImagePreShaped: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.isAvatarImagePreShaped
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,
@@ -83,6 +140,26 @@ var MentionWithProviders = exports.MentionWithProviders = /*#__PURE__*/_react.de
     onClick: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onClick,
     onMouseEnter: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseEnter,
     onMouseLeave: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseLeave,
+    renderAvatarSlot: renderAvatarSlot,
     ssrPlaceholderId: ssrPlaceholderId
   });
+});
+var MentionWithAvatarProviders = exports.MentionWithAvatarProviders = /*#__PURE__*/_react.default.memo(function (_ref3) {
+  var id = _ref3.id,
+    mentionNodeDataProvider = _ref3.mentionNodeDataProvider,
+    userType = _ref3.userType,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var mentionNodeData = useMentionNodeData({
+    id: id,
+    mentionNodeDataProvider: mentionNodeDataProvider,
+    userType: userType
+  });
+  return /*#__PURE__*/_react.default.createElement(MentionWithProviders
+  // eslint-disable-next-line react/jsx-props-no-spreading -- The treatment adds only resolved avatar data to the existing mention props.
+  , (0, _extends2.default)({}, props, {
+    id: id,
+    mentionNodeData: mentionNodeData,
+    renderAvatarSlot: true,
+    userType: userType
+  }));
 });

package/dist/cjs/utils/content-visibility.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyContentVisibility = applyContentVisibility;
+exports.estimateExpandIntrinsicHeight = estimateExpandIntrinsicHeight;
+exports.estimateMediaSingleIntrinsicSize = estimateMediaSingleIntrinsicSize;
+exports.estimateTableIntrinsicHeight = estimateTableIntrinsicHeight;
+exports.formatIntrinsicSize = formatIntrinsicSize;
+exports.getContentVisibilityStyle = getContentVisibilityStyle;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _utils = require("../media-single/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Rough per-node rendered-size constants (px), grounded in the real style defaults from
+// `styles/shared/table.ts`, `EditorContentContainer/styles/expandStyles.ts` and
+// `EditorContentContainer/styles/layout.ts`. These only need to be a decent first estimate: the
+// `auto` keyword in `contain-intrinsic-*: auto <estimate>` makes the browser remember each
+// element's real size after its first render, so any inaccuracy self-corrects on scroll. Where the
+// estimate can't be exact we intentionally err slightly HIGH — over-reserving leaves a marginally
+// long scrollbar that shrinks on scroll, whereas under-reserving makes content jump upward.
+var TABLE_ROW_HEIGHT = 44; // row content: line-height + cell padding (space.100 ×2) + cell border
+var TABLE_VERTICAL_MARGIN = 40; // tableMarginTop(24) + tableMarginBottom(16)
+var TABLE_MIN_HEIGHT = 120;
+var BLOCK_HEIGHT = 28; // a typical paragraph/block line + spacing
+
+var EXPAND_HEADER_HEIGHT = 48; // min-height:25 + padding + margin of the title row
+var EXPAND_CONTENT_PADDING = 8; // space.100 padding-top when expanded
+
+var MEDIA_SINGLE_MIN_HEIGHT = 100;
+var MEDIA_SINGLE_GUTTER = 12; // MEDIA_SINGLE_GUTTER_SIZE — gap between resizer handle and media
+var MEDIA_SINGLE_VERTICAL_MARGIN = 24; // rich-media-item margin: space.150 top + bottom
+var MEDIA_CAPTION_HEIGHT = 32; // caption line-height + vertical padding, when a caption is present
+var DEFAULT_MEDIA_ASPECT_RATIO = 9 / 16; // used only when the media has no intrinsic dimensions
+
+/**
+ * The intrinsic size a nodeView reserves while off-screen (`contain-intrinsic-width`/`-height`).
+ * `width` is optional: for block-level wrappers (expand, layout) the inline size comes from the
+ * containing block regardless of size containment, so only `height` is meaningful; for
+ * content-sized boxes (the `<table>` element, the mediaSingle wrapper) the width matters and must
+ * be supplied or the box collapses to 0 wide while contained.
+ */
+
+/**
+ * Estimate the rendered height of a table from its row count. Cell padding and cell borders are
+ * already folded into `TABLE_ROW_HEIGHT`; the table's block margins are added as a small buffer.
+ */
+function estimateTableIntrinsicHeight(node) {
+  var rows = node.childCount;
+  return Math.max(TABLE_MIN_HEIGHT, rows * TABLE_ROW_HEIGHT + TABLE_VERTICAL_MARGIN);
+}
+
+/**
+ * Estimate the rendered height of an expand. A collapsed expand reserves only its header row; an
+ * expanded one additionally reserves space for its child blocks. `expanded` is passed in by the
+ * caller because the two expand implementations track expanded state differently (a WeakMap in
+ * single-player vs the `__expanded` attribute in legacy).
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function estimateExpandIntrinsicHeight(node, expanded) {
+  if (!expanded) {
+    return EXPAND_HEADER_HEIGHT;
+  }
+  return EXPAND_HEADER_HEIGHT + node.childCount * BLOCK_HEIGHT + EXPAND_CONTENT_PADDING;
+}
+
+/**
+ * Estimate the rendered width AND height of a mediaSingle. Unlike the structural estimates above,
+ * media carries its real dimensions in the ADF: the child `media` node's `width`/`height` attrs
+ * give the intrinsic aspect ratio, and the rendered pixel width is computed with the exact same
+ * `calcMediaSinglePixelWidth` helper the renderer uses (honouring `width`/`widthType`/`layout` and
+ * the editor's content/container width). Height then follows from width × aspect ratio — plus a
+ * caption row when present and the mediaSingle's block margins — so this is the most accurate
+ * estimate of any node type. The pixel width is returned as the intrinsic width because the
+ * mediaSingle wrapper is content-sized. `lineLength` and `containerWidth` come from the width
+ * plugin's shared state.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function estimateMediaSingleIntrinsicSize(node, lineLength, containerWidth) {
+  var _media$attrs, _media$attrs2, _node$attrs$width, _ref;
+  var media = node.firstChild;
+  var origWidth = Number(media === null || media === void 0 || (_media$attrs = media.attrs) === null || _media$attrs === void 0 ? void 0 : _media$attrs.width) || 0;
+  var origHeight = Number(media === null || media === void 0 || (_media$attrs2 = media.attrs) === null || _media$attrs2 === void 0 ? void 0 : _media$attrs2.height) || 0;
+  var aspectRatio = origWidth && origHeight ? origHeight / origWidth : DEFAULT_MEDIA_ASPECT_RATIO;
+  var pixelWidth = (0, _utils.calcMediaSinglePixelWidth)({
+    width: (_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : undefined,
+    widthType: node.attrs.widthType,
+    origWidth: origWidth || lineLength || containerWidth,
+    layout: (_ref = node.attrs.layout) !== null && _ref !== void 0 ? _ref : 'center',
+    contentWidth: lineLength || undefined,
+    containerWidth: containerWidth || lineLength,
+    gutterOffset: MEDIA_SINGLE_GUTTER
+  });
+
+  // A caption child (childCount > 1) sits below the media, and the mediaSingle block reserves
+  // vertical margin above and below regardless.
+  var captionHeight = node.childCount > 1 ? MEDIA_CAPTION_HEIGHT : 0;
+  var height = Math.max(MEDIA_SINGLE_MIN_HEIGHT, Math.round(pixelWidth * aspectRatio) + captionHeight + MEDIA_SINGLE_VERTICAL_MARGIN);
+  return {
+    width: Math.round(pixelWidth),
+    height: height
+  };
+}
+
+/**
+ * Produce a single-axis `contain-intrinsic-width`/`-height` value using the `auto` keyword so the
+ * browser remembers the element's real size after its first render and only uses the estimate
+ * beforehand.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function formatIntrinsicSize(px) {
+  return "auto ".concat(Math.round(px), "px");
+}
+
+/**
+ * The `content-visibility` / `contain-intrinsic-*` styles applied to an eligible node. Width and
+ * height are kept as separate `contain-intrinsic-width`/`-height` axes rather than the
+ * `contain-intrinsic-size` shorthand: the shorthand's single value is applied to BOTH axes, which
+ * forces a wrong width on content-sized boxes (e.g. a 500px-tall `<table>` would reserve 500px
+ * wide). `containIntrinsicWidth` is omitted for block-level wrappers whose width comes from layout.
+ */
+
+/**
+ * Resolve the `content-visibility` styles for a node, or `undefined` when the optimisation should
+ * not apply.
+ *
+ * Gating is delegated to limited mode: `limitedModeEnabled` should come from the limited-mode
+ * plugin's shared state, so this feature shares a single "large document" definition with limited
+ * mode rather than a bespoke threshold. The optimisation applies only when the feature gate is on
+ * AND limited mode is active.
+ *
+ * The intrinsic size is supplied lazily via `getIntrinsicSize` so callers can compute a
+ * per-instance estimate from the node's structure, and is only evaluated when actually applied.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function getContentVisibilityStyle(limitedModeEnabled, getIntrinsicSize) {
+  if (!limitedModeEnabled || !(0, _isExperimentEnabled.isExperimentEnabled)('cc_editor_limited_mode_perf_improvements')) {
+    return undefined;
+  }
+  var _getIntrinsicSize = getIntrinsicSize(),
+    width = _getIntrinsicSize.width,
+    height = _getIntrinsicSize.height;
+  return _objectSpread({
+    contentVisibility: 'auto',
+    containIntrinsicHeight: formatIntrinsicSize(height)
+  }, width !== undefined ? {
+    containIntrinsicWidth: formatIntrinsicSize(width)
+  } : {});
+}
+
+/**
+ * Imperatively apply the `content-visibility: auto` rendering optimisation to a node's top-level
+ * DOM element (for use in raw-DOM nodeViews), but only when both the feature gate is on and limited
+ * mode is active (see `getContentVisibilityStyle`).
+ *
+ * The intrinsic size uses the `auto` keyword so any initial inaccuracy self-corrects once the
+ * element has been rendered once. Safe to call repeatedly (e.g. on expand/collapse toggle) — it
+ * simply re-applies or, when ineligible, leaves the element untouched.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function applyContentVisibility(dom, limitedModeEnabled, getIntrinsicSize) {
+  var _style$containIntrins;
+  var style = getContentVisibilityStyle(limitedModeEnabled, getIntrinsicSize);
+  if (!style) {
+    dom.style.contentVisibility = '';
+    dom.style.containIntrinsicHeight = '';
+    dom.style.containIntrinsicWidth = '';
+    return false;
+  }
+  dom.style.contentVisibility = style.contentVisibility;
+  dom.style.containIntrinsicHeight = style.containIntrinsicHeight;
+  dom.style.containIntrinsicWidth = (_style$containIntrins = style.containIntrinsicWidth) !== null && _style$containIntrins !== void 0 ? _style$containIntrins : '';
+  return true;
+}

package/dist/es2019/core-utils/index.js

@@ -3,5 +3,4 @@
 
 export { insideTable } from './inside';
 export { getDocStructure } from './document-logger';
-export { isSSR } from './is-ssr';
-export { isSSRStreaming } from './is-ssr-streaming';
+export { isSSR } from './is-ssr';