@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/media-selector/TreeSelector.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import ContentTree from "../ContentTree";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useEffect, useState } from "react";
+import { ItemTreeNodeData, getChildren } from "../services/contentService";
+import { useEditContext } from "../client/editContext";
+import { Button } from "primereact/button";
+import { executeSearch } from "../services/aiService";
+import { FileUpload } from "primereact/fileupload";
+
+import DialogButtons from "../ui/DialogButtons";
+import { ArrowDownIcon } from "../ui/Icons";
+import { Thumbnail, Thumbnails } from "./Thumbnails";
+import { Preview } from "./Preview";
+import { UploadZone } from "./UploadZone";
+import { AiImageSearchPrompt } from "./AiImageSearchPrompt";
+import { useDebouncedCallback } from "use-debounce";
+import { ProgressSpinner } from "primereact/progressspinner";
+
+type MediaHistoryEntry = {
+  name: string;
+  id: string;
+  idPath: string;
+};
+
+export const TreeSelector = ({
+  onHide,
+  onMediaSelected,
+  selectedIdPath,
+  language,
+  mode,
+}: {
+  onHide: () => void;
+  onMediaSelected: (mediaId: string) => void;
+  selectedIdPath?: string;
+  language: string;
+  mode: "image" | "video";
+}) => {
+  const [selectedFolderId, setSelectedFolderId] = useState<string>();
+  const [images, setImages] = useState<Thumbnail[]>();
+  const [selectedImage, setSelectedImage] = useState<Thumbnail>();
+  const [selectedImageId, setSelectedImageId] = useState<string>();
+  const [expandedIdPath, setExpandedIdPath] = useState<string>();
+  const [searchPrompt, setSearchPrompt] = useState<string>();
+  const [loadingThumbnails, setLoadingThumbnails] = useState(false);
+
+  const selection = selectedFolderId ? [selectedFolderId] : [];
+  const editContext = useEditContext();
+
+  const [history, setHistory] = useState<MediaHistoryEntry[]>(() => {
+    const savedHistory = localStorage.getItem("editor.mediahistory");
+    return savedHistory ? JSON.parse(savedHistory) : [];
+  });
+
+  useEffect(() => {
+    if (selectedIdPath) {
+      const path = selectedIdPath.split("/");
+      if (path.length > 1) {
+        setSelectedFolderId(path[path.length - 2]);
+        setSelectedImageId(
+          path[path.length - 1]?.toLowerCase().substring(1, 37),
+        );
+      }
+      setExpandedIdPath(selectedIdPath);
+    }
+    if (!selectedIdPath) {
+      setExpandedIdPath(history[0]?.idPath);
+      setSelectedFolderId(history[0]?.id);
+      setSelectedImageId(undefined);
+    }
+  }, [selectedIdPath]);
+
+  useEffect(() => {
+    loadThumbnailsAndSelectImage();
+  }, [selectedFolderId]);
+
+  const updateHistory = async () => {
+    if (!selectedFolderId) return;
+    const item = await editContext?.itemsRepository.getItem({
+      id: selectedFolderId,
+      language: "en",
+      version: 0,
+    });
+
+    setHistory((history: MediaHistoryEntry[]) => {
+      if (!item?.idPath || !item.name) return history;
+
+      const newEntry: MediaHistoryEntry = {
+        name: item.name,
+        id: item.id,
+        idPath: item?.idPath,
+      };
+
+      const newHistory = [
+        newEntry,
+        ...history.filter((x) => x.idPath !== newEntry.idPath).slice(0, 4),
+      ];
+
+      if (typeof window !== "undefined")
+        localStorage.setItem("editor.mediahistory", JSON.stringify(newHistory));
+
+      return newHistory;
+    });
+  };
+
+  async function loadThumbnailsAndSelectImage() {
+    setSelectedImage(undefined);
+    setImages([]);
+
+    const images = await loadThumbnails(selectedFolderId);
+
+    if (selectedImageId)
+      setSelectedImage(images?.find((x) => x.id === selectedImageId));
+  }
+
+  async function loadThumbnails(selectedFolderId: string | undefined) {
+    if (searchPrompt) {
+      await search(searchPrompt);
+      return;
+    }
+    if (!selectedFolderId) setImages([]);
+    else {
+      setLoadingThumbnails(true);
+      const children = await getChildren(
+        selectedFolderId,
+        editContext!.sessionId,
+        mode === "video"
+          ? [
+              "e76adbdf-87d1-4fcb-ba71-274f7dbf5670",
+              "374d3a99-c098-4cd2-8fbc-dc2d1ca1c904",
+            ]
+          : [
+              "C97BA923-8009-4858-BDD5-D8BE5FCCECF7",
+              "F1828A2C-7E5D-4BBD-98CA-320474871548",
+            ],
+        false,
+        language,
+      );
+      setImages(children);
+      setLoadingThumbnails(false);
+
+      return children;
+    }
+  }
+
+  const searchDebounced = useDebouncedCallback(async (searchPrompt: string) => {
+    return search(searchPrompt);
+  }, 300);
+
+  const search = async (searchPrompt: string) => {
+    if (!editContext) return;
+
+    setSearchPrompt(searchPrompt);
+    if (searchPrompt.length == 0) return;
+
+    setLoadingThumbnails(true);
+
+    const result = await executeSearch({
+      query: searchPrompt,
+      rootItemIds: selectedFolderId ? [selectedFolderId] : undefined,
+      editContext,
+      maxResults: 50,
+      index: "media",
+      skipValidation: true,
+    });
+    if (result.type == "success") {
+      setImages(result.data as Thumbnail[]);
+    } else {
+      editContext.showToast({
+        severity: "error",
+        summary: "Error searching",
+        detail: result.response.statusText,
+      });
+    }
+    setLoadingThumbnails(false);
+  };
+
+  return (
+    <>
+      <Splitter className="flex-1 border-0">
+        <SplitterPanel size={25} className="flex flex-col">
+          <div className="relative flex-1">
+            <div className="absolute inset-0 overflow-auto p-2">
+              <ContentTree
+                rootItemIds={["3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"]}
+                selectionMode="single"
+                selectedItemIds={selection}
+                templateIds={["FE5DD826-48C6-436D-B87A-7C4210C7413B"]}
+                onItemInserted={(item) => {
+                  setSelectedFolderId(item.id);
+                }}
+                expandIdPath={
+                  expandedIdPath ?? "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"
+                }
+                onSelectionChange={(selection) => {
+                  const selectedNode = selection[0] as ItemTreeNodeData;
+                  if (selectedNode) setSelectedFolderId(selectedNode.id);
+                  else setSelectedFolderId(undefined);
+                }}
+                language={language}
+              />
+            </div>
+          </div>
+          {history.length > 0 && (
+            <div>
+              <div className="my-2 flex items-center gap-1 border-t border-gray-300 px-2 pt-2 text-xs text-gray-500">
+                <ArrowDownIcon /> Recent Locations
+              </div>
+              {history.map((x) => (
+                <div
+                  key={x.idPath}
+                  className="mx-5 flex cursor-pointer gap-1 text-xs hover:text-gray-400"
+                  onClick={() => {
+                    setSelectedFolderId(x.id);
+                    setExpandedIdPath(x.idPath);
+                  }}
+                >
+                  {x.name}
+                </div>
+              ))}
+            </div>
+          )}
+        </SplitterPanel>
+        <SplitterPanel className="relative">
+          <div className="flex h-full w-full flex-col gap-2">
+            <AiImageSearchPrompt onSearchPromptChange={searchDebounced} />
+
+            <div className="relative flex-1">
+              {loadingThumbnails && (
+                <div className="flex h-full items-center">
+                  <ProgressSpinner style={{ width: "24px", height: "24px" }} />
+                </div>
+              )}
+              {!loadingThumbnails && (
+                <Thumbnails
+                  images={images ?? []}
+                  selectedImage={selectedImage}
+                  setSelectedImage={setSelectedImage}
+                  onMediaSelected={() => {
+                    updateHistory();
+                    onMediaSelected(selectedImage!.id);
+                  }}
+                  onHide={onHide}
+                />
+              )}
+            </div>
+            {selectedFolderId && (
+              <UploadZone
+                selectedFolderId={selectedFolderId}
+                uploadCompleted={() => {
+                  loadThumbnailsAndSelectImage();
+                }}
+              />
+            )}
+          </div>
+        </SplitterPanel>
+        <SplitterPanel className="relative">
+          <Preview selectedImage={selectedImage} />
+        </SplitterPanel>
+      </Splitter>
+      <DialogButtons>
+        <FileUpload
+          mode="basic"
+          // disabled={electedFolderId}
+          auto
+          chooseLabel="Upload"
+          accept="image/*,video/*"
+          url={"/alpaca/editor/upload?folder=" + selection[0]}
+          onUpload={async ({ xhr }) => {
+            updateHistory();
+            const response = JSON.parse(xhr.responseText);
+            const thumbs = await loadThumbnails(selectedFolderId);
+            setSelectedImage(thumbs?.find((x) => x.id === response.id));
+          }}
+        />
+
+        <Button
+          disabled={!selectedImage}
+          onClick={() => {
+            updateHistory();
+            onMediaSelected(selectedImage!.id);
+            onHide();
+          }}
+        >
+          Select
+        </Button>
+        <Button onClick={() => onHide()}>Cancel</Button>
+      </DialogButtons>
+    </>
+  );
+};

package/src/editor/media-selector/UploadZone.tsx

@@ -0,0 +1,137 @@
+import { classNames } from "primereact/utils";
+import { useCallback, useRef } from "react";
+
+import { useState } from "react";
+import { Spinner } from "../ui/Spinner";
+
+export function UploadZone({
+  selectedFolderId,
+  uploadCompleted,
+}: {
+  selectedFolderId: string | undefined;
+  uploadCompleted: () => void;
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const dragZoneRef = useRef<HTMLDivElement>(null);
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (dragZoneRef.current === e.target) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (dragZoneRef.current?.contains(e.target as Node)) {
+      return;
+    }
+
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) {
+        onFilesDropped(files);
+      }
+    },
+    [selectedFolderId]
+  );
+
+  const onFilesDropped = useCallback(
+    async (files: File[]) => {
+      const formData = new FormData();
+      files.forEach((file, index) => {
+        formData.append("file" + index, file);
+      });
+
+      try {
+        setIsUploading(true);
+        const response = await fetch(
+          "/alpaca/editor/upload?folder=" + selectedFolderId,
+          {
+            method: "POST",
+            body: formData,
+          }
+        );
+
+        setIsUploading(false);
+        if (!response.ok) {
+          throw new Error("Upload failed");
+        }
+
+        uploadCompleted();
+      } catch (error) {
+        console.error("Error uploading files:", error);
+      }
+    },
+    [selectedFolderId]
+  );
+
+  if (isUploading) {
+    return (
+      <div className="p-4 border-2 border-dashed rounded-lg items-center justify-center gap-2 text-gray-500 text-sm flex ">
+        <Spinner size="2xl" /> Uploading...
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        ref={dragZoneRef}
+        className={classNames(
+          "p-4 border-2 border-dashed rounded-lg flex flex-col items-center justify-center gap-2",
+          isDragging
+            ? "border-blue-400 bg-blue-50"
+            : "border-gray-300 hover:border-blue-300 hover:bg-gray-50"
+        )}
+        onDragOverCapture={handleDragOver}
+        onDragEnterCapture={handleDragEnter}
+        onDragLeaveCapture={handleDragLeave}
+        onDropCapture={handleDrop}
+        onClick={() => {
+          const fileInput = document.createElement("input");
+          fileInput.type = "file";
+          fileInput.multiple = true;
+          fileInput.accept = "image/*,video/*";
+          fileInput.onchange = (e) => {
+            const files = Array.from(
+              (e.target as HTMLInputElement).files || []
+            );
+            if (files.length > 0) {
+              onFilesDropped(files);
+            }
+          };
+          fileInput.click();
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <i className="pi pi-upload text-gray-400" />
+          <span className="text-gray-600">
+            {isDragging ? "Drop files here" : "Drag and drop files here"}
+          </span>
+        </div>
+      </div>
+
+      {isDragging && (
+        <div className="absolute inset-0 border-2 border-dashed border-blue-400 pointer-events-none" />
+      )}
+    </>
+  );
+}

package/src/editor/media-selector/index.ts

@@ -0,0 +1,8 @@
+export { Thumbnails, type Thumbnail } from "./Thumbnails";
+export { MediaFolderBrowser } from "./MediaFolderBrowser";
+export { TreeSelector } from "./TreeSelector";
+export { Preview } from "./Preview";
+export { UploadZone } from "./UploadZone";
+export { AiImageSearch } from "./AiImageSearch";
+export { AiImageSearchPrompt } from "./AiImageSearchPrompt";
+export { MediaSelector, type MediaSelectorMode } from "./MediaSelector";

package/src/editor/menubar/ActionsMenu.tsx

@@ -0,0 +1,94 @@
+import { useEditContext } from "../client/editContext";
+import { useRef } from "react";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { Menu } from "primereact/menu";
+import { MenuItemGroup } from "../../config/types";
+
+export function ActionsMenu({ isMobile }: { isMobile: boolean }) {
+  const overlaypanel = useRef<OverlayPanel>(null);
+  const editContext = useEditContext();
+  if (!editContext) return null;
+
+  const itemGroups: MenuItemGroup[] =
+    editContext.configuration.editor.actionsMenu?.itemsFactory(editContext) ||
+    [];
+
+  // Enhance menu items to close overlay panel after clicking
+  const enhancedItemGroups = itemGroups.map((group) => ({
+    ...group,
+    items: group.items.map((item) => {
+      const originalCommand = item.command;
+      return {
+        ...item,
+        command: (e: any) => {
+          if (originalCommand) {
+            originalCommand(e);
+          }
+          overlaypanel.current?.hide();
+        },
+      };
+    }),
+  }));
+
+  if (isMobile) {
+    console.log("isMobile", itemGroups);
+    return (
+      <div className="text-sm text-gray-200">
+        {itemGroups.map((group, groupIndex) => (
+          <div
+            key={`group-${group.id || groupIndex}`}
+            className="mb-3 flex flex-row flex-wrap items-center justify-end gap-3"
+          >
+            {group.items
+              .filter((x) => !x.disabled)
+              .map((item) => (
+                <div
+                  key={item.id}
+                  className="flex items-center gap-1"
+                  onClick={() => {
+                    item.command?.({});
+                  }}
+                >
+                  {typeof item.icon === "string" ? (
+                    <i className={item.icon} style={{ fontSize: "1rem" }} />
+                  ) : (
+                    <>{item.icon}</>
+                  )}
+                  {item.label}
+                </div>
+              ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        id="actions-menu"
+        className="ml-2 flex h-11 cursor-pointer items-center gap-2 bg-blue-500 px-4 text-white hover:bg-blue-600"
+        onClick={async (ev) => {
+          overlaypanel.current!.toggle(ev);
+        }}
+      >
+        <i className="pi pi-sort-down-fill"></i>
+      </div>
+      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
+        <div className="flex flex-col gap-2">
+          <Menu
+            model={enhancedItemGroups.reduce((acc, group, index) => {
+              // Add the group items
+              acc.push(...group.items);
+              // Add a separator if not the last group
+              if (index < enhancedItemGroups.length - 1) {
+                acc.push({ separator: true });
+              }
+              return acc;
+            }, [] as any[])}
+          />
+        </div>
+      </OverlayPanel>
+    </>
+  );
+}

package/src/editor/menubar/ActiveUsers.tsx

@@ -0,0 +1,17 @@
+import { useEditContext } from "../client/editContext";
+import { User } from "./User";
+
+export function ActiveUsers() {
+  const editContext = useEditContext();
+  const mySession = editContext?.activeSessions.find(
+    (x) => x.sessionId === editContext?.sessionId,
+  );
+
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-2 border-gray-200">
+      {editContext?.activeSessions
+        .filter((x) => x.item?.id === mySession?.item?.id)
+        .map((s) => <User key={s.sessionId} session={s} />)}
+    </div>
+  );
+}

package/src/editor/menubar/ApproveAndPublish.tsx

@@ -0,0 +1,18 @@
+import { useEditContext } from "../client/editContext";
+
+export function ApproveAndPublishButton() {
+  const editContext = useEditContext();
+  return (
+    <div
+      className="bg-alpaca-blue hover:bg-alpaca-blue-light text-white p-4 cursor-pointer text-sm rounded-l-full"
+      onClick={() => {
+        const workboxView = editContext?.configuration.editor.views.find(
+          (x) => x.name == "workbox"
+        );
+        if (workboxView) editContext?.switchView(workboxView.name);
+      }}
+    >
+      Approve & Publish
+    </div>
+  );
+}

package/src/editor/menubar/BrowseHistory.tsx

@@ -0,0 +1,28 @@
+import { useEditContext } from "../client/editContext";
+
+import { ItemDescriptor } from "../pageModel";
+import { ResultItem } from "../ui/ItemSearch";
+import { ItemList } from "../ui/ItemList";
+
+export function BrowseHistory({
+  setHoveredItem,
+  itemSelected,
+}: {
+  setHoveredItem: (item: ResultItem | undefined) => void;
+  itemSelected: (item: ItemDescriptor) => void;
+}) {
+  const editContext = useEditContext();
+
+  if (!editContext) return;
+
+  const history = editContext.browseHistory;
+
+  return (
+    <ItemList
+      items={history}
+      onItemHover={setHoveredItem}
+      onItemClick={itemSelected}
+      maxItems={20}
+    />
+  );
+}

package/src/editor/menubar/ItemLanguageVersion.tsx

@@ -0,0 +1,76 @@
+import { useEditContext } from "../client/editContext";
+//import { BrowseHistory } from "./BrowseHistory";
+import { LanguageSelector } from "./LanguageSelector";
+import { PageSelector } from "./PageSelector";
+import { Separator } from "./Separator";
+import { VersionSelector } from "./VersionSelector";
+import { NavButtons } from "./NavButtons";
+import { getItemDescriptor } from "../utils";
+import { confirmCreateVersion } from "../utils/itemutils";
+
+export function ItemLanguageVersion() {
+  const editContext = useEditContext();
+
+  if (!editContext) return;
+
+  const item = editContext.currentItemDescriptor;
+  if (!item) return;
+
+  const languageSelector = (
+    <LanguageSelector
+      showAllLanguagesSwitch={true}
+      selectedLanguage={item.language}
+      onLanguageSelected={(language) => {
+        if (!language.versions) {
+          if (editContext) {
+            confirmCreateVersion(editContext, language);
+          }
+        } else
+          editContext?.loadItem({
+            ...getItemDescriptor(item),
+            language: language.languageCode,
+            version: 0,
+          });
+      }}
+    />
+  );
+
+  const versionSelector = (
+    <VersionSelector
+      itemDescriptor={item}
+      versions={editContext.itemVersions}
+      actualVersion={editContext.contentEditorItem?.version}
+      onVersionSelected={(version) => {
+        editContext.loadItem({ ...item, version });
+      }}
+    />
+  );
+
+  if (editContext.isMobile) {
+    return (
+      <div className="flex flex-col items-end gap-1">
+        <PageSelector itemDescriptor={item} />
+
+        {languageSelector}
+
+        {versionSelector}
+
+        <div className="flex items-end gap-1">
+          <NavButtons />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <PageSelector itemDescriptor={item} />
+      <Separator />
+      {languageSelector}
+      <Separator />
+      {versionSelector}
+      <Separator />
+      <NavButtons />
+    </div>
+  );
+}