@alpaca-editor/core 1.0.3820 → 1.0.3823

package/dist/editor/reviews/Comments.js

@@ -5,7 +5,7 @@ import { Comment as CommentComponent } from "./Comment";
 import { SuggestedEditComponent } from "./SuggestedEdit";
 import { SimpleToolbar } from "../ui/SimpleToolbar";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { FileDiff, SquarePen, CheckCircle, CheckCircle2, Eye, } from "lucide-react";
+import { FileDiff, SquarePen, CheckCircle, CheckCircle2, MessageSquareMore, } from "lucide-react";
 export function Comments() {
     const editContext = useEditContext();
     const [feedbackItems, setFeedbackItems] = useState([]);
@@ -27,13 +27,13 @@ export function Comments() {
     }, [editContext, hideAppliedSuggestions]);
     return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs(SimpleToolbar, { children: [_jsx(SimpleIconButton, { id: "add-comment", icon: "pi pi-plus", label: "Add Comment", onClick: () => {
                             editContext?.addComment();
-                        } }), _jsx(SimpleIconButton, { selected: editContext?.showComments, icon: _jsx(Eye, { size: 16, className: "p-0.5" }), label: "Show Comments", onClick: () => {
+                        } }), _jsx(SimpleIconButton, { selected: editContext?.showComments, icon: _jsx(MessageSquareMore, { size: 16, className: "p-0.5" }), label: "Show Comments", onClick: () => {
                             editContext?.setShowComments((x) => !x);
                         } }), _jsx(SimpleIconButton, { selected: editContext?.showSuggestedEdits, icon: _jsx(SquarePen, { size: 16, className: "p-0.5" }), label: "Show Suggestions", onClick: () => {
                             editContext?.setShowSuggestedEdits((x) => !x);
-                        } }), _jsx(SimpleIconButton, { selected: editContext?.showSuggestedEditsDiff, icon: _jsx(FileDiff, { size: 16, className: "p-0.5" }), label: "Show Suggestions Diff", onClick: () => {
+                        } }), editContext?.showSuggestedEdits && (_jsx(SimpleIconButton, { selected: editContext?.showSuggestedEditsDiff, icon: _jsx(FileDiff, { size: 16, className: "p-0.5" }), label: "Show Suggestions Diff", onClick: () => {
                             editContext?.setShowSuggestedEditsDiff((x) => !x);
-                        } }), _jsx(SimpleIconButton, { selected: hideAppliedSuggestions, icon: hideAppliedSuggestions ? (_jsx(CheckCircle2, { size: 16, className: "p-0.5" })) : (_jsx(CheckCircle, { size: 16, className: "p-0.5" })), label: hideAppliedSuggestions
+                        } })), _jsx(SimpleIconButton, { selected: hideAppliedSuggestions, icon: hideAppliedSuggestions ? (_jsx(CheckCircle2, { size: 16, className: "p-0.5" })) : (_jsx(CheckCircle, { size: 16, className: "p-0.5" })), label: hideAppliedSuggestions
                             ? "Show Applied Suggestions"
                             : "Hide Applied Suggestions", onClick: () => {
                             setHideAppliedSuggestions((x) => !x);

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

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

package/dist/editor/ui/SimpleIconButton.d.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from "react";
-export declare function SimpleIconButton({ onClick, className, icon, label, disabled, size, id, selected, }: {
+export declare function SimpleIconButton({ onClick, className, icon, label, disabled, size, id, selected, dark, }: {
     onClick: MouseEventHandler;
     className?: string;
     icon?: React.ReactNode;
@@ -8,4 +8,5 @@ export declare function SimpleIconButton({ onClick, className, icon, label, disa
     id?: string;
     size?: "large" | "small";
     selected?: boolean;
+    dark?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/editor/ui/SimpleIconButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "primereact/utils";
-export function SimpleIconButton({ onClick, className, icon, label, disabled, size, id, selected, }) {
-    return (_jsx("button", { id: id, disabled: disabled, className: classNames(typeof icon === "string" ? icon + " p-[6px]" : "p-[4px]", "rounded-full text-gray-400", disabled
+export function SimpleIconButton({ onClick, className, icon, label, disabled, size, id, selected, dark = false, }) {
+    return (_jsx("button", { id: id, disabled: disabled, className: classNames(typeof icon === "string" ? icon + " p-[6px]" : "p-[4px]", "rounded-full", dark ? "text-gray-400" : "text-gray-600", disabled
             ? "cursor-none text-gray-300"
-            : "cursor-pointer hover:bg-gray-200", className, size === "large" ? "text-lg" : "text-xs", selected ? "bg-gray-200" : ""), onClick: (ev) => {
+            : "cursor-pointer hover:bg-gray-200 hover:text-gray-600", className, size === "large" ? "text-lg" : "text-xs", selected ? "bg-gray-200 text-gray-600" : ""), onClick: (ev) => {
             if (!disabled)
                 onClick(ev);
         }, title: label, children: typeof icon !== "string" && icon }));

package/dist/editor/ui/SimpleIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleIconButton.js","sourceRoot":"","sources":["../../../src/editor/ui/SimpleIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,GAUT;IACC,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,UAAU,CACnB,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,EACxD,4BAA4B,EAC5B,QAAQ;YACN,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,kCAAkC,EACtC,SAAS,EACT,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAC9B,EACD,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;YACd,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC,EACD,KAAK,EAAE,KAAK,YAEX,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,GAC1B,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SimpleIconButton.js","sourceRoot":"","sources":["../../../src/editor/ui/SimpleIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,IAAI,GAAG,KAAK,GAWb;IACC,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,UAAU,CACnB,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,EACxD,cAAc,EACd,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EACxC,QAAQ;YACN,CAAC,CAAC,2BAA2B;YAC7B,CAAC,CAAC,sDAAsD,EAC1D,SAAS,EACT,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAC5C,EACD,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;YACd,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC,EACD,KAAK,EAAE,KAAK,YAEX,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,GAC1B,CACV,CAAC;AACJ,CAAC"}

package/dist/styles.css

@@ -791,6 +791,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1454,9 +1457,6 @@
   .text-foreground {
     color: var(--foreground);
   }
-  .text-gray-100 {
-    color: var(--color-gray-100);
-  }
   .text-gray-200 {
     color: var(--color-gray-200);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.3820",
+  "version": "1.0.3823",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
     "@repo/typescript-config": "*",
     "@tailwindcss/cli": "^4.0.17",
     "@turbo/gen": "^2.4.4",
-    "@types/diff": "^7.0.2",
     "@types/node": "^22.13.9",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
@@ -36,6 +35,7 @@
     "@types/lodash": "^4.17.16",
     "@uiw/react-md-editor": "^4.0.5",
     "@uiw/react-textarea-code-editor": "^1.5.24",
+    "@types/diff": "^7.0.2",
     "allotment": "^1.20.3",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.1",

package/src/editor/ContentTree.tsx

@@ -59,7 +59,7 @@ export default function ContentTree({
   rootItemIds?: string[];
   selectedItemIds?: string[];
   onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
-  onNodeClick?: (item: ItemTreeNodeData) => void;
+
   filter?: (items: ItemTreeNodeData[]) => ItemTreeNodeData[];
   templateIds?: string[];
   className?: string;

package/src/editor/commands/componentCommands.tsx

@@ -40,6 +40,7 @@ export type ComponentCommand = Command<ComponentCommandData> & {
 };
 
 const isPlaceholder = (x: any): x is Placeholder => x.components !== undefined;
+const defaultIconSize = 16;
 
 export function getSelectedComponentCommands(editContext: EditContextType) {
   const selection = editContext.selection;
@@ -93,7 +94,7 @@ function getInsertCommand(
   if (!item.placeholders || item.placeholders.length === 0) return null;
   return {
     id: "insert",
-    icon: <Plus size={14} />,
+    icon: <Plus size={defaultIconSize} />,
     label: "Insert component",
     disabled: (context) => !context.editContext.page?.item.canWriteItem,
     visibilityScopes: ["editFrame", "contextMenu"],
@@ -111,7 +112,7 @@ function getDuplicateCommand(
 
   return {
     id: "duplicate",
-    icon: <Copy size={14} />,
+    icon: <Copy size={defaultIconSize} />,
     label: "Duplicate",
     visibilityScopes: ["contextMenu", "menu"],
     disabled: (c) => !(c.editContext.page?.item.canWriteItem || false),
@@ -131,7 +132,7 @@ function getDuplicateCommand(
 function getAiCommand(editContext: EditContextType): ComponentCommand {
   return {
     id: "ai",
-    icon: <Sparkles size={14} />,
+    icon: <Sparkles size={defaultIconSize} />,
     label: "AI",
     disabled: () => false,
 
@@ -162,7 +163,7 @@ function getDesignCommand(
 
   return {
     id: "design",
-    icon: <Palette size={14} />,
+    icon: <Palette size={defaultIconSize} />,
     label: "Design",
     disabled: () => false,
     execute: async (context: CommandContext<any>) => {
@@ -211,11 +212,11 @@ function getCheckboxCommand(
   return {
     id: fieldName,
     icon: allLinked ? (
-      <Check size={14} />
+      <Check size={defaultIconSize} />
     ) : someLinked ? (
-      <StopCircle size={14} />
+      <StopCircle size={defaultIconSize} />
     ) : (
-      <Square size={14} />
+      <Square size={defaultIconSize} />
     ),
     label,
     disabled: () => false,

package/src/editor/field-types/InternalLinkFieldEditor.tsx

@@ -101,12 +101,12 @@ export function InternalLinkFieldEditor({
             rootItemIds={rootItemIds}
             selectionMode="single"
             selectedItemIds={selection}
-            onNodeClick={(node) => {
+            onSelectionChange={(nodes) => {
               setShowTree(false);
               overlayPanelRef.current?.hide();
               editContext?.operations.editField({
                 field: field.descriptor,
-                rawValue: node.id,
+                rawValue: nodes[0]?.id,
               });
             }}
           />

package/src/editor/menubar/PageViewerControls.tsx

@@ -25,12 +25,9 @@ export function PageViewerControls() {
             <SimpleIconButton
               icon={<Pencil className="h-6 w-6 p-1" />}
               label="Edit"
+              dark={true}
               size="large"
-              className={classNames(
-                editContext.mode === "edit"
-                  ? "bg-gray-200"
-                  : "hover:bg-gray-200 hover:text-gray-800",
-              )}
+              selected={editContext.mode === "edit"}
               onClick={() => editContext.setMode("edit")}
             />
           )}
@@ -38,12 +35,9 @@ export function PageViewerControls() {
           <SimpleIconButton
             icon={<EyeIcon className="h-6 w-6 p-1" />}
             label="Preview"
+            dark={true}
             size="large"
-            className={classNames(
-              editContext.mode === "preview"
-                ? "bg-gray-200"
-                : "hover:bg-gray-200 hover:text-gray-800",
-            )}
+            selected={editContext.mode === "preview"}
             onClick={() => editContext.setMode("preview")}
           />
 
@@ -51,12 +45,8 @@ export function PageViewerControls() {
             selected={editContext?.mode === "suggestions"}
             icon={<UserRoundPen size={24} className="p-0.5" />}
             label="Suggestions"
+            dark={true}
             size="large"
-            className={classNames(
-              editContext?.mode === "suggestions"
-                ? "text-gray-600"
-                : "hover:text-gray-600",
-            )}
             onClick={() => editContext?.setMode("suggestions")}
           />
           <Separator size="large" />
@@ -112,10 +102,9 @@ export function PageViewerControls() {
         icon={<CompareIcon className="h-6 w-6 p-1" />}
         label="Compare"
         size="large"
+        dark={true}
         className={
-          editContext.compareMode
-            ? "text-gray-600"
-            : "text-gray-100 hover:text-gray-600"
+          editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
         }
         selected={editContext.compareMode}
         onClick={() => editContext.setCompareMode(!editContext.compareMode)}

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

@@ -1,9 +1,8 @@
 import { useEffect, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { CommentHighlighting } from "./CommentHighlighting";
-import { SuggestionHighlighting } from "./SuggestionHighlighting";
 
-import { Comment, SuggestedEdit } from "../../types";
+import { Comment } from "../../types";
 
 export function CommentHighlightings({
   scale,
@@ -14,13 +13,9 @@ export function CommentHighlightings({
 }) {
   const editContext = useEditContext();
   const [comments, setComments] = useState<Comment[]>([]);
-  const [suggestions, setSuggestions] = useState<SuggestedEdit[]>([]);
 
   useEffect(() => {
     setComments(editContext?.comments || []);
-    setSuggestions(
-      editContext?.suggestedEdits.filter((x) => x.status === "Pending") || [],
-    );
   }, [editContext?.comments, editContext?.suggestedEdits]);
 
   return (
@@ -35,16 +30,6 @@ export function CommentHighlightings({
             comment={comment}
           />
         ))}
-      {suggestions
-        .filter((x) => x.status !== "approved" && x.status !== "rejected")
-        .map((suggestion) => (
-          <SuggestionHighlighting
-            iframe={iframe}
-            scale={scale}
-            key={suggestion.id}
-            suggestion={suggestion}
-          />
-        ))}
     </>
   );
 }

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

@@ -298,7 +298,7 @@ export function FrameMenu({
               )}
             </div>
             {editContext.mode === "edit" && (
-              <div className="flex items-center gap-2 text-sm">
+              <div className="flex items-center gap-2.5 text-sm">
                 {buttons.map((b, i) => (
                   <div
                     className="cursor-pointer hover:text-gray-200"

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   useEditContext,
   useModifiedFieldsContext,
@@ -7,7 +7,7 @@ import {
 import { useThrottledCallback } from "use-debounce";
 import { getFieldDescriptorFromElement, hasFieldLock } from "../utils";
 import { PageViewContext } from "../page-viewer/pageViewContext";
-import { applyPatch, convertChangesToXML, diffWords } from "diff";
+import { applyPatch, diffWords } from "diff";
 import { createPatch } from "diff";
 
 export function InlineEditor({
@@ -96,7 +96,7 @@ export function InlineEditor({
           language,
           version,
         );
-        //   getCompletionDebounced();
+        // getCompletionDebounced();
       });
 
       element.focus();
@@ -168,15 +168,6 @@ export function InlineEditor({
       absoluteOffset = getTextLengthBefore(startNode);
     }
 
-    console.log(
-      "Saved position:",
-      absoluteOffset,
-      "startNode:",
-      startNode,
-      "offset:",
-      startOffset,
-    );
-
     return { node: startNode, offset: absoluteOffset };
   }
 
@@ -226,12 +217,6 @@ export function InlineEditor({
       range.setStart(result.node, result.offset);
       range.setEnd(result.node, result.offset);
       selection.addRange(range);
-      console.log(
-        "Restored position at node:",
-        result.node,
-        "offset:",
-        result.offset,
-      );
     } else if (element.firstChild) {
       // Fallback to end of content if position is too large
       const lastNode = element.lastChild;
@@ -253,18 +238,57 @@ export function InlineEditor({
       const doc = iframeWindow.document;
 
       // Query all field elements by data attributes.
-      const fieldElements = doc.querySelectorAll(
+      const allFieldElements = doc.querySelectorAll(
         "[data-fieldid][data-itemid][data-language][data-version]",
       );
 
-      fieldElements.forEach(async (element) => {
+      const fieldItems = await context.itemsRepository.getItems(
+        Array.from(allFieldElements)
+          .map((element: Element) => {
+            const fieldId = element.getAttribute("data-fieldid");
+            return fieldId
+              ? {
+                  id: fieldId,
+                  language: "en",
+                  version: 0,
+                }
+              : null;
+          })
+          .filter(
+            (item): item is { id: string; language: string; version: number } =>
+              item !== null,
+          ),
+      );
+
+      const validFields = fieldItems.filter((item) => {
+        const typeField = item.fields.find((f: any) => f.name === "Type");
+        if (!typeField) return false;
+        const typeValue = typeField.value;
+        return (
+          typeValue === "Single-Line Text" ||
+          typeValue === "Multi-Line Text" ||
+          typeValue === "Rich Text"
+        );
+      });
+
+      const validFieldElements = validFields.map((item) => {
+        return Array.from(allFieldElements).find(
+          (element: Element) =>
+            element.getAttribute("data-fieldid") === item.id,
+        );
+      });
+
+      validFields.forEach(async (item, index) => {
+        const fieldElement = validFieldElements[index];
+        if (!fieldElement) return;
+
         // Do not update if this field is currently focused.
-        if (element === context.inlineEditingFieldElement) return;
+        if (fieldElement === context.inlineEditingFieldElement) return;
 
-        const fieldId = element.getAttribute("data-fieldid");
-        const itemId = element.getAttribute("data-itemid");
-        const language = element.getAttribute("data-language");
-        const versionStr = element.getAttribute("data-version");
+        const fieldId = fieldElement.getAttribute("data-fieldid");
+        const itemId = fieldElement.getAttribute("data-itemid");
+        const language = fieldElement.getAttribute("data-language");
+        const versionStr = fieldElement.getAttribute("data-version");
         if (!fieldId || !itemId || !language || !versionStr) return;
         const version = parseInt(versionStr, 10);
 
@@ -296,14 +320,16 @@ export function InlineEditor({
         }
 
         // If showSuggestedEdits is false, update with the base value.
-        if (!context.showSuggestedEdits) {
-          element.innerHTML = originalValue;
+        if (!context.showSuggestedEdits && context.mode !== "suggestions") {
+          fieldElement.innerHTML = originalValue;
+
           return;
         }
 
         // Otherwise, gather all suggestions for this field.
         const fieldSuggestions = context.suggestedEdits.filter(
           (s: any) =>
+            s.status === "Pending" &&
             s.fieldId === fieldId &&
             s.itemId === itemId &&
             s.mainItemLanguage === language &&
@@ -321,6 +347,8 @@ export function InlineEditor({
 
         // Apply suggestions sequentially to generate the merged value.
         let mergedValue = originalValue;
+        let couldApplyPatch = true;
+
         for (const suggestion of fieldSuggestions) {
           // Compute a patch from the suggestion's baseline to its intended new value.
           const patch = createPatch(
@@ -328,19 +356,25 @@ export function InlineEditor({
             suggestion.oldValue,
             suggestion.newValue,
           );
+
           const patchedCandidate = applyPatch(mergedValue, patch);
+
           if (
             patchedCandidate !== false &&
             typeof patchedCandidate === "string"
           ) {
             mergedValue = patchedCandidate;
+          } else {
+            couldApplyPatch = false;
           }
-          // If a patch fails, we simply skip that suggestion.
         }
 
+        if (!couldApplyPatch)
+          mergedValue = fieldSuggestions[0]?.newValue || originalValue;
+
         // If showSuggestedEditsDiff is false, show only the merged text
         if (!context.showSuggestedEditsDiff) {
-          element.innerHTML = mergedValue;
+          fieldElement.innerHTML = mergedValue;
           return;
         }
 
@@ -363,7 +397,7 @@ export function InlineEditor({
         });
 
         // Update the element's innerHTML with the diff markup.
-        element.innerHTML = diffHTML;
+        fieldElement.innerHTML = diffHTML;
       });
     };
 
@@ -387,8 +421,6 @@ export function InlineEditor({
       const savedPosition = saveCaretPosition(element);
       const start = savedPosition?.offset || 0;
 
-      console.log("saved position:", start);
-
       const fieldId = element.getAttribute("data-fieldid");
       const itemId = element.getAttribute("data-itemid");
       const language = element.getAttribute("data-language");
@@ -421,7 +453,7 @@ export function InlineEditor({
 
       // If suggestions mode is active, merge all suggestions for this field.
 
-      if (context.showSuggestedEdits || context.mode === "suggestions") {
+      if (context.mode === "suggestions") {
         const fieldSuggestions = context.suggestedEdits.filter(
           (s: any) =>
             s.fieldId === fieldId &&
@@ -448,6 +480,8 @@ export function InlineEditor({
             typeof patchedCandidate === "string"
           ) {
             mergedValue = patchedCandidate;
+          } else {
+            mergedValue = suggestion.newValue;
           }
         }
         // Update focused field element with the merged plain text value.
@@ -459,7 +493,6 @@ export function InlineEditor({
         }
       }
 
-      console.log("restoring caret position", savedPosition);
       setTimeout(() => {
         restoreCaretPosition(element, start);
       }, 0);

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

@@ -9,7 +9,7 @@ import { LockedFieldIndicator } from "./LockedFieldIndicator";
 import { FrameMenus } from "./FrameMenus";
 import { FieldEditedIndicators } from "./FieldEditedIndicators";
 import { CommentHighlightings } from "./CommentHighlightings";
-
+import { SuggestionHighlightings } from "./SuggestionHighlightings";
 export function PageEditorChrome({
   iframe,
   compareView,
@@ -92,6 +92,12 @@ export function PageEditorChrome({
           scale={1}
         />
       )}
+      {editContext.showSuggestedEdits && (
+        <SuggestionHighlightings
+          iframe={pageViewContext?.editorIframeRef.current!}
+          scale={1}
+        />
+      )}
 
       <FieldEditedIndicators pageViewContext={pageViewContext} />
 

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

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+
+import { SuggestionHighlighting } from "./SuggestionHighlighting";
+
+import { SuggestedEdit } from "../../types";
+
+export function SuggestionHighlightings({
+  scale,
+  iframe,
+}: {
+  scale: number;
+  iframe: HTMLIFrameElement;
+}) {
+  const editContext = useEditContext();
+
+  const [suggestions, setSuggestions] = useState<SuggestedEdit[]>([]);
+
+  useEffect(() => {
+    setSuggestions(
+      editContext?.suggestedEdits.filter((x) => x.status === "Pending") || [],
+    );
+  }, [editContext?.comments, editContext?.suggestedEdits]);
+
+  return (
+    <>
+      {editContext?.showSuggestedEdits &&
+        suggestions
+          .filter((x) => x.status !== "approved" && x.status !== "rejected")
+          .map((suggestion) => (
+            <SuggestionHighlighting
+              iframe={iframe}
+              scale={scale}
+              key={suggestion.id}
+              suggestion={suggestion}
+            />
+          ))}
+    </>
+  );
+}

package/src/editor/reviews/Comments.tsx

@@ -7,11 +7,10 @@ import { SimpleToolbar } from "../ui/SimpleToolbar";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import {
   FileDiff,
-  MessageCircle,
   SquarePen,
   CheckCircle,
   CheckCircle2,
-  Eye,
+  MessageSquareMore,
 } from "lucide-react";
 
 // Define a union type for feedback items:
@@ -59,7 +58,7 @@ export function Comments() {
         />
         <SimpleIconButton
           selected={editContext?.showComments}
-          icon={<Eye size={16} className="p-0.5" />}
+          icon={<MessageSquareMore size={16} className="p-0.5" />}
           label="Show Comments"
           onClick={() => {
             editContext?.setShowComments((x) => !x);
@@ -73,14 +72,16 @@ export function Comments() {
             editContext?.setShowSuggestedEdits((x) => !x);
           }}
         />
-        <SimpleIconButton
-          selected={editContext?.showSuggestedEditsDiff}
-          icon={<FileDiff size={16} className="p-0.5" />}
-          label="Show Suggestions Diff"
-          onClick={() => {
-            editContext?.setShowSuggestedEditsDiff((x) => !x);
-          }}
-        />
+        {editContext?.showSuggestedEdits && (
+          <SimpleIconButton
+            selected={editContext?.showSuggestedEditsDiff}
+            icon={<FileDiff size={16} className="p-0.5" />}
+            label="Show Suggestions Diff"
+            onClick={() => {
+              editContext?.setShowSuggestedEditsDiff((x) => !x);
+            }}
+          />
+        )}
         <SimpleIconButton
           selected={hideAppliedSuggestions}
           icon={