@alpaca-editor/core 1.0.0

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/menubar/ActionsMenu.tsx

@@ -0,0 +1,47 @@
+import { useEditContext } from "../client/editContext";
+import { useRef } from "react";
+import { OverlayPanel } from "primereact/overlaypanel";
+
+import { Menu } from "primereact/menu";
+
+export function ActionsMenu() {
+  const overlaypanel = useRef<OverlayPanel>(null);
+  const editContext = useEditContext();
+  if (!editContext) return null;
+
+  const items =
+    editContext.configuration.editor.actionsMenu?.itemsFactory(editContext);
+
+  // Enhance each item to call overlaypanel.hide() after executing its original command
+  const enhancedItems = items?.map((item) => {
+    // Preserve the original command if present
+    const originalCommand = item.command;
+    return {
+      ...item,
+      command: (e: any) => {
+        if (originalCommand) {
+          originalCommand(e);
+        }
+        // Close the overlay panel
+        overlaypanel.current?.hide();
+      },
+    };
+  });
+
+  return (
+    <>
+      <div
+        id="actions-menu"
+        className="flex gap-2 items-center bg-blue-500 text-white px-4 h-12 hover:bg-blue-600 cursor-pointer ml-2"
+        onClick={async (ev) => {
+          overlaypanel.current!.toggle(ev);
+        }}
+      >
+        <i className="pi pi-sort-down-fill"></i>
+      </div>
+      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
+        <Menu model={enhancedItems} />
+      </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="border-gray-200 flex gap-2 items-center">
+      {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,37 @@
+import { useEditContext } from "../client/editContext";
+
+import { ItemDescriptor } from "../pageModel";
+import { ResultItem } from "../ui/ItemSearch";
+
+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 (
+    <div className="overflow-y-auto flex flex-col gap-1 flex-1">
+      {history
+        .filter((x, i) => x.language && i < 7)
+        .map((x) => (
+          <div
+            key={x.id + x.language}
+            className="text-xs cursor-pointer hover:text-gray-400 flex gap-1"
+            onMouseEnter={() => setHoveredItem(x)}
+            onMouseLeave={() => setHoveredItem(undefined)}
+            onClick={() => itemSelected(x)}
+          >
+            {x.icon && <img src={x.icon} width="16" height="16" />} {x.path}{" "}
+            <span className="text-500">({x.language})</span>
+          </div>
+        ))}
+    </div>
+  );
+}

package/src/editor/menubar/ItemLanguageVersion.tsx

@@ -0,0 +1,52 @@
+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;
+
+  return (
+    <div className="flex gap-1 items-center">
+      <PageSelector itemDescriptor={item} />
+      <Separator />
+      <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,
+            });
+        }}
+      />
+      <Separator />
+      <VersionSelector
+        itemDescriptor={item}
+        versions={editContext.itemVersions}
+        actualVersion={editContext.contentEditorItem?.version}
+        onVersionSelected={(version) => {
+          editContext.loadItem({ ...item, version });
+        }}
+      />
+      <Separator />
+      <NavButtons />
+    </div>
+  );
+}

package/src/editor/menubar/LanguageSelector.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { ArrowDownIcon } from "../ui/Icons";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef, useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+import { useEditContext } from "../client/editContext";
+
+import { Language } from "../pageModel";
+
+export function LanguageSelector({
+  selectedLanguage,
+  darkMode,
+  onLanguageSelected,
+  showAllLanguagesSwitch,
+  showAllLanguages = false,
+  disabled = false,
+}: {
+  selectedLanguage: string | undefined;
+  darkMode?: boolean;
+  onLanguageSelected: (language: Language) => void;
+  showAllLanguagesSwitch?: boolean;
+  showAllLanguages?: boolean;
+  disabled?: boolean;
+}) {
+  const overlaypanel = useRef<OverlayPanel>(null);
+  const [showAllLanguagesInternal, setShowAllLanguagesInternal] =
+    useState(showAllLanguages);
+  const editContext = useEditContext();
+
+  const allLanguages = editContext?.itemLanguages || [];
+
+  const currentLanguage = allLanguages.find(
+    (x) => x.languageCode === selectedLanguage
+  );
+
+  const languages = showAllLanguagesInternal
+    ? allLanguages
+    : allLanguages.filter((x: Language) => x.versions > 0);
+
+  languages.sort((a, b) => a.name.localeCompare(b.name));
+
+  const selectLanguage = async (language: Language) => {
+    onLanguageSelected(language);
+    overlaypanel.current?.hide();
+    return;
+  };
+
+  return (
+    <>
+      <div
+        className={`p-[7px] text-sm cursor-pointer flex items-center gap-3 ${
+          darkMode
+            ? "text-gray-500 hover:bg-gray-300"
+            : "text-gray-200 hover:bg-gray-500"
+        }  rounded-md ${disabled ? "opacity-50" : ""}`}
+        onClick={(ev) => {
+          if (disabled) return;
+          overlaypanel.current?.toggle(ev, ev.currentTarget);
+        }}
+      >
+        <div className="flex gap-2">
+          {currentLanguage && (
+            <>
+              <img src={currentLanguage.icon} className="h-5" />{" "}
+              {currentLanguage.name}
+            </>
+          )}
+          {!currentLanguage && <div>Select language</div>}
+        </div>
+        <div
+          className={`p-dropdown-trigger ${
+            darkMode ? "text-gray-500" : "text-gray-200"
+          }`}
+          role="button"
+          aria-haspopup="listbox"
+          aria-expanded="false"
+          aria-label="Select a language"
+          data-pc-section="trigger"
+        >
+          <ArrowDownIcon />
+        </div>
+      </div>
+      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
+        <div className="max-h-[50vh] min-w-64 flex flex-col">
+          {showAllLanguagesSwitch && (
+            <div className="text-xs p-2 flex items-center gap-2 justify-center">
+              <span
+                className="cursor-pointer"
+                onClick={() => setShowAllLanguagesInternal(false)}
+              >
+                Item languages
+              </span>
+              <InputSwitch
+                checked={showAllLanguagesInternal}
+                onChange={(e) => setShowAllLanguagesInternal(e.value)}
+              />
+              <span
+                className="cursor-pointer"
+                onClick={() => setShowAllLanguagesInternal(true)}
+              >
+                All languages
+              </span>
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto">
+            <div className="flex flex-col text-sm">
+              {languages.map((x) => (
+                <div
+                  key={x.languageCode}
+                  className="cursor-pointer hover:bg-gray-200 flex gap-2 p-2"
+                  onClick={() => selectLanguage(x)}
+                >
+                  <img src={x.icon} className="h-5" /> {x.name} ({x.versions})
+                </div>
+              ))}
+            </div>
+            {languages.length === 0 && (
+              <div className="p-2 text-gray-500">
+                This item has no languages
+              </div>
+            )}
+          </div>
+        </div>
+        {/* {!readOnly && (
+          <div className="border-t p-2 flex flex-col">
+            <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+              <ArrowDownIcon /> Actions
+            </div>
+            <div className="flex gap-2">
+              <Button
+                size="small"
+                icon="pi pi-globe"
+                label="Localize"
+                onClick={(event) => {
+                  if (!editContext?.contentEditorItem) return;
+                  editContext?.executeCommand({
+                    command: editContext.configuration.commands.localizeItem,
+                    data: {
+                      items: [editContext.contentEditorItem],
+                    },
+                    event,
+                  });
+                }}
+              ></Button>
+            </div>
+          </div>
+        )} */}
+      </OverlayPanel>
+    </>
+  );
+}

package/src/editor/menubar/Menu.tsx

@@ -0,0 +1,83 @@
+import { Menubar } from "primereact/menubar";
+import { EditContextType, useEditContext } from "../client/editContext";
+import { ItemLanguageVersion } from "./ItemLanguageVersion";
+import { getConfiguration } from "../../config/config";
+import { MenuItemCommandEvent } from "primereact/menuitem";
+
+import { Command } from "../commands/commands";
+import { PageViewerControls } from "./PageViewerControls";
+import { MenuItem } from "../../config/types";
+import { ApproveAndPublishButton } from "./ApproveAndPublish";
+
+export function Menu() {
+  const editContext = useEditContext();
+  if (!editContext) return;
+
+  const configuration = getConfiguration();
+  if (!configuration.editor.mainNavigation) return null;
+  const getSubItems = (
+    items:
+      | (MenuItem | Command<any>)[]
+      | ((editContext: EditContextType) => (MenuItem | Command<any>)[])
+  ) => {
+    if (typeof items === "function") items = items(editContext);
+    return items.map((y) => {
+      if ("execute" in y)
+        return {
+          id: y.id,
+          label: y.label,
+          icon: y.icon,
+          disabled: editContext.isCommandDisabled({ command: y }),
+          command: async (event: MenuItemCommandEvent) => {
+            await editContext.executeCommand({
+              command: y,
+              event: event.originalEvent,
+            });
+          },
+        };
+      return {
+        id: y.id,
+        label: y.label,
+        icon: y.icon,
+      };
+    });
+  };
+
+  const menuItems = configuration.editor.mainNavigation.map((x) => {
+    if ("execute" in x)
+      return {
+        id: x.id,
+        label: x.label,
+        icon: x.icon,
+        disabled: editContext.isCommandDisabled({ command: x }),
+        command: async (event: MenuItemCommandEvent) => {
+          await editContext.executeCommand({
+            command: x,
+            event: event.originalEvent,
+          });
+        },
+      };
+    return {
+      id: x.id,
+      label: x.label,
+      icon: x.icon,
+      items: x.items ? getSubItems(x.items) : undefined,
+    };
+  });
+
+  const endContent = (
+    <div className="flex gap-3 items-center">
+      <PageViewerControls />
+      <ItemLanguageVersion />
+      <ApproveAndPublishButton />
+    </div>
+  );
+
+  return (
+    <Menubar
+      model={menuItems}
+      end={endContent}
+      className="p-0 text-sm rounded-none border-0 border-b bg-gray-50 shadow-bottom-soft z-10 min-h-12"
+    ></Menubar>
+  );
+}

package/src/editor/menubar/NavButtons.tsx

@@ -0,0 +1,74 @@
+import { useEditContext } from "../client/editContext";
+import { classNames } from "primereact/utils";
+
+export function NavButtons() {
+  const editContext = useEditContext();
+  if (!editContext) return;
+
+  const item = editContext.contentEditorItem;
+  if (!item) return;
+
+  const history = editContext.browseHistory;
+
+  const currentIndex = history.findIndex(
+    (x) => x.id === item.id && x.language === item.language
+  );
+  return (
+    <>
+      <div
+        key="nav-fwd"
+        className={classNames(
+          currentIndex < history.length - 1
+            ? " text-gray-200"
+            : "text-gray-400",
+          "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "
+        )}
+        onClick={() => {
+          const currentIndex = history.findIndex(
+            (x) => x.id === item.id && x.language === item.language
+          );
+          if (currentIndex < history.length - 1) {
+            const historyItem = history[currentIndex + 1];
+            if (!historyItem) return;
+            editContext.loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false }
+            );
+          }
+        }}
+      >
+        <i className="pi pi-chevron-left text-sm" />
+      </div>
+      <div
+        key="nav-back"
+        className={classNames(
+          currentIndex > 0 ? " text-gray-200" : "text-gray-400",
+          "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "
+        )}
+        onClick={() => {
+          const currentIndex = history.findIndex(
+            (x) => x.id === item.id && x.language === item.language
+          );
+          if (currentIndex > 0) {
+            const historyItem = history[currentIndex - 1];
+            if (!historyItem) return;
+            editContext.loadItem(
+              {
+                id: historyItem.id,
+                language: historyItem.language,
+                version: historyItem.version || 0,
+              },
+              { addToBrowseHistory: false }
+            );
+          }
+        }}
+      >
+        <i className="pi pi-chevron-right text-sm" />
+      </div>
+    </>
+  );
+}