@alpaca-editor/core 1.0.0

package/src/editor/FieldListField.tsx

@@ -0,0 +1,387 @@
+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,
+    }
+  );
+
+  const isReadOnly =
+    readonly ||
+    !field.canWrite ||
+    (fieldLockedBySession &&
+      fieldLockedBySession.sessionId !== editContext.sessionId) ||
+    false;
+
+  let classNames = " flex items-stretch";
+  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";
+
+  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
+  );
+  if (executingAction?.state == "running") classNames += " executing-action ";
+
+  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="w-4 h-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 text-xs">
+              <i className="pi pi-spin pi-spinner text-xs flex items-center" />{" "}
+              {executingAction?.actionButton.label}
+            </div>
+          )}
+          <OverlayPanel ref={generatorsOverlay} className="p-1">
+            {generatorButtons?.map((x) => (
+              <button
+                key={x.id}
+                className="text-xs p-1 block 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 gap-x-3 gap-y-1 items-center flex-wrap min-h-7">
+          <label className="font-bold block text-xs select-text">
+            {title || field.displayName || field.name}
+          </label>
+
+          {fieldLockedBySession &&
+            fieldLockedBySession.sessionId !== editContext.sessionId && (
+              <div className="text-xs bg-pink-400 text-white p-1">
+                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="text-xs p-0 "
+                    onClick={() => {
+                      editContext?.operations.editField({
+                        field: field.descriptor,
+                        rawValue: null,
+                      });
+                    }}
+                  >
+                    Reset{" "}
+                  </button>
+                ) : (
+                  showFallbackButton
+                )}
+                {config?.buttons?.map((x) => {
+                  return (
+                    <button
+                      key={x.id}
+                      className="text-xs p-0"
+                      onClick={() =>
+                        editContext.triggerFieldAction(field.descriptor, x)
+                      }
+                    >
+                      <i className={"text-xs pi " + x.icon} /> {x.label}
+                    </button>
+                  );
+                })}
+                {!simplified && (
+                  <button
+                    className="text-xs p-0"
+                    onClick={() => {
+                      setShowRawValue(!showRawValue);
+                    }}
+                  >
+                    <i
+                      className={
+                        "text-xs pi " +
+                        (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="text-xs p-0 mt-1 mb-1">
+            {executingAction?.message}
+          </div>
+        )}
+        {!compareToField && (
+          <div className="text-xs p-0 mt-1 ">
+            {getFieldEditor(
+              historyEntry
+                ? { ...field, value: historyEntry.value, isHistoric: true }
+                : field,
+              showRawValue,
+              historyEntry ? true : isReadOnly,
+              editContext.configuration,
+              debouncedSetFieldvalue
+            )}
+          </div>
+        )}
+        {compareToField && (
+          <div className="text-xs p-0 mt-1 gap-1 flex w-full">
+            <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

@@ -0,0 +1,211 @@
+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);
+    };
+
+    ref.current?.addEventListener("mouseenter", handleEnter);
+    ref.current?.addEventListener("mouseleave", handleLeave);
+    return () => {
+      ref.current?.removeEventListener("mouseenter", handleEnter);
+      ref.current?.removeEventListener("mouseleave", handleLeave);
+    };
+  }, []);
+
+  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="text-xs p-0"
+      onClick={() => setShowFallback(!showFallback)}
+    >
+      <i
+        className={
+          "text-xs pi " + (showFallback ? "pi-check-square" : "pi-stop")
+        }
+      />{" "}
+      Fallback
+    </button>
+  );
+
+  if (!field) {
+    return;
+  }
+
+  return (
+    <div
+      key={field.id}
+      data-field-id={field.id}
+      ref={ref}
+      className="[&: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="text-center mb-4">
+                  <i className="pi pi-arrow-up text-xl font-bold text-blue-300 fallback-arrow-animation relative top-3" />
+                </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>
+  );
+}