@alpaca-editor/core 1.0.0

package/src/editor/ContextMenu.tsx

@@ -0,0 +1,155 @@
+import { MenuItem, MenuItemCommandEvent } from "primereact/menuitem";
+
+import { EditContextType } from "./client/editContext";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { ContextMenu } from "primereact/contextmenu";
+
+import { FieldDescriptor } from "../types";
+import { Component, FieldButton } from "./pageModel";
+
+// export function getFieldContextMenu(
+//   field: Field,
+//   editContext: EditContextType,
+//   customButtons: EditButton[] = []
+// ) {
+//   return (e: any) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     const menuItems: MenuItem[] = getComponentMenuItems(
+//       editContext,
+//       getComponentById(field._editor!.descriptor.item.id, editContext.page!)!
+//     );
+
+//     if (customButtons.length) {
+//       if (menuItems.length)
+//         menuItems.push({
+//           separator: true,
+//         });
+
+//       customButtons.forEach((button) => {
+//         menuItems.push({
+//           label: button.label,
+//           command: (ev) => button.onClick(ev.originalEvent as any),
+//           icon: button.icon,
+//         });
+//       });
+//     }
+
+//     if (field._editor?.buttons?.length) {
+//       if (menuItems.length)
+//         menuItems.push({
+//           separator: true,
+//         });
+
+//       field._editor?.buttons.forEach((button: FieldButton) => {
+//         menuItems.push({
+//           label: button.label,
+//           command: () => {
+//             editContext!.triggerFieldAction(field._editor!.descriptor, button);
+//           },
+//           icon: button.icon ? "pi " + button.icon : undefined,
+//         });
+//       });
+//     }
+
+//     if (!e.ctrlKey && !e.shiftKey && !e.altKey && menuItems.length) {
+//       editContext.select([field._editor!.descriptor.item.id]);
+//       editContext!.setFocusedField(field._editor!.descriptor, false);
+//       editContext!.showContextMenu(e, menuItems);
+//     }
+//   };
+// }
+
+export function showComponentContextMenu(
+  components: Component[],
+  editContext: EditContextType,
+  field?: FieldDescriptor,
+  fieldButtons?: FieldButton[]
+) {
+  const componentCommandMenuItems = getComponentMenuItems(
+    editContext,
+    components
+  );
+
+  const menuItems = componentCommandMenuItems;
+
+  if (!editContext.readonly && field && fieldButtons?.length) {
+    if (menuItems.length)
+      menuItems.push({
+        separator: true,
+      });
+
+    fieldButtons.forEach((button) => {
+      menuItems.push({
+        label: button.label,
+        command: () => {
+          editContext!.triggerFieldAction(field, button);
+        },
+        icon: button.icon ? "pi " + button.icon : undefined,
+      });
+    });
+  }
+
+  return (e: any) => {
+    if (!e.shiftKey && !e.altKey) {      
+      if(menuItems.length) {
+
+//        editContext.select([component.id]);
+        editContext!.showContextMenu(e, menuItems);
+      }
+      
+      return true;
+    }
+    return false;
+  };
+}
+
+export interface EditContextMenuRef {
+  show: (event: any, menuItems: MenuItem[]) => void;
+  close: (event: any) => void;
+}
+
+interface EditContextMenuProps {}
+
+export const EditContextMenu = forwardRef<
+  EditContextMenuRef,
+  EditContextMenuProps
+>((props, ref) => {
+  const cm = useRef<ContextMenu>(null);
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
+  if (!props) return;
+  useImperativeHandle(ref, () => ({
+    show: (e: any, items: MenuItem[]) => {
+      if (!e.ctrlKey && !e.shiftKey && !e.altKey) {
+        setMenuItems(items);
+        e.preventDefault();
+        cm.current?.show(e);
+      }
+    },
+    close: (event: any) => {
+      cm.current?.hide(event);
+    },
+  }));
+
+  return <ContextMenu model={menuItems} ref={cm} />;
+});
+function getComponentMenuItems(
+  editContext: EditContextType,
+  components: Component[]
+): MenuItem[] {
+  const componentCommands = editContext.getComponentCommands(components);
+
+  const componentCommandMenuItems = componentCommands.map((x) => {
+    return {
+      label: x.label,
+      icon: x.icon,
+      command: (ev: MenuItemCommandEvent) =>
+        editContext.executeCommand({
+          command: x,
+          event: ev.originalEvent,
+        }),
+      disabled: editContext.isCommandDisabled({ command: x }),
+    };
+  });
+  return componentCommandMenuItems;
+}

package/src/editor/Editor.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { EditorClient } from "./client/EditorClient";
+import { DialogProvider } from "./client/DialogContext";
+import { ItemDescriptor } from "./pageModel";
+import { EditorConfiguration } from "../config/types";
+import { useEffect, useState } from "react";
+import { SystemStatus } from "../types";
+import { User } from "../types";
+import { getUserInfo } from "./services/editService";
+import { getSystemStatus } from "./services/systemService";
+import uuid from "react-uuid";
+import { getConfiguration } from "../config/config";
+
+export function Editor({
+  configure,
+  className,
+  page,
+}: {
+  configure: (props: {
+    configuration: EditorConfiguration;
+    user: User;
+  }) => EditorConfiguration;
+  className?: string;
+  page?: ItemDescriptor;
+}) {
+  const [config, setConfig] = useState<EditorConfiguration>();
+  const [userInfo, setUserInfo] = useState<User>();
+  const [systemStatus, setSystemStatus] = useState<SystemStatus>();
+
+  const sessionId =
+    typeof window !== "undefined"
+      ? sessionStorage.getItem("sessionId") || uuid()
+      : uuid();
+
+  useEffect(() => {
+    // Get user info and system status
+    getUserInfo().then((userInfo) => {
+      if (!userInfo) {
+        window.location.href = "/sitecore/login";
+        return;
+      }
+      setUserInfo(userInfo);
+    });
+
+    getSystemStatus().then((status) => {
+      if (status.data) {
+        setSystemStatus(status.data);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!userInfo || !systemStatus) return;
+
+    const config = configure({
+      configuration: getConfiguration(),
+      user: userInfo,
+    });
+    setConfig(config);
+  }, [userInfo, systemStatus]);
+
+  if (!userInfo || !systemStatus) return null;
+
+  if (systemStatus.messages.some((m) => m.severity === "error")) {
+    return (
+      <div className="fixed inset-0 flex flex-col items-center justify-center gap-2 text-sm">
+        <h1 className="text-2xl">Please fix the following issues:</h1>
+        <div className="text-sm text-red-500">
+          {systemStatus.messages.map((m) => (
+            <div key={m.message}>{m.message}</div>
+          ))}
+        </div>
+        <p>Check the logs for more details.</p>
+      </div>
+    );
+  }
+
+  if (!config) return null;
+
+  return (
+    <DialogProvider>
+      <EditorClient
+        configuration={config}
+        className={className}
+        item={page}
+        sessionId={sessionId}
+      ></EditorClient>
+    </DialogProvider>
+  );
+}

package/src/editor/EditorWarning.tsx

@@ -0,0 +1,34 @@
+import { classNames } from "primereact/utils";
+
+export function EditorWarning({
+  title,
+  severity = "warning",
+  children,
+}: {
+  title: string;
+  severity?: "info" | "error" | "warning";
+  children: React.ReactNode;
+}) {
+  const background =
+    severity === "info"
+      ? "bg-blue-100"
+      : severity === "error"
+      ? "bg-red-100"
+      : "bg-yellow-100";
+  return (
+    <div
+      className={classNames(
+        background,
+        "text-sm text-gray-500 border-b border-yellow-300 flex gap-2 items-stretch"
+      )}
+    >
+      <div className="bg-yellow-200 px-4 flex items-center text-gray-900">
+        <span className="pi pi-exclamation-triangle text-2xl" />
+      </div>
+      <div className="p-2">
+        <div className="font-bold">{title}</div>
+        <div className="text-xs">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/editor/EditorWarnings.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { EditContextType, useEditContext } from "./client/editContext";
+
+import { FullItem } from "./pageModel";
+
+export type EditorWarningProps = {
+  item: FullItem;
+  editContext: EditContextType;
+};
+
+export function EditorWarnings({ item }: { item?: FullItem }) {
+  var context = useEditContext();
+  if (!context || context.previewMode) return;
+
+  if (!item) {
+    item = context.page?.item;
+  }
+
+  if (!item) return;
+
+  return (
+    <div className="z-50 w-full">
+      {context.configuration.editorWarnings.map((x, i) =>
+        React.createElement(x, {
+          item,
+          key: "warning" + i,
+          editContext: context!,
+        })
+      )}
+    </div>
+  );
+}

package/src/editor/FieldEditorPopup.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { OverlayPanel } from "primereact/overlaypanel";
+import {
+  SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+import { FieldList } from "./FieldList";
+import { Field } from "./pageModel";
+
+export interface FieldEditorPopupRef {
+  show: (fields: Field[], sections: string[], event: SyntheticEvent) => void;
+  close: () => void;
+}
+
+interface FieldEditorPopupProps {}
+
+export const FieldEditorPopup = forwardRef<
+  FieldEditorPopupRef,
+  FieldEditorPopupProps
+>((_, ref) => {
+  const overlayRef = useRef<OverlayPanel>(null);
+
+  const [sections, setSections] = useState<string[]>([]);
+  const [fields, setFields] = useState<Field[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    show: (fields: Field[], sections: string[], ev: SyntheticEvent) => {
+      setFields(fields);
+      setSections(sections);
+      overlayRef.current?.toggle(ev, ev.target);
+    },
+    close: () => {
+      overlayRef.current?.hide();
+    },
+  }));
+
+  return (
+    <OverlayPanel ref={overlayRef}>
+      <div
+        className="w-96 h-96 flex flex-col gap-2 overflow-auto"
+        onClick={(ev) => ev.stopPropagation()}
+      >
+        <div className="flex justify-end p-3">
+          <i
+            className="pi pi-times cursor-pointer"
+            onClick={() => overlayRef?.current?.hide()}
+          />
+        </div>
+
+        {fields && (
+          <FieldList
+            fields={[{ fields }]}
+            sections={sections}
+            validators={[]}
+          />
+        )}
+      </div>
+    </OverlayPanel>
+  );
+});

package/src/editor/FieldHistory.tsx

@@ -0,0 +1,74 @@
+import { Field } from "../editor/pageModel";
+import { FieldHistoryItem } from "../types";
+import { getFieldHistory } from "../editor/services/editService";
+import { useEffect } from "react";
+import { useState } from "react";
+
+import { useEditContext } from "./client/editContext";
+import { formatDate } from "./utils";
+import { SimpleTable } from "./ui/SimpleTable";
+import { SimpleIconButton } from "./ui/SimpleIconButton";
+
+export function FieldHistory({
+  field,
+  onHover,
+}: {
+  field: Field;
+  onHover: (historyEntry: FieldHistoryItem | undefined) => void;
+}) {
+  const [fieldHistory, setFieldHistory] = useState<FieldHistoryItem[]>([]);
+  const editContext = useEditContext();
+
+  if (!editContext) {
+    return null;
+  }
+
+  useEffect(() => {
+    getFieldHistory(field.descriptor.item, field.id).then((result) => {
+      setFieldHistory(result.data ?? []);
+    });
+  }, [field]);
+
+  if (fieldHistory.length === 0)
+    return <div className="p-2 text-gray-500 text-xs">No history</div>;
+
+  return (
+    <div>
+      <div className="text-xs p-2 bg-gray-100 text-gray-500">
+        Field History
+      </div>
+      <div className="max-h-96 overflow-auto">
+        <SimpleTable
+          items={fieldHistory}
+          onRowHover={onHover}
+          rowClassName={(x) =>
+            x.undone
+              ? "text-gray-300 cursor-pointer hover:bg-gray-50 "
+              : "cursor-pointer hover:bg-gray-50"
+          }
+          columns={[
+            { header: "Date", body: (x) => formatDate(new Date(x.date)) },
+            { header: "User", body: (x) => x.user },
+            { header: "Version", body: (x) => x.version },
+            {
+              header: "Revert",
+              body: (x) => (
+                <SimpleIconButton
+                  icon="pi pi-undo"
+                  onClick={() =>
+                    editContext.operations.editField({
+                      field: field.descriptor,
+                      rawValue: x.rawValue,
+                      refresh: "immediate",
+                    })
+                  }
+                  label="Revert"
+                />
+              ),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}

package/src/editor/FieldList.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { Section } from "./ui/Section";
+import { useEditContext } from "./client/editContext";
+import { FieldListFieldWithFallbacks } from "./FieldListFieldWithFallbacks";
+import { SingleValidatorResult } from "../types";
+import { Field } from "./pageModel";
+import { InputText } from "primereact/inputtext";
+import { Fragment, useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+import uuid from "react-uuid";
+import { SimpleIconButton } from "./ui/SimpleIconButton";
+
+export type ItemFields = {
+  headline?: string;
+  fields: Field[];
+};
+
+export function FieldList({
+  fields,
+  compareToFields,
+  sections,
+  validators,
+  filter,
+  simplified,
+  showStandardFieldsEnabled,
+  readonly,
+}: {
+  fields: ItemFields[];
+  compareToFields?: Field[];
+  sections?: string[];
+  validators: SingleValidatorResult[];
+  filter?: (field: Field) => boolean;
+  simplified?: boolean;
+  showStandardFieldsEnabled?: boolean;
+  readonly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [searchFilter, setSearchFilter] = useState<string>("");
+  const [showStandardFields, setShowStandardFields] = useState<boolean>(false);
+  const uniqueId = uuid();
+
+  if (!editContext) return;
+  if (!fields) return;
+
+  return (
+    <div>
+      <div className="sticky  bg-gray-50 top-0 z-10 flex gap-2 border-y border-gray-200 items-center p-2 tour-field-list">
+        <i className="pi pi-search" />
+        <div className="text-xs">Filter</div>
+        <InputText
+          className="flex-1 text-xs"
+          value={searchFilter}
+          onChange={(x) => setSearchFilter(x.target.value)}
+        />
+        {searchFilter && (
+          <SimpleIconButton
+            icon="pi pi-times"
+            onClick={() => setSearchFilter("")}
+            className="text-xs"
+            label="Clear"
+          />
+        )}
+        {showStandardFieldsEnabled && (
+          <>
+            <Checkbox
+              inputId={uniqueId}
+              checked={showStandardFields}
+              onChange={(e: any) => setShowStandardFields(e.checked)}
+            />{" "}
+            <label htmlFor={uniqueId} className="text-xs cursor-pointer">
+              Show standard fields
+            </label>
+          </>
+        )}
+      </div>
+
+      {fields.map((itemFields, index) => (
+        <Fragment key={index}>
+          {itemFields.headline && (
+            <div className="text-sm mt-2 py-2 border-b flex items-center gap-1">
+              <i className="pi pi-angle-right" /> {itemFields.headline}
+            </div>
+          )}
+          <FieldListForSingleItem
+            key={index}
+            fields={itemFields.fields}
+            validators={validators}
+            filter={filter}
+            searchFilter={searchFilter}
+            showStandardFields={showStandardFields}
+            simplified={simplified}
+            sections={sections}
+            compareToFields={compareToFields}
+            readonly={readonly}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+function FieldListForSingleItem({
+  fields,
+  validators,
+  filter,
+  searchFilter,
+  simplified,
+  sections,
+  showStandardFields,
+  compareToFields,
+  readonly,
+}: {
+  fields: Field[];
+  validators: SingleValidatorResult[];
+  filter?: (field: Field) => boolean;
+  searchFilter?: string;
+  simplified?: boolean;
+  sections?: string[];
+  showStandardFields?: boolean;
+  compareToFields?: Field[];
+  readonly?: boolean;
+}) {
+  let fieldsArray = Array.isArray(fields)
+    ? (fields as Field[])
+    : (Object.values(fields) as Field[]);
+
+  if (filter) fieldsArray = fieldsArray.filter(filter);
+
+  if (searchFilter) {
+    const searchFilterLower = searchFilter.toLowerCase();
+    fieldsArray = fieldsArray.filter(
+      (x) =>
+        x.name?.toLowerCase().includes(searchFilterLower) ||
+        x.displayName?.toLowerCase().includes(searchFilterLower)
+    );
+  }
+
+  if (!showStandardFields) {
+    fieldsArray = fieldsArray.filter((x) => !x.name?.startsWith("__"));
+  }
+
+  const sectionsGrouping = fieldsArray.reduce((acc, value) => {
+    // Group initialization
+    const section = value.section || "Default";
+
+    if (value.descriptor.item.id)
+      if (!acc[section]) {
+        acc[section] = [];
+      }
+    // Grouping
+    acc[section].push(value);
+
+    return acc;
+  }, {} as any);
+
+  const sectionList: Field[][] = Object.values(sectionsGrouping);
+  sectionList.sort(
+    (a: Field[], b: Field[]) =>
+      (a[0]?.sectionSortOrder || 0) - (b[0]?.sectionSortOrder || 0)
+  );
+
+  function getSectionFields(fields: Field[]) {
+    fields.sort((a: any, b: any) => a?.sortOrder - b?.sortOrder);
+
+    return fields.map((field) => (
+      <FieldListFieldWithFallbacks
+        key={field.id}
+        fieldDescriptor={field.descriptor}
+        simplified={simplified}
+        validators={validators.filter((x) => x.fieldId === field.id)}
+        compareToField={compareToFields?.find((x) => x.id === field.id)}
+        readonly={readonly}
+      />
+    ));
+  }
+  return sectionList
+    .map((x) => x[0]?.section)
+    .filter((x) => !sections || sections.includes(x!))
+    .map((section) =>
+      simplified ? (
+        getSectionFields(sectionsGrouping[section!])
+      ) : (
+        <Section key={section} title={section!}>
+          {getSectionFields(sectionsGrouping[section!])}
+        </Section>
+      )
+    );
+}