@atlaskit/renderer 150.0.7 → 151.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/renderer
 
+## 151.0.0
+
+### Minor Changes
+
+- [`4bec56feedf8a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bec56feedf8a) -
+  Add showHeadingNumbers to display heading outline numbers using shared editor numbering under
+  platform_editor_numbered_headings.
+
+### Patch Changes
+
+- [`4119d93011e41`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4119d93011e41) -
+  Remove `platform_use_unicode_emojis` experiment checks and retain Twemoji images and sprites.
+  Remove the experiment-only `denormaliseStandardRepresentation` export. Call
+  `denormaliseServiceRepresentation` with the service representation instead. Remove the
+  `emoji-id-to-emoji` entrypoint and its `emojiIdToEmoji` utility. Use the existing provider image
+  or sprite representation for Twemoji rendering. Remove the Unicode representation type, renderer,
+  canvas utility, and public `unicode-emoji-image` entrypoint. Remove `renderUnicodeEmojiAsImage`
+  props and the Unicode type guard. Remove the editor Unicode node rendering and the `EMOJI_UNICODE`
+  shared CSS class. Use provider image and sprite representations instead of Unicode
+  representations. Remove the obsolete Unicode rendering props from consumers. Remove the
+  feature-only `getCachedEmojiType` provider API. Use the existing provider lookup methods for cache
+  or catalogue access.
+- Updated dependencies
+
 ## 150.0.7
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -12,12 +12,14 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _numberedHeadings = require("@atlaskit/editor-common/numbered-headings");
 var _table = require("@atlaskit/editor-common/utils/table");
 var _validator = require("@atlaskit/editor-common/utils/validator");
 var _validator2 = require("@atlaskit/editor-common/validator");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _expVal = require("@atlaskit/platform-feature-experiments/exp-val");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expandBody = require("../ui/utils/expand-body");
@@ -51,6 +53,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     var _this = this;
     (0, _classCallCheck2.default)(this, ReactSerializer);
     (0, _defineProperty2.default)(this, "headingIds", []);
+    (0, _defineProperty2.default)(this, "headingNumbers", []);
+    (0, _defineProperty2.default)(this, "headingNumberIndex", 0);
     /**
      * The reason we have this extra array here is because we need to generate the same unique
      * heading id for 2 different nodes: headers and expands (check the implementation of
@@ -203,6 +207,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.headingIdPrefix = init.headingIdPrefix;
     this.disableActions = init.disableActions;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
+    this.showHeadingNumbers = init.showHeadingNumbers === true && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_numbered_headings');
     this.allowCopyToClipboard = init.allowCopyToClipboard;
     this.allowDownloadCodeBlock = init.allowDownloadCodeBlock;
     this.allowWrapCodeBlock = init.allowWrapCodeBlock;
@@ -243,6 +248,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     key: "resetState",
     value: function resetState() {
       this.headingIds = [];
+      this.headingNumbers = [];
+      this.headingNumberIndex = 0;
       this.expandHeadingIds = [];
       this.startPos = this.initStartPos;
     }
@@ -321,6 +328,17 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       // This makes sure that we reset internal state on re-render.
       if (key === 'root-0') {
         this.resetState();
+        if (this.showHeadingNumbers) {
+          var levels = [];
+          fragment.descendants(function (node) {
+            if (node.type.name === 'heading') {
+              levels.push(Number(node.attrs.level));
+              return false;
+            }
+            return !node.isTextblock && !node.isLeaf;
+          });
+          this.headingNumbers = (0, _numberedHeadings.getHeadingNumbers)(levels);
+        }
       }
       return this.renderNode(target, props, key, (0, _expandBody.mergeExpandBodyText)(this.getChildNodes(fragment, !(parentInfo !== null && parentInfo !== void 0 && parentInfo.path.length)).map(function (node, index) {
         if ((0, _nodes.isTextWrapper)(node)) {
@@ -749,6 +767,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         headingId: this.getHeadingId(node, this.headingIds),
+        headingNumber: this.showHeadingNumbers ? this.headingNumbers[this.headingNumberIndex++] : undefined,
         showAnchorLink: this.appearance !== 'comment' && this.allowHeadingAnchorLinks && !this.disableHeadingIDs && this.headingAnchorSupported(path)
       });
     }

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

@@ -86,7 +86,6 @@ var EmojiNode = /*#__PURE__*/function (_PureComponent) {
           shortName: shortName
         }),
         editorEmoji: true,
-        renderUnicodeEmojiAsImage: false,
         onEmojiLoadSuccess: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadSuccess,
         onEmojiLoadFail: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadFail
       });

package/dist/cjs/react/nodes/heading.compiled.css

@@ -2,7 +2,10 @@
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
+._1kt9j9bv:before{content:attr(data-heading-number) "."}
+._1mbqu2gc:before{margin-inline-end:var(--ds-space-100,8px)}
 ._1pbykb7n{z-index:1}
+._1wqoglyw:before{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._ahbqukr8{margin-inline-start:var(--ds-space-negative-400,-2pc)}
 ._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
 ._kqswh2mm{position:relative}

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

@@ -41,6 +41,9 @@ function hasRightAlignmentMark(marks) {
     return mark.type.name === 'alignment' && mark.attrs.align === 'end';
   });
 }
+
+// Matches the editor's decoration-based number prefix without changing heading text or IDs.
+var numberedHeadingStyles = null;
 var wrapperStyles = null;
 var collapsibleHeadingWrapperStyles = null;
 var collapsibleHeadingButtonStyles = null;
@@ -221,12 +224,14 @@ function HeadingWithDuplicateAnchor(props) {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HX, {
+    "data-heading-number": props.headingNumber,
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler,
-    tabIndex: -1
+    tabIndex: -1,
+    className: (0, _runtime.ax)([props.headingNumber && "_1kt9j9bv _1mbqu2gc _1wqoglyw"])
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
@@ -322,12 +327,14 @@ function HeadingWithWrapper(props) {
     headingId: headingId,
     hideFromScreenReader: false
   }), /*#__PURE__*/_react.default.createElement(HX, {
+    "data-heading-number": props.headingNumber,
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: collapsibleHeading ? undefined : mouseEnterHandler,
-    tabIndex: -1
+    tabIndex: -1,
+    className: (0, _runtime.ax)([props.headingNumber && "_1kt9j9bv _1mbqu2gc _1wqoglyw"])
   }, props.children), showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
@@ -349,6 +356,7 @@ function Heading(_ref5) {
     children = _ref5.children,
     dataAttributes = _ref5.dataAttributes,
     headingId = _ref5.headingId,
+    headingNumber = _ref5.headingNumber,
     invisible = _ref5.invisible,
     level = _ref5.level,
     localId = _ref5.localId,
@@ -364,6 +372,7 @@ function Heading(_ref5) {
       allowHeadingAnchorLinks: allowHeadingAnchorLinks,
       dataAttributes: dataAttributes,
       headingId: headingId,
+      headingNumber: headingNumber,
       invisible: invisible,
       level: level,
       localId: localId,
@@ -379,6 +388,7 @@ function Heading(_ref5) {
     allowHeadingAnchorLinks: allowHeadingAnchorLinks,
     dataAttributes: dataAttributes,
     headingId: headingId,
+    headingNumber: headingNumber,
     invisible: invisible,
     level: level,
     localId: localId,

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

@@ -2135,19 +2135,6 @@ var scaledDenseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _
   height: "".concat(_constants2.defaultInlineEmojiHeight, "px"),
   width: "".concat(_constants2.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)({}, "[data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.defaultDenseEmojiHeight, "px")
-}), "h1 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.denseEmojiHeightH1, "px")
-}), "h2 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.denseEmojiHeightH2, "px")
-}), "h3 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.denseEmojiHeightH3, "px")
-}), "h4 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.denseEmojiHeightH4, "px")
-}), ":is(h5, h6, p) [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.defaultDenseEmojiHeight, "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(_constants2.defaultEmojiHeight, "px"),
   minHeight: "".concat(_constants2.defaultEmojiHeight, "px"),
@@ -2181,19 +2168,6 @@ var scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defin
   height: "".concat(_constants2.defaultInlineEmojiHeight, "px"),
   width: "".concat(_constants2.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)({}, "[data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.defaultEmojiHeight, "px")
-}), "h1 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.scaledEmojiHeightH1, "px")
-}), "h2 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.scaledEmojiHeightH2, "px")
-}), "h3 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.scaledEmojiHeightH3, "px")
-}), "h4 [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.scaledEmojiHeightH4, "px")
-}), ":is(h5, h6, p) [data-emoji-type=\"unicode\"]", {
-  '--emoji-common-unicode-size': "".concat(_constants2.defaultEmojiHeight, "px")
-}));
 var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "calc(".concat(_constants2.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_constants.akEditorFullPageDefaultFontSize, ")"),
   width: "calc(".concat(_constants2.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_constants.akEditorFullPageDefaultFontSize, ")"),
@@ -2340,7 +2314,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
-    (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, (0, _fg.fg)('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, 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, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
+    (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, (0, _fg.fg)('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, 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, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -79,7 +79,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "150.0.6";
+var packageVersion = "150.0.7";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -259,6 +259,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       headingIdPrefix: props.headingIdPrefix,
       disableActions: props.disableActions,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      showHeadingNumbers: props.showHeadingNumbers,
       allowColumnSorting: props.allowColumnSorting,
       fireAnalyticsEvent: _fireAnalyticsEvent,
       shouldOpenMediaViewer: props.shouldOpenMediaViewer,

package/dist/es2019/react/index.js

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { getHeadingNumbers } from '@atlaskit/editor-common/numbered-headings';
 import { getColumnWidths } from '@atlaskit/editor-common/utils/table';
 import { getMarksByOrder } from '@atlaskit/editor-common/utils/validator';
 import { isSameMark } from '@atlaskit/editor-common/validator';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { expVal } from '@atlaskit/platform-feature-experiments/exp-val';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { mergeExpandBodyText, withExpandBodyBlock } from '../ui/utils/expand-body';
@@ -35,6 +37,8 @@ function mergeMarks(marksAndNodes) {
 export default class ReactSerializer {
   constructor(init) {
     _defineProperty(this, "headingIds", []);
+    _defineProperty(this, "headingNumbers", []);
+    _defineProperty(this, "headingNumberIndex", 0);
     /**
      * The reason we have this extra array here is because we need to generate the same unique
      * heading id for 2 different nodes: headers and expands (check the implementation of
@@ -190,6 +194,7 @@ export default class ReactSerializer {
     this.headingIdPrefix = init.headingIdPrefix;
     this.disableActions = init.disableActions;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
+    this.showHeadingNumbers = init.showHeadingNumbers === true && isExperimentEnabled('platform_editor_numbered_headings');
     this.allowCopyToClipboard = init.allowCopyToClipboard;
     this.allowDownloadCodeBlock = init.allowDownloadCodeBlock;
     this.allowWrapCodeBlock = init.allowWrapCodeBlock;
@@ -228,6 +233,8 @@ export default class ReactSerializer {
   }
   resetState() {
     this.headingIds = [];
+    this.headingNumbers = [];
+    this.headingNumberIndex = 0;
     this.expandHeadingIds = [];
     this.startPos = this.initStartPos;
   }
@@ -303,6 +310,17 @@ export default class ReactSerializer {
     // This makes sure that we reset internal state on re-render.
     if (key === 'root-0') {
       this.resetState();
+      if (this.showHeadingNumbers) {
+        const levels = [];
+        fragment.descendants(node => {
+          if (node.type.name === 'heading') {
+            levels.push(Number(node.attrs.level));
+            return false;
+          }
+          return !node.isTextblock && !node.isLeaf;
+        });
+        this.headingNumbers = getHeadingNumbers(levels);
+      }
     }
     return this.renderNode(target, props, key, mergeExpandBodyText(this.getChildNodes(fragment, !(parentInfo !== null && parentInfo !== void 0 && parentInfo.path.length)).map((node, index) => {
       if (isTextWrapper(node)) {
@@ -669,6 +687,7 @@ export default class ReactSerializer {
     return {
       ...this.getProps(node, path),
       headingId: this.getHeadingId(node, this.headingIds),
+      headingNumber: this.showHeadingNumbers ? this.headingNumbers[this.headingNumberIndex++] : undefined,
       showAnchorLink: this.appearance !== 'comment' && this.allowHeadingAnchorLinks && !this.disableHeadingIDs && this.headingAnchorSupported(path)
     };
   }

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

@@ -74,7 +74,6 @@ class EmojiNode extends PureComponent {
           shortName
         }),
         editorEmoji: true,
-        renderUnicodeEmojiAsImage: false,
         onEmojiLoadSuccess: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadSuccess,
         onEmojiLoadFail: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadFail
       });

package/dist/es2019/react/nodes/heading.compiled.css

@@ -2,7 +2,10 @@
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
+._1kt9j9bv:before{content:attr(data-heading-number) "."}
+._1mbqu2gc:before{margin-inline-end:var(--ds-space-100,8px)}
 ._1pbykb7n{z-index:1}
+._1wqoglyw:before{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._ahbqukr8{margin-inline-start:var(--ds-space-negative-400,-2pc)}
 ._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
 ._kqswh2mm{position:relative}

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

@@ -29,6 +29,9 @@ function hasRightAlignmentMark(marks) {
   }
   return marks.some(mark => mark.type.name === 'alignment' && mark.attrs.align === 'end');
 }
+
+// Matches the editor's decoration-based number prefix without changing heading text or IDs.
+const numberedHeadingStyles = null;
 const wrapperStyles = null;
 const collapsibleHeadingWrapperStyles = null;
 const collapsibleHeadingButtonStyles = null;
@@ -190,12 +193,14 @@ function HeadingWithDuplicateAnchor(props) {
     }
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HX, {
+    "data-heading-number": props.headingNumber,
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ax([props.headingNumber && "_1kt9j9bv _1mbqu2gc _1wqoglyw"])
   }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
@@ -281,12 +286,14 @@ function HeadingWithWrapper(props) {
     headingId: headingId,
     hideFromScreenReader: false
   }), /*#__PURE__*/React.createElement(HX, {
+    "data-heading-number": props.headingNumber,
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: collapsibleHeading ? undefined : mouseEnterHandler,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ax([props.headingNumber && "_1kt9j9bv _1mbqu2gc _1wqoglyw"])
   }, props.children), showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
@@ -308,6 +315,7 @@ function Heading({
   children,
   dataAttributes,
   headingId,
+  headingNumber,
   invisible,
   level,
   localId,
@@ -324,6 +332,7 @@ function Heading({
       allowHeadingAnchorLinks: allowHeadingAnchorLinks,
       dataAttributes: dataAttributes,
       headingId: headingId,
+      headingNumber: headingNumber,
       invisible: invisible,
       level: level,
       localId: localId,
@@ -339,6 +348,7 @@ function Heading({
     allowHeadingAnchorLinks: allowHeadingAnchorLinks,
     dataAttributes: dataAttributes,
     headingId: headingId,
+    headingNumber: headingNumber,
     invisible: invisible,
     level: level,
     localId: localId,

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

@@ -2706,26 +2706,6 @@ 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`
-  }
-});
 const scaledEmojiStyles = css({
   [`.${EmojiSharedCssClassName.EMOJI_IMAGE}`]: {
     height: `${defaultEmojiHeight}px`,
@@ -2768,26 +2748,6 @@ 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`
-  }
-});
 const denseStyles = css({
   // Scale emoji size based on base font size
   // Default: 20px emoji at 16px base font
@@ -2976,7 +2936,7 @@ export const RendererStyleContainer = props => {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
-    isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, 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, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
+    isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, 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, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -64,7 +64,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "150.0.6";
+const packageVersion = "150.0.7";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -250,6 +250,7 @@ export const RendererFunctionalComponent = props => {
       headingIdPrefix: props.headingIdPrefix,
       disableActions: props.disableActions,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      showHeadingNumbers: props.showHeadingNumbers,
       allowColumnSorting: props.allowColumnSorting,
       fireAnalyticsEvent: fireAnalyticsEvent,
       shouldOpenMediaViewer: props.shouldOpenMediaViewer,

package/dist/esm/react/index.js

@@ -8,12 +8,14 @@ var _excluded = ["key"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import { getHeadingNumbers } from '@atlaskit/editor-common/numbered-headings';
 import { getColumnWidths } from '@atlaskit/editor-common/utils/table';
 import { getMarksByOrder } from '@atlaskit/editor-common/utils/validator';
 import { isSameMark } from '@atlaskit/editor-common/validator';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { expVal } from '@atlaskit/platform-feature-experiments/exp-val';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { mergeExpandBodyText, withExpandBodyBlock } from '../ui/utils/expand-body';
@@ -44,6 +46,8 @@ var ReactSerializer = /*#__PURE__*/function () {
     var _this = this;
     _classCallCheck(this, ReactSerializer);
     _defineProperty(this, "headingIds", []);
+    _defineProperty(this, "headingNumbers", []);
+    _defineProperty(this, "headingNumberIndex", 0);
     /**
      * The reason we have this extra array here is because we need to generate the same unique
      * heading id for 2 different nodes: headers and expands (check the implementation of
@@ -196,6 +200,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.headingIdPrefix = init.headingIdPrefix;
     this.disableActions = init.disableActions;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
+    this.showHeadingNumbers = init.showHeadingNumbers === true && isExperimentEnabled('platform_editor_numbered_headings');
     this.allowCopyToClipboard = init.allowCopyToClipboard;
     this.allowDownloadCodeBlock = init.allowDownloadCodeBlock;
     this.allowWrapCodeBlock = init.allowWrapCodeBlock;
@@ -236,6 +241,8 @@ var ReactSerializer = /*#__PURE__*/function () {
     key: "resetState",
     value: function resetState() {
       this.headingIds = [];
+      this.headingNumbers = [];
+      this.headingNumberIndex = 0;
       this.expandHeadingIds = [];
       this.startPos = this.initStartPos;
     }
@@ -314,6 +321,17 @@ var ReactSerializer = /*#__PURE__*/function () {
       // This makes sure that we reset internal state on re-render.
       if (key === 'root-0') {
         this.resetState();
+        if (this.showHeadingNumbers) {
+          var levels = [];
+          fragment.descendants(function (node) {
+            if (node.type.name === 'heading') {
+              levels.push(Number(node.attrs.level));
+              return false;
+            }
+            return !node.isTextblock && !node.isLeaf;
+          });
+          this.headingNumbers = getHeadingNumbers(levels);
+        }
       }
       return this.renderNode(target, props, key, mergeExpandBodyText(this.getChildNodes(fragment, !(parentInfo !== null && parentInfo !== void 0 && parentInfo.path.length)).map(function (node, index) {
         if (isTextWrapper(node)) {
@@ -742,6 +760,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         headingId: this.getHeadingId(node, this.headingIds),
+        headingNumber: this.showHeadingNumbers ? this.headingNumbers[this.headingNumberIndex++] : undefined,
         showAnchorLink: this.appearance !== 'comment' && this.allowHeadingAnchorLinks && !this.disableHeadingIDs && this.headingAnchorSupported(path)
       });
     }

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

@@ -82,7 +82,6 @@ var EmojiNode = /*#__PURE__*/function (_PureComponent) {
           shortName: shortName
         }),
         editorEmoji: true,
-        renderUnicodeEmojiAsImage: false,
         onEmojiLoadSuccess: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadSuccess,
         onEmojiLoadFail: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadFail
       });

package/dist/esm/react/nodes/heading.compiled.css

@@ -2,7 +2,10 @@
 ._152tidpf{inset-block-start:0}
 ._1e02idpf{inset-inline-start:0}
 ._1e0c1ule{display:block}
+._1kt9j9bv:before{content:attr(data-heading-number) "."}
+._1mbqu2gc:before{margin-inline-end:var(--ds-space-100,8px)}
 ._1pbykb7n{z-index:1}
+._1wqoglyw:before{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._ahbqukr8{margin-inline-start:var(--ds-space-negative-400,-2pc)}
 ._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
 ._kqswh2mm{position:relative}

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

@@ -34,6 +34,9 @@ function hasRightAlignmentMark(marks) {
     return mark.type.name === 'alignment' && mark.attrs.align === 'end';
   });
 }
+
+// Matches the editor's decoration-based number prefix without changing heading text or IDs.
+var numberedHeadingStyles = null;
 var wrapperStyles = null;
 var collapsibleHeadingWrapperStyles = null;
 var collapsibleHeadingButtonStyles = null;
@@ -214,12 +217,14 @@ function HeadingWithDuplicateAnchor(props) {
     }
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HX, {
+    "data-heading-number": props.headingNumber,
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ax([props.headingNumber && "_1kt9j9bv _1mbqu2gc _1wqoglyw"])
   }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
@@ -315,12 +320,14 @@ function HeadingWithWrapper(props) {
     headingId: headingId,
     hideFromScreenReader: false
   }), /*#__PURE__*/React.createElement(HX, {
+    "data-heading-number": props.headingNumber,
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: collapsibleHeading ? undefined : mouseEnterHandler,
-    tabIndex: -1
+    tabIndex: -1,
+    className: ax([props.headingNumber && "_1kt9j9bv _1mbqu2gc _1wqoglyw"])
   }, props.children), showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
@@ -342,6 +349,7 @@ function Heading(_ref5) {
     children = _ref5.children,
     dataAttributes = _ref5.dataAttributes,
     headingId = _ref5.headingId,
+    headingNumber = _ref5.headingNumber,
     invisible = _ref5.invisible,
     level = _ref5.level,
     localId = _ref5.localId,
@@ -357,6 +365,7 @@ function Heading(_ref5) {
       allowHeadingAnchorLinks: allowHeadingAnchorLinks,
       dataAttributes: dataAttributes,
       headingId: headingId,
+      headingNumber: headingNumber,
       invisible: invisible,
       level: level,
       localId: localId,
@@ -372,6 +381,7 @@ function Heading(_ref5) {
     allowHeadingAnchorLinks: allowHeadingAnchorLinks,
     dataAttributes: dataAttributes,
     headingId: headingId,
+    headingNumber: headingNumber,
     invisible: invisible,
     level: level,
     localId: localId,

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

@@ -2128,19 +2128,6 @@ var scaledDenseEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty
   height: "".concat(defaultInlineEmojiHeight, "px"),
   width: "".concat(defaultInlineEmojiHeight, "px")
 }));
-var scaledDenseUnicodeEmojiStylesNew = css(_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")
-}));
 var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
   height: "".concat(defaultEmojiHeight, "px"),
   minHeight: "".concat(defaultEmojiHeight, "px"),
@@ -2174,19 +2161,6 @@ var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_def
   height: "".concat(defaultInlineEmojiHeight, "px"),
   width: "".concat(defaultInlineEmojiHeight, "px")
 }));
-var scaledUnicodeEmojiStylesNew = css(_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")
-}));
 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, ")"),
@@ -2333,7 +2307,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
-    isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, 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, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
+    isExperimentEnabled('platform_editor_remove_important_in_render_ext') ? extensionAsInlineStyle : oldExtensionAsInlineStyle, fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, 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, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -69,7 +69,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "150.0.6";
+var packageVersion = "150.0.7";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -249,6 +249,7 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       headingIdPrefix: props.headingIdPrefix,
       disableActions: props.disableActions,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      showHeadingNumbers: props.showHeadingNumbers,
       allowColumnSorting: props.allowColumnSorting,
       fireAnalyticsEvent: _fireAnalyticsEvent,
       shouldOpenMediaViewer: props.shouldOpenMediaViewer,

package/dist/types/react/index.d.ts

@@ -53,6 +53,7 @@ export interface ReactSerializerInit {
     providers?: ProviderFactory;
     shouldDisplayExtensionAsInline?: (extensionParams: ExtensionParams<Parameters>) => boolean;
     shouldOpenMediaViewer?: boolean;
+    showHeadingNumbers?: boolean;
     smartLinks?: SmartLinksOptions;
     /**
      * Used for to set positions on nodes for annotations.
@@ -81,6 +82,9 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private headingIdPrefix?;
     private disableActions?;
     private headingIds;
+    private showHeadingNumbers;
+    private headingNumbers;
+    private headingNumberIndex;
     /**
      * The reason we have this extra array here is because we need to generate the same unique
      * heading id for 2 different nodes: headers and expands (check the implementation of

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

@@ -10,6 +10,7 @@ export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingProps = NodeProps<{
     allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
     headingId?: string;
+    headingNumber?: string;
     invisible?: boolean;
     level: HeadingLevels;
     localId?: string;
@@ -23,5 +24,5 @@ type HeadingProps = NodeProps<{
  * - Otherwise preserves HeadingWithDuplicateAnchor (old structure), adding only the collapse
  *   container when the top-level heading is collapsible
  */
-declare function Heading({ allowHeadingAnchorLinks, children, dataAttributes, headingId, invisible, level, localId, marks, nodeType, path, showAnchorLink, serializer, asInline, }: HeadingProps): React.JSX.Element;
+declare function Heading({ allowHeadingAnchorLinks, children, dataAttributes, headingId, headingNumber, invisible, level, localId, marks, nodeType, path, showAnchorLink, serializer, asInline, }: HeadingProps): React.JSX.Element;
 export default Heading;

package/dist/types/ui/renderer-props.d.ts

@@ -215,6 +215,11 @@ export interface RendererProps {
     shouldDisplayExtensionAsInline?: (extensionParams: ExtensionParams<Parameters>) => boolean;
     shouldOpenMediaViewer?: boolean;
     shouldRemoveEmptySpaceAroundContent?: boolean;
+    /**
+     * Displays decimal outline numbers on headings when platform_editor_numbered_headings is enabled.
+     * Defaults to false. Numbering is local to this renderer and does not change the document.
+     */
+    showHeadingNumbers?: boolean;
     smartLinks?: SmartLinksOptions;
     stickyHeaders?: StickyHeaderProps;
     textHighlighter?: TextHighlighter;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "150.0.7",
+	"version": "151.0.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,9 +47,9 @@
 		"@atlaskit/editor-json-transformer": "^10.0.0",
 		"@atlaskit/editor-palette": "^3.5.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
-		"@atlaskit/editor-shared-styles": "^4.4.0",
+		"@atlaskit/editor-shared-styles": "^4.5.0",
 		"@atlaskit/editor-smart-link-draggable": "^1.2.0",
-		"@atlaskit/emoji": "^72.5.0",
+		"@atlaskit/emoji": "^73.0.0",
 		"@atlaskit/feature-gate-js-client": "^7.0.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/link": "^5.1.0",
@@ -88,7 +88,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^131.5.0",
+		"@atlaskit/editor-common": "^132.0.0",
 		"@atlaskit/link-provider": "^6.0.0",
 		"@atlaskit/media-core": "^39.0.0",
 		"react": "^18.2.0 || ^19.2.0",
@@ -100,10 +100,10 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-gas-types": "^6.2.0",
 		"@atlaskit/checkbox": "^19.3.0",
-		"@atlaskit/editor-plugin-media": "^29.1.0",
+		"@atlaskit/editor-plugin-media": "^30.0.0",
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/inline-edit": "^16.4.0",
-		"@atlaskit/json-ld-types": "^2.0.0",
+		"@atlaskit/json-ld-types": "^2.1.0",
 		"@atlaskit/link-client-extension": "^8.0.0",
 		"@atlaskit/link-provider": "^6.0.0",
 		"@atlaskit/link-test-helpers": "^11.2.0",
@@ -111,7 +111,7 @@
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-state": "^4.0.0",
 		"@atlaskit/media-test-helpers": "^43.0.0",
-		"@atlaskit/mention": "^30.2.0",
+		"@atlaskit/mention": "^30.3.0",
 		"@atlaskit/modal-dialog": "^17.0.0",
 		"@atlaskit/navigation-system": "^11.3.0",
 		"@atlaskit/primitives": "^22.6.0",