@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/FieldListField.tsx

@@ -1,391 +0,0 @@
-import { Tooltip } from "primereact/tooltip";
-
-import { useEditContext, useModifiedFieldsContext } from "./client/editContext";
-import { EditorConfiguration } from "../config/types";
-
-import { useEffect, useRef, useState } from "react";
-import { WizardIcon } from "./ui/Icons";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { FieldHistoryItem, SingleValidatorResult } from "../types";
-
-import { getSessionWithFieldLock } from "./utils";
-
-import { loadFieldButtons } from "./services/editService";
-import { Field, FieldButton } from "./pageModel";
-import { useThrottledCallback } from "use-debounce";
-import { SimpleIconButton } from "./ui/SimpleIconButton";
-import { FieldHistory } from "./FieldHistory";
-
-export default function FieldListField({
-  field,
-  validators,
-  simplified,
-  title,
-  isFocusedField,
-  showFallbackButton,
-  compareToField,
-  readonly,
-}: {
-  field: Field;
-  validators: SingleValidatorResult[];
-  simplified?: boolean;
-  title?: React.ReactNode;
-  isFocusedField: boolean;
-  showFallbackButton?: React.ReactNode;
-  compareToField?: Field;
-  readonly?: boolean;
-}) {
-  const editContext = useEditContext();
-  if (!editContext) return;
-
-  const modifiedFieldsContext = useModifiedFieldsContext();
-
-  const fieldItem = field.descriptor.item;
-
-  const [showRawValue, setShowRawValue] = useState(false);
-  const generatorsOverlay = useRef<OverlayPanel>(null);
-  const fieldHistoryOverlay = useRef<OverlayPanel>(null);
-  const [generatorButtons, setButtons] = useState<FieldButton[]>();
-  const [isModified, setIsModified] = useState(false);
-  const [isSaved, setIsSaved] = useState(false);
-  const [historyEntry, setHistoryEntry] = useState<FieldHistoryItem>();
-
-  async function editButtonClicked(x: FieldButton): Promise<void> {
-    editContext?.triggerFieldAction(field.descriptor, x);
-  }
-
-  useEffect(() => {
-    updateState();
-    setShowRawValue(false);
-  }, [
-    field.descriptor.item.id,
-    field.descriptor.item.language,
-    field.descriptor.item.version,
-    field.descriptor.fieldId,
-  ]);
-
-  useEffect(updateState, [modifiedFieldsContext?.modifiedFields]);
-
-  function updateState() {
-    const modifiedField = modifiedFieldsContext?.modifiedFields.find(
-      (x) =>
-        x.fieldId === field.id &&
-        x.item.id === fieldItem.id &&
-        x.item.language === fieldItem.language &&
-        x.item.version === fieldItem.version,
-    );
-
-    if (modifiedField) {
-      setIsModified(true);
-      setIsSaved(!modifiedField.isDirty);
-    } else {
-      setIsModified(false);
-      setIsSaved(false);
-    }
-  }
-
-  const fieldLockedBySession = getSessionWithFieldLock(
-    field.descriptor,
-    editContext,
-  );
-
-  const debouncedSetFieldvalue = useThrottledCallback(
-    async (value: string) => {
-      await editContext.operations.editField({
-        field: field.descriptor,
-        value: value,
-        refresh: "none",
-      });
-    },
-    editContext.configuration.debounceFieldEditsInterval,
-    {
-      trailing: true,
-      leading: false,
-    },
-  );
-
-  const executingAction = editContext.activeFieldActions.find(
-    (x) =>
-      x.field.fieldId == field.id &&
-      x.field.item?.id == fieldItem.id &&
-      x.field.item?.language == fieldItem.language &&
-      x.field.item?.version == fieldItem.version,
-  );
-
-  const isReadOnly =
-    executingAction?.state == "running" ||
-    readonly ||
-    !field.canWrite ||
-    (fieldLockedBySession &&
-      fieldLockedBySession.sessionId !== editContext.sessionId) ||
-    false;
-
-  let classNames = " flex items-stretch";
-  if (executingAction?.state == "running") classNames += " executing-action ";
-  else {
-    if (isFocusedField) classNames += " focused-field ";
-    if (isReadOnly) classNames += " readonly ";
-    if (isModified && !isSaved) classNames += " saving ";
-    if (isSaved) classNames += " saved ";
-  }
-
-  let validationBarClassNames = undefined;
-
-  if (validators.find((x) => x.result > 1))
-    validationBarClassNames = " pl-2 border-l-4 border-red-500";
-
-  useEffect(() => {
-    const load = async () => {
-      if (!field.descriptor) return;
-      const buttons = await loadFieldButtons(field.descriptor);
-      field.buttons = buttons;
-      setButtons(buttons);
-    };
-
-    if (isFocusedField) {
-      if (field.buttons) setButtons(field.buttons);
-      else load();
-    }
-  }, [isFocusedField]);
-
-  useEffect(() => {
-    if (editContext.currentOverlay !== field.id + "_generators")
-      generatorsOverlay.current?.hide();
-  }, [editContext.currentOverlay]);
-
-  const renderGeneratorButtons = () => {
-    if (generatorButtons?.length || 0 > 0)
-      return (
-        <>
-          {(!executingAction || executingAction.state !== "running") && (
-            <SimpleIconButton
-              icon={<WizardIcon className="h-4 w-4" />}
-              label="Generate"
-              onClick={(e: any) => {
-                generatorsOverlay.current?.toggle(e);
-                editContext.setCurrentOverlay(field.id + "_generators");
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-            ></SimpleIconButton>
-          )}
-          {executingAction && executingAction.state === "running" && (
-            <div className="ml-auto flex items-center gap-1.5 text-xs">
-              <i className="pi pi-spin pi-spinner flex items-center text-xs" />{" "}
-              {executingAction?.label}
-            </div>
-          )}
-          <OverlayPanel ref={generatorsOverlay} className="p-1">
-            {generatorButtons?.map((x) => (
-              <button
-                key={x.id}
-                className="block p-1 text-xs hover:text-gray-400"
-                onClick={() => {
-                  editButtonClicked(x);
-                  generatorsOverlay.current?.hide();
-                }}
-              >
-                {x.icon && <i className={x.icon + " mr-2 text-xs"} />}
-                {x.label}
-              </button>
-            ))}
-          </OverlayPanel>
-        </>
-      );
-    return null;
-  };
-
-  const config = editContext.configuration.fieldTypes[field.type];
-
-  return (
-    <div
-      key={
-        field.id +
-        "_" +
-        fieldItem.id +
-        "_" +
-        fieldItem.language +
-        "_" +
-        fieldItem.version
-      }
-      className={classNames}
-    >
-      {validationBarClassNames && (
-        <>
-          <div
-            className={validationBarClassNames}
-            id={"validation_" + field.id}
-          />
-          <Tooltip target={"#validation_" + field.id}>
-            {validators
-              .filter((x) => x.result > 1)
-              .map((x) => (
-                <div key={x.validator}>{x.message}</div>
-              ))}
-          </Tooltip>
-        </>
-      )}
-
-      <div className="flex-1">
-        <div className="flex min-h-7 flex-wrap items-center gap-x-3 gap-y-1">
-          <label className="block text-xs font-bold select-text">
-            {title || field.displayName || field.name}
-          </label>
-
-          {fieldLockedBySession &&
-            fieldLockedBySession.sessionId !== editContext.sessionId && (
-              <div className="bg-pink-400 p-1 text-xs text-white">
-                locked by {fieldLockedBySession.user.name}
-              </div>
-            )}
-          {isFocusedField &&
-            (!fieldLockedBySession ||
-              fieldLockedBySession?.sessionId === editContext.sessionId) && (
-              <>
-                {field.isShared && (
-                  <span className="text-xs text-gray-400">[Shared]</span>
-                )}
-                <span className="text-xs">·</span>
-                {!field.isFallback && field.rawValue !== null ? (
-                  <button
-                    className="p-0 text-xs"
-                    onClick={() => {
-                      editContext?.operations.editField({
-                        field: field.descriptor,
-                        rawValue: null,
-                      });
-                    }}
-                  >
-                    Reset{" "}
-                  </button>
-                ) : (
-                  showFallbackButton
-                )}
-                {config?.buttons?.map((x) => {
-                  return (
-                    <button
-                      key={x.id}
-                      className="p-0 text-xs"
-                      onClick={() =>
-                        editContext.triggerFieldAction(field.descriptor, x)
-                      }
-                    >
-                      <i className={"pi text-xs " + x.icon} /> {x.label}
-                    </button>
-                  );
-                })}
-                {!simplified && (
-                  <button
-                    className="p-0 text-xs"
-                    onClick={() => {
-                      setShowRawValue(!showRawValue);
-                    }}
-                  >
-                    <i
-                      className={
-                        "pi text-xs " +
-                        (showRawValue ? "pi-check-square" : "pi-stop")
-                      }
-                    />{" "}
-                    Raw
-                  </button>
-                )}
-                <div className="ml-auto flex items-center gap-1">
-                  <SimpleIconButton
-                    icon="pi pi-comment"
-                    onClick={() => {
-                      editContext.switchView("reviews");
-                      editContext.addComment();
-                    }}
-                    label="Add Comment"
-                  />
-                  {!readonly && renderGeneratorButtons()}
-                  <SimpleIconButton
-                    icon="pi pi-history"
-                    onClick={(ev) => {
-                      fieldHistoryOverlay.current?.toggle(ev);
-                      ev.preventDefault();
-                      ev.stopPropagation();
-                    }}
-                    label="Field History"
-                  />
-                  <OverlayPanel ref={fieldHistoryOverlay} className="p-1">
-                    <FieldHistory
-                      field={field}
-                      onHover={(x) => setHistoryEntry(x)}
-                    />
-                  </OverlayPanel>
-                </div>
-              </>
-            )}
-        </div>
-        {executingAction?.message && (
-          <div className="mt-1 mb-1 p-0 text-xs">
-            {executingAction?.message}
-          </div>
-        )}
-        {!compareToField && (
-          <div className="mt-1 p-0 text-xs">
-            {getFieldEditor(
-              historyEntry
-                ? { ...field, value: historyEntry.value, isHistoric: true }
-                : field,
-              showRawValue,
-              historyEntry ? true : isReadOnly,
-              editContext.configuration,
-              debouncedSetFieldvalue,
-            )}
-          </div>
-        )}
-        {compareToField && (
-          <div className="mt-1 flex w-full gap-1 p-0 text-xs">
-            <div className="flex-1">
-              {getFieldEditor(
-                field,
-                showRawValue,
-                isReadOnly,
-                editContext.configuration,
-                debouncedSetFieldvalue,
-              )}
-            </div>
-            <div className="flex-1">
-              {getFieldEditor(
-                compareToField,
-                showRawValue,
-                true,
-                editContext.configuration,
-                debouncedSetFieldvalue,
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function getFieldEditor(
-  field: Field,
-  showRawValue: boolean,
-  isReadOnly: boolean,
-  configuration: EditorConfiguration,
-  debouncedSetFieldvalue: (value: string) => void,
-) {
-  let fieldType = showRawValue ? "raw" : field.type;
-
-  var typeConfig = configuration.fieldTypes[fieldType];
-
-  if (!typeConfig) typeConfig = configuration.fieldTypes["single-line text"];
-
-  if (!typeConfig) return null;
-
-  return (
-    <typeConfig.editor
-      field={field}
-      readOnly={isReadOnly}
-      updateFieldValue={(value: string) => {
-        debouncedSetFieldvalue(value);
-      }}
-    />
-  );
-}

package/src/editor/FieldListFieldWithFallbacks.tsx

@@ -1,217 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-import FieldListField from "./FieldListField";
-import { useEditContext, useOperationsContext } from "./client/editContext";
-
-import { SingleValidatorResult } from "../types";
-
-import { Field, FieldDescriptor } from "./pageModel";
-
-export function FieldListFieldWithFallbacks({
-  fieldDescriptor,
-  validators,
-  simplified,
-  title,
-  compareToField,
-  readonly,
-}: {
-  fieldDescriptor: FieldDescriptor;
-  validators: SingleValidatorResult[];
-  simplified?: boolean;
-  title?: React.ReactNode;
-  compareToField?: Field;
-  readonly?: boolean;
-}) {
-  const [showFallback, setShowFallback] = useState(false);
-  const [fallbackChain, setFallbackChain] = useState<Field[]>();
-  const ref = useRef<HTMLDivElement>(null);
-  const [hover, setHover] = useState(false);
-  const [field, setField] = useState<Field | undefined>();
-  const editContext = useEditContext();
-
-  if (!editContext) return;
-
-  const operationsContext = useOperationsContext();
-
-  useEffect(() => {
-    const loadField = async () => {
-      const field = await editContext.itemsRepository.getField(fieldDescriptor);
-      setField(field);
-    };
-    loadField();
-  }, [editContext.itemsRepository.revision, fieldDescriptor]);
-
-  //const liveField = editContext.getLiveField(field);
-
-  // function isEditFieldOp(op?: EditOperation): op is EditFieldOperation {
-  //   return op?.type === "edit-field";
-  // }
-
-  async function loadFallback() {
-    if (!field?.fallbackChain || !editContext) return;
-    await editContext.itemsRepository.getItems(
-      field.fallbackChain?.map((x) => x.item),
-    );
-
-    setFallbackChain(
-      (
-        await Promise.all(
-          field.fallbackChain.map((x) =>
-            editContext.itemsRepository.getField(x),
-          ),
-        )
-      ).filter((x) => x) as Field[],
-    );
-    //const chain = await loadFallbackChain(field.descriptor);
-
-    // if(currentEditOp.item.language !== field._editor!.descriptor.item.language) {
-    //   chain.forEach((x, i) => {
-    //     if (i > 0) {
-    //       x._editor!.isFallback = true;
-    //     }
-    //   });
-    // }
-
-    // // chain.forEach((x, i) => {
-    // //   if (
-    // //     init ||
-    // //     !isEditFieldOp(currentEditOp) ||
-    // //     currentEditOp.fieldId !== x.id ||
-    // //     currentEditOp.item.id !== x._editor!.descriptor.item.id ||
-    // //     currentEditOp.item.language !== x._editor!.descriptor.item.language
-    // //   ) {
-    // //     console.log("apply change", i, x);
-    // //     x._editor! = chain[i]._editor!;
-    // //     x.value = chain[i].value;
-    // //     x.jsonValue = chain[i].jsonValue;
-    // //   }
-    // // });
-    //setFallbackChain(chain);
-  }
-  const fieldItem = field?.descriptor.item;
-  const isFocusedField =
-    editContext?.focusedField?.fieldId === field?.id &&
-    editContext.focusedField?.item?.id === fieldItem?.id &&
-    editContext.focusedField?.item?.language === fieldItem?.language;
-
-  useEffect(() => {
-    const handleEnter = () => {
-      setHover(true);
-    };
-    const handleLeave = () => {
-      setHover(false);
-    };
-
-    const element = ref.current;
-    if (element && field) {
-      element.addEventListener("mouseenter", handleEnter);
-      element.addEventListener("mouseleave", handleLeave);
-    }
-
-    return () => {
-      if (element) {
-        element.removeEventListener("mouseenter", handleEnter);
-        element.removeEventListener("mouseleave", handleLeave);
-      }
-    };
-  }, [field]);
-
-  useEffect(() => {
-    if (ref.current && isFocusedField) {
-      // only scroll if the field is outside the viewport
-      const rect = ref.current.getBoundingClientRect();
-      if (rect.top < 0 || rect.bottom > window.innerHeight) {
-        ref.current.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-          inline: "center",
-        });
-      }
-    }
-  }, [editContext.focusedField?.fieldId]);
-
-  useEffect(() => {
-    if (ref.current && (isFocusedField || hover) && field?.isFallback) {
-      loadFallback();
-    }
-  }, [editContext.focusedField, hover]);
-
-  useEffect(() => {
-    if (field?.isFallback && isFocusedField) {
-      loadFallback();
-    }
-  }, [
-    operationsContext?.editOperationExecuted,
-    editContext.refreshCompletedFlag,
-    editContext.itemsRepository.revision,
-  ]);
-
-  const showFallbackButton = field?.isFallback && (
-    <button
-      className="p-0 text-xs"
-      onClick={() => setShowFallback(!showFallback)}
-    >
-      <i
-        className={
-          "pi text-xs " + (showFallback ? "pi-check-square" : "pi-stop")
-        }
-      />{" "}
-      Fallback
-    </button>
-  );
-
-  if (!field) {
-    return;
-  }
-
-  return (
-    <div
-      key={field.id}
-      data-field-id={field.id}
-      ref={ref}
-      className="px-2 [&:not(:first-child)]:mt-4"
-      onClickCapture={() => {
-        editContext.setFocusedField(field.descriptor, field.canWrite || false);
-      }}
-    >
-      <FieldListField
-        field={field}
-        validators={validators}
-        simplified={simplified}
-        title={title}
-        isFocusedField={isFocusedField || hover}
-        showFallbackButton={showFallbackButton}
-        compareToField={compareToField}
-        readonly={readonly}
-      />
-      {field.isFallback && isFocusedField && showFallback && (
-        <>
-          {fallbackChain &&
-            fallbackChain.map((x, i) => (
-              <div className="ml-3" key={i}>
-                <div className="mb-4 text-center">
-                  <i className="pi pi-arrow-up fallback-arrow-animation relative top-3 text-xl font-bold text-blue-300" />
-                </div>
-                <FieldListField
-                  key={i}
-                  field={x}
-                  validators={validators}
-                  simplified={true}
-                  isFocusedField={true}
-                  readonly={readonly}
-                  title=<div className="text-xs">
-                    {x.displayName || x.name} ({x.descriptor.item.language})
-                    {x.descriptor.item.id != field.descriptor.item.id && (
-                      <span className="text-gray-400">
-                        - Item: {x.descriptor.item.id}
-                      </span>
-                    )}
-                  </div>
-                />
-              </div>
-            ))}
-        </>
-      )}
-    </div>
-  );
-}