@atlaskit/renderer 133.4.0 → 133.4.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 133.4.2
+
+### Patch Changes
+
+- [`fae3b71e868dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fae3b71e868dd) -
+  Add data-top-level attribute to top-level extension and multiBodiedExtension renderer nodes.
+- Updated dependencies
+
+## 133.4.1
+
+### Patch Changes
+
+- [`deb7c88f3baed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/deb7c88f3baed) -
+  Update unicode emoji sizing so renderer typography can control text emoji scale.
+- Updated dependencies
+
 ## 133.4.0
 
 ### Minor Changes

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

@@ -123,7 +123,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       "data-layout": layout,
       "data-local-id": localId,
       "data-testid": "extension--wrapper",
-      "data-node-type": "extension"
+      "data-node-type": "extension",
+      "data-top-level": isTopLevel || undefined
     }, (0, _react.jsx)("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -152,7 +153,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
         minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
       },
       "data-layout": layout,
-      "data-local-id": localId
+      "data-local-id": localId,
+      "data-top-level": isTopLevel || undefined
     }, (0, _react.jsx)("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

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

@@ -72,7 +72,8 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
       (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
-    "data-testid": "multiBodiedExtension--wrapper-renderer"
+    "data-testid": "multiBodiedExtension--wrapper-renderer",
+    "data-top-level": isTopLevel || undefined
   }, (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
@@ -99,7 +100,8 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
       (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
-    "data-testid": "multiBodiedExtension--wrapper-renderer"
+    "data-testid": "multiBodiedExtension--wrapper-renderer",
+    "data-top-level": isTopLevel || undefined
   }, (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)

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

@@ -2038,6 +2038,21 @@ var scaledDenseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _
   height: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
   width: "".concat(_emoji.defaultInlineEmojiHeight, "px")
 }));
+var scaledDenseUnicodeEmojiStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "[data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.defaultDenseEmojiHeight, "px")
+}), "h1 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.denseEmojiHeightH1, "px")
+}), "h2 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.denseEmojiHeightH2, "px")
+}), "h3 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.denseEmojiHeightH3, "px")
+}), "h4 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.denseEmojiHeightH4, "px")
+}), ":is(h5, h6, p) [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.defaultDenseEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".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)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "".concat(_emoji.defaultEmojiHeight, "px"),
   minHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
@@ -2071,6 +2086,21 @@ var scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defin
   height: "".concat(_emoji.defaultInlineEmojiHeight, "px"),
   width: "".concat(_emoji.defaultInlineEmojiHeight, "px")
 }));
+var scaledUnicodeEmojiStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "[data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.defaultEmojiHeight, "px")
+}), "h1 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.scaledEmojiHeightH1, "px")
+}), "h2 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.scaledEmojiHeightH2, "px")
+}), "h3 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.scaledEmojiHeightH3, "px")
+}), "h4 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.scaledEmojiHeightH4, "px")
+}), ":is(h5, h6, p) [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(_emoji.defaultEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".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, ")"),
@@ -2220,7 +2250,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_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (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 && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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 ? syncBlockRendererStyles : null, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : 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_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (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 && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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, isCompactModeEnabled ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -72,7 +72,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 = "133.3.2";
+var packageVersion = "133.4.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -103,7 +103,8 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       "data-layout": layout,
       "data-local-id": localId,
       "data-testid": "extension--wrapper",
-      "data-node-type": "extension"
+      "data-node-type": "extension",
+      "data-top-level": isTopLevel || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -133,7 +134,8 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
         minHeight: isInline ? undefined : `${extensionHeight}px`
       },
       "data-layout": layout,
-      "data-local-id": localId
+      "data-local-id": localId,
+      "data-top-level": isTopLevel || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

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

@@ -64,7 +64,8 @@ const MultiBodiedExtensionWrapperLegacy = ({
       calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
-    "data-testid": "multiBodiedExtension--wrapper-renderer"
+    "data-testid": "multiBodiedExtension--wrapper-renderer",
+    "data-top-level": isTopLevel || undefined
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
@@ -92,7 +93,8 @@ const MultiBodiedExtensionWrapperNext = ({
       calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
-    "data-testid": "multiBodiedExtension--wrapper-renderer"
+    "data-testid": "multiBodiedExtension--wrapper-renderer",
+    "data-top-level": isTopLevel || undefined
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`

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

@@ -2580,6 +2580,30 @@ const scaledDenseEmojiStyles = css({
     width: `${defaultInlineEmojiHeight}px`
   }
 });
+const scaledDenseUnicodeEmojiStylesNew = css({
+  [`[data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${defaultDenseEmojiHeight}px`
+  },
+  [`h1 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${denseEmojiHeightH1}px`
+  },
+  [`h2 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${denseEmojiHeightH2}px`
+  },
+  [`h3 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${denseEmojiHeightH3}px`
+  },
+  [`h4 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${denseEmojiHeightH4}px`
+  },
+  [`:is(h5, h6, p) [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${defaultDenseEmojiHeight}px`
+  },
+  // sync with platform/packages/linking-platform/smart-card/src/view/InlineCard/IconAndTitleLayout/index.tsx
+  [`[data-testid="icon-wrapper"] [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${defaultInlineEmojiHeight}px`
+  }
+});
 const scaledEmojiStyles = css({
   [`.${EmojiSharedCssClassName.EMOJI_IMAGE}`]: {
     height: `${defaultEmojiHeight}px`,
@@ -2622,6 +2646,30 @@ const scaledEmojiStyles = css({
     width: `${defaultInlineEmojiHeight}px`
   }
 });
+const scaledUnicodeEmojiStylesNew = css({
+  [`[data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${defaultEmojiHeight}px`
+  },
+  [`h1 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${scaledEmojiHeightH1}px`
+  },
+  [`h2 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${scaledEmojiHeightH2}px`
+  },
+  [`h3 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${scaledEmojiHeightH3}px`
+  },
+  [`h4 [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${scaledEmojiHeightH4}px`
+  },
+  [`:is(h5, h6, p) [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${defaultEmojiHeight}px`
+  },
+  // sync with platform/packages/linking-platform/smart-card/src/view/InlineCard/IconAndTitleLayout/index.tsx
+  [`[data-testid="icon-wrapper"] [data-emoji-type="unicode"]`]: {
+    '--emoji-common-unicode-size': `${defaultInlineEmojiHeight}px`
+  }
+});
 const denseStyles = css({
   // Scale emoji size based on base font size
   // Default: 20px emoji at 16px base font
@@ -2815,7 +2863,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_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, 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 && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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 ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, 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 && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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, isCompactModeEnabled ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -58,7 +58,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 = "133.3.2";
+const packageVersion = "133.4.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -113,7 +113,8 @@ export var renderExtension = function renderExtension(content, layout) {
       "data-layout": layout,
       "data-local-id": localId,
       "data-testid": "extension--wrapper",
-      "data-node-type": "extension"
+      "data-node-type": "extension",
+      "data-top-level": isTopLevel || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -142,7 +143,8 @@ export var renderExtension = function renderExtension(content, layout) {
         minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
       },
       "data-layout": layout,
-      "data-local-id": localId
+      "data-local-id": localId,
+      "data-top-level": isTopLevel || undefined
     }, jsx("div", {
       tabIndex: options.tabIndex
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

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

@@ -64,7 +64,8 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
       calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
-    "data-testid": "multiBodiedExtension--wrapper-renderer"
+    "data-testid": "multiBodiedExtension--wrapper-renderer",
+    "data-top-level": isTopLevel || undefined
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
@@ -91,7 +92,8 @@ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_
       calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
-    "data-testid": "multiBodiedExtension--wrapper-renderer"
+    "data-testid": "multiBodiedExtension--wrapper-renderer",
+    "data-top-level": isTopLevel || undefined
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)

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

@@ -2031,6 +2031,21 @@ var scaledDenseEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty
   height: "".concat(defaultInlineEmojiHeight, "px"),
   width: "".concat(defaultInlineEmojiHeight, "px")
 }));
+var scaledDenseUnicodeEmojiStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "[data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(defaultDenseEmojiHeight, "px")
+}), "h1 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(denseEmojiHeightH1, "px")
+}), "h2 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(denseEmojiHeightH2, "px")
+}), "h3 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(denseEmojiHeightH3, "px")
+}), "h4 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(denseEmojiHeightH4, "px")
+}), ":is(h5, h6, p) [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(defaultDenseEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(defaultInlineEmojiHeight, "px")
+}));
 var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "".concat(defaultEmojiHeight, "px"),
   minHeight: "".concat(defaultEmojiHeight, "px"),
@@ -2064,6 +2079,21 @@ var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_def
   height: "".concat(defaultInlineEmojiHeight, "px"),
   width: "".concat(defaultInlineEmojiHeight, "px")
 }));
+var scaledUnicodeEmojiStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "[data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(defaultEmojiHeight, "px")
+}), "h1 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(scaledEmojiHeightH1, "px")
+}), "h2 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(scaledEmojiHeightH2, "px")
+}), "h3 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(scaledEmojiHeightH3, "px")
+}), "h4 [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(scaledEmojiHeightH4, "px")
+}), ":is(h5, h6, p) [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".concat(defaultEmojiHeight, "px")
+}), "[data-testid=\"icon-wrapper\"] [data-emoji-type=\"unicode\"]", {
+  '--emoji-common-unicode-size': "".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, ")"),
@@ -2213,7 +2243,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_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, 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 && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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 ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, 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 && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, 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, isCompactModeEnabled ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -63,7 +63,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 = "133.3.2";
+var packageVersion = "133.4.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.4.0",
+	"version": "133.4.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-smart-link-draggable": "^1.0.0",
-		"@atlaskit/emoji": "^71.2.0",
+		"@atlaskit/emoji": "^71.3.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/icon": "^36.0.0",
 		"@atlaskit/link": "^4.0.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/status": "^5.1.0",
 		"@atlaskit/task-decision": "^21.1.0",
 		"@atlaskit/theme": "^26.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.3.0",
+		"@atlaskit/tmp-editor-statsig": "^109.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/visually-hidden": "^4.0.0",
@@ -81,7 +81,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.4.0",
+		"@atlaskit/editor-common": "^116.6.0",
 		"@atlaskit/link-provider": "^5.0.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",