@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/pageModel.ts

@@ -1,208 +0,0 @@
-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 FieldButton = {
-  id: string;
-  label: string;
-  description: string;
-  action?: string;
-  icon?: string;
-  isGenerator: boolean;
-};
-
-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

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

@@ -1,308 +0,0 @@
-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";
-
-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">
-          <Button
-            variant="outline"
-            onClick={() => {
-              if (comment.isNew) {
-                if (editContext?.setComments) {
-                  editContext.setComments([
-                    ...editContext.comments.filter((c) => c.id !== comment.id),
-                  ]);
-                }
-              } else {
-                setIsEditing(false);
-              }
-            }}
-          >
-            Cancel
-          </Button>
-
-          <Button
-            className="tour-submit-comment-button"
-            variant="outline"
-            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"}
-          </Button>
-        </div>
-      )}
-      {renderContextInfo()}
-    </div>
-  );
-}

package/src/editor/reviews/Comments.tsx

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