@atlaskit/renderer 128.8.0 → 128.9.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/renderer
 
+## 128.9.1
+
+### Patch Changes
+
+- [`571ae3a14ac53`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/571ae3a14ac53) -
+  Refresh cache for an inline smart card in renderer if it's not been fetched before
+- [`eaf073b7563c8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eaf073b7563c8) -
+  Fix nested table column overflow in syncBlock by using saved table width as scaling target,
+  aligning with bodiedSyncBlock behaviour
+- Updated dependencies
+
+## 128.9.0
+
+### Minor Changes
+
+- [`02d2faaaf5bb9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02d2faaaf5bb9) -
+  A11Y fixes
+
+### Patch Changes
+
+- [`3e18e5bea1aa1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e18e5bea1aa1) -
+  Fixed cursor placement when pressing Enter at the start of a nested task item. Fixed extra spacing
+  on nested task lists when flexible list indentation is enabled.
+- Updated dependencies
+
 ## 128.8.0
 
 ### Minor Changes

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

@@ -22,6 +22,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _fallback = require("./fallback");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
@@ -154,6 +155,7 @@ var InlineCard = function InlineCard(props) {
     onSetLinkTarget = props.onSetLinkTarget;
   var portal = (0, _PortalContext.usePortal)(props);
   var cardContext = (0, _linkProvider.useSmartCardContext)();
+  var provider = (0, _providerFactory.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
@@ -204,6 +206,21 @@ var InlineCard = function InlineCard(props) {
       throw err;
     }
   };
+  (0, _react.useEffect)(function () {
+    if ((0, _expValEquals.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 && (0, _expValEquals.expValEquals)('platform_editor_smartlink_local_cache', 'isEnabled', true)) && url && !(0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
     exposure: true

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

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.colWidthSum = exports.Colgroup = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
@@ -15,6 +17,7 @@ var _useFeatureFlags = require("../../../use-feature-flags");
 var _rendererContext = require("../../../renderer-context");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // we allow scaling down column widths by no more than 30%
@@ -32,7 +35,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;
   }
@@ -40,11 +44,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), _styles.tableCellMinWidth);
+    var scaled = Math.floor((1 - scaleDownPercent) * columnWidth);
+    return skipMinWidth ? scaled : Math.max(scaled, _styles.tableCellMinWidth);
   }
-  return Math.max(
-  // We need to take tableCellBorderWidth, to avoid unnecessary overflow.
-  columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
+  var adjusted = columnWidth - _styles.tableCellBorderWidth;
+  if (skipMinWidth) {
+    return adjusted;
+  }
+  return Math.max(adjusted, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
 };
 var calcScalePercent = function calcScalePercent(_ref2) {
   var renderWidth = _ref2.renderWidth,
@@ -63,6 +70,93 @@ var colWidthSum = exports.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 - _editorSharedStyles.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), _styles.tableCellMinWidth);
+  });
+  var totalScaled = scaledWidths.reduce(function (sum, w) {
+    return sum + w;
+  }, 0);
+  var diff = availableWidth - totalScaled;
+  if (diff !== 0 && Math.abs(diff) < _styles.tableCellMinWidth) {
+    for (var i = 0; i < scaledWidths.length; i++) {
+      if (scaledWidths[i] + diff > _styles.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 || !(0, _platformFeatureFlags.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 + _editorSharedStyles.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,
@@ -76,7 +170,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 = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') && !!(isInsideOfTable && isInsideOfSyncBlock);
   if (!columnWidths || columnWidths.every(function (width) {
     return width === 0;
   }) && (0, _platformFeatureFlags.fg)('platform_editor_numbered_column_in_include')) {
@@ -183,7 +279,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
       return fixColumnWidth({
         columnWidth: width,
         zeroWidthColumnsCount: zeroWidthColumnsCount,
-        scaleDownPercent: scaleDownPercent
+        scaleDownPercent: scaleDownPercent,
+        skipMinWidth: skipMinWidth
       }) || cellMinWidth;
     });
     var sumFixedColumnWidths = colWidthSum(fixedColWidths);
@@ -210,7 +307,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")
@@ -219,18 +317,38 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   });
 };
 var Colgroup = exports.Colgroup = function Colgroup(props) {
-  var _ref3;
+  var _ref4, _renderSyncBlockColgr;
   var _useRendererContext = (0, _rendererContext.useRendererContext)(),
-    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer,
+    nestedRendererType = _useRendererContext.nestedRendererType;
   var columnWidths = props.columnWidths,
     isNumberColumnEnabled = props.isNumberColumnEnabled;
+  var _useContext = (0, _react.useContext)(_ui.WidthContext),
+    contextWidth = _useContext.width;
   var flags = (0, _useFeatureFlags.useFeatureFlags)();
   if (!columnWidths) {
     return null;
   }
-  var isTableFixedColumnWidthsOptionEnabled = (_ref3 = (0, _platformFeatureFlags.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 = (0, _platformFeatureFlags.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' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment_jira', true, {

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

@@ -26,7 +26,7 @@ var _getBaseFontSize = require("./get-base-font-size");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
-var _css8, _$concat3, _$concat6;
+var _css9, _$concat3, _$concat6;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -227,6 +227,12 @@ var headingAnchorStyles = (0, _react.css)({
     lineHeight: "".concat(16 / 11, "em")
   })
 });
+var headingAnchorButtonFocusVisibleStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+  'button:focus-visible': {
+    outline: "2px solid ".concat("var(--ds-border-focused, #4688EC)"),
+    borderRadius: "var(--ds-radius-small, 3px)"
+  }
+}));
 var akEditorBreakpointForSmallDevice = '1266px';
 var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
   '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - ".concat(_editorSharedStyles.akEditorGutterPadding, "px * 2)"),
@@ -646,13 +652,13 @@ var paragraphSharedStyleScaledMargin = (0, _react.css)({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = (0, _react.css)((_css8 = {
+var listsSharedStyles = (0, _react.css)((_css9 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
   }
-}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css8, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
+}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css9, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
   /*
   Ensures list item content adheres to the list's margin instead
   of filling the entire block row. This is important to allow
@@ -684,7 +690,7 @@ var listsSharedStyles = (0, _react.css)((_css8 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css8, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css9, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -728,11 +734,13 @@ var listItemHiddenMarkerStyles = (0, _react.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)"
   }
 });
 var indentationSharedStyles = (0, _react.css)({
@@ -1597,6 +1605,7 @@ var rendererTableSortableColumnStyles = (0, _react.css)((0, _defineProperty2.def
   width: '100%',
   height: '100%',
   padding: "".concat(_styles.tableCellPadding, "px"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-shape
   borderWidth: '1.5px',
   borderStyle: 'solid',
   borderColor: "transparent",
@@ -1979,6 +1988,11 @@ var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _definePrope
     marginTop: RENDERER_LIST_DENSE_GAP
   }
 }));
+var syncBlockRendererStyles = (0, _react.css)({
+  margin: 0,
+  maxWidth: 'none',
+  padding: 0
+});
 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)",
@@ -2011,7 +2025,8 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
     children = props.children,
     innerRef = props.innerRef,
-    testId = props.testId;
+    testId = props.testId,
+    isInsideSyncBlock = props.isInsideSyncBlock;
   var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
   var isPreviewPanelResponsivenessOn = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
@@ -2037,7 +2052,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     }, (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && {
       '--ak-renderer-editor-font-small-text': (0, _ugcTokens.editorUGCToken)('editor.font.body.small')
     }),
-    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.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' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (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))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, (0, _expValEquals.expValEquals)('platform_editor_flexible_list_schema', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _platformFeatureFlags.fg)('ally_30945_accessibility_outline_fix') && headingAnchorButtonFocusVisibleStyles, (0, _expValEquals.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' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (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))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, (0, _expValEquals.expValEquals)('platform_editor_flexible_list_schema', 'isEnabled', true) && listItemHiddenMarkerStyles, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.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, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
@@ -2045,7 +2060,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, 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, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, 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],
     "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 = "128.7.2";
+var packageVersion = "128.9.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -199,10 +199,15 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       var normalizedFeatureFlags = (0, _normalizeFeatureFlags.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
       };
     };
-  }, []);
+  }, [nestedRendererType]);
   var fireAnalyticsEventOld = (0, _react.useCallback)(function (event) {
     var createAnalyticsEvent = props.createAnalyticsEvent;
     if (createAnalyticsEvent) {
@@ -627,6 +632,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     return telepointer;
   };
   var initialUpdate = _react.default.useRef(true);
+  var _useRendererContext3 = (0, _rendererContext.useRendererContext)(),
+    nestedRendererType = _useRendererContext3.nestedRendererType;
   (0, _react.useEffect)(function () {
     // 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
@@ -724,7 +731,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (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/es2019/react/nodes/inlineCard.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @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';
@@ -20,6 +20,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';
@@ -139,6 +140,7 @@ const InlineCard = props => {
   } = props;
   const portal = usePortal(props);
   const cardContext = useSmartCardContext();
+  const provider = useProvider('cardProvider');
   const SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
 
   // Helper fn to conditionally wrap cards when suspense boundary is passed in via product
@@ -189,6 +191,21 @@ const InlineCard = props => {
       throw err;
     }
   };
+  useEffect(() => {
+    if (expValEquals('platform_editor_smartlink_local_cache', 'isEnabled', true) && url) {
+      // Refresh cache in the background
+      provider === null || provider === void 0 ? void 0 : provider.then(providerInstance => {
+        var _refreshCache, _ref;
+        (_refreshCache = (_ref = providerInstance).refreshCache) === null || _refreshCache === void 0 ? void 0 : _refreshCache.call(_ref, {
+          // It's ok to cast any resourceUrl to inlineCard here, because only URL is important for the request.
+          type: 'inlineCard',
+          attrs: {
+            url
+          }
+        });
+      });
+    }
+  }, [provider, url]);
   const 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