@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/reviews/DiffView.tsx

@@ -1,109 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,280 +0,0 @@
-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>
-  );
-}