@alpaca-editor/core 1.0.3813 → 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/sidebar/ComponentPalette.tsx

@@ -25,121 +25,123 @@ export function ComponentPalette({}: {}) {
       acc[group].push(value);
       return acc;
     },
-    {} as { [key: string]: InsertOption[] }
+    {} as { [key: string]: InsertOption[] },
   );
 
   return (
-    <div className="h-full relative tour-component-palette">
-      <div className="overflow-y-auto absolute inset-0">
-        <div className="p-4">
-          <InputText
-            ref={filterRef}
-            className="w-full text-sm"
-            placeholder="Filter components"
-            onChange={(e) => setFilter(e.target.value)}
-          />
-        </div>
-        {Object.keys(insertOptionsByGroup)
-          .sort()
-          .map((group, index) => {
-            const options = insertOptionsByGroup[group]!.filter(
-              (x) => !x.isHidden
-            ).filter(
-              (x) => x.name.toLowerCase().indexOf(filter.toLowerCase()) > -1
-            );
-            if (options.length === 0) return;
-            return (
-              <div
-                className={classNames(
-                  "m-4",
-                  index > 0 ? " border-t border-gray-200" : ""
-                )}
-                key={group}
-              >
-                <div className="text-xs font-bold mt-2 mb-3 flex items-center gap-2">
-                  <ArrowDownIcon /> {group}
-                </div>
-                <div className="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))]">
-                  {options.map((option) => {
-                    function handleDragStart(
-                      event: React.DragEvent<HTMLDivElement>
-                    ): void {
-                      editContext?.dragStart({
-                        type: "template",
-                        typeId: option.typeId,
-                        name: option.name,
-                      });
-                      event.stopPropagation();
-                    }
+    <div className="tour-component-palette relative flex h-full flex-col">
+      <div className="p-4">
+        <InputText
+          ref={filterRef}
+          className="w-full text-sm"
+          placeholder="Filter components"
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+      <div className="relative flex-1">
+        <div className="absolute inset-0 overflow-y-auto">
+          {Object.keys(insertOptionsByGroup)
+            .sort()
+            .map((group, index) => {
+              const options = insertOptionsByGroup[group]!.filter(
+                (x) => !x.isHidden,
+              ).filter(
+                (x) => x.name.toLowerCase().indexOf(filter.toLowerCase()) > -1,
+              );
+              if (options.length === 0) return;
+              return (
+                <div
+                  className={classNames(
+                    "m-4",
+                    index > 0 ? "border-t border-gray-200" : "",
+                  )}
+                  key={group}
+                >
+                  <div className="mt-2 mb-3 flex items-center gap-2 text-xs font-bold">
+                    <ArrowDownIcon /> {group}
+                  </div>
+                  <div className="grid grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))] gap-4">
+                    {options.map((option) => {
+                      function handleDragStart(
+                        event: React.DragEvent<HTMLDivElement>,
+                      ): void {
+                        editContext?.dragStart({
+                          type: "template",
+                          typeId: option.typeId,
+                          name: option.name,
+                        });
+                        event.stopPropagation();
+                      }
 
-                    function handleDragEnd(): void {
-                      editContext!.dragEnd();
-                      editContext!.setSelectedForInsertion("");
-                    }
+                      function handleDragEnd(): void {
+                        editContext!.dragEnd();
+                        editContext!.setSelectedForInsertion("");
+                      }
 
-                    const isDraggable = !option.isInvalid;
+                      const isDraggable = !option.isInvalid;
 
-                    return (
-                      <div
-                        id={"insert-component-" + option.typeId}
-                        onClick={() => {
-                          editContext!.setSelectedForInsertion(option.typeId);
-                        }}
-                        draggable={isDraggable}
-                        onDragStart={handleDragStart}
-                        onDragEnd={handleDragEnd}
-                        className={classNames(
-                          "p-2 border border-gray-200 flex items-center flex-col gap-2 text-center text-xs relative rounded break-all ",
-                          isDraggable ? "cursor-grab" : "",
-                          editContext.selectedForInsertion === option.typeId
-                            ? "border-sky-500"
-                            : ""
-                        )}
-                        key={option.typeId}
-                        data-testid="insert-component-option"
-                      >
-                        {option.svg && (
-                          <div
-                            className="w-8 h-8"
-                            dangerouslySetInnerHTML={{ __html: option.svg }}
-                          ></div>
-                        )}
-                        {!option.svg && (
-                          <img
-                            src={getAbsoluteIconUrl(option.icon)}
-                            width="32"
-                            height="32"
-                          ></img>
-                        )}
+                      return (
+                        <div
+                          id={"insert-component-" + option.typeId}
+                          onClick={() => {
+                            editContext!.setSelectedForInsertion(option.typeId);
+                          }}
+                          draggable={isDraggable}
+                          onDragStart={handleDragStart}
+                          onDragEnd={handleDragEnd}
+                          className={classNames(
+                            "relative flex flex-col items-center gap-2 rounded border border-gray-200 p-2 text-center text-xs break-all",
+                            isDraggable ? "cursor-grab" : "",
+                            editContext.selectedForInsertion === option.typeId
+                              ? "border-sky-500"
+                              : "",
+                          )}
+                          key={option.typeId}
+                          data-testid="insert-component-option"
+                        >
+                          {option.svg && (
+                            <div
+                              className="h-8 w-8"
+                              dangerouslySetInnerHTML={{ __html: option.svg }}
+                            ></div>
+                          )}
+                          {!option.svg && (
+                            <img
+                              src={getAbsoluteIconUrl(option.icon)}
+                              width="32"
+                              height="32"
+                            ></img>
+                          )}
 
-                        <div className="text-xs">
-                          {option.name
-                            .split(new RegExp(`(${filter})`, "i"))
-                            .map((part: string, i: number) =>
-                              part.toLowerCase() === filter.toLowerCase() &&
-                              part ? (
-                                <u className="font-bold" key={i}>
-                                  {part}
-                                </u>
-                              ) : (
-                                part && <span key={i}>{part}</span>
-                              )
-                            )}
-                        </div>
+                          <div className="text-xs">
+                            {option.name
+                              .split(new RegExp(`(${filter})`, "i"))
+                              .map((part: string, i: number) =>
+                                part.toLowerCase() === filter.toLowerCase() &&
+                                part ? (
+                                  <u className="font-bold" key={i}>
+                                    {part}
+                                  </u>
+                                ) : (
+                                  part && <span key={i}>{part}</span>
+                                ),
+                              )}
+                          </div>
 
-                        {option.isInvalid && (
-                          <i
-                            className="pi pi-exclamation-triangle text-red-500 absolute top-0 right-0"
-                            title={option.message}
-                          />
-                        )}
-                      </div>
-                    );
-                  })}
+                          {option.isInvalid && (
+                            <i
+                              className="pi pi-exclamation-triangle absolute top-0 right-0 text-red-500"
+                              title={option.message}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
+        </div>
       </div>
     </div>
   );

package/src/editor/sidebar/ComponentTree.tsx

@@ -177,7 +177,7 @@ export function ComponentTree({}) {
       });
     }
 
-    if (c.datasourceItem && c.datasourceItem?.id !== c.id) {
+    if (c.isShared) {
       node.tags!.push({
         id: "linked",
         severity: "warning",
@@ -274,13 +274,17 @@ export function ComponentTree({}) {
   };
 
   // Handle tree context menu
-  const handleTreeContextMenu = (item: any, event: React.MouseEvent) => {
-    const componentId = nodeDictionary[item.id]?.componentId;
+  const handleTreeContextMenu = (
+    node: TreeNode<Component>,
+    event: React.MouseEvent,
+  ) => {
+    const componentId = nodeDictionary[node.key]?.componentId;
 
     let selectedComponentIds = editContext?.selection || [];
 
     if (componentId) {
       if (selectedComponentIds.indexOf(componentId) < 0) {
+        console.log("selecting", componentId);
         editContextRef.current?.select([componentId]);
         selectedComponentIds = [componentId];
       }
@@ -297,8 +301,8 @@ export function ComponentTree({}) {
       .map((key) => nodeDictionary[key]!.data)
       .filter(isDefinedEntity);
 
-    if (selectedEntities.length === 0 && item.data) {
-      selectedEntities = [item.data];
+    if (selectedEntities.length === 0 && nodeDictionary[node.key]?.data) {
+      selectedEntities = [nodeDictionary[node.key]!.data as Component];
     }
 
     let commands = getComponentCommands(
@@ -402,6 +406,7 @@ export function ComponentTree({}) {
         expandedKeys={expandedItems}
         onToggleExpand={handleToggle}
         onSelect={handleTreeSelection}
+        onContextMenu={handleTreeContextMenu}
         enableDragAndDrop={true}
         onDragOverZone={(parent, index, event) =>
           handleDragOverZone(parent as CustomTreeNode | null, index, event)

package/src/editor/sidebar/MainContentTree.tsx

@@ -78,7 +78,7 @@ export function MainContentTree({
               insertOptions?.find(
                 (insertOption: InsertOption) =>
                   insertOption.typeId == x.templateId ||
-                  insertOption.compatibleTemplates?.find(
+                  insertOption.compatibleTypeIds?.find(
                     (compatibleTemplate) => compatibleTemplate == x.templateId,
                   ) !== undefined,
               ) !== undefined