@alpaca-editor/core 1.0.0

package/src/editor/page-viewer/pageViewContext.ts

@@ -0,0 +1,186 @@
+import { useEffect, useRef, useState } from "react";
+
+import { ItemDescriptor, Page, PageSkeleton } from "../pageModel";
+import { usePageModel } from "../client/pageModelBuilder";
+import { ItemsRepository } from "../client/itemsRepository";
+import { EditorConfiguration } from "../../config/types";
+import { useDebouncedCallback } from "use-debounce";
+import { resolvePageAndSite } from "../services/contentService";
+import { Site } from "../../types";
+
+export type PageViewContext = {
+  device: string;
+  setDevice: React.Dispatch<React.SetStateAction<string>>;
+  zoom: number;
+  setZoom: React.Dispatch<React.SetStateAction<number>>;
+  scroll: number;
+  setScroll: React.Dispatch<React.SetStateAction<number>>;
+  fullscreen: boolean;
+  setFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
+  editorIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  deviceWidth?: number;
+  deviceHeight?: number;
+  setDeviceWidth: React.Dispatch<React.SetStateAction<number | undefined>>;
+  setDeviceHeight: React.Dispatch<React.SetStateAction<number | undefined>>;
+  lockHeight: boolean;
+  setLockHeight: React.Dispatch<React.SetStateAction<boolean>>;
+  rotate: boolean;
+  setRotate: React.Dispatch<React.SetStateAction<boolean>>;
+  page?: Page;
+  pageItemDescriptor?: ItemDescriptor;
+  setPageSkeleton: React.Dispatch<
+    React.SetStateAction<PageSkeleton | undefined>
+  >;
+  viewport: { width: number; height: number };
+  setWorkaround: React.Dispatch<React.SetStateAction<boolean>>;
+  isHeadless: boolean;
+  site?: Site;
+};
+
+export function usePageViewContext({
+  pageItemDescriptor,
+  itemsRepository,
+  configuration,
+}: {
+  pageItemDescriptor?: ItemDescriptor;
+  itemsRepository?: ItemsRepository;
+  configuration?: EditorConfiguration;
+}) {
+  const [device, setDevice] = useState<string>("desktop");
+  const [zoom, setZoom] = useState<number>(1);
+  const [scroll, setScroll] = useState<number>(0);
+  const [fullscreen, setFullscreen] = useState<boolean>(false);
+  const editorIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [deviceWidth, setDeviceWidth] = useState<number>();
+  const [deviceHeight, setDeviceHeight] = useState<number>();
+  const [lockHeight, setLockHeight] = useState(true);
+  const [rotate, setRotate] = useState(false);
+  const [viewportRect, setViewportRect] = useState({ width: 0, height: 0 });
+  const [workaround, setWorkaround] = useState(false);
+  const [site, setSite] = useState<Site>();
+  const [resolvedPageItemDescriptor, setResolvedPageItemDescriptor] =
+    useState<ItemDescriptor>();
+  const [isHeadless, setIsHeadless] = useState(false);
+
+  const { page, setPageSkeleton } = usePageModel(
+    itemsRepository,
+    pageItemDescriptor
+  );
+
+  useEffect(() => {
+    var deviceConfig = configuration?.devices.find((x) => x.name === device);
+
+    let width = deviceConfig?.width;
+    let height = deviceConfig?.height;
+
+    if (rotate) {
+      [width, height] = [height, width];
+    }
+
+    if (device) {
+      setDeviceWidth(width);
+      setDeviceHeight(lockHeight ? height : undefined);
+    }
+  }, [rotate, device, lockHeight, configuration]);
+
+  useEffect(() => {
+    updateViewportRect();
+  }, [fullscreen, device, deviceHeight, deviceWidth]);
+
+  const updateViewportRectDebounced = useDebouncedCallback(() => {
+    updateViewportRect();
+  }, 100);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      updateViewportRectDebounced();
+    });
+
+    if (editorIframeRef.current) {
+      resizeObserver.observe(editorIframeRef.current);
+    }
+
+    // Cleanup function
+    return () => {
+      if (editorIframeRef.current) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [editorIframeRef.current, workaround]);
+
+  useEffect(() => {
+    if (!pageItemDescriptor) return;
+
+    async function resolvePage() {
+      if (!pageItemDescriptor) {
+        setSite(undefined);
+        setResolvedPageItemDescriptor(undefined);
+        setPageSkeleton(undefined);
+        return;
+      }
+      if (!itemsRepository) return;
+
+      const item = await itemsRepository.getItem(pageItemDescriptor);
+      if (!item?.hasLayout) {
+        setSite(undefined);
+        setResolvedPageItemDescriptor(undefined);
+        setPageSkeleton(undefined);
+        return;
+      }
+
+      console.log(
+        "resolve page",
+        pageItemDescriptor.id,
+        pageItemDescriptor.language,
+        pageItemDescriptor.version
+      );
+
+      const result = await resolvePageAndSite(
+        pageItemDescriptor.id,
+        pageItemDescriptor.language,
+        pageItemDescriptor.version
+      );
+
+      if (result) {
+        setIsHeadless(result.isHeadless);
+        setSite(result.site);
+        setResolvedPageItemDescriptor(result.pageItem);
+      }
+    }
+    resolvePage();
+  }, [pageItemDescriptor]);
+
+  function updateViewportRect() {
+    const rect = editorIframeRef.current?.getBoundingClientRect();
+    if (rect) setViewportRect({ width: rect.width, height: rect.height });
+  }
+
+  const pageViewContext: PageViewContext = {
+    device,
+    setDevice,
+    deviceWidth,
+    setDeviceWidth,
+    deviceHeight,
+    setDeviceHeight,
+    lockHeight,
+    setLockHeight,
+    scroll,
+    setScroll,
+    zoom,
+    setZoom,
+    fullscreen,
+    setFullscreen,
+    editorIframeRef,
+    rotate,
+    setRotate,
+    page,
+    setPageSkeleton,
+    viewport: viewportRect,
+    pageItemDescriptor: resolvedPageItemDescriptor,
+    setWorkaround,
+    isHeadless,
+    site,
+  };
+
+  return pageViewContext;
+}

package/src/editor/pageModel.ts

@@ -0,0 +1,191 @@
+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;
+};
+
+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;
+};
+
+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 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;
+  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 & FullItem;
+
+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;
+};
+
+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,265 @@
+import { Comment as CommentType } from "../../types";
+import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import {
+  createOrUpdateComment,
+  deleteComment,
+  resolveComment,
+} from "../services/reviewsService";
+import { Button } from "primereact/button";
+import { formatDate } from "../utils";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { ProgressSpinner } from "primereact/progressspinner";
+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">
+        {showItemName && (
+          <div className="text-2xs text-gray-500 ">{comment.itemName}</div>
+        )}
+
+        {showFieldName && showItemName && (
+          <div className="text-2xs text-gray-500 mx-2">&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 renderHeader = () => {
+    const overlayPanelRef = useRef<OverlayPanel>(null);
+    return (
+      <>
+        <div className="flex justify-between items-start mb-3">
+          <div>
+            <div
+              className="text-xs text-gray-900 font-bold"
+              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) => {
+                  overlayPanelRef.current?.toggle(e);
+                }}
+              />
+            )}
+            <OverlayPanel ref={overlayPanelRef}>
+              <Button
+                className="m-2"
+                icon="pi pi-trash"
+                label="Delete"
+                onClick={async () => {
+                  await deleteComment(comment);
+                }}
+              />
+            </OverlayPanel>
+            {canResolve && !comment.isResolved && (
+              <SimpleIconButton
+                icon="pi pi-check"
+                label="Resolve"
+                onClick={async () => {
+                  await resolveComment(comment);
+                }}
+              />
+            )}
+            {comment.isResolved && (
+              <i
+                className="pi pi-check text-green-500 text-xs px-1"
+                style={{ fontWeight: "bold" }}
+                title={
+                  "Resolved by " +
+                  comment.resolvedBy +
+                  " (" +
+                  formatDate(new Date(comment.resolvedDate!)) +
+                  ")"
+                }
+              ></i>
+            )}
+            {canResolve && !comment.isResolved && (
+              <SimpleIconButton
+                icon="pi pi-sparkles"
+                label="AI"
+                onClick={async (event) => {
+                  console.log("showing ai popup", comment.text);
+                  editContext?.showAiPopup(event as any, {
+                    initialPrompt:
+                      'Please help me resolve this comment: "' +
+                      comment.text +
+                      '"',
+                    hiddenSystemPrompt:
+                      "Please make suggestions how to resolve a review comment. Ask the user whether you should apply the suggested changes.",
+                  });
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  return !isEditing ? (
+    <div
+      ref={ref}
+      key={comment.id}
+      className={`bg-white rounded-lg p-3 mb-3 shadow-sm cursor-pointer hover:bg-gray-50 border-2 ${
+        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-gray-700 text-sm whitespace-pre-wrap">
+        {comment.text}
+      </div>
+      {renderContextInfo()}
+    </div>
+  ) : (
+    <div
+      key="new-comment"
+      className="bg-white rounded-lg p-3 mb-3 shadow-sm"
+    >
+      {renderHeader()}
+      <textarea
+        className="w-full min-h-[100px] p-2 text-sm border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2"
+        placeholder="Add a comment..."
+        value={commentText}
+        onChange={async (e) => {
+          if (!editContext) return;
+          setCommentText(e.target.value);
+
+          if (editContext?.setComments) {
+            editContext.setComments([...editContext.comments]);
+          }
+        }}
+        autoFocus
+      />
+      {isSaving && (
+        <div className="flex justify-end gap-2 mt-1">
+          <div className="text-xs text-gray-500 flex items-center gap-2">
+            <ProgressSpinner className="w-4 h-4" />
+            Saving...
+          </div>
+        </div>
+      )}
+      {!isSaving && (
+        <div className="flex justify-end gap-2 mt-1">
+          <Button
+            severity="secondary"
+            onClick={() => {
+              if (comment.isNew) {
+                if (editContext?.setComments) {
+                  editContext.setComments([
+                    ...editContext.comments.filter((c) => c.id !== comment.id),
+                  ]);
+                }
+              } else {
+                setIsEditing(false);
+              }
+            }}
+            label="Cancel"
+          />
+
+          <Button
+            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);
+            }}
+            label={comment.isNew ? "Comment" : "Save"}
+          />
+        </div>
+      )}
+      {renderContextInfo()}
+    </div>
+  );
+}