@x15ventures/x15-ui-library 3.18.0 → 3.20.0

package/dist/esm/widgets/documentViewer/documentViewer.css

@@ -0,0 +1,82 @@
+.documentViewer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--documentViewerGap, var(--documentGap, 10px));
+  min-width: 0;
+}
+.documentViewer .headerBar {
+  margin-bottom: 0;
+}
+
+.documentViewer__metadata {
+  display: flex;
+  align-items: center;
+  gap: var(--documentViewerGap, var(--documentGap, 10px));
+}
+
+.documentViewer__metadataIcon {
+  width: var(--documentViewerMetadataIconSize, 30px);
+  height: var(--documentViewerMetadataIconSize, 30px);
+  font-size: var(--documentViewerMetadataIconSize, 30px);
+}
+
+.documentViewer__fileName {
+  font-weight: var(--documentViewerMetadataFileNameWeight, 600);
+  overflow-wrap: anywhere;
+}
+
+.documentViewer__fileSize {
+  color: var(--documentViewerMetadataSizeColor, var(--documentMutedFgColor));
+}
+
+.documentViewer__frame {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--documentViewerFrameMinHeight, var(--documentFrameMinHeight, 65vh));
+  max-height: var(--documentViewerFrameMaxHeight, none);
+  border: var(--documentViewerFrameBorder, var(--documentBorder));
+  border-radius: var(--documentViewerFrameBorderRadius, var(--documentBorderRadius, 5px));
+  background: var(--documentViewerFrameBg, var(--documentBg, #fff));
+  overflow: auto;
+}
+
+.documentViewer__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.documentViewer__content > .loadingMessage,
+.documentViewer__content > aside,
+.documentViewer__content > .pageBanner {
+  margin: auto;
+}
+
+.documentViewer__pdf,
+.documentViewer__word {
+  display: block;
+  flex: 1;
+  width: 100%;
+  min-height: var(--documentViewerFrameMinHeight, var(--documentFrameMinHeight, 65vh));
+  border: 0;
+}
+
+.documentViewer__text {
+  margin: 0;
+  padding: var(--documentViewerTextPadding, 20px);
+  font-size: var(--documentViewerTextFontSize, 0.8125rem);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.documentViewer__image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: var(--documentViewerImageMargin, 20px auto);
+}
+
+.documentViewer__errorDetail {
+  display: block;
+  margin-top: 5px;
+  font-size: 0.875em;
+}

package/dist/esm/widgets/documentViewer/documentViewer.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=documentViewer.interfaces.js.map

package/dist/esm/widgets/documentViewer/documentViewer.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentViewer.interfaces.js","names":[],"sources":["../../../../src/widgets/documentViewer/documentViewer.interfaces.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { IconSource } from '../../helpers/iconHelpers';\nimport { DocumentAnnotationsProps } from '../shared/documents/annotations/annotations.interfaces';\nimport {\n  DocumentKind,\n  DocumentLoadStatus,\n  DocumentSource,\n  LoadedDocument,\n  ResolveResourceUrl\n} from '../shared/documents/documents.interfaces';\n\nexport type DocumentRendererProps = {\n  document: DocumentSource;\n  loaded: LoadedDocument;\n  resolveResourceUrl: ResolveResourceUrl;\n  headingOffset: number;\n  /* eslint-disable-next-line no-unused-vars */\n  onError: (error: unknown) => void;\n};\n\n/* eslint-disable-next-line no-unused-vars */\nexport type DocumentRenderer = (props: DocumentRendererProps) => ReactNode;\n\nexport type DocumentRenderers = Partial<Record<Exclude<DocumentKind, 'unsupported'>, DocumentRenderer>>;\n\nexport type DocumentViewerLabels = {\n  loadingHeading: string;\n  loadingMessage: string;\n  loadError: string;\n  unsupported: string;\n  wordNotice: string;\n  imageError: string;\n};\n\nexport type DocumentViewerCssClasses = {\n  wrapper?: string;\n  metadata?: string;\n  frame?: string;\n  content?: string;\n};\n\nexport type DocumentViewerProps = {\n  id: string;\n  document: DocumentSource;\n  showHeader?: boolean;\n  showMetadata?: boolean;\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  // Rendered inside the header bar, e.g. download or export actions.\n  headerActions?: ReactNode;\n  metadataIcon?: IconSource;\n  // Demote headings inside markdown documents so they nest beneath the viewer's own heading.\n  contentHeadingOffset?: number;\n  // Show the notice that Word previews are an approximation of the original layout.\n  showWordNotice?: boolean;\n  // Override renderers for supported kinds; unspecified kinds use the built-in renderers.\n  renderers?: DocumentRenderers;\n  // Refine or reject supported kinds; cannot enable files the built-in detector rejects.\n  /* eslint-disable-next-line no-unused-vars */\n  getDocumentKind?: (document: DocumentSource) => DocumentKind;\n  // Rewrite links and images inside rendered content; defaults to resolving against the document URL.\n  resolveResourceUrl?: ResolveResourceUrl;\n  // PDFs are fetched and checked before display. Origins listed here (e.g. 'https://docs.example.com')\n  // may instead be framed directly when their server does not allow cross-origin requests. Trusting an\n  // origin trusts everything it serves and redirects to.\n  trustedPdfOrigins?: string[];\n  // Pinned comments on markdown and text documents. PDF and Word previews render in isolated frames\n  // the page cannot reach into, so they cannot be annotated.\n  annotations?: DocumentAnnotationsProps;\n  labels?: Partial<DocumentViewerLabels>;\n  customCssClasses?: DocumentViewerCssClasses;\n  /* eslint-disable-next-line no-unused-vars */\n  onStatusChange?: (status: DocumentLoadStatus, error?: unknown) => void;\n};\n"],"mappings":"","ignoreList":[]}

package/dist/esm/widgets/documentViewer/index.js

@@ -0,0 +1,2 @@
+export { DocumentViewer, defaultDocumentViewerLabels } from './DocumentViewer';
+//# sourceMappingURL=index.js.map

package/dist/esm/widgets/documentViewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DocumentViewer","defaultDocumentViewerLabels"],"sources":["../../../../src/widgets/documentViewer/index.ts"],"sourcesContent":["export { DocumentViewer, defaultDocumentViewerLabels } from './DocumentViewer';\n\nexport type {\n  DocumentRenderer,\n  DocumentRendererProps,\n  DocumentRenderers,\n  DocumentViewerCssClasses,\n  DocumentViewerLabels,\n  DocumentViewerProps\n} from './documentViewer.interfaces';\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,2BAA2B,QAAQ,kBAAkB","ignoreList":[]}

package/dist/esm/widgets/index.js

@@ -1,4 +1,10 @@
 'use client';
 
 export { ProcessLauncher } from './processLauncher';
+export { DocumentViewer, defaultDocumentViewerLabels } from './documentViewer';
+export { DocumentEditor, defaultDocumentEditorLabels } from './documentEditor';
+export { DocumentComparer, defaultDocumentComparerLabels } from './documentComparer';
+export { DocumentComments, defaultDocumentCommentsLabels } from './documentComments';
+export { AnnotationLayer, createTextQuoteAnchor, createTextQuoteResolver, defaultDocumentAnnotationLabels, resolveTextQuoteAnchor } from './shared/documents/annotations';
+export { fetchDocumentAsArrayBuffer, fetchDocumentAsText, getDocumentExtension, getDocumentFileName, getDocumentKind, resolveDocumentResource, useDocumentContent } from './shared/documents';
 //# sourceMappingURL=index.js.map

package/dist/esm/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ProcessLauncher"],"sources":["../../../src/widgets/index.ts"],"sourcesContent":["'use client';\n\nexport { ProcessLauncher } from './processLauncher';\n\nexport type {\n  ProcessLauncherProps,\n  ProcessDefinition,\n  ProcessLaunchButtonProps,\n  ProcessProgressIndicatorProps,\n  ProcessStatus,\n  ProcessProgressUpdateMode,\n  ProcessPushableStatus,\n  ProcessProgressUpdate,\n  ProcessProgressSubscriptionHandlers,\n  ProcessProgressUnsubscribe,\n  ProcessProgressSubscription,\n  ProcessLauncherFetchProgressProps,\n  ProcessLauncherSubscribeProgressProps,\n  ProcessLauncherProgressProps\n} from './processLauncher';\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,eAAe,QAAQ,mBAAmB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["ProcessLauncher","DocumentViewer","defaultDocumentViewerLabels","DocumentEditor","defaultDocumentEditorLabels","DocumentComparer","defaultDocumentComparerLabels","DocumentComments","defaultDocumentCommentsLabels","AnnotationLayer","createTextQuoteAnchor","createTextQuoteResolver","defaultDocumentAnnotationLabels","resolveTextQuoteAnchor","fetchDocumentAsArrayBuffer","fetchDocumentAsText","getDocumentExtension","getDocumentFileName","getDocumentKind","resolveDocumentResource","useDocumentContent"],"sources":["../../../src/widgets/index.ts"],"sourcesContent":["'use client';\n\nexport { ProcessLauncher } from './processLauncher';\n\nexport type {\n  ProcessLauncherProps,\n  ProcessDefinition,\n  ProcessLaunchButtonProps,\n  ProcessProgressIndicatorProps,\n  ProcessStatus,\n  ProcessProgressUpdateMode,\n  ProcessPushableStatus,\n  ProcessProgressUpdate,\n  ProcessProgressSubscriptionHandlers,\n  ProcessProgressUnsubscribe,\n  ProcessProgressSubscription,\n  ProcessLauncherFetchProgressProps,\n  ProcessLauncherSubscribeProgressProps,\n  ProcessLauncherProgressProps\n} from './processLauncher';\n\nexport { DocumentViewer, defaultDocumentViewerLabels } from './documentViewer';\nexport type {\n  DocumentRenderer,\n  DocumentRendererProps,\n  DocumentRenderers,\n  DocumentViewerCssClasses,\n  DocumentViewerLabels,\n  DocumentViewerProps\n} from './documentViewer';\n\nexport { DocumentEditor, defaultDocumentEditorLabels } from './documentEditor';\nexport type {\n  DocumentEditorCssClasses,\n  DocumentEditorLabels,\n  DocumentEditorProps,\n  MarkdownEditorImageUploadHandler,\n  MarkdownEditorListType,\n  MarkdownEditorToolbarItem,\n  MarkdownEditorViewMode\n} from './documentEditor';\n\nexport { DocumentComparer, defaultDocumentComparerLabels } from './documentComparer';\nexport type {\n  ComparisonDocument,\n  DocumentComparerCssClasses,\n  DocumentComparerLabels,\n  DocumentComparerProps,\n  DocumentComparerSaveUpdate,\n  DocumentComparerView,\n  DocumentDiffView\n} from './documentComparer';\n\nexport { DocumentComments, defaultDocumentCommentsLabels } from './documentComments';\nexport type {\n  DocumentCommentsCssClasses,\n  DocumentCommentsFilter,\n  DocumentCommentsLabels,\n  DocumentCommentsProps,\n  NewDocumentComment\n} from './documentComments';\n\nexport {\n  AnnotationLayer,\n  createTextQuoteAnchor,\n  createTextQuoteResolver,\n  defaultDocumentAnnotationLabels,\n  resolveTextQuoteAnchor\n} from './shared/documents/annotations';\nexport type {\n  AnnotationLayerProps,\n  DocumentAnchorStatus,\n  DocumentAnnotationLabels,\n  DocumentAnnotationsProps,\n  DocumentComment,\n  DocumentCommentAuthor,\n  DocumentCommentReply,\n  TextQuoteAnchor\n} from './shared/documents/annotations';\n\nexport {\n  fetchDocumentAsArrayBuffer,\n  fetchDocumentAsText,\n  getDocumentExtension,\n  getDocumentFileName,\n  getDocumentKind,\n  resolveDocumentResource,\n  useDocumentContent\n} from './shared/documents';\nexport type {\n  DocumentContentState,\n  DocumentKind,\n  DocumentLoadStatus,\n  DocumentSource,\n  LoadedDocument,\n  ResolveResourceUrl\n} from './shared/documents';\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,eAAe,QAAQ,mBAAmB;AAmBnD,SAASC,cAAc,EAAEC,2BAA2B,QAAQ,kBAAkB;AAU9E,SAASC,cAAc,EAAEC,2BAA2B,QAAQ,kBAAkB;AAW9E,SAASC,gBAAgB,EAAEC,6BAA6B,QAAQ,oBAAoB;AAWpF,SAASC,gBAAgB,EAAEC,6BAA6B,QAAQ,oBAAoB;AASpF,SACEC,eAAe,EACfC,qBAAqB,EACrBC,uBAAuB,EACvBC,+BAA+B,EAC/BC,sBAAsB,QACjB,gCAAgC;AAYvC,SACEC,0BAA0B,EAC1BC,mBAAmB,EACnBC,oBAAoB,EACpBC,mBAAmB,EACnBC,eAAe,EACfC,uBAAuB,EACvBC,kBAAkB,QACb,oBAAoB","ignoreList":[]}

package/dist/esm/widgets/shared/documents/ToggleGroup.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { SimpleButton } from '../../../components';
+import './toggleGroup.css';
+// A set of mutually exclusive view toggles, e.g. side by side / differences, open / resolved.
+export const ToggleGroup = ({
+  id,
+  legend,
+  options,
+  value,
+  onChange
+}) => /*#__PURE__*/React.createElement("fieldset", {
+  className: "documentToggleGroup"
+}, /*#__PURE__*/React.createElement("legend", {
+  className: "sr-only"
+}, legend), options.map(option => /*#__PURE__*/React.createElement(SimpleButton, {
+  key: option.value,
+  id: `${id}_${option.value}`,
+  label: option.label,
+  ariaPressed: option.value === value,
+  cssClass: option.value === value ? 'button primary compact' : 'button secondary outline compact',
+  onClickHandler: () => onChange(option.value)
+})));
+export default ToggleGroup;
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/esm/widgets/shared/documents/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","names":["React","SimpleButton","ToggleGroup","id","legend","options","value","onChange","createElement","className","map","option","key","label","ariaPressed","cssClass","onClickHandler"],"sources":["../../../../../src/widgets/shared/documents/ToggleGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SimpleButton } from '../../../components';\n\nimport './toggleGroup.scss';\n\nexport type ToggleOption<T extends string> = { value: T; label: string };\n\nexport type ToggleGroupProps<T extends string> = {\n  id: string;\n  // Announced to assistive technology; the group has no visible title.\n  legend: string;\n  options: ToggleOption<T>[];\n  value: T;\n  /* eslint-disable-next-line no-unused-vars */\n  onChange: (value: T) => void;\n};\n\n// A set of mutually exclusive view toggles, e.g. side by side / differences, open / resolved.\nexport const ToggleGroup = <T extends string>({ id, legend, options, value, onChange }: ToggleGroupProps<T>) => (\n  <fieldset className=\"documentToggleGroup\">\n    <legend className=\"sr-only\">{ legend }</legend>\n    { options.map((option) => (\n      <SimpleButton\n        key={ option.value }\n        id={ `${ id }_${ option.value }` }\n        label={ option.label }\n        ariaPressed={ option.value === value }\n        cssClass={ option.value === value ? 'button primary compact' : 'button secondary outline compact' }\n        onClickHandler={ () => onChange(option.value) }\n      />\n    )) }\n  </fieldset>\n);\n\nexport default ToggleGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,qBAAqB;AAElD,OAAO,oBAAoB;AAc3B;AACA,OAAO,MAAMC,WAAW,GAAGA,CAAmB;EAAEC,EAAE;EAAEC,MAAM;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAA8B,CAAC,kBACzGP,KAAA,CAAAQ,aAAA;EAAUC,SAAS,EAAC;AAAqB,gBACvCT,KAAA,CAAAQ,aAAA;EAAQC,SAAS,EAAC;AAAS,GAAGL,MAAgB,CAAC,EAC7CC,OAAO,CAACK,GAAG,CAAEC,MAAM,iBACnBX,KAAA,CAAAQ,aAAA,CAACP,YAAY;EACXW,GAAG,EAAGD,MAAM,CAACL,KAAO;EACpBH,EAAE,EAAG,GAAIA,EAAE,IAAMQ,MAAM,CAACL,KAAK,EAAK;EAClCO,KAAK,EAAGF,MAAM,CAACE,KAAO;EACtBC,WAAW,EAAGH,MAAM,CAACL,KAAK,KAAKA,KAAO;EACtCS,QAAQ,EAAGJ,MAAM,CAACL,KAAK,KAAKA,KAAK,GAAG,wBAAwB,GAAG,kCAAoC;EACnGU,cAAc,EAAGA,CAAA,KAAMT,QAAQ,CAACI,MAAM,CAACL,KAAK;AAAG,CAChD,CACF,CACO,CACX;AAED,eAAeJ,WAAW","ignoreList":[]}

package/dist/esm/widgets/shared/documents/annotations/AnnotationLayer.js

@@ -0,0 +1,273 @@
+'use client';
+
+import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { SimpleButton } from '../../../../components';
+import { getPreferredScrollBehavior } from '../../../../helpers/interactionsHelper';
+import { defaultDocumentAnnotationLabels, getVisibleComments } from './annotations.interfaces';
+import { clearInstanceHighlights, setInstanceHighlights } from './highlightRegistry';
+import { buildTextIndex, offsetsFromRange, rangeFromOffsets } from './textIndex';
+import { createTextQuoteAnchor, createTextQuoteResolver, resolveTextQuoteAnchor } from './textQuoteAnchor';
+import './annotationLayer.css';
+
+// A selection made somewhere the layer cannot see through the DOM, e.g. the markdown source editor.
+
+const sameStatus = (first, second) => first !== null && Object.keys(first).length === Object.keys(second).length && Object.entries(second).every(([commentId, attached]) => first[commentId] === attached);
+
+// Geometry changes with every layout, so positions are passed to CSS as custom properties.
+const positionStyle = ({
+  top,
+  left
+}) => ({
+  '--documentAnnotationTop': `${top}px`,
+  '--documentAnnotationLeft': `${left}px`
+});
+
+/*
+  AnnotationLayer pins comments to the text of its children. It highlights each comment's quoted
+  text, places a bubble at the end of it, offers a "Comment" action for new selections, and reports
+  which comments could still be found. It never changes the annotated DOM, so it can wrap content
+  owned by another library such as the rich-text editor.
+ */
+export const AnnotationLayer = ({
+  id,
+  children,
+  comments,
+  selectedCommentId,
+  canComment = false,
+  showResolved = false,
+  onRequestComment,
+  onSelectComment,
+  onAnchorStatusChange,
+  labels: customLabels,
+  getTextRoot,
+  externalSelection = null,
+  onExternalSelectionConsumed
+}) => {
+  const labels = useMemo(() => ({
+    ...defaultDocumentAnnotationLabels,
+    ...customLabels
+  }), [customLabels]);
+  const instanceId = useId();
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const reportedStatusRef = useRef(null);
+  const frameRef = useRef(null);
+  const [markers, setMarkers] = useState([]);
+  const [domSelection, setDomSelection] = useState(null);
+  const visibleComments = useMemo(() => getVisibleComments(comments, showResolved), [comments, showResolved]);
+  const findTextRoot = useCallback(() => {
+    const content = contentRef.current;
+    if (!content) {
+      return null;
+    }
+    return getTextRoot ? getTextRoot(content) : content;
+  }, [getTextRoot]);
+
+  // Converts viewport coordinates to coordinates within the layer, where the overlay is positioned.
+  const toLayerPosition = useCallback((viewportTop, viewportLeft) => {
+    const container = containerRef.current;
+    if (!container) {
+      return null;
+    }
+    const containerRect = container.getBoundingClientRect();
+    return {
+      top: viewportTop - containerRect.top,
+      left: viewportLeft - containerRect.left
+    };
+  }, []);
+  const updateAnnotations = useCallback(() => {
+    const root = findTextRoot();
+    if (!root) {
+      setMarkers([]);
+      clearInstanceHighlights(instanceId);
+      return;
+    }
+    const index = buildTextIndex(root);
+    const status = {};
+    const commentRanges = [];
+    const selectedRanges = [];
+    const nextMarkers = [];
+    const resolveAnchor = createTextQuoteResolver(index.text);
+    visibleComments.forEach(comment => {
+      const match = comment.anchor ? resolveAnchor(comment.anchor) : null;
+      const range = match ? rangeFromOffsets(index, match.start, match.end) : null;
+      status[comment.id] = range !== null;
+      if (!range) {
+        return;
+      }
+      (comment.id === selectedCommentId ? selectedRanges : commentRanges).push(range);
+      // Hidden content (e.g. the rich-text view while source mode is shown) has no visible rects.
+      const lastRect = Array.from(range.getClientRects?.() ?? []).filter(rect => rect.width || rect.height).pop();
+      const position = lastRect ? toLayerPosition(lastRect.top, lastRect.right) : null;
+      if (position) {
+        nextMarkers.push({
+          ...position,
+          commentId: comment.id,
+          authorName: comment.author.name
+        });
+      }
+    });
+    setInstanceHighlights(instanceId, {
+      comments: commentRanges,
+      selected: selectedRanges
+    });
+    setMarkers(nextMarkers);
+    if (!sameStatus(reportedStatusRef.current, status)) {
+      reportedStatusRef.current = status;
+      onAnchorStatusChange?.(status);
+    }
+  }, [findTextRoot, instanceId, visibleComments, selectedCommentId, toLayerPosition, onAnchorStatusChange]);
+  const scheduleUpdate = useCallback(() => {
+    if (frameRef.current !== null) {
+      return;
+    }
+    frameRef.current = window.requestAnimationFrame(() => {
+      frameRef.current = null;
+      updateAnnotations();
+    });
+  }, [updateAnnotations]);
+  useLayoutEffect(() => {
+    updateAnnotations();
+  }, [updateAnnotations]);
+
+  // Content can change without React knowing: lazy engines finish loading, the editor applies edits.
+  useEffect(() => {
+    const container = containerRef.current;
+    const content = contentRef.current;
+    if (!container || !content) {
+      return undefined;
+    }
+    const mutationObserver = new MutationObserver(scheduleUpdate);
+    mutationObserver.observe(content, {
+      subtree: true,
+      childList: true,
+      characterData: true
+    });
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleUpdate);
+    resizeObserver?.observe(container);
+    window.addEventListener('resize', scheduleUpdate);
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', scheduleUpdate);
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [scheduleUpdate]);
+  useEffect(() => () => clearInstanceHighlights(instanceId), [instanceId]);
+  useEffect(() => {
+    if (!canComment) {
+      setDomSelection(null);
+      return undefined;
+    }
+    const handleSelectionChange = () => {
+      const root = findTextRoot();
+      const selection = document.getSelection();
+      if (!root || !selection || selection.rangeCount === 0 || selection.isCollapsed) {
+        setDomSelection(null);
+        return;
+      }
+      const range = selection.getRangeAt(0);
+      if (!root.contains(range.commonAncestorContainer)) {
+        setDomSelection(null);
+        return;
+      }
+      const index = buildTextIndex(root);
+      const {
+        start,
+        end
+      } = offsetsFromRange(index, range);
+      const anchor = createTextQuoteAnchor(index.text, start, end);
+      const lastRect = Array.from(range.getClientRects?.() ?? []).pop() ?? range.getBoundingClientRect?.();
+      const position = anchor && lastRect ? toLayerPosition(lastRect.bottom, lastRect.right) : null;
+      setDomSelection(anchor && position ? {
+        ...position,
+        anchor
+      } : null);
+    };
+    document.addEventListener('selectionchange', handleSelectionChange);
+    return () => document.removeEventListener('selectionchange', handleSelectionChange);
+  }, [canComment, findTextRoot, toLayerPosition]);
+
+  // Read through a ref so only a change of selected comment scrolls; comment edits must not move the reader.
+  const latestRef = useRef({
+    visibleComments,
+    findTextRoot
+  });
+  latestRef.current = {
+    visibleComments,
+    findTextRoot
+  };
+
+  // Scroll a newly selected comment into view, e.g. after it is chosen in the comments panel.
+  useEffect(() => {
+    const comment = latestRef.current.visibleComments.find(candidate => candidate.id === selectedCommentId);
+    const root = latestRef.current.findTextRoot();
+    if (!comment?.anchor || !root) {
+      return;
+    }
+    const index = buildTextIndex(root);
+    const match = resolveTextQuoteAnchor(index.text, comment.anchor);
+    const range = match ? rangeFromOffsets(index, match.start, match.end) : null;
+    range?.startContainer.parentElement?.scrollIntoView?.({
+      block: 'center',
+      behavior: getPreferredScrollBehavior()
+    });
+  }, [selectedCommentId]);
+  const externalPosition = externalSelection ? toLayerPosition(externalSelection.rect.bottom, externalSelection.rect.right) : null;
+  const pending = externalSelection && externalPosition ? {
+    ...externalPosition,
+    anchor: externalSelection.anchor
+  } : domSelection;
+  const handleRequestComment = () => {
+    if (!pending) {
+      return;
+    }
+    onRequestComment?.(pending.anchor);
+    if (externalSelection) {
+      onExternalSelectionConsumed?.();
+    } else {
+      document.getSelection()?.removeAllRanges();
+    }
+    setDomSelection(null);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "documentAnnotations",
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "documentAnnotations__content",
+    ref: contentRef
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "documentAnnotations__overlay"
+  }, markers.map(marker => /*#__PURE__*/React.createElement("div", {
+    key: marker.commentId,
+    className: "documentAnnotations__bubble",
+    style: positionStyle(marker)
+  }, /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `${id}_bubble_${marker.commentId}`,
+    label: labels.openComment(marker.authorName),
+    hideLabel: true,
+    leftIcon: "bubbles4",
+    ariaPressed: marker.commentId === selectedCommentId,
+    cssClass: `button icon-only compact documentAnnotations__bubbleButton ${marker.commentId === selectedCommentId ? 'documentAnnotations__bubbleButton--selected' : ''}`,
+    onClickHandler: () => onSelectComment?.(marker.commentId)
+  }))), canComment && pending &&
+  /*#__PURE__*/
+  // Pressing the button must not clear the text selection it acts on.
+  React.createElement("div", {
+    className: "documentAnnotations__trigger",
+    style: positionStyle(pending),
+    onMouseDown: event => event.preventDefault()
+  }, /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `${id}_addComment`,
+    label: labels.addComment,
+    leftIcon: "bubble",
+    cssClass: "button primary compact documentAnnotations__triggerButton",
+    onClickHandler: handleRequestComment
+  }))));
+};
+export default AnnotationLayer;
+//# sourceMappingURL=AnnotationLayer.js.map

package/dist/esm/widgets/shared/documents/annotations/AnnotationLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationLayer.js","names":["React","useCallback","useEffect","useId","useLayoutEffect","useMemo","useRef","useState","SimpleButton","getPreferredScrollBehavior","defaultDocumentAnnotationLabels","getVisibleComments","clearInstanceHighlights","setInstanceHighlights","buildTextIndex","offsetsFromRange","rangeFromOffsets","createTextQuoteAnchor","createTextQuoteResolver","resolveTextQuoteAnchor","sameStatus","first","second","Object","keys","length","entries","every","commentId","attached","positionStyle","top","left","AnnotationLayer","id","children","comments","selectedCommentId","canComment","showResolved","onRequestComment","onSelectComment","onAnchorStatusChange","labels","customLabels","getTextRoot","externalSelection","onExternalSelectionConsumed","instanceId","containerRef","contentRef","reportedStatusRef","frameRef","markers","setMarkers","domSelection","setDomSelection","visibleComments","findTextRoot","content","current","toLayerPosition","viewportTop","viewportLeft","container","containerRect","getBoundingClientRect","updateAnnotations","root","index","status","commentRanges","selectedRanges","nextMarkers","resolveAnchor","text","forEach","comment","match","anchor","range","start","end","push","lastRect","Array","from","getClientRects","filter","rect","width","height","pop","position","right","authorName","author","name","selected","scheduleUpdate","window","requestAnimationFrame","undefined","mutationObserver","MutationObserver","observe","subtree","childList","characterData","resizeObserver","ResizeObserver","addEventListener","disconnect","removeEventListener","cancelAnimationFrame","handleSelectionChange","selection","document","getSelection","rangeCount","isCollapsed","getRangeAt","contains","commonAncestorContainer","bottom","latestRef","find","candidate","startContainer","parentElement","scrollIntoView","block","behavior","externalPosition","pending","handleRequestComment","removeAllRanges","createElement","className","ref","map","marker","key","style","label","openComment","hideLabel","leftIcon","ariaPressed","cssClass","onClickHandler","onMouseDown","event","preventDefault","addComment"],"sources":["../../../../../../src/widgets/shared/documents/annotations/AnnotationLayer.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  CSSProperties,\n  FC,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport { SimpleButton } from '../../../../components';\nimport { getPreferredScrollBehavior } from '../../../../helpers/interactionsHelper';\nimport {\n  defaultDocumentAnnotationLabels,\n  DocumentAnchorStatus,\n  DocumentAnnotationsProps,\n  getVisibleComments,\n  TextQuoteAnchor\n} from './annotations.interfaces';\nimport { clearInstanceHighlights, setInstanceHighlights } from './highlightRegistry';\nimport { buildTextIndex, offsetsFromRange, rangeFromOffsets } from './textIndex';\nimport { createTextQuoteAnchor, createTextQuoteResolver, resolveTextQuoteAnchor } from './textQuoteAnchor';\n\nimport './annotationLayer.scss';\n\ntype Position = { top: number; left: number };\n\ntype CommentMarker = Position & { commentId: string; authorName: string };\n\nexport type PendingSelection = Position & { anchor: TextQuoteAnchor };\n\n// A selection made somewhere the layer cannot see through the DOM, e.g. the markdown source editor.\nexport type ExternalSelection = { anchor: TextQuoteAnchor; rect: { bottom: number; right: number } } | null;\n\nexport type AnnotationLayerProps = DocumentAnnotationsProps & {\n  id: string;\n  children: ReactNode;\n  // Locates the element holding the document text inside the layer's content; defaults to the content.\n  /* eslint-disable-next-line no-unused-vars */\n  getTextRoot?: (content: HTMLElement) => HTMLElement | null;\n  externalSelection?: ExternalSelection;\n  onExternalSelectionConsumed?: () => void;\n};\n\nconst sameStatus = (first: DocumentAnchorStatus | null, second: DocumentAnchorStatus): boolean =>\n  first !== null && Object.keys(first).length === Object.keys(second).length\n  && Object.entries(second).every(([commentId, attached]) => first[commentId] === attached);\n\n// Geometry changes with every layout, so positions are passed to CSS as custom properties.\nconst positionStyle = ({ top, left }: Position): CSSProperties =>\n  ({ '--documentAnnotationTop': `${ top }px`, '--documentAnnotationLeft': `${ left }px` } as CSSProperties);\n\n/*\n  AnnotationLayer pins comments to the text of its children. It highlights each comment's quoted\n  text, places a bubble at the end of it, offers a \"Comment\" action for new selections, and reports\n  which comments could still be found. It never changes the annotated DOM, so it can wrap content\n  owned by another library such as the rich-text editor.\n */\nexport const AnnotationLayer: FC<AnnotationLayerProps> = (\n  {\n    id,\n    children,\n    comments,\n    selectedCommentId,\n    canComment = false,\n    showResolved = false,\n    onRequestComment,\n    onSelectComment,\n    onAnchorStatusChange,\n    labels: customLabels,\n    getTextRoot,\n    externalSelection = null,\n    onExternalSelectionConsumed\n  }\n) => {\n  const labels = useMemo(() => ({ ...defaultDocumentAnnotationLabels, ...customLabels }), [customLabels]);\n  const instanceId = useId();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const reportedStatusRef = useRef<DocumentAnchorStatus | null>(null);\n  const frameRef = useRef<number | null>(null);\n  const [markers, setMarkers] = useState<CommentMarker[]>([]);\n  const [domSelection, setDomSelection] = useState<PendingSelection | null>(null);\n\n  const visibleComments = useMemo(() => getVisibleComments(comments, showResolved), [comments, showResolved]);\n\n  const findTextRoot = useCallback((): HTMLElement | null => {\n    const content = contentRef.current;\n    if (!content) {\n      return null;\n    }\n    return getTextRoot ? getTextRoot(content) : content;\n  }, [getTextRoot]);\n\n  // Converts viewport coordinates to coordinates within the layer, where the overlay is positioned.\n  const toLayerPosition = useCallback((viewportTop: number, viewportLeft: number): Position | null => {\n    const container = containerRef.current;\n    if (!container) {\n      return null;\n    }\n    const containerRect = container.getBoundingClientRect();\n    return { top: viewportTop - containerRect.top, left: viewportLeft - containerRect.left };\n  }, []);\n\n  const updateAnnotations = useCallback(() => {\n    const root = findTextRoot();\n    if (!root) {\n      setMarkers([]);\n      clearInstanceHighlights(instanceId);\n      return;\n    }\n    const index = buildTextIndex(root);\n    const status: DocumentAnchorStatus = {};\n    const commentRanges: Range[] = [];\n    const selectedRanges: Range[] = [];\n    const nextMarkers: CommentMarker[] = [];\n\n    const resolveAnchor = createTextQuoteResolver(index.text);\n    visibleComments.forEach((comment) => {\n      const match = comment.anchor ? resolveAnchor(comment.anchor) : null;\n      const range = match ? rangeFromOffsets(index, match.start, match.end) : null;\n      status[comment.id] = range !== null;\n      if (!range) {\n        return;\n      }\n      (comment.id === selectedCommentId ? selectedRanges : commentRanges).push(range);\n      // Hidden content (e.g. the rich-text view while source mode is shown) has no visible rects.\n      const lastRect = Array.from(range.getClientRects?.() ?? []).filter((rect) => rect.width || rect.height).pop();\n      const position = lastRect ? toLayerPosition(lastRect.top, lastRect.right) : null;\n      if (position) {\n        nextMarkers.push({ ...position, commentId: comment.id, authorName: comment.author.name });\n      }\n    });\n\n    setInstanceHighlights(instanceId, { comments: commentRanges, selected: selectedRanges });\n    setMarkers(nextMarkers);\n    if (!sameStatus(reportedStatusRef.current, status)) {\n      reportedStatusRef.current = status;\n      onAnchorStatusChange?.(status);\n    }\n  }, [findTextRoot, instanceId, visibleComments, selectedCommentId, toLayerPosition, onAnchorStatusChange]);\n\n  const scheduleUpdate = useCallback(() => {\n    if (frameRef.current !== null) {\n      return;\n    }\n    frameRef.current = window.requestAnimationFrame(() => {\n      frameRef.current = null;\n      updateAnnotations();\n    });\n  }, [updateAnnotations]);\n\n  useLayoutEffect(() => {\n    updateAnnotations();\n  }, [updateAnnotations]);\n\n  // Content can change without React knowing: lazy engines finish loading, the editor applies edits.\n  useEffect(() => {\n    const container = containerRef.current;\n    const content = contentRef.current;\n    if (!container || !content) {\n      return undefined;\n    }\n    const mutationObserver = new MutationObserver(scheduleUpdate);\n    mutationObserver.observe(content, { subtree: true, childList: true, characterData: true });\n    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleUpdate);\n    resizeObserver?.observe(container);\n    window.addEventListener('resize', scheduleUpdate);\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver?.disconnect();\n      window.removeEventListener('resize', scheduleUpdate);\n      if (frameRef.current !== null) {\n        window.cancelAnimationFrame(frameRef.current);\n        frameRef.current = null;\n      }\n    };\n  }, [scheduleUpdate]);\n\n  useEffect(() => () => clearInstanceHighlights(instanceId), [instanceId]);\n\n  useEffect(() => {\n    if (!canComment) {\n      setDomSelection(null);\n      return undefined;\n    }\n    const handleSelectionChange = () => {\n      const root = findTextRoot();\n      const selection = document.getSelection();\n      if (!root || !selection || selection.rangeCount === 0 || selection.isCollapsed) {\n        setDomSelection(null);\n        return;\n      }\n      const range = selection.getRangeAt(0);\n      if (!root.contains(range.commonAncestorContainer)) {\n        setDomSelection(null);\n        return;\n      }\n      const index = buildTextIndex(root);\n      const { start, end } = offsetsFromRange(index, range);\n      const anchor = createTextQuoteAnchor(index.text, start, end);\n      const lastRect = Array.from(range.getClientRects?.() ?? []).pop() ?? range.getBoundingClientRect?.();\n      const position = anchor && lastRect ? toLayerPosition(lastRect.bottom, lastRect.right) : null;\n      setDomSelection(anchor && position ? { ...position, anchor } : null);\n    };\n    document.addEventListener('selectionchange', handleSelectionChange);\n    return () => document.removeEventListener('selectionchange', handleSelectionChange);\n  }, [canComment, findTextRoot, toLayerPosition]);\n\n  // Read through a ref so only a change of selected comment scrolls; comment edits must not move the reader.\n  const latestRef = useRef({ visibleComments, findTextRoot });\n  latestRef.current = { visibleComments, findTextRoot };\n\n  // Scroll a newly selected comment into view, e.g. after it is chosen in the comments panel.\n  useEffect(() => {\n    const comment = latestRef.current.visibleComments.find((candidate) => candidate.id === selectedCommentId);\n    const root = latestRef.current.findTextRoot();\n    if (!comment?.anchor || !root) {\n      return;\n    }\n    const index = buildTextIndex(root);\n    const match = resolveTextQuoteAnchor(index.text, comment.anchor);\n    const range = match ? rangeFromOffsets(index, match.start, match.end) : null;\n    range?.startContainer.parentElement?.scrollIntoView?.({ block: 'center', behavior: getPreferredScrollBehavior() });\n  }, [selectedCommentId]);\n\n  const externalPosition = externalSelection ? toLayerPosition(externalSelection.rect.bottom, externalSelection.rect.right) : null;\n  const pending: PendingSelection | null = externalSelection && externalPosition\n    ? { ...externalPosition, anchor: externalSelection.anchor }\n    : domSelection;\n\n  const handleRequestComment = () => {\n    if (!pending) {\n      return;\n    }\n    onRequestComment?.(pending.anchor);\n    if (externalSelection) {\n      onExternalSelectionConsumed?.();\n    } else {\n      document.getSelection()?.removeAllRanges();\n    }\n    setDomSelection(null);\n  };\n\n  return (\n    <div id={ id } className=\"documentAnnotations\" ref={ containerRef }>\n      <div className=\"documentAnnotations__content\" ref={ contentRef }>\n        { children }\n      </div>\n      <div className=\"documentAnnotations__overlay\">\n        { markers.map((marker) => (\n          <div key={ marker.commentId } className=\"documentAnnotations__bubble\" style={ positionStyle(marker) }>\n            <SimpleButton\n              id={ `${ id }_bubble_${ marker.commentId }` }\n              label={ labels.openComment(marker.authorName) }\n              hideLabel\n              leftIcon=\"bubbles4\"\n              ariaPressed={ marker.commentId === selectedCommentId }\n              cssClass={ `button icon-only compact documentAnnotations__bubbleButton ${\n                marker.commentId === selectedCommentId ? 'documentAnnotations__bubbleButton--selected' : '' }` }\n              onClickHandler={ () => onSelectComment?.(marker.commentId) }\n            />\n          </div>\n        )) }\n        { canComment && pending && (\n          // Pressing the button must not clear the text selection it acts on.\n          <div\n            className=\"documentAnnotations__trigger\"\n            style={ positionStyle(pending) }\n            onMouseDown={ (event) => event.preventDefault() }\n          >\n            <SimpleButton\n              id={ `${ id }_addComment` }\n              label={ labels.addComment }\n              leftIcon=\"bubble\"\n              cssClass=\"button primary compact documentAnnotations__triggerButton\"\n              onClickHandler={ handleRequestComment }\n            />\n          </div>\n        ) }\n      </div>\n    </div>\n  );\n};\n\nexport default AnnotationLayer;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/widgets/shared/documents/annotations/annotationLayer.css

@@ -0,0 +1,65 @@
+.documentAnnotations {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.documentAnnotations__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.documentAnnotations__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.documentAnnotations__bubble,
+.documentAnnotations__trigger {
+  position: absolute;
+  top: var(--documentAnnotationTop);
+  left: var(--documentAnnotationLeft);
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.documentAnnotations__bubble {
+  transform: translate(var(--documentAnnotationBubbleOffset, 5px), -50%);
+}
+
+.documentAnnotations__bubbleButton {
+  background: var(--documentAnnotationBubbleBg, var(--documentBg, #fff));
+}
+
+.documentAnnotations__bubbleButton--selected {
+  background: var(--documentAnnotationBubbleSelectedBg, var(--primaryButtonBg, currentColor));
+}
+
+.documentAnnotations__trigger {
+  transform: translate(-100%, var(--documentAnnotationTriggerOffset, 5px));
+}
+
+::highlight(documentComment) {
+  background-color: var(--documentCommentHighlightBg, color-mix(in srgb, var(--statusWarnColor, #fc0) 30%, transparent));
+  color: var(--documentCommentHighlightFgColor, inherit);
+}
+
+::highlight(documentCommentSelected) {
+  background-color: var(--documentCommentSelectedHighlightBg, color-mix(in srgb, var(--statusWarnColor, #fc0) 60%, transparent));
+  color: var(--documentCommentSelectedHighlightFgColor, inherit);
+}
+
+.documentAnnotations__sourceHighlight {
+  background-color: var(--documentCommentHighlightBg, color-mix(in srgb, var(--statusWarnColor, #fc0) 30%, transparent));
+  border-bottom: var(--documentAnnotationSourceHighlightBorder, 2px solid var(--statusWarnColor, #fc0));
+  cursor: pointer;
+}
+
+.documentAnnotations__sourceHighlight--selected {
+  background-color: var(--documentCommentSelectedHighlightBg, color-mix(in srgb, var(--statusWarnColor, #fc0) 60%, transparent));
+}

package/dist/esm/widgets/shared/documents/annotations/annotations.interfaces.js

@@ -0,0 +1,14 @@
+/*
+  A comment is pinned to text by quoting it rather than by character positions, so it can be found
+  again after the document is edited, re-rendered or opened in a different view (rendered, rich-text
+  or markdown source). See textQuoteAnchor.ts.
+ */
+
+// Whether each pinned comment's quoted text was found in the document, keyed by comment id.
+
+export const defaultDocumentAnnotationLabels = {
+  addComment: 'Comment',
+  openComment: authorName => `Open comment by ${authorName}`
+};
+export const getVisibleComments = (comments, showResolved = false) => comments.filter(comment => comment.anchor && (showResolved || !comment.resolved));
+//# sourceMappingURL=annotations.interfaces.js.map

package/dist/esm/widgets/shared/documents/annotations/annotations.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotations.interfaces.js","names":["defaultDocumentAnnotationLabels","addComment","openComment","authorName","getVisibleComments","comments","showResolved","filter","comment","anchor","resolved"],"sources":["../../../../../../src/widgets/shared/documents/annotations/annotations.interfaces.ts"],"sourcesContent":["/*\n  A comment is pinned to text by quoting it rather than by character positions, so it can be found\n  again after the document is edited, re-rendered or opened in a different view (rendered, rich-text\n  or markdown source). See textQuoteAnchor.ts.\n */\nexport type TextQuoteAnchor = {\n  exact: string;\n  // Text immediately before and after the quote, used to tell repeated phrases apart.\n  prefix: string;\n  suffix: string;\n  // Where the quote started when it was created; a tiebreak only, since views count text differently.\n  start?: number;\n};\n\nexport type DocumentCommentAuthor = {\n  id: string;\n  name: string;\n};\n\nexport type DocumentCommentReply = {\n  id: string;\n  author: DocumentCommentAuthor;\n  content: string;\n  createdAt: string;\n};\n\nexport type DocumentComment = {\n  id: string;\n  author: DocumentCommentAuthor;\n  content: string;\n  createdAt: string;\n  resolved?: boolean;\n  // Absent for general comments about the whole document.\n  anchor?: TextQuoteAnchor;\n  replies?: DocumentCommentReply[];\n};\n\n// Whether each pinned comment's quoted text was found in the document, keyed by comment id.\nexport type DocumentAnchorStatus = Record<string, boolean>;\n\nexport type DocumentAnnotationLabels = {\n  addComment: string;\n  /* eslint-disable-next-line no-unused-vars */\n  openComment: (authorName: string) => string;\n};\n\nexport type DocumentAnnotationsProps = {\n  comments: DocumentComment[];\n  selectedCommentId?: string;\n  // Offer the \"Comment\" action when text is selected.\n  canComment?: boolean;\n  // Highlight resolved comments as well as open ones.\n  showResolved?: boolean;\n  /* eslint-disable-next-line no-unused-vars */\n  onRequestComment?: (anchor: TextQuoteAnchor) => void;\n  /* eslint-disable-next-line no-unused-vars */\n  onSelectComment?: (commentId: string) => void;\n  /* eslint-disable-next-line no-unused-vars */\n  onAnchorStatusChange?: (status: DocumentAnchorStatus) => void;\n  labels?: Partial<DocumentAnnotationLabels>;\n};\n\nexport const defaultDocumentAnnotationLabels: DocumentAnnotationLabels = {\n  addComment: 'Comment',\n  openComment: (authorName) => `Open comment by ${ authorName }`\n};\n\nexport const getVisibleComments = (comments: DocumentComment[], showResolved = false): DocumentComment[] =>\n  comments.filter((comment) => comment.anchor && (showResolved || !comment.resolved));\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAiCA;;AAyBA,OAAO,MAAMA,+BAAyD,GAAG;EACvEC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAGC,UAAU,IAAK,mBAAoBA,UAAU;AAC7D,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGA,CAACC,QAA2B,EAAEC,YAAY,GAAG,KAAK,KAClFD,QAAQ,CAACE,MAAM,CAAEC,OAAO,IAAKA,OAAO,CAACC,MAAM,KAAKH,YAAY,IAAI,CAACE,OAAO,CAACE,QAAQ,CAAC,CAAC","ignoreList":[]}

package/dist/esm/widgets/shared/documents/annotations/highlightRegistry.js

@@ -0,0 +1,58 @@
+/*
+  Comment highlights use the CSS Custom Highlight API, which styles text ranges without changing the
+  DOM. That matters inside the rich-text editor, which owns its DOM and would discard or fight any
+  wrapper elements added around highlighted text.
+
+  The browser keeps one registry entry per highlight name, so the ranges from every annotated view
+  on the page are merged here into shared entries. Browsers without the API simply show no
+  highlight; comment bubbles still mark each comment.
+ */
+
+export const HIGHLIGHT_NAMES = {
+  comment: 'documentComment',
+  selected: 'documentCommentSelected'
+};
+const instances = new Map();
+
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+const getHighlightApi = () => {
+  const cssNamespace = globalThis.CSS;
+  const Highlight = globalThis.Highlight;
+  return cssNamespace?.highlights && Highlight ? {
+    registry: cssNamespace.highlights,
+    Highlight
+  } : null;
+};
+export const supportsTextHighlights = () => getHighlightApi() !== null;
+const syncRegistry = () => {
+  const api = getHighlightApi();
+  if (!api) {
+    return;
+  }
+  const all = [...instances.values()];
+  const comments = all.flatMap(instance => instance.comments);
+  const selected = all.flatMap(instance => instance.selected);
+  if (comments.length) {
+    api.registry.set(HIGHLIGHT_NAMES.comment, new api.Highlight(...comments));
+  } else {
+    api.registry.delete(HIGHLIGHT_NAMES.comment);
+  }
+  if (selected.length) {
+    api.registry.set(HIGHLIGHT_NAMES.selected, new api.Highlight(...selected));
+  } else {
+    api.registry.delete(HIGHLIGHT_NAMES.selected);
+  }
+};
+export const setInstanceHighlights = (instanceId, highlights) => {
+  instances.set(instanceId, highlights);
+  syncRegistry();
+};
+export const clearInstanceHighlights = instanceId => {
+  if (instances.delete(instanceId)) {
+    syncRegistry();
+  }
+};
+//# sourceMappingURL=highlightRegistry.js.map