@alpaca-editor/core 1.0.0

package/src/editor/client/operations.ts

@@ -0,0 +1,610 @@
+import uuid from "react-uuid";
+import {
+  AddComponentOperation,
+  DuplicateComponentsOperation,
+  EditFieldOperation,
+  EditOperation,
+  ExecuteEditOptions,
+  RenameItemOperation,
+  User,
+} from "../../types";
+import { FieldDescriptor, FullItem, ItemDescriptor, Page } from "../pageModel";
+import {
+  executeEditOperation,
+  executeRedo,
+  executeUndo,
+  executeWorkflowCommand,
+  executeDeleteItems,
+  ExecutionResult,
+  lockField,
+  lockItems,
+  unlockItems,
+  executeCreateItem,
+  createVersion as doCreateVersion,
+  executeMoveItems,
+} from "../services/editService";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { EditorConfiguration } from "../../config/types";
+import { ConfirmationDialogHandle } from "../ConfirmationDialog";
+import { handleErrorResult } from "./helpers";
+import { ItemsRepository } from "./itemsRepository";
+import { useDebouncedCallback } from "use-debounce";
+
+export function getOperationsContext(
+  state: {
+    page?: Page;
+    contentEditorItem?: FullItem;
+    sessionId: string;
+    user?: User;
+    setSelection: (ids: string[]) => void;
+    requestRefresh: (refresh: "immediate" | "waitForQuietPeriod") => void;
+    configuration: EditorConfiguration;
+    setLockedField: (field: FieldDescriptor) => void;
+    lockedField?: FieldDescriptor;
+    loadItem: (item: ItemDescriptor) => void;
+    itemsRepository: ItemsRepository;
+    editHistory: EditOperation[];
+    refreshHistory: (item: ItemDescriptor) => Promise<void>;
+  },
+  ui: {
+    showErrorToast: (error: { summary?: string; details?: string }) => void;
+    confirmationDialogRef: React.RefObject<ConfirmationDialogHandle | null>;
+    onOperationExecuted: (op: EditOperation) => void;
+  },
+) {
+  const [editOperationExecuted, setEditOperationExecuted] =
+    useState<EditOperation>();
+  const [executingEditOperations, setExecutingEditOperations] = useState<
+    EditOperation[]
+  >([]);
+
+  const lastOp = useRef<EditOperation | undefined>(undefined);
+
+  const undoing = useRef<boolean>(false);
+
+  const stateRef = useRef(state);
+
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+
+  const executeOp = async (
+    op: EditOperation,
+    options: ExecuteEditOptions = {
+      refresh: "immediate",
+    },
+  ): Promise<EditOperation> => {
+    console.log("Executing op", op);
+    setExecutingEditOperations((ops) => (ops ? [...ops, op] : [op]));
+    const result = await executeEditOperation(op, state.sessionId);
+    console.log("Result", result);
+    handleResult(result, options);
+    await state.refreshHistory(op.mainItem);
+    //state.addToEditHistory(result.data as EditOperation);
+    setEditOperationExecuted(result.data as EditOperation);
+    setExecutingEditOperations((ops) =>
+      ops ? ops.filter((x: EditOperation) => x.id !== op.id) : [],
+    );
+    return result.data as EditOperation;
+  };
+
+  const duplicateComponents = useCallback(
+    ({ componentIds }: { componentIds: string[] }) => {
+      const op = {
+        type: "duplicate-components",
+        mainItem: state.page?.item.descriptor,
+        sourceComponentIds: componentIds,
+        date: new Date().toISOString(),
+        id: uuid(),
+        description: "Duplicate components",
+      } as DuplicateComponentsOperation;
+
+      executeOp(op);
+    },
+    [state.page],
+  );
+
+  const addComponent = async (
+    componentTypeId: string,
+    placeholderKey: string,
+    index: number,
+  ) => {
+    const page = stateRef.current.page;
+
+    console.log(
+      "  component A",
+      componentTypeId,
+      placeholderKey,
+      index,
+      "PAGE ",
+      page,
+    );
+
+    if (!page) {
+      return;
+    }
+
+    const op: AddComponentOperation = {
+      type: "add-component",
+      mainItem: page.item.descriptor,
+      // parent: parentId
+      //   ? {
+      //       id: parentId,
+      //       language: page.item.language,
+      //       version: page.item.version,
+      //     }
+      //   : undefined,
+      placeholderKey,
+      placeholderIndex: index,
+      componentTypeId,
+      date: new Date().toISOString(),
+      id: uuid(),
+      description: "Add component",
+    };
+    const result = await executeOp(op);
+    return result as AddComponentOperation;
+  };
+
+  const handleResult = (
+    result: ExecutionResult<unknown>,
+    options: ExecuteEditOptions,
+  ) => {
+    if (handleErrorResult(result as ExecutionResult<unknown>, ui, state))
+      return;
+
+    const executedOps = Array.isArray(result.data)
+      ? result.data
+      : [result.data];
+
+    for (const executedOp of executedOps) {
+      if (
+        executedOp &&
+        (executedOp.type === "move-component" ||
+          executedOp.type === "add-component" ||
+          executedOp.type === "link-component" ||
+          executedOp.type === "duplicate-components")
+      ) {
+        if (executedOp.focus) {
+          state.setSelection([executedOp.focus]);
+        }
+      }
+
+      ui.onOperationExecuted(executedOp);
+    }
+
+    if (options.refresh !== "none") {
+      state.requestRefresh(
+        options.refresh === "immediate" ? "immediate" : "waitForQuietPeriod",
+      );
+    }
+  };
+
+  const ensureLock = useCallback(
+    async (field: FieldDescriptor): Promise<boolean> => {
+      if (!field || !field.item) return false;
+      if (
+        state.lockedField?.fieldId === field.fieldId &&
+        state.lockedField?.item.id === field.item.id &&
+        state.lockedField?.item.language === field.item.language &&
+        state.lockedField?.item.version === field.item.version
+      )
+        return true;
+      const result = await lockField(
+        field.item,
+        field.fieldId,
+        state.sessionId,
+      );
+      if (result.type == "error") {
+        console.log("error locking field", result);
+      }
+      //handleErrorResult(result, ui, state);
+      if (result.type == "success" && result.data.success) {
+        state.setLockedField(field);
+        return true;
+      }
+      return false;
+    },
+    [state, ui],
+  );
+
+  const lockItemsAndRefresh = useCallback(
+    async (items: ItemDescriptor[]) => {
+      const item = items[0];
+      if (!item) return;
+      await lockItems(items);
+      if (item.id == state.contentEditorItem?.id) {
+        await state.loadItem(item);
+      } else state.requestRefresh("immediate");
+    },
+    [state],
+  );
+
+  const unlockItemsAndRefresh = useCallback(
+    async (items: ItemDescriptor[]) => {
+      const item = items[0];
+      if (!item) return;
+      await unlockItems(items);
+      if (item.id == state.contentEditorItem?.id) {
+        await state.loadItem(item);
+      } else state.requestRefresh("immediate");
+    },
+    [state],
+  );
+
+  const executeWorkflowCommandAndRefresh = useCallback(
+    async (item: ItemDescriptor, commandId: string) => {
+      const result = await executeWorkflowCommand(item, commandId, "");
+      if (result.type === "success") {
+        if (!result.data.succeeded) {
+          const errorMessage = {
+            summary: "Workflow command failed",
+            details: result.data.message,
+          };
+          ui.showErrorToast(errorMessage);
+        }
+        state.requestRefresh("immediate");
+      }
+    },
+    [state],
+  );
+
+  const renameItem = useCallback(
+    async (item: ItemDescriptor, newName: string) => {
+      await executeOp({
+        type: "rename-item",
+        mainItem: state.page?.item.descriptor || item,
+        date: new Date().toISOString(),
+        id: uuid(),
+        item,
+        newName,
+        description: "Rename item",
+      } as RenameItemOperation);
+      state.requestRefresh("immediate");
+      state.itemsRepository.refreshItems([item]);
+    },
+    [state.itemsRepository, executeOp],
+  );
+
+  const lastEditField = useRef<FieldDescriptor | undefined>(undefined);
+
+  const editField = useCallback(
+    async ({
+      field,
+      value,
+      rawValue,
+      refresh = "immediate",
+    }: {
+      field: FieldDescriptor;
+      value?: string;
+      rawValue?: string | null;
+      refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
+    }): Promise<void> => {
+      state.itemsRepository.updateFieldValue(
+        field,
+        state.user ?? { name: "unknown", ai: false },
+        true,
+        value,
+        rawValue,
+      );
+      if (refresh === "immediate" || refresh === "none") {
+        return editFieldImmediate({ field, value, rawValue, refresh });
+      }
+      if (
+        lastEditField.current?.fieldId !== field.fieldId ||
+        lastEditField.current?.item?.id !== field.item?.id ||
+        lastEditField.current?.item?.language !== field.item?.language ||
+        lastEditField.current?.item?.version !== field.item?.version
+      ) {
+        executeEditFieldDebounced.flush();
+      }
+      lastEditField.current = field;
+      return executeEditFieldDebounced({ field, value, rawValue, refresh });
+    },
+    [state.itemsRepository],
+  );
+
+  const editFieldImmediate = useCallback(
+    async ({
+      field,
+      value,
+      rawValue,
+      refresh = "immediate",
+    }: {
+      field: FieldDescriptor;
+      value?: string;
+      rawValue?: string | null;
+      refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
+    }): Promise<void> => {
+      state.itemsRepository.updateFieldValue(
+        field,
+        state.user ?? { name: "unknown", ai: false },
+        true,
+        value,
+        rawValue,
+      );
+
+      const val = rawValue !== undefined ? rawValue : value;
+      if (val === undefined) return;
+
+      const op = await getEditOP(field, rawValue, value);
+
+      if (op) {
+        await executeOp(op, { refresh });
+        await state.itemsRepository.refreshItems([field.item]);
+        state.itemsRepository.onFieldSaved(field, val);
+      }
+    },
+    [state.itemsRepository, executeOp],
+  );
+
+  const executeEditFieldDebounced = useDebouncedCallback(
+    editFieldImmediate,
+    state.configuration.debounceFieldEditsInterval * 2,
+    { trailing: true },
+  );
+
+  async function getEditOP(
+    field: FieldDescriptor,
+    rawValue: string | null | undefined,
+    value: string | undefined,
+  ) {
+    const item = await state.itemsRepository.getItem(field.item);
+    if (!item) return;
+
+    const fieldItem = await state.itemsRepository.getItem({
+      id: field.fieldId,
+      language: "en",
+      version: 0,
+    });
+
+    if (!fieldItem) {
+      console.log("Could not fetch field item " + field.fieldId);
+      return;
+    }
+
+    let op = lastOp.current as EditFieldOperation;
+
+    if (
+      !op ||
+      op.undone ||
+      op.type !== "edit-field" ||
+      !op.item ||
+      op.item.id !== item.id ||
+      op.fieldId !== field.fieldId ||
+      op.item.language !== item.language ||
+      op.item.version !== item.version
+    ) {
+      op = {
+        type: "edit-field",
+        item: {
+          id: item.id,
+          version: item.version,
+          language: item.language,
+          name: item.name,
+        },
+        fieldId: field.fieldId,
+        fieldName: fieldItem.name,
+        date: new Date().toISOString(),
+        id: uuid(),
+        description: "Edit " + item.name,
+        focus: item.id + ":" + field.fieldId,
+        canUndo: true,
+        mainItem: state.page?.item.descriptor || item.descriptor,
+      };
+    }
+
+    op.date = new Date().toISOString();
+    op.value = rawValue ?? value;
+
+    const firstEditInheritedComponent =
+      item.isInheritedFromMasterLanguage &&
+      op.item.language != state.page?.item.language;
+
+    if (firstEditInheritedComponent)
+      op.item.language = state.page!.item.language;
+
+    lastOp.current = op;
+    return op;
+  }
+
+  const undo = useCallback(
+    async (numberOfOperations?: number): Promise<boolean> => {
+      if (undoing.current) {
+        return false;
+      }
+      undoing.current = true;
+
+      try {
+        const item = state.contentEditorItem?.descriptor;
+        if (!item) return false;
+
+        const ops = state.editHistory
+          .filter((x) => x.canUndo && x.sessionId === state.sessionId)
+          .slice(0, numberOfOperations || 1);
+
+        if (!ops.length) return false;
+
+        // Mark operations as undone
+        ops.forEach((x) => {
+          x.undone = true;
+          x.canUndo = false;
+        });
+
+        const result = await executeUndo(
+          state.sessionId,
+          ops.map((x) => x.id),
+        );
+        handleResult(result, { refresh: "immediate" });
+
+        if (result.type === "success") {
+          const itemsToRefresh = result.data
+            .map((x: EditOperation) => {
+              if (x.type === "edit-field")
+                return (x as EditFieldOperation).item;
+              if (x.type === "add-component")
+                return {
+                  id: (x as AddComponentOperation).componentId,
+                  language: x.mainItem.language,
+                  version: x.mainItem.version,
+                };
+              return undefined;
+            })
+            .filter(
+              (x: ItemDescriptor | undefined): x is ItemDescriptor => x != null,
+            );
+
+          await state.itemsRepository.refreshItems(itemsToRefresh);
+          await state.refreshHistory(item);
+          return true;
+        } else {
+          ui.showErrorToast(result);
+          return false;
+        }
+      } finally {
+        // Always reset the flag
+        undoing.current = false;
+        console.log("undoing flag reset");
+      }
+    },
+    [state, ui, undoing],
+  );
+
+  const redo = useCallback(async (): Promise<boolean> => {
+    if (undoing.current) return false;
+    undoing.current = true;
+
+    try {
+      const item = state.contentEditorItem?.descriptor;
+      if (!item) return false;
+
+      // Clone the array to avoid mutating the original state
+      const op = [...state.editHistory]
+        .reverse()
+        .find((x) => x.canRedo && x.sessionId === state.sessionId);
+      if (!op) return false;
+
+      op.canRedo = false;
+      op.undone = false;
+
+      const result = await executeRedo(state.sessionId, op.id);
+      handleResult(result, { refresh: "immediate" });
+
+      if (result.type === "success") {
+        const itemsToRefresh = result.data
+          .map((x: EditOperation) => {
+            if (x.type === "edit-field") return (x as EditFieldOperation).item;
+            if (x.type === "add-component")
+              return {
+                id: (x as AddComponentOperation).componentId,
+                language: x.mainItem.language,
+                version: x.mainItem.version,
+              };
+            return undefined;
+          })
+          .filter(
+            (x: ItemDescriptor | undefined): x is ItemDescriptor => x != null,
+          );
+
+        await state.itemsRepository.refreshItems(itemsToRefresh);
+        await state.refreshHistory(item);
+        return true;
+      } else {
+        ui.showErrorToast(result);
+        return false;
+      }
+    } finally {
+      // Always reset the flag
+      undoing.current = false;
+    }
+  }, [state, ui, undoing]);
+
+  const deleteItems = useCallback(
+    async (items: ItemDescriptor[]) => {
+      const itemsToDelete = await state.itemsRepository.getItems(items);
+      await executeDeleteItems(items);
+      state.itemsRepository.onItemsDeleted(
+        itemsToDelete.map((x) => ({
+          item: x.descriptor,
+          parentId: x.parentId,
+        })),
+      );
+      state.requestRefresh("immediate");
+    },
+    [state.itemsRepository],
+  );
+
+  const moveItems = useCallback(
+    async (items: ItemDescriptor[], target: ItemDescriptor, index: number) => {
+      await executeMoveItems(items, target, index);
+    },
+    [state.itemsRepository],
+  );
+
+  const createItem = useCallback(
+    async (parent: ItemDescriptor, templateId: string, name: string) => {
+      const result = await executeCreateItem(parent, templateId, name);
+      if (handleErrorResult(result as ExecutionResult<unknown>, ui, state))
+        return;
+      state.itemsRepository.refreshItems([parent]);
+      return result.data as ItemDescriptor;
+    },
+    [state.itemsRepository],
+  );
+
+  const createVersion = useCallback(
+    async (item: ItemDescriptor) => {
+      await doCreateVersion(item, state.sessionId);
+    },
+    [state],
+  );
+
+  const ops = useMemo(
+    () => ({
+      addComponent,
+      ensureLock,
+      lockItems: lockItemsAndRefresh,
+      unlockItems: unlockItemsAndRefresh,
+      executeWorkflowCommand: executeWorkflowCommandAndRefresh,
+      editField,
+      undo,
+      redo,
+      executeEditOperation: executeOp,
+      renameItem,
+      deleteItems,
+      createItem,
+      createVersion,
+      duplicateComponents,
+      undoing: undoing.current,
+      moveItems,
+    }),
+    [
+      addComponent,
+      ensureLock,
+      lockItemsAndRefresh,
+      unlockItemsAndRefresh,
+      executeWorkflowCommandAndRefresh,
+      editField,
+      undo,
+      redo,
+      executeOp,
+      renameItem,
+      deleteItems,
+      createItem,
+      createVersion,
+      duplicateComponents,
+      undoing.current,
+      moveItems,
+    ],
+  );
+
+  return useMemo(
+    () => ({
+      ops,
+      context: {
+        editOperationExecuted,
+        executingEditOperations,
+      },
+    }),
+    [executingEditOperations, editOperationExecuted, ops, undoing],
+  );
+}