@alpaca-editor/core 1.0.4041 → 1.0.4042

package/dist/editor/reviews/CommentPopover.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
+import uuid from "react-uuid";
+import { Send, MessageCirclePlus } from "lucide-react";
+import { useEditContext } from "../client/editContext";
+import { createOrUpdateComment } from "../services/reviewsService";
+import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor, } from "../../components/ui/popover";
+import { Button } from "../../components/ui/button";
+import { Textarea } from "../../components/ui/textarea";
+import * as ReactDOM from "react-dom/client";
+export function CommentPopover({ children, editContext: externalEditContext, position, onClose, }) {
+    const [isOpen, setIsOpen] = useState(!!position);
+    const [text, setText] = useState("");
+    const textareaRef = React.useRef(null);
+    const [saving, setSaving] = useState(false);
+    const contextFromHook = useEditContext();
+    const editContext = externalEditContext || contextFromHook;
+    useEffect(() => {
+        if (position)
+            setIsOpen(true);
+    }, [position?.x, position?.y]);
+    const handleSubmit = async () => {
+        if (!editContext || !text.trim() || saving)
+            return;
+        const descriptor = editContext.contentEditorItem?.descriptor;
+        if (!descriptor)
+            return;
+        const itemId = editContext.focusedField?.item.id ||
+            (editContext.selection.length > 0
+                ? editContext.selection[0]
+                : undefined) ||
+            descriptor.id;
+        if (!itemId)
+            return;
+        const language = descriptor.language;
+        const version = descriptor.version;
+        const getFieldName = async () => {
+            if (!editContext.focusedField)
+                return undefined;
+            const field = await editContext.itemsRepository.getField(editContext.focusedField);
+            return field?.name;
+        };
+        const getItemName = async () => {
+            const item = await editContext.itemsRepository.getItem({
+                id: itemId,
+                language,
+                version,
+            });
+            return item?.name;
+        };
+        setSaving(true);
+        try {
+            const newComment = {
+                id: uuid(),
+                isNew: false,
+                itemId,
+                itemName: await getItemName(),
+                fieldId: editContext.focusedField?.fieldId,
+                fieldName: await getFieldName(),
+                mainItemId: descriptor.id,
+                language,
+                version,
+                position: 0,
+                rangeStart: editContext.selectedRange?.startOffset || 0,
+                rangeEnd: editContext.selectedRange?.endOffset || 0,
+                author: editContext.user?.name,
+                authorDisplayName: editContext.user?.displayName,
+                date: new Date().toISOString(),
+                text: text.trim(),
+            };
+            editContext.setComments([newComment, ...editContext.comments]);
+            editContext.setSelectedComment(newComment);
+            try {
+                const item = await editContext.itemsRepository.getItem({
+                    id: itemId,
+                    language,
+                    version,
+                });
+                if (item && newComment.fieldId) {
+                    newComment.fieldValue = item.fields.find((f) => f.id === newComment.fieldId)?.rawValue;
+                }
+            }
+            catch { }
+            await createOrUpdateComment(newComment);
+            editContext.loadComments();
+        }
+        finally {
+            setSaving(false);
+            setIsOpen(false);
+            setText("");
+            onClose?.();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    useLayoutEffect(() => {
+        if (isOpen) {
+            // Single focus attempt after the popover is fully mounted
+            const focusTextarea = () => {
+                const el = textareaRef.current;
+                if (el) {
+                    el.focus();
+                    try {
+                        const len = el.value.length;
+                        el.setSelectionRange(len, len);
+                    }
+                    catch { }
+                }
+            };
+            // Use a longer delay to ensure popover is fully rendered, especially for dynamically created popovers
+            const timeoutId = setTimeout(focusTextarea, 300);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [isOpen]);
+    const assignTextareaRef = (el) => {
+        textareaRef.current = el;
+    };
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: (open) => {
+            setIsOpen(open);
+            if (!open)
+                onClose?.();
+        }, enableIframeClickDetection: false, modal: true, children: [position && (_jsx("div", { style: {
+                    position: "fixed",
+                    left: position.x,
+                    top: position.y,
+                    width: 1,
+                    height: 1,
+                    pointerEvents: "none",
+                }, children: _jsx(PopoverAnchor, {}) })), !position && (_jsx(PopoverTrigger, { asChild: true, children: children ?? _jsx(MessageCirclePlus, { size: 16, strokeWidth: 1 }) })), _jsx(PopoverContent, { className: "w-96 p-4", side: "bottom", align: "start", onPointerDownOutside: (e) => e.preventDefault(), onInteractOutside: (e) => e.preventDefault(), onFocusOutside: (e) => e.preventDefault(), onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "font-medium", children: "Add Comment" }), _jsx(Textarea, { ref: assignTextareaRef, value: text, onChange: (e) => setText(e.target.value), onKeyDown: handleKeyDown, placeholder: "Write your comment...", className: "mt-2 resize-none", rows: 3, autoFocus: true }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                        setIsOpen(false);
+                                        onClose?.();
+                                    }, disabled: saving, children: "Cancel" }), _jsxs(Button, { size: "sm", onClick: handleSubmit, disabled: !text.trim() || saving, className: "flex items-center gap-1", children: [_jsx(Send, { size: 14, strokeWidth: 1 }), saving ? "Saving..." : "Add Comment"] })] })] }) })] }));
+}
+export function showCommentPopoverAt(position, editContext) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = ReactDOM.createRoot(container);
+    const handleClose = () => {
+        root.unmount();
+        if (container.parentNode)
+            container.parentNode.removeChild(container);
+    };
+    root.render(_jsx(CommentPopover, { editContext: editContext, position: position, onClose: handleClose }));
+}
+//# sourceMappingURL=CommentPopover.js.map

package/dist/editor/reviews/CommentPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentPopover.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentPopover.tsx"],"names":[],"mappings":"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"}

package/dist/editor/reviews/SuggestionDisplayPopover.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { SuggestedEdit } from "../../types";
+interface SuggestionDisplayPopoverProps {
+    suggestion: SuggestedEdit;
+    children: React.ReactNode;
+    onSuggestionUpdated?: () => void;
+}
+export declare function SuggestionDisplayPopover({ suggestion, children, onSuggestionUpdated, }: SuggestionDisplayPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor/reviews/SuggestionDisplayPopover.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
+import { formatDate } from "../utils";
+import { Button } from "../../components/ui/button";
+import { deleteSuggestedEdit, createOrUpdateSuggestedEdit, } from "../services/suggestedEditsService";
+import { Check, Trash2, Brush, GalleryVertical, } from "lucide-react";
+import { DiffView } from "./DiffView";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { createPatch, applyPatch } from "diff";
+import { cn } from "../../lib/utils";
+export function SuggestionDisplayPopover({ suggestion, children, onSuggestionUpdated, }) {
+    const editContext = useEditContext();
+    const [isOpen, setIsOpen] = useState(false);
+    const [deleteConfirm, setDeleteConfirm] = useState(false);
+    const [isApplying, setIsApplying] = useState(false);
+    const [item, setItem] = useState(null);
+    const [patchPossible, setPatchPossible] = useState(true);
+    const [patchWarning, setPatchWarning] = useState("");
+    const [ignoreFormatting, setIgnoreFormatting] = useState(true);
+    const [clipUnchanged, setClipUnchanged] = useState(true);
+    const canDelete = suggestion.author === editContext?.user?.name &&
+        suggestion.status !== "applied";
+    const canApply = editContext?.mode === "edit" &&
+        suggestion.status !== "applied" &&
+        !editContext?.readonly;
+    // Load the full item when popover opens
+    React.useEffect(() => {
+        if (isOpen && editContext?.itemsRepository && suggestion.itemId) {
+            editContext.itemsRepository
+                .getItem({
+                id: suggestion.itemId,
+                language: suggestion.mainItemLanguage,
+                version: suggestion.mainItemVersion,
+            })
+                .then((loadedItem) => {
+                setItem(loadedItem);
+                checkAndComputePatch(loadedItem);
+            })
+                .catch((err) => {
+                console.error("Error loading item:", err);
+            });
+        }
+    }, [isOpen, suggestion, editContext?.itemsRepository]);
+    // Check if the patch can be applied cleanly
+    const checkAndComputePatch = async (loadedItem) => {
+        const field = loadedItem?.fields?.find((f) => f.id === suggestion.fieldId);
+        if (!field)
+            return;
+        const currentValue = field.rawValue || "";
+        const patch = createPatch("field", suggestion.oldValue, suggestion.newValue);
+        const patchedCandidate = applyPatch(currentValue, patch);
+        if (patchedCandidate === false || typeof patchedCandidate !== "string") {
+            setPatchPossible(false);
+            setPatchWarning("Patch cannot be applied cleanly to current field value.");
+        }
+        else {
+            setPatchPossible(true);
+            setPatchWarning("");
+        }
+    };
+    const handleDelete = async () => {
+        if (!deleteConfirm) {
+            setDeleteConfirm(true);
+            return;
+        }
+        await deleteSuggestedEdit(suggestion);
+        setIsOpen(false);
+        onSuggestionUpdated?.();
+    };
+    const handleApplyPatch = async () => {
+        if (!patchPossible || !editContext || isApplying)
+            return;
+        setIsApplying(true);
+        try {
+            // Recalculate the patch immediately before applying
+            const field = item?.fields?.find((f) => f.id === suggestion.fieldId);
+            if (!field)
+                return;
+            const currentValue = field.rawValue || "";
+            const patch = createPatch("field", suggestion.oldValue, suggestion.newValue);
+            const patchedCandidate = applyPatch(currentValue, patch);
+            if (patchedCandidate === false || typeof patchedCandidate !== "string") {
+                setPatchWarning("Patch cannot be applied cleanly to current field value.");
+                return;
+            }
+            await editContext.operations.editField({
+                field: {
+                    fieldId: suggestion.fieldId,
+                    item: {
+                        id: suggestion.itemId,
+                        language: suggestion.mainItemLanguage,
+                        version: suggestion.mainItemVersion,
+                    },
+                },
+                value: patchedCandidate,
+                rawValue: patchedCandidate,
+                refresh: "immediate",
+            });
+            // Update the suggestion status to "applied"
+            const updatedSuggestion = { ...suggestion, status: "applied" };
+            await createOrUpdateSuggestedEdit(updatedSuggestion);
+            onSuggestionUpdated?.();
+            setIsOpen(false);
+        }
+        finally {
+            setIsApplying(false);
+        }
+    };
+    const handleReplaceCompletely = async () => {
+        if (!editContext || isApplying)
+            return;
+        setIsApplying(true);
+        try {
+            await editContext.operations.editField({
+                field: {
+                    fieldId: suggestion.fieldId,
+                    item: {
+                        id: suggestion.itemId,
+                        language: suggestion.mainItemLanguage,
+                        version: suggestion.mainItemVersion,
+                    },
+                },
+                value: suggestion.newValue,
+                rawValue: suggestion.newValue,
+                refresh: "immediate",
+            });
+            const updatedSuggestion = { ...suggestion, status: "applied" };
+            await createOrUpdateSuggestedEdit(updatedSuggestion);
+            onSuggestionUpdated?.();
+            setIsOpen(false);
+        }
+        finally {
+            setIsApplying(false);
+        }
+    };
+    const renderContextInfo = () => {
+        const itemName = item ? item.name : null;
+        const fieldName = item && item.fields
+            ? item.fields.find((f) => f.id === suggestion.fieldId)?.name
+            : null;
+        if (!itemName && !fieldName)
+            return null;
+        return (_jsxs("div", { className: "mt-3 flex items-center border-t pt-3 text-xs", children: [itemName && _jsx("div", { className: "text-xs text-gray-500", children: itemName }), fieldName && itemName && (_jsx("div", { className: "mx-2 text-xs text-gray-500", children: ">" })), fieldName && _jsx("div", { className: "text-xs text-gray-500", children: fieldName })] }));
+    };
+    const renderDiffToggleButtons = () => {
+        return (_jsxs("div", { className: "mb-2 flex gap-2", children: [_jsx(SimpleIconButton, { icon: _jsx(Brush, { size: 14, className: "p-0.5", strokeWidth: 1 }), label: "Ignore Formatting", onClick: () => setIgnoreFormatting((prev) => !prev), className: cn("text-gray-500", ignoreFormatting ? "bg-gray-200" : "") }), _jsx(SimpleIconButton, { icon: _jsx(GalleryVertical, { size: 14, className: "p-0.5", strokeWidth: 1 }), label: "Clip", onClick: () => setClipUnchanged((prev) => !prev), className: cn("text-gray-500", clipUnchanged ? "bg-gray-200" : "") })] }));
+    };
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: (open) => {
+            setIsOpen(open);
+            if (!open) {
+                setDeleteConfirm(false);
+                setPatchWarning("");
+            }
+        }, enableIframeClickDetection: true, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsx(PopoverContent, { className: "w-96 p-4", side: "bottom", align: "start", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-gray-900", children: suggestion.authorDisplayName || suggestion.author }), _jsx("div", { className: "text-xs text-gray-500", children: suggestion.created
+                                                ? formatDate(new Date(suggestion.created))
+                                                : "" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [canApply && patchPossible && suggestion.status !== "applied" && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleApplyPatch, disabled: isApplying, className: "h-8 w-8 p-0 text-green-600", children: _jsx(Check, { size: 14, strokeWidth: 1 }) })), suggestion.status === "applied" && (_jsx("div", { className: "flex h-8 w-8 items-center justify-center", children: _jsx(Check, { size: 14, strokeWidth: 1, className: "text-green-500" }) })), canDelete && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleDelete, className: `h-8 w-8 p-0 ${deleteConfirm ? "text-red-500" : "text-gray-400"}`, children: _jsx(Trash2, { size: 14, strokeWidth: 1 }) }))] })] }), suggestion.status === "applied" && (_jsxs("div", { className: "text-xs font-medium text-green-600", children: ["\u2713 Applied", " ", suggestion.updatedBy ? `by ${suggestion.updatedBy}` : "", suggestion.updated
+                                    ? ` on ${formatDate(new Date(suggestion.updated))}`
+                                    : ""] })), renderDiffToggleButtons(), _jsxs("div", { className: "text-sm", children: [_jsx(DiffView, { oldText: suggestion.oldValue, newText: suggestion.newValue, ignoreFormatting: ignoreFormatting, clipUnchanged: clipUnchanged, clipThreshold: 50, clipContext: 10 }), canApply && patchWarning && (_jsxs("div", { className: "mt-2 text-xs text-red-500", children: [patchWarning, _jsx("button", { className: "ml-2 cursor-pointer underline hover:text-red-700", onClick: handleReplaceCompletely, disabled: isApplying, children: "Click here to replace the field content completely." })] }))] }), renderContextInfo(), deleteConfirm && (_jsxs("div", { className: "border-t pt-3", children: [_jsx("div", { className: "mb-2 text-sm text-red-600", children: "Are you sure you want to delete this suggestion?" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setDeleteConfirm(false), children: "Cancel" }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleDelete, children: "Delete" })] })] })), canApply && !patchPossible && suggestion.status !== "applied" && (_jsx("div", { className: "border-t pt-3", children: _jsx(Button, { size: "sm", onClick: handleReplaceCompletely, disabled: isApplying, className: "w-full", children: isApplying ? "Applying..." : "Replace Field Content" }) })), !deleteConfirm && (_jsx("div", { className: "border-t pt-3", children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    setIsOpen(false);
+                                    // Exit fullscreen mode if active
+                                    if (editContext?.pageView?.fullscreen) {
+                                        editContext.pageView.setFullscreen(false);
+                                    }
+                                    // Focus on the field and select the item
+                                    if (suggestion.fieldId) {
+                                        editContext?.setFocusedField({
+                                            fieldId: suggestion.fieldId,
+                                            item: {
+                                                id: suggestion.itemId,
+                                                language: suggestion.mainItemLanguage,
+                                                version: suggestion.mainItemVersion,
+                                            },
+                                        }, false);
+                                        editContext?.select?.([suggestion.itemId]);
+                                    }
+                                    // Switch to comments view
+                                    if (editContext?.switchView) {
+                                        editContext.switchView("comments");
+                                    }
+                                }, className: "w-full", children: "View in Comments Panel" }) }))] }) })] }));
+}
+//# sourceMappingURL=SuggestionDisplayPopover.js.map

package/dist/editor/reviews/SuggestionDisplayPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionDisplayPopover.js","sourceRoot":"","sources":["../../../src/editor/reviews/SuggestionDisplayPopover.tsx"],"names":[],"mappings":"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"}

package/dist/revision.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "1.0.4041";
-export declare const buildDate = "2025-08-13 02:12:57";
+export declare const version = "1.0.4042";
+export declare const buildDate = "2025-08-13 09:49:23";

package/dist/revision.js

@@ -1,3 +1,3 @@
-export const version = "1.0.4041";
-export const buildDate = "2025-08-13 02:12:57";
+export const version = "1.0.4042";
+export const buildDate = "2025-08-13 09:49:23";
 //# sourceMappingURL=revision.js.map

package/dist/styles.css

@@ -769,6 +769,9 @@
   .min-h-\[70px\] {
     min-height: 70px;
   }
+  .min-h-\[80px\] {
+    min-height: 80px;
+  }
   .min-h-\[100px\] {
     min-height: 100px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.4041",
+  "version": "1.0.4042",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ui/textarea.tsx

@@ -2,9 +2,13 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
   return (
     <textarea
+      ref={ref}
       data-slot="textarea"
       className={cn(
         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
@@ -13,6 +17,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       {...props}
     />
   );
-}
+});
+Textarea.displayName = "Textarea";
 
 export { Textarea };

package/src/editor/commands/componentCommands.tsx

@@ -25,6 +25,7 @@ import {
   TriangleAlert,
 } from "lucide-react";
 import { AiPromptPopover } from "../ai/AiPromptPopover";
+import { showCommentPopoverAt } from "../reviews/CommentPopover";
 
 export type ComponentCommandData = CommandData & {
   components: Component[];
@@ -72,7 +73,7 @@ export async function getComponentCommands(
   ) as Component[];
 
   const commands = [
-    await getCreateCommentCommand(components),
+    await getCreateCommentCommand(components, editContext),
     await getInsertCommand(components, editContext),
     await getDeleteCommand(components, editContext),
     await getDuplicateCommand(components, editContext),
@@ -413,18 +414,29 @@ function deleteComponents(
 
 function getCreateCommentCommand(
   components: Component[],
+  editContext: EditContextType,
 ): ComponentCommand | null {
   if (components.length !== 1 || isPlaceholder(components[0])) return null;
 
   return {
     id: "addComment",
     label: "Add Comment",
-    icon: <MessageCirclePlus size={14} />,
+    icon: <MessageCirclePlus size={14} strokeWidth={1} />,
     disabled: () => false,
     visibilityScopes: ["contextMenu"],
     execute: async (context: CommandContext<any>) => {
-      context.editContext.addComment();
-      context.editContext.switchView("comments");
+      const ev = context.event as any;
+      if (ev?.preventDefault) ev.preventDefault();
+      if (ev?.stopPropagation) ev.stopPropagation();
+      if (ev?.nativeEvent?.stopImmediatePropagation)
+        ev.nativeEvent.stopImmediatePropagation();
+      const x = ev?.clientX ?? ev?.pageX ?? window.innerWidth / 2;
+      const y = ev?.clientY ?? ev?.pageY ?? window.innerHeight / 2;
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          showCommentPopoverAt({ x, y }, context.editContext);
+        });
+      }, 0);
     },
   };
 }

package/src/editor/page-editor-chrome/CommentHighlighting.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { useEffect } from "react";
 import { classNames } from "primereact/utils";
 import { CommentIcon } from "../ui/Icons";
-import { getComponentById } from "../componentTreeHelper";
+import { CommentDisplayPopover } from "../reviews/CommentDisplayPopover";
 
 export function CommentHighlighting({
   comment,
@@ -20,6 +20,7 @@ export function CommentHighlighting({
   iframe: HTMLIFrameElement;
 }) {
   const editContext = useEditContext();
+  const isSelected = comment.id === editContext?.selectedComment?.id;
   const modifiedFields = useModifiedFieldsContext();
 
   const [range, setRange] = useState<number[]>([
@@ -176,22 +177,50 @@ export function CommentHighlighting({
           }}
         >
           {index === 0 && (
-            <div
-              className={classNames(
-                "pointer-events-auto absolute h-5 w-5 cursor-pointer",
-                rect.top * scale < 18 ? "top-0" : "top-[-18px]",
-                (rect.left + rect.width) * scale > iframeRect.width - 18
-                  ? "right-0"
-                  : "right-[-18px]",
-              )}
-              onClick={() => {
-                editContext.switchView("comments");
-                editContext?.select([comment.itemId]);
-                editContext?.setSelectedComment(comment);
+            <CommentDisplayPopover
+              comment={comment}
+              onCommentUpdated={() => {
+                // Reload comments to reflect any changes
+                editContext?.loadComments?.();
               }}
             >
-              <CommentIcon className="text-blue-500 hover:text-blue-600" />
-            </div>
+              <div
+                className={classNames(
+                  "pointer-events-auto absolute h-5 w-5 cursor-pointer",
+                  rect.top * scale < 18 ? "top-0" : "top-[-18px]",
+                  (rect.left + rect.width) * scale > iframeRect.width - 18
+                    ? "right-0"
+                    : "right-[-18px]",
+                )}
+                onClick={() => {
+                  // Set this comment as selected
+                  editContext?.setSelectedComment(comment);
+                  editContext?.setScrollIntoView(comment.itemId);
+                  editContext?.select([comment.itemId]);
+                  if (comment.fieldId) {
+                    editContext?.setFocusedField(
+                      {
+                        fieldId: comment.fieldId,
+                        item: {
+                          id: comment.itemId,
+                          language: comment.language,
+                          version: comment.version,
+                        },
+                      },
+                      false,
+                    );
+                  }
+                }}
+              >
+                <CommentIcon
+                  className={
+                    isSelected
+                      ? "text-red-700 hover:text-red-800"
+                      : "text-blue-500 hover:text-blue-600"
+                  }
+                />
+              </div>
+            </CommentDisplayPopover>
           )}
           {isTextRange && (
             <div
@@ -199,9 +228,11 @@ export function CommentHighlighting({
               style={{
                 width: "100%",
                 height: "100%",
-                backgroundColor: comment.isResolved
-                  ? "rgba(0, 255, 0, 0.45)"
-                  : "rgba(255, 0, 0, 0.45)",
+                backgroundColor: isSelected
+                  ? "rgba(255, 0, 0, 1)" // Darker red for selected
+                  : comment.isResolved
+                    ? "rgba(0, 255, 0, 0.45)" // Green for resolved
+                    : "rgba(255, 0, 0, 0.45)", // Red for unresolved
               }}
             ></div>
           )}