@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/splash-screen/NewPage.tsx

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

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

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

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