@atlaskit/renderer 124.6.0 → 124.7.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/renderer
 
+## 124.7.1
+
+### Patch Changes
+
+- [`5771b6f88f16a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5771b6f88f16a) -
+  Clean up platform_editor_fix_image_size_diff_during_ssr
+- Updated dependencies
+
+## 124.7.0
+
+### Minor Changes
+
+- [`5167552fe1a93`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5167552fe1a93) -
+  [EDITOR-2339] Bump @atlaskit/adf-schema to 51.3.0
+
+### Patch Changes
+
+- [`685d27211d400`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/685d27211d400) -
+  [ux] Adjust codeblock font size relative to parent
+- [`c21648c080e0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c21648c080e0c) -
+  [ux] EDITOR-2291: Tighten list and task spacing in dense content mode
+- [`2bdec5e9ec1c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2bdec5e9ec1c9) -
+  [EDITOR-442] Cleans up FG platform_editor_add_media_from_url_rollout
+- Updated dependencies
+
 ## 124.6.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -9,6 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("@atlaskit/editor-common/styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
 /**
  * @jsxRuntime classic
@@ -39,6 +41,12 @@ var codeBlockStyleOverrides = (0, _react.css)((0, _defineProperty2.default)({
   backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
   backgroundPosition: '0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0'
 }));
+var denseModeOverrides = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(_styles.CodeBlockSharedCssClassName.DS_CODEBLOCK), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: '0.875em',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '1.5em'
+}));
 var CodeBlockContainer = function CodeBlockContainer(_ref) {
   var allowCopyToClipboard = _ref.allowCopyToClipboard,
     allowWrapCodeBlock = _ref.allowWrapCodeBlock,
@@ -52,7 +60,7 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     "data-local-id": localId,
-    css: codeBlockStyleOverrides
+    css: [codeBlockStyleOverrides, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && denseModeOverrides]
   }, (0, _react.jsx)(_codeBlockButtonContainer.default, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,

package/dist/cjs/react/nodes/media/index.js

@@ -26,17 +26,14 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _utils = require("../../../utils");
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _events = require("../../../analytics/events");
 var _annotation = _interopRequireDefault(require("../../marks/annotation"));
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
-var _reactIntlNext = require("react-intl-next");
 var _useInlineCommentsFilter = require("../../../ui/annotations/hooks/use-inline-comments-filter");
 var _useInlineCommentSubscriber = require("../../../ui/annotations/hooks/use-inline-comment-subscriber");
 var _types = require("@atlaskit/editor-common/types");
 var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
-var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
-  _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -149,7 +146,6 @@ var _MediaAnnotations = function MediaAnnotations(_ref4) {
     marks: otherMarks
   }, children) : (0, _react2.jsx)(_react.Fragment, null, children)));
 };
-var CommentBadge = (0, _reactIntlNext.injectIntl)(_mediaSingle.CommentBadge);
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
@@ -213,89 +209,6 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       });
     }
   };
-  return (0, _react2.jsx)(CommentBadge, (0, _extends2.default)({
-    onMouseEnter: function onMouseEnter() {
-      return setEntered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setEntered(false);
-    },
-    status: entered ? 'entered' : status,
-    onClick: onClick
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, rest));
-};
-
-/**
- * Remove CommentBadgeWrapper component above
- * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
- * when clean up platform_editor_add_media_from_url feature flag
- */
-
-var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref6) {
-  var _marks$map2;
-  var marks = _ref6.marks,
-    mediaSingleElement = _ref6.mediaSingleElement,
-    _ref6$isDrafting = _ref6.isDrafting,
-    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
-    rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
-  var _useState5 = (0, _react.useState)('default'),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    status = _useState6[0],
-    setStatus = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    entered = _useState8[0],
-    setEntered = _useState8[1];
-  var updateSubscriber = (0, _useInlineCommentSubscriber.useInlineCommentSubscriberContext)();
-  var activeParentIds = (0, _useInlineCommentsFilter.useInlineCommentsFilter)({
-    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
-      return mark.attrs.id;
-    })) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
-    filter: {
-      state: _adfSchema.AnnotationMarkStates.ACTIVE
-    }
-  });
-  (0, _react.useEffect)(function () {
-    var observer = new MutationObserver(function (mutationList) {
-      mutationList.forEach(function (mutation) {
-        var parentNode = mutation.target.parentNode;
-        if (mutation.attributeName === 'data-has-focus') {
-          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && !isMediaCaption;
-          elementHasFocus ? setStatus('active') : setStatus('default');
-        }
-      });
-    });
-    if (mediaSingleElement) {
-      observer.observe(mediaSingleElement, {
-        attributes: true,
-        subtree: true,
-        attributeFilter: ['data-has-focus']
-      });
-    }
-    return function () {
-      observer.disconnect();
-    };
-  }, [mediaSingleElement, setStatus]);
-  if (!isDrafting && !activeParentIds.length) {
-    return null;
-  }
-  var onClick = function onClick(e) {
-    e.preventDefault();
-    if (updateSubscriber) {
-      updateSubscriber.emit(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
-        annotationIds: activeParentIds,
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        eventTarget: e.target,
-        // use mediaSingle here to align with annotation viewed event dispatched in editor
-        eventTargetType: 'mediaSingle',
-        viewMethod: _analytics.VIEW_METHOD.BADGE
-      });
-    }
-  };
   return (0, _react2.jsx)(_mediaSingle.CommentBadgeNext, (0, _extends2.default)({
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
@@ -353,27 +266,21 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, (0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout') && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
+      }, (0, _react2.jsx)(_mediaSingle.MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
         mediaHeight: height,
         useMinimumZIndex: true
-      }, function (_ref8) {
-        var visible = _ref8.visible;
+      }, function (_ref7) {
+        var visible = _ref7.visible;
         return (0, _react2.jsx)(_react.default.Fragment, null, visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
           type: _this.props.type,
           url: _this.props.type === 'external' ? _this.props.url : undefined
-        }), showCommentBadge && (0, _react2.jsx)(CommentBadgeNextWrapper, {
+        }), showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
           marks: annotationMarks,
           mediaSingleElement: mediaSingleElement,
           isDrafting: isDrafting
         }));
-      }), !(0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout') && showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
-        marks: annotationMarks,
-        mediaSingleElement: mediaSingleElement,
-        width: width,
-        height: height,
-        isDrafting: isDrafting
       }), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         contextIdentifierProvider: contextIdentifierProvider
         // Ignored via go/ees005
@@ -436,14 +343,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     draftPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState9 = (0, _react.useState)(),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    position = _useState0[0],
-    setPosition = _useState0[1];
-  var _useState1 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    shouldApplyDraftAnnotation = _useState10[0],
-    setShouldApplyDraftAnnotation = _useState10[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    shouldApplyDraftAnnotation = _useState8[0],
+    setShouldApplyDraftAnnotation = _useState8[1];
   (0, _react.useEffect)(function () {
     var _draftPosition$from;
     if (pos === undefined) {

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -12,9 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _style = require("../../../ui/Renderer/style");
 var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
 var _AnnotationHoverContext = require("../../../ui/annotations/contexts/AnnotationHoverContext");
@@ -148,7 +148,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
         height: "100%"
       };
     } else {
-      var _maxWidth = (0, _coreUtils.isSSR)() && widthAttr && typeof widthAttr === 'number' && (0, _platformFeatureFlags.fg)('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
+      var _maxWidth = (0, _coreUtils.isSSR)() && widthAttr && typeof widthAttr === 'number' ? Math.max(widthAttr, containerWidth) : containerWidth;
       var maxHeight = height / width * _maxWidth;
       cardDimensions = {
         width: "".concat(_maxWidth, "px"),

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

@@ -1522,7 +1522,9 @@ var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
     paddingTop: "var(--ds-space-025, 2px)"
   }
 });
-var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
+var RENDERER_LIST_DENSE_GAP = "max(0px,calc((var(--ak-renderer-base-font-size) - ".concat(_editorSharedStyles.akEditorFullPageDenseFontSize, "px)* (4/3)))");
+var TASKLIST_CONTAINER_DENSE_MARGIN = "max(calc(10px + (var(--ak-renderer-base-font-size) - ".concat(_editorSharedStyles.akEditorFullPageDenseFontSize, "px) *( 2 / 3)))");
+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, ")"),
   maxHeight: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
@@ -1535,6 +1537,35 @@ var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _definePrope
 }), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .ak-editor-panel .ak-editor-panel__icon"), {
   height: "var(--ds-space-250, 20px)",
   width: "var(--ds-space-250, 20px)"
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT), {
+  // Adjacent list items
+  'li + li': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  },
+  // Nested lists directly under an li (unordered and ordered)
+  'li > ul, li > ol, .ak-ul li > ul, .ak-ul li > ol, .ak-ol li > ul, .ak-ol li > ol': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  },
+  // Task lists
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-task-list-local-id]': {
+    // Task lists: container top margin
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: TASKLIST_CONTAINER_DENSE_MARGIN
+  },
+  // Task lists: sibling items and nested lists
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-task-list-local-id] > * + *': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-task-list-local-id] [data-task-list-local-id], [data-task-local-id] [data-task-local-id]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  }
 }));
 var RendererStyleContainer = exports.RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
@@ -1571,13 +1602,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [baseStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && denseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, 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 && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
+      (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 && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && denseStyles],
       "data-testid": testId
     }, children)
   );

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -48,13 +48,22 @@ function BreakoutSSRInlineScript(_ref) {
   });
 }
 function createBreakoutInlineScript(id, shouldSkipScript) {
-  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ");\n  })(window);\n");
+  var flags = {
+    platform_editor_fix_media_in_renderer: (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer')
+  };
+  return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ", ").concat(JSON.stringify(flags), ");\n})(window);\n");
 }
 var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
 
+/**
+ * WARNING: NO EXTERNAL FUNCTION CALL IN THIS FUNCTION
+ * This function will be put to DOM as an inline script.
+ * It can not have any external function dependency.
+ * All required data must be passed in as serializable parameters.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
+function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, flags) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -101,7 +110,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
           // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
           // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-          isMediaSingleWithPixelWidth && (0, _platformFeatureFlags.fg)('platform_editor_fix_image_size_diff_during_ssr') && (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer')) {
+          isMediaSingleWithPixelWidth && flags['platform_editor_fix_media_in_renderer']) {
             return;
           }
 

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

@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "0.0.0-development";
+var packageVersion = "124.7.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -6,6 +6,8 @@
 import { jsx, css } from '@emotion/react';
 import { N20 } from '@atlaskit/theme/colors';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
 const codeBlockStyleOverrides = css({
   tabSize: 4,
@@ -64,6 +66,15 @@ const codeBlockStyleOverrides = css({
     backgroundPosition: '0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0'
   }
 });
+const denseModeOverrides = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`${CodeBlockSharedCssClassName.DS_CODEBLOCK}`]: {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '0.875em',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.5em'
+  }
+});
 const CodeBlockContainer = ({
   allowCopyToClipboard,
   allowWrapCodeBlock,
@@ -78,7 +89,7 @@ const CodeBlockContainer = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     "data-local-id": localId,
-    css: codeBlockStyleOverrides
+    css: [codeBlockStyleOverrides, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseModeOverrides]
   }, jsx(CodeBlockButtonContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,

package/dist/es2019/react/nodes/media/index.js

@@ -18,11 +18,9 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
-import { CommentBadge as CommentBadgeComponent, CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
-import { injectIntl } from 'react-intl-next';
+import { CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inline-comments-filter';
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
@@ -131,7 +129,6 @@ const MediaAnnotations = ({
     marks: otherMarks
   }, children) : jsx(Fragment, null, children)));
 };
-const CommentBadge = injectIntl(CommentBadgeComponent);
 const CommentBadgeWrapper = ({
   marks,
   mediaSingleElement,
@@ -187,77 +184,6 @@ const CommentBadgeWrapper = ({
       });
     }
   };
-  return jsx(CommentBadge, _extends({
-    onMouseEnter: () => setEntered(true),
-    onMouseLeave: () => setEntered(false),
-    status: entered ? 'entered' : status,
-    onClick: onClick
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, rest));
-};
-
-/**
- * Remove CommentBadgeWrapper component above
- * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
- * when clean up platform_editor_add_media_from_url feature flag
- */
-
-const CommentBadgeNextWrapper = ({
-  marks,
-  mediaSingleElement,
-  isDrafting = false,
-  ...rest
-}) => {
-  var _marks$map2;
-  const [status, setStatus] = useState('default');
-  const [entered, setEntered] = useState(false);
-  const updateSubscriber = useInlineCommentSubscriberContext();
-  const activeParentIds = useInlineCommentsFilter({
-    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(mark => mark.attrs.id)) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
-    filter: {
-      state: AnnotationMarkStates.ACTIVE
-    }
-  });
-  useEffect(() => {
-    const observer = new MutationObserver(mutationList => {
-      mutationList.forEach(mutation => {
-        const parentNode = mutation.target.parentNode;
-        if (mutation.attributeName === 'data-has-focus') {
-          const isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && !isMediaCaption;
-          elementHasFocus ? setStatus('active') : setStatus('default');
-        }
-      });
-    });
-    if (mediaSingleElement) {
-      observer.observe(mediaSingleElement, {
-        attributes: true,
-        subtree: true,
-        attributeFilter: ['data-has-focus']
-      });
-    }
-    return () => {
-      observer.disconnect();
-    };
-  }, [mediaSingleElement, setStatus]);
-  if (!isDrafting && !activeParentIds.length) {
-    return null;
-  }
-  const onClick = e => {
-    e.preventDefault();
-    if (updateSubscriber) {
-      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
-        annotationIds: activeParentIds,
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        eventTarget: e.target,
-        // use mediaSingle here to align with annotation viewed event dispatched in editor
-        eventTargetType: 'mediaSingle',
-        viewMethod: VIEW_METHOD.BADGE
-      });
-    }
-  };
   return jsx(CommentBadgeNext, _extends({
     onMouseEnter: () => setEntered(true),
     onMouseLeave: () => setEntered(false),
@@ -312,7 +238,7 @@ class Media extends PureComponent {
             border: !!borderMark
           }
         }
-      }, fg('platform_editor_add_media_from_url_rollout') && jsx(MediaBadges, {
+      }, jsx(MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
         mediaHeight: height,
@@ -322,17 +248,11 @@ class Media extends PureComponent {
       }) => jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
         type: this.props.type,
         url: this.props.type === 'external' ? this.props.url : undefined
-      }), showCommentBadge && jsx(CommentBadgeNextWrapper, {
-        marks: annotationMarks,
-        mediaSingleElement: mediaSingleElement,
-        isDrafting: isDrafting
-      }))), !fg('platform_editor_add_media_from_url_rollout') && showCommentBadge && jsx(CommentBadgeWrapper, {
+      }), showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
-        width: width,
-        height: height,
         isDrafting: isDrafting
-      }), jsx(MediaCard, _extends({
+      }))), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -9,9 +9,9 @@ import { default as React, Fragment, useCallback, useContext, useMemo, useEffect
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
@@ -135,7 +135,7 @@ const MediaSingleWithChildren = props => {
         height: `100%`
       };
     } else {
-      const maxWidth = isSSR() && widthAttr && typeof widthAttr === 'number' && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
+      const maxWidth = isSSR() && widthAttr && typeof widthAttr === 'number' ? Math.max(widthAttr, containerWidth) : containerWidth;
       const maxHeight = height / width * maxWidth;
       cardDimensions = {
         width: `${maxWidth}px`,

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

@@ -13,7 +13,7 @@ import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -1924,6 +1924,8 @@ const rendererAnnotationStylesCommentHeightFix = css({
     paddingTop: "var(--ds-space-025, 2px)"
   }
 });
+const RENDERER_LIST_DENSE_GAP = `max(0px,calc((var(--ak-renderer-base-font-size) - ${akEditorFullPageDenseFontSize}px)* (4/3)))`;
+const TASKLIST_CONTAINER_DENSE_MARGIN = `max(calc(10px + (var(--ak-renderer-base-font-size) - ${akEditorFullPageDenseFontSize}px) *( 2 / 3)))`;
 const denseStyles = css({
   // Scale emoji size based on base font size
   // Default: 20px emoji at 16px base font
@@ -1945,6 +1947,37 @@ const denseStyles = css({
   [`.${RendererCssClassName.DOCUMENT} .ak-editor-panel .ak-editor-panel__icon`]: {
     height: "var(--ds-space-250, 20px)",
     width: "var(--ds-space-250, 20px)"
+  },
+  // Condense spacing across lists, tasks and decisions
+  [`.${RendererCssClassName.DOCUMENT}`]: {
+    // Adjacent list items
+    'li + li': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      marginTop: RENDERER_LIST_DENSE_GAP
+    },
+    // Nested lists directly under an li (unordered and ordered)
+    'li > ul, li > ol, .ak-ul li > ul, .ak-ul li > ol, .ak-ol li > ul, .ak-ol li > ol': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      marginTop: RENDERER_LIST_DENSE_GAP
+    },
+    // Task lists
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-task-list-local-id]': {
+      // Task lists: container top margin
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      marginTop: TASKLIST_CONTAINER_DENSE_MARGIN
+    },
+    // Task lists: sibling items and nested lists
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-task-list-local-id] > * + *': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      marginTop: RENDERER_LIST_DENSE_GAP
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-task-list-local-id] [data-task-list-local-id], [data-task-local-id] [data-task-local-id]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      marginTop: RENDERER_LIST_DENSE_GAP
+    }
   }
 });
 export const RendererStyleContainer = props => {
@@ -1984,13 +2017,13 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
         '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
       },
-      css: [baseStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, 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 && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, 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' && responsiveBreakoutWidthFullWidth],
+      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 && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, 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' && responsiveBreakoutWidthFullWidth, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles],
       "data-testid": testId
     }, children)
   );

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -40,14 +40,14 @@ export function BreakoutSSRInlineScript({
   });
 }
 export function createBreakoutInlineScript(id, shouldSkipScript) {
-  return `
-	 (function(window){
-		if(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {
-			return;
-		}
-    ${breakoutInlineScriptContext};
-    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${JSON.stringify(shouldSkipScript)});
-  })(window);
+  const flags = {
+    platform_editor_fix_media_in_renderer: fg('platform_editor_fix_media_in_renderer')
+  };
+  return `(function(window){
+if(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }
+${breakoutInlineScriptContext};
+(${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${JSON.stringify(shouldSkipScript)}, ${JSON.stringify(flags)});
+})(window);
 `;
 }
 export const breakoutInlineScriptContext = `
@@ -60,9 +60,15 @@ export const breakoutInlineScriptContext = `
   breakoutConsts.FullPagePadding = ${FullPagePadding.toString()};
 `;
 
+/**
+ * WARNING: NO EXTERNAL FUNCTION CALL IN THIS FUNCTION
+ * This function will be put to DOM as an inline script.
+ * It can not have any external function dependency.
+ * All required data must be passed in as serializable parameters.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
+function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, flags) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
   const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -109,7 +115,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
           // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
           // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-          isMediaSingleWithPixelWidth && fg('platform_editor_fix_image_size_diff_during_ssr') && fg('platform_editor_fix_media_in_renderer')) {
+          isMediaSingleWithPixelWidth && flags['platform_editor_fix_media_in_renderer']) {
             return;
           }
 

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

@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_WIDTH_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "0.0.0-development";
+const packageVersion = "124.7.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -7,6 +7,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { jsx, css } from '@emotion/react';
 import { N20 } from '@atlaskit/theme/colors';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
 var codeBlockStyleOverrides = css(_defineProperty({
   tabSize: 4,
@@ -31,6 +33,12 @@ var codeBlockStyleOverrides = css(_defineProperty({
   backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
   backgroundPosition: '0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0'
 }));
+var denseModeOverrides = css(_defineProperty({}, "".concat(CodeBlockSharedCssClassName.DS_CODEBLOCK), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: '0.875em',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '1.5em'
+}));
 var CodeBlockContainer = function CodeBlockContainer(_ref) {
   var allowCopyToClipboard = _ref.allowCopyToClipboard,
     allowWrapCodeBlock = _ref.allowWrapCodeBlock,
@@ -44,7 +52,7 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     "data-local-id": localId,
-    css: codeBlockStyleOverrides
+    css: [codeBlockStyleOverrides, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseModeOverrides]
   }, jsx(CodeBlockButtonContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,

package/dist/esm/react/nodes/media/index.js

@@ -7,8 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
-  _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -31,11 +30,9 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
-import { CommentBadge as CommentBadgeComponent, CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
-import { injectIntl } from 'react-intl-next';
+import { CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inline-comments-filter';
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
@@ -141,7 +138,6 @@ var _MediaAnnotations = function MediaAnnotations(_ref4) {
     marks: otherMarks
   }, children) : jsx(Fragment, null, children)));
 };
-var CommentBadge = injectIntl(CommentBadgeComponent);
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
@@ -205,89 +201,6 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
       });
     }
   };
-  return jsx(CommentBadge, _extends({
-    onMouseEnter: function onMouseEnter() {
-      return setEntered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setEntered(false);
-    },
-    status: entered ? 'entered' : status,
-    onClick: onClick
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, rest));
-};
-
-/**
- * Remove CommentBadgeWrapper component above
- * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
- * when clean up platform_editor_add_media_from_url feature flag
- */
-
-var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref6) {
-  var _marks$map2;
-  var marks = _ref6.marks,
-    mediaSingleElement = _ref6.mediaSingleElement,
-    _ref6$isDrafting = _ref6.isDrafting,
-    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
-    rest = _objectWithoutProperties(_ref6, _excluded2);
-  var _useState5 = useState('default'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    status = _useState6[0],
-    setStatus = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    entered = _useState8[0],
-    setEntered = _useState8[1];
-  var updateSubscriber = useInlineCommentSubscriberContext();
-  var activeParentIds = useInlineCommentsFilter({
-    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
-      return mark.attrs.id;
-    })) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
-    filter: {
-      state: AnnotationMarkStates.ACTIVE
-    }
-  });
-  useEffect(function () {
-    var observer = new MutationObserver(function (mutationList) {
-      mutationList.forEach(function (mutation) {
-        var parentNode = mutation.target.parentNode;
-        if (mutation.attributeName === 'data-has-focus') {
-          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && !isMediaCaption;
-          elementHasFocus ? setStatus('active') : setStatus('default');
-        }
-      });
-    });
-    if (mediaSingleElement) {
-      observer.observe(mediaSingleElement, {
-        attributes: true,
-        subtree: true,
-        attributeFilter: ['data-has-focus']
-      });
-    }
-    return function () {
-      observer.disconnect();
-    };
-  }, [mediaSingleElement, setStatus]);
-  if (!isDrafting && !activeParentIds.length) {
-    return null;
-  }
-  var onClick = function onClick(e) {
-    e.preventDefault();
-    if (updateSubscriber) {
-      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
-        annotationIds: activeParentIds,
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        eventTarget: e.target,
-        // use mediaSingle here to align with annotation viewed event dispatched in editor
-        eventTargetType: 'mediaSingle',
-        viewMethod: VIEW_METHOD.BADGE
-      });
-    }
-  };
   return jsx(CommentBadgeNext, _extends({
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
@@ -345,27 +258,21 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, fg('platform_editor_add_media_from_url_rollout') && jsx(MediaBadges, {
+      }, jsx(MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
         mediaHeight: height,
         useMinimumZIndex: true
-      }, function (_ref8) {
-        var visible = _ref8.visible;
+      }, function (_ref7) {
+        var visible = _ref7.visible;
         return jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
           type: _this.props.type,
           url: _this.props.type === 'external' ? _this.props.url : undefined
-        }), showCommentBadge && jsx(CommentBadgeNextWrapper, {
+        }), showCommentBadge && jsx(CommentBadgeWrapper, {
           marks: annotationMarks,
           mediaSingleElement: mediaSingleElement,
           isDrafting: isDrafting
         }));
-      }), !fg('platform_editor_add_media_from_url_rollout') && showCommentBadge && jsx(CommentBadgeWrapper, {
-        marks: annotationMarks,
-        mediaSingleElement: mediaSingleElement,
-        width: width,
-        height: height,
-        isDrafting: isDrafting
       }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
         // Ignored via go/ees005
@@ -428,14 +335,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     draftPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState9 = useState(),
-    _useState0 = _slicedToArray(_useState9, 2),
-    position = _useState0[0],
-    setPosition = _useState0[1];
-  var _useState1 = useState(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    shouldApplyDraftAnnotation = _useState10[0],
-    setShouldApplyDraftAnnotation = _useState10[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    shouldApplyDraftAnnotation = _useState8[0],
+    setShouldApplyDraftAnnotation = _useState8[1];
   useEffect(function () {
     var _draftPosition$from;
     if (pos === undefined) {

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -10,9 +10,9 @@ import { default as React, Fragment, useCallback, useContext, useMemo, useEffect
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
@@ -138,7 +138,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
         height: "100%"
       };
     } else {
-      var _maxWidth = isSSR() && widthAttr && typeof widthAttr === 'number' && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
+      var _maxWidth = isSSR() && widthAttr && typeof widthAttr === 'number' ? Math.max(widthAttr, containerWidth) : containerWidth;
       var maxHeight = height / width * _maxWidth;
       cardDimensions = {
         width: "".concat(_maxWidth, "px"),

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

@@ -15,7 +15,7 @@ import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -1515,7 +1515,9 @@ var rendererAnnotationStylesCommentHeightFix = css({
     paddingTop: "var(--ds-space-025, 2px)"
   }
 });
-var denseStyles = css(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
+var RENDERER_LIST_DENSE_GAP = "max(0px,calc((var(--ak-renderer-base-font-size) - ".concat(akEditorFullPageDenseFontSize, "px)* (4/3)))");
+var TASKLIST_CONTAINER_DENSE_MARGIN = "max(calc(10px + (var(--ak-renderer-base-font-size) - ".concat(akEditorFullPageDenseFontSize, "px) *( 2 / 3)))");
+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, ")"),
   maxHeight: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
@@ -1528,6 +1530,35 @@ var denseStyles = css(_defineProperty(_defineProperty({}, ".".concat(EmojiShared
 }), ".".concat(RendererCssClassName.DOCUMENT, " .ak-editor-panel .ak-editor-panel__icon"), {
   height: "var(--ds-space-250, 20px)",
   width: "var(--ds-space-250, 20px)"
+}), ".".concat(RendererCssClassName.DOCUMENT), {
+  // Adjacent list items
+  'li + li': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  },
+  // Nested lists directly under an li (unordered and ordered)
+  'li > ul, li > ol, .ak-ul li > ul, .ak-ul li > ol, .ak-ol li > ul, .ak-ol li > ol': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  },
+  // Task lists
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-task-list-local-id]': {
+    // Task lists: container top margin
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: TASKLIST_CONTAINER_DENSE_MARGIN
+  },
+  // Task lists: sibling items and nested lists
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-task-list-local-id] > * + *': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-task-list-local-id] [data-task-list-local-id], [data-task-local-id] [data-task-local-id]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    marginTop: RENDERER_LIST_DENSE_GAP
+  }
 }));
 export var RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
@@ -1564,13 +1595,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
       },
-      css: [baseStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && extensionStyle, fg('platform_editor_typography_ugc') ? expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, 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 && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, 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' && responsiveBreakoutWidthFullWidth],
+      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 && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, 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' && responsiveBreakoutWidthFullWidth, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles],
       "data-testid": testId
     }, children)
   );

package/dist/esm/ui/Renderer/breakout-ssr.js

@@ -39,13 +39,22 @@ export function BreakoutSSRInlineScript(_ref) {
   });
 }
 export function createBreakoutInlineScript(id, shouldSkipScript) {
-  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ");\n  })(window);\n");
+  var flags = {
+    platform_editor_fix_media_in_renderer: fg('platform_editor_fix_media_in_renderer')
+  };
+  return "(function(window){\nif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) { return; }\n".concat(breakoutInlineScriptContext, ";\n(").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ", ").concat(JSON.stringify(flags), ");\n})(window);\n");
 }
 export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
 
+/**
+ * WARNING: NO EXTERNAL FUNCTION CALL IN THIS FUNCTION
+ * This function will be put to DOM as an inline script.
+ * It can not have any external function dependency.
+ * All required data must be passed in as serializable parameters.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
+function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, flags) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -92,7 +101,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode) ||
           // skip apply width styling to mediaSingle node with pixel width to avoid image size changing
           // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-          isMediaSingleWithPixelWidth && fg('platform_editor_fix_image_size_diff_during_ssr') && fg('platform_editor_fix_media_in_renderer')) {
+          isMediaSingleWithPixelWidth && flags['platform_editor_fix_media_in_renderer']) {
             return;
           }
 

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

@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "0.0.0-development";
+var packageVersion = "124.7.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.6.0",
+	"version": "124.7.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,8 +23,8 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.2.0",
-		"@atlaskit/adf-utils": "^19.24.0",
+		"@atlaskit/adf-schema": "^51.3.0",
+		"@atlaskit/adf-utils": "^19.25.0",
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.7.0",
 		"@atlaskit/analytics-listeners": "^9.1.0",
 		"@atlaskit/analytics-namespaced-context": "^7.1.0",
@@ -32,16 +32,16 @@
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/editor-json-transformer": "^8.30.0",
+		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.7.0",
+		"@atlaskit/editor-shared-styles": "^3.8.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^69.6.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/link-datasource": "^4.25.0",
+		"@atlaskit/link-datasource": "^4.26.0",
 		"@atlaskit/link-extractors": "^2.4.0",
 		"@atlaskit/media-card": "^79.5.0",
 		"@atlaskit/media-client": "^35.5.0",
@@ -53,13 +53,13 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/react-ufo": "^4.12.0",
-		"@atlaskit/smart-card": "^43.1.0",
+		"@atlaskit/smart-card": "^43.2.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tmp-editor-statsig": "^13.13.0",
 		"@atlaskit/tokens": "^7.0.0",
-		"@atlaskit/tooltip": "^20.5.0",
+		"@atlaskit/tooltip": "^20.6.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.13.0",
+		"@atlaskit/editor-common": "^110.14.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -167,9 +167,6 @@
 		"platform_editor_multi_body_extension_extensibility": {
 			"type": "boolean"
 		},
-		"platform_editor_add_media_from_url_rollout": {
-			"type": "boolean"
-		},
 		"platform_editor_fix_media_in_renderer": {
 			"type": "boolean"
 		},
@@ -209,9 +206,6 @@
 		"platform_editor_bordered_panel_nested_in_table": {
 			"type": "boolean"
 		},
-		"platform_editor_fix_image_size_diff_during_ssr": {
-			"type": "boolean"
-		},
 		"smartcard_avatar_margin_fix": {
 			"type": "boolean"
 		},