@atlaskit/editor-common 118.10.2 → 118.11.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-common
 
+## 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
+
+- [`2ba69c4d87919`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2ba69c4d87919) -
+  Add an experiment-gated empty frame placeholder for multi-bodied extensions under
+  confluence_native_tabs_m15.
+
 ## 118.10.2
 
 ### Patch Changes

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -15,9 +15,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntl = require("react-intl");
 var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _hooks = require("../../hooks");
+var _placeholderText = require("../../messages/placeholder-text");
 var _MultiBodiedExtension = require("../../ui/MultiBodiedExtension");
 var _utils = require("../../utils");
 var _Lozenge = _interopRequireDefault(require("../Extension/Lozenge"));
@@ -45,6 +48,20 @@ var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activ
     showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)))
   );
 };
+
+// Renders a visual placeholder when the active frame contains a single empty paragraph.
+var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, placeholderText) {
+  return (0, _react2.css)((0, _defineProperty2.default)({}, "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  , ") > p:only-child:has(.ProseMirror-trailingBreak:only-child)::before"), {
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    // JSON.stringify produces a quoted and escaped CSS string.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    content: placeholderText,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }));
+};
 var imageStyles = (0, _react2.css)({
   maxHeight: '24px',
   maxWidth: '24px'
@@ -189,6 +206,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     node: node,
     type: 'image'
   });
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var _useState3 = (0, _react.useState)(0),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     activeChildIndex = _useState4[0],
@@ -242,6 +261,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     mbeWrapperStyles = breakoutStyles;
   }
   var shouldUseUpdatedChrome = (0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true);
+  var shouldShowEmptyFramePlaceholder = (0, _isExperimentEnabled.isExperimentEnabled)('confluence_native_tabs_m15');
+  var emptyFramePlaceholderText = _react.default.useMemo(function () {
+    return JSON.stringify(formatMessage(_placeholderText.placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
+  }, [formatMessage]);
   var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -315,10 +338,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     "data-testid": "multiBodiedExtension--overlay"
   }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: containerClassNames
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
+    className: containerClassNames,
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex

package/dist/cjs/messages/placeholder-text.js

@@ -50,5 +50,10 @@ var placeholderTextMessages = exports.placeholderTextMessages = (0, _reactIntl.d
     id: 'fabric.editor.sourceSyncBlockPlaceholderText',
     defaultMessage: 'Add content you want to reuse. Copy and paste this block to sync in other locations.',
     description: 'Placeholder text shown inside an empty source sync block, prompting users to add reusable content that can be synced across multiple locations.'
+  },
+  multiBodiedExtensionEmptyFramePlaceholderText: {
+    id: 'fabric.editor.multiBodiedExtensionEmptyFramePlaceholderText',
+    defaultMessage: 'Type to add content or press / to insert elements',
+    description: 'Placeholder text shown inside an empty multi-bodied extension frame, prompting users to type content or use slash commands to insert elements.'
   }
 });

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.1";
+var packageVersion = "118.10.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

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/extensibility/MultiBodiedExtension/index.js

@@ -11,9 +11,12 @@ import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import classnames from 'classnames';
+import { useIntl } from 'react-intl';
 import EditorFileIcon from '@atlaskit/icon/core/file';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useSharedPluginStateWithSelector } from '../../hooks';
+import { placeholderTextMessages } from '../../messages/placeholder-text';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -33,6 +36,21 @@ css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   showMacroInteractionDesignUpdates && removeMarginsAndBorder)
 });
+
+// Renders a visual placeholder when the active frame contains a single empty paragraph.
+const getEmptyFramePlaceholderStyles = (activeChildIndex, placeholderText) => css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  [`& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  }) > p:only-child:has(.ProseMirror-trailingBreak:only-child)::before`]: {
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    // JSON.stringify produces a quoted and escaped CSS string.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    content: placeholderText,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 const imageStyles = css({
   maxHeight: '24px',
   maxWidth: '24px'
@@ -177,6 +195,9 @@ const MultiBodiedExtensionWithWidth = ({
     node,
     type: 'image'
   });
+  const {
+    formatMessage
+  } = useIntl();
   const [activeChildIndex, setActiveChildIndex] = useState(0);
   // Adding to avoid aliasing `this` for the callbacks
   const updateActiveChild = React.useCallback(index => {
@@ -228,6 +249,8 @@ const MultiBodiedExtensionWithWidth = ({
     mbeWrapperStyles = breakoutStyles;
   }
   const shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
+  const shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
+  const emptyFramePlaceholderText = React.useMemo(() => JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText)), [formatMessage]);
   const isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   const isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   const shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -297,10 +320,10 @@ const MultiBodiedExtensionWithWidth = ({
     "data-testid": "multiBodiedExtension--overlay"
   }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: containerClassNames
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
+    className: containerClassNames,
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex

package/dist/es2019/messages/placeholder-text.js

@@ -44,5 +44,10 @@ export const placeholderTextMessages = defineMessages({
     id: 'fabric.editor.sourceSyncBlockPlaceholderText',
     defaultMessage: 'Add content you want to reuse. Copy and paste this block to sync in other locations.',
     description: 'Placeholder text shown inside an empty source sync block, prompting users to add reusable content that can be synced across multiple locations.'
+  },
+  multiBodiedExtensionEmptyFramePlaceholderText: {
+    id: 'fabric.editor.multiBodiedExtensionEmptyFramePlaceholderText',
+    defaultMessage: 'Type to add content or press / to insert elements',
+    description: 'Placeholder text shown inside an empty multi-bodied extension frame, prompting users to type content or use slash commands to insert elements.'
   }
 });

package/dist/es2019/monitoring/error.js

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

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

@@ -136,6 +136,14 @@ const tableSharedStyle = () => {
 				border-radius: ${"var(--ds-radius-xlarge, 12px)"};
 				pointer-events: none;
 				z-index: 1;
+			}
+
+			/* When content-visibility is applied to the table (see editor-plugin-table nodeview), the
+			   implied \`contain: paint\` clips descendant painting to the table's border-box. The
+			   overlay above sits at \`inset: -0.5px\` (half a pixel outside), so it would be shaved —
+			   most visibly along the bottom. Pull it flush to the edge so it paints inside the clip. */
+			&[data-content-visibility]::after {
+				inset: 0;
 			}` : ''}
 
 			&[data-autosize='true'] {

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "118.10.1";
+const packageVersion = "118.10.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

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

@@ -0,0 +1,165 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { calcMediaSinglePixelWidth } from '../media-single/utils';
+
+// 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.
+const TABLE_ROW_HEIGHT = 44; // row content: line-height + cell padding (space.100 ×2) + cell border
+const TABLE_VERTICAL_MARGIN = 40; // tableMarginTop(24) + tableMarginBottom(16)
+const TABLE_MIN_HEIGHT = 120;
+const BLOCK_HEIGHT = 28; // a typical paragraph/block line + spacing
+
+const EXPAND_HEADER_HEIGHT = 48; // min-height:25 + padding + margin of the title row
+const EXPAND_CONTENT_PADDING = 8; // space.100 padding-top when expanded
+
+const MEDIA_SINGLE_MIN_HEIGHT = 100;
+const MEDIA_SINGLE_GUTTER = 12; // MEDIA_SINGLE_GUTTER_SIZE — gap between resizer handle and media
+const MEDIA_SINGLE_VERTICAL_MARGIN = 24; // rich-media-item margin: space.150 top + bottom
+const MEDIA_CAPTION_HEIGHT = 32; // caption line-height + vertical padding, when a caption is present
+const 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.
+ */
+export function estimateTableIntrinsicHeight(node) {
+  const 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
+export 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
+export function estimateMediaSingleIntrinsicSize(node, lineLength, containerWidth) {
+  var _media$attrs, _media$attrs2, _node$attrs$width, _ref;
+  const media = node.firstChild;
+  const origWidth = Number(media === null || media === void 0 ? void 0 : (_media$attrs = media.attrs) === null || _media$attrs === void 0 ? void 0 : _media$attrs.width) || 0;
+  const origHeight = Number(media === null || media === void 0 ? void 0 : (_media$attrs2 = media.attrs) === null || _media$attrs2 === void 0 ? void 0 : _media$attrs2.height) || 0;
+  const aspectRatio = origWidth && origHeight ? origHeight / origWidth : DEFAULT_MEDIA_ASPECT_RATIO;
+  const pixelWidth = 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.
+  const captionHeight = node.childCount > 1 ? MEDIA_CAPTION_HEIGHT : 0;
+  const height = Math.max(MEDIA_SINGLE_MIN_HEIGHT, Math.round(pixelWidth * aspectRatio) + captionHeight + MEDIA_SINGLE_VERTICAL_MARGIN);
+  return {
+    width: Math.round(pixelWidth),
+    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
+export function formatIntrinsicSize(px) {
+  return `auto ${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
+export function getContentVisibilityStyle(limitedModeEnabled, getIntrinsicSize) {
+  if (!limitedModeEnabled || !isExperimentEnabled('cc_editor_limited_mode_perf_improvements')) {
+    return undefined;
+  }
+  const {
+    width,
+    height
+  } = getIntrinsicSize();
+  return {
+    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
+export function applyContentVisibility(dom, limitedModeEnabled, getIntrinsicSize) {
+  var _style$containIntrins;
+  const 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/esm/extensibility/MultiBodiedExtension/index.js

@@ -16,9 +16,12 @@ import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import classnames from 'classnames';
+import { useIntl } from 'react-intl';
 import EditorFileIcon from '@atlaskit/icon/core/file';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useSharedPluginStateWithSelector } from '../../hooks';
+import { placeholderTextMessages } from '../../messages/placeholder-text';
 import { removeMarginsAndBorder, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -38,6 +41,20 @@ var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activ
     showMacroInteractionDesignUpdates && removeMarginsAndBorder)))
   );
 };
+
+// Renders a visual placeholder when the active frame contains a single empty paragraph.
+var getEmptyFramePlaceholderStyles = function getEmptyFramePlaceholderStyles(activeChildIndex, placeholderText) {
+  return css(_defineProperty({}, "& .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  , ") > p:only-child:has(.ProseMirror-trailingBreak:only-child)::before"), {
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    // JSON.stringify produces a quoted and escaped CSS string.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    content: placeholderText,
+    pointerEvents: 'none',
+    position: 'absolute'
+  }));
+};
 var imageStyles = css({
   maxHeight: '24px',
   maxWidth: '24px'
@@ -182,6 +199,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     node: node,
     type: 'image'
   });
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     activeChildIndex = _useState4[0],
@@ -235,6 +254,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     mbeWrapperStyles = breakoutStyles;
   }
   var shouldUseUpdatedChrome = expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
+  var shouldShowEmptyFramePlaceholder = isExperimentEnabled('confluence_native_tabs_m15');
+  var emptyFramePlaceholderText = React.useMemo(function () {
+    return JSON.stringify(formatMessage(placeholderTextMessages.multiBodiedExtensionEmptyFramePlaceholderText));
+  }, [formatMessage]);
   var isSelectionInsideMultiBodiedExtension = useIsSelectionInsideNode(editorView, node, getPos, shouldUseUpdatedChrome && !isLivePageViewMode);
   var isMultiBodiedExtensionActive = isNodeSelected || isSelectionInsideMultiBodiedExtension;
   var shouldShowChromeOnInteraction = isNodeHovered || isMultiBodiedExtensionActive;
@@ -308,10 +331,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     "data-testid": "multiBodiedExtension--overlay"
   }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: containerClassNames
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
+    className: containerClassNames,
+    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
+    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates), shouldShowEmptyFramePlaceholder && getEmptyFramePlaceholderStyles(activeChildIndex, emptyFramePlaceholderText)
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex

package/dist/esm/messages/placeholder-text.js

@@ -44,5 +44,10 @@ export var placeholderTextMessages = defineMessages({
     id: 'fabric.editor.sourceSyncBlockPlaceholderText',
     defaultMessage: 'Add content you want to reuse. Copy and paste this block to sync in other locations.',
     description: 'Placeholder text shown inside an empty source sync block, prompting users to add reusable content that can be synced across multiple locations.'
+  },
+  multiBodiedExtensionEmptyFramePlaceholderText: {
+    id: 'fabric.editor.multiBodiedExtensionEmptyFramePlaceholderText',
+    defaultMessage: 'Type to add content or press / to insert elements',
+    description: 'Placeholder text shown inside an empty multi-bodied extension frame, prompting users to type content or use slash commands to insert elements.'
   }
 });

package/dist/esm/monitoring/error.js

@@ -20,7 +20,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.1";
+var packageVersion = "118.10.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -49,7 +49,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
 var tableSharedStyle = function tableSharedStyle() {
   var 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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), tableCellBackgroundStyleOverride(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", 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.TABLE_RIGHT_BORDER, ",\n\t\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t\t") : ".".concat(TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t.").concat(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.TABLE_RIGHT_BORDER, " {\n\t\t\t\tright: 0;\n\t\t\t}\n\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, "[data-with-numbered-table='true'] {\n\t\t\t\tleft: ").concat(akEditorTableNumberColumnWidth - 1, "px;\n\t\t\t}"), TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", fg('platform_editor_bordered_panel_nested_in_table') ? ".".concat(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.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, 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;"), 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)", 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)", 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)", expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? '&:not(.danger)' : '&:not([style]):not(.danger)', CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, #FFFFFF)", akEditorSelectedNodeClassName, "var(--ds-border, #0B120E24)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), tableCellBackgroundStyleOverride(), TableSharedCssClassName.TABLE_CONTAINER, "var(--ds-space-200, 16px)", 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.TABLE_RIGHT_BORDER, ",\n\t\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t\t") : ".".concat(TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t\t.").concat(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.TABLE_RIGHT_BORDER, " {\n\t\t\t\tright: 0;\n\t\t\t}\n\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, " {\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, "[data-with-numbered-table='true'] {\n\t\t\t\tleft: ").concat(akEditorTableNumberColumnWidth - 1, "px;\n\t\t\t}"), TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_RESIZER_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, "var(--ds-space-300, 24px)", TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", fg('platform_editor_bordered_panel_nested_in_table') ? ".".concat(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.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, 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;"), 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)", 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)", 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)", expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? '&:not(.danger)' : '&:not([style]):not(.danger)', CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, #FFFFFF)", akEditorSelectedNodeClassName, "var(--ds-border, #0B120E24)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
     leftCoverWidth: "var(--ds-space-300, 24px)"
   }), "var(--ds-background-neutral, #0515240F)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, #0515240F)", overflowShadow({
     leftCoverWidth: "var(--ds-space-300, 24px)"

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "118.10.1";
+var packageVersion = "118.10.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

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

@@ -0,0 +1,166 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { calcMediaSinglePixelWidth } from '../media-single/utils';
+
+// 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.
+ */
+export 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
+export 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
+export 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 = 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
+export 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
+export function getContentVisibilityStyle(limitedModeEnabled, getIntrinsicSize) {
+  if (!limitedModeEnabled || !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
+export 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/types/messages/placeholder-text.d.ts

@@ -1,47 +1,52 @@
 export declare const placeholderTextMessages: {
-    placeholderTextPlaceholder: {
-        id: string;
+    longEmptyNodePlaceholderADFPrefix: {
         defaultMessage: string;
         description: string;
-    };
-    shortEmptyNodePlaceholderText: {
         id: string;
-        defaultMessage: string;
-        description: string;
     };
-    shortEmptyNodePlaceholderADFSlashShortcut: {
-        id: string;
+    longEmptyNodePlaceholderADFSlashShortcut: {
         defaultMessage: string;
         description: string;
-    };
-    shortEmptyNodePlaceholderADFSuffix: {
         id: string;
+    };
+    longEmptyNodePlaceholderADFSuffix: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     longEmptyNodePlaceholderText: {
-        id: string;
         defaultMessage: string;
         description: string;
-    };
-    longEmptyNodePlaceholderADFPrefix: {
         id: string;
+    };
+    multiBodiedExtensionEmptyFramePlaceholderText: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    longEmptyNodePlaceholderADFSlashShortcut: {
+    placeholderTextPlaceholder: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    shortEmptyNodePlaceholderADFSlashShortcut: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    longEmptyNodePlaceholderADFSuffix: {
+    shortEmptyNodePlaceholderADFSuffix: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    shortEmptyNodePlaceholderText: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     sourceSyncBlockPlaceholderText: {
-        id: string;
         defaultMessage: string;
         description: string;
+        id: string;
     };
 };

package/dist/types/utils/content-visibility.d.ts

@@ -0,0 +1,78 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * 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.
+ */
+export type IntrinsicSize = {
+    height: number;
+    width?: number;
+};
+/**
+ * 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.
+ */
+export declare function estimateTableIntrinsicHeight(node: PMNode): number;
+/**
+ * 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).
+ */
+export declare function estimateExpandIntrinsicHeight(node: PMNode, expanded: boolean): number;
+/**
+ * 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.
+ */
+export declare function estimateMediaSingleIntrinsicSize(node: PMNode, lineLength: number, containerWidth: number): IntrinsicSize;
+/**
+ * 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.
+ */
+export declare function formatIntrinsicSize(px: number): string;
+/**
+ * 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.
+ */
+type ContentVisibilityStyle = {
+    containIntrinsicHeight: string;
+    containIntrinsicWidth?: string;
+    contentVisibility: 'auto';
+};
+/**
+ * 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.
+ */
+export declare function getContentVisibilityStyle(limitedModeEnabled: boolean, getIntrinsicSize: () => IntrinsicSize): ContentVisibilityStyle | undefined;
+/**
+ * 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.
+ */
+export declare function applyContentVisibility(dom: HTMLElement, limitedModeEnabled: boolean, getIntrinsicSize: () => IntrinsicSize): boolean;
+export {};

package/package.json

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

package/utils/content-visibility/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/editor-common/utils/content-visibility",
+  "main": "../../dist/cjs/utils/content-visibility.js",
+  "module": "../../dist/esm/utils/content-visibility.js",
+  "module:es2019": "../../dist/es2019/utils/content-visibility.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/utils/content-visibility.d.ts"
+}