@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/pageModel.ts

@@ -0,0 +1,220 @@
+import { InsertOption } from "../types";
+
+export type PageSkeleton = {
+  editRevision: string;
+  item: ItemDescriptor;
+  rootComponent: ComponentSkeleton;
+};
+
+export type PlaceholderSkeleton = {
+  name: string;
+  key: string;
+  description: string;
+  components: ComponentSkeleton[];
+  parentComponent: ComponentSkeleton;
+};
+
+export type ComponentSkeleton = {
+  id: string;
+  name: string;
+  type: string;
+  typeId: string;
+  items: RenderedItemSkeleton[];
+  placeholders: PlaceholderSkeleton[];
+  datasourceItem?: RenderedItemSkeleton;
+  isRemovedFromMasterLanguage?: boolean;
+  isInheritedFromMasterLanguage?: boolean;
+  visible?: boolean;
+  parentPlaceholder?: PlaceholderSkeleton;
+  renderedDictionaryKeys: string[];
+  layoutId?: string;
+  editorFields: EditorFields;
+  firstDOMElement?: Element;
+  lastDOMElement?: Element;
+};
+
+export type RenderedItemSkeleton = ItemDescriptor & {
+  renderedFieldIds: string[];
+};
+
+export type ItemDescriptor = {
+  id: string;
+  language: string;
+  version: number;
+  name?: string;
+};
+
+export type Field = {
+  id: string;
+  value: unknown;
+  rawValue?: string | null;
+  name?: string;
+  type: string;
+  descriptor: FieldDescriptor;
+  displayName?: string;
+  sortOrder?: number;
+  sectionSortOrder?: number;
+  customProperties?: any;
+  canWrite?: boolean;
+  hasLock?: boolean;
+  canLock?: boolean;
+  lockedBy?: LockSession;
+  section?: string;
+  isFallback?: boolean;
+  isStandardValue?: boolean;
+  isShared?: boolean;
+  sourceItems: ItemRef[];
+  buttons?: FieldButton[];
+  fallbackChain?: FieldDescriptor[];
+  isHistoric?: boolean; // true if the value is from the fields history
+};
+
+export type ItemRef = {
+  id: string;
+  name?: string;
+};
+
+export type FieldButtonParameter = {
+  id: string;
+  label: string;
+  placeholder?: string;
+  type?: "text" | "textarea" | "number" | "select";
+  required?: boolean;
+  defaultValue?: string;
+  options?: { value: string; label: string }[]; // for select type
+  rows?: number; // for textarea type
+};
+
+export type FieldButton = {
+  id: string;
+  label: string;
+  description: string;
+  action?: string;
+  icon?: string;
+  isGenerator: boolean;
+  parameters?: FieldButtonParameter[];
+};
+
+export type LockSession = {
+  sessionId: string;
+  name: string;
+};
+
+export type FieldDescriptor = {
+  item: ItemDescriptor;
+  fieldId: string;
+};
+
+export type Language = {
+  name: string;
+  versions: number;
+  icon: string;
+  languageCode: string;
+};
+
+export type Version = {
+  version: number;
+  updated: Date;
+  updatedBy: string;
+};
+
+export type Timings = {
+  [key: string]: number;
+};
+
+export type ItemStub = ItemDescriptor & {
+  name: string;
+  templateId: string;
+  templateName: string;
+  icon: string;
+  path: string;
+};
+
+export type FullItem = ItemDescriptor & {
+  descriptor: ItemDescriptor;
+  name: string;
+  templateId: string;
+  templateName: string;
+  icon: string;
+  largeIcon: string;
+  thumbnail: string;
+  path: string;
+  masterLanguages?: string[];
+  translations?: string[];
+  fields: Field[];
+  canWriteItem: boolean;
+  canWriteLanguage: boolean;
+  canWriteWorkflow: boolean;
+  canRename: boolean;
+  canDelete: boolean;
+  canCreate: boolean;
+  workflowState: string;
+  hasLock: boolean;
+  hasLayout: boolean;
+  idPath: string;
+  canLock: boolean;
+  lockedBy: string;
+  isInheritedFromMasterLanguage: boolean;
+  mainItemId?: string;
+  hasChildren: boolean;
+  parentId: string;
+  versions: number;
+};
+
+export type Page = {
+  editRevision: string;
+  item: FullItem;
+  rootComponent: Component;
+};
+
+export type RenderedItem = RenderedItemSkeleton & ItemStub;
+
+type EditorFields = {
+  [group: string]: {
+    addFields: string[];
+    removeFields: string[];
+  };
+};
+
+export type Component = {
+  id: string;
+  name: string;
+  type: string;
+  typeId: string;
+  items: RenderedItem[];
+  placeholders: Placeholder[];
+  datasourceItem?: RenderedItem;
+  isRemovedFromMasterLanguage?: boolean;
+  isInheritedFromMasterLanguage?: boolean;
+  visible?: boolean;
+  parentPlaceholder?: Placeholder;
+  renderedDictionaryKeys: string[];
+  isShared: boolean;
+  rendering?: RenderingReference;
+  layoutId?: string;
+  editorFields: EditorFields;
+  firstDOMElement?: Element;
+  lastDOMElement?: Element;
+  canBeMoved: boolean;
+  icon?: string;
+};
+
+export type Placeholder = {
+  key: string;
+  name: string;
+  description: string;
+  components: Component[];
+  parentComponent: Component;
+  canSynchronize: boolean;
+  insertOptions: InsertOption[];
+};
+
+export interface RenderingReference {
+  id: string;
+  revision: string;
+}
+
+export type ItemIdAndName = {
+  name: string;
+  id: string;
+};

package/src/editor/picture-shared.tsx

@@ -0,0 +1,53 @@
+import { PictureVariant } from "./fieldTypes";
+
+export type PictureParams = {
+  variant?: string;
+  aspectRatio?: number;
+  scales?: number[];
+  maxWidth?: number;
+  custom?: { [paramName: string]: string | number | boolean | undefined };
+};
+
+export type MediaPictureParams = {
+  default: PictureParams;
+  [mediaQuery: string]: PictureParams;
+};
+
+export function getRenderedPictureVariant(
+  params: PictureParams,
+  variants: PictureVariant[]
+) {
+  const variantName = params.variant ?? "auto";
+
+  const variant =
+    variantName.toLocaleLowerCase() === "auto" && params.aspectRatio
+      ? getBestMatchingVariant(variants, params.aspectRatio)
+      : variants.find(
+          (v) => v.name.toLowerCase() == variantName.toLowerCase()
+        ) ?? variants[0];
+  return variant;
+}
+
+export function getBestMatchingVariant(
+  variants: PictureVariant[],
+  aspectRatio: number | undefined
+) {
+  if (!aspectRatio)
+    return (
+      variants.find((v) => v.name.toLowerCase() == "default") ?? variants[0]
+    );
+
+  let minDistance = 1000000;
+  let bestMatch = undefined;
+  for (let i = 0; i < variants.length; i++) {
+    const variant = variants[i];
+    if (!variant.src) continue;
+    const distance = Math.abs(aspectRatio - variant.aspectRatio);
+    if (distance < minDistance) {
+      minDistance = distance;
+      bestMatch = variant;
+    }
+  }
+
+  return bestMatch ?? variants[0];
+}

package/src/editor/reviews/Comment.tsx

@@ -0,0 +1,308 @@
+import { Comment as CommentType } from "../../types";
+import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import {
+  createOrUpdateComment,
+  deleteComment,
+  resolveComment,
+  unresolveComment,
+} from "../services/reviewsService";
+import { Button } from "../../components/ui/button";
+import { formatDate } from "../utils";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { useDebouncedCallback } from "use-debounce";
+import { ActionButton } from "../../components/ActionButton";
+
+export function Comment({ comment }: { comment: CommentType }) {
+  const editContext = useEditContext();
+  const [commentText, setCommentText] = useState(comment.text);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (comment.isNew) setIsEditing(true);
+  }, [comment]);
+
+  const isSelected = comment.id === editContext?.selectedComment?.id;
+
+  useEffect(() => {
+    if (isSelected) {
+      if (ref.current) {
+        ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    }
+  }, [isSelected]);
+
+  const renderContextInfo = () => {
+    const showItemName =
+      comment.itemId && comment.mainItemId !== comment.itemId;
+
+    const showFieldName = comment.fieldId;
+
+    if (!showItemName && !showFieldName) return null;
+
+    return (
+      <div className="mt-3 flex items-center border-t pt-3 text-xs">
+        {showItemName && (
+          <div className="text-2xs text-gray-500">{comment.itemName}</div>
+        )}
+
+        {showFieldName && showItemName && (
+          <div className="text-2xs mx-2 text-gray-500">&gt;</div>
+        )}
+
+        {showFieldName && (
+          <div className="text-2xs text-gray-500">{comment.fieldName}</div>
+        )}
+      </div>
+    );
+  };
+
+  const canDelete =
+    !comment.isNew && comment.author === editContext?.user?.name;
+
+  const canEdit =
+    !comment.isNew &&
+    !comment.isResolved &&
+    comment.author === editContext?.user?.name;
+
+  const canResolve = !comment.isNew && !editContext?.readonly;
+
+  const getHiddenSystemPrompt = (comment: CommentType) => {
+    let prompt =
+      "Please make suggestions how to resolve a review comment. Ask the user whether you should apply the suggested changes.";
+    if (comment.itemId) {
+      prompt += "\n\nItemId: " + comment.itemId;
+    }
+    if (comment.itemName) {
+      prompt += "\n\nItem name: " + comment.itemName;
+    }
+    if (comment.itemId) {
+      prompt += "\n\nItemId: " + comment.itemId;
+    }
+    if (comment.fieldName) {
+      prompt += "\n\nField name: " + comment.fieldName;
+    }
+    return prompt;
+  };
+
+  const renderHeader = () => {
+    const overlayPanelRef = useRef<OverlayPanel>(null);
+    const deleteOverlayPanelRef = useRef<OverlayPanel>(null);
+    return (
+      <>
+        <div className="mb-3 flex items-start justify-between">
+          <div>
+            <div
+              className="text-xs font-bold text-gray-900"
+              title={comment.author}
+            >
+              {comment.authorDisplayName}
+            </div>
+            <div className="text-xs text-gray-500">
+              {comment.created ? formatDate(new Date(comment.created)) : ""}
+            </div>
+          </div>
+          <div className="text-xs text-gray-500">
+            {!isEditing && canEdit && (
+              <SimpleIconButton
+                icon="pi pi-pencil"
+                label="Edit"
+                onClick={() => setIsEditing(true)}
+              />
+            )}
+            {canDelete && (
+              <SimpleIconButton
+                icon="pi pi-trash"
+                label="Delete"
+                onClick={(e) => {
+                  deleteOverlayPanelRef.current?.toggle(e);
+                }}
+              />
+            )}
+            <OverlayPanel ref={deleteOverlayPanelRef}>
+              <Button
+                className="m-2"
+                variant="outline"
+                onClick={async () => {
+                  await deleteComment(comment);
+                }}
+              >
+                Delete
+              </Button>
+            </OverlayPanel>
+            {canResolve && !comment.isResolved && (
+              <SimpleIconButton
+                icon="pi pi-check"
+                label="Resolve"
+                onClick={async () => {
+                  await resolveComment(comment);
+                }}
+              />
+            )}
+            {comment.isResolved && (
+              <>
+                <i
+                  className="pi pi-check cursor-pointer px-1 text-xs text-green-500"
+                  style={{ fontWeight: "bold" }}
+                  title={
+                    "Resolved by " +
+                    comment.resolvedBy +
+                    " (" +
+                    formatDate(new Date(comment.resolvedDate!)) +
+                    ")"
+                  }
+                  onClick={(e) => {
+                    if (canResolve) {
+                      overlayPanelRef.current?.toggle(e);
+                    }
+                  }}
+                ></i>
+                <OverlayPanel ref={overlayPanelRef}>
+                  <Button
+                    className="m-2"
+                    variant="outline"
+                    onClick={async () => {
+                      await unresolveComment(comment);
+                    }}
+                  >
+                    Unresolve
+                  </Button>
+                </OverlayPanel>
+              </>
+            )}
+            {canResolve && !comment.isResolved && (
+              <SimpleIconButton
+                icon="pi pi-sparkles"
+                label="AI"
+                onClick={async (event) => {
+                  editContext?.showAiPopup(event as any, {
+                    initialPrompt:
+                      'Please help me resolve this comment: "' +
+                      comment.text +
+                      '"',
+                    hiddenSystemPrompt: getHiddenSystemPrompt(comment),
+                  });
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const setCommentsDebounced = useDebouncedCallback(() => {
+    if (!editContext?.setComments) return;
+    editContext.setComments([...editContext.comments]);
+  }, 300);
+
+  return !isEditing ? (
+    <div
+      ref={ref}
+      key={comment.id}
+      data-testid="comment"
+      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={() => {
+        editContext?.setSelectedComment(comment);
+        editContext?.setScrollIntoView(comment.itemId);
+        editContext?.select([comment.itemId]);
+        if (comment.fieldId) {
+          editContext?.setFocusedField(
+            {
+              fieldId: comment.fieldId,
+              item: {
+                id: comment.itemId,
+                language: comment.language,
+                version: comment.version,
+              },
+            },
+            false,
+          );
+        }
+      }}
+    >
+      {renderHeader()}
+      <div className="text-sm whitespace-pre-wrap text-gray-700">
+        {comment.text}
+      </div>
+      {renderContextInfo()}
+    </div>
+  ) : (
+    <div key="new-comment" className="mb-3 rounded-lg bg-white p-3 shadow-sm">
+      {renderHeader()}
+      <textarea
+        className="mt-2 min-h-[100px] w-full rounded border border-gray-200 p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+        placeholder="Add a comment..."
+        value={commentText}
+        onChange={async (e) => {
+          if (!editContext) return;
+          setCommentText(e.target.value);
+
+          setCommentsDebounced();
+        }}
+        autoFocus
+      />
+      {isSaving && (
+        <div className="mt-1 flex justify-end gap-2">
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <ProgressSpinner className="h-4 w-4" />
+            Saving...
+          </div>
+        </div>
+      )}
+      {!isSaving && (
+        <div className="mt-1 flex justify-end gap-2">
+          <ActionButton
+            variant="outline"
+            onClick={() => {
+              if (comment.isNew) {
+                if (editContext?.setComments) {
+                  editContext.setComments([
+                    ...editContext.comments.filter((c) => c.id !== comment.id),
+                  ]);
+                }
+              } else {
+                setIsEditing(false);
+              }
+            }}
+          >
+            Cancel
+          </ActionButton>
+
+          <ActionButton
+            className="tour-submit-comment-button"
+            onClick={async () => {
+              comment.text = commentText;
+              setIsSaving(true);
+              const item = await editContext?.itemsRepository?.getItem({
+                id: comment.itemId,
+                language: comment.language,
+                version: comment.version,
+              });
+
+              if (item) {
+                comment.fieldValue = item.fields.find(
+                  (f) => f.id === comment.fieldId,
+                )?.rawValue;
+              }
+
+              await createOrUpdateComment(comment);
+
+              setIsSaving(false);
+              setIsEditing(false);
+            }}
+          >
+            {comment.isNew ? "Comment" : "Save"}
+          </ActionButton>
+        </div>
+      )}
+      {renderContextInfo()}
+    </div>
+  );
+}

package/src/editor/reviews/Comments.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { Comment as CommentComponent } from "./Comment";
+import { SuggestedEditComponent } from "./SuggestedEdit";
+import { Comment as CommentType, SuggestedEdit } from "../../types";
+import { SimpleToolbar } from "../ui/SimpleToolbar";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import {
+  FileDiff,
+  SquarePen,
+  CheckCircle,
+  CheckCircle2,
+  MessageSquareMore,
+} from "lucide-react";
+
+// Define a union type for feedback items:
+export type FeedbackItem = CommentType | SuggestedEdit;
+
+export function Comments() {
+  const editContext = useEditContext();
+  const [feedbackItems, setFeedbackItems] = useState<FeedbackItem[]>([]);
+  const [hideAppliedSuggestions, setHideAppliedSuggestions] =
+    useState<boolean>(true);
+
+  useEffect(() => {
+    // Retrieve your list of comments (and ensure there's an array of suggested edits,
+    // for instance from your editContext)
+    const comments: CommentType[] = editContext?.comments || [];
+    const suggestedEdits: SuggestedEdit[] = editContext?.suggestedEdits || [];
+
+    // Filter out applied suggestions if hideAppliedSuggestions is true
+    const filteredSuggestedEdits = hideAppliedSuggestions
+      ? suggestedEdits.filter((edit) => edit.status !== "Applied")
+      : suggestedEdits;
+
+    const combined: FeedbackItem[] = [...comments, ...filteredSuggestedEdits];
+
+    // Sort by creation date. Adjust the comparison as needed if the date properties differ.
+    combined.sort(
+      (a, b) =>
+        new Date(b.created || "").getTime() -
+        new Date(a.created || "").getTime(),
+    );
+
+    setFeedbackItems(combined);
+  }, [editContext, hideAppliedSuggestions]);
+
+  return (
+    <div className="flex h-full flex-col">
+      <SimpleToolbar>
+        <SimpleIconButton
+          id="add-comment"
+          icon="pi pi-plus"
+          label="Add Comment"
+          onClick={() => {
+            editContext?.addComment();
+          }}
+        />
+        <SimpleIconButton
+          selected={editContext?.showComments}
+          icon={<MessageSquareMore size={16} className="p-0.5" />}
+          label="Show Comments"
+          onClick={() => {
+            editContext?.setShowComments((x) => !x);
+          }}
+        />
+        <SimpleIconButton
+          selected={editContext?.showSuggestedEdits}
+          icon={<SquarePen size={16} className="p-0.5" />}
+          label="Show Suggestions"
+          onClick={() => {
+            editContext?.setShowSuggestedEdits((x) => !x);
+          }}
+        />
+        {editContext?.showSuggestedEdits && (
+          <SimpleIconButton
+            selected={editContext?.showSuggestedEditsDiff}
+            icon={<FileDiff size={16} className="p-0.5" />}
+            label="Show Suggestions Diff"
+            onClick={() => {
+              editContext?.setShowSuggestedEditsDiff((x) => !x);
+            }}
+          />
+        )}
+        <SimpleIconButton
+          selected={hideAppliedSuggestions}
+          icon={
+            hideAppliedSuggestions ? (
+              <CheckCircle2 size={16} className="p-0.5" />
+            ) : (
+              <CheckCircle size={16} className="p-0.5" />
+            )
+          }
+          label={
+            hideAppliedSuggestions
+              ? "Show Applied Suggestions"
+              : "Hide Applied Suggestions"
+          }
+          onClick={() => {
+            setHideAppliedSuggestions((x) => !x);
+          }}
+        />
+      </SimpleToolbar>
+
+      <div className="flex-1 overflow-auto">
+        <div className="h-fill-available border-l border-gray-200 bg-gray-50 p-4">
+          {feedbackItems.map((item) => {
+            // Use a discriminator check. Here we assume suggested edits have the properties oldValue and newValue.
+            if ("oldValue" in item && "newValue" in item) {
+              return (
+                <SuggestedEditComponent
+                  key={item.id}
+                  edit={item as SuggestedEdit}
+                />
+              );
+            }
+            return (
+              <CommentComponent key={item.id} comment={item as CommentType} />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}