@atlaskit/renderer 133.14.2 → 133.16.0

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

@@ -1,19 +1,24 @@
+/* heading.tsx generated by @compiled/babel-plugin v0.40.0 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+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';
 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);
@@ -29,13 +34,29 @@ function hasRightAlignmentMark(marks) {
     return mark.type.name === 'alignment' && mark.attrs.align === 'end';
   });
 }
-var 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'
-});
+var wrapperStyles = null;
+var collapsibleHeadingWrapperStyles = null;
+var collapsibleHeadingButtonStyles = null;
+var collapsibleHeadingButtonHiddenStyles = null;
+var ChevronDownSmallIcon = function ChevronDownSmallIcon() {
+  return /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    label: "",
+    size: "small"
+  });
+};
+var ChevronRightSmallIcon = function ChevronRightSmallIcon() {
+  return /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    label: "",
+    size: "small"
+  });
+};
+var hasFocusVisible = function hasFocusVisible(target) {
+  try {
+    return target.matches(':focus-visible');
+  } catch (_unused) {
+    return true;
+  }
+};
 var getHeadingAnchorLinksConfig = function getHeadingAnchorLinksConfig(allowHeadingAnchorLinks) {
   return _typeof(allowHeadingAnchorLinks) === 'object' ? allowHeadingAnchorLinks : undefined;
 };
@@ -45,9 +66,9 @@ function WrappedHeadingAnchor(_ref) {
     level = _ref.level,
     headingId = _ref.headingId,
     hideFromScreenReader = _ref.hideFromScreenReader;
-  return jsx(AnalyticsContext.Consumer, null, function (_ref2) {
+  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return jsx(HeadingAnchor, {
+    return /*#__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)
@@ -67,6 +88,88 @@ function WrappedHeadingAnchor(_ref) {
     });
   });
 }
+function CollapsibleHeadingButton(_ref3) {
+  var collapsibleHeading = _ref3.collapsibleHeading,
+    isHeadingHovered = _ref3.isHeadingHovered;
+  var intl = useIntl();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_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.useCallback(function (event) {
+    event.stopPropagation();
+    toggle();
+  }, [toggle]);
+  var handleFocus = React.useCallback(function (event) {
+    setIsFocused(hasFocusVisible(event.target));
+  }, []);
+  var handleBlur = React.useCallback(function () {
+    return setIsFocused(false);
+  }, []);
+  var handleKeyDown = React.useCallback(function () {
+    return 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(_ref4) {
+  var children = _ref4.children,
+    collapsibleHeading = _ref4.collapsibleHeading,
+    headingLevel = _ref4.headingLevel;
+  var mouseEntered = React.useRef(false);
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isHovered = _React$useState4[0],
+    setIsHovered = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isFocused = _React$useState6[0],
+    setIsFocused = _React$useState6[1];
+  var mouseEnterHandler = function 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: 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: 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
@@ -99,28 +202,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,
@@ -141,9 +244,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.useRef(false);
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isHovered = _React$useState8[0],
+    setIsHovered = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState0 = _slicedToArray(_React$useState9, 2),
+    isFocused = _React$useState0[0],
+    setIsFocused = _React$useState0[1];
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var headingAnchorLinksConfig = getHeadingAnchorLinksConfig(allowHeadingAnchorLinks);
@@ -151,7 +263,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.
@@ -159,26 +271,45 @@ function HeadingWithWrapper(props) {
       mouseEntered.current = true;
     }
   };
-  return 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.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,
@@ -191,23 +322,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 = 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,
@@ -218,10 +352,11 @@ function Heading(_ref3) {
       nodeType: nodeType,
       serializer: serializer,
       showAnchorLink: showAnchorLink,
-      asInline: asInline
+      asInline: asInline,
+      collapsibleHeading: collapsibleHeading
     }, children);
   }
-  return jsx(HeadingWithDuplicateAnchor, {
+  var headingWithDuplicateAnchor = /*#__PURE__*/React.createElement(HeadingWithDuplicateAnchor, {
     allowHeadingAnchorLinks: allowHeadingAnchorLinks,
     dataAttributes: dataAttributes,
     headingId: headingId,
@@ -234,5 +369,12 @@ function Heading(_ref3) {
     showAnchorLink: showAnchorLink,
     asInline: asInline
   }, children);
+  if (collapsibleHeading) {
+    return /*#__PURE__*/React.createElement(CollapsibleHeadingContainer, {
+      collapsibleHeading: collapsibleHeading,
+      headingLevel: level
+    }, headingWithDuplicateAnchor);
+  }
+  return headingWithDuplicateAnchor;
 }
 export default Heading;

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

@@ -32,6 +32,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';
 var wrappedMediaBreakoutPoint = 410;
 var TELEPOINTER_ID = 'ai-streaming-telepointer';
 var tableShadowWidth = 32;
@@ -88,7 +89,13 @@ var baseStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProp
   display: 'block',
   height: 0,
   clear: 'both'
-}), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
+}), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "> [".concat(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "][hidden='until-found']"), {
+  display: 'block',
+  minBlockSize: 0,
+  marginBlock: 0,
+  paddingBlock: 0,
+  borderBlockWidth: 0
+}), ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '22px',
   transform: "translateY(-2px)"
 }), "h1", _defineProperty({}, "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n  > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {

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

@@ -41,6 +41,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';
@@ -63,7 +64,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 = "133.14.1";
+var packageVersion = "133.15.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -459,6 +460,7 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       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 && expValEquals('platform_renderer_collapsible_headings', 'isEnabled', true);
   useScrollToBlock(editorRef, props.document, props.scrollToBlock);
   try {
     var _rendererContext$feat, _props$media;
@@ -518,7 +520,11 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       doc: pmDoc,
       schema: schema,
       onAnalyticsEvent: _fireAnalyticsEvent
-    }, result)))))));
+    }, jsx(CollapsibleHeadingsProvider, {
+      pmDocument: pmDoc,
+      rendererRef: editorRef,
+      isEnabled: isCollapsibleHeadingsEnabled
+    }, result))))))));
     var rendererResult = props.truncated ? jsx(TruncatedWrapper, {
       height: props.maxHeight,
       fadeHeight: props.fadeOutHeight

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

@@ -0,0 +1,129 @@
+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(',');
+export var 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. */
+export 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. */
+export 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. */
+export 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);
+}

package/dist/esm/ui/collapsible-headings-section-model.js

@@ -0,0 +1,32 @@
+var RENDERER_DOCUMENT_POSITION_OFFSET = 1;
+/** Builds collapsible ranges for headings that are direct children of the renderer document. */
+export function buildTopLevelHeadingSections(pmDocument) {
+  if (!pmDocument) {
+    return [];
+  }
+  var sections = [];
+  var openSections = [];
+  var documentEnd = pmDocument.content.size + RENDERER_DOCUMENT_POSITION_OFFSET;
+  pmDocument.forEach(function (node, offset) {
+    if (node.type.name !== 'heading') {
+      return;
+    }
+    var headingPos = offset + RENDERER_DOCUMENT_POSITION_OFFSET;
+    var level = Number(node.attrs.level);
+    while (openSections.length > 0 && openSections[openSections.length - 1].level >= level) {
+      var _section = openSections.pop();
+      if (_section) {
+        _section.to = headingPos;
+      }
+    }
+    var section = {
+      contentFrom: headingPos + node.nodeSize,
+      headingPos: headingPos,
+      level: level,
+      to: documentEnd
+    };
+    sections.push(section);
+    openSections.push(section);
+  });
+  return sections;
+}