@alpaca-editor/core 1.0.0

package/src/editor/menubar/PageSelector.tsx

@@ -0,0 +1,139 @@
+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]);
+
+  return (
+    <>
+      <div
+        id="page-selector-button"
+        className="p-[7px] text-sm cursor-pointer flex items-center gap-3 text-gray-200 hover:bg-gray-500 rounded-md"
+        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="h-[75vh] min-w-48 flex flex-col overflow-hidden">
+          <div className="flex-1 flex flex-col gap-1">
+            <div className="p-2 flex flex-col">
+              <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+                <ArrowDownIcon /> Search
+              </div>
+              <ItemSearch
+                autoFocus={true}
+                setHoveredItem={setHoveredItem}
+                itemSelected={(item) => loadItem(item)}
+              />
+            </div>
+            <div className="flex-1 flex flex-col">
+              <div className="border-t p-2 pb-1 text-xs text-gray-500 flex items-center gap-1">
+                <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="border-t p-2 flex flex-col">
+              <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
+                <ArrowDownIcon /> Last visited
+              </div>
+              <BrowseHistory
+                setHoveredItem={setHoveredItem}
+                itemSelected={(item) => loadItem(item)}
+              />
+            </div>
+          </div>
+          <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-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

@@ -0,0 +1,99 @@
+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";
+
+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 gap-2 items-center">
+      {hasLayout && (
+        <>
+          {" "}
+          <i
+            className={classNames(
+              device === "desktop"
+                ? "bg-gray-200"
+                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
+              "pi pi-desktop cursor-pointer p-2 rounded-full"
+            )}
+            title="Desktop"
+            onClick={() => {
+              setDevice("desktop");
+            }}
+          />
+          <i
+            className={classNames(
+              device && device !== "desktop"
+                ? "bg-gray-200"
+                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
+              "pi pi-mobile cursor-pointer p-2 rounded-full"
+            )}
+            title="Mobile"
+            onClick={() => {
+              if (editContext.configuration.devices[0]) {
+                setDevice(editContext.configuration.devices[0].name);
+              }
+            }}
+          />
+          <i
+            className={classNames(
+              !device
+                ? "bg-gray-200"
+                : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
+              "w-8 h-8 cursor-pointer p-1 rounded-full"
+            )}
+            title="Form"
+            onClick={() => {
+              setDevice("");
+            }}
+          >
+            <FormEditIcon />
+          </i>
+          <Separator size="large" />
+          <i
+            className="pi pi-external-link cursor-pointer hover:bg-gray-200 p-2 rounded-full text-gray-100 hover:text-gray-800"
+            title="Fullscreen"
+            onClick={() => pageViewContext.setFullscreen(true)}
+          />
+          {!editContext.user?.isLimitedPreviewUser && (
+            <i
+              className={classNames(
+                editContext.previewMode
+                  ? "bg-gray-200"
+                  : " hover:bg-gray-200 text-gray-100 hover:text-gray-800",
+                "pi pi-eye cursor-pointer p-2 rounded-full"
+              )}
+              title="Preview"
+              onClick={() => editContext.setPreviewMode((x) => !x)}
+            />
+          )}
+          <Separator size="large" />
+        </>
+      )}
+      <SimpleIconButton
+        icon={<CompareIcon className="w-6 h-6 p-1" />}
+        label="Compare"
+        size="large"
+        className={
+          editContext.compareMode
+            ? "text-gray-600"
+            : "text-gray-100 hover:text-gray-600"
+        }
+        selected={editContext.compareMode}
+        onClick={() => editContext.setCompareMode(!editContext.compareMode)}
+      />
+    </div>
+  );
+}

package/src/editor/menubar/Separator.tsx

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

package/src/editor/menubar/SiteInfo.tsx

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

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

@@ -0,0 +1,143 @@
+"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
+        className={`p-[7px] text-sm cursor-pointer flex items-center gap-3 ${
+          darkMode
+            ? "text-gray-500 hover:bg-gray-200"
+            : "text-gray-200 hover:bg-gray-500"
+        } rounded-md a`}
+        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="max-h-[50vh] min-w-20 flex 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="cursor-pointer hover:bg-gray-200 flex gap-2 p-2"
+                  onClick={() => {
+                    onVersionSelected(0);
+                    overlaypanel.current?.hide();
+                  }}
+                >
+                  Latest
+                </div>
+              )}
+              {versions.map((x) => (
+                <div
+                  key={x.version}
+                  className="cursor-pointer hover:bg-gray-200 flex gap-2 p-2"
+                  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="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
+                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>
+    </>
+  );
+}