@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/ContextMenu.tsx

@@ -1,212 +0,0 @@
-import { EditContextType } from "./client/editContext";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-
-import { FieldDescriptor } from "../types";
-import { Component, FieldButton } from "./pageModel";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "../components/ui/context-menu";
-import { MenuItem } from "../config/types";
-
-// 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 async function showComponentContextMenu(
-  components: Component[],
-  editContext: EditContextType,
-  field?: FieldDescriptor,
-  fieldButtons?: FieldButton[],
-) {
-  const componentCommandMenuItems = await getComponentMenuItems(
-    editContext,
-    components,
-  );
-
-  const menuItems = componentCommandMenuItems;
-
-  if (!editContext.readonly && field && fieldButtons?.length) {
-    if (menuItems.length)
-      menuItems.push({
-        id: "separator",
-        separator: true,
-      });
-
-    fieldButtons.forEach((button) => {
-      menuItems.push({
-        id: button.id,
-        label: button.label,
-        command: async () => {
-          editContext!.triggerFieldAction(field, button);
-        },
-        icon: button.icon ? <img src={button.icon} width={16} /> : 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 canvasRef = useRef<HTMLSpanElement>(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();
-        triggerRightClick(canvasRef.current!, {
-          position: { x: e.clientX, y: e.clientY },
-        });
-      }
-    },
-    close: (event: any) => {
-      //  cm.current?.hide(event);
-    },
-  }));
-
-  const triggerRightClick = (
-    element: HTMLSpanElement,
-    { position }: { position: any },
-  ) => {
-    const event = new MouseEvent("contextmenu", {
-      bubbles: true,
-      cancelable: true,
-      clientX: position.x,
-      clientY: position.y,
-    });
-    element.dispatchEvent(event);
-  };
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>
-        <span id="contextmenu_canvas" ref={canvasRef}>
-          CM trigger
-        </span>
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        {menuItems.map((item, index) =>
-          item.separator ? (
-            <ContextMenuSeparator />
-          ) : (
-            <ContextMenuItem
-              key={index}
-              onClick={(e) => {
-                if (item.command) {
-                  item.command(e);
-                }
-                // Close the context menu when an item is clicked
-                canvasRef.current?.dispatchEvent(
-                  new KeyboardEvent("keydown", { key: "Escape" }),
-                );
-              }}
-              disabled={item.disabled}
-              className="cursor-pointer"
-            >
-              {item.icon}
-              {item.label}
-            </ContextMenuItem>
-          ),
-        )}
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-  // return <ContextMenu model={menuItems} ref={cm} />;
-});
-async function getComponentMenuItems(
-  editContext: EditContextType,
-  components: Component[],
-): Promise<MenuItem[]> {
-  const componentCommands = await editContext.getComponentCommands(components);
-
-  const componentCommandMenuItems = componentCommands.map((x) => {
-    return {
-      id: x.id,
-      label: x.label,
-      icon: x.icon,
-      command: (ev: React.SyntheticEvent) =>
-        editContext.executeCommand({
-          command: x,
-          event: ev,
-        }),
-      disabled: editContext.isCommandDisabled({ command: x }),
-    };
-  });
-  return componentCommandMenuItems;
-}

package/src/editor/Editor.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-import { EditorClient } from "./client/EditorClient";
-
-import { ItemDescriptor } from "./pageModel";
-import { EditorConfiguration } from "../config/types";
-import { useEffect, useState } from "react";
-import { SystemStatus, UserInfo } 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: UserInfo;
-  }) => EditorConfiguration;
-  className?: string;
-  page?: ItemDescriptor;
-}) {
-  const [config, setConfig] = useState<EditorConfiguration>();
-  const [userInfo, setUserInfo] = useState<UserInfo>();
-  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 (
-    <EditorClient
-      configuration={config}
-      className={className}
-      item={page}
-      sessionId={sessionId}
-      userInfo={userInfo}
-    ></EditorClient>
-  );
-}

package/src/editor/EditorWarning.tsx

@@ -1,34 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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.mode === "preview") 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

@@ -1,65 +0,0 @@
-"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

@@ -1,74 +0,0 @@
-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

@@ -1,190 +0,0 @@
-"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="tour-field-list sticky top-0 z-10 ml-[1px] flex items-center gap-2 border-y border-gray-200 bg-gray-50 p-2">
-        <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="cursor-pointer text-xs">
-              Show standard fields
-            </label>
-          </>
-        )}
-      </div>
-
-      {fields.map((itemFields, index) => (
-        <Fragment key={index}>
-          {itemFields.headline && (
-            <div className="mt-2 flex items-center gap-1 border-b py-2 text-sm">
-              <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 || "";
-
-    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>
-      ),
-    );
-}