@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/field-types/MultiLineText.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { InputTextarea } from "primereact/inputtextarea";
+import {
+  useEditContext,
+  useEditContextRef,
+  useModifiedFieldsContext,
+} from "../client/editContext";
+
+import { useEffect, useRef, useState } from "react";
+
+import { Field } from "../pageModel";
+
+export function MultiLineText({
+  field,
+  readOnly,
+  updateFieldValue,
+}: {
+  field: Field;
+  readOnly?: boolean;
+  updateFieldValue: (value: string) => void;
+}) {
+  const editContextRef = useEditContextRef();
+  const editContext = useEditContext();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const fieldItem = field.descriptor.item;
+  const [value, setValue] = useState(field.value as string);
+
+  const modifiedFieldsContext = useModifiedFieldsContext();
+  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,
+  );
+
+  useEffect(() => {
+    if (inputRef.current !== document.activeElement) {
+      if (field.isHistoric) setValue(field.value as string);
+      else setValue(modifiedField?.value ?? (field.value as string));
+    }
+  }, [field.value, modifiedFieldsContext?.modifiedFields]);
+
+  if (!editContextRef.current) return;
+
+  if (!fieldItem) return;
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (
+        !editContextRef.current?.inlineEditingFieldElement &&
+        editContextRef.current?.focusedField?.fieldId === field.id &&
+        editContextRef.current?.focusedField?.item.id === fieldItem.id &&
+        editContextRef.current?.focusedField?.item.language ===
+          fieldItem.language &&
+        editContextRef.current?.focusedField?.item.version === fieldItem.version
+      ) {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    }, 500);
+  }, [editContext?.focusedField]);
+
+  return (
+    <InputTextarea
+      ref={inputRef}
+      key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
+      value={value}
+      disabled={readOnly}
+      className="focus-shadow p-2 text-sm"
+      style={{ width: "100%" }}
+      rows={12}
+      onChange={(e) => {
+        setValue(e.target.value);
+        updateFieldValue(e.target.value as string);
+      }}
+    />
+  );
+}

package/src/editor/field-types/PictureFieldEditor.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useEditContext } from "../client/editContext";
+
+import { InputText } from "primereact/inputtext";
+
+import { PictureEditor } from "../PictureEditor";
+import { PictureField, PictureRawValue } from "../fieldTypes";
+import { useEffect, useState } from "react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+
+export function PictureFieldEditor({
+  field,
+  readOnly,
+}: {
+  field: PictureField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [altText, setAltText] = useState<string>("");
+
+  if (!field || !editContext) return;
+
+  var item = field.descriptor.item;
+
+  useEffect(() => {
+    setAltText(field.value?.alt || "");
+  }, [field.value?.alt]);
+
+  if (field.value?.error) {
+    return <div>{field.value?.error}</div>;
+  }
+
+  return (
+    <div>
+      <div className="flex gap-2 h-full focus-shadow flex-wrap">
+        {field?.value?.variants?.map((variant) => (
+          <div key={variant.name}>
+            <div
+              className={
+                "h-48 w-48 border border-gray-300 relative cursor-pointer flex justify-center items-center"
+              }
+            >
+              {variant.src && <img src={variant.thumbSrc} />}
+              {!readOnly && (
+                <PictureEditor field={field} variantName={variant.name} />
+              )}
+            </div>
+            <div className="p-1">
+              <div className="text-xs">{variant.name}</div>
+
+              <div className="text-xs">{variant.aspectRatioLockText}</div>
+            </div>
+            {variant.videoUrl && (
+              <div className="text-xs">
+                Video: {variant.videoUrl}
+                <SimpleIconButton
+                  onClick={() => {
+                    const raw = field.rawValue
+                      ? (JSON.parse(field?.rawValue) as PictureRawValue)
+                      : ({ Variants: [] } as PictureRawValue);
+
+                    if (!raw.Variants) return;
+
+                    let rawVariant = raw.Variants.find(
+                      (v) => v.Name === variant.name
+                    );
+
+                    if (rawVariant) {
+                      rawVariant.VideoId = undefined;
+                    } else {
+                      rawVariant = {
+                        Name: variant.name,
+                        VideoId: undefined,
+                      };
+                      raw.Variants.push(rawVariant);
+                    }
+
+                    editContext!.operations.editField({
+                      field: field.descriptor,
+                      rawValue: JSON.stringify(raw),
+                      refresh: "immediate",
+                    });
+                  }}
+                  icon="pi pi-trash"
+                  label="Remove"
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      <div className="mt-2">
+        <div className="mb-1">Alt Text</div>
+        <InputText
+          key={item!.id + field.id + item!.language + item!.version}
+          value={altText}
+          disabled={readOnly}
+          className="p-2 focus-shadow text-sm"
+          style={{ width: "100%" }}
+          onChange={(e) => {
+            setAltText(e.target.value);
+            const raw = field?.rawValue
+              ? (JSON.parse(field?.rawValue) as PictureRawValue)
+              : ({ Variants: [] } as PictureRawValue);
+            raw.AltText = e.target.value as string;
+
+            if (field.value) field.value.alt = e.target.value as string;
+
+            editContext.operations.editField({
+              field: field.descriptor,
+              rawValue: JSON.stringify(raw),
+              refresh: "waitForQuietPeriod",
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/editor/field-types/RawEditor.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { InputTextarea } from "primereact/inputtextarea";
+import { useEditContext } from "../client/editContext";
+import { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+import { Field } from "../pageModel";
+
+export function RawEditor({
+  field,
+  readOnly,
+}: {
+  field: Field;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  if (!editContext) return;
+  const [value, setValue] = useState(field.rawValue);
+
+  useEffect(() => {
+    if (inputRef.current !== document.activeElement) setValue(field.rawValue);
+  }, [field.rawValue]);
+
+  const debouncedSetFieldvalue = useDebouncedCallback((value) => {
+    editContext.operations.editField({
+      field: field.descriptor,
+      rawValue: value,
+      refresh: "waitForQuietPeriod",
+    });
+  }, 200);
+
+  const fieldItem = field.descriptor.item;
+
+  return (
+    <InputTextarea
+      ref={inputRef}
+      key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
+      value={value || ""}
+      disabled={readOnly}
+      className="p-2 focus-shadow text-sm"
+      style={{ width: "100%" }}
+      rows={12}
+      onChange={(e) => {
+        setValue(e.target.value);
+        debouncedSetFieldvalue(e.target.value as string);
+        // field.value = e.target.value;
+      }}
+    />
+  );
+}