@alpaca-editor/core 1.0.0

package/src/editor/client/GenericDialog.tsx

@@ -0,0 +1,50 @@
+import { Dialog } from "primereact/dialog";
+
+import { forwardRef, useImperativeHandle, useState } from "react";
+
+export interface GenericDialogHandle {
+  show: (props: {
+    title: string;
+    content: React.ReactNode;
+    width?: string;
+    height?: string;
+  }) => void;
+  hide: () => void;
+}
+
+export const GenericDialog = forwardRef<GenericDialogHandle>((_, ref) => {
+  const [content, setContent] = useState<React.ReactNode>(null);
+  const [title, setTitle] = useState<string>("");
+  const [width, setWidth] = useState<string>("50vw");
+  const [height, setHeight] = useState<string>("50vh");
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const show = (props: {
+    title: string;
+    content: React.ReactNode;
+    width?: string;
+    height?: string;
+  }) => {
+    setTitle(props.title);
+    setContent(props.content);
+    if (props.width) setWidth(props.width);
+    if (props.height) setHeight(props.height);
+    setVisible(true);
+  };
+
+  useImperativeHandle(ref, () => ({
+    show,
+    hide: () => setVisible(false),
+  }));
+
+  return (
+    <Dialog
+      onHide={() => setVisible(false)}
+      visible={visible}
+      header={title}
+      style={{ width, height }}
+    >
+      {content}
+    </Dialog>
+  );
+});

package/src/editor/client/editContext.ts

@@ -0,0 +1,330 @@
+"use client";
+
+import React, {
+  MouseEvent,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
+import { ToastMessage } from "primereact/toast";
+
+import { EditorConfiguration, EditorView } from "../../config/types";
+import { FieldAction, InsertingState } from "./EditorClient";
+import { MenuItem } from "primereact/menuitem";
+import { Command, CommandData } from "../commands/commands";
+import { ComponentDetails } from "../services/componentDesignerService";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import {
+  EditOperation,
+  EditSession,
+  FieldDescriptor,
+  HistoryEntry,
+  InsertOption,
+  LanguageVersions,
+  User,
+  ValidationResult,
+  Comment,
+  WorkboxItem,
+  Review,
+  AddComponentOperation,
+} from "../../types";
+
+import { ConfirmationProps } from "../ConfirmationDialog";
+import {
+  Component,
+  FieldButton,
+  ItemDescriptor,
+  Page,
+  Timings,
+  FullItem,
+  Version,
+  Field,
+} from "../pageModel";
+import { ItemsRepository } from "./itemsRepository";
+import { MediaSelectorMode } from "../media-selector/MediaSelector";
+import { ComponentCommand } from "../commands/componentCommands";
+import { AiTerminalOptions } from "../ai/AiTerminal";
+
+export type DragObject = {
+  type: "template" | "component" | "link-component" | "items";
+  typeId: string;
+  templateId?: string;
+  name?: string;
+  component?: ItemDescriptor;
+  items?: ItemDescriptor[];
+};
+
+export type SelectionRange = {
+  fieldId: string;
+  startOffset: number;
+  endOffset: number;
+  text: string;
+};
+
+export type EditContextType = {
+  operations: {
+    moveItems: (
+      items: ItemDescriptor[],
+      target: ItemDescriptor,
+      index: number,
+    ) => Promise<void>;
+    addComponent: (
+      componentTypeId: string,
+      placeholderKey: string,
+      index: number,
+      parentId?: string,
+    ) => Promise<AddComponentOperation | undefined>;
+
+    duplicateComponents: ({ componentIds }: { componentIds: string[] }) => void;
+
+    ensureLock: (field: FieldDescriptor) => Promise<boolean>;
+    lockItems: (item: ItemDescriptor[]) => void;
+    unlockItems: (item: ItemDescriptor[]) => void;
+    editField: (props: {
+      field: FieldDescriptor;
+      value?: any;
+      rawValue?: string | null;
+      refresh?: "none" | "immediate" | "delayed" | "waitForQuietPeriod";
+    }) => Promise<void>;
+    undo: (numOperations?: number) => Promise<boolean>;
+    redo: () => Promise<boolean>;
+    executeEditOperation: (operation: EditOperation) => void;
+    executeWorkflowCommand: (
+      item: ItemDescriptor,
+      commandId: string,
+    ) => Promise<void>;
+    renameItem: (item: ItemDescriptor, newName: string) => Promise<void>;
+    deleteItems: (items: ItemDescriptor[]) => Promise<void>;
+    createItem: (
+      parent: ItemDescriptor,
+      templateId: string,
+      name: string,
+    ) => Promise<ItemDescriptor | undefined>;
+    createVersion: (item: ItemDescriptor) => Promise<void>;
+    undoing: boolean;
+  };
+  comments: Comment[];
+  loadComments: () => void;
+  setComments: React.Dispatch<React.SetStateAction<Comment[]>>;
+  selectedComment: Comment | undefined;
+  setSelectedComment: React.Dispatch<React.SetStateAction<Comment | undefined>>;
+  showComments: boolean;
+  setShowComments: React.Dispatch<React.SetStateAction<boolean>>;
+  addComment: () => void;
+  item?: FullItem;
+
+  workboxItems: WorkboxItem[];
+
+  itemLanguages: LanguageVersions[];
+  itemVersions: Version[];
+  view?: EditorView;
+
+  viewName: string;
+  switchView: (viewName: string) => void;
+  compareMode: boolean;
+  setCompareMode: (compareMode: boolean) => void;
+  setCenterPanelView: (view: ReactNode) => void;
+  configuration: EditorConfiguration;
+  showToast: (message: ToastMessage | ToastMessage[]) => void;
+  sessionId: string;
+  openSplashScreen: () => void;
+  getComponentCommands: (component: Component[]) => ComponentCommand[];
+  selectMedia: ({
+    selectedIdPath,
+    mode,
+  }: {
+    selectedIdPath: string;
+    mode: MediaSelectorMode;
+  }) => Promise<string | null>;
+
+  updateUrl: (params: Record<string, string>) => void;
+
+  previewMode: boolean;
+  setPreviewMode: React.Dispatch<React.SetStateAction<boolean>>;
+
+  selection: string[];
+  select: (ids: string[]) => void;
+  selectedForInsertion: string;
+  selectedRange?: SelectionRange;
+  setSelectedRange: React.Dispatch<
+    React.SetStateAction<SelectionRange | undefined>
+  >;
+
+  setSelectedForInsertion: React.Dispatch<React.SetStateAction<string>>;
+  insertMode: boolean;
+  setInsertMode: React.Dispatch<React.SetStateAction<boolean>>;
+  inserting: InsertingState | undefined;
+
+  dragStart: (dragObject: DragObject) => void;
+  dragEnd: () => void;
+  dragObject?: DragObject;
+  refreshCompletedFlag: boolean;
+  isRefreshing: boolean;
+  openCreatePageDialog: () => void;
+
+  reviews: {
+    reviews: Review[];
+    loadReviews: () => void;
+  };
+
+  droppedInPlaceholder: (
+    placeholderKey: string,
+    index: number,
+    spotPositionElement?: Element,
+    spotPositionAnchor?: "left" | "right" | "top" | "bottom",
+    insertOption?: InsertOption,
+  ) => void;
+
+  lockedField: FieldDescriptor | undefined;
+  requestRefresh: (
+    mode?: "immediate" | "delayed" | "waitForQuietPeriod",
+  ) => void;
+  page?: Page;
+
+  currentItemDescriptor?: ItemDescriptor;
+
+  setScrollIntoView: React.Dispatch<React.SetStateAction<string | undefined>>;
+  scrollIntoView?: string;
+  focusedField?: FieldDescriptor;
+  setFocusedField: (
+    field: FieldDescriptor | undefined,
+    requestLock: boolean,
+  ) => Promise<boolean>;
+  unlockField: (field: FieldDescriptor) => void;
+
+  readonly: boolean;
+  triggerFieldAction: (field: FieldDescriptor, action: FieldButton) => void;
+  activeFieldActions: FieldAction[];
+  showContextMenu(e: any, menuItems: MenuItem[]): void;
+  setCurrentOverlay: React.Dispatch<React.SetStateAction<any>>;
+  currentOverlay?: any;
+
+  showAiPopup: (
+    event: MouseEvent<HTMLElement>,
+    aiTerminalOptions?: AiTerminalOptions,
+  ) => void;
+  showFieldEditorPopup: (fields: Field[], sections: string[], ev: any) => void;
+  validationResult: ValidationResult[] | undefined;
+  contentEditorItem: FullItem | undefined;
+
+  loadItem: (
+    itemToLoad: ItemDescriptor | string,
+    options?: { addToBrowseHistory?: boolean },
+  ) => Promise<FullItem | undefined>;
+  editHistory: EditOperation[];
+  activeSessions: EditSession[];
+  validating: boolean;
+  isCommandDisabled: <T extends CommandData>({
+    command,
+    data,
+  }: {
+    command: Command<T>;
+    data?: T;
+  }) => boolean;
+
+  executeCommand: <T extends CommandData>({
+    command,
+    data,
+    event,
+  }: {
+    command: Command<T>;
+    data?: T;
+    event?: React.SyntheticEvent;
+  }) => Promise<any>;
+
+  componentDesignerComponent: ComponentDetails | undefined;
+  setComponentDesignerComponent: React.Dispatch<
+    React.SetStateAction<ComponentDetails | undefined>
+  >;
+  componentDesignerRendering: FullItem | undefined;
+  setComponentDesignerRendering: React.Dispatch<
+    React.SetStateAction<FullItem | undefined>
+  >;
+  inlineEditingFieldElement?: HTMLElement;
+  setInlineEditingFieldElement: React.Dispatch<
+    React.SetStateAction<HTMLElement | undefined>
+  >;
+  timings: Timings;
+  setTimings: React.Dispatch<React.SetStateAction<Timings>>;
+  pageView: PageViewContext;
+
+  confirm: (props: ConfirmationProps) => void;
+  showMessageDialog: (props: { header: string; message: string }) => void;
+
+  itemsRepository: ItemsRepository;
+  browseHistory: HistoryEntry[];
+  handleKeyDown: (event: KeyboardEvent) => void;
+  startTour: () => void;
+
+  addSocketMessageListener: (
+    callback: (message: { type: string; payload: any }) => void,
+  ) => () => void;
+  compareTo?: ItemDescriptor;
+  setCompareTo: React.Dispatch<
+    React.SetStateAction<ItemDescriptor | undefined>
+  >;
+  lastEditedFields: EditedField[];
+  revision?: string;
+  user?: User;
+  statusMessage: React.ReactNode;
+  setStatusMessage: React.Dispatch<React.SetStateAction<React.ReactNode>>;
+};
+
+const EditContext = React.createContext<EditContextType | undefined>(undefined);
+export const EditContextProvider = EditContext.Provider;
+
+export const useEditContext = () => useContext(EditContext);
+
+export function useEditContextRef() {
+  const contextValue = useEditContext();
+  const contextRef = useRef(contextValue);
+
+  useEffect(() => {
+    contextRef.current = contextValue;
+  }, [contextValue]);
+
+  return contextRef;
+}
+
+export type EditButton = {
+  id: string;
+  icon: React.ReactNode;
+  onClick: (ev: MouseEvent<HTMLButtonElement>) => void;
+  label: string;
+};
+
+export type ModifiedField = FieldDescriptor & {
+  value: string | null;
+  isDirty: boolean;
+  modifiedBy: User;
+  timestamp: number;
+};
+
+export type ModifiedFieldsContextType = {
+  modifiedFields: ModifiedField[];
+};
+
+export type EditedField = FieldDescriptor & {
+  timestamp: number;
+  user: User;
+};
+
+const ModifiedFieldsContext = React.createContext<
+  ModifiedFieldsContextType | undefined
+>(undefined);
+
+export const useModifiedFieldsContext = () => useContext(ModifiedFieldsContext);
+export const ModifiedFieldsContextProvider = ModifiedFieldsContext.Provider;
+
+export type OperationsContextType = {
+  executingEditOperations: EditOperation[];
+  editOperationExecuted: EditOperation | undefined;
+};
+
+const OperationsContext = React.createContext<
+  OperationsContextType | undefined
+>(undefined);
+
+export const useOperationsContext = () => useContext(OperationsContext);
+export const OperationsContextProvider = OperationsContext.Provider;

package/src/editor/client/helpers.ts

@@ -0,0 +1,44 @@
+import { EditorConfiguration } from "../../config/types";
+import { ConfirmationDialogHandle } from "../ConfirmationDialog";
+import { ExecutionResult } from "../services/editService";
+
+export function handleErrorResult(
+  result: ExecutionResult<unknown>,
+  ui: {
+    showErrorToast: (error: { summary: string; details: string }) => void;
+    confirmationDialogRef: React.RefObject<ConfirmationDialogHandle | null>;
+  },
+  state: {
+    configuration: EditorConfiguration;
+  }
+) {
+  if (result.type === "error") {
+    console.log("show error toast", result);
+
+    ui.showErrorToast({
+      summary: result.summary || "Error",
+      details: result.details || "An error occurred",
+    });
+    return true;
+  }
+
+  if (result.type === "unauthorized") {
+    if (state.configuration.events.onUnauthorized) {
+      state.configuration.events.onUnauthorized();
+      return true;
+    }
+
+    ui.confirmationDialogRef.current?.confirm({
+      header: "Not logged in",
+      message: "You are not logged in anymore. Proceed to login page?",
+      accept: () => {
+        window.location.href = "/sitecore/login";
+      },
+    });
+    ui.showErrorToast({
+      summary: result.summary || "Error",
+      details: result.details || "An error occurred",
+    });
+    return true;
+  }
+}