@atlaskit/renderer 133.14.2 → 133.16.0

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

@@ -0,0 +1,221 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, getCollapsedContentOwners, getOwnedRendererDocuments, reconcileCollapsedHeadingContent } from './collapsible-headings-dom';
+import { buildTopLevelHeadingSections } from './collapsible-headings-section-model';
+var CollapsibleHeadingsContext = /*#__PURE__*/React.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. */
+export function CollapsibleHeadingsProvider(_ref) {
+  var children = _ref.children,
+    isEnabled = _ref.isEnabled,
+    pmDocument = _ref.pmDocument,
+    rendererRef = _ref.rendererRef;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isBrowserFindSupported = _useState2[0],
+    setIsBrowserFindSupported = _useState2[1];
+  var _useState3 = useState({
+      pmDocument: pmDocument,
+      positions: new Set()
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  var originalHiddenAttributes = React.useRef(new WeakMap()).current;
+  var sections = useMemo(function () {
+    return buildTopLevelHeadingSections(pmDocument);
+  }, [pmDocument]);
+  var collapsibleSectionPositions = 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);
+  useEffect(function () {
+    setIsBrowserFindSupported(isEnabled && supportsHiddenUntilFound(rendererRef));
+  }, [isEnabled, rendererRef]);
+  var updateCollapsedHeadings = 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 = 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 = useCallback(function (headingPos) {
+    updateCollapsedHeadings(function (positions) {
+      return positions.delete(headingPos);
+    });
+  }, [updateCollapsedHeadings]);
+  var expandMany = 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 = 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 = 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 = 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]);
+  useEffect(function () {
+    var rendererRoot = rendererRef.current;
+    if (!rendererRoot) {
+      return;
+    }
+    var positions = isActive ? collapsedHeadings : emptyCollapsedHeadings;
+    var sync = function sync() {
+      return reconcileCollapsedHeadingContent({
+        collapsedHeadings: positions,
+        originalHiddenAttributes: originalHiddenAttributes,
+        rendererRoot: rendererRoot,
+        sections: sections
+      });
+    };
+    sync();
+    if (!isActive || positions.size === 0) {
+      return;
+    }
+    var rendererDocuments = 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(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "]"));
+      if (!collapsedContent) {
+        return;
+      }
+      var rendererDocument = collapsedContent.closest('.ak-renderer-document');
+      if (!rendererDocument || !rendererDocumentSet.has(rendererDocument)) {
+        return;
+      }
+      expandMany(getCollapsedContentOwners(collapsedContent));
+    };
+    var unbindBeforeMatchListeners = rendererDocuments.map(function (rendererDocument) {
+      return 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]);
+  useEffect(function () {
+    return function () {
+      var rendererRoot = rendererRef.current;
+      if (rendererRoot) {
+        reconcileCollapsedHeadingContent({
+          collapsedHeadings: emptyCollapsedHeadings,
+          originalHiddenAttributes: originalHiddenAttributes,
+          rendererRoot: rendererRoot,
+          sections: []
+        });
+      }
+    };
+  }, [originalHiddenAttributes, rendererRef]);
+  return /*#__PURE__*/React.createElement(CollapsibleHeadingsContext.Provider, {
+    value: contextValue
+  }, children);
+}
+
+/** Returns collapse state for a top-level heading when the provider is enabled. */
+export function useCollapsibleHeading(startPos, isTopLevel) {
+  var context = React.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 = useCallback(function () {
+    return contextToggle === null || contextToggle === void 0 ? void 0 : contextToggle(startPos);
+  }, [contextToggle, startPos]);
+  return useMemo(function () {
+    return isCollapsible ? {
+      isCollapsed: isCollapsed,
+      toggle: toggle
+    } : null;
+  }, [isCollapsed, isCollapsible, toggle]);
+}
+
+/** Returns the collapse controller for integrations such as renderer Find. */
+export function useCollapsibleHeadingsController() {
+  return React.useContext(CollapsibleHeadingsContext);
+}

package/dist/types/messages.d.ts

@@ -1,61 +1,63 @@
+import { type MessageDescriptor } from 'react-intl';
+export declare const collapsibleHeadingMessages: Record<'collapseSection' | 'expandSection', MessageDescriptor>;
 export declare const headingAnchorLinkMessages: {
-    copyHeadingLinkToClipboard: {
-        id: string;
+    copiedHeadingLinkToClipboard: {
         defaultMessage: string;
         description: string;
-    };
-    copyLinkToClipboard: {
         id: string;
+    };
+    copyAriaLabel: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     copyHeadingLinkLabelledBy: {
-        id: string;
         defaultMessage: string;
         description: string;
-    };
-    copiedHeadingLinkToClipboard: {
         id: string;
+    };
+    copyHeadingLinkToClipboard: {
         defaultMessage: string;
         description: string;
-    };
-    failedToCopyHeadingLink: {
         id: string;
+    };
+    copyLinkToClipboard: {
         defaultMessage: string;
         description: string;
-    };
-    copyAriaLabel: {
         id: string;
+    };
+    failedToCopyHeadingLink: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
 };
 export declare const tableCellMessages: {
-    noneSortingLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     ascSortingLabel: {
-        id: string;
         defaultMessage: string;
         description: string;
+        id: string;
     };
     descSortingLabel: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    noneSortingLabel: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
 };
 export declare const inlineCommentMessages: {
-    contentRendererInlineCommentMarkerStart: {
-        id: string;
+    contentRendererInlineCommentMarkerEnd: {
         defaultMessage: string;
         description: string;
-    };
-    contentRendererInlineCommentMarkerEnd: {
         id: string;
+    };
+    contentRendererInlineCommentMarkerStart: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
 };

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

@@ -20,7 +20,8 @@ type HeadingProps = NodeProps<{
  * 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
  */
-declare function Heading({ allowHeadingAnchorLinks, children, dataAttributes, headingId, invisible, level, localId, marks, nodeType, showAnchorLink, serializer, asInline, }: HeadingProps): React.JSX.Element;
+declare function Heading({ allowHeadingAnchorLinks, children, dataAttributes, headingId, invisible, level, localId, marks, nodeType, path, showAnchorLink, serializer, asInline, }: HeadingProps): React.JSX.Element;
 export default Heading;

package/dist/types/ui/collapsible-headings-dom.d.ts

@@ -0,0 +1,14 @@
+import type { HeadingSection } from './collapsible-headings-section-model';
+export declare const COLLAPSED_CONTENT_OWNERS_ATTRIBUTE = "data-renderer-collapsed-content-owners";
+export type OriginalHiddenAttributes = WeakMap<HTMLElement, string | null>;
+/** Returns renderer documents owned by this renderer root, excluding nested renderers. */
+export declare function getOwnedRendererDocuments(rendererRoot: HTMLElement): HTMLElement[];
+/** Applies only the visibility-attribute differences required by the collapsed section model. */
+export declare function reconcileCollapsedHeadingContent({ collapsedHeadings, originalHiddenAttributes, rendererRoot, sections, }: {
+    collapsedHeadings: ReadonlySet<number>;
+    originalHiddenAttributes: OriginalHiddenAttributes;
+    rendererRoot: HTMLElement;
+    sections: ReadonlyArray<HeadingSection>;
+}): void;
+/** Returns the collapsed heading positions that currently hide an element. */
+export declare function getCollapsedContentOwners(element: HTMLElement): number[];

package/dist/types/ui/collapsible-headings-section-model.d.ts

@@ -0,0 +1,9 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export type HeadingSection = {
+    contentFrom: number;
+    headingPos: number;
+    level: number;
+    to: number;
+};
+/** Builds collapsible ranges for headings that are direct children of the renderer document. */
+export declare function buildTopLevelHeadingSections(pmDocument?: PMNode): HeadingSection[];

package/dist/types/ui/collapsible-headings.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export type CollapsibleHeadingsController = {
+    canCollapse: (headingPos: number) => boolean;
+    collapse: (headingPos: number) => void;
+    expand: (headingPos: number) => void;
+    expandContainingPosition: (position: number) => void;
+    expandMany: (headingPositions: Iterable<number>) => void;
+    isCollapsed: (headingPos: number) => boolean;
+    toggle: (headingPos: number) => void;
+};
+export type CollapsibleHeading = {
+    isCollapsed: boolean;
+    toggle: () => void;
+};
+/** Provides collapse state and synchronizes hidden top-level renderer content. */
+export declare function CollapsibleHeadingsProvider({ children, isEnabled, pmDocument, rendererRef, }: {
+    children: React.ReactNode;
+    isEnabled: boolean;
+    pmDocument?: PMNode;
+    rendererRef: React.RefObject<HTMLDivElement>;
+}): React.JSX.Element;
+/** Returns collapse state for a top-level heading when the provider is enabled. */
+export declare function useCollapsibleHeading(startPos: number, isTopLevel: boolean): CollapsibleHeading | null;
+/** Returns the collapse controller for integrations such as renderer Find. */
+export declare function useCollapsibleHeadingsController(): CollapsibleHeadingsController | null;

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

@@ -45,6 +45,13 @@ export interface RendererProps {
     adfStage?: ADFStage;
     allowAltTextOnImages?: boolean;
     allowAnnotations?: boolean;
+    /**
+     * **WARNING** this attribute is not supported outside of Confluence Full Page editors
+     * Until `platform_renderer_collapsible_headings` is cleaned up.
+     *
+     * Enables collapsing top-level heading sections in a full-page, full-width, max renderer only.
+     */
+    allowCollapsibleHeadings?: boolean;
     allowColumnSorting?: boolean;
     allowCopyToClipboard?: boolean;
     allowCustomPanels?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.14.2",
+	"version": "133.16.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,23 +32,24 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^56.1.0",
 		"@atlaskit/adf-utils": "^20.3.0",
-		"@atlaskit/afm-i18n-platform-editor-renderer": "2.194.0",
+		"@atlaskit/afm-i18n-platform-editor-renderer": "2.196.0",
 		"@atlaskit/analytics-listeners": "^11.1.0",
 		"@atlaskit/analytics-namespaced-context": "^8.1.0",
 		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/code": "^18.2.0",
+		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/editor-palette": "^3.1.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-smart-link-draggable": "^1.1.0",
-		"@atlaskit/emoji": "^71.11.0",
+		"@atlaskit/emoji": "^71.13.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/icon": "^37.1.0",
 		"@atlaskit/link": "^4.3.0",
-		"@atlaskit/link-datasource": "^6.1.0",
+		"@atlaskit/link-datasource": "^6.2.0",
 		"@atlaskit/link-extractors": "^3.2.0",
 		"@atlaskit/linking-common": "^11.0.0",
 		"@atlaskit/media-card": "^81.4.0",
@@ -56,19 +57,19 @@
 		"@atlaskit/media-client-react": "^6.1.0",
 		"@atlaskit/media-common": "^14.3.0",
 		"@atlaskit/media-filmstrip": "^52.2.0",
-		"@atlaskit/media-ui": "^30.9.0",
+		"@atlaskit/media-ui": "^30.10.0",
 		"@atlaskit/media-viewer": "^54.5.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.3.0",
-		"@atlaskit/smart-card": "^45.11.0",
-		"@atlaskit/status": "^5.6.0",
-		"@atlaskit/task-decision": "^21.6.0",
+		"@atlaskit/smart-card": "^45.12.0",
+		"@atlaskit/status": "^5.7.0",
+		"@atlaskit/task-decision": "^21.7.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^132.1.0",
-		"@atlaskit/tokens": "^16.2.0",
+		"@atlaskit/tmp-editor-statsig": "^132.6.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -82,7 +83,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.35.0",
+		"@atlaskit/editor-common": "^116.38.0",
 		"@atlaskit/link-provider": "^5.2.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",
@@ -100,10 +101,10 @@
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^42.2.0",
-		"@atlaskit/mention": "^27.9.0",
+		"@atlaskit/mention": "^27.10.0",
 		"@atlaskit/modal-dialog": "^16.1.0",
 		"@atlaskit/navigation-system": "^10.7.0",
-		"@atlaskit/profilecard": "^26.12.0",
+		"@atlaskit/profilecard": "^26.13.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/a11y-jest-testing": "^0.13.0",