@alpaca-editor/core 1.0.3938 → 1.0.3941

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

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

@@ -1,53 +0,0 @@
-"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;
-      }}
-    />
-  );
-}