@alpaca-editor/core 1.0.3815 → 1.0.3817

package/src/editor/reviews/SuggestedEdit.tsx

@@ -0,0 +1,316 @@
+import { SuggestedEdit as SuggestedEditType } from "../../types";
+import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import {
+  deleteSuggestedEdit,
+  createOrUpdateSuggestedEdit,
+} from "../services/suggestedEditsService";
+import { Button } from "../../components/ui/button";
+import { formatDate } from "../utils";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { DiffView } from "./DiffView";
+// Import lucide icons (adjust names as needed)
+import { Trash2, GalleryVertical, Check, Brush, XCircle } from "lucide-react";
+// Import patch functions from the diff library.
+import { createPatch, applyPatch } from "diff";
+import { cn } from "../../lib/utils";
+
+export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
+  const editContext = useEditContext();
+  const ref = useRef<HTMLDivElement>(null);
+  const overlayPanelRef = useRef<OverlayPanel>(null);
+  const [item, setItem] = useState<any>(null);
+  const [patchPossible, setPatchPossible] = useState<boolean>(true);
+
+  const [patchWarning, setPatchWarning] = useState<string>("");
+  const [applied, setApplied] = useState<boolean>(false);
+
+  const [ignoreFormatting, setIgnoreFormatting] = useState(true);
+  const [clipUnchanged, setClipUnchanged] = useState(true);
+
+  const canApply = editContext?.mode === "edit" && edit.status !== "Applied";
+
+  // Load the full item from the repository.
+  useEffect(() => {
+    if (
+      editContext?.itemsRepository &&
+      edit.itemId &&
+      edit.mainItemLanguage &&
+      edit.mainItemVersion !== undefined
+    ) {
+      editContext.itemsRepository
+        .getItem({
+          id: edit.itemId,
+          language: edit.mainItemLanguage,
+          version: edit.mainItemVersion,
+        })
+        .then((loadedItem) => {
+          setItem(loadedItem);
+          // When the item loads, check if the patch is applicable.
+          checkAndComputePatch(loadedItem);
+        })
+        .catch((err) => {
+          console.error("Error loading item:", err);
+        });
+    }
+  }, [
+    edit.itemId,
+    edit.mainItemLanguage,
+    edit.mainItemVersion,
+    editContext?.itemsRepository,
+  ]);
+
+  // Determine if this suggested edit is selected based on the focused field.
+  const isSelected =
+    editContext?.focusedField &&
+    editContext.focusedField.fieldId === edit.fieldId &&
+    editContext.focusedField.item.id === edit.itemId;
+
+  useEffect(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [isSelected]);
+
+  // When a suggested edit is clicked, update the focused field and select the item.
+  function handleSelectSuggestedEdit() {
+    if (edit.fieldId) {
+      editContext?.setFocusedField(
+        {
+          fieldId: edit.fieldId,
+          item: {
+            id: edit.itemId,
+            language: edit.mainItemLanguage,
+            version: edit.mainItemVersion,
+          },
+        },
+        false,
+      );
+      // Also select the item.
+      editContext?.select?.([edit.itemId]);
+    }
+  }
+
+  // Render contextual info by retrieving item and field names from the loaded item.
+  const renderContextInfo = () => {
+    const itemName = item ? item.name : null;
+    const fieldName =
+      item && item.fields
+        ? item.fields.find(
+            (f: { id: string; name?: string }) => f.id === edit.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-2xs text-gray-500">{itemName}</div>}
+        {fieldName && itemName && (
+          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
+        )}
+        {fieldName && <div className="text-2xs text-gray-500">{fieldName}</div>}
+      </div>
+    );
+  };
+
+  // Allow deletion only if the current user is the author.
+  const canDelete = edit.author === editContext?.user?.name;
+
+  // Render the header with author info, creation date, and control buttons.
+  const renderHeader = () => {
+    return (
+      <div className="mb-3 flex items-start justify-between">
+        <div>
+          <div className="text-xs font-bold text-gray-900" title={edit.author}>
+            {edit.authorDisplayName || edit.author}
+          </div>
+          <div className="text-xs text-gray-500">
+            {edit.created ? formatDate(new Date(edit.created)) : ""}
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          {/* Show apply patch control if not yet applied */}
+          {canApply && !applied && patchPossible && (
+            <SimpleIconButton
+              className="text-gray-500"
+              icon={<Check size={14} />}
+              label="Apply"
+              onClick={handleApplyPatch}
+            />
+          )}
+          {applied && (
+            <i
+              className="pi pi-check text-bold px-1 text-xs text-green-500"
+              title={
+                "Applied by " +
+                edit.updatedBy +
+                " (" +
+                formatDate(new Date(edit.updated!)) +
+                ")"
+              }
+            ></i>
+          )}
+          {canDelete && (
+            <SimpleIconButton
+              className="text-gray-500"
+              icon={<Trash2 size={14} />}
+              label="Delete"
+              onClick={(e: any) => overlayPanelRef.current?.toggle(e)}
+            />
+          )}
+          <OverlayPanel ref={overlayPanelRef}>
+            <Button
+              className="m-2"
+              variant="outline"
+              onClick={async () => {
+                await deleteSuggestedEdit(edit);
+              }}
+            >
+              Delete
+            </Button>
+          </OverlayPanel>
+        </div>
+      </div>
+    );
+  };
+
+  // Render toggle buttons using SimpleIconButtons.
+  const renderDiffToggleButtons = () => {
+    return (
+      <div className="mb-2 flex gap-2">
+        <SimpleIconButton
+          icon={<Brush size={14} className="p-0.5" />}
+          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" />}
+          label="Clip"
+          onClick={() => setClipUnchanged((prev) => !prev)}
+          className={cn("text-gray-500", clipUnchanged ? "bg-gray-200" : "")}
+        />
+      </div>
+    );
+  };
+
+  // Helper: Check if the patch is applicable to the current field value.
+  async function checkAndComputePatch(loadedItem: any) {
+    const field = loadedItem?.fields?.find(
+      (f: { id: string }) => f.id === edit.fieldId,
+    );
+    if (!field) return;
+    const currentValue: string = field.rawValue || "";
+    const patch = createPatch("field", edit.oldValue, edit.newValue);
+    const patchedCandidate = applyPatch(currentValue, patch);
+    if (patchedCandidate === false || typeof patchedCandidate !== "string") {
+      setPatchPossible(false);
+      setPatchWarning("Patch cannot be applied cleanly.");
+    } else {
+      setPatchPossible(true);
+      setPatchWarning("");
+    }
+  }
+
+  // Handler for applying the patch using editContext.operations.editField.
+  async function handleApplyPatch() {
+    if (!patchPossible) return;
+    if (!editContext) return;
+
+    // Recalculate the patch immediately before applying
+    const field = item?.fields?.find(
+      (f: { id: string }) => f.id === edit.fieldId,
+    );
+    if (!field) return;
+    const currentValue: string = field.rawValue || "";
+    const patch = createPatch("field", edit.oldValue, edit.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: edit.fieldId,
+        item: {
+          id: edit.itemId,
+          language: edit.mainItemLanguage,
+          version: edit.mainItemVersion,
+        },
+      },
+      value: patchedCandidate,
+      rawValue: patchedCandidate,
+      refresh: "immediate",
+    });
+    // Update the suggestion status to "Applied" and persist the update.
+    edit.status = "Applied";
+    await createOrUpdateSuggestedEdit(edit);
+    setApplied(true);
+    setPatchWarning("");
+  }
+
+  // Handler for replacing the field content completely using editContext.operations.editField.
+  async function handleReplaceCompletely() {
+    if (!editContext) return;
+    await editContext.operations.editField({
+      field: {
+        fieldId: edit.fieldId,
+        item: {
+          id: edit.itemId,
+          language: edit.mainItemLanguage,
+          version: edit.mainItemVersion,
+        },
+      },
+      value: edit.newValue,
+      rawValue: edit.newValue,
+      refresh: "immediate",
+    });
+    edit.status = "Applied";
+    await createOrUpdateSuggestedEdit(edit);
+    setApplied(true);
+    setPatchWarning("");
+  }
+
+  return (
+    <div
+      ref={ref}
+      key={edit.id}
+      data-testid="suggested-edit"
+      className={`mb-3 cursor-pointer rounded-lg border-2 bg-white p-3 shadow-sm hover:bg-gray-50 ${
+        isSelected ? "border-blue-500" : "border-transparent"
+      }`}
+      onClick={handleSelectSuggestedEdit}
+    >
+      {renderHeader()}
+      {renderDiffToggleButtons()}
+
+      <div className="text-sm whitespace-pre-wrap text-gray-700">
+        <DiffView
+          oldText={edit.oldValue}
+          newText={edit.newValue}
+          ignoreFormatting={ignoreFormatting}
+          clipUnchanged={clipUnchanged}
+          clipThreshold={50}
+          clipContext={10}
+        />
+        {canApply && patchWarning && (
+          <div className="mt-1 text-xs text-red-500">
+            {patchWarning}
+            <a
+              className="ml-2 cursor-pointer underline"
+              onClick={handleReplaceCompletely}
+            >
+              Click here to replace the field content.
+            </a>
+          </div>
+        )}
+      </div>
+
+      {renderContextInfo()}
+    </div>
+  );
+}

package/src/editor/services/suggestedEditsService.ts

@@ -0,0 +1,39 @@
+import { get, post } from "./serviceHelper";
+import { SuggestedEdit } from "../../types";
+
+/**
+ * Creates or updates a suggested edit.
+ */
+export function createOrUpdateSuggestedEdit(suggestedEdit: SuggestedEdit) {
+  return post("/alpaca/editor/suggested-edits/add", suggestedEdit);
+}
+
+/**
+ * Retrieves all suggested edits for a given main item based on its ID, language, and version.
+ */
+export function getSuggestedEdits(
+  mainItemId: string,
+  mainItemLanguage: string,
+  mainItemVersion: number,
+) {
+  return get<SuggestedEdit[]>(
+    `/alpaca/editor/suggested-edits/index?mainItemId=${mainItemId}&mainItemLanguage=${mainItemLanguage}&mainItemVersion=${mainItemVersion}`,
+  );
+}
+
+/**
+ * Retrieves a single suggested edit by its unique identifier.
+ */
+export function getSuggestedEditById(id: string) {
+  return get<SuggestedEdit>(`/alpaca/editor/suggested-edits/get?id=${id}`);
+}
+
+/**
+ * Deletes the given suggested edit.
+ */
+export function deleteSuggestedEdit(suggestedEdit: SuggestedEdit) {
+  return post(
+    `/alpaca/editor/suggested-edits/delete?id=${suggestedEdit.id}`,
+    {},
+  );
+}

package/src/editor/ui/PerfectTree.tsx

@@ -313,8 +313,8 @@ const NodeContent = memo(
       if (node.hasChildren && node.children === null) {
         return (
           <ProgressSpinner
-            style={{ width: "14px", height: "14px", margin: "0 2px" }}
-            className="text-gray-500"
+            style={{ width: "16px", height: "16px" }}
+            className="m-0 text-gray-500"
           />
         );
       }
@@ -322,7 +322,7 @@ const NodeContent = memo(
       return (
         <span
           onClick={handleToggle}
-          className={`mr-1 inline-block transform cursor-pointer text-gray-500 transition duration-150 select-none ${
+          className={`mr-0.5 inline-block transform cursor-pointer text-gray-500 transition duration-150 select-none ${
             isExpanded ? "rotate-90" : "rotate-0"
           }`}
         >
@@ -371,10 +371,10 @@ const NodeContent = memo(
         {node.hasChildren || node.children?.length ? (
           renderToggle()
         ) : (
-          <div className="w-[18px]" />
+          <div className="w-[14px]" />
         )}
         <div
-          className={`rounded-md border border-transparent p-0.5 hover:border-gray-300 ${
+          className={`rounded-md border border-transparent p-0.5 pr-1.5 hover:border-gray-300 ${
             isDragOver ? "bg-sky-200" : isSelected ? "bg-blue-100" : ""
           }`}
           onClick={handleSelect}

package/src/editor/ui/SimpleIconButton.tsx

@@ -26,11 +26,13 @@ export function SimpleIconButton({
       disabled={disabled}
       className={classNames(
         typeof icon === "string" ? icon + " p-[6px]" : "p-[4px]",
-        "  rounded-full",
-        disabled ? "text-gray-300" : " hover:bg-gray-200  cursor-pointer",
+        "rounded-full text-gray-400",
+        disabled
+          ? "cursor-none text-gray-300"
+          : "cursor-pointer hover:bg-gray-200",
         className,
         size === "large" ? "text-lg" : "text-xs",
-        selected ? "bg-gray-200" : ""
+        selected ? "bg-gray-200" : "",
       )}
       onClick={(ev) => {
         if (!disabled) onClick(ev);

package/src/editor/views/CompareView.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useEditContext } from "../client/editContext";
+import { EditorMode, useEditContext } from "../client/editContext";
 import { LanguageSelector } from "../menubar/LanguageSelector";
 import { VersionSelector } from "../menubar/VersionSelector";
 import { FullItem, ItemDescriptor, Version } from "../pageModel";
@@ -57,7 +57,7 @@ export function CompareView() {
           editContext.currentItemDescriptor?.version;
 
         const language = editContext.itemLanguages.find(
-          (x) => x.languageCode === urlLanguage
+          (x) => x.languageCode === urlLanguage,
         );
 
         if (!language || !language.versions) {
@@ -108,14 +108,14 @@ export function CompareView() {
       newParams.set("compareLanguage", compareToItemDescriptor.language);
       newParams.set(
         "compareVersion",
-        compareToItemDescriptor.version.toString()
+        compareToItemDescriptor.version.toString(),
       );
       router.push(`?${newParams.toString()}`);
     }
   }
 
   const originalSelector = (
-    <div className="flex-1 bg-gray-100 border-b flex items-center justify-center flex-shrink-0 text-sm text-gray-600 p-1">
+    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b bg-gray-100 p-1 text-sm text-gray-600">
       <LanguageSelector
         selectedLanguage={editContext.contentEditorItem?.descriptor?.language}
         showAllLanguagesSwitch={false}
@@ -150,7 +150,7 @@ export function CompareView() {
   );
 
   const compareToSelector = (
-    <div className="flex-1 bg-gray-100 border-b flex items-center justify-center flex-shrink-0 text-sm text-gray-600 p-1">
+    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b bg-gray-100 p-1 text-sm text-gray-600">
       <LanguageSelector
         selectedLanguage={compareTo?.language}
         showAllLanguagesSwitch={false}
@@ -189,13 +189,13 @@ export function CompareView() {
     comparePageViewContext.device === ""
   )
     return (
-      <div className="flex flex-col h-full w-full items-stretch">
+      <div className="flex h-full w-full flex-col items-stretch">
         <div className="flex w-full">
           {originalSelector}
           {compareToSelector}
         </div>
-        <div className="flex-1 relative">
-          <div className="absolute w-full h-full">
+        <div className="relative flex-1">
+          <div className="absolute h-full w-full">
             <ItemEditor
               pageViewContext={editContext.pageView}
               compareToItem={compareToItem}
@@ -208,42 +208,31 @@ export function CompareView() {
   return (
     <Allotment className="flex h-full w-full">
       <Allotment.Pane>
-        <div className="flex flex-col h-full w-full items-stretch">
+        <div className="flex h-full w-full flex-col items-stretch">
           {originalSelector}
           <SingleEditView
             key="original"
             name="original"
-            mode={editContext?.previewMode ? "view" : "edit"}
+            compareView={false}
             pageViewContext={editContext.pageView}
             itemDescriptor={editContext.contentEditorItem?.descriptor}
           />
         </div>
       </Allotment.Pane>
       <Allotment.Pane>
-        <div className="flex flex-col h-full w-full items-stretch">
+        <div className="flex h-full w-full flex-col items-stretch">
           {compareToSelector}
           {compareTo?.language && (
             <SingleEditView
               key="compareTo"
               name="compareTo"
-              mode={
-                compareToItem?.id ===
-                  editContext.contentEditorItem?.descriptor.id &&
-                compareToItem?.language ===
-                  editContext.contentEditorItem?.descriptor.language &&
-                compareToItem?.version ===
-                  editContext.contentEditorItem?.descriptor.version
-                  ? editContext?.previewMode
-                    ? "view"
-                    : "edit"
-                  : "compare"
-              }
+              compareView={true}
               pageViewContext={comparePageViewContext}
               itemDescriptor={compareTo}
             />
           )}
           {!compareTo?.language && (
-            <div className="flex flex-col h-full w-full items-center justify-center">
+            <div className="flex h-full w-full flex-col items-center justify-center">
               <div className="text-gray-400">
                 Select a language and version to compare
               </div>

package/src/editor/views/EditView.tsx

@@ -8,7 +8,7 @@ export function EditView() {
 
   if (!editContext.contentEditorItem?.descriptor)
     return (
-      <div className="grid items-center justify-center h-full w-full">
+      <div className="grid h-full w-full items-center justify-center">
         <div className="text-sm text-gray-500">Not item selected</div>
       </div>
     );
@@ -19,7 +19,7 @@ export function EditView() {
     <SingleEditView
       key="single"
       name="single"
-      mode={editContext?.previewMode ? "view" : "edit"}
+      compareView={false}
       pageViewContext={editContext.pageView}
       itemDescriptor={editContext.contentEditorItem?.descriptor}
     />

package/src/editor/views/SingleEditView.tsx

@@ -9,12 +9,12 @@ import { ItemEditor } from "./ItemEditor";
 export function SingleEditView({
   pageViewContext,
   itemDescriptor,
-  mode,
+  compareView,
   name,
 }: {
   pageViewContext: PageViewContext;
   itemDescriptor?: ItemDescriptor;
-  mode: "edit" | "compare" | "view";
+  compareView: boolean;
   name: string;
 }) {
   const editContext = useEditContext();
@@ -34,9 +34,9 @@ export function SingleEditView({
 
   return (
     <PageViewer
-      mode={mode}
       pageViewContext={pageViewContext}
       showFormEditor={true}
+      compareView={compareView}
       name={name}
       followEditsDefault={true}
     />

package/src/lib/safelist.tsx

@@ -5,10 +5,12 @@ export function Safelist() {
       <div className="bg-purple-400"></div>
       <div className="bg-sky-400"></div>
       <div className="bg-red-400"></div>
+      <div className="bg-teal-400"></div>
       <div className="border-orange-400"></div>
       <div className="border-purple-400"></div>
       <div className="border-sky-400"></div>
       <div className="border-red-400"></div>
+      <div className="border-teal-400"></div>
     </>
   );
 }