@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/menubar/PageViewerControls.tsx

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

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

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

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

@@ -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,142 @@
+"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>
+    </>
+  );
+}