@alpaca-editor/core 1.0.3938 → 1.0.3941

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

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

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

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

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

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

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

package/src/editor/menubar/LanguageSelector.tsx

@@ -1,226 +0,0 @@
-"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 [filterText, setFilterText] = useState("");
-  const editContext = useEditContext();
-
-  const allLanguages = editContext?.itemLanguages || [];
-
-  const currentLanguage = allLanguages.find(
-    (x) => x.languageCode === selectedLanguage,
-  );
-
-  let languages = showAllLanguagesInternal
-    ? allLanguages
-    : allLanguages.filter((x: Language) => x.versions > 0);
-
-  // Apply text filter
-  if (filterText.trim()) {
-    languages = languages.filter((x: Language) =>
-      x.name.toLowerCase().includes(filterText.toLowerCase()),
-    );
-  }
-
-  languages.sort((a, b) => a.name.localeCompare(b.name));
-
-  const selectLanguage = async (language: Language) => {
-    onLanguageSelected(language);
-    overlaypanel.current?.hide();
-    // Reset filter when language is selected
-    setFilterText("");
-    return;
-  };
-
-  const handlePanelShow = () => {
-    // Reset filter when panel opens
-    setFilterText("");
-  };
-
-  const handlePanelHide = () => {
-    // Reset filter when panel closes
-    setFilterText("");
-  };
-
-  // Function to highlight matching characters
-  const highlightMatch = (text: string, filter: string) => {
-    if (!filter.trim()) return text;
-
-    return text
-      .split(new RegExp(`(${filter})`, "i"))
-      .map((part: string, i: number) =>
-        part.toLowerCase() === filter.toLowerCase() && part ? (
-          <u className="font-bold" key={i}>
-            {part}
-          </u>
-        ) : (
-          part && <span key={i}>{part}</span>
-        ),
-      );
-  };
-
-  return (
-    <>
-      <div
-        className={`flex cursor-pointer items-center gap-3 p-[7px] py-[5px] text-sm ${
-          darkMode
-            ? "text-gray-500 hover:bg-gray-300"
-            : "text-gray-200 hover:bg-gray-500"
-        } rounded-md ${disabled ? "opacity-50" : ""}`}
-        data-testid="language-selector"
-        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
-        onShow={handlePanelShow}
-        onHide={handlePanelHide}
-      >
-        <div className="flex max-h-[50vh] min-w-64 flex-col">
-          {showAllLanguagesSwitch && (
-            <div className="flex items-center justify-center gap-2 p-2 text-xs">
-              <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>
-          )}
-
-          {/* Language filter input */}
-          <div className="border-b px-2 pt-2 pb-1">
-            <div className="relative flex items-center">
-              <input
-                type="text"
-                placeholder="Filter..."
-                value={filterText}
-                onChange={(e) => setFilterText(e.target.value)}
-                className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
-                autoFocus
-              />
-              {!filterText && (
-                <i className="pi pi-search absolute right-2 text-xs text-gray-400" />
-              )}
-              {filterText && (
-                <i
-                  className="pi pi-times absolute right-2 cursor-pointer text-xs text-gray-400 hover:text-gray-600"
-                  onClick={() => setFilterText("")}
-                />
-              )}
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-y-auto">
-            <div className="flex flex-col text-sm">
-              {languages.map((x) => (
-                <div
-                  key={x.languageCode}
-                  className="flex cursor-pointer items-center p-2 hover:bg-gray-200"
-                  onClick={() => selectLanguage(x)}
-                >
-                  <img src={x.icon} className="mr-2 h-5" />
-                  {highlightMatch(x.name, filterText)} ({x.versions})
-                </div>
-              ))}
-            </div>
-            {languages.length === 0 && filterText.trim() && (
-              <div className="p-2 text-xs text-gray-500">
-                No languages found matching "{filterText}"
-              </div>
-            )}
-            {languages.length === 0 && !filterText.trim() && (
-              <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

@@ -1,83 +0,0 @@
-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 items-center gap-3">
-      <PageViewerControls />
-      <ItemLanguageVersion />
-      <ApproveAndPublishButton />
-    </div>
-  );
-
-  return (
-    <Menubar
-      model={menuItems}
-      end={endContent}
-      className="shadow-bottom-soft z-10 min-h-10 rounded-none border-0 border-b bg-gray-50 p-0 text-sm"
-    ></Menubar>
-  );
-}