@atlaskit/renderer 133.14.2 → 133.16.0

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

@@ -0,0 +1,118 @@
+const RENDERER_DOCUMENT_SELECTOR = '.ak-renderer-document';
+const RENDERER_START_POS_ATTRIBUTE = 'data-renderer-start-pos';
+const HEADING_SELECTOR = [1, 2, 3, 4, 5, 6].map(level => `h${level}[${RENDERER_START_POS_ATTRIBUTE}]`).join(',');
+export const COLLAPSED_CONTENT_OWNERS_ATTRIBUTE = 'data-renderer-collapsed-content-owners';
+function getDirectRendererChild(rendererDocument, element) {
+  var _currentElement;
+  let 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) {
+  const headingPositionsByContainer = new Map();
+  rendererDocument.querySelectorAll(HEADING_SELECTOR).forEach(headingElement => {
+    if (headingElement.closest(RENDERER_DOCUMENT_SELECTOR) !== rendererDocument) {
+      return;
+    }
+    const position = Number(headingElement.getAttribute(RENDERER_START_POS_ATTRIBUTE));
+    if (!Number.isFinite(position) || !topLevelHeadingPositions.has(position)) {
+      return;
+    }
+    const headingContainer = getDirectRendererChild(rendererDocument, headingElement);
+    if (headingContainer) {
+      headingPositionsByContainer.set(headingContainer, position);
+    }
+  });
+  return headingPositionsByContainer;
+}
+function restoreHiddenAttribute(element, originalHiddenAttributes) {
+  if (!originalHiddenAttributes.has(element)) {
+    return;
+  }
+  const 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) {
+  const desiredOwners = new Map();
+  if (collapsedHeadings.size === 0) {
+    return desiredOwners;
+  }
+  const topLevelHeadingPositions = new Set(sections.map(section => section.headingPos));
+  const sectionsByHeadingPosition = new Map(sections.map(section => [section.headingPos, section]));
+  rendererDocuments.forEach(rendererDocument => {
+    // Index headings once, then reconcile every top-level renderer child in DOM order.
+    const headingPositionsByContainer = getTopLevelHeadingPositionsByContainer(rendererDocument, topLevelHeadingPositions);
+    let activeCollapsedSections = [];
+    const contentElements = Array.from(rendererDocument.children);
+    contentElements.forEach(contentElement => {
+      const headingPosition = headingPositionsByContainer.get(contentElement);
+      if (headingPosition !== undefined) {
+        activeCollapsedSections = activeCollapsedSections.filter(section => section.to > headingPosition);
+      }
+      if (activeCollapsedSections.length > 0) {
+        desiredOwners.set(contentElement, new Set(activeCollapsedSections.map(section => section.headingPos)));
+      }
+      if (headingPosition !== undefined && collapsedHeadings.has(headingPosition)) {
+        const 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(rendererDocument => {
+    var _rendererDocument$par;
+    const 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({
+  collapsedHeadings,
+  originalHiddenAttributes,
+  rendererRoot,
+  sections
+}) {
+  const rendererDocuments = getOwnedRendererDocuments(rendererRoot);
+  const desiredOwners = getDesiredCollapsedContentOwners(rendererDocuments, collapsedHeadings, sections);
+  rendererDocuments.forEach(rendererDocument => {
+    rendererDocument.querySelectorAll(`[${COLLAPSED_CONTENT_OWNERS_ATTRIBUTE}]`).forEach(element => {
+      if (element.closest(RENDERER_DOCUMENT_SELECTOR) === rendererDocument && !desiredOwners.has(element)) {
+        element.removeAttribute(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE);
+        restoreHiddenAttribute(element, originalHiddenAttributes);
+      }
+    });
+  });
+  desiredOwners.forEach((owners, element) => {
+    const 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(owner => owner !== '').map(Number).filter(Number.isFinite);
+}

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

@@ -0,0 +1,32 @@
+const 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 [];
+  }
+  const sections = [];
+  const openSections = [];
+  const documentEnd = pmDocument.content.size + RENDERER_DOCUMENT_POSITION_OFFSET;
+  pmDocument.forEach((node, offset) => {
+    if (node.type.name !== 'heading') {
+      return;
+    }
+    const headingPos = offset + RENDERER_DOCUMENT_POSITION_OFFSET;
+    const level = Number(node.attrs.level);
+    while (openSections.length > 0 && openSections[openSections.length - 1].level >= level) {
+      const section = openSections.pop();
+      if (section) {
+        section.to = headingPos;
+      }
+    }
+    const section = {
+      contentFrom: headingPos + node.nodeSize,
+      headingPos,
+      level,
+      to: documentEnd
+    };
+    sections.push(section);
+    openSections.push(section);
+  });
+  return sections;
+}

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

@@ -0,0 +1,183 @@
+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';
+const CollapsibleHeadingsContext = /*#__PURE__*/React.createContext(null);
+const emptyCollapsedHeadings = new Set();
+function supportsHiddenUntilFound(rendererRef) {
+  var _rendererRef$current;
+  const 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({
+  children,
+  isEnabled,
+  pmDocument,
+  rendererRef
+}) {
+  const [isBrowserFindSupported, setIsBrowserFindSupported] = useState(false);
+  const [state, setState] = useState({
+    pmDocument,
+    positions: new Set()
+  });
+  const originalHiddenAttributes = React.useRef(new WeakMap()).current;
+  const sections = useMemo(() => buildTopLevelHeadingSections(pmDocument), [pmDocument]);
+  const collapsibleSectionPositions = useMemo(() => new Set(sections.filter(section => section.contentFrom < section.to).map(section => section.headingPos)), [sections]);
+  const collapsedHeadings = state.pmDocument === pmDocument ? state.positions : emptyCollapsedHeadings;
+  const isActive = isEnabled && isBrowserFindSupported && Boolean(pmDocument);
+  useEffect(() => {
+    setIsBrowserFindSupported(isEnabled && supportsHiddenUntilFound(rendererRef));
+  }, [isEnabled, rendererRef]);
+  const updateCollapsedHeadings = useCallback(update => {
+    setState(currentState => {
+      const positions = new Set(currentState.pmDocument === pmDocument ? currentState.positions : emptyCollapsedHeadings);
+      if (!update(positions)) {
+        return currentState.pmDocument === pmDocument ? currentState : {
+          pmDocument,
+          positions
+        };
+      }
+      return {
+        pmDocument,
+        positions
+      };
+    });
+  }, [pmDocument]);
+  const collapse = useCallback(headingPos => {
+    if (!collapsibleSectionPositions.has(headingPos)) {
+      return;
+    }
+    updateCollapsedHeadings(positions => {
+      if (positions.has(headingPos)) {
+        return false;
+      }
+      positions.add(headingPos);
+      return true;
+    });
+  }, [collapsibleSectionPositions, updateCollapsedHeadings]);
+  const expand = useCallback(headingPos => {
+    updateCollapsedHeadings(positions => positions.delete(headingPos));
+  }, [updateCollapsedHeadings]);
+  const expandMany = useCallback(headingPositions => {
+    const positionsToExpand = new Set(headingPositions);
+    updateCollapsedHeadings(positions => {
+      let didChange = false;
+      positionsToExpand.forEach(headingPos => {
+        didChange = positions.delete(headingPos) || didChange;
+      });
+      return didChange;
+    });
+  }, [updateCollapsedHeadings]);
+  const expandContainingPosition = useCallback(position => {
+    expandMany(sections.filter(section => position >= section.contentFrom && position < section.to).map(section => section.headingPos));
+  }, [expandMany, sections]);
+  const toggle = useCallback(headingPos => {
+    if (!collapsibleSectionPositions.has(headingPos)) {
+      return;
+    }
+    updateCollapsedHeadings(positions => {
+      if (positions.has(headingPos)) {
+        positions.delete(headingPos);
+      } else {
+        positions.add(headingPos);
+      }
+      return true;
+    });
+  }, [collapsibleSectionPositions, updateCollapsedHeadings]);
+  const contextValue = useMemo(() => isActive ? {
+    canCollapse: headingPos => collapsibleSectionPositions.has(headingPos),
+    collapse,
+    expand,
+    expandContainingPosition,
+    expandMany,
+    isCollapsed: headingPos => collapsedHeadings.has(headingPos),
+    toggle
+  } : null, [collapse, collapsedHeadings, collapsibleSectionPositions, expand, expandContainingPosition, expandMany, isActive, toggle]);
+  useEffect(() => {
+    const rendererRoot = rendererRef.current;
+    if (!rendererRoot) {
+      return;
+    }
+    const positions = isActive ? collapsedHeadings : emptyCollapsedHeadings;
+    const sync = () => reconcileCollapsedHeadingContent({
+      collapsedHeadings: positions,
+      originalHiddenAttributes,
+      rendererRoot,
+      sections
+    });
+    sync();
+    if (!isActive || positions.size === 0) {
+      return;
+    }
+    const rendererDocuments = getOwnedRendererDocuments(rendererRoot);
+    const rendererDocumentSet = new Set(rendererDocuments);
+    const handleBeforeMatch = event => {
+      var _rendererRoot$ownerDo;
+      const target = event.target;
+      const HTMLElementConstructor = (_rendererRoot$ownerDo = rendererRoot.ownerDocument.defaultView) === null || _rendererRoot$ownerDo === void 0 ? void 0 : _rendererRoot$ownerDo.HTMLElement;
+      if (!HTMLElementConstructor || !(target instanceof HTMLElementConstructor)) {
+        return;
+      }
+      const collapsedContent = target.closest(`[${COLLAPSED_CONTENT_OWNERS_ATTRIBUTE}]`);
+      if (!collapsedContent) {
+        return;
+      }
+      const rendererDocument = collapsedContent.closest('.ak-renderer-document');
+      if (!rendererDocument || !rendererDocumentSet.has(rendererDocument)) {
+        return;
+      }
+      expandMany(getCollapsedContentOwners(collapsedContent));
+    };
+    const unbindBeforeMatchListeners = rendererDocuments.map(rendererDocument => bind(rendererDocument, {
+      type: 'beforematch',
+      listener: handleBeforeMatch,
+      options: {
+        capture: true
+      }
+    }));
+    const observer = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(sync);
+    rendererDocuments.forEach(rendererDocument => {
+      observer === null || observer === void 0 ? void 0 : observer.observe(rendererDocument, {
+        childList: true
+      });
+    });
+    return () => {
+      observer === null || observer === void 0 ? void 0 : observer.disconnect();
+      unbindBeforeMatchListeners.forEach(unbindBeforeMatch => unbindBeforeMatch());
+    };
+  }, [collapsedHeadings, expandMany, isActive, originalHiddenAttributes, rendererRef, sections]);
+  useEffect(() => () => {
+    const rendererRoot = rendererRef.current;
+    if (rendererRoot) {
+      reconcileCollapsedHeadingContent({
+        collapsedHeadings: emptyCollapsedHeadings,
+        originalHiddenAttributes,
+        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) {
+  const context = React.useContext(CollapsibleHeadingsContext);
+  const contextToggle = context === null || context === void 0 ? void 0 : context.toggle;
+  const isCollapsible = Boolean(context && isTopLevel && context.canCollapse(startPos));
+  const isCollapsed = Boolean(isCollapsible && (context === null || context === void 0 ? void 0 : context.isCollapsed(startPos)));
+  const toggle = useCallback(() => contextToggle === null || contextToggle === void 0 ? void 0 : contextToggle(startPos), [contextToggle, startPos]);
+  return useMemo(() => isCollapsible ? {
+    isCollapsed,
+    toggle
+  } : null, [isCollapsed, isCollapsible, toggle]);
+}
+
+/** Returns the collapse controller for integrations such as renderer Find. */
+export function useCollapsibleHeadingsController() {
+  return React.useContext(CollapsibleHeadingsContext);
+}

package/dist/esm/messages.js

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

package/dist/esm/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}}