@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/menubar/NavButtons.tsx

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

package/src/editor/menubar/PageSelector.tsx

@@ -1,141 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { useEditContext } from "../client/editContext";
-import { BrowseHistory } from "./BrowseHistory";
-import { ArrowDownIcon } from "../ui/Icons";
-
-import { Button } from "primereact/button";
-import { FullItem, ItemDescriptor } from "../pageModel";
-
-import { ResultItem, ItemSearch } from "../ui/ItemSearch";
-import { ScrollingContentTree } from "../ScrollingContentTree";
-import { ItemTreeNodeData } from "../services/contentService";
-
-export function PageSelector({
-  itemDescriptor,
-}: {
-  itemDescriptor: ItemDescriptor;
-}) {
-  const overlaypanel = useRef<OverlayPanel>(null);
-  const editContext = useEditContext();
-  const [item, setItem] = useState<FullItem | undefined>();
-
-  const [hoveredItem, setHoveredItem] = useState<ResultItem | undefined>();
-
-  const loadItem = (selectedItem: ItemTreeNodeData[] | ItemDescriptor) => {
-    if (Array.isArray(selectedItem) && selectedItem[0]) {
-      selectedItem = selectedItem[0];
-    }
-    if (!selectedItem) return;
-    const itemDescriptor = selectedItem as ItemDescriptor;
-    editContext?.loadItem({
-      id: itemDescriptor.id,
-      language: itemDescriptor.language,
-      version: 0,
-    });
-    overlaypanel.current?.hide();
-  };
-
-  useEffect(() => {
-    const setName = async () => {
-      if (!itemDescriptor) return;
-      const item = await editContext?.itemsRepository.getItem(itemDescriptor);
-      setItem(item);
-    };
-    setName();
-  }, [itemDescriptor]);
-
-  if (!editContext) return null;
-
-  return (
-    <>
-      <div
-        id="page-selector-button"
-        className="flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[5px] text-sm text-gray-200 hover:bg-gray-500"
-        onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
-        data-testid="page-selector-button"
-      >
-        {item?.name || "unknown"}
-        <div
-          className="p-dropdown-trigger"
-          role="button"
-          aria-haspopup="listbox"
-          aria-expanded="false"
-          aria-label="Select a page"
-          data-pc-section="trigger"
-        >
-          <ArrowDownIcon />
-        </div>
-      </div>
-      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="flex h-[75vh] min-w-48 flex-col overflow-hidden">
-          <div className="flex flex-1 flex-col gap-1">
-            <div className="flex flex-col p-2">
-              <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
-                <ArrowDownIcon /> Search
-              </div>
-              <ItemSearch
-                autoFocus={true}
-                setHoveredItem={setHoveredItem}
-                itemSelected={(item) => loadItem(item)}
-              />
-            </div>
-            <div className="flex flex-1 flex-col">
-              <div className="flex items-center gap-1 border-t p-2 pb-1 text-xs text-gray-500">
-                <ArrowDownIcon /> Select
-              </div>
-              <div className="relative flex-1">
-                <div className="absolute inset-0 overflow-auto">
-                  <ScrollingContentTree
-                    selectedItemId={hoveredItem?.id ?? item?.id}
-                    onSelectionChange={loadItem}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-col border-t p-2">
-              <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
-                <ArrowDownIcon /> Last visited
-              </div>
-              <BrowseHistory
-                setHoveredItem={setHoveredItem}
-                itemSelected={(item) => loadItem(item)}
-              />
-            </div>
-          </div>
-          <div className="flex flex-col border-t p-2">
-            <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
-              <ArrowDownIcon /> Actions
-            </div>
-            <div className="flex gap-2">
-              <Button
-                size="small"
-                icon="pi pi-plus"
-                label="New Page"
-                onClick={() => editContext?.openCreatePageDialog()}
-              ></Button>
-              <Button
-                id="delete-page-button"
-                severity="danger"
-                size="small"
-                icon="pi pi-times"
-                label="Delete"
-                onClick={async (ev) => {
-                  if (
-                    item &&
-                    (await editContext?.executeCommand({
-                      command: editContext?.configuration.commands.deleteItem,
-                      event: ev,
-                      data: { items: [item] },
-                    }))
-                  )
-                    editContext?.openSplashScreen();
-                }}
-              ></Button>
-            </div>
-          </div>
-        </div>
-      </OverlayPanel>
-    </>
-  );
-}

package/src/editor/menubar/PageViewerControls.tsx

@@ -1,120 +0,0 @@
-import { classNames } from "primereact/utils";
-import { useEditContext } from "../client/editContext";
-import { Separator } from "./Separator";
-import { CompareIcon, FormEditIcon } from "../ui/Icons";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Route, SquarePen, UserRoundPen, EyeIcon, Pencil } from "lucide-react";
-
-export function PageViewerControls() {
-  const editContext = useEditContext();
-
-  if (!editContext) return null;
-
-  const hasLayout = editContext.contentEditorItem?.hasLayout;
-
-  const pageViewContext = editContext.pageView;
-
-  const device = pageViewContext.device;
-  const setDevice = pageViewContext.setDevice;
-
-  return (
-    <div className="flex items-center gap-2">
-      {hasLayout && (
-        <>
-          {!editContext.user?.isLimitedPreviewUser && (
-            <SimpleIconButton
-              icon={<Pencil className="h-6 w-6 p-1" />}
-              label="Edit"
-              dark={true}
-              size="large"
-              selected={editContext.mode === "edit"}
-              onClick={() => editContext.setMode("edit")}
-            />
-          )}
-
-          <SimpleIconButton
-            icon={<EyeIcon className="h-6 w-6 p-1" />}
-            label="Preview"
-            dark={true}
-            size="large"
-            selected={editContext.mode === "preview"}
-            onClick={() => editContext.setMode("preview")}
-          />
-
-          <SimpleIconButton
-            selected={editContext?.mode === "suggestions"}
-            icon={<UserRoundPen size={24} className="p-0.5" />}
-            label="Write suggestions"
-            dark={true}
-            size="large"
-            onClick={() => editContext?.setMode("suggestions")}
-          />
-          <Separator size="large" />
-          {!editContext.isMobile && (
-            <>
-              <i
-                className={classNames(
-                  device === "desktop"
-                    ? "bg-gray-200"
-                    : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
-                  "pi pi-desktop cursor-pointer rounded-full p-2",
-                )}
-                title="Desktop"
-                onClick={() => {
-                  setDevice("desktop");
-                }}
-              />
-              <i
-                className={classNames(
-                  device && device !== "desktop"
-                    ? "bg-gray-200"
-                    : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
-                  "pi pi-mobile cursor-pointer rounded-full p-2",
-                )}
-                title="Mobile"
-                onClick={() => {
-                  if (editContext.configuration.devices[0]) {
-                    setDevice(editContext.configuration.devices[0].name);
-                  }
-                }}
-              />
-              <i
-                className={classNames(
-                  !device
-                    ? "bg-gray-200"
-                    : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
-                  "h-8 w-8 cursor-pointer rounded-full p-1",
-                )}
-                title="Form"
-                onClick={() => {
-                  setDevice("");
-                }}
-              >
-                <FormEditIcon />
-              </i>
-              <Separator size="large" />
-            </>
-          )}
-          <i
-            className="pi pi-external-link cursor-pointer rounded-full p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-800"
-            title="Fullscreen"
-            onClick={() => pageViewContext.setFullscreen(true)}
-          />
-        </>
-      )}
-      {!editContext.isMobile && (
-        <SimpleIconButton
-          icon={<CompareIcon className="h-6 w-6 p-1" />}
-          label="Compare"
-          size="large"
-          dark={true}
-          className={
-            editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
-          }
-          selected={editContext.compareMode}
-          onClick={() => editContext.setCompareMode(!editContext.compareMode)}
-        />
-      )}
-    </div>
-  );
-}

package/src/editor/menubar/PreviewSecondaryControls.tsx

@@ -1,18 +0,0 @@
-import { useEditContext } from "../client/editContext";
-import { PreviewInfo } from "../reviews/PreviewInfo";
-import { ActionsMenu } from "./ActionsMenu";
-
-export const PreviewSecondaryControls = () => {
-  const editContext = useEditContext();
-  if (!editContext) return null;
-  return (
-    <div
-      className={`flex items-center gap-3 ${
-        editContext.isMobile ? "flex-col" : ""
-      }`}
-    >
-      <PreviewInfo />
-      <ActionsMenu isMobile={editContext.isMobile} />
-    </div>
-  );
-};

package/src/editor/menubar/SecondaryControls.tsx

@@ -1,45 +0,0 @@
-import { useEditContext } from "../client/editContext";
-import { ItemLanguageVersion } from "./ItemLanguageVersion";
-import { ActiveUsers } from "./ActiveUsers";
-import { ActionsMenu } from "./ActionsMenu";
-import { Separator } from "../menubar/Separator";
-
-export function SecondaryControls() {
-  const editContext = useEditContext();
-
-  if (editContext?.isMobile) {
-    return (
-      <div className="flex flex-col items-end gap-4">
-        <div className="flex flex-col gap-2">
-          <Headline title="Current Page" />
-          <ItemLanguageVersion />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Headline title="Active Users" />
-          <ActiveUsers />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Headline title="Actions" />
-          <ActionsMenu isMobile={true} />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <ItemLanguageVersion />
-      <Separator size="large" />
-      <ActiveUsers />
-      <ActionsMenu isMobile={false} />
-    </div>
-  );
-}
-
-function Headline({ title }: { title: string }) {
-  return (
-    <div className="flex flex-col items-end gap-2">
-      <div className="text-sm font-bold text-gray-300">{title}</div>
-    </div>
-  );
-}

package/src/editor/menubar/Separator.tsx

@@ -1,12 +0,0 @@
-import { classNames } from "primereact/utils";
-
-export function Separator({ size }: { size?: "large" | "small" }) {
-  return (
-    <div
-      className={classNames(
-        "border-r border-gray-400",
-        size === "large" ? "mx-3 h-7" : "mx-1 h-4",
-      )}
-    ></div>
-  );
-}

package/src/editor/menubar/SiteInfo.tsx

@@ -1,53 +0,0 @@
-import { OverlayPanel } from "primereact/overlaypanel";
-import { useEditContext } from "../client/editContext";
-import { useRef, useState } from "react";
-import { getSites } from "../services/contentService";
-import { Site } from "../../types";
-import { ProgressSpinner } from "primereact/progressspinner";
-
-export function SiteInfo() {
-  const editContext = useEditContext();
-  const overlaypanel = useRef<OverlayPanel>(null);
-  const [sites, setSites] = useState<Site[]>();
-  if (!editContext) return null;
-
-  const loadSites = async () => {
-    const sites = await getSites();
-    if (sites.data) setSites(sites.data);
-  };
-
-  return (
-    <div
-      className="my-2 flex gap-2 items-center text-gray-200 cursor-pointer"
-      title={editContext.pageView.site?.name}
-      onClick={async (ev) => {
-        setSites(undefined);
-        overlaypanel.current!.toggle(ev);
-        await loadSites();
-      }}
-    >
-      <i className="pi pi-globe text-lg" />
-      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="max-h-[45vh] min-w-20 flex flex-col overflow-hidden text-xs">
-          <div className="p-4">
-            This page is part of the site:{" "}
-            <span className="font-bold">
-              {editContext.pageView.site?.name}
-            </span>
-            {!sites && <ProgressSpinner className="w-5 h-5" />}
-            {sites && (
-              <div>
-                <div className="border-b my-2">Sites registered:</div>
-                <ul>
-                  {sites.map((site) => (
-                    <li key={site.name}>{site.name}</li>
-                  ))}
-                </ul>
-              </div>
-            )}
-          </div>
-        </div>
-      </OverlayPanel>
-    </div>
-  );
-}

package/src/editor/menubar/User.tsx

@@ -1,27 +0,0 @@
-import { EditSession } from "../../types";
-import { useEditContext } from "../client/editContext";
-
-export function User({ session }: { session: EditSession }) {
-  const editContext = useEditContext();
-  if (!editContext) return;
-
-  const userName = session.user.displayName || session.user.name;
-
-  const idxBackslash = userName.indexOf("\\");
-  const letter =
-    idxBackslash >= 0
-      ? userName[idxBackslash + 1]
-      : userName[0]
-        ? userName[0].toUpperCase()
-        : "";
-
-  return (
-    <div
-      className="rounded-full w-8 h-8 grid items-center justify-center text-white"
-      style={{ background: session.color }}
-      title={userName + " (" + session.user.email + ")"}
-    >
-      {letter}
-    </div>
-  );
-}

package/src/editor/menubar/VersionSelector.tsx

@@ -1,142 +0,0 @@
-"use client";
-
-import { ArrowDownIcon } from "../ui/Icons";
-import { useRef } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { Button } from "primereact/button";
-import { useEditContext } from "../client/editContext";
-import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
-import { getDeleteVersionCommand } from "../commands/deleteVersionCommand";
-import { ItemDescriptor, Version } from "../pageModel";
-
-export function VersionSelector({
-  itemDescriptor,
-  actualVersion,
-  onVersionSelected,
-  readOnly,
-  darkMode,
-  versions,
-}: {
-  itemDescriptor: ItemDescriptor | undefined;
-  actualVersion: number | undefined;
-  onVersionSelected: (version: number) => void;
-  readOnly?: boolean;
-  darkMode?: boolean;
-  versions: Version[];
-}) {
-  const editContext = useEditContext();
-  const overlaypanel = useRef<OverlayPanel>(null);
-
-  if (itemDescriptor == null) return;
-
-  const getVersionLabel = () => {
-    if (versions.length === 0) return "No versions";
-    if (itemDescriptor.version === 0)
-      return "Latest" + (actualVersion ? " (" + actualVersion + ")" : "");
-    return itemDescriptor.version;
-  };
-
-  return (
-    <>
-      <div
-        data-testid="version-selector"
-        className={`flex cursor-pointer items-center gap-3 p-[7px] py-[5px] text-sm ${
-          darkMode
-            ? "text-gray-500 hover:bg-gray-200"
-            : "text-gray-200 hover:bg-gray-500"
-        } a rounded-md`}
-        onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
-      >
-        <div className="flex gap-2">{getVersionLabel()}</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 version"
-          data-pc-section="trigger"
-        >
-          <ArrowDownIcon />
-        </div>
-      </div>
-      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="flex max-h-[50vh] min-w-20 flex-col">
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col text-sm">
-              {versions.length === 0 && <div className="p-2">No versions</div>}
-              {versions.length > 0 && (
-                <div
-                  key="latest"
-                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
-                  onClick={() => {
-                    onVersionSelected(0);
-                    overlaypanel.current?.hide();
-                  }}
-                >
-                  Latest
-                </div>
-              )}
-              {versions.map((x) => (
-                <div
-                  key={x.version}
-                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
-                  onClick={() => {
-                    onVersionSelected(x.version);
-                    overlaypanel.current?.hide();
-                  }}
-                >
-                  {itemDescriptor.version === x.version && (
-                    <i className="pi pi-check" style={{ fontSize: "1rem" }}></i>
-                  )}{" "}
-                  {x.version}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        {!readOnly && (
-          <div className="flex flex-col border-t p-2">
-            <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
-              <ArrowDownIcon /> Actions
-            </div>
-            <div className="flex gap-2">
-              <Button
-                text
-                size="small"
-                icon="pi pi-plus"
-                label="Add Version"
-                onClick={async (ev) => {
-                  await editContext?.executeCommand({
-                    command: getCreateAndSwitchToNewVersionCommand({}),
-                    event: ev,
-                  });
-                  overlaypanel.current?.hide();
-                  onVersionSelected(0);
-                }}
-              />
-              <Button
-                text
-                size="small"
-                icon="pi pi-times"
-                label="Delete Version"
-                severity="danger"
-                disabled={versions.length === 0}
-                onClick={async (ev) => {
-                  editContext;
-                  await editContext?.executeCommand({
-                    command: getDeleteVersionCommand({}),
-                    event: ev,
-                  });
-                  overlaypanel.current?.hide();
-                  onVersionSelected(0);
-                }}
-              />{" "}
-            </div>
-          </div>
-        )}
-      </OverlayPanel>
-    </>
-  );
-}