@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/commands/deleteVersionCommand.ts

@@ -0,0 +1,71 @@
+import { deleteVersion } from "../services/editService";
+import { getItemDescriptor } from "../utils";
+import { Command, CommandContext } from "./commands";
+
+export function getDeleteVersionCommand({}: {
+  language?: string;
+}): Command<CommandContext<any>> {
+  return {
+    id: "deleteVersion",
+    execute: (context) => execute(context),
+    label: "Delete Version",
+    icon: "pi pi-fw pi-times",
+    disabled: (context: CommandContext<any>) =>
+      !context.editContext.item?.canLock ||
+      context.editContext.item.version === 0 ||
+      context.editContext.itemVersions.length === 0,
+  };
+}
+
+async function execute(context: CommandContext<any>): Promise<void> {
+  if (!context.editContext.item) return;
+  const descriptor = getItemDescriptor(context.editContext.item);
+
+  let message =
+    "Are you sure you want to delete version " +
+    context.editContext.item.version +
+    "?";
+
+  const sessions = context.editContext.activeSessions.filter(
+    (x) =>
+      ((x.item?.id === descriptor.id &&
+        x.item?.language === descriptor.language &&
+        x.item?.version === descriptor.version) ||
+        (x.page?.id === descriptor.id &&
+          x.page?.language === descriptor.language &&
+          x.page?.version === descriptor.version)) &&
+      x.sessionId !== context.editContext.sessionId
+  );
+
+  if (sessions.length > 0) {
+    context.editContext.showMessageDialog({
+      header: "Delete Version",
+      message:
+        "This version is currently locked by " +
+        sessions.map((x) => x.user.name).join(", ") +
+        ". You cannot delete it.",
+    });
+    return;
+  }
+
+  if (
+    context.editContext.itemVersions[
+      context.editContext.itemVersions.length - 1
+    ]?.version === context.editContext.item.version
+  ) {
+    message += " This is the latest version!";
+  }
+
+  context.editContext.confirm?.({
+    header: "Delete Version",
+    message,
+    showCancel: true,
+    accept: async () => {
+      await deleteVersion(descriptor, context.editContext.sessionId);
+      context.editContext.loadItem({
+        ...descriptor,
+        version: 0,
+      });
+    },
+  });
+}

package/src/editor/commands/itemCommands.tsx

@@ -0,0 +1,351 @@
+import { Command, CommandContext, CommandData } from "./commands";
+import { FullItem, ItemDescriptor } from "../pageModel";
+
+import { ItemNameDialog, ItemNameDialogProps } from "../ui/ItemNameDialogNew";
+
+import {
+  CopyMoveTargetSelectorDialog,
+  CopyMoveTargetSelectorDialogProps,
+} from "../ui/CopyMoveTargetSelectorDialog";
+import { defaultTranslateAll } from "./localizeItem/LocalizeItemUtils";
+import { TranslationStatus } from "../../config/types";
+
+export type ItemCommandData = CommandData & {
+  items: FullItem[];
+};
+
+export type ItemCommandContext = CommandContext<ItemCommandData>;
+
+export type ItemCommand = Command<ItemCommandData>;
+
+export const deleteItemCommand: ItemCommand = {
+  id: "deleteItem",
+  label: "Delete",
+  icon: "pi pi-times",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items || !context.data?.items[0]?.canDelete || false,
+  execute: async (context: ItemCommandContext) => {
+    const items = context.data?.items;
+
+    if (!items || items.length === 0) return;
+    const confirmed = await new Promise<boolean>((resolve) => {
+      context.editContext.confirm({
+        message: (
+          <div>
+            Are you sure you want to delete{" "}
+            <em>{items.map((x) => x.name).join(", ")}</em>? This cannot be
+            undone.
+          </div>
+        ),
+        header: "Confirmation",
+        icon: "pi pi-exclamation-triangle",
+        accept: () => resolve(true),
+        reject: () => resolve(false),
+        showCancel: true,
+      });
+    });
+
+    if (confirmed) {
+      if (
+        items.some(
+          (x) => context.editContext.contentEditorItem?.descriptor.id === x.id,
+        )
+      ) {
+        const firstItem = items[0];
+        if (firstItem) {
+          context.editContext.loadItem({
+            id: firstItem.parentId,
+            language: context.editContext.contentEditorItem!.language,
+            version: 0,
+          });
+        }
+      }
+
+      await context.editContext.operations.deleteItems(
+        items.map((x) => x.descriptor),
+      );
+
+      return true;
+    }
+    return false;
+  },
+};
+export const renameItemCommand: ItemCommand = {
+  id: "renameItem",
+  label: "Rename",
+  icon: "pi pi-pencil",
+  keyBinding: "F2",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items ||
+    context.data.items.length !== 1 ||
+    !context.data.items[0]?.canRename ||
+    false,
+  execute: async (context: ItemCommandContext) => {
+    const item = context.data?.items[0];
+
+    if (!item) return;
+    const newName = await context.openDialog<string, ItemNameDialogProps>(
+      ItemNameDialog,
+      {
+        name: item.name,
+        title: "Rename Item",
+        message: "Enter a new name for the item:",
+        parentItem: { ...item.descriptor, id: item.parentId },
+        itemId: item.id,
+      },
+    );
+    if (newName) {
+      await context.editContext.operations.renameItem(item.descriptor, newName);
+    }
+  },
+};
+
+type InsertItemCommandData = ItemCommandData & {
+  templateId: string;
+};
+
+export type InsertItemCommandContext = CommandContext<InsertItemCommandData>;
+
+export type InsertItemCommand = Command<InsertItemCommandData>;
+
+export const insertItemCommand: ItemCommand = {
+  id: "insertItem",
+  label: "Insert Item",
+  icon: "pi pi-plus",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items ||
+    context.data.items.length !== 1 ||
+    !context.data.items[0]?.canCreate ||
+    false,
+  execute: async (context: InsertItemCommandContext) => {
+    const parentItem = context.data?.items[0];
+    const templateId = context.data?.templateId;
+
+    if (!parentItem || !templateId) return;
+
+    const templateItem = await context.editContext.itemsRepository.getItem({
+      id: templateId,
+      language: "en",
+      version: 0,
+    });
+    const templateName = templateItem?.name;
+
+    const name = await context.openDialog<string, ItemNameDialogProps>(
+      ItemNameDialog,
+      {
+        title: "Create Item",
+        message: "Enter a name for the new item:",
+        name: templateName,
+        parentItem: parentItem.descriptor,
+      },
+    );
+    if (name) {
+      const result = await context.editContext.operations.createItem(
+        parentItem.descriptor,
+        templateId,
+        name,
+      );
+
+      if (result) {
+        context.editContext.loadItem(result);
+      }
+
+      return result;
+    }
+  },
+};
+
+type MoveCopyItemsCommandData = ItemCommandData & {
+  targetItem: ItemDescriptor;
+  index: number;
+};
+
+export type MoveCopyItemsCommandContext =
+  CommandContext<MoveCopyItemsCommandData>;
+
+export type MoveCopyItemsCommand = Command<MoveCopyItemsCommandData>;
+
+export const moveItemsCommand: MoveCopyItemsCommand = {
+  id: "moveItems",
+  label: "Move Item(s)",
+  icon: "pi pi-arrow-right",
+  disabled: (context: MoveCopyItemsCommandContext) =>
+    !context.data?.items ||
+    context.data.items.some((x) => !x.canDelete) ||
+    false,
+  execute: async (context: MoveCopyItemsCommandContext) => {
+    const items = context.data?.items;
+    let targetItem = context.data?.targetItem;
+    let index = context.data?.index;
+
+    if (!items) return;
+
+    if (!targetItem) {
+      const result = await context.openDialog<
+        ItemDescriptor,
+        CopyMoveTargetSelectorDialogProps
+      >(CopyMoveTargetSelectorDialog, {
+        items: items ?? [],
+        editContext: context.editContext,
+        header: "Select Target Item",
+        label:
+          items?.length && items.length > 1
+            ? `Move ${items?.length} items`
+            : `Move item`,
+      });
+      if (result) {
+        targetItem = result;
+        index = -1;
+      }
+    }
+
+    if (!targetItem) return;
+
+    context.editContext.operations.moveItems(items, targetItem, index ?? 0);
+  },
+};
+
+export const copyItemsCommand: MoveCopyItemsCommand = {
+  id: "copyItems",
+  label: "Copy Item(s)",
+  icon: "pi pi-copy",
+  disabled: (context: MoveCopyItemsCommandContext) =>
+    !context.data?.items || false,
+  execute: async (context: MoveCopyItemsCommandContext) => {
+    console.log("copyItemsCommand", context.data);
+    const items = context.data?.items;
+    let targetItem = context.data?.targetItem;
+    let index = context.data?.index;
+
+    if (!targetItem) {
+      const result = await context.openDialog<
+        ItemDescriptor,
+        CopyMoveTargetSelectorDialogProps
+      >(CopyMoveTargetSelectorDialog, {
+        items: items ?? [],
+        editContext: context.editContext,
+        header: "Select Target Item",
+        label:
+          items?.length && items.length > 1
+            ? `Copy ${items?.length} items`
+            : `Copy item`,
+      });
+      if (result) {
+        targetItem = result;
+        index = -1;
+      }
+    }
+
+    if (!items || !targetItem) return;
+
+    const result = await context.editContext.operations.copyItems(
+      items,
+      targetItem,
+      index ?? 0,
+    );
+    if (result && result.length > 0 && result[0]) {
+      context.editContext.loadItem(result[0]);
+    }
+  },
+};
+
+export const duplicateItemCommand: MoveCopyItemsCommand = {
+  id: "duplicateItem",
+  label: "Duplicate Item",
+  icon: "pi pi-clone",
+  disabled: (context: MoveCopyItemsCommandContext) =>
+    !context.data?.items || context.data.items.length !== 1 || false,
+  execute: async (context: MoveCopyItemsCommandContext) => {
+    const item = context.data?.items[0];
+    console.log("item", item);
+    if (!item) return;
+    const targetItem = {
+      id: item.parentId,
+      language: item.language,
+      version: 0,
+    };
+
+    const newName = await context.openDialog<string, ItemNameDialogProps>(
+      ItemNameDialog,
+      {
+        name: item.name,
+        title: "Duplicate Item",
+        message: "Enter a name for the new item:",
+        parentItem: { ...item.descriptor, id: item.parentId },
+        itemId: item.id,
+      },
+    );
+    if (newName) {
+      const result = await context.editContext.operations.duplicateItem(
+        item.descriptor,
+        targetItem,
+        newName,
+      );
+      if (result) {
+        context.editContext.loadItem(result);
+      }
+
+      return result;
+    }
+  },
+};
+
+export type LocalizeItemCommandData = ItemCommandData & {
+  targetLanguages: string[];
+  translationProvider: string;
+  translationStatus: TranslationStatus[];
+};
+
+export type TargetLanguage = {
+  language: string;
+  version: number;
+};
+
+export type LocalizeItemCommandContext =
+  CommandContext<LocalizeItemCommandData>;
+
+export type LocalizeItemCommand = Command<LocalizeItemCommandData>;
+
+export const localizeItemCommand: LocalizeItemCommand = {
+  id: "localizeItem",
+  label: "Localize",
+  icon: "pi pi-globe",
+  disabled: (context: LocalizeItemCommandContext) =>
+    !context.data?.items || context.data.items.length === 0 || false,
+  execute: async (context: LocalizeItemCommandContext) => {
+    const items = context.data?.items;
+    if (
+      !items ||
+      !items?.length ||
+      !context.data?.targetLanguages ||
+      !context.data?.translationProvider ||
+      !context.data?.translationStatus ||
+      !context.data?.translationStatus.length
+    ) {
+      return;
+    }
+    await defaultTranslateAll(
+      context.data?.targetLanguages,
+      context.data?.translationStatus,
+      context.editContext.sessionId,
+      items[0]!,
+      context.data?.translationProvider,
+    );
+  },
+};
+
+export const publishItemCommand: ItemCommand = {
+  id: "publishItem",
+  label: "Publish",
+  icon: "pi pi-cloud-upload",
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items ||
+    context.data.items.length !== 1 ||
+    !context.data.items[0]?.canLock ||
+    false,
+  execute: async (context: ItemCommandContext) => {
+    const item = context.data?.items[0];
+    if (!item) return;
+    await context.editContext.switchView("publish");
+  },
+};

package/src/editor/commands/localizeItem/LocalizeItemDialog.tsx

@@ -0,0 +1,201 @@
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { useEffect, useState } from "react";
+import DialogButtons from "../../ui/DialogButtons";
+import { DialogProps } from "../../client/editContext";
+import { getLanguagesAndVersions } from "../../services/contentService";
+import { FullItem, ItemDescriptor } from "../../pageModel";
+import { LanguageVersions } from "../../../types";
+import { Checkbox } from "primereact/checkbox";
+
+import { EditContextType } from "../../client/editContext";
+import { Spinner } from "../../ui/Spinner";
+
+export type LocalizeItemDialogProps = {
+  items: FullItem[];
+  editContext: EditContextType;
+};
+
+type LanguageData = {
+  name: string;
+  items: ItemDescriptor[];
+};
+
+export function LocalizeItemDialog(
+  props: LocalizeItemDialogProps & DialogProps<string>,
+) {
+  const [languageSelection, setLanguageSelection] = useState<
+    Record<string, boolean>
+  >({});
+  const [languageData, setLanguageData] = useState<Map<string, LanguageData>>();
+
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [currentTask, setCurrentTask] = useState<string>();
+  const [completedTasks, setCompletedTasks] = useState<string[]>([]);
+  const [finished, setFinished] = useState(false);
+
+  useEffect(() => {
+    const itemDescriptors = props.items.map((x) => x.descriptor);
+
+    const loadLanguages = async () => {
+      const itemLanguages = await Promise.all(
+        itemDescriptors.map(async (item: ItemDescriptor) => {
+          const result = await getLanguagesAndVersions(item);
+          return result.data?.languages || [];
+        }),
+      );
+      const languageMap = new Map<string, LanguageData>();
+      itemLanguages.forEach((languages, index) => {
+        languages.forEach((language: LanguageVersions) => {
+          const languageData: LanguageData = languageMap.get(language.name) || {
+            name: language.name,
+            items: [],
+          };
+          if (language.versions > 0 && itemDescriptors[index])
+            languageData.items.push(itemDescriptors[index]);
+          languageMap.set(language.languageCode, languageData);
+        });
+      });
+      setLanguageData(languageMap);
+    };
+    loadLanguages();
+  }, [props]);
+
+  async function startLocalization() {
+    setIsExecuting(true);
+    const completedTasks: string[] = [];
+    for (const item of props.items) {
+      for (const language of Object.keys(languageSelection)) {
+        if (!languageSelection[language]) continue;
+        if (
+          languageData
+            ?.get(language)
+            ?.items.find((x) => x.id === item.descriptor.id)
+        )
+          continue;
+        setCurrentTask(`${item.name} - ${language}`);
+        await props.editContext.operations.createVersion({
+          id: item.descriptor.id,
+          language: language,
+          version: 0,
+        });
+        completedTasks.push(`${item.name} - ${language}`);
+      }
+    }
+    setFinished(true);
+    setCompletedTasks(completedTasks);
+  }
+
+  const allLanguages = Array.from(languageData?.keys() || []).map((x) => ({
+    code: x,
+    name: languageData?.get(x)?.name || "",
+  }));
+
+  allLanguages.sort((a, b) => a.name.localeCompare(b.name));
+
+  const dialogContent = getContent();
+
+  function getContent() {
+    if (finished)
+      return (
+        <div className="justify flex h-full flex-col gap-1">
+          {completedTasks.length > 0 && (
+            <>
+              <div className="px-3 pt-3 text-lg font-bold">
+                Finished. Versions created:
+              </div>
+              <div className="relative flex-1">
+                <div className="absolute inset-3 flex flex-col gap-3 overflow-y-auto">
+                  {completedTasks.map((x, index) => (
+                    <div key={index}>{x}</div>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+          {completedTasks.length === 0 && (
+            <div className="flex h-full items-center justify-center">
+              All items are already localized.
+            </div>
+          )}
+          <DialogButtons>
+            <Button onClick={() => props.onClose?.(null)} label="Close" />
+          </DialogButtons>
+        </div>
+      );
+
+    if (isExecuting)
+      return (
+        <div className="flex h-full items-center justify-center gap-3">
+          <Spinner /> Creating version {currentTask}
+        </div>
+      );
+
+    return (
+      <div className="justify flex h-full flex-col gap-1 text-sm">
+        <div className="flex h-full flex-col gap-2 p-3">
+          <div className="my-2">
+            Select languages to localize{" "}
+            {props.items.map((x) => x.name).join(", ")}:
+          </div>
+          <div className="my-1 flex items-center gap-2">
+            <Checkbox
+              checked={allLanguages.every(
+                (language) => languageSelection[language.code],
+              )}
+              onChange={(e) => {
+                setLanguageSelection(
+                  Object.fromEntries(
+                    Array.from(languageData?.keys() || []).map((language) => [
+                      language,
+                      e.checked || false,
+                    ]),
+                  ),
+                );
+              }}
+            />{" "}
+            All
+          </div>
+          <div className="relative flex-1">
+            <div className="absolute top-0 left-0 h-full w-full overflow-y-auto">
+              {allLanguages.map((language) => (
+                <div
+                  key={language.code}
+                  className="my-2 flex items-center gap-2"
+                >
+                  <Checkbox
+                    checked={languageSelection[language.code] || false}
+                    onChange={(e) => {
+                      setLanguageSelection((prev) => ({
+                        ...prev,
+                        [language.code]: e.checked || false,
+                      }));
+                    }}
+                  />
+                  <div>{language.name}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <DialogButtons>
+          <Button onClick={startLocalization} label="Start" />
+          <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+        </DialogButtons>
+      </div>
+    );
+  }
+
+  return (
+    <Dialog
+      visible={true}
+      onHide={() => {
+        props.onClose?.(null);
+      }}
+      style={{ width: "75vw", height: "75vh" }}
+      header="Localize"
+    >
+      {dialogContent}
+    </Dialog>
+  );
+}

package/src/editor/commands/localizeItem/LocalizeItemUtils.ts

@@ -0,0 +1,27 @@
+import { requestTranslation } from "../../services/translationService";
+import { TranslationStatus } from "../../../config/types";
+import { FullItem } from "../../pageModel";
+
+export const defaultTranslateAll = async (languageCodes: string[], translationStatus: TranslationStatus[], sessionId: string, item: FullItem, translationProvider: string) => {
+  const translationPromises = [];
+
+  for (const languageCode of languageCodes) { 
+    const status = translationStatus?.find(
+      (x) => x.targetLanguage === languageCode
+    );
+    if (!status) continue;
+    if (status.sourceLanguage === languageCode) continue;
+
+    translationPromises.push(
+      requestTranslation({
+        itemId: item.descriptor.id,
+        targetLanguage: languageCode,
+        sourceLanguage: status.sourceLanguage,
+        sessionId: sessionId,
+        provider: translationProvider,
+        metadata: ""
+    }));
+  }
+
+  await Promise.all(translationPromises);
+};

package/src/editor/commands/undo.ts

@@ -0,0 +1,39 @@
+import { CommandContext } from "./commands";
+
+export function getUndoCommand() {
+  return {
+    id: "undo",
+    label: "Undo",
+    icon: "pi pi-undo",
+    execute: async (context: CommandContext<any>) => {
+      context.editContext.operations.undo();
+    },
+    disabled: (context: CommandContext<any>) => {
+      return (
+        context.editContext.editHistory.length === 0 ||
+        !context.editContext.editHistory.find(
+          (x) => x.sessionId === context.editContext.sessionId && x.canUndo
+        )
+      );
+    },
+  };
+}
+
+export function getRedoCommand() {
+  return {
+    id: "redo",
+    label: "Redo",
+    icon: "pi pi-refresh",
+    execute: async (context: CommandContext<any>) => {
+      context.editContext.operations.redo();
+    },
+    disabled: (context: CommandContext<any>) => {
+      return (
+        context.editContext.editHistory.length === 0 ||
+        !context.editContext.editHistory.find(
+          (x) => x.sessionId === context.editContext.sessionId && x.canRedo
+        )
+      );
+    },
+  };
+}