@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/views/CompareView.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useState } from "react";
+import { EditorMode, useEditContext } from "../client/editContext";
+import { LanguageSelector } from "../menubar/LanguageSelector";
+import { VersionSelector } from "../menubar/VersionSelector";
+import { FullItem, ItemDescriptor, Version } from "../pageModel";
+import { usePageViewContext } from "../page-viewer/pageViewContext";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { SingleEditView } from "./SingleEditView";
+import { getLanguagesAndVersions } from "../services/contentService";
+import { Allotment } from "allotment";
+import { ItemEditor } from "./ItemEditor";
+
+export function CompareView() {
+  const editContext = useEditContext();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  if (!editContext) return;
+
+  const [compareToItem, setCompareToItem] = useState<FullItem | undefined>();
+  const [compareToVersions, setCompareToVersions] = useState<Version[]>([]);
+
+  const compareTo = editContext.compareTo;
+  const setCompareTo = editContext.setCompareTo;
+
+  const comparePageViewContext = usePageViewContext({
+    pageItemDescriptor: compareToItem?.descriptor,
+    itemsRepository: editContext.itemsRepository,
+    configuration: editContext.configuration,
+  });
+
+  useEffect(() => {
+    comparePageViewContext.setDevice(editContext.pageView.device);
+  }, [editContext.pageView.device]);
+
+  const updateCompareToVersions = async () => {
+    if (!compareTo || !compareTo.id || !compareTo.language) {
+      setCompareToVersions([]);
+      return;
+    }
+    const result = await getLanguagesAndVersions(compareTo);
+    if (result?.data) {
+      const versions = result.data.versions.reverse();
+      setCompareToVersions(versions);
+    }
+  };
+
+  useEffect(() => {
+    const updateCompareTo = async () => {
+      if (!editContext) return;
+      if (editContext.contentEditorItem) {
+        let urlLanguage =
+          searchParams.get("compareLanguage") ||
+          editContext.contentEditorItem.descriptor.language;
+        let urlVersion =
+          parseInt(searchParams.get("compareVersion") || "0") ||
+          editContext.currentItemDescriptor?.version;
+
+        const language = editContext.itemLanguages.find(
+          (x) => x.languageCode === urlLanguage,
+        );
+
+        if (!language || !language.versions) {
+          urlLanguage = "";
+        }
+
+        if (!editContext.currentItemDescriptor?.id || !language) {
+          setCompareTo(undefined);
+          return;
+        }
+
+        const result = await getLanguagesAndVersions({
+          id: editContext.currentItemDescriptor?.id,
+          language: language.languageCode,
+          version: 0,
+        });
+        if (result?.data) {
+          const versions = [...result.data.versions].reverse();
+          const version = versions.find((x) => x.version === urlVersion);
+
+          setCompareTo({
+            id: editContext.contentEditorItem.descriptor.id,
+            language: urlLanguage,
+            version: version?.version || 0,
+          });
+        }
+      }
+    };
+    updateCompareTo();
+  }, [searchParams, editContext?.itemLanguages]);
+
+  useEffect(() => {
+    const updateCompareToItem = async () => {
+      if (!compareTo || !compareTo.id || !compareTo.language) {
+        setCompareToItem(undefined);
+        return;
+      }
+      const item = await editContext?.itemsRepository.getItem(compareTo);
+      setCompareToItem(item);
+    };
+    updateCompareToItem();
+    updateCompareToVersions();
+  }, [compareTo]);
+
+  function updateCompareTo(compareToItemDescriptor: ItemDescriptor) {
+    if (compareToItemDescriptor) {
+      const newParams = new URLSearchParams(searchParams.toString());
+      newParams.set("compareLanguage", compareToItemDescriptor.language);
+      newParams.set(
+        "compareVersion",
+        compareToItemDescriptor.version.toString(),
+      );
+      router.push(`?${newParams.toString()}`);
+    }
+  }
+
+  const originalSelector = (
+    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b bg-gray-100 p-1 text-sm text-gray-600">
+      <LanguageSelector
+        selectedLanguage={editContext.contentEditorItem?.descriptor?.language}
+        showAllLanguagesSwitch={false}
+        darkMode
+        onLanguageSelected={(language) => {
+          if (!editContext.contentEditorItem) return;
+          editContext.loadItem({
+            id: editContext.contentEditorItem.descriptor.id,
+            language: language.languageCode,
+            version: 0,
+          });
+        }}
+      />
+      {compareTo?.language && (
+        <VersionSelector
+          darkMode
+          readOnly={true}
+          versions={editContext.itemVersions}
+          itemDescriptor={editContext.currentItemDescriptor}
+          actualVersion={editContext.contentEditorItem?.version}
+          onVersionSelected={(version) => {
+            if (!editContext.contentEditorItem) return;
+            editContext.loadItem({
+              id: editContext.contentEditorItem.descriptor.id,
+              language: editContext.contentEditorItem.descriptor.language,
+              version,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+
+  const compareToSelector = (
+    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b bg-gray-100 p-1 text-sm text-gray-600">
+      <LanguageSelector
+        selectedLanguage={compareTo?.language}
+        showAllLanguagesSwitch={false}
+        darkMode
+        onLanguageSelected={(language) => {
+          if (!compareTo?.id) return;
+          updateCompareTo({
+            id: compareTo.id,
+            language: language.languageCode,
+            version: compareTo.version,
+          });
+        }}
+      />
+      {compareTo?.language && (
+        <VersionSelector
+          darkMode
+          readOnly={true}
+          versions={compareToVersions}
+          itemDescriptor={compareTo}
+          actualVersion={compareToItem?.version}
+          onVersionSelected={(version) => {
+            if (!compareTo?.id) return;
+            updateCompareTo({
+              id: compareTo.id,
+              language: compareTo.language,
+              version,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+
+  if (
+    (compareToItem && !compareToItem.hasLayout) ||
+    comparePageViewContext.device === ""
+  )
+    return (
+      <div className="flex h-full w-full flex-col items-stretch">
+        <div className="flex w-full">
+          {originalSelector}
+          {compareToSelector}
+        </div>
+        <div className="relative flex-1">
+          <div className="absolute h-full w-full">
+            <ItemEditor
+              pageViewContext={editContext.pageView}
+              compareToItem={compareToItem}
+            />
+          </div>
+        </div>
+      </div>
+    );
+
+  return (
+    <Allotment className="flex h-full w-full">
+      <Allotment.Pane>
+        <div className="flex h-full w-full flex-col items-stretch">
+          {originalSelector}
+          <SingleEditView
+            key="original"
+            name="original"
+            compareView={false}
+            pageViewContext={editContext.pageView}
+            itemDescriptor={editContext.contentEditorItem?.descriptor}
+          />
+        </div>
+      </Allotment.Pane>
+      <Allotment.Pane>
+        <div className="flex h-full w-full flex-col items-stretch">
+          {compareToSelector}
+          {compareTo?.language && (
+            <SingleEditView
+              key="compareTo"
+              name="compareTo"
+              compareView={true}
+              pageViewContext={comparePageViewContext}
+              itemDescriptor={compareTo}
+            />
+          )}
+          {!compareTo?.language && (
+            <div className="flex h-full w-full flex-col items-center justify-center">
+              <div className="text-gray-400">
+                Select a language and version to compare
+              </div>
+            </div>
+          )}
+        </div>
+      </Allotment.Pane>
+    </Allotment>
+  );
+}

package/src/editor/views/EditView.tsx

@@ -0,0 +1,27 @@
+import { useEditContext } from "../client/editContext";
+import { CompareView } from "./CompareView";
+import { SingleEditView } from "./SingleEditView";
+
+export function EditView() {
+  const editContext = useEditContext();
+  if (!editContext) return null;
+
+  if (!editContext.contentEditorItem?.descriptor)
+    return (
+      <div className="grid h-full w-full items-center justify-center">
+        <div className="text-sm text-gray-500">Not item selected</div>
+      </div>
+    );
+
+  if (editContext.compareMode) return <CompareView />;
+
+  return (
+    <SingleEditView
+      key="single"
+      name="single"
+      compareView={false}
+      pageViewContext={editContext.pageView}
+      itemDescriptor={editContext.contentEditorItem?.descriptor}
+    />
+  );
+}

package/src/editor/views/ItemEditor.tsx

@@ -0,0 +1,58 @@
+import { Button } from "primereact/button";
+import { EditorWarnings } from "../EditorWarnings";
+import { FieldList } from "../FieldList";
+import { ItemInfo } from "../ItemInfo";
+import { useEditContext } from "../client/editContext";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { FullItem } from "../pageModel";
+
+export function ItemEditor({
+  item,
+  compareToItem,
+}: {
+  item?: FullItem;
+  compareToItem?: FullItem;
+  pageViewContext?: PageViewContext;
+}) {
+  const editContext = useEditContext();
+
+  if (!editContext) return;
+  if (!item) item = editContext.contentEditorItem;
+  if (!item) return;
+
+  const pageValidators =
+    editContext.validationResult?.find(
+      (x) =>
+        x.item.id === item?.id &&
+        x.item.language === item?.language &&
+        x.item.version === item?.version,
+    )?.results || [];
+
+  return (
+    <div className="absolute inset-0 overflow-y-auto">
+      <EditorWarnings item={item} />
+      <ItemInfo item={item} />
+
+      {editContext.itemVersions.length > 0 && (
+        <FieldList
+          fields={[{ fields: Object.values(item.fields) }]}
+          validators={pageValidators.filter((x) => x.itemId === item.id)}
+          showStandardFieldsEnabled={true}
+          compareToFields={compareToItem?.fields}
+        />
+      )}
+
+      {editContext.itemVersions.length === 0 && (
+        <div className="flex justify-center p-4">
+          <Button
+            onClick={async () => {
+              await editContext.operations.createVersion(item.descriptor);
+            }}
+          >
+            Create First Version ({item.language})
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/editor/views/MediaFolderEditView.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { SimpleTabs, Tab } from "../ui/SimpleTabs";
+import { MediaFolderBrowser } from "../media-selector/MediaFolderBrowser";
+import { ItemEditor } from "./ItemEditor";
+import { FullItem } from "../pageModel";
+import { useEditContext } from "../client/editContext";
+
+export function MediaFolderEditView({ item }: { item?: FullItem }) {
+  const [activeTabKey, setActiveTabKey] = useState("media-browser");
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+  if (!item) item = editContext.contentEditorItem;
+  if (!item) return null;
+
+  const tabPanels: Tab[] = [];
+
+  // Media Browser tab for media folders - First tab
+  tabPanels.push({
+    label: "Media Browser",
+    content: (
+      <div className="relative flex flex-1 flex-col">
+        <div className="absolute inset-0 overflow-y-auto">
+          <MediaFolderBrowser
+            folderId={item.id}
+            language={item.language}
+            onMediaSelected={async (mediaId: string) => {
+              // Open media selector for the selected media item
+              const result = await editContext.selectMedia({
+                selectedIdPath: `${item.idPath}/${mediaId}`,
+                mode: "images",
+              });
+              if (result) {
+                console.log("Selected media:", result);
+              }
+            }}
+          />
+        </div>
+      </div>
+    ),
+    id: "media-browser",
+  });
+
+  // Content tab - using the standard ItemEditor
+  tabPanels.push({
+    label: "Content",
+    content: (
+      <div className="relative h-full">
+        <ItemEditor item={item} />
+      </div>
+    ),
+    id: "content",
+  });
+
+  return (
+    <div className="flex h-full flex-col">
+      <SimpleTabs
+        key="media-folder-edit-tabs"
+        tabs={tabPanels}
+        className="border-b border-gray-200 bg-gray-50 px-4 py-2.5 text-sm"
+        activeTab={tabPanels.findIndex((x) => x.id === activeTabKey) || 0}
+        setActiveTab={(index) => setActiveTabKey(tabPanels[index]?.id!)}
+      />
+    </div>
+  );
+}

package/src/editor/views/SingleEditView.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useEffect } from "react";
+import { useEditContext } from "../client/editContext";
+import { PageViewer } from "../page-viewer/PageViewer";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { FullItem, ItemDescriptor } from "../pageModel";
+import { ItemEditor } from "./ItemEditor";
+import { MediaFolderEditView } from "./MediaFolderEditView";
+
+export function SingleEditView({
+  pageViewContext,
+  itemDescriptor,
+  compareView,
+  name,
+}: {
+  pageViewContext: PageViewContext;
+  itemDescriptor?: ItemDescriptor;
+  compareView: boolean;
+  name: string;
+}) {
+  const editContext = useEditContext();
+  const [item, setItem] = useState<FullItem | undefined>(undefined);
+
+  useEffect(() => {
+    async function loadItem() {
+      if (!itemDescriptor) return;
+      const item = await editContext?.itemsRepository.getItem(itemDescriptor);
+      setItem(item);
+    }
+    loadItem();
+  }, [itemDescriptor]);
+
+  if ((item && !item.hasLayout) || pageViewContext.device === "") {
+    // Check if this is a media folder
+    const isMediaFolder =
+      item?.templateId?.toLowerCase() ===
+      "fe5dd826-48c6-436d-b87a-7c4210c7413b";
+
+    if (isMediaFolder) {
+      return <MediaFolderEditView item={item} />;
+    }
+
+    return <ItemEditor item={item} />;
+  }
+
+  return (
+    <PageViewer
+      pageViewContext={pageViewContext}
+      showFormEditor={
+        editContext?.viewName == "page-editor" || !editContext?.isMobile
+      }
+      compareView={compareView}
+      name={name}
+      followEditsDefault={true}
+    />
+  );
+}

package/src/fonts/index.ts

@@ -0,0 +1,10 @@
+import { Inter } from "next/font/google";
+
+export const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export const fonts = {
+  inter,
+};

package/src/index.ts

@@ -0,0 +1,23 @@
+export * from "./config/types";
+
+export * from "./types";
+
+export { Editor } from "./editor/Editor";
+
+export { configureForUser } from "./config/config";
+
+export type { DialogProps } from "./editor/client/editContext";
+
+export type {
+  LocalizeItemCommand,
+  LocalizeItemCommandContext,
+  LocalizeItemCommandData,
+} from "./editor/commands/itemCommands";
+
+export { requestTranslation } from "./editor/services/translationService";
+
+export { defaultTranslateAll } from "./editor/commands/localizeItem/LocalizeItemUtils";
+
+export * from "./fonts";
+
+export { Card } from "./components/ui/card";

package/src/lib/safelist.tsx

@@ -0,0 +1,16 @@
+export function Safelist() {
+  return (
+    <>
+      <div className="bg-orange-400"></div>
+      <div className="bg-purple-400"></div>
+      <div className="bg-sky-400"></div>
+      <div className="bg-red-400"></div>
+      <div className="bg-teal-400"></div>
+      <div className="border-orange-400"></div>
+      <div className="border-purple-400"></div>
+      <div className="border-sky-400"></div>
+      <div className="border-red-400"></div>
+      <div className="border-teal-400"></div>
+    </>
+  );
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/page-wizard/PageWizard.tsx

@@ -0,0 +1,139 @@
+import { useEditContext } from "../editor/client/editContext";
+
+import { WizardSteps } from "./WizardSteps";
+import { Thumbnail } from "../editor/media-selector/Thumbnails";
+
+export type Wizard = {
+  id: string;
+  name: string;
+  description: string;
+  steps: WizardStep[];
+  icon: string;
+  schema: PageSchema;
+  templateId: string;
+};
+
+export type PageSchema = SchemaPlaceholder[];
+
+export type SchemaComponent = {
+  type: string;
+  typeId: string;
+  fields: SchemaField[];
+  placeholders: SchemaPlaceholder[];
+};
+
+export type SchemaPlaceholder = {
+  name: string;
+  components: SchemaComponent[];
+};
+
+export type SchemaField = {
+  id: string;
+  name: string;
+  type: string;
+};
+
+export type WizardSchemaComponent = {
+  type: string;
+  fields: WizardSchemaField[];
+  availableParentPlaceholders?: string[];
+  allowedChildrenComponentTypes: string[];
+  allowedOnRoot: boolean;
+};
+
+export type WizardSchemaField = {
+  name: string;
+  type: string;
+};
+
+export type WizardStep = {
+  id: string;
+  name: string;
+  type: string;
+  fields: { [key: string]: string };
+  children?: WizardStep[];
+};
+
+export type WizardData = {
+  [key: string]: any;
+};
+
+export type WizardPageModel = {
+  components: WizardPageComponent[];
+  name: string;
+  metaDescription: string;
+  metaKeywords: string;
+  message?: string;
+  images?: Thumbnail[];
+};
+
+export type WizardPageComponent = {
+  id: string;
+  name: string;
+  type: string;
+  fields: WizardField[];
+  children?: WizardPageComponent[];
+  description: string;
+  placeholder?: string;
+};
+
+export type WizardField = {
+  name: string;
+  value: string;
+  type: string;
+  writtenValue?: string;
+};
+
+export function PageWizard() {
+  const editContext = useEditContext();
+  // const [wizard, setWizard] = useState<Wizard | null>(null);
+  // const [parentItem, setParentItem] = useState<ItemDescriptor>();
+
+  const { wizard, parentItem } = editContext?.pageWizard || {};
+  // const searchParams = useSearchParams();
+
+  // // Load all wizards and check URL param on mount
+  // useEffect(() => {
+  //   if (!editContext?.currentItemDescriptor) return;
+  //   getWizards(editContext?.currentItemDescriptor).then((availableWizards) => {
+  //     // Check for wizard ID in URL
+  //     const params = new URLSearchParams(window.location.search);
+  //     const wizardName = params.get("wizard");
+
+  //     if (wizardName) {
+  //       // Find wizard by ID from the loaded wizards
+  //       const foundWizard = availableWizards.find((w) => w.name === wizardName);
+  //       if (foundWizard) {
+  //         setWizard(foundWizard);
+  //         setParentItem(editContext.currentItemDescriptor);
+  //       }
+  //     }
+  //   });
+  // }, [searchParams]);
+
+  // const handleSelect = (selectedWizard: Wizard) => {
+  //   setWizard(selectedWizard);
+  //   // Update URL with wizard ID
+  //   const url = new URL(window.location.href);
+  //   url.searchParams.set("wizard", selectedWizard.name);
+  //   window.history.pushState({}, "", url);
+  // };
+
+  // const handleCancel = () => {
+  //   editContext?.pageWizard.setWizard(undefined);
+  //   // Remove wizard from URL
+  //   const url = new URL(window.location.href);
+  //   url.searchParams.delete("wizard");
+  //   window.history.pushState({}, "", url);
+  //   editContext?.switchView("content-editor");
+  // };
+
+  if (!editContext?.currentItemDescriptor) return null;
+
+  if (!parentItem || !wizard) {
+    editContext.switchView("content-editor", { skipConfirmation: true });
+    return null;
+  }
+
+  return <WizardSteps wizard={wizard} parentItem={parentItem} />;
+}

package/src/page-wizard/WizardBox.tsx

@@ -0,0 +1,4 @@
+import { Card } from "../components/ui/card";
+
+// Re-export Card as WizardBox for backward compatibility
+export const WizardBox = Card;