@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/splash-screen/NewPage.tsx

@@ -0,0 +1,294 @@
+import { useEffect, useMemo, useState } from "react";
+import { ScrollingContentTree } from "../editor/ScrollingContentTree";
+
+import {
+  getChildren,
+  ItemTreeNodeData,
+} from "../editor/services/contentService";
+import {
+  executeCreateItem,
+  loadInsertOptions,
+} from "../editor/services/editService";
+import { InputText } from "primereact/inputtext";
+import { getAbsoluteIconUrl, getItemDescriptor } from "../editor/utils";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "../client-components";
+
+import { SectionHeadline } from "./SectionHeadline";
+import { ItemDescriptor } from "../editor/pageModel";
+import { useDebouncedCallback } from "use-debounce";
+import { getWizards } from "../page-wizard/service";
+import { Wizard } from "../page-wizard/PageWizard";
+import { Card } from "../components/ui/card";
+import { CardConnector } from "../components/ui/CardConnector";
+import { Logo } from "../editor/ui/Icons";
+import { ActionButton } from "../components/ActionButton";
+import { FilePenLine, Palette } from "lucide-react";
+
+export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
+  const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(null);
+  const [isValid, setIsValid] = useState<boolean>(false);
+  const [insertOptions, setInsertOptions] = useState<ItemTreeNodeData[] | null>(
+    null,
+  );
+  const [validationMessage, setValidationMessage] = useState<string | null>(
+    null,
+  );
+  const [selectedTemplate, setSelectedTemplate] = useState<string>();
+  const [name, setName] = useState<string>("");
+  const editContext = useEditContext();
+  const [wizards, setWizards] = useState<Wizard[]>([]);
+
+  const insertOptionsAndWizards = useMemo(() => {
+    return [...(insertOptions || []), ...(wizards || [])];
+  }, [insertOptions, wizards]);
+
+  useEffect(() => {
+    const loadOptions = async () => {
+      if (!selectedItem) return;
+
+      const item = getItemDescriptor(selectedItem);
+      const insertOptions = await loadInsertOptions(item);
+      const pageInsertOptions = insertOptions?.filter((x) => x.hasLayout);
+      setInsertOptions(pageInsertOptions);
+      setSelectedTemplate(pageInsertOptions?.[0]?.id);
+    };
+
+    const loadWizards = async () => {
+      if (!selectedItem) return;
+      const item = getItemDescriptor(selectedItem);
+      const wizards = await getWizards(item);
+      setWizards(wizards);
+    };
+
+    loadOptions();
+    loadWizards();
+  }, [selectedItem]);
+
+  useEffect(() => {
+    const loadItem = async () => {
+      const itemId =
+        selectedItemId ||
+        editContext?.configuration.editor.dialogs.newPage.expandTreeNode;
+      if (!itemId) return;
+      const item = await editContext!.itemsRepository.getItem({
+        id: itemId,
+        language: "en",
+        version: 0,
+      });
+      if (item) setSelectedItem(item);
+    };
+    loadItem();
+  }, [selectedItemId]);
+
+  const isValidDebounced = useDebouncedCallback(async () => {
+    if (!selectedItem) return;
+    let valid: boolean = !!selectedTemplate && name.trim().length >= 3;
+    if (valid) {
+      const children = await getChildren(
+        selectedItem.id,
+        editContext?.sessionId ?? "",
+        [],
+        false,
+        editContext?.contentEditorItem?.language || "en",
+      );
+      if (
+        children.find(
+          (x) => x.name.toLocaleLowerCase() === name.trim().toLocaleLowerCase(),
+        )
+      ) {
+        valid = false;
+        setValidationMessage("A page with this name already exists.");
+      }
+    } else {
+      if (name.trim().length > 0 && name.trim().length < 3)
+        setValidationMessage("Name is too short.");
+      else setValidationMessage(null);
+    }
+
+    if (valid) setValidationMessage(null);
+
+    setIsValid(valid);
+  }, 500);
+
+  useEffect(() => {
+    isValidDebounced();
+  }, [name]);
+
+  const handleOk = async () => {
+    if (!selectedItem || !selectedTemplate) return;
+    const result = await executeCreateItem(
+      getItemDescriptor(selectedItem),
+      selectedTemplate,
+      name,
+    );
+    if (result.response.ok) {
+      editContext?.switchView("page-editor");
+      if (result.data) editContext?.loadItem(result.data);
+    } else {
+      editContext!.showToast({
+        severity: "error",
+        summary: "Error",
+        detail: "Failed to create item",
+      });
+    }
+  };
+
+  const launchWizard = (ev: React.MouseEvent<HTMLButtonElement>) => {
+    const wizard = wizards?.find((x) => x.id === selectedTemplate);
+    if (!wizard || !selectedItem) return;
+    editContext?.executeCommand({
+      command: editContext?.configuration.pageWizard.startWizardCommand,
+      data: {
+        wizard,
+        item: selectedItem,
+      },
+      event: ev,
+    });
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-6 bg-gray-100 p-4 md:p-8">
+      {/* Header with icon, title, description, and back button */}
+      <div className="flex gap-4">
+        <Logo className="h-8 w-8" />
+        <div className="flex-1 text-neutral-800">
+          <div className="text-lg font-semibold md:text-xl">
+            Create New Page
+          </div>
+          <div className="mt-1 text-xs font-light md:text-sm">
+            Select a location, choose a template or wizard, and name your new
+            page
+          </div>
+        </div>
+
+        <div className="flex items-start">
+          <ActionButton onClick={() => editContext?.switchView("open-page")}>
+            Open Existing
+          </ActionButton>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-1 flex-col md:flex-row">
+        <div className="tour-pick-location flex-1">
+          <Card
+            icon={<i className="pi pi-map-marker text-sm"></i>}
+            title="Pick Location"
+            description="Select where to create your new page"
+            noPadding
+            className="h-full"
+          >
+            <div className="h-full px-4 pb-4 md:px-6">
+              <div className="relative h-full">
+                <div className="absolute inset-0 overflow-auto">
+                  <ScrollingContentTree
+                    selectedItemId={selectedItem?.id || selectedItemId}
+                    onSelectionChange={(selection) => {
+                      const selected = selection[0] as ItemTreeNodeData;
+                      if (selected) setSelectedItem(selected);
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Card Connector - only visible when location is selected */}
+        {selectedItem && <CardConnector />}
+
+        {/* Second card - only visible when location is selected */}
+        {selectedItem && (
+          <div className="flex flex-1 flex-col">
+            <Card
+              icon={<Palette className="h-4 w-4" />}
+              title="Choose Template or Wizard"
+              description="Select a template or wizard to create your page"
+            >
+              <div className="tour-choose-template">
+                <div className="flex min-h-8 flex-wrap gap-3">
+                  {!insertOptions?.length && (
+                    <div className="text-sm text-gray-500">
+                      You cannot insert content at the selected location.
+                    </div>
+                  )}
+                  {insertOptionsAndWizards?.map((option) => (
+                    <div
+                      key={option.id}
+                      onClick={() => setSelectedTemplate(option.id)}
+                      className={classNames(
+                        "hover:border-theme-secondary flex h-23 min-w-34 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-gray-200 text-xs",
+                        selectedTemplate === option.id
+                          ? "bg-theme-secondary-light border-theme-secondary"
+                          : "bg-white",
+                      )}
+                    >
+                      {
+                        <img
+                          src={getAbsoluteIconUrl(option.icon)}
+                          width="32"
+                          height="32"
+                        ></img>
+                      }
+                      {option.name}
+                    </div>
+                  ))}
+                </div>
+                {selectedTemplate &&
+                  wizards?.find((x) => x.id === selectedTemplate) && (
+                    <div className="mt-4">
+                      <ActionButton onClick={launchWizard} isLoading={false}>
+                        Start wizard
+                      </ActionButton>
+                    </div>
+                  )}
+              </div>
+            </Card>
+
+            {/* Name Your Page card - only visible when template is selected */}
+            {selectedTemplate &&
+              insertOptions?.find((x) => x.id === selectedTemplate) && (
+                <>
+                  <CardConnector direction="vertical" />
+                  <Card
+                    icon={<FilePenLine />}
+                    title="Name Your Page"
+                    description="Enter a name for your new page"
+                  >
+                    <div>
+                      <InputText
+                        className="w-full rounded p-1.5 text-xs"
+                        value={name}
+                        id="new-page-name"
+                        onChange={(e) => setName(e.target.value)}
+                        onKeyDown={(ev) => {
+                          if (ev.key === "Enter" && isValid) handleOk();
+                        }}
+                        data-testid="new-page-name"
+                        placeholder="Enter page name..."
+                      />
+                      {validationMessage && (
+                        <div className="mt-2 text-red-500">
+                          {validationMessage}
+                        </div>
+                      )}
+                      <div className="mt-4">
+                        <ActionButton
+                          onClick={handleOk}
+                          disabled={!isValid}
+                          isLoading={false}
+                        >
+                          Create page
+                        </ActionButton>
+                      </div>
+                    </div>
+                  </Card>
+                </>
+              )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/splash-screen/OpenPage.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { HistoryEntry } from "../types";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../editor/client/editContext";
+import { ScrollingContentTree } from "../editor/ScrollingContentTree";
+import { Spinner } from "../editor/ui/Spinner";
+import { ItemDescriptor } from "../editor/pageModel";
+import { Card } from "../components/ui/card";
+import { Logo, MagicEditIcon } from "../editor/ui/Icons";
+import { ActionButton } from "../components/ActionButton";
+import { RecentPages } from "./RecentPages";
+
+export function OpenPage() {
+  const savedHistory =
+    typeof window !== "undefined"
+      ? localStorage.getItem("editor.browseHistory")
+      : null;
+
+  const [selectedPage, setSelectedPage] = useState<HistoryEntry | null>(null);
+  const editContext = useEditContext();
+  const recentPages: HistoryEntry[] = savedHistory
+    ? JSON.parse(savedHistory)
+    : [];
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (recentPages.length > 0 && recentPages[0])
+      setSelectedPage(recentPages[0]);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center bg-gray-100">
+        <Spinner />
+      </div>
+    );
+  }
+
+  const loadItem = (item: ItemDescriptor) => {
+    setIsLoading(true);
+    editContext?.switchView("page-editor");
+    editContext
+      ?.loadItem({
+        id: item.id,
+        language: item.language ?? "en",
+        version: item.version,
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  const renderContent = () => {
+    return (
+      <div className="flex h-full flex-col gap-6">
+        <div className="flex gap-4">
+          <Logo className="h-8 w-8" />
+          <div className="flex-1 text-neutral-800">
+            <div className="text-lg font-semibold md:text-xl">Open Page</div>
+            <div className="mt-1 text-xs font-light md:text-sm">
+              Browse your content structure or access recently viewed pages
+            </div>
+          </div>
+          <div className="flex items-start">
+            <ActionButton
+              onClick={() => editContext?.switchView("new-page")}
+              isLoading={false}
+            >
+              Create New Page <MagicEditIcon />
+            </ActionButton>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col gap-4 text-sm md:flex-row">
+          <div className="flex-1">
+            <Card
+              icon={<i className="pi pi-sitemap text-sm"></i>}
+              title="Browse Content"
+              description="Navigate through your content structure"
+              noPadding
+              className="h-full"
+            >
+              <div className="h-full px-4">
+                <div className="relative h-full">
+                  <ScrollingContentTree
+                    selectedItemId={selectedPage?.id}
+                    onSelectionChange={(selection) => {
+                      const selectedItem = selection[0];
+                      if (selectedItem) {
+                        loadItem(selectedItem);
+                      }
+                    }}
+                  />
+                </div>
+              </div>
+            </Card>
+          </div>
+          <div className="flex-1 md:pl-4">
+            <RecentPages />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex h-full flex-col bg-gray-100 p-4 md:p-8">
+      {renderContent()}
+    </div>
+  );
+}

package/src/splash-screen/RecentPages.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { HistoryEntry } from "../types";
+import { useEditContext } from "../editor/client/editContext";
+import { ItemDescriptor, FullItem } from "../editor/pageModel";
+import { Card } from "../components/ui/card";
+
+export function RecentPages() {
+  const savedHistory =
+    typeof window !== "undefined"
+      ? localStorage.getItem("editor.browseHistory")
+      : null;
+
+  const editContext = useEditContext();
+  const recentPages: HistoryEntry[] = savedHistory
+    ? JSON.parse(savedHistory)
+    : [];
+
+  const [history, setHistory] = useState<FullItem[]>();
+  const [selectedPage, setSelectedPage] = useState<HistoryEntry | null>(null);
+
+  useEffect(() => {
+    const fetchItems = async () => {
+      const pages = await editContext?.itemsRepository.getItems(recentPages);
+      setHistory(pages);
+    };
+    fetchItems();
+  }, [editContext?.itemsRepository]);
+
+  const handlePageSelect = (page: HistoryEntry) => {
+    setSelectedPage(page);
+  };
+
+  const handlePageLoad = (item: ItemDescriptor) => {
+    if (editContext) {
+      editContext
+        .loadItem({
+          id: item.id,
+          language: item.language ?? "en",
+          version: item.version,
+        })
+        .then(() => {
+          // Switch to the appropriate editor view after loading
+          editContext.switchView(
+            editContext.contentEditorItem?.hasLayout
+              ? "page-editor"
+              : "content-editor",
+          );
+        });
+    }
+  };
+
+  const formatDate = (date?: Date | string) => {
+    if (!date) return "—";
+    const d = new Date(date);
+    return d.toLocaleDateString();
+  };
+
+  return (
+    <Card
+      icon={<i className="pi pi-history text-sm"></i>}
+      title="Recent Pages"
+      description="Quick access to your recently viewed pages"
+      className="flex h-full flex-col"
+    >
+      <div className="relative flex min-h-0 flex-1 flex-col">
+        <div className="absolute inset-0 overflow-auto">
+          <table className="w-full text-xs">
+            <tbody>
+              {history?.map((page, index) => (
+                <tr
+                  key={page.id || index}
+                  onMouseOver={() => handlePageSelect(page)}
+                  onClick={() => handlePageLoad(page)}
+                  className="cursor-pointer border-b border-gray-100 hover:bg-gray-50"
+                >
+                  <td className="py-3">
+                    <div className="flex items-center gap-2">
+                      {/* {page.icon && (
+                        <img
+                          src={page.icon}
+                          width="16"
+                          height="16"
+                          alt=""
+                          className="flex-shrink-0"
+                        />
+                      )} */}
+                      <div className="min-w-0 flex-1">
+                        <div className="font-medium text-gray-900">
+                          {page.name}
+                        </div>
+                        <div className="text-xs break-all text-gray-500">
+                          {page.path}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="hidden p-3 text-gray-700 md:table-cell">
+                    <div className="truncate">{page.templateName || "—"}</div>
+                  </td>
+                  <td className="p-3">
+                    <span className="inline-flex items-center truncate rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
+                      {page.workflowState || "Draft"}
+                    </span>
+                  </td>
+                  <td className="hidden p-3 text-gray-700 md:table-cell">
+                    {page.versions || 0}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {(!history || history.length === 0) && (
+            <div className="p-6 text-center text-sm text-gray-500">
+              No recent pages found
+            </div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/splash-screen/SectionHeadline.tsx

@@ -0,0 +1,21 @@
+import { classNames } from "primereact/utils";
+import { ArrowRightIcon } from "../editor/ui/Icons";
+
+export function SectionHeadline({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={classNames(
+        "mt-2 mb-2 font-bold flex gap-2 items-center w-fit",
+        className
+      )}
+    >
+      <ArrowRightIcon /> {children}
+    </div>
+  );
+}