@atlaskit/renderer 130.2.8 → 130.2.10

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/renderer
 
+## 130.2.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 130.2.9
+
+### Patch Changes
+
+- [`245a43ebad095`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/245a43ebad095) -
+  [EDITOR-4550] prevent inline emojis inside smart links from scaling with fontsize
+- [`1a060960612e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a060960612e2) -
+  [ux] [ED-16212] Render fake left/right table border divs (`pm-table-left-border`,
+  `pm-table-right-border`) inside `pm-table-container` so the table's vertical edges remain visible
+  regardless of horizontal scroll position. Mirrors the editor-plugin-table behavior. Fixes the
+  missing right border on overflowing tables inside reference synced blocks. Gated by
+  `platform_synced_block_patch_9`.
+- Updated dependencies
+
 ## 130.2.8
 
 ### Patch Changes

package/dist/cjs/react/nodes/table.js

@@ -168,8 +168,8 @@ var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**
- *
- */
+*
+*/
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Component) {
@@ -621,6 +621,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
+      }), /*#__PURE__*/_react.default.createElement(_tableNew.RefSyncBlockFakeBorders, {
+        isNumberColumnEnabled: isNumberColumnEnabled
       })));
     }
   }]);

package/dist/cjs/react/nodes/tableNew.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableCanBeSticky = exports.shouldHeaderStick = exports.shouldHeaderPinBottom = exports.orderChildren = exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.isHeaderRowEnabled = exports.hasRowspan = exports.getRefTop = exports.addSortableColumn = exports.TableProcessorWithContainerStyles = exports.TableContainer = void 0;
+exports.tableCanBeSticky = exports.shouldHeaderStick = exports.shouldHeaderPinBottom = exports.orderChildren = exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.isHeaderRowEnabled = exports.hasRowspan = exports.getRefTop = exports.addSortableColumn = exports.TableProcessorWithContainerStyles = exports.TableContainer = exports.RefSyncBlockFakeBorders = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -25,6 +25,7 @@ var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
+var _rendererContext = require("../../renderer-context");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _table2 = require("@atlaskit/editor-common/table");
 var _contentMode = require("./table/content-mode");
@@ -145,6 +146,49 @@ var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node
 ) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
+/**
+ * Fake left/right borders rendered as direct children of TABLE_CONTAINER
+ * (the non-scrolling parent of the horizontally scrolling TABLE_NODE_WRAPPER).
+ *
+ * The visible styling for these divs lives in `tableFakeBorderStyles`
+ * (`renderer/src/ui/Renderer/RendererStyleContainer.tsx`), which is itself
+ * gated on `editorExperiment('platform_synced_block', true)` AND
+ * `isInsideSyncBlock` AND `fg('platform_synced_block_patch_9')`.
+ *
+ * Shared between `renderer/src/react/nodes/table.tsx` and
+ * `renderer/src/react/nodes/tableNew.tsx` so the two stay in sync.
+ */
+var TableFakeBorders = function TableFakeBorders(_ref2) {
+  var isNumberColumnEnabled = _ref2.isNumberColumnEnabled;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.TableSharedCssClassName.TABLE_LEFT_BORDER,
+    "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+    "data-testid": "table-left-border"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER,
+    "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+    "data-testid": "table-right-border"
+  }));
+};
+
+/**
+ * Reads `nestedRendererType` from RendererContext and renders the fake left/right
+ * borders only when the current renderer is the nested renderer for a reference
+ * synced block.
+ */
+var RefSyncBlockFakeBorders = exports.RefSyncBlockFakeBorders = function RefSyncBlockFakeBorders(_ref3) {
+  var isNumberColumnEnabled = _ref3.isNumberColumnEnabled;
+  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
+    nestedRendererType = _useRendererContext.nestedRendererType;
+  var isInsideOfRefSyncBlock = nestedRendererType === 'syncedBlock';
+  if (!isInsideOfRefSyncBlock || !(0, _experiments.editorExperiment)('platform_synced_block', true) || !(0, _platformFeatureFlags.fg)('platform_synced_block_patch_9')) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(TableFakeBorders, {
+    isNumberColumnEnabled: isNumberColumnEnabled
+  });
+};
+
 /**
  * TableContainer renders tables using only CSS-based rules
  */
@@ -565,6 +609,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
+      }), /*#__PURE__*/_react.default.createElement(RefSyncBlockFakeBorders, {
+        isNumberColumnEnabled: isNumberColumnEnabled
       })));
     }
   }]);

package/dist/cjs/ui/Renderer/RendererStyleContainer.js

@@ -1932,6 +1932,41 @@ var scaledDenseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _
   height: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
   width: "".concat(_emoji.defaultDenseEmojiHeight, "px")
 }));
+
+// this is gated behind `platform_editor_emojis_in_renderer_smart_links`
+var scaledDenseEmojiStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
+  height: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
+  minHeight: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
+  minWidth: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
+  maxHeight: "".concat(_emoji.denseEmojiHeightH1, "px"),
+  maxWidth: "".concat(_emoji.denseEmojiHeightH1, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  img: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain'
+  }
+}), "h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.denseEmojiHeightH1, "px"),
+  width: "".concat(_emoji.denseEmojiHeightH1, "px")
+}), "h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.denseEmojiHeightH2, "px"),
+  width: "".concat(_emoji.denseEmojiHeightH2, "px")
+}), "h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.denseEmojiHeightH3, "px"),
+  width: "".concat(_emoji.denseEmojiHeightH3, "px")
+}), "h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.denseEmojiHeightH4, "px"),
+  width: "".concat(_emoji.denseEmojiHeightH4, "px")
+}), ":is(h5, h6, p) :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
+  width: "".concat(_emoji.defaultDenseEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  minHeight: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
+  minWidth: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
+  height: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
+  width: "".concat(_emoji.defaultInlineEmojiHeight, "px")
+}));
 var scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "".concat(_emoji.defaultEmojiHeight, "px"),
   minHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
@@ -1960,6 +1995,41 @@ var scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defin
   height: "".concat(_emoji.defaultEmojiHeight, "px"),
   width: "".concat(_emoji.defaultEmojiHeight, "px")
 }));
+
+// this is gated behind `platform_editor_emojis_in_renderer_smart_links`
+var scaledEmojiStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
+  height: "".concat(_emoji.defaultEmojiHeight, "px"),
+  minHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
+  minWidth: "".concat(_emoji.defaultEmojiHeight, "px"),
+  maxHeight: "".concat(_emoji.scaledEmojiHeightH1, "px"),
+  maxWidth: "".concat(_emoji.scaledEmojiHeightH1, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  img: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain'
+  }
+}), "h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.scaledEmojiHeightH1, "px"),
+  width: "".concat(_emoji.scaledEmojiHeightH1, "px")
+}), "h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.scaledEmojiHeightH2, "px"),
+  width: "".concat(_emoji.scaledEmojiHeightH2, "px")
+}), "h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.scaledEmojiHeightH3, "px"),
+  width: "".concat(_emoji.scaledEmojiHeightH3, "px")
+}), "h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.scaledEmojiHeightH4, "px"),
+  width: "".concat(_emoji.scaledEmojiHeightH4, "px")
+}), ":is(h5, h6, p) :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(_emoji.defaultEmojiHeight, "px"),
+  width: "".concat(_emoji.defaultEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  minHeight: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
+  minWidth: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
+  height: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
+  width: "".concat(_emoji.defaultInlineEmojiHeight, "px")
+}));
 var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
   width: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
@@ -2008,6 +2078,37 @@ var syncBlockRendererStyles = (0, _react.css)({
   maxWidth: 'none',
   padding: 0
 });
+
+/**
+ * Fake left/right table borders.
+ *
+ * Adapted from the editor-plugin-table behavior (see editor-common's
+ * `tableSharedStyle()` in `editor-common/src/styles/shared/table.ts`). The
+ * visible vertical edges of the table are painted by these absolutely-positioned
+ * 1px divs that live inside the (non-scrolling) TABLE_CONTAINER, while the real
+ * <table> left/right borders are made `transparent`. Because the divs are not
+ * inside the horizontally scrolling TABLE_NODE_WRAPPER, they remain visible
+ * regardless of scroll position — fixing the missing right border when an
+ * overflowing table inside a reference synced block is scrolled all the way to
+ * the left.
+ *
+ * The `height` formula adjusted for table in renderer
+ */
+var tableFakeBorderStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t.").concat(_styles.TableSharedCssClassName.TABLE_LEFT_BORDER), {
+  display: 'block',
+  width: '1px',
+  height: "calc(100% - ".concat("var(--ds-space-300, 24px)", " - ", "var(--ds-space-250, 20px)", ")"),
+  background: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
+  position: 'absolute',
+  top: "var(--ds-space-300, 24px)"
+}), ".".concat(_styles.TableSharedCssClassName.TABLE_RIGHT_BORDER), {
+  right: 0
+}), ".".concat(_styles.TableSharedCssClassName.TABLE_LEFT_BORDER, ",\n\t\t.").concat(_styles.TableSharedCssClassName.TABLE_LEFT_BORDER, "[data-with-numbered-table='true']"), {
+  left: 0
+})), ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  borderLeftColor: 'transparent',
+  borderRightColor: 'transparent'
+}));
 var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
@@ -2075,7 +2176,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // this should be placed after baseOtherStyles
     (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') && tableFakeBorderStyles, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "130.2.7";
+var packageVersion = "130.2.9";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/table.js

@@ -18,7 +18,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance, isMaxWidthAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
-import { TableProcessorWithContainerStyles } from './tableNew';
+import { TableProcessorWithContainerStyles, RefSyncBlockFakeBorders } from './tableNew';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isContentModeSupported } from './table/content-mode';
@@ -137,8 +137,8 @@ export const tableCanBeSticky = (node, children
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**
- *
- */
+*
+*/
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class TableContainer extends React.Component {
@@ -564,6 +564,8 @@ export class TableContainer extends React.Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
       "data-testid": "sticky-scrollbar-sentinel-bottom"
+    }), /*#__PURE__*/React.createElement(RefSyncBlockFakeBorders, {
+      isNumberColumnEnabled: isNumberColumnEnabled
     })));
   }
 }

package/dist/es2019/react/nodes/tableNew.js

@@ -14,6 +14,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
+import { useRendererContext } from '../../renderer-context';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isContentModeSupported } from './table/content-mode';
@@ -114,6 +115,50 @@ export const tableCanBeSticky = (node, children
 ) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
+/**
+ * Fake left/right borders rendered as direct children of TABLE_CONTAINER
+ * (the non-scrolling parent of the horizontally scrolling TABLE_NODE_WRAPPER).
+ *
+ * The visible styling for these divs lives in `tableFakeBorderStyles`
+ * (`renderer/src/ui/Renderer/RendererStyleContainer.tsx`), which is itself
+ * gated on `editorExperiment('platform_synced_block', true)` AND
+ * `isInsideSyncBlock` AND `fg('platform_synced_block_patch_9')`.
+ *
+ * Shared between `renderer/src/react/nodes/table.tsx` and
+ * `renderer/src/react/nodes/tableNew.tsx` so the two stay in sync.
+ */
+const TableFakeBorders = ({
+  isNumberColumnEnabled
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  className: TableSharedCssClassName.TABLE_LEFT_BORDER,
+  "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+  "data-testid": "table-left-border"
+}), /*#__PURE__*/React.createElement("div", {
+  className: TableSharedCssClassName.TABLE_RIGHT_BORDER,
+  "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+  "data-testid": "table-right-border"
+}));
+
+/**
+ * Reads `nestedRendererType` from RendererContext and renders the fake left/right
+ * borders only when the current renderer is the nested renderer for a reference
+ * synced block.
+ */
+export const RefSyncBlockFakeBorders = ({
+  isNumberColumnEnabled
+}) => {
+  const {
+    nestedRendererType
+  } = useRendererContext();
+  const isInsideOfRefSyncBlock = nestedRendererType === 'syncedBlock';
+  if (!isInsideOfRefSyncBlock || !editorExperiment('platform_synced_block', true) || !fg('platform_synced_block_patch_9')) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TableFakeBorders, {
+    isNumberColumnEnabled: isNumberColumnEnabled
+  });
+};
+
 /**
  * TableContainer renders tables using only CSS-based rules
  */
@@ -513,6 +558,8 @@ export class TableContainer extends React.Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
       "data-testid": "sticky-scrollbar-sentinel-bottom"
+    }), /*#__PURE__*/React.createElement(RefSyncBlockFakeBorders, {
+      isNumberColumnEnabled: isNumberColumnEnabled
     })));
   }
 }

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -23,7 +23,7 @@ import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { LightWeightCodeBlockCssClassName } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
-import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
+import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, defaultInlineEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 const wrappedMediaBreakoutPoint = 410;
@@ -2458,6 +2458,50 @@ const scaledDenseEmojiStyles = css({
     width: `${defaultDenseEmojiHeight}px`
   }
 });
+
+// this is gated behind `platform_editor_emojis_in_renderer_smart_links`
+const scaledDenseEmojiStylesNew = css({
+  [`.${EmojiSharedCssClassName.EMOJI_IMAGE}`]: {
+    height: `${defaultDenseEmojiHeight}px`,
+    minHeight: `${defaultDenseEmojiHeight}px`,
+    minWidth: `${defaultDenseEmojiHeight}px`,
+    maxHeight: `${denseEmojiHeightH1}px`,
+    maxWidth: `${denseEmojiHeightH1}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    img: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain'
+    }
+  },
+  [`h1 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${denseEmojiHeightH1}px`,
+    width: `${denseEmojiHeightH1}px`
+  },
+  [`h2 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${denseEmojiHeightH2}px`,
+    width: `${denseEmojiHeightH2}px`
+  },
+  [`h3 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${denseEmojiHeightH3}px`,
+    width: `${denseEmojiHeightH3}px`
+  },
+  [`h4 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${denseEmojiHeightH4}px`,
+    width: `${denseEmojiHeightH4}px`
+  },
+  [`:is(h5, h6, p) :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${defaultDenseEmojiHeight}px`,
+    width: `${defaultDenseEmojiHeight}px`
+  },
+  // sync with platform/packages/linking-platform/smart-card/src/view/InlineCard/IconAndTitleLayout/index.tsx
+  [`[data-testid="icon-wrapper"] :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    minHeight: `${defaultInlineEmojiHeight}px`,
+    minWidth: `${defaultInlineEmojiHeight}px`,
+    height: `${defaultInlineEmojiHeight}px`,
+    width: `${defaultInlineEmojiHeight}px`
+  }
+});
 const scaledEmojiStyles = css({
   [`.${EmojiSharedCssClassName.EMOJI_IMAGE}`]: {
     height: `${defaultEmojiHeight}px`,
@@ -2493,6 +2537,50 @@ const scaledEmojiStyles = css({
     width: `${defaultEmojiHeight}px`
   }
 });
+
+// this is gated behind `platform_editor_emojis_in_renderer_smart_links`
+const scaledEmojiStylesNew = css({
+  [`.${EmojiSharedCssClassName.EMOJI_IMAGE}`]: {
+    height: `${defaultEmojiHeight}px`,
+    minHeight: `${defaultEmojiHeight}px`,
+    minWidth: `${defaultEmojiHeight}px`,
+    maxHeight: `${scaledEmojiHeightH1}px`,
+    maxWidth: `${scaledEmojiHeightH1}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    img: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain'
+    }
+  },
+  [`h1 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${scaledEmojiHeightH1}px`,
+    width: `${scaledEmojiHeightH1}px`
+  },
+  [`h2 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${scaledEmojiHeightH2}px`,
+    width: `${scaledEmojiHeightH2}px`
+  },
+  [`h3 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${scaledEmojiHeightH3}px`,
+    width: `${scaledEmojiHeightH3}px`
+  },
+  [`h4 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${scaledEmojiHeightH4}px`,
+    width: `${scaledEmojiHeightH4}px`
+  },
+  [`:is(h5, h6, p) :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    height: `${defaultEmojiHeight}px`,
+    width: `${defaultEmojiHeight}px`
+  },
+  // sync with platform/packages/linking-platform/smart-card/src/view/InlineCard/IconAndTitleLayout/index.tsx
+  [`[data-testid="icon-wrapper"] :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
+    minHeight: `${defaultInlineEmojiHeight}px`,
+    minWidth: `${defaultInlineEmojiHeight}px`,
+    height: `${defaultInlineEmojiHeight}px`,
+    width: `${defaultInlineEmojiHeight}px`
+  }
+});
 const denseStyles = css({
   // Scale emoji size based on base font size
   // Default: 20px emoji at 16px base font
@@ -2552,6 +2640,55 @@ const syncBlockRendererStyles = css({
   maxWidth: 'none',
   padding: 0
 });
+
+/**
+ * Fake left/right table borders.
+ *
+ * Adapted from the editor-plugin-table behavior (see editor-common's
+ * `tableSharedStyle()` in `editor-common/src/styles/shared/table.ts`). The
+ * visible vertical edges of the table are painted by these absolutely-positioned
+ * 1px divs that live inside the (non-scrolling) TABLE_CONTAINER, while the real
+ * <table> left/right borders are made `transparent`. Because the divs are not
+ * inside the horizontally scrolling TABLE_NODE_WRAPPER, they remain visible
+ * regardless of scroll position — fixing the missing right border when an
+ * overflowing table inside a reference synced block is scrolled all the way to
+ * the left.
+ *
+ * The `height` formula adjusted for table in renderer
+ */
+const tableFakeBorderStyles = css({
+  [`.${TableSharedCssClassName.TABLE_CONTAINER}`]: {
+    // Mirror the editor's tableSharedStyle() rule from
+    // `editor-common/src/styles/shared/table.ts` (lines 142-150). The fake
+    // borders are absolutely positioned inside pm-table-container;
+    // their height is adjusted for renderer to `100% - space.300 - space.250` so the border runs from
+    // the top of the table to the bottom of the container
+    [`.${TableSharedCssClassName.TABLE_RIGHT_BORDER},
+		.${TableSharedCssClassName.TABLE_LEFT_BORDER}`]: {
+      display: 'block',
+      width: '1px',
+      height: `calc(100% - ${"var(--ds-space-300, 24px)"} - ${"var(--ds-space-250, 20px)"})`,
+      background: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
+      position: 'absolute',
+      top: "var(--ds-space-300, 24px)"
+    },
+    [`.${TableSharedCssClassName.TABLE_RIGHT_BORDER}`]: {
+      right: 0
+    },
+    [`.${TableSharedCssClassName.TABLE_LEFT_BORDER},
+		.${TableSharedCssClassName.TABLE_LEFT_BORDER}[data-with-numbered-table='true']`]: {
+      left: 0
+    }
+  },
+  // Make the real left/right table borders transparent so the fake border
+  // divs above are the only painted vertical edges. Top/bottom borders on the
+  // <table> element remain visible.
+  [`.${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table,
+	.${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent'
+  }
+});
 const syncBlockStyles = css({
   [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
     borderRadius: "var(--ds-radius-small, 3px)",
@@ -2629,7 +2766,7 @@ export const RendererStyleContainer = props => {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') && tableFakeBorderStyles, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "130.2.7";
+const packageVersion = "130.2.9";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/table.js

@@ -31,7 +31,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance, isMaxWidthAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
-import { TableProcessorWithContainerStyles } from './tableNew';
+import { TableProcessorWithContainerStyles, RefSyncBlockFakeBorders } from './tableNew';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isContentModeSupported } from './table/content-mode';
@@ -161,8 +161,8 @@ export var tableCanBeSticky = function tableCanBeSticky(node, children
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**
- *
- */
+*
+*/
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var TableContainer = /*#__PURE__*/function (_React$Component) {
@@ -614,6 +614,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
+      }), /*#__PURE__*/React.createElement(RefSyncBlockFakeBorders, {
+        isNumberColumnEnabled: isNumberColumnEnabled
       })));
     }
   }]);

package/dist/esm/react/nodes/tableNew.js

@@ -26,6 +26,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
+import { useRendererContext } from '../../renderer-context';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isContentModeSupported } from './table/content-mode';
@@ -139,6 +140,49 @@ export var tableCanBeSticky = function tableCanBeSticky(node, children
 ) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
+/**
+ * Fake left/right borders rendered as direct children of TABLE_CONTAINER
+ * (the non-scrolling parent of the horizontally scrolling TABLE_NODE_WRAPPER).
+ *
+ * The visible styling for these divs lives in `tableFakeBorderStyles`
+ * (`renderer/src/ui/Renderer/RendererStyleContainer.tsx`), which is itself
+ * gated on `editorExperiment('platform_synced_block', true)` AND
+ * `isInsideSyncBlock` AND `fg('platform_synced_block_patch_9')`.
+ *
+ * Shared between `renderer/src/react/nodes/table.tsx` and
+ * `renderer/src/react/nodes/tableNew.tsx` so the two stay in sync.
+ */
+var TableFakeBorders = function TableFakeBorders(_ref2) {
+  var isNumberColumnEnabled = _ref2.isNumberColumnEnabled;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: TableSharedCssClassName.TABLE_LEFT_BORDER,
+    "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+    "data-testid": "table-left-border"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: TableSharedCssClassName.TABLE_RIGHT_BORDER,
+    "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+    "data-testid": "table-right-border"
+  }));
+};
+
+/**
+ * Reads `nestedRendererType` from RendererContext and renders the fake left/right
+ * borders only when the current renderer is the nested renderer for a reference
+ * synced block.
+ */
+export var RefSyncBlockFakeBorders = function RefSyncBlockFakeBorders(_ref3) {
+  var isNumberColumnEnabled = _ref3.isNumberColumnEnabled;
+  var _useRendererContext = useRendererContext(),
+    nestedRendererType = _useRendererContext.nestedRendererType;
+  var isInsideOfRefSyncBlock = nestedRendererType === 'syncedBlock';
+  if (!isInsideOfRefSyncBlock || !editorExperiment('platform_synced_block', true) || !fg('platform_synced_block_patch_9')) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TableFakeBorders, {
+    isNumberColumnEnabled: isNumberColumnEnabled
+  });
+};
+
 /**
  * TableContainer renders tables using only CSS-based rules
  */
@@ -559,6 +603,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
+      }), /*#__PURE__*/React.createElement(RefSyncBlockFakeBorders, {
+        isNumberColumnEnabled: isNumberColumnEnabled
       })));
     }
   }]);

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -27,7 +27,7 @@ import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { LightWeightCodeBlockCssClassName } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
-import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
+import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, defaultInlineEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 var wrappedMediaBreakoutPoint = 410;
@@ -1925,6 +1925,41 @@ var scaledDenseEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty
   height: "".concat(defaultDenseEmojiHeight, "px"),
   width: "".concat(defaultDenseEmojiHeight, "px")
 }));
+
+// this is gated behind `platform_editor_emojis_in_renderer_smart_links`
+var scaledDenseEmojiStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
+  height: "".concat(defaultDenseEmojiHeight, "px"),
+  minHeight: "".concat(defaultDenseEmojiHeight, "px"),
+  minWidth: "".concat(defaultDenseEmojiHeight, "px"),
+  maxHeight: "".concat(denseEmojiHeightH1, "px"),
+  maxWidth: "".concat(denseEmojiHeightH1, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  img: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain'
+  }
+}), "h1 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(denseEmojiHeightH1, "px"),
+  width: "".concat(denseEmojiHeightH1, "px")
+}), "h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(denseEmojiHeightH2, "px"),
+  width: "".concat(denseEmojiHeightH2, "px")
+}), "h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(denseEmojiHeightH3, "px"),
+  width: "".concat(denseEmojiHeightH3, "px")
+}), "h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(denseEmojiHeightH4, "px"),
+  width: "".concat(denseEmojiHeightH4, "px")
+}), ":is(h5, h6, p) :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(defaultDenseEmojiHeight, "px"),
+  width: "".concat(defaultDenseEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  minHeight: "".concat(defaultInlineEmojiHeight, "px"),
+  minWidth: "".concat(defaultInlineEmojiHeight, "px"),
+  height: "".concat(defaultInlineEmojiHeight, "px"),
+  width: "".concat(defaultInlineEmojiHeight, "px")
+}));
 var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "".concat(defaultEmojiHeight, "px"),
   minHeight: "".concat(defaultEmojiHeight, "px"),
@@ -1953,6 +1988,41 @@ var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_def
   height: "".concat(defaultEmojiHeight, "px"),
   width: "".concat(defaultEmojiHeight, "px")
 }));
+
+// this is gated behind `platform_editor_emojis_in_renderer_smart_links`
+var scaledEmojiStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
+  height: "".concat(defaultEmojiHeight, "px"),
+  minHeight: "".concat(defaultEmojiHeight, "px"),
+  minWidth: "".concat(defaultEmojiHeight, "px"),
+  maxHeight: "".concat(scaledEmojiHeightH1, "px"),
+  maxWidth: "".concat(scaledEmojiHeightH1, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  img: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain'
+  }
+}), "h1 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(scaledEmojiHeightH1, "px"),
+  width: "".concat(scaledEmojiHeightH1, "px")
+}), "h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(scaledEmojiHeightH2, "px"),
+  width: "".concat(scaledEmojiHeightH2, "px")
+}), "h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(scaledEmojiHeightH3, "px"),
+  width: "".concat(scaledEmojiHeightH3, "px")
+}), "h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(scaledEmojiHeightH4, "px"),
+  width: "".concat(scaledEmojiHeightH4, "px")
+}), ":is(h5, h6, p) :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  height: "".concat(defaultEmojiHeight, "px"),
+  width: "".concat(defaultEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
+  minHeight: "".concat(defaultInlineEmojiHeight, "px"),
+  minWidth: "".concat(defaultInlineEmojiHeight, "px"),
+  height: "".concat(defaultInlineEmojiHeight, "px"),
+  width: "".concat(defaultInlineEmojiHeight, "px")
+}));
 var denseStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
   width: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
@@ -2001,6 +2071,37 @@ var syncBlockRendererStyles = css({
   maxWidth: 'none',
   padding: 0
 });
+
+/**
+ * Fake left/right table borders.
+ *
+ * Adapted from the editor-plugin-table behavior (see editor-common's
+ * `tableSharedStyle()` in `editor-common/src/styles/shared/table.ts`). The
+ * visible vertical edges of the table are painted by these absolutely-positioned
+ * 1px divs that live inside the (non-scrolling) TABLE_CONTAINER, while the real
+ * <table> left/right borders are made `transparent`. Because the divs are not
+ * inside the horizontally scrolling TABLE_NODE_WRAPPER, they remain visible
+ * regardless of scroll position — fixing the missing right border when an
+ * overflowing table inside a reference synced block is scrolled all the way to
+ * the left.
+ *
+ * The `height` formula adjusted for table in renderer
+ */
+var tableFakeBorderStyles = css(_defineProperty(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty(_defineProperty(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER), {
+  display: 'block',
+  width: '1px',
+  height: "calc(100% - ".concat("var(--ds-space-300, 24px)", " - ", "var(--ds-space-250, 20px)", ")"),
+  background: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
+  position: 'absolute',
+  top: "var(--ds-space-300, 24px)"
+}), ".".concat(TableSharedCssClassName.TABLE_RIGHT_BORDER), {
+  right: 0
+}), ".".concat(TableSharedCssClassName.TABLE_LEFT_BORDER, ",\n\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER, "[data-with-numbered-table='true']"), {
+  left: 0
+})), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  borderLeftColor: 'transparent',
+  borderRightColor: 'transparent'
+}));
 var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
@@ -2068,7 +2169,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') && tableFakeBorderStyles, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "130.2.7";
+var packageVersion = "130.2.9";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/nodes/table.d.ts

@@ -42,8 +42,7 @@ export interface TableState {
     headerRowHeight: number;
     stickyMode: StickyMode;
     wrapperWidth: number;
-}
-/**
+} /**
  *
  */
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {

package/dist/types/react/nodes/tableNew.d.ts

@@ -42,6 +42,14 @@ export interface TableState {
     stickyMode: StickyMode;
     wrapperWidth: number;
 }
+/**
+ * Reads `nestedRendererType` from RendererContext and renders the fake left/right
+ * borders only when the current renderer is the nested renderer for a reference
+ * synced block.
+ */
+export declare const RefSyncBlockFakeBorders: ({ isNumberColumnEnabled, }: {
+    isNumberColumnEnabled: boolean;
+}) => React.JSX.Element | null;
 /**
  * TableContainer renders tables using only CSS-based rules
  */

package/dist/types-ts4.5/react/nodes/table.d.ts

@@ -42,8 +42,7 @@ export interface TableState {
     headerRowHeight: number;
     stickyMode: StickyMode;
     wrapperWidth: number;
-}
-/**
+} /**
  *
  */
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {

package/dist/types-ts4.5/react/nodes/tableNew.d.ts

@@ -42,6 +42,14 @@ export interface TableState {
     stickyMode: StickyMode;
     wrapperWidth: number;
 }
+/**
+ * Reads `nestedRendererType` from RendererContext and renders the fake left/right
+ * borders only when the current renderer is the nested renderer for a reference
+ * synced block.
+ */
+export declare const RefSyncBlockFakeBorders: ({ isNumberColumnEnabled, }: {
+    isNumberColumnEnabled: boolean;
+}) => React.JSX.Element | null;
 /**
  * TableContainer renders tables using only CSS-based rules
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "130.2.8",
+	"version": "130.2.10",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.5.0",
+		"@atlaskit/adf-schema": "^52.6.0",
 		"@atlaskit/adf-utils": "^19.27.0",
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.10.0",
 		"@atlaskit/analytics-listeners": "^10.0.0",
@@ -44,14 +44,14 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-smart-link-draggable": "^0.5.0",
-		"@atlaskit/emoji": "^70.1.0",
+		"@atlaskit/emoji": "^70.2.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
 		"@atlaskit/icon": "^34.3.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-datasource": "^5.2.0",
 		"@atlaskit/link-extractors": "^2.4.0",
 		"@atlaskit/linking-common": "^9.11.0",
-		"@atlaskit/media-card": "^80.1.0",
+		"@atlaskit/media-card": "^80.2.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
 		"@atlaskit/media-common": "^13.0.0",
@@ -66,9 +66,9 @@
 		"@atlaskit/status": "^4.0.0",
 		"@atlaskit/task-decision": "^20.0.0",
 		"@atlaskit/theme": "^23.1.0",
-		"@atlaskit/tmp-editor-statsig": "^66.0.0",
+		"@atlaskit/tmp-editor-statsig": "^68.0.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^21.1.0",
+		"@atlaskit/tooltip": "^21.2.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -79,7 +79,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.7.0",
+		"@atlaskit/editor-common": "^114.9.0",
 		"@atlaskit/link-provider": "^4.3.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -97,8 +97,8 @@
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^41.0.0",
 		"@atlaskit/mention": "^25.0.0",
-		"@atlaskit/modal-dialog": "^14.17.0",
-		"@atlaskit/navigation-system": "^8.1.0",
+		"@atlaskit/modal-dialog": "^14.18.0",
+		"@atlaskit/navigation-system": "^8.2.0",
 		"@atlaskit/profilecard": "^25.1.0",
 		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/util-data-test": "^18.5.0",