@parhelia/core 0.1.12881 → 0.1.12882

package/dist/editor/page-editor-chrome/CommentHighlightings.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
-import { useEditContext, useFieldsEditContext, } from "../client/editContext";
-import { normalizeMarkerId } from "../utils";
+import { forwardRef, useMemo, } from "react";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { findElementByNormalizedDataAttribute, findFieldElement, getNextNonChromeMarkerElement, } from "../utils";
 import { CommentDisplayPopover } from "../reviews/CommentDisplayPopover";
-import { measureBridgeComponentRect, measureBridgeFieldRect, measureBridgeTextRangeRects, rectListEquals, toOverlayRect, } from "./overlay/geometry";
+import { measureElementRect, rectListEquals, toOverlayRect, } from "./overlay/geometry";
+import { getAccessibleIframeDocument } from "./overlay/iframeAccess";
 import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
-import { getComponentById } from "../componentTreeHelper";
 import { dedupeFeedbackHighlightItems, FeedbackHighlightBadge, FeedbackHighlightBadgeTray, } from "./FeedbackHighlightBadge";
-import { COMMENT_DRAFT_SELECTION_EVENT, COMMENT_TRANSIENT_ELEMENT_KEY, COMMENT_TRANSIENT_SELECTION_RECT, } from "../reviews/commentTransientSelection";
-const COMMENT_DRAFT_TEXT_RANGE_KEY = "comment-draft-selection";
-const COMMENT_BRIDGE_SOURCE = "comments";
 function commentMeasurementsEqual(previous, next) {
     const previousKeys = Object.keys(previous);
     const nextKeys = Object.keys(next);
@@ -27,189 +24,56 @@ function commentMeasurementsEqual(previous, next) {
     }
     return true;
 }
-export function CommentHighlightings({ pageViewContext, variant = "default", }) {
+export function CommentHighlightings({ iframe, }) {
     const editContext = useEditContext();
-    const modifiedFields = useFieldsEditContext();
-    const lastMeasurementsRef = useRef({});
-    const bridgeTextRangeRequestRef = useRef({
-        signature: "",
-        requestedSignature: "",
-        hasSeenAnyTarget: false,
-    });
-    const [commentDraftRange, setCommentDraftRange] = useState();
-    useEffect(() => {
-        const handleDraftSelection = (event) => {
-            const detail = event
-                .detail;
-            setCommentDraftRange(detail?.range);
-        };
-        window.addEventListener(COMMENT_DRAFT_SELECTION_EVENT, handleDraftSelection);
-        return () => {
-            window.removeEventListener(COMMENT_DRAFT_SELECTION_EVENT, handleDraftSelection);
-        };
-    }, []);
     const visibleComments = useMemo(() => (editContext?.comments || []).filter((comment) => !comment.suggestedEditId &&
         (editContext?.showResolvedComments ? true : !comment.isResolved)), [editContext?.comments, editContext?.showResolvedComments]);
-    const bridgeTextRanges = useMemo(() => {
-        const commentRanges = visibleComments.flatMap((comment) => {
-            const range = getCommentTextRange(comment);
-            if (!comment.fieldId || !range)
-                return [];
-            return getCommentFieldDescriptors(comment).map((descriptor) => ({
-                key: getCommentTextRangeKey(comment),
-                elementKey: getCommentTransientElementKey(comment),
-                fieldId: descriptor.fieldId,
-                item: descriptor.item,
-                start: range[0],
-                end: range[1],
-            }));
-        });
-        const draftRange = getDraftBridgeTextRange(commentDraftRange);
-        return draftRange ? [...commentRanges, draftRange] : commentRanges;
-    }, [visibleComments, commentDraftRange]);
-    const bridgeTextRangeSignature = useMemo(() => bridgeTextRanges
-        .map((range) => [
-        range.key,
-        range.elementKey,
-        range.fieldId,
-        range.item.id,
-        range.item.language,
-        range.item.version,
-        range.start,
-        range.end,
-    ].join(":"))
-        .join("|"), [bridgeTextRanges]);
-    useEffect(() => {
-        const requestState = bridgeTextRangeRequestRef.current;
-        if (!pageViewContext.bridgeReady || bridgeTextRanges.length === 0) {
-            if (pageViewContext.bridgeReady && requestState.signature !== "") {
-                // Drop our contribution from the shared union so the highlights clear
-                // instead of lingering as phantom geometry targets.
-                pageViewContext.requestBridgeGeometry?.({
-                    source: COMMENT_BRIDGE_SOURCE,
-                    textRanges: [],
-                });
-            }
-            requestState.signature = "";
-            requestState.requestedSignature = "";
-            requestState.hasSeenAnyTarget = false;
-            return;
-        }
-        const signatureChanged = requestState.signature !== bridgeTextRangeSignature;
-        if (signatureChanged) {
-            requestState.signature = bridgeTextRangeSignature;
-            requestState.requestedSignature = "";
-            requestState.hasSeenAnyTarget = false;
-        }
-        const bridgeGeometry = pageViewContext.bridgeGeometry;
-        const hasAnyTarget = hasAnyExpectedBridgeTextRange(bridgeGeometry, bridgeTextRanges);
-        const hasAllTargets = hasAllExpectedBridgeTextRanges(bridgeGeometry, bridgeTextRanges);
-        if (hasAnyTarget) {
-            requestState.hasSeenAnyTarget = true;
-        }
-        if (hasAllTargets && !signatureChanged) {
-            requestState.requestedSignature = "";
-            return;
-        }
-        const shouldRequest = signatureChanged ||
-            requestState.requestedSignature !== bridgeTextRangeSignature ||
-            (requestState.hasSeenAnyTarget && !hasAnyTarget);
-        if (!shouldRequest)
-            return;
-        requestState.requestedSignature = bridgeTextRangeSignature;
-        pageViewContext.requestBridgeGeometry?.({
-            source: COMMENT_BRIDGE_SOURCE,
-            textRanges: bridgeTextRanges,
-        });
-    }, [
-        pageViewContext,
-        pageViewContext.bridgeReady,
-        pageViewContext.bridgeGeometry,
-        bridgeTextRanges,
-        bridgeTextRangeSignature,
-        commentDraftRange,
-    ]);
-    const measurements = useOverlayMeasurement((metrics, reasons) => {
-        if (!editContext)
+    const measurements = useOverlayMeasurement((metrics) => {
+        const iframeDocument = getAccessibleIframeDocument(iframe);
+        if (!editContext || !iframeDocument?.body)
             return {};
-        const bridgeGeometry = pageViewContext.bridgeGeometry;
-        const canReusePreviousMeasurement = !reasons.has("viewport") &&
-            !reasons.has("layout") &&
-            !reasons.has("text");
         const nextMeasurements = {};
         for (const comment of visibleComments) {
-            const textRange = getCommentTextRange(comment);
-            const fieldDescriptors = getCommentFieldDescriptors(comment);
-            const hasTextRange = !!comment.fieldId && !!textRange;
-            const textRangeRects = hasTextRange
-                ? dedupeOverlayRects(measureBridgeTextRangeRects(bridgeGeometry, getCommentTextRangeKey(comment), metrics))
-                : [];
-            const previousMeasurement = lastMeasurementsRef.current[comment.id];
-            const previousTextRangeRects = canReusePreviousMeasurement && previousMeasurement?.isTextRange
-                ? previousMeasurement.rects
-                : [];
+            const fieldElement = comment.fieldId
+                ? findFieldElement(iframe, {
+                    item: {
+                        id: comment.itemId,
+                        language: comment.language,
+                        version: comment.version,
+                    },
+                    fieldId: comment.fieldId,
+                })
+                : undefined;
+            const range = fieldElement
+                ? resolveCommentRange(comment, fieldElement, iframeDocument)
+                : null;
             let rects = [];
             let isTextRange = false;
-            if (hasTextRange) {
-                rects = textRangeRects.length
-                    ? textRangeRects
-                    : previousTextRangeRects.length
-                        ? previousTextRangeRects
-                        : getTransientSelectionRects(comment, metrics, pageViewContext.editorIframe);
+            if (fieldElement && range) {
+                rects = measureVisibleTextRangeRects(iframeDocument, fieldElement, range[0], range[1], metrics);
                 isTextRange = rects.length > 0;
             }
-            else {
-                const fallbackRect = fieldDescriptors
-                    .map((descriptor) => measureBridgeFieldRect(bridgeGeometry, pageViewContext.bridgeStructure, descriptor, metrics))
-                    .find((rect) => !!rect) ??
-                    measureBridgeCommentComponentRect(comment, pageViewContext, bridgeGeometry, metrics);
-                rects = fallbackRect
-                    ? [fallbackRect]
-                    : canReusePreviousMeasurement && previousMeasurement?.rects.length
-                        ? previousMeasurement.rects
-                        : [];
-                isTextRange =
-                    !fallbackRect &&
-                        canReusePreviousMeasurement &&
-                        previousMeasurement?.isTextRange === true;
+            if (rects.length === 0) {
+                let fallbackElement = fieldElement;
+                if (!fallbackElement && comment.itemId && editContext.page) {
+                    const componentStart = findElementByNormalizedDataAttribute(iframeDocument.body, "data-component-start", comment.itemId);
+                    fallbackElement =
+                        getNextNonChromeMarkerElement(componentStart) ?? undefined;
+                }
+                const fallbackRect = measureElementRect(fallbackElement, metrics);
+                if (fallbackRect)
+                    rects = [fallbackRect];
             }
             if (rects.length > 0) {
-                nextMeasurements[comment.id] = {
-                    rects,
-                    isTextRange,
-                };
+                nextMeasurements[comment.id] = { rects, isTextRange };
             }
         }
         return nextMeasurements;
-    }, [
-        editContext,
-        pageViewContext.bridgeGeometry,
-        pageViewContext.bridgeStructure,
-        visibleComments,
-    ], {
+    }, [iframe, editContext, visibleComments], {
         initialValue: {},
         equals: commentMeasurementsEqual,
         interests: ["viewport", "layout", "text", "adornment-data"],
     });
-    const draftRects = useOverlayMeasurement((metrics) => {
-        if (!commentDraftRange)
-            return [];
-        const bridgeRects = dedupeOverlayRects(measureBridgeTextRangeRects(pageViewContext.bridgeGeometry, COMMENT_DRAFT_TEXT_RANGE_KEY, metrics));
-        const fallbackRects = getSelectionRangeClientRects(commentDraftRange, metrics, pageViewContext.editorIframe);
-        const rects = bridgeRects.length ? bridgeRects : fallbackRects;
-        return rects;
-    }, [
-        commentDraftRange,
-        pageViewContext.bridgeGeometry,
-        pageViewContext.editorIframe,
-    ], {
-        initialValue: [],
-        equals: rectListEquals,
-        interests: ["viewport", "layout", "text", "adornment-data"],
-    });
-    useEffect(() => {
-        lastMeasurementsRef.current = measurements;
-    }, [measurements]);
     const overlayGroups = useMemo(() => {
         const groups = new Map();
         for (const comment of visibleComments) {
@@ -233,22 +97,11 @@ export function CommentHighlightings({ pageViewContext, variant = "default", })
                 isSelected: comment.id === editContext?.selectedComment?.id,
             });
         }
-        const nextGroups = Array.from(groups.values());
-        return nextGroups;
+        return Array.from(groups.values());
     }, [visibleComments, measurements, editContext?.selectedComment?.id]);
     if (!editContext)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: commentHighlightingStyles }), draftRects.map((rect, index) => (_jsx("div", { style: {
-                    position: "absolute",
-                    top: rect.y,
-                    left: rect.x,
-                    width: rect.width,
-                    height: rect.height,
-                    pointerEvents: "none",
-                }, children: _jsx("div", { "data-testid": "comment-draft-highlight", className: "absolute right-0 bottom-[0.08em] left-0 h-[0.82em] min-h-[10px]", style: {
-                        ...getDraftCommentRangeStyle(),
-                        zIndex: 0,
-                    } }) }, `comment-draft-${index}`))), overlayGroups.flatMap((group) => {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: commentHighlightingStyles }), overlayGroups.flatMap((group) => {
                 const badgeComments = dedupeFeedbackHighlightItems(group.comments, (comment) => comment.id === editContext.selectedComment?.id);
                 return group.rects.map((rect, index) => (_jsxs("div", { style: {
                         position: "absolute",
@@ -257,38 +110,26 @@ export function CommentHighlightings({ pageViewContext, variant = "default", })
                         width: rect.width,
                         height: rect.height,
                         pointerEvents: "none",
-                    }, children: [group.isTextRange ? (_jsx("div", { "data-testid": "comment-highlight", className: "absolute right-0 bottom-[0.08em] left-0 h-[0.82em] min-h-[10px]", style: {
+                    }, children: [group.isTextRange ? (_jsx("div", { className: "absolute right-0 bottom-[0.08em] left-0 h-[0.82em] min-h-[10px]", style: {
                                 ...getCommentRangeStyle(group.comments, group.isSelected),
                                 zIndex: 0,
-                            } })) : (_jsx("div", { "data-testid": "comment-highlight", className: "absolute inset-0 rounded-[3px]", style: {
+                            } })) : (_jsx("div", { className: "absolute inset-0 rounded-[3px]", style: {
                                 ...getCommentFallbackStyle(group.comments, group.isSelected),
                                 zIndex: 0,
-                            } })), index === 0 && (_jsx(FeedbackHighlightBadgeTray, { variant: variant, style: {
-                                top: variant === "minimap"
-                                    ? group.isTextRange
-                                        ? -11
-                                        : -8
-                                    : group.isTextRange
-                                        ? -24
-                                        : -16,
-                                left: variant === "minimap"
-                                    ? group.isTextRange
-                                        ? -4
-                                        : 4
-                                    : group.isTextRange
-                                        ? -9
-                                        : 8,
+                            } })), index === 0 && (_jsx(FeedbackHighlightBadgeTray, { style: {
+                                top: group.isTextRange ? -24 : -16,
+                                left: group.isTextRange ? -9 : 8,
                             }, children: badgeComments.map((comment, badgeIndex) => {
                                 const isSelected = comment.id === editContext.selectedComment?.id;
                                 return (_jsx(CommentDisplayPopover, { comment: comment, onCommentUpdated: () => {
                                         editContext?.loadComments?.();
-                                    }, children: _jsx(CommentHighlightBadge, { comment: comment, isSelected: isSelected, variant: variant, minimapColorClassName: "bg-highlight-100", zIndex: isSelected
+                                    }, children: _jsx(CommentHighlightBadge, { comment: comment, isSelected: isSelected, zIndex: isSelected
                                             ? badgeComments.length + 101
                                             : badgeComments.length - badgeIndex + 100 }) }, comment.id));
                             }) }))] }, `${group.key}-${index}`)));
             })] }));
 }
-const CommentHighlightBadge = forwardRef(function CommentHighlightBadge({ comment, isSelected, variant, minimapColorClassName, zIndex, className, style, onClick, ...buttonProps }, ref) {
+const CommentHighlightBadge = forwardRef(function CommentHighlightBadge({ comment, isSelected, zIndex, className, style, onClick, ...buttonProps }, ref) {
     const editContext = useEditContext();
     const modifiedFields = useFieldsEditContext();
     const handleClick = (event) => {
@@ -309,7 +150,7 @@ const CommentHighlightBadge = forwardRef(function CommentHighlightBadge({ commen
             }, false);
         }
     };
-    return (_jsx(FeedbackHighlightBadge, { ref: ref, item: comment, isSelected: isSelected, variant: variant, minimapColorClassName: minimapColorClassName, zIndex: zIndex, testId: "comment-highlight-icon", ariaSubject: "comment", className: className, style: style, onClick: handleClick, ...buttonProps }));
+    return (_jsx(FeedbackHighlightBadge, { ref: ref, item: comment, isSelected: isSelected, zIndex: zIndex, testId: "comment-highlight-icon", ariaSubject: "comment", className: className, style: style, onClick: handleClick, ...buttonProps }));
 });
 function getCommentMeasurementKey(measurement) {
     const rectKey = measurement.rects
@@ -320,140 +161,77 @@ function getCommentMeasurementKey(measurement) {
 function roundMeasurement(value) {
     return Math.round(value * 2) / 2;
 }
-function getCommentTextRangeKey(comment) {
-    return `comment:${comment.id}`;
-}
-function getDraftBridgeTextRange(range) {
-    const textRange = getSelectionTextRange(range);
-    if (!range?.fieldId || !range.itemId || !textRange)
-        return undefined;
-    return {
-        key: COMMENT_DRAFT_TEXT_RANGE_KEY,
-        elementKey: range.elementKey,
-        fieldId: range.fieldId,
-        item: {
-            id: range.itemId,
-            language: range.language || "",
-            version: typeof range.version === "number" ? range.version : undefined,
-        },
-        start: textRange[0],
-        end: textRange[1],
-    };
-}
-function getSelectionTextRange(range) {
-    if (!range?.text?.trim() ||
-        typeof range.startOffset !== "number" ||
-        typeof range.endOffset !== "number") {
-        return null;
-    }
-    const start = Math.max(0, Math.min(range.startOffset, range.endOffset));
-    const end = Math.max(start, range.startOffset, range.endOffset);
-    return end > start ? [start, end] : null;
-}
-function getCommentTransientElementKey(comment) {
-    return comment[COMMENT_TRANSIENT_ELEMENT_KEY];
-}
-function hasAnyExpectedBridgeTextRange(geometry, textRanges) {
-    if (!geometry)
-        return false;
-    const expectedKeys = new Set(textRanges.map((range) => range.key));
-    return geometry.targets.some((target) => target.kind === "textRange" && expectedKeys.has(target.key));
-}
-function hasAllExpectedBridgeTextRanges(geometry, textRanges) {
-    if (!geometry)
-        return false;
-    const availableKeys = new Set(geometry.targets
-        .filter((target) => target.kind === "textRange")
-        .map((target) => target.key));
-    return textRanges.every((range) => availableKeys.has(range.key));
-}
-function getCommentTextRange(comment) {
-    if (typeof comment.rangeStart !== "number" ||
-        typeof comment.rangeEnd !== "number") {
-        return null;
-    }
-    const start = Math.max(0, Math.min(comment.rangeStart, comment.rangeEnd));
-    const end = Math.max(start, comment.rangeStart, comment.rangeEnd);
-    return end > start ? [start, end] : null;
-}
-function getCommentFieldDescriptors(comment) {
-    if (!comment.fieldId)
+function measureVisibleTextRangeRects(iframeDocument, root, start, end, metrics) {
+    const text = root.textContent || "";
+    const boundedStart = Math.max(0, Math.min(start, text.length));
+    const boundedEnd = Math.max(boundedStart, Math.min(end, text.length));
+    if (boundedStart >= boundedEnd)
         return [];
-    const items = getCommentCandidateItems(comment);
-    return items.map((item) => ({
-        fieldId: comment.fieldId,
-        item,
-    }));
-}
-function getCommentCandidateItems(comment) {
-    const candidates = [];
-    const addCandidate = (id) => {
-        if (!id)
-            return;
-        const normalizedId = normalizeMarkerId(id);
-        if (candidates.some((candidate) => normalizeMarkerId(candidate.id) === normalizedId)) {
-            return;
+    const rects = [];
+    const walker = iframeDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let absoluteOffset = 0;
+    let textNode;
+    while ((textNode = walker.nextNode())) {
+        const nodeText = textNode.textContent || "";
+        const nodeStart = absoluteOffset;
+        const nodeEnd = nodeStart + nodeText.length;
+        if (nodeEnd > boundedStart && nodeStart < boundedEnd) {
+            const localStart = Math.max(0, boundedStart - nodeStart);
+            const localEnd = Math.min(nodeText.length, boundedEnd - nodeStart);
+            rects.push(...measureVisibleTextNodeRects(iframeDocument, textNode, nodeText, localStart, localEnd, metrics));
         }
-        candidates.push({
-            id,
-            language: comment.language,
-            version: comment.version,
-        });
-    };
-    addCandidate(comment.itemId);
-    addCandidate(comment.mainItemId);
-    comment.relatedItems?.forEach((item) => addCandidate(item.itemId));
-    return candidates;
-}
-function measureBridgeCommentComponentRect(comment, pageViewContext, bridgeGeometry, metrics) {
-    const page = pageViewContext?.page;
-    if (!page)
-        return null;
-    for (const item of getCommentCandidateItems(comment)) {
-        const component = getComponentById(item.id, page);
-        if (!component)
-            continue;
-        const measurement = measureBridgeComponentRect(bridgeGeometry, component, metrics);
-        if (measurement?.rect)
-            return measurement.rect;
+        absoluteOffset = nodeEnd;
+        if (absoluteOffset >= boundedEnd)
+            break;
     }
-    return null;
+    return rects;
 }
-function getTransientSelectionRects(comment, metrics, iframe) {
-    const rect = comment[COMMENT_TRANSIENT_SELECTION_RECT];
-    return rect ? viewportSelectionRectToOverlayRects(rect, metrics, iframe) : [];
-}
-function getSelectionRangeClientRects(range, metrics, iframe) {
-    const rect = range.clientRect;
-    return rect ? viewportSelectionRectToOverlayRects(rect, metrics, iframe) : [];
+function measureVisibleTextNodeRects(iframeDocument, textNode, nodeText, start, end, metrics) {
+    const rects = [];
+    let cursor = start;
+    while (cursor < end) {
+        let lineEnd = cursor;
+        while (lineEnd < end && !isLineBreak(nodeText[lineEnd])) {
+            lineEnd++;
+        }
+        let visibleStart = cursor;
+        while (visibleStart < lineEnd &&
+            isHorizontalWhitespace(nodeText[visibleStart])) {
+            visibleStart++;
+        }
+        let visibleEnd = lineEnd;
+        while (visibleEnd > visibleStart &&
+            isHorizontalWhitespace(nodeText[visibleEnd - 1])) {
+            visibleEnd--;
+        }
+        if (visibleStart < visibleEnd) {
+            try {
+                const textRange = iframeDocument.createRange();
+                textRange.setStart(textNode, visibleStart);
+                textRange.setEnd(textNode, visibleEnd);
+                rects.push(...Array.from(textRange.getClientRects())
+                    .filter((rect) => rect.width > 1 && rect.height > 1)
+                    .map((rect) => toOverlayRect(rect, metrics)));
+            }
+            catch {
+                // Ignore detached or otherwise invalid text nodes while the iframe mutates.
+            }
+        }
+        cursor = lineEnd;
+        if (nodeText[cursor] === "\r" && nodeText[cursor + 1] === "\n") {
+            cursor += 2;
+        }
+        else {
+            cursor++;
+        }
+    }
+    return rects;
 }
-function viewportSelectionRectToOverlayRects(rect, metrics, iframe) {
-    if (!rect || rect.width <= 0 || rect.height <= 0)
-        return [];
-    const iframeRect = iframe?.getBoundingClientRect();
-    return [
-        toOverlayRect({
-            left: iframeRect ? rect.left - iframeRect.left : rect.left,
-            top: iframeRect ? rect.top - iframeRect.top : rect.top,
-            width: rect.width,
-            height: rect.height,
-        }, metrics),
-    ];
+function isLineBreak(value) {
+    return value === "\n" || value === "\r";
 }
-function dedupeOverlayRects(rects) {
-    const seen = new Set();
-    return rects.filter((rect) => {
-        const key = [
-            Math.round(rect.x * 100),
-            Math.round(rect.y * 100),
-            Math.round(rect.width * 100),
-            Math.round(rect.height * 100),
-        ].join(":");
-        if (seen.has(key))
-            return false;
-        seen.add(key);
-        return true;
-    });
+function isHorizontalWhitespace(value) {
+    return value === " " || value === "\t" || value === "\f" || value === "\v";
 }
 function getCommentRangeStyle(comments, isSelected) {
     const allResolved = comments.every((comment) => comment.isResolved);
@@ -475,13 +253,6 @@ function getCommentRangeStyle(comments, isSelected) {
             : {}),
     };
 }
-function getDraftCommentRangeStyle() {
-    return {
-        background: "color-mix(in srgb, var(--color-highlight-100) 32%, transparent)",
-        borderRadius: "2px",
-        boxShadow: "0 1px 4px color-mix(in srgb, var(--color-highlight-100) 18%, transparent)",
-    };
-}
 function getCommentFallbackStyle(comments, isSelected) {
     const allResolved = comments.every((comment) => comment.isResolved);
     const color = allResolved
@@ -502,4 +273,108 @@ const commentHighlightingStyles = `
   }
 }
 `;
+function resolveCommentRange(comment, fieldElement, iframeDocument) {
+    if (comment.rangeStart === undefined || comment.rangeEnd === undefined) {
+        return null;
+    }
+    const originalRange = [
+        Math.max(0, comment.rangeStart),
+        Math.max(comment.rangeStart, comment.rangeEnd),
+    ];
+    const storedText = getStoredFieldText(comment, fieldElement, iframeDocument);
+    const currentText = fieldElement.textContent || "";
+    if (!storedText || storedText === currentText) {
+        return originalRange;
+    }
+    const mapping = computeMapping(currentText, storedText);
+    const mappedStart = mapping[originalRange[0]];
+    const mappedEnd = mapping[originalRange[1]];
+    if (mappedStart === undefined || mappedEnd === undefined) {
+        return originalRange;
+    }
+    return [mappedStart, Math.max(mappedStart, mappedEnd)];
+}
+function getStoredFieldText(comment, fieldElement, iframeDocument) {
+    if (!comment.fieldValue)
+        return "";
+    const isRichText = fieldElement.getAttribute("data-is-richtext") === "true";
+    if (!isRichText)
+        return comment.fieldValue;
+    const template = iframeDocument.createElement("template");
+    template.innerHTML = comment.fieldValue;
+    return template.content.textContent || "";
+}
+function computeMapping(s1, s2) {
+    const n = s1.length;
+    const m = s2.length;
+    const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+    const back = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(""));
+    for (let i = 0; i <= n; i++) {
+        dp[i][0] = i;
+        if (i > 0)
+            back[i][0] = "D";
+    }
+    for (let j = 0; j <= m; j++) {
+        dp[0][j] = j;
+        if (j > 0)
+            back[0][j] = "I";
+    }
+    for (let i = 1; i <= n; i++) {
+        for (let j = 1; j <= m; j++) {
+            const cost = s1[i - 1] === s2[j - 1] ? 0 : 1;
+            const deletion = dp[i - 1][j] + 1;
+            const insertion = dp[i][j - 1] + 1;
+            const substitution = dp[i - 1][j - 1] + cost;
+            let bestVal = deletion;
+            let op = "D";
+            if (insertion < bestVal) {
+                bestVal = insertion;
+                op = "I";
+            }
+            if (substitution < bestVal) {
+                bestVal = substitution;
+                op = cost === 0 ? "M" : "S";
+            }
+            dp[i][j] = bestVal;
+            back[i][j] = op;
+        }
+    }
+    const ops = [];
+    let i = n;
+    let j = m;
+    while (i > 0 || j > 0) {
+        const op = back[i][j];
+        ops.push(op);
+        if (op === "M" || op === "S") {
+            i--;
+            j--;
+        }
+        else if (op === "D") {
+            i--;
+        }
+        else if (op === "I") {
+            j--;
+        }
+    }
+    ops.reverse();
+    const mapping = new Array(m + 1);
+    let iPos = 0;
+    let jPos = 0;
+    mapping[jPos] = iPos;
+    for (const op of ops) {
+        if (op === "M" || op === "S") {
+            iPos++;
+            jPos++;
+            mapping[jPos] = iPos;
+        }
+        else if (op === "I") {
+            jPos++;
+            mapping[jPos] = iPos;
+        }
+        else if (op === "D") {
+            iPos++;
+        }
+    }
+    return mapping;
+}
 //# sourceMappingURL=CommentHighlightings.js.map