@atlaskit/renderer 133.14.1 → 133.15.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 133.15.0
+
+### Minor Changes
+
+- [`d6d4b831bab67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d6d4b831bab67) -
+  [ux] Implements collapsible headings feature for the full-page renderer.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 133.14.2
+
+### Patch Changes
+
+- [`22bc749d89dc9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22bc749d89dc9) -
+  Clean up platform_change_emoji_button_label FG and avoid unsupported ARIA attributes on editor
+  emoji nodes Stabilize renderer integration tests for smart cards, heading anchors, and table
+  triple-click selection
+- Updated dependencies
+
 ## 133.14.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../../design-system/code/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-json-transformer/afm-cc/tsconfig.json"
 		},

package/dist/cjs/messages.js

@@ -3,11 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableCellMessages = exports.inlineCommentMessages = exports.headingAnchorLinkMessages = void 0;
+exports.tableCellMessages = exports.inlineCommentMessages = exports.headingAnchorLinkMessages = exports.collapsibleHeadingMessages = void 0;
 var _reactIntl = require("react-intl");
 /* eslint-disable @atlaskit/editor/no-re-export */
 // Entry file in package.json
 
+var collapsibleHeadingMessages = exports.collapsibleHeadingMessages = (0, _reactIntl.defineMessages)({
+  collapseSection: {
+    id: 'fabric.editor.collapsibleHeading.collapseSection.ai-non-final',
+    defaultMessage: 'Collapse section',
+    description: 'Accessible label and tooltip for the button beside an expanded renderer heading. Activating the button hides the content in that heading section.'
+  },
+  expandSection: {
+    id: 'fabric.editor.collapsibleHeading.expandSection.ai-non-final',
+    defaultMessage: 'Expand section',
+    description: 'Accessible label and tooltip for the button beside a collapsed renderer heading. Activating the button reveals the content in that heading section.'
+  }
+});
 var headingAnchorLinkMessages = exports.headingAnchorLinkMessages = (0, _reactIntl.defineMessages)({
   copyHeadingLinkToClipboard: {
     id: 'fabric.editor.headingLink.copyAnchorLink',

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

@@ -0,0 +1,12 @@
+._152tidpf{inset-block-start:0}
+._1e02idpf{inset-inline-start:0}
+._1e0c1ule{display:block}
+._1pbykb7n{z-index:1}
+._ahbqukr8{margin-inline-start:var(--ds-space-negative-400,-2pc)}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._tzy4idpf{opacity:0}
+@media (hover:none){._tza3kb7n{opacity:1}._12yg1wug{pointer-events:auto}}
+@media (pointer:coarse){._xrqrkb7n{opacity:1}._l4c51wug{pointer-events:auto}}

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

@@ -1,3 +1,4 @@
+/* heading.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,24 +6,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./heading.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _new = require("@atlaskit/button/new");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
 var _clipboard = require("../utils/clipboard");
+var _messages = require("../../messages");
+var _collapsibleHeadings = require("../../ui/collapsible-headings");
 var _headingAnchor = _interopRequireDefault(require("./heading-anchor"));
-var _react2 = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var RENDERER_HEADING_WRAPPER = 'renderer-heading-wrapper';
+var RENDERER_COLLAPSIBLE_HEADING_WRAPPER = 'renderer-collapsible-heading-wrapper';
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var url = new URL(window.location.href);
@@ -38,13 +41,29 @@ function hasRightAlignmentMark(marks) {
     return mark.type.name === 'alignment' && mark.attrs.align === 'end';
   });
 }
-var wrapperStyles = (0, _react2.css)({
-  // Important: do NOT use flex here.
-  // With flex + baseline alignment, the anchor aligns to the *first line* of a multi-line heading,
-  // which visually places it at the top-right. We want the anchor to sit immediately after the
-  // last character of the heading (i.e. after the final wrapped line), so we use normal inline flow.
-  display: 'block'
-});
+var wrapperStyles = null;
+var collapsibleHeadingWrapperStyles = null;
+var collapsibleHeadingButtonStyles = null;
+var collapsibleHeadingButtonHiddenStyles = null;
+var ChevronDownSmallIcon = function ChevronDownSmallIcon() {
+  return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+    label: "",
+    size: "small"
+  });
+};
+var ChevronRightSmallIcon = function ChevronRightSmallIcon() {
+  return /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+    label: "",
+    size: "small"
+  });
+};
+var hasFocusVisible = function hasFocusVisible(target) {
+  try {
+    return target.matches(':focus-visible');
+  } catch (_unused) {
+    return true;
+  }
+};
 var getHeadingAnchorLinksConfig = function getHeadingAnchorLinksConfig(allowHeadingAnchorLinks) {
   return (0, _typeof2.default)(allowHeadingAnchorLinks) === 'object' ? allowHeadingAnchorLinks : undefined;
 };
@@ -54,9 +73,9 @@ function WrappedHeadingAnchor(_ref) {
     level = _ref.level,
     headingId = _ref.headingId,
     hideFromScreenReader = _ref.hideFromScreenReader;
-  return (0, _react2.jsx)(_analyticsContext.default.Consumer, null, function (_ref2) {
+  return /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return (0, _react2.jsx)(_headingAnchor.default, {
+    return /*#__PURE__*/_react.default.createElement(_headingAnchor.default, {
       enableNestedHeaderLinks: enableNestedHeaderLinks,
       level: level
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -76,6 +95,88 @@ function WrappedHeadingAnchor(_ref) {
     });
   });
 }
+function CollapsibleHeadingButton(_ref3) {
+  var collapsibleHeading = _ref3.collapsibleHeading,
+    isHeadingHovered = _ref3.isHeadingHovered;
+  var intl = (0, _reactIntl.useIntl)();
+  var _React$useState = _react.default.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var isCollapsed = collapsibleHeading.isCollapsed,
+    toggle = collapsibleHeading.toggle;
+  var isVisible = isCollapsed || isFocused || isHeadingHovered;
+  var handleClick = _react.default.useCallback(function (event) {
+    event.stopPropagation();
+    toggle();
+  }, [toggle]);
+  var handleFocus = _react.default.useCallback(function (event) {
+    setIsFocused(hasFocusVisible(event.target));
+  }, []);
+  var handleBlur = _react.default.useCallback(function () {
+    return setIsFocused(false);
+  }, []);
+  var handleKeyDown = _react.default.useCallback(function () {
+    return setIsFocused(true);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    spacing: "compact",
+    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    label: intl.formatMessage(isCollapsed ? _messages.collapsibleHeadingMessages.expandSection : _messages.collapsibleHeadingMessages.collapseSection),
+    "aria-expanded": !isCollapsed,
+    isTooltipDisabled: false,
+    testId: "collapsible-heading-button",
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  }));
+}
+function CollapsibleHeadingContainer(_ref4) {
+  var children = _ref4.children,
+    collapsibleHeading = _ref4.collapsibleHeading,
+    headingLevel = _ref4.headingLevel;
+  var mouseEntered = _react.default.useRef(false);
+  var _React$useState3 = _react.default.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    isHovered = _React$useState4[0],
+    setIsHovered = _React$useState4[1];
+  var _React$useState5 = _react.default.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    isFocused = _React$useState6[0],
+    setIsFocused = _React$useState6[1];
+  var mouseEnterHandler = function mouseEnterHandler() {
+    if (!mouseEntered.current) {
+      (0, _interactionMetrics.abortAll)('new_interaction');
+      mouseEntered.current = true;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": RENDERER_COLLAPSIBLE_HEADING_WRAPPER,
+    "data-level": headingLevel,
+    onMouseEnter: function onMouseEnter() {
+      mouseEnterHandler();
+      setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    onFocus: function onFocus(event) {
+      return setIsFocused(hasFocusVisible(event.target));
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    },
+    className: (0, _runtime.ax)(["_ahbqukr8 _bozgxy5q _kqswh2mm"])
+  }, /*#__PURE__*/_react.default.createElement(CollapsibleHeadingButton, {
+    collapsibleHeading: collapsibleHeading,
+    isHeadingHovered: isHovered || isFocused
+  }), children);
+}
+
 /**
  * Old heading structure (before a11y fix):
  * - headning anchor is rendered INSIDE the heading element
@@ -108,28 +209,28 @@ function HeadingWithDuplicateAnchor(props) {
       mouseEntered.current = true;
     }
   };
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(HX, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HX, {
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler,
     tabIndex: -1
-  }, (0, _react2.jsx)(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
     headingId: headingId,
     hideFromScreenReader: true
-  }), props.children, showAnchorLink && headingId && !isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
+  }), props.children, showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
     headingId: headingId,
     hideFromScreenReader: true
-  }))), (0, _react2.jsx)(_visuallyHidden.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
     testId: "visually-hidden-heading-anchor"
-  }, showAnchorLink && headingId && (0, _react2.jsx)(WrappedHeadingAnchor, {
+  }, showAnchorLink && headingId && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
@@ -150,9 +251,18 @@ function HeadingWithWrapper(props) {
     marks = props.marks,
     invisible = props.invisible,
     localId = props.localId,
-    asInline = props.asInline;
+    asInline = props.asInline,
+    collapsibleHeading = props.collapsibleHeading;
   var HX = "h".concat(props.level);
   var mouseEntered = _react.default.useRef(false);
+  var _React$useState7 = _react.default.useState(false),
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    isHovered = _React$useState8[0],
+    setIsHovered = _React$useState8[1];
+  var _React$useState9 = _react.default.useState(false),
+    _React$useState0 = (0, _slicedToArray2.default)(_React$useState9, 2),
+    isFocused = _React$useState0[0],
+    setIsFocused = _React$useState0[1];
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var headingAnchorLinksConfig = getHeadingAnchorLinksConfig(allowHeadingAnchorLinks);
@@ -160,7 +270,7 @@ function HeadingWithWrapper(props) {
   var getHeadingLink = headingAnchorLinksConfig === null || headingAnchorLinksConfig === void 0 ? void 0 : headingAnchorLinksConfig.getHeadingLink;
   var headingIdToUse = invisible ? undefined : headingId;
   var mouseEnterHandler = function mouseEnterHandler() {
-    if (showAnchorLink && !mouseEntered.current) {
+    if ((showAnchorLink || collapsibleHeading) && !mouseEntered.current) {
       // Abort TTVC calculation when the mouse hovers over heading. Hovering over
       // heading render heading anchor and inline comment buttons. These user-induced
       // DOM changes are valid reasons to abort the TTVC calculation.
@@ -168,26 +278,45 @@ function HeadingWithWrapper(props) {
       mouseEntered.current = true;
     }
   };
-  return (0, _react2.jsx)("div", {
+  var handleWrapperMouseEnter = function handleWrapperMouseEnter() {
+    mouseEnterHandler();
+    setIsHovered(true);
+  };
+  var handleWrapperMouseLeave = function handleWrapperMouseLeave() {
+    return setIsHovered(false);
+  };
+  var handleWrapperFocus = function handleWrapperFocus(event) {
+    return setIsFocused(hasFocusVisible(event.target));
+  };
+  var handleWrapperBlur = function handleWrapperBlur() {
+    return setIsFocused(false);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: RENDERER_HEADING_WRAPPER,
+    className: (0, _runtime.ax)(["_1e0c1ule", collapsibleHeading && "_ahbqukr8 _bozgxy5q _kqswh2mm", RENDERER_HEADING_WRAPPER]),
     "data-testid": RENDERER_HEADING_WRAPPER,
     "data-level": props.level,
-    css: wrapperStyles
-  }, showAnchorLink && headingId && isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
+    onMouseEnter: collapsibleHeading ? handleWrapperMouseEnter : undefined,
+    onMouseLeave: collapsibleHeading ? handleWrapperMouseLeave : undefined,
+    onFocus: collapsibleHeading ? handleWrapperFocus : undefined,
+    onBlur: collapsibleHeading ? handleWrapperBlur : undefined
+  }, collapsibleHeading && /*#__PURE__*/_react.default.createElement(CollapsibleHeadingButton, {
+    collapsibleHeading: collapsibleHeading,
+    isHeadingHovered: isHovered || isFocused
+  }), showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
     headingId: headingId,
     hideFromScreenReader: false
-  }), (0, _react2.jsx)(HX, {
+  }), /*#__PURE__*/_react.default.createElement(HX, {
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
     "data-as-inline": asInline,
-    onMouseEnter: mouseEnterHandler,
+    onMouseEnter: collapsibleHeading ? undefined : mouseEnterHandler,
     tabIndex: -1
-  }, props.children), showAnchorLink && headingId && !isRightAligned && (0, _react2.jsx)(WrappedHeadingAnchor, {
+  }, props.children), showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
@@ -200,23 +329,26 @@ function HeadingWithWrapper(props) {
  * Gated Heading component:
  * - When platform_editor_copy_link_a11y_inconsistency_fix experiment is enabled,
  *   returns HeadingWithWrapper (new a11y-improved structure)
- * - Otherwise returns HeadingWithDuplicateAnchor (old structure)
+ * - Otherwise preserves HeadingWithDuplicateAnchor (old structure), adding only the collapse
+ *   container when the top-level heading is collapsible
  */
-function Heading(_ref3) {
-  var allowHeadingAnchorLinks = _ref3.allowHeadingAnchorLinks,
-    children = _ref3.children,
-    dataAttributes = _ref3.dataAttributes,
-    headingId = _ref3.headingId,
-    invisible = _ref3.invisible,
-    level = _ref3.level,
-    localId = _ref3.localId,
-    marks = _ref3.marks,
-    nodeType = _ref3.nodeType,
-    showAnchorLink = _ref3.showAnchorLink,
-    serializer = _ref3.serializer,
-    asInline = _ref3.asInline;
+function Heading(_ref5) {
+  var allowHeadingAnchorLinks = _ref5.allowHeadingAnchorLinks,
+    children = _ref5.children,
+    dataAttributes = _ref5.dataAttributes,
+    headingId = _ref5.headingId,
+    invisible = _ref5.invisible,
+    level = _ref5.level,
+    localId = _ref5.localId,
+    marks = _ref5.marks,
+    nodeType = _ref5.nodeType,
+    path = _ref5.path,
+    showAnchorLink = _ref5.showAnchorLink,
+    serializer = _ref5.serializer,
+    asInline = _ref5.asInline;
+  var collapsibleHeading = (0, _collapsibleHeadings.useCollapsibleHeading)(dataAttributes['data-renderer-start-pos'], (path === null || path === void 0 ? void 0 : path.length) === 0);
   if ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true)) {
-    return (0, _react2.jsx)(HeadingWithWrapper, {
+    return /*#__PURE__*/_react.default.createElement(HeadingWithWrapper, {
       allowHeadingAnchorLinks: allowHeadingAnchorLinks,
       dataAttributes: dataAttributes,
       headingId: headingId,
@@ -227,10 +359,11 @@ function Heading(_ref3) {
       nodeType: nodeType,
       serializer: serializer,
       showAnchorLink: showAnchorLink,
-      asInline: asInline
+      asInline: asInline,
+      collapsibleHeading: collapsibleHeading
     }, children);
   }
-  return (0, _react2.jsx)(HeadingWithDuplicateAnchor, {
+  var headingWithDuplicateAnchor = /*#__PURE__*/_react.default.createElement(HeadingWithDuplicateAnchor, {
     allowHeadingAnchorLinks: allowHeadingAnchorLinks,
     dataAttributes: dataAttributes,
     headingId: headingId,
@@ -243,5 +376,12 @@ function Heading(_ref3) {
     showAnchorLink: showAnchorLink,
     asInline: asInline
   }, children);
+  if (collapsibleHeading) {
+    return /*#__PURE__*/_react.default.createElement(CollapsibleHeadingContainer, {
+      collapsibleHeading: collapsibleHeading,
+      headingLevel: level
+    }, headingWithDuplicateAnchor);
+  }
+  return headingWithDuplicateAnchor;
 }
 var _default = exports.default = Heading;

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

@@ -27,6 +27,7 @@ var _emoji = require("@atlaskit/editor-common/emoji");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _collapsibleHeadingsDom = require("../collapsible-headings-dom");
 var _css9, _$concat3, _$concat6;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
@@ -95,7 +96,13 @@ var baseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProper
   display: 'block',
   height: 0,
   clear: 'both'
-}), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> [".concat(_collapsibleHeadingsDom.COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "][hidden='until-found']"), {
+  display: 'block',
+  minBlockSize: 0,
+  marginBlock: 0,
+  paddingBlock: 0,
+  borderBlockWidth: 0
+}), ".".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '22px',
   transform: "translateY(-2px)"
 }), "h1", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {

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

@@ -41,6 +41,7 @@ var _RendererActionsContext = require("../RendererActionsContext");
 var _SmartCardStorage = require("../SmartCardStorage");
 var _activeHeaderIdProvider = require("../active-header-id-provider");
 var _annotations = require("../annotations");
+var _collapsibleHeadings = require("../collapsible-headings");
 var _ErrorBoundary = require("./ErrorBoundary");
 var _breakoutSsr = require("./breakout-ssr");
 var _clickToEdit = require("./click-to-edit");
@@ -72,7 +73,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 = "133.14.0";
+var packageVersion = "133.14.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -468,6 +469,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       timeZone: props.timeZone
     });
   }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
+  var isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && (0, _expValEquals.expValEquals)('platform_renderer_collapsible_headings', 'isEnabled', true);
   (0, _useScrollToBlock.useScrollToBlock)(editorRef, props.document, props.scrollToBlock);
   try {
     var _rendererContext$feat, _props$media;
@@ -527,7 +529,11 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       doc: pmDoc,
       schema: schema,
       onAnalyticsEvent: _fireAnalyticsEvent
-    }, result)))))));
+    }, (0, _react2.jsx)(_collapsibleHeadings.CollapsibleHeadingsProvider, {
+      pmDocument: pmDoc,
+      rendererRef: editorRef,
+      isEnabled: isCollapsibleHeadingsEnabled
+    }, result))))))));
     var rendererResult = props.truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
       height: props.maxHeight,
       fadeHeight: props.fadeOutHeight

package/dist/cjs/ui/collapsible-headings-dom.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLLAPSED_CONTENT_OWNERS_ATTRIBUTE = void 0;
+exports.getCollapsedContentOwners = getCollapsedContentOwners;
+exports.getOwnedRendererDocuments = getOwnedRendererDocuments;
+exports.reconcileCollapsedHeadingContent = reconcileCollapsedHeadingContent;
+var RENDERER_DOCUMENT_SELECTOR = '.ak-renderer-document';
+var RENDERER_START_POS_ATTRIBUTE = 'data-renderer-start-pos';
+var HEADING_SELECTOR = [1, 2, 3, 4, 5, 6].map(function (level) {
+  return "h".concat(level, "[").concat(RENDERER_START_POS_ATTRIBUTE, "]");
+}).join(',');
+var COLLAPSED_CONTENT_OWNERS_ATTRIBUTE = exports.COLLAPSED_CONTENT_OWNERS_ATTRIBUTE = 'data-renderer-collapsed-content-owners';
+function getDirectRendererChild(rendererDocument, element) {
+  var _currentElement;
+  var currentElement = element;
+  while (currentElement && currentElement.parentElement !== rendererDocument) {
+    currentElement = currentElement.parentElement;
+  }
+  return ((_currentElement = currentElement) === null || _currentElement === void 0 ? void 0 : _currentElement.parentElement) === rendererDocument ? currentElement : null;
+}
+function getTopLevelHeadingPositionsByContainer(rendererDocument, topLevelHeadingPositions) {
+  var headingPositionsByContainer = new Map();
+  rendererDocument.querySelectorAll(HEADING_SELECTOR).forEach(function (headingElement) {
+    if (headingElement.closest(RENDERER_DOCUMENT_SELECTOR) !== rendererDocument) {
+      return;
+    }
+    var position = Number(headingElement.getAttribute(RENDERER_START_POS_ATTRIBUTE));
+    if (!Number.isFinite(position) || !topLevelHeadingPositions.has(position)) {
+      return;
+    }
+    var headingContainer = getDirectRendererChild(rendererDocument, headingElement);
+    if (headingContainer) {
+      headingPositionsByContainer.set(headingContainer, position);
+    }
+  });
+  return headingPositionsByContainer;
+}
+function restoreHiddenAttribute(element, originalHiddenAttributes) {
+  if (!originalHiddenAttributes.has(element)) {
+    return;
+  }
+  var originalHiddenAttribute = originalHiddenAttributes.get(element);
+  if (originalHiddenAttribute === null || originalHiddenAttribute === undefined) {
+    element.removeAttribute('hidden');
+  } else {
+    element.setAttribute('hidden', originalHiddenAttribute);
+  }
+  originalHiddenAttributes.delete(element);
+}
+function setCollapsedOwners(element, owners, originalHiddenAttributes) {
+  if (!originalHiddenAttributes.has(element)) {
+    originalHiddenAttributes.set(element, element.getAttribute('hidden'));
+  }
+  element.setAttribute(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, Array.from(owners).join(','));
+  element.setAttribute('hidden', 'until-found');
+}
+function getDesiredCollapsedContentOwners(rendererDocuments, collapsedHeadings, sections) {
+  var desiredOwners = new Map();
+  if (collapsedHeadings.size === 0) {
+    return desiredOwners;
+  }
+  var topLevelHeadingPositions = new Set(sections.map(function (section) {
+    return section.headingPos;
+  }));
+  var sectionsByHeadingPosition = new Map(sections.map(function (section) {
+    return [section.headingPos, section];
+  }));
+  rendererDocuments.forEach(function (rendererDocument) {
+    // Index headings once, then reconcile every top-level renderer child in DOM order.
+    var headingPositionsByContainer = getTopLevelHeadingPositionsByContainer(rendererDocument, topLevelHeadingPositions);
+    var activeCollapsedSections = [];
+    var contentElements = Array.from(rendererDocument.children);
+    contentElements.forEach(function (contentElement) {
+      var headingPosition = headingPositionsByContainer.get(contentElement);
+      if (headingPosition !== undefined) {
+        activeCollapsedSections = activeCollapsedSections.filter(function (section) {
+          return section.to > headingPosition;
+        });
+      }
+      if (activeCollapsedSections.length > 0) {
+        desiredOwners.set(contentElement, new Set(activeCollapsedSections.map(function (section) {
+          return section.headingPos;
+        })));
+      }
+      if (headingPosition !== undefined && collapsedHeadings.has(headingPosition)) {
+        var section = sectionsByHeadingPosition.get(headingPosition);
+        if (section) {
+          activeCollapsedSections.push(section);
+        }
+      }
+    });
+  });
+  return desiredOwners;
+}
+
+/** Returns renderer documents owned by this renderer root, excluding nested renderers. */
+function getOwnedRendererDocuments(rendererRoot) {
+  return Array.from(rendererRoot.querySelectorAll(RENDERER_DOCUMENT_SELECTOR)).filter(function (rendererDocument) {
+    var _rendererDocument$par;
+    var parentRendererDocument = (_rendererDocument$par = rendererDocument.parentElement) === null || _rendererDocument$par === void 0 ? void 0 : _rendererDocument$par.closest(RENDERER_DOCUMENT_SELECTOR);
+    return !parentRendererDocument || !rendererRoot.contains(parentRendererDocument);
+  });
+}
+
+/** Applies only the visibility-attribute differences required by the collapsed section model. */
+function reconcileCollapsedHeadingContent(_ref) {
+  var collapsedHeadings = _ref.collapsedHeadings,
+    originalHiddenAttributes = _ref.originalHiddenAttributes,
+    rendererRoot = _ref.rendererRoot,
+    sections = _ref.sections;
+  var rendererDocuments = getOwnedRendererDocuments(rendererRoot);
+  var desiredOwners = getDesiredCollapsedContentOwners(rendererDocuments, collapsedHeadings, sections);
+  rendererDocuments.forEach(function (rendererDocument) {
+    rendererDocument.querySelectorAll("[".concat(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "]")).forEach(function (element) {
+      if (element.closest(RENDERER_DOCUMENT_SELECTOR) === rendererDocument && !desiredOwners.has(element)) {
+        element.removeAttribute(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE);
+        restoreHiddenAttribute(element, originalHiddenAttributes);
+      }
+    });
+  });
+  desiredOwners.forEach(function (owners, element) {
+    var desiredOwnersAttribute = Array.from(owners).join(',');
+    if (element.getAttribute(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE) !== desiredOwnersAttribute || element.getAttribute('hidden') !== 'until-found') {
+      setCollapsedOwners(element, owners, originalHiddenAttributes);
+    }
+  });
+}
+
+/** Returns the collapsed heading positions that currently hide an element. */
+function getCollapsedContentOwners(element) {
+  var _element$getAttribute;
+  return ((_element$getAttribute = element.getAttribute(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE)) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : '').split(',').filter(function (owner) {
+    return owner !== '';
+  }).map(Number).filter(Number.isFinite);
+}