@atlaskit/renderer 133.14.2 → 133.15.0

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

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsibleHeadingsProvider = CollapsibleHeadingsProvider;
+exports.useCollapsibleHeading = useCollapsibleHeading;
+exports.useCollapsibleHeadingsController = useCollapsibleHeadingsController;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _collapsibleHeadingsDom = require("./collapsible-headings-dom");
+var _collapsibleHeadingsSectionModel = require("./collapsible-headings-section-model");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var CollapsibleHeadingsContext = /*#__PURE__*/_react.default.createContext(null);
+var emptyCollapsedHeadings = new Set();
+function supportsHiddenUntilFound(rendererRef) {
+  var _rendererRef$current;
+  var body = (_rendererRef$current = rendererRef.current) === null || _rendererRef$current === void 0 ? void 0 : _rendererRef$current.ownerDocument.body;
+  return body ? 'onbeforematch' in body : false;
+}
+
+/** Provides collapse state and synchronizes hidden top-level renderer content. */
+function CollapsibleHeadingsProvider(_ref) {
+  var children = _ref.children,
+    isEnabled = _ref.isEnabled,
+    pmDocument = _ref.pmDocument,
+    rendererRef = _ref.rendererRef;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isBrowserFindSupported = _useState2[0],
+    setIsBrowserFindSupported = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      pmDocument: pmDocument,
+      positions: new Set()
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  var originalHiddenAttributes = _react.default.useRef(new WeakMap()).current;
+  var sections = (0, _react.useMemo)(function () {
+    return (0, _collapsibleHeadingsSectionModel.buildTopLevelHeadingSections)(pmDocument);
+  }, [pmDocument]);
+  var collapsibleSectionPositions = (0, _react.useMemo)(function () {
+    return new Set(sections.filter(function (section) {
+      return section.contentFrom < section.to;
+    }).map(function (section) {
+      return section.headingPos;
+    }));
+  }, [sections]);
+  var collapsedHeadings = state.pmDocument === pmDocument ? state.positions : emptyCollapsedHeadings;
+  var isActive = isEnabled && isBrowserFindSupported && Boolean(pmDocument);
+  (0, _react.useEffect)(function () {
+    setIsBrowserFindSupported(isEnabled && supportsHiddenUntilFound(rendererRef));
+  }, [isEnabled, rendererRef]);
+  var updateCollapsedHeadings = (0, _react.useCallback)(function (update) {
+    setState(function (currentState) {
+      var positions = new Set(currentState.pmDocument === pmDocument ? currentState.positions : emptyCollapsedHeadings);
+      if (!update(positions)) {
+        return currentState.pmDocument === pmDocument ? currentState : {
+          pmDocument: pmDocument,
+          positions: positions
+        };
+      }
+      return {
+        pmDocument: pmDocument,
+        positions: positions
+      };
+    });
+  }, [pmDocument]);
+  var collapse = (0, _react.useCallback)(function (headingPos) {
+    if (!collapsibleSectionPositions.has(headingPos)) {
+      return;
+    }
+    updateCollapsedHeadings(function (positions) {
+      if (positions.has(headingPos)) {
+        return false;
+      }
+      positions.add(headingPos);
+      return true;
+    });
+  }, [collapsibleSectionPositions, updateCollapsedHeadings]);
+  var expand = (0, _react.useCallback)(function (headingPos) {
+    updateCollapsedHeadings(function (positions) {
+      return positions.delete(headingPos);
+    });
+  }, [updateCollapsedHeadings]);
+  var expandMany = (0, _react.useCallback)(function (headingPositions) {
+    var positionsToExpand = new Set(headingPositions);
+    updateCollapsedHeadings(function (positions) {
+      var didChange = false;
+      positionsToExpand.forEach(function (headingPos) {
+        didChange = positions.delete(headingPos) || didChange;
+      });
+      return didChange;
+    });
+  }, [updateCollapsedHeadings]);
+  var expandContainingPosition = (0, _react.useCallback)(function (position) {
+    expandMany(sections.filter(function (section) {
+      return position >= section.contentFrom && position < section.to;
+    }).map(function (section) {
+      return section.headingPos;
+    }));
+  }, [expandMany, sections]);
+  var toggle = (0, _react.useCallback)(function (headingPos) {
+    if (!collapsibleSectionPositions.has(headingPos)) {
+      return;
+    }
+    updateCollapsedHeadings(function (positions) {
+      if (positions.has(headingPos)) {
+        positions.delete(headingPos);
+      } else {
+        positions.add(headingPos);
+      }
+      return true;
+    });
+  }, [collapsibleSectionPositions, updateCollapsedHeadings]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return isActive ? {
+      canCollapse: function canCollapse(headingPos) {
+        return collapsibleSectionPositions.has(headingPos);
+      },
+      collapse: collapse,
+      expand: expand,
+      expandContainingPosition: expandContainingPosition,
+      expandMany: expandMany,
+      isCollapsed: function isCollapsed(headingPos) {
+        return collapsedHeadings.has(headingPos);
+      },
+      toggle: toggle
+    } : null;
+  }, [collapse, collapsedHeadings, collapsibleSectionPositions, expand, expandContainingPosition, expandMany, isActive, toggle]);
+  (0, _react.useEffect)(function () {
+    var rendererRoot = rendererRef.current;
+    if (!rendererRoot) {
+      return;
+    }
+    var positions = isActive ? collapsedHeadings : emptyCollapsedHeadings;
+    var sync = function sync() {
+      return (0, _collapsibleHeadingsDom.reconcileCollapsedHeadingContent)({
+        collapsedHeadings: positions,
+        originalHiddenAttributes: originalHiddenAttributes,
+        rendererRoot: rendererRoot,
+        sections: sections
+      });
+    };
+    sync();
+    if (!isActive || positions.size === 0) {
+      return;
+    }
+    var rendererDocuments = (0, _collapsibleHeadingsDom.getOwnedRendererDocuments)(rendererRoot);
+    var rendererDocumentSet = new Set(rendererDocuments);
+    var handleBeforeMatch = function handleBeforeMatch(event) {
+      var _rendererRoot$ownerDo;
+      var target = event.target;
+      var HTMLElementConstructor = (_rendererRoot$ownerDo = rendererRoot.ownerDocument.defaultView) === null || _rendererRoot$ownerDo === void 0 ? void 0 : _rendererRoot$ownerDo.HTMLElement;
+      if (!HTMLElementConstructor || !(target instanceof HTMLElementConstructor)) {
+        return;
+      }
+      var collapsedContent = target.closest("[".concat(_collapsibleHeadingsDom.COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "]"));
+      if (!collapsedContent) {
+        return;
+      }
+      var rendererDocument = collapsedContent.closest('.ak-renderer-document');
+      if (!rendererDocument || !rendererDocumentSet.has(rendererDocument)) {
+        return;
+      }
+      expandMany((0, _collapsibleHeadingsDom.getCollapsedContentOwners)(collapsedContent));
+    };
+    var unbindBeforeMatchListeners = rendererDocuments.map(function (rendererDocument) {
+      return (0, _bindEventListener.bind)(rendererDocument, {
+        type: 'beforematch',
+        listener: handleBeforeMatch,
+        options: {
+          capture: true
+        }
+      });
+    });
+    var observer = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(sync);
+    rendererDocuments.forEach(function (rendererDocument) {
+      observer === null || observer === void 0 || observer.observe(rendererDocument, {
+        childList: true
+      });
+    });
+    return function () {
+      observer === null || observer === void 0 || observer.disconnect();
+      unbindBeforeMatchListeners.forEach(function (unbindBeforeMatch) {
+        return unbindBeforeMatch();
+      });
+    };
+  }, [collapsedHeadings, expandMany, isActive, originalHiddenAttributes, rendererRef, sections]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      var rendererRoot = rendererRef.current;
+      if (rendererRoot) {
+        (0, _collapsibleHeadingsDom.reconcileCollapsedHeadingContent)({
+          collapsedHeadings: emptyCollapsedHeadings,
+          originalHiddenAttributes: originalHiddenAttributes,
+          rendererRoot: rendererRoot,
+          sections: []
+        });
+      }
+    };
+  }, [originalHiddenAttributes, rendererRef]);
+  return /*#__PURE__*/_react.default.createElement(CollapsibleHeadingsContext.Provider, {
+    value: contextValue
+  }, children);
+}
+
+/** Returns collapse state for a top-level heading when the provider is enabled. */
+function useCollapsibleHeading(startPos, isTopLevel) {
+  var context = _react.default.useContext(CollapsibleHeadingsContext);
+  var contextToggle = context === null || context === void 0 ? void 0 : context.toggle;
+  var isCollapsible = Boolean(context && isTopLevel && context.canCollapse(startPos));
+  var isCollapsed = Boolean(isCollapsible && (context === null || context === void 0 ? void 0 : context.isCollapsed(startPos)));
+  var toggle = (0, _react.useCallback)(function () {
+    return contextToggle === null || contextToggle === void 0 ? void 0 : contextToggle(startPos);
+  }, [contextToggle, startPos]);
+  return (0, _react.useMemo)(function () {
+    return isCollapsible ? {
+      isCollapsed: isCollapsed,
+      toggle: toggle
+    } : null;
+  }, [isCollapsed, isCollapsible, toggle]);
+}
+
+/** Returns the collapse controller for integrations such as renderer Find. */
+function useCollapsibleHeadingsController() {
+  return _react.default.useContext(CollapsibleHeadingsContext);
+}

package/dist/es2019/messages.js

@@ -2,6 +2,18 @@
 // Entry file in package.json
 
 import { defineMessages } from 'react-intl';
+export const collapsibleHeadingMessages = 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.'
+  }
+});
 export const headingAnchorLinkMessages = defineMessages({
   copyHeadingLinkToClipboard: {
     id: 'fabric.editor.headingLink.copyAnchorLink',

package/dist/es2019/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/es2019/react/nodes/heading.js

@@ -1,18 +1,22 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* heading.tsx generated by @compiled/babel-plugin v0.40.0 */
+import "./heading.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@atlaskit/button/new';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { copyTextToClipboard } from '../utils/clipboard';
+import { collapsibleHeadingMessages } from '../../messages';
+import { useCollapsibleHeading } from '../../ui/collapsible-headings';
 import HeadingAnchor from './heading-anchor';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 const RENDERER_HEADING_WRAPPER = 'renderer-heading-wrapper';
+const RENDERER_COLLAPSIBLE_HEADING_WRAPPER = 'renderer-collapsible-heading-wrapper';
 const getCurrentUrlWithHash = (hash = '') => {
   const url = new URL(window.location.href);
   url.search = ''; // clear any query params so that the page will correctly scroll to the anchor
@@ -25,13 +29,25 @@ function hasRightAlignmentMark(marks) {
   }
   return marks.some(mark => mark.type.name === 'alignment' && mark.attrs.align === 'end');
 }
-const wrapperStyles = 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'
+const wrapperStyles = null;
+const collapsibleHeadingWrapperStyles = null;
+const collapsibleHeadingButtonStyles = null;
+const collapsibleHeadingButtonHiddenStyles = null;
+const ChevronDownSmallIcon = () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+  label: "",
+  size: "small"
 });
+const ChevronRightSmallIcon = () => /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  label: "",
+  size: "small"
+});
+const hasFocusVisible = target => {
+  try {
+    return target.matches(':focus-visible');
+  } catch {
+    return true;
+  }
+};
 const getHeadingAnchorLinksConfig = allowHeadingAnchorLinks => typeof allowHeadingAnchorLinks === 'object' ? allowHeadingAnchorLinks : undefined;
 function WrappedHeadingAnchor({
   enableNestedHeaderLinks,
@@ -40,9 +56,9 @@ function WrappedHeadingAnchor({
   headingId,
   hideFromScreenReader
 }) {
-  return jsx(AnalyticsContext.Consumer, null, ({
+  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
     fireAnalyticsEvent
-  }) => jsx(HeadingAnchor, {
+  }) => /*#__PURE__*/React.createElement(HeadingAnchor, {
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     level: level
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -61,6 +77,73 @@ function WrappedHeadingAnchor({
     headingId: headingId
   }));
 }
+function CollapsibleHeadingButton({
+  collapsibleHeading,
+  isHeadingHovered
+}) {
+  const intl = useIntl();
+  const [isFocused, setIsFocused] = React.useState(false);
+  const {
+    isCollapsed,
+    toggle
+  } = collapsibleHeading;
+  const isVisible = isCollapsed || isFocused || isHeadingHovered;
+  const handleClick = React.useCallback(event => {
+    event.stopPropagation();
+    toggle();
+  }, [toggle]);
+  const handleFocus = React.useCallback(event => {
+    setIsFocused(hasFocusVisible(event.target));
+  }, []);
+  const handleBlur = React.useCallback(() => setIsFocused(false), []);
+  const handleKeyDown = React.useCallback(() => setIsFocused(true), []);
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_kqswstnw _152tidpf _1e02idpf _1pbykb7n", !isVisible && "_tzy4idpf _lcxvglyw _tza3kb7n _12yg1wug _xrqrkb7n _l4c51wug"])
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    spacing: "compact",
+    icon: isCollapsed ? ChevronRightSmallIcon : ChevronDownSmallIcon,
+    label: intl.formatMessage(isCollapsed ? collapsibleHeadingMessages.expandSection : collapsibleHeadingMessages.collapseSection),
+    "aria-expanded": !isCollapsed,
+    isTooltipDisabled: false,
+    testId: "collapsible-heading-button",
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  }));
+}
+function CollapsibleHeadingContainer({
+  children,
+  collapsibleHeading,
+  headingLevel
+}) {
+  const mouseEntered = React.useRef(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const mouseEnterHandler = () => {
+    if (!mouseEntered.current) {
+      abortAll('new_interaction');
+      mouseEntered.current = true;
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": RENDERER_COLLAPSIBLE_HEADING_WRAPPER,
+    "data-level": headingLevel,
+    onMouseEnter: () => {
+      mouseEnterHandler();
+      setIsHovered(true);
+    },
+    onMouseLeave: () => setIsHovered(false),
+    onFocus: event => setIsFocused(hasFocusVisible(event.target)),
+    onBlur: () => setIsFocused(false),
+    className: ax(["_ahbqukr8 _bozgxy5q _kqswh2mm"])
+  }, /*#__PURE__*/React.createElement(CollapsibleHeadingButton, {
+    collapsibleHeading: collapsibleHeading,
+    isHeadingHovered: isHovered || isFocused
+  }), children);
+}
+
 /**
  * Old heading structure (before a11y fix):
  * - headning anchor is rendered INSIDE the heading element
@@ -95,28 +178,28 @@ function HeadingWithDuplicateAnchor(props) {
       mouseEntered.current = true;
     }
   };
-  return jsx(React.Fragment, null, jsx(HX, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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
-  }, jsx(React.Fragment, null, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
     headingId: headingId,
     hideFromScreenReader: true
-  }), props.children, showAnchorLink && headingId && !isRightAligned && jsx(WrappedHeadingAnchor, {
+  }), props.children, showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
     headingId: headingId,
     hideFromScreenReader: true
-  }))), jsx(VisuallyHidden, {
+  }))), /*#__PURE__*/React.createElement(VisuallyHidden, {
     testId: "visually-hidden-heading-anchor"
-  }, showAnchorLink && headingId && jsx(WrappedHeadingAnchor, {
+  }, showAnchorLink && headingId && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
@@ -138,10 +221,13 @@ function HeadingWithWrapper(props) {
     marks,
     invisible,
     localId,
-    asInline
+    asInline,
+    collapsibleHeading
   } = props;
   const HX = `h${props.level}`;
   const mouseEntered = React.useRef(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const showAnchorLink = !!props.showAnchorLink;
   const isRightAligned = hasRightAlignmentMark(marks);
   const headingAnchorLinksConfig = getHeadingAnchorLinksConfig(allowHeadingAnchorLinks);
@@ -149,7 +235,7 @@ function HeadingWithWrapper(props) {
   const getHeadingLink = headingAnchorLinksConfig === null || headingAnchorLinksConfig === void 0 ? void 0 : headingAnchorLinksConfig.getHeadingLink;
   const headingIdToUse = invisible ? undefined : headingId;
   const 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.
@@ -157,26 +243,39 @@ function HeadingWithWrapper(props) {
       mouseEntered.current = true;
     }
   };
-  return jsx("div", {
+  const handleWrapperMouseEnter = () => {
+    mouseEnterHandler();
+    setIsHovered(true);
+  };
+  const handleWrapperMouseLeave = () => setIsHovered(false);
+  const handleWrapperFocus = event => setIsFocused(hasFocusVisible(event.target));
+  const handleWrapperBlur = () => setIsFocused(false);
+  return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: RENDERER_HEADING_WRAPPER,
+    className: ax(["_1e0c1ule", collapsibleHeading && "_ahbqukr8 _bozgxy5q _kqswh2mm", RENDERER_HEADING_WRAPPER]),
     "data-testid": RENDERER_HEADING_WRAPPER,
     "data-level": props.level,
-    css: wrapperStyles
-  }, showAnchorLink && headingId && isRightAligned && jsx(WrappedHeadingAnchor, {
+    onMouseEnter: collapsibleHeading ? handleWrapperMouseEnter : undefined,
+    onMouseLeave: collapsibleHeading ? handleWrapperMouseLeave : undefined,
+    onFocus: collapsibleHeading ? handleWrapperFocus : undefined,
+    onBlur: collapsibleHeading ? handleWrapperBlur : undefined
+  }, collapsibleHeading && /*#__PURE__*/React.createElement(CollapsibleHeadingButton, {
+    collapsibleHeading: collapsibleHeading,
+    isHeadingHovered: isHovered || isFocused
+  }), showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
     headingId: headingId,
     hideFromScreenReader: false
-  }), jsx(HX, {
+  }), /*#__PURE__*/React.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 && jsx(WrappedHeadingAnchor, {
+  }, props.children), showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     getHeadingLink: getHeadingLink,
@@ -189,7 +288,8 @@ 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({
   allowHeadingAnchorLinks,
@@ -201,12 +301,14 @@ function Heading({
   localId,
   marks,
   nodeType,
+  path,
   showAnchorLink,
   serializer,
   asInline
 }) {
+  const collapsibleHeading = useCollapsibleHeading(dataAttributes['data-renderer-start-pos'], (path === null || path === void 0 ? void 0 : path.length) === 0);
   if (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true)) {
-    return jsx(HeadingWithWrapper, {
+    return /*#__PURE__*/React.createElement(HeadingWithWrapper, {
       allowHeadingAnchorLinks: allowHeadingAnchorLinks,
       dataAttributes: dataAttributes,
       headingId: headingId,
@@ -217,10 +319,11 @@ function Heading({
       nodeType: nodeType,
       serializer: serializer,
       showAnchorLink: showAnchorLink,
-      asInline: asInline
+      asInline: asInline,
+      collapsibleHeading: collapsibleHeading
     }, children);
   }
-  return jsx(HeadingWithDuplicateAnchor, {
+  const headingWithDuplicateAnchor = /*#__PURE__*/React.createElement(HeadingWithDuplicateAnchor, {
     allowHeadingAnchorLinks: allowHeadingAnchorLinks,
     dataAttributes: dataAttributes,
     headingId: headingId,
@@ -233,5 +336,12 @@ function Heading({
     showAnchorLink: showAnchorLink,
     asInline: asInline
   }, children);
+  if (collapsibleHeading) {
+    return /*#__PURE__*/React.createElement(CollapsibleHeadingContainer, {
+      collapsibleHeading: collapsibleHeading,
+      headingLevel: level
+    }, headingWithDuplicateAnchor);
+  }
+  return headingWithDuplicateAnchor;
 }
 export default Heading;

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

@@ -28,6 +28,7 @@ import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, d
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { COLLAPSED_CONTENT_OWNERS_ATTRIBUTE } from '../collapsible-headings-dom';
 const wrappedMediaBreakoutPoint = 410;
 const TELEPOINTER_ID = 'ai-streaming-telepointer';
 const tableShadowWidth = 32;
@@ -86,6 +87,13 @@ const baseStyles = css({
     clear: 'both'
   },
   [`.${RendererCssClassName.DOCUMENT}`]: {
+    [`> [${COLLAPSED_CONTENT_OWNERS_ATTRIBUTE}][hidden='until-found']`]: {
+      display: 'block',
+      minBlockSize: 0,
+      marginBlock: 0,
+      paddingBlock: 0,
+      borderBlockWidth: 0
+    },
     // p, h3, and action items
     [`.${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
       height: '22px',

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

@@ -36,6 +36,7 @@ import { RendererContext as ActionsContext, RendererActionsContext } from '../Re
 import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
 import { ActiveHeaderIdProvider } from '../active-header-id-provider';
 import { AnnotationsPositionContext, AnnotationsWrapper } from '../annotations';
+import { CollapsibleHeadingsProvider } from '../collapsible-headings';
 import { ErrorBoundary } from './ErrorBoundary';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
 import { isInteractiveElement } from './click-to-edit';
@@ -58,7 +59,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 = "133.14.1";
+const packageVersion = "133.14.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -457,6 +458,7 @@ export const RendererFunctionalComponent = props => {
     ...createRendererContext(props.featureFlags, props.isTopLevelRenderer),
     timeZone: props.timeZone
   }), [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
+  const isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && expValEquals('platform_renderer_collapsible_headings', 'isEnabled', true);
   useScrollToBlock(editorRef, props.document, props.scrollToBlock);
   try {
     var _rendererContext$feat, _props$media;
@@ -514,7 +516,11 @@ export const RendererFunctionalComponent = props => {
       doc: pmDoc,
       schema: schema,
       onAnalyticsEvent: fireAnalyticsEvent
-    }, result)))))));
+    }, jsx(CollapsibleHeadingsProvider, {
+      pmDocument: pmDoc,
+      rendererRef: editorRef,
+      isEnabled: isCollapsibleHeadingsEnabled
+    }, result))))))));
     const rendererResult = props.truncated ? jsx(TruncatedWrapper, {
       height: props.maxHeight,
       fadeHeight: props.fadeOutHeight