@alpaca-editor/core 1.0.4041 → 1.0.4042

package/src/editor/reviews/SuggestionDisplayPopover.tsx

@@ -0,0 +1,410 @@
+"use client";
+
+import * as React from "react";
+import { useState } from "react";
+import { SuggestedEdit } from "../../types";
+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,
+  UserRoundPen,
+  Brush,
+  GalleryVertical,
+} from "lucide-react";
+import { DiffView } from "./DiffView";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { createPatch, applyPatch } from "diff";
+import { cn } from "../../lib/utils";
+
+interface SuggestionDisplayPopoverProps {
+  suggestion: SuggestedEdit;
+  children: React.ReactNode;
+  onSuggestionUpdated?: () => void;
+}
+
+export function SuggestionDisplayPopover({
+  suggestion,
+  children,
+  onSuggestionUpdated,
+}: SuggestionDisplayPopoverProps) {
+  const editContext = useEditContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const [isApplying, setIsApplying] = useState(false);
+  const [item, setItem] = useState<any>(null);
+  const [patchPossible, setPatchPossible] = useState<boolean>(true);
+  const [patchWarning, setPatchWarning] = useState<string>("");
+  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: any) => {
+    const field = loadedItem?.fields?.find(
+      (f: { id: string }) => f.id === suggestion.fieldId,
+    );
+    if (!field) return;
+
+    const currentValue: string = 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: { id: string }) => f.id === suggestion.fieldId,
+      );
+      if (!field) return;
+
+      const currentValue: string = 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" as const };
+      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" as const };
+      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: { id: string; name?: string }) => f.id === suggestion.fieldId,
+          )?.name
+        : null;
+
+    if (!itemName && !fieldName) return null;
+
+    return (
+      <div className="mt-3 flex items-center border-t pt-3 text-xs">
+        {itemName && <div className="text-xs text-gray-500">{itemName}</div>}
+        {fieldName && itemName && (
+          <div className="mx-2 text-xs text-gray-500">&gt;</div>
+        )}
+        {fieldName && <div className="text-xs text-gray-500">{fieldName}</div>}
+      </div>
+    );
+  };
+
+  const renderDiffToggleButtons = () => {
+    return (
+      <div className="mb-2 flex gap-2">
+        <SimpleIconButton
+          icon={<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" : "")}
+        />
+        <SimpleIconButton
+          icon={<GalleryVertical size={14} className="p-0.5" strokeWidth={1} />}
+          label="Clip"
+          onClick={() => setClipUnchanged((prev) => !prev)}
+          className={cn("text-gray-500", clipUnchanged ? "bg-gray-200" : "")}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open) {
+          setDeleteConfirm(false);
+          setPatchWarning("");
+        }
+      }}
+      enableIframeClickDetection={true}
+    >
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className="w-96 p-4" side="bottom" align="start">
+        <div className="space-y-3">
+          {/* Header */}
+          <div className="flex items-start justify-between">
+            <div>
+              <div className="text-sm font-semibold text-gray-900">
+                {suggestion.authorDisplayName || suggestion.author}
+              </div>
+              <div className="text-xs text-gray-500">
+                {suggestion.created
+                  ? formatDate(new Date(suggestion.created))
+                  : ""}
+              </div>
+            </div>
+            <div className="flex items-center gap-1">
+              {canApply && patchPossible && suggestion.status !== "applied" && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleApplyPatch}
+                  disabled={isApplying}
+                  className="h-8 w-8 p-0 text-green-600"
+                >
+                  <Check size={14} strokeWidth={1} />
+                </Button>
+              )}
+              {suggestion.status === "applied" && (
+                <div className="flex h-8 w-8 items-center justify-center">
+                  <Check size={14} strokeWidth={1} className="text-green-500" />
+                </div>
+              )}
+              {canDelete && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleDelete}
+                  className={`h-8 w-8 p-0 ${deleteConfirm ? "text-red-500" : "text-gray-400"}`}
+                >
+                  <Trash2 size={14} strokeWidth={1} />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* Status */}
+          {suggestion.status === "applied" && (
+            <div className="text-xs font-medium text-green-600">
+              ✓ Applied{" "}
+              {suggestion.updatedBy ? `by ${suggestion.updatedBy}` : ""}
+              {suggestion.updated
+                ? ` on ${formatDate(new Date(suggestion.updated))}`
+                : ""}
+            </div>
+          )}
+
+          {/* Diff Toggle Buttons */}
+          {renderDiffToggleButtons()}
+
+          {/* Diff View */}
+          <div className="text-sm">
+            <DiffView
+              oldText={suggestion.oldValue}
+              newText={suggestion.newValue}
+              ignoreFormatting={ignoreFormatting}
+              clipUnchanged={clipUnchanged}
+              clipThreshold={50}
+              clipContext={10}
+            />
+            {canApply && patchWarning && (
+              <div className="mt-2 text-xs text-red-500">
+                {patchWarning}
+                <button
+                  className="ml-2 cursor-pointer underline hover:text-red-700"
+                  onClick={handleReplaceCompletely}
+                  disabled={isApplying}
+                >
+                  Click here to replace the field content completely.
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Context Info */}
+          {renderContextInfo()}
+
+          {/* Delete confirmation */}
+          {deleteConfirm && (
+            <div className="border-t pt-3">
+              <div className="mb-2 text-sm text-red-600">
+                Are you sure you want to delete this suggestion?
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setDeleteConfirm(false)}
+                >
+                  Cancel
+                </Button>
+                <Button variant="destructive" size="sm" onClick={handleDelete}>
+                  Delete
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Apply button when patch is not possible */}
+          {canApply && !patchPossible && suggestion.status !== "applied" && (
+            <div className="border-t pt-3">
+              <Button
+                size="sm"
+                onClick={handleReplaceCompletely}
+                disabled={isApplying}
+                className="w-full"
+              >
+                {isApplying ? "Applying..." : "Replace Field Content"}
+              </Button>
+            </div>
+          )}
+
+          {/* Actions */}
+          {!deleteConfirm && (
+            <div className="border-t pt-3">
+              <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"
+              >
+                View in Comments Panel
+              </Button>
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/revision.ts

@@ -1,2 +1,2 @@
-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";