@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/reviews/DiffView.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { diffWords, diffChars } from "diff";
+
+interface DiffViewProps {
+  oldText: string;
+  newText: string;
+  /** If true, use a word-based diff; otherwise, use a character-based diff */
+  useWordDiff?: boolean;
+  /** If true, strip HTML and ignore formatting differences */
+  ignoreFormatting?: boolean;
+  /** If true, clip long unchanged segments */
+  clipUnchanged?: boolean;
+  /** Threshold length for unchanged segments before clipping */
+  clipThreshold?: number;
+  /** How many characters to show at the start and end of a clipped segment */
+  clipContext?: number;
+}
+
+function stripHtml(html: string): string {
+  const temp = document.createElement("div");
+  temp.innerHTML = html;
+  return temp.textContent || temp.innerText || "";
+}
+
+/**
+ * Clips a long string by preserving the first and last `contextChars` characters,
+ * inserting an ellipsis in between.
+ */
+function clipPartValue(value: string, contextChars: number): string {
+  const prefix = value.substring(0, contextChars);
+  const suffix = value.substring(value.length - contextChars);
+  return `${prefix}…${suffix}`;
+}
+
+export const DiffView: React.FC<DiffViewProps> = ({
+  oldText,
+  newText,
+  useWordDiff = true,
+  ignoreFormatting = false,
+  clipUnchanged = false,
+  clipThreshold = 50,
+  clipContext = 10,
+}) => {
+  // Normalize text if styling should be ignored.
+  const normalizedOldText = ignoreFormatting ? stripHtml(oldText) : oldText;
+  const normalizedNewText = ignoreFormatting ? stripHtml(newText) : newText;
+
+  // Choose diffing algorithm.
+  const diff = useWordDiff
+    ? diffWords(normalizedOldText, normalizedNewText)
+    : diffChars(normalizedOldText, normalizedNewText);
+
+  // Heuristic: if the diff results in just one removed and one added segment,
+  // assume a full replacement and show both values in full.
+  if (
+    diff.length === 2 &&
+    diff[0]?.removed &&
+    diff[1]?.added &&
+    diff[0]?.value.trim().length > 0 &&
+    diff[1]?.value.trim().length > 0
+  ) {
+    return (
+      <div style={{ fontFamily: "monospace", fontSize: "14px" }}>
+        <div style={{ marginBottom: "0.5rem" }}>
+          <strong>Old:</strong>{" "}
+          <span style={{ color: "red", textDecoration: "line-through" }}>
+            {normalizedOldText}
+          </span>
+        </div>
+        <div>
+          <strong>New:</strong>{" "}
+          <span style={{ color: "green" }}>{normalizedNewText}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ fontFamily: "monospace", fontSize: "14px" }}>
+      {diff.map((part, index) => {
+        let style: React.CSSProperties = {};
+        if (part.added) {
+          style = { color: "green" };
+        } else if (part.removed) {
+          style = { color: "red", textDecoration: "line-through" };
+        } else {
+          style = { color: "gray" };
+        }
+
+        // For unchanged segments, if clipping is enabled and the segment is too long,
+        // show part of it before and after an ellipsis.
+        let displayValue = part.value;
+        if (
+          !part.added &&
+          !part.removed &&
+          clipUnchanged &&
+          part.value.length > clipThreshold
+        ) {
+          displayValue = clipPartValue(part.value, clipContext);
+        }
+        return (
+          <span key={index} style={style}>
+            {displayValue}
+          </span>
+        );
+      })}
+    </div>
+  );
+};

package/src/editor/reviews/PreviewInfo.tsx

@@ -0,0 +1,35 @@
+import { useEditContext } from "../../client-components";
+import { formatDate } from "../utils";
+
+export function PreviewInfo() {
+  const editContext = useEditContext();
+  if (!editContext) return null;
+  const review = editContext.reviews.reviews.find(
+    (x) => x.reviewerEmail === editContext.user?.email
+  );
+
+  return (
+    <div className="flex gap-3 items-center">
+      <div className="text-white">
+        Welcome to your page <b>preview</b>, {editContext.user?.displayName}!
+        <div className="text-gray-300 text-xs">
+          {editContext.contentEditorItem?.path}{" "}
+          {editContext.contentEditorItem?.language}{" "}
+          {editContext.contentEditorItem?.version}
+        </div>
+      </div>
+      {review?.approvalDate && (
+        <i
+          className="pi pi-check text-green-400 text-2xl font-bold"
+          title={"Approved " + formatDate(new Date(review.approvalDate))}
+        ></i>
+      )}
+      {review?.rejectedDate && (
+        <i
+          className="pi pi-times text-red-400 text-2xl font-bold"
+          title={"Rejected " + formatDate(new Date(review.rejectedDate))}
+        ></i>
+      )}
+    </div>
+  );
+}

package/src/editor/reviews/Reviews.tsx

@@ -0,0 +1,280 @@
+import { SimpleToolbar } from "../ui/SimpleToolbar";
+import { useEffect, useRef, useState } from "react";
+import { SimpleTable } from "../ui/SimpleTable";
+import { Reviewer } from "../../types";
+import { Review } from "../../types";
+import { inviteReviewer, addReview } from "../services/reviewsService";
+import { useEditContext } from "../client/editContext";
+import { Checkbox } from "primereact/checkbox";
+import { formatDate } from "../utils";
+import { InputText } from "primereact/inputtext";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Button } from "primereact/button";
+import uuid from "react-uuid";
+
+type ReviewData = {
+  review: Review;
+  checked: boolean;
+  updating?: boolean;
+  error?: string;
+};
+
+export function Reviews() {
+  const [reviewData, setReviewData] = useState<ReviewData[]>([]);
+  const [newReviewer, setNewReviewer] = useState<Reviewer>({
+    email: "",
+    name: "",
+  });
+  const overlayPanelRef = useRef<OverlayPanel>(null);
+
+  const editContext = useEditContext();
+
+  const [showErrors, setShowErrors] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+
+  useEffect(() => {
+    if (editContext?.reviews) {
+      setReviewData(
+        editContext.reviews.reviews.map((x) => ({
+          review: x,
+          checked: false,
+        }))
+      );
+    }
+  }, [editContext?.reviews]);
+
+  // Simple email validation function
+  const isValidEmail = (email: string): boolean => {
+    // This regular expression is not perfect but works for basic validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const emailAlreadyExists = (email: string): boolean => {
+    return reviewData.some((x) => x.review?.reviewerEmail === email);
+  };
+
+  const getStatus = (reviewData?: ReviewData) => {
+    if (reviewData?.updating) {
+      return <i className="pi pi-spinner pi-spin" />;
+    }
+    if (reviewData?.error) {
+      return (
+        <div className="flex items-center gap-1">
+          <i className="pi pi-times text-red-500 " /> {reviewData.error}
+        </div>
+      );
+    }
+    const review = reviewData?.review;
+
+    if (review) {
+      if (review.approvalDate) {
+        return (
+          <div className="flex flex-row gap-1">
+            <i className="pi pi-check text-green-500 " />
+            Approved {formatDate(new Date(review.approvalDate))}
+          </div>
+        );
+      }
+      if (review.rejectedDate) {
+        return (
+          <div className="flex flex-row gap-1">
+            <i className="pi pi-times text-red-500 " />
+            Rejected {formatDate(new Date(review.rejectedDate))}
+          </div>
+        );
+      }
+      if (review.invitationSentDate) {
+        return (
+          "Invitation Sent " + formatDate(new Date(review.invitationSentDate))
+        );
+      }
+    }
+    return "Not yet invited";
+  };
+
+  const sendInvitations = () => {
+    setShowErrors(true);
+    const invalidReviewers = reviewData.filter(
+      (x) =>
+        x.checked &&
+        (!x.review?.reviewerEmail || !isValidEmail(x.review?.reviewerEmail))
+    );
+    if (invalidReviewers.length > 0) {
+      return;
+    }
+
+    reviewData.forEach(async (x) => {
+      if (!editContext?.currentItemDescriptor) return;
+      if (x.checked) {
+        x.updating = true;
+        setReviewData([...reviewData]);
+        const result = await inviteReviewer(x.review);
+        if (result.response.status !== 200) {
+          x.error = "Error inviting reviewer";
+        }
+        x.updating = false;
+        x.updating = false;
+        setReviewData([...reviewData]);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <SimpleToolbar>
+        <SimpleIconButton
+          label="Add Reviewer"
+          icon="pi pi-plus"
+          onClick={(x) => {
+            overlayPanelRef.current?.toggle(x);
+            setTimeout(() => {
+              document.getElementById("name")?.focus();
+            }, 100);
+          }}
+        />
+        <SimpleIconButton
+          label="Send Invitations"
+          icon="pi pi-send"
+          disabled={!reviewData.some((x) => x.checked)}
+          onClick={sendInvitations}
+        />
+      </SimpleToolbar>
+      <OverlayPanel ref={overlayPanelRef}>
+        <div className="p-2 text-xs flex flex-col gap-2">
+          <div className="flex flex-col gap-2">
+            <label htmlFor="name">Name</label>
+
+            <InputText
+              id="name"
+              className="w-full"
+              value={newReviewer?.name}
+              onChange={(e) => {
+                setNewReviewer((x) => ({
+                  ...x!,
+                  name: e.target.value,
+                }));
+              }}
+              autoFocus
+            />
+            {showErrors && !newReviewer?.name && (
+              <small style={{ color: "red" }}>Name is required</small>
+            )}
+            <div className="flex flex-col gap-2">
+              <label htmlFor="email">Email</label>
+              <InputText
+                id="email"
+                className="w-full"
+                value={newReviewer?.email}
+                onChange={(e) => {
+                  setNewReviewer((x) => ({
+                    ...x!,
+                    email: e.target.value,
+                  }));
+                }}
+              />
+              {showErrors && !isValidEmail(newReviewer.email) && (
+                <small style={{ color: "red" }}>
+                  Not a valid email address
+                </small>
+              )}
+              {showErrors && emailAlreadyExists(newReviewer.email) && (
+                <small style={{ color: "red" }}>Email already exists</small>
+              )}
+            </div>
+
+            <Button
+              label="Add Reviewer"
+              disabled={waiting}
+              icon="pi pi-plus"
+              onClick={async () => {
+                if (!editContext?.contentEditorItem) return;
+                setShowErrors(true);
+                if (emailAlreadyExists(newReviewer.email)) {
+                  return;
+                }
+                if (!isValidEmail(newReviewer.email) || !newReviewer.name) {
+                  return;
+                }
+                setWaiting(true);
+                await addReview({
+                  id: uuid(),
+                  reviewerName: newReviewer!.name,
+                  reviewerEmail: newReviewer!.email,
+                  itemId: editContext.contentEditorItem.id,
+                  language: editContext.contentEditorItem.language,
+                  version: editContext.contentEditorItem.version,
+                });
+
+                editContext.reviews.loadReviews();
+                overlayPanelRef.current?.hide();
+                setNewReviewer({
+                  email: "",
+                  name: "",
+                });
+
+                setWaiting(false);
+              }}
+            />
+          </div>
+        </div>
+      </OverlayPanel>
+      <div className="flex-1 relative">
+        <div className="absolute inset-0 overflow-auto">
+          <SimpleTable
+            columns={[
+              {
+                header: (
+                  <Checkbox
+                    checked={reviewData.every((x) => x.checked)}
+                    onChange={(e) => {
+                      setReviewData((reviews) =>
+                        reviews.map((x) => ({
+                          ...x,
+                          checked: e.checked ?? false,
+                        }))
+                      );
+                    }}
+                  />
+                ),
+                body: (x) => (
+                  <Checkbox
+                    checked={x.checked}
+                    onChange={(e) => {
+                      setReviewData((reviews) => {
+                        // It’s safer to update by index or assign an id to each reviewer.
+                        // For brevity, we’re using the email to locate the reviewer.
+                        const index = reviews.findIndex(
+                          (y) =>
+                            y.review?.reviewerEmail === x.review?.reviewerEmail
+                        );
+                        if (index !== -1) {
+                          reviews[index]!.checked = e.checked ?? false;
+                        }
+                        return [...reviews];
+                      });
+                    }}
+                  />
+                ),
+              },
+              {
+                header: "Name",
+                body: (x) => x.review?.reviewerName,
+              },
+              {
+                header: "Email",
+                body: (x) => x.review?.reviewerEmail,
+              },
+              {
+                header: "Status",
+                body: (z) => getStatus(z),
+              },
+            ]}
+            items={reviewData}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}