@atlaskit/renderer 128.8.0 → 128.9.1

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth, akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -21,7 +22,8 @@ const isTableColumnResized = columnWidths => {
 const fixColumnWidth = ({
   columnWidth,
   zeroWidthColumnsCount,
-  scaleDownPercent
+  scaleDownPercent,
+  skipMinWidth
 }) => {
   if (columnWidth === 0) {
     return columnWidth;
@@ -30,11 +32,14 @@ const fixColumnWidth = ({
   // If the tables total width (including no zero widths col or cols without width) is less than the current layout
   // We scale up the columns to meet the minimum of the table layout.
   if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
-    return Math.max(Math.floor((1 - scaleDownPercent) * columnWidth), tableCellMinWidth);
+    const scaled = Math.floor((1 - scaleDownPercent) * columnWidth);
+    return skipMinWidth ? scaled : Math.max(scaled, tableCellMinWidth);
   }
-  return Math.max(
-  // We need to take tableCellBorderWidth, to avoid unnecessary overflow.
-  columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
+  const adjusted = columnWidth - tableCellBorderWidth;
+  if (skipMinWidth) {
+    return adjusted;
+  }
+  return Math.max(adjusted, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
 const calcScalePercent = ({
   renderWidth,
@@ -50,6 +55,80 @@ const calcScalePercent = ({
   return diffPercent < maxScale ? isNumberColumnEnabled ? 1 - numColumnScalePercent : diffPercent : maxScale;
 };
 export const colWidthSum = columnWidths => columnWidths.reduce((prev, curr) => curr + prev, 0);
+
+/**
+ * Returns the data-column available width: total width minus the fixed number column if enabled.
+ */
+const getDataColumnWidth = (totalWidth, isNumberColumnEnabled) => isNumberColumnEnabled ? totalWidth - akEditorTableNumberColumnWidth : totalWidth;
+
+/**
+ * Scales column widths proportionally to fit within availableWidth, matching the editor's
+ * scaleTableTo(): floors each column to the nearest pixel, then redistributes any rounding
+ * remainder to the first column that can absorb it without going below tableCellMinWidth.
+ */
+const scaleColumnsToWidth = (columnWidths, availableWidth) => {
+  const rawTotalWidth = columnWidths.reduce((sum, w) => sum + w, 0);
+  const scaleFactor = availableWidth / rawTotalWidth;
+  const scaledWidths = columnWidths.map(colWidth => Math.max(Math.floor(colWidth * scaleFactor), tableCellMinWidth));
+  const totalScaled = scaledWidths.reduce((sum, w) => sum + w, 0);
+  const diff = availableWidth - totalScaled;
+  if (diff !== 0 && Math.abs(diff) < tableCellMinWidth) {
+    for (let i = 0; i < scaledWidths.length; i++) {
+      if (scaledWidths[i] + diff > tableCellMinWidth) {
+        scaledWidths[i] += diff;
+        break;
+      }
+    }
+  }
+  return scaledWidths.map(width => ({
+    width: `${width}px`
+  }));
+};
+
+/**
+ * Computes column widths for tables inside sync blocks, matching the editor's scaleTableTo() exactly.
+ * Returns null if the flag is off or not inside a sync block.
+ *
+ * For nested tables (isInsideOfTable=true, gated by platform_synced_block_patch_9), we use
+ * getTableContainerWidth(tableNode) as the reference — the width the editor saved, which already
+ * accounts for the parent cell's available space (colwidth minus tableCellPadding * 2).
+ * This matches bodiedSyncBlock where isRendererNested=false, so renderScaleDownColgroup uses
+ * getTableContainerWidth(tableNode). For syncBlock the nested renderer has isRendererNested=true,
+ * which incorrectly overrides tableContainerWidth with renderWidth (the full container), causing
+ * overflow by 2 * tableCellPadding (16px).
+ */
+const renderSyncBlockColgroup = ({
+  isInsideOfSyncBlock,
+  isInsideOfTable,
+  tableNode,
+  columnWidths,
+  isNumberColumnEnabled,
+  renderWidth: renderWidthProp,
+  contextWidth
+}) => {
+  if (!isInsideOfSyncBlock || !fg('platform_synced_block_patch_9')) {
+    return null;
+  }
+  const rawTotalWidth = columnWidths.reduce((sum, w) => sum + w, 0);
+  if (isInsideOfTable) {
+    return null;
+  }
+
+  // SSR / first render before WidthContext measures. Output % of original ADF proportions so
+  // columns are stable — the CSS container query (100cqw) handles actual scaling width.
+  if (contextWidth <= 0 && renderWidthProp <= 0) {
+    const fullTableWidth = isNumberColumnEnabled ? rawTotalWidth + akEditorTableNumberColumnWidth : rawTotalWidth;
+    return columnWidths.map(colWidth => ({
+      width: `${colWidth / fullTableWidth * 100}%`
+    }));
+  }
+
+  // contextWidth measures the sync block content area. Subtract 2 to match the editor's
+  // getParentNodeWidth() border offset. Fall back to renderWidthProp for the non-CSS path.
+  const effectiveRenderWidth = contextWidth > 0 ? contextWidth - 2 : renderWidthProp;
+  const availableWidth = getDataColumnWidth(effectiveRenderWidth, isNumberColumnEnabled);
+  return scaleColumnsToWidth(columnWidths, availableWidth);
+};
 const renderScaleDownColgroup = props => {
   var _props$tableNode;
   const {
@@ -64,8 +143,10 @@ const renderScaleDownColgroup = props => {
     isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled,
     allowTableResizing,
-    isTopLevelRenderer
+    isTopLevelRenderer,
+    isInsideOfSyncBlock
   } = props;
+  const skipMinWidth = fg('platform_synced_block_patch_9') && !!(isInsideOfTable && isInsideOfSyncBlock);
   if (!columnWidths || columnWidths.every(width => width === 0) && fg('platform_editor_numbered_column_in_include')) {
     return [];
   }
@@ -169,7 +250,8 @@ const renderScaleDownColgroup = props => {
     const fixedColWidths = targetWidths.map(width => fixColumnWidth({
       columnWidth: width,
       zeroWidthColumnsCount,
-      scaleDownPercent
+      scaleDownPercent,
+      skipMinWidth
     }) || cellMinWidth);
     const sumFixedColumnWidths = colWidthSum(fixedColWidths);
     return fixedColWidths.map(colWidth => {
@@ -195,7 +277,8 @@ const renderScaleDownColgroup = props => {
     const width = fixColumnWidth({
       columnWidth: colWidth,
       zeroWidthColumnsCount,
-      scaleDownPercent
+      scaleDownPercent,
+      skipMinWidth
     }) || cellMinWidth;
     const style = width ? {
       width: `${width}px`
@@ -204,22 +287,43 @@ const renderScaleDownColgroup = props => {
   });
 };
 export const Colgroup = props => {
-  var _ref;
+  var _ref, _renderSyncBlockColgr;
   const {
-    isTopLevelRenderer
+    isTopLevelRenderer,
+    nestedRendererType
   } = useRendererContext();
   const {
     columnWidths,
     isNumberColumnEnabled
   } = props;
+  const {
+    width: contextWidth
+  } = useContext(WidthContext);
   const flags = useFeatureFlags();
   if (!columnWidths) {
     return null;
   }
   const isTableFixedColumnWidthsOptionEnabled = (_ref = fg('platform_editor_table_fixed_column_width_prop') ? props.allowFixedColumnWidthOption : flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) !== null && _ref !== void 0 ? _ref : false;
-  const colStyles = renderScaleDownColgroup({
+
+  // For referenced sync blocks, nestedRendererType='syncedBlock' is set via RendererContextProvider
+  // in AKRendererWrapper. ReactSerializer is a class and cannot read React context, so we detect
+  // it here in the Colgroup component via useRendererContext() instead of prop-drilling.
+  const isInsideOfSyncBlock = nestedRendererType === 'syncedBlock';
+
+  // renderSyncBlockColgroup returns null when not applicable (flag off, SSR, not a sync block),
+  // in which case ?? falls back to the standard renderScaleDownColgroup path.
+  const colStyles = (_renderSyncBlockColgr = renderSyncBlockColgroup({
+    isInsideOfSyncBlock,
+    isInsideOfTable: !!props.isInsideOfTable,
+    tableNode: props.tableNode,
+    columnWidths,
+    isNumberColumnEnabled: !!isNumberColumnEnabled,
+    renderWidth: props.renderWidth,
+    contextWidth
+  })) !== null && _renderSyncBlockColgr !== void 0 ? _renderSyncBlockColgr : renderScaleDownColgroup({
     ...props,
     isTopLevelRenderer,
+    isInsideOfSyncBlock,
     isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {

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

@@ -299,6 +299,14 @@ const headingAnchorStyles = css({
     }
   }
 });
+const headingAnchorButtonFocusVisibleStyles = css({
+  [`.${HeadingAnchorWrapperClassName}`]: {
+    'button:focus-visible': {
+      outline: `2px solid ${"var(--ds-border-focused, #4688EC)"}`,
+      borderRadius: "var(--ds-radius-small, 3px)"
+    }
+  }
+});
 const akEditorBreakpointForSmallDevice = '1266px';
 const responsiveBreakoutWidth = css({
   '--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - ${akEditorGutterPadding}px * 2)`,
@@ -849,11 +857,13 @@ const listItemHiddenMarkerStyles = css({
   'li:has(> ul:only-child) > ul, li:has(> ol:only-child) > ol': {
     marginTop: 0
   },
-  // Collapse wrapper task items (empty task items followed by a sibling nested task list)
-  // Only hides empty task items that are actual wrappers, not regular empty task items
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-  'div[data-task-local-id]:has([data-component="content"]:empty):has(+ div[data-node-type="actionList"])': {
-    display: 'none'
+  // Remove top margin from nested taskLists not preceded by a sibling taskItem
+  'div[data-task-list-local-id] > div[data-task-list-local-id]': {
+    marginTop: 0
+  },
+  // Restore margin when a nested taskList follows a taskItem
+  'div[data-task-local-id] + div[data-task-list-local-id]': {
+    marginTop: "var(--ds-space-050, 4px)"
   }
 });
 const indentationSharedStyles = css({
@@ -2033,6 +2043,7 @@ const rendererTableSortableColumnStyles = css({
           width: '100%',
           height: '100%',
           padding: `${tableCellPadding}px`,
+          // eslint-disable-next-line @atlaskit/design-system/use-tokens-shape
           borderWidth: '1.5px',
           borderStyle: 'solid',
           borderColor: `transparent`,
@@ -2514,6 +2525,11 @@ const denseStyles = css({
     }
   }
 });
+const syncBlockRendererStyles = css({
+  margin: 0,
+  maxWidth: 'none',
+  padding: 0
+});
 const syncBlockStyles = css({
   [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
     borderRadius: "var(--ds-radius-small, 3px)",
@@ -2553,7 +2569,8 @@ export const RendererStyleContainer = props => {
     useBlockRenderForCodeBlock,
     children,
     innerRef,
-    testId
+    testId,
+    isInsideSyncBlock
   } = props;
   const isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
   const isPreviewPanelResponsivenessOn = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
@@ -2582,7 +2599,7 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-small-text': editorUGCToken('editor.font.body.small')
       })
     },
-    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, expValEquals('platform_editor_flexible_list_schema', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, fg('ally_30945_accessibility_outline_fix') && headingAnchorButtonFocusVisibleStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, expValEquals('platform_editor_flexible_list_schema', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
@@ -2590,7 +2607,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, 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],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, 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],
     "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 = "128.7.2";
+const packageVersion = "128.9.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -187,9 +187,14 @@ export const RendererFunctionalComponent = props => {
     const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags);
     return {
       featureFlags: normalizedFeatureFlags,
-      isTopLevelRenderer: isTopLevelRenderer === undefined
+      isTopLevelRenderer: isTopLevelRenderer === undefined,
+      // Propagate nestedRendererType into the inner RendererContextProvider so that
+      // React components inside the renderer (e.g. Colgroup) can read it via
+      // useRendererContext(). Without this, the inner provider overwrites the outer
+      // AKRendererWrapper context and nestedRendererType becomes undefined.
+      nestedRendererType
     };
-  }, []);
+  }, [nestedRendererType]);
   const fireAnalyticsEventOld = useCallback(event => {
     const {
       createAnalyticsEvent
@@ -615,6 +620,9 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     return telepointer;
   };
   const initialUpdate = React.useRef(true);
+  const {
+    nestedRendererType
+  } = useRendererContext();
   useEffect(() => {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
@@ -710,7 +718,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
     allowAnnotations: props.allowAnnotations,
     allowTableResizing: allowTableResizing,
-    allowRendererContainerStyles: allowRendererContainerStyles
+    allowRendererContainerStyles: allowRendererContainerStyles,
+    isInsideSyncBlock: nestedRendererType === 'syncedBlock'
   }, children))));
 
   // We can only make the wrapper div query container when we have a known width.

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

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsx jsx
  */
 /* eslint-disable jsdoc/check-tag-names */
-import { Fragment, useState, useMemo } from 'react';
+import { Fragment, useState, useMemo, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useSmartCardContext } from '@atlaskit/link-provider';
@@ -21,6 +21,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -145,6 +146,7 @@ var InlineCard = function InlineCard(props) {
     onSetLinkTarget = props.onSetLinkTarget;
   var portal = usePortal(props);
   var cardContext = useSmartCardContext();
+  var provider = useProvider('cardProvider');
   var SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
 
   // Helper fn to conditionally wrap cards when suspense boundary is passed in via product
@@ -195,6 +197,21 @@ var InlineCard = function InlineCard(props) {
       throw err;
     }
   };
+  useEffect(function () {
+    if (expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true) && url) {
+      // Refresh cache in the background
+      provider === null || provider === void 0 || provider.then(function (providerInstance) {
+        var _refreshCache, _ref5;
+        (_refreshCache = (_ref5 = providerInstance).refreshCache) === null || _refreshCache === void 0 || _refreshCache.call(_ref5, {
+          // It's ok to cast any resourceUrl to inlineCard here, because only URL is important for the request.
+          type: 'inlineCard',
+          attrs: {
+            url: url
+          }
+        });
+      });
+    }
+  }, [provider, url]);
   var MaybeOverlay = cardContext !== null && cardContext !== void 0 && cardContext.value ? OverlayWithCardContext : HoverLinkOverlayNoop;
   if ((ssr || cardState && expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && !editorExperiment('platform_editor_preview_panel_linking_exp', true, {
     exposure: true

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

@@ -1,8 +1,9 @@
 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 React from 'react';
+import React, { useContext } from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth, akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -26,7 +27,8 @@ var isTableColumnResized = function isTableColumnResized(columnWidths) {
 var fixColumnWidth = function fixColumnWidth(_ref) {
   var columnWidth = _ref.columnWidth,
     zeroWidthColumnsCount = _ref.zeroWidthColumnsCount,
-    scaleDownPercent = _ref.scaleDownPercent;
+    scaleDownPercent = _ref.scaleDownPercent,
+    skipMinWidth = _ref.skipMinWidth;
   if (columnWidth === 0) {
     return columnWidth;
   }
@@ -34,11 +36,14 @@ var fixColumnWidth = function fixColumnWidth(_ref) {
   // If the tables total width (including no zero widths col or cols without width) is less than the current layout
   // We scale up the columns to meet the minimum of the table layout.
   if (zeroWidthColumnsCount === 0 && scaleDownPercent) {
-    return Math.max(Math.floor((1 - scaleDownPercent) * columnWidth), tableCellMinWidth);
+    var scaled = Math.floor((1 - scaleDownPercent) * columnWidth);
+    return skipMinWidth ? scaled : Math.max(scaled, tableCellMinWidth);
   }
-  return Math.max(
-  // We need to take tableCellBorderWidth, to avoid unnecessary overflow.
-  columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
+  var adjusted = columnWidth - tableCellBorderWidth;
+  if (skipMinWidth) {
+    return adjusted;
+  }
+  return Math.max(adjusted, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
 var calcScalePercent = function calcScalePercent(_ref2) {
   var renderWidth = _ref2.renderWidth,
@@ -57,6 +62,93 @@ export var colWidthSum = function colWidthSum(columnWidths) {
     return curr + prev;
   }, 0);
 };
+
+/**
+ * Returns the data-column available width: total width minus the fixed number column if enabled.
+ */
+var getDataColumnWidth = function getDataColumnWidth(totalWidth, isNumberColumnEnabled) {
+  return isNumberColumnEnabled ? totalWidth - akEditorTableNumberColumnWidth : totalWidth;
+};
+
+/**
+ * Scales column widths proportionally to fit within availableWidth, matching the editor's
+ * scaleTableTo(): floors each column to the nearest pixel, then redistributes any rounding
+ * remainder to the first column that can absorb it without going below tableCellMinWidth.
+ */
+var scaleColumnsToWidth = function scaleColumnsToWidth(columnWidths, availableWidth) {
+  var rawTotalWidth = columnWidths.reduce(function (sum, w) {
+    return sum + w;
+  }, 0);
+  var scaleFactor = availableWidth / rawTotalWidth;
+  var scaledWidths = columnWidths.map(function (colWidth) {
+    return Math.max(Math.floor(colWidth * scaleFactor), tableCellMinWidth);
+  });
+  var totalScaled = scaledWidths.reduce(function (sum, w) {
+    return sum + w;
+  }, 0);
+  var diff = availableWidth - totalScaled;
+  if (diff !== 0 && Math.abs(diff) < tableCellMinWidth) {
+    for (var i = 0; i < scaledWidths.length; i++) {
+      if (scaledWidths[i] + diff > tableCellMinWidth) {
+        scaledWidths[i] += diff;
+        break;
+      }
+    }
+  }
+  return scaledWidths.map(function (width) {
+    return {
+      width: "".concat(width, "px")
+    };
+  });
+};
+
+/**
+ * Computes column widths for tables inside sync blocks, matching the editor's scaleTableTo() exactly.
+ * Returns null if the flag is off or not inside a sync block.
+ *
+ * For nested tables (isInsideOfTable=true, gated by platform_synced_block_patch_9), we use
+ * getTableContainerWidth(tableNode) as the reference — the width the editor saved, which already
+ * accounts for the parent cell's available space (colwidth minus tableCellPadding * 2).
+ * This matches bodiedSyncBlock where isRendererNested=false, so renderScaleDownColgroup uses
+ * getTableContainerWidth(tableNode). For syncBlock the nested renderer has isRendererNested=true,
+ * which incorrectly overrides tableContainerWidth with renderWidth (the full container), causing
+ * overflow by 2 * tableCellPadding (16px).
+ */
+var renderSyncBlockColgroup = function renderSyncBlockColgroup(_ref3) {
+  var isInsideOfSyncBlock = _ref3.isInsideOfSyncBlock,
+    isInsideOfTable = _ref3.isInsideOfTable,
+    tableNode = _ref3.tableNode,
+    columnWidths = _ref3.columnWidths,
+    isNumberColumnEnabled = _ref3.isNumberColumnEnabled,
+    renderWidthProp = _ref3.renderWidth,
+    contextWidth = _ref3.contextWidth;
+  if (!isInsideOfSyncBlock || !fg('platform_synced_block_patch_9')) {
+    return null;
+  }
+  var rawTotalWidth = columnWidths.reduce(function (sum, w) {
+    return sum + w;
+  }, 0);
+  if (isInsideOfTable) {
+    return null;
+  }
+
+  // SSR / first render before WidthContext measures. Output % of original ADF proportions so
+  // columns are stable — the CSS container query (100cqw) handles actual scaling width.
+  if (contextWidth <= 0 && renderWidthProp <= 0) {
+    var fullTableWidth = isNumberColumnEnabled ? rawTotalWidth + akEditorTableNumberColumnWidth : rawTotalWidth;
+    return columnWidths.map(function (colWidth) {
+      return {
+        width: "".concat(colWidth / fullTableWidth * 100, "%")
+      };
+    });
+  }
+
+  // contextWidth measures the sync block content area. Subtract 2 to match the editor's
+  // getParentNodeWidth() border offset. Fall back to renderWidthProp for the non-CSS path.
+  var effectiveRenderWidth = contextWidth > 0 ? contextWidth - 2 : renderWidthProp;
+  var availableWidth = getDataColumnWidth(effectiveRenderWidth, isNumberColumnEnabled);
+  return scaleColumnsToWidth(columnWidths, availableWidth);
+};
 var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var _props$tableNode;
   var columnWidths = props.columnWidths,
@@ -70,7 +162,9 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isTableScalingEnabled = props.isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
     allowTableResizing = props.allowTableResizing,
-    isTopLevelRenderer = props.isTopLevelRenderer;
+    isTopLevelRenderer = props.isTopLevelRenderer,
+    isInsideOfSyncBlock = props.isInsideOfSyncBlock;
+  var skipMinWidth = fg('platform_synced_block_patch_9') && !!(isInsideOfTable && isInsideOfSyncBlock);
   if (!columnWidths || columnWidths.every(function (width) {
     return width === 0;
   }) && fg('platform_editor_numbered_column_in_include')) {
@@ -177,7 +271,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
       return fixColumnWidth({
         columnWidth: width,
         zeroWidthColumnsCount: zeroWidthColumnsCount,
-        scaleDownPercent: scaleDownPercent
+        scaleDownPercent: scaleDownPercent,
+        skipMinWidth: skipMinWidth
       }) || cellMinWidth;
     });
     var sumFixedColumnWidths = colWidthSum(fixedColWidths);
@@ -204,7 +299,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     var width = fixColumnWidth({
       columnWidth: colWidth,
       zeroWidthColumnsCount: zeroWidthColumnsCount,
-      scaleDownPercent: scaleDownPercent
+      scaleDownPercent: scaleDownPercent,
+      skipMinWidth: skipMinWidth
     }) || cellMinWidth;
     var style = width ? {
       width: "".concat(width, "px")
@@ -213,18 +309,38 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   });
 };
 export var Colgroup = function Colgroup(props) {
-  var _ref3;
+  var _ref4, _renderSyncBlockColgr;
   var _useRendererContext = useRendererContext(),
-    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer,
+    nestedRendererType = _useRendererContext.nestedRendererType;
   var columnWidths = props.columnWidths,
     isNumberColumnEnabled = props.isNumberColumnEnabled;
+  var _useContext = useContext(WidthContext),
+    contextWidth = _useContext.width;
   var flags = useFeatureFlags();
   if (!columnWidths) {
     return null;
   }
-  var isTableFixedColumnWidthsOptionEnabled = (_ref3 = fg('platform_editor_table_fixed_column_width_prop') ? props.allowFixedColumnWidthOption : flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) !== null && _ref3 !== void 0 ? _ref3 : false;
-  var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
+  var isTableFixedColumnWidthsOptionEnabled = (_ref4 = fg('platform_editor_table_fixed_column_width_prop') ? props.allowFixedColumnWidthOption : flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) !== null && _ref4 !== void 0 ? _ref4 : false;
+
+  // For referenced sync blocks, nestedRendererType='syncedBlock' is set via RendererContextProvider
+  // in AKRendererWrapper. ReactSerializer is a class and cannot read React context, so we detect
+  // it here in the Colgroup component via useRendererContext() instead of prop-drilling.
+  var isInsideOfSyncBlock = nestedRendererType === 'syncedBlock';
+
+  // renderSyncBlockColgroup returns null when not applicable (flag off, SSR, not a sync block),
+  // in which case ?? falls back to the standard renderScaleDownColgroup path.
+  var colStyles = (_renderSyncBlockColgr = renderSyncBlockColgroup({
+    isInsideOfSyncBlock: isInsideOfSyncBlock,
+    isInsideOfTable: !!props.isInsideOfTable,
+    tableNode: props.tableNode,
+    columnWidths: columnWidths,
+    isNumberColumnEnabled: !!isNumberColumnEnabled,
+    renderWidth: props.renderWidth,
+    contextWidth: contextWidth
+  })) !== null && _renderSyncBlockColgr !== void 0 ? _renderSyncBlockColgr : renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
     isTopLevelRenderer: isTopLevelRenderer,
+    isInsideOfSyncBlock: isInsideOfSyncBlock,
     isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {