Comments in DOCX, XLSX, and PPTX

// Source records for an application-owned list, search, or export.
const docxComments = docxDocument.comments;
const pptxComments = presentation.getComments(slideIndex);
const xlsxComments = await workbook.getComments(sheetIndex);

import { DocxDocument } from '@silurus/ooxml/docx';

const doc = await DocxDocument.load(source);
await doc.renderPage(canvas, pageIndex, {
  width: 760,
});
const threads = await doc.getCommentThreads(pageIndex, {
  width: 760,
  includeResolved: false,
});

showReviewMargin({ canvas, threads });
// Destroy doc when the owning UI unmounts.

import { XlsxViewer } from '@silurus/ooxml/xlsx';

let viewer: XlsxViewer;
const refreshComments = () => {
  const placements = viewer.getComments().flatMap((comment) => {
    const rect = viewer.getCellViewportRect(comment.cellRef);
    return rect ? [{ comment, rect }] : [];
  });
  renderCellCommentCards(placements);
};

viewer = new XlsxViewer(container, {
  onSheetChange: refreshComments,
  onViewportChange: refreshComments,
  onScaleChange: refreshComments,
});
await viewer.load(source);
refreshComments();

// Mount cards relative to the worksheet viewport.
const destroy = () => viewer.destroy(); // Call from the owning UI's cleanup.

import { PptxPresentation } from '@silurus/ooxml/pptx';

const slideIndex = 0;
const presentation = await PptxPresentation.load(source);
await presentation.renderSlide(canvas, slideIndex, { width: 960 });

const comments = presentation.getComments(slideIndex);
const elementIds = comments.flatMap((comment) =>
  (comment.anchors ?? []).flatMap((anchor) =>
    'elementId' in anchor && anchor.elementId ? [anchor.elementId] : []
  )
);
const bounds = await presentation.getElementBoundsByIds(slideIndex, elementIds);
const byId = new Map(bounds.map((item) => [item.elementId, item.bounds]));
const scaleX = canvas.clientWidth / presentation.slideWidth;
const scaleY = canvas.clientHeight / presentation.slideHeight;

const placements = comments.map((comment) => {
  const target = (comment.anchors ?? []).find(
    (anchor) => 'elementId' in anchor && anchor.elementId && byId.has(anchor.elementId)
  );
  if (target && 'elementId' in target && target.elementId) {
    const rect = byId.get(target.elementId);
    if (rect) {
      return { comment, rect: {
        x: rect.x * scaleX, y: rect.y * scaleY,
        width: rect.width * scaleX, height: rect.height * scaleY,
      }};
    }
  }
  const anchors = comment.anchors ?? [];
  const isSlidePoint = anchors.length === 0 || anchors.some((anchor) => anchor.type === 'slide');
  return isSlidePoint && Number.isFinite(comment.x) && Number.isFinite(comment.y)
    ? { comment, point: {
        x: (comment.x as number) * scaleX,
        y: (comment.y as number) * scaleY,
      }}
    : { comment, unresolved: true };
});

renderSlideCommentCards(placements);
const destroy = () => presentation.destroy(); // Call from the owning UI's cleanup.