@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEditContext } from "../client/editContext";
+import { InputText } from "primereact/inputtext";
+import { ImageField } from "../fieldTypes";
+import { useEffect, useState } from "react";
+import { ImageEditor } from "../ImageEditor";
+
+export function ImageFieldEditor({
+  field,
+  readOnly,
+}: {
+  field: ImageField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const [altText, setAltText] = useState<string>("");
+
+  if (!field || !editContext) return null;
+
+  function updateAltText(rawValue: string, newAltText: string): string {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(rawValue, 'text/xml');
+    const imageElement = xmlDoc.documentElement;
+    
+    imageElement.setAttribute('alt', newAltText);
+    
+    return new XMLSerializer().serializeToString(xmlDoc);
+  }
+
+  var item = field.descriptor.item;
+
+  useEffect(() => {
+    setAltText(field.value?.alt || "");
+  }, [field.value?.alt]);
+
+  return (
+    <div>
+      <div className="flex gap-2 h-full focus-shadow flex-wrap">
+        <div className="h-48 w-48 border border-gray-300 relative cursor-pointer flex justify-center items-center">
+          {!readOnly && <ImageEditor field={field} />}
+        </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);
+            if (field.value) field.value.alt = e.target.value;
+            editContext.operations.editField({
+              field: field.descriptor,
+              rawValue: updateAltText(field.rawValue || "", e.target.value),
+              refresh: "waitForQuietPeriod",
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { Link } from "../LinkEditorDialog";
+import { useEditContext } from "../client/editContext";
+import ContentTree from "../ContentTree";
+
+import { OverlayPanel } from "primereact/overlaypanel";
+import { InternalLinkField } from "../fieldTypes";
+import { getLookupSources } from "../services/editService";
+import { classNames } from "primereact/utils";
+
+export function InternalLinkFieldEditor({
+  field,
+  readOnly,
+}: {
+  field: InternalLinkField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [link, setLink] = useState<Link>();
+  const [showTree, setShowTree] = useState(false);
+  const [rootItemIds, setRootItemIds] = useState<string[]>([]);
+
+  useEffect(() => {
+    setLink({
+      url: field.value.url,
+      target: field.value.target,
+      targetItemName: field.value.targetItemName,
+      targetItemLongId: field.value.targetItemLongId,
+      type: field.value.type,
+      itemId: field.value.targetItemLongId?.split("/").pop(),
+      queryString: field.value.queryString,
+    });
+  }, [field]);
+
+  const overlayPanelRef = useRef<OverlayPanel>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const texboxRef = useRef<HTMLDivElement>(null);
+
+  if (!editContext) return;
+
+  const selection = [];
+  if (link?.itemId) selection.push(link.itemId);
+
+  useEffect(() => {
+    const loadLookupSources = async () => {
+      const datasources = await getLookupSources(field, editContext.sessionId);
+
+      if (datasources.length > 0) {
+        setRootItemIds(datasources.map((x) => x.id));
+      } else setRootItemIds(["11111111-1111-1111-1111-111111111111"]);
+    };
+    loadLookupSources();
+  }, [field.descriptor]);
+
+  return (
+    <>
+      <div>
+        <div
+          ref={texboxRef}
+          className={classNames(
+            "p-1.5 border flex justify-between text-sm cursor-pointer justiy-between focus-shadow",
+            readOnly ? "bg-gray-50" : " bg-white"
+          )}
+          onClick={(e) => {
+            if (readOnly) return;
+            overlayPanelRef.current?.toggle(null, texboxRef.current);
+            setShowTree((show) => !show);
+            e.preventDefault();
+          }}
+        >
+          {link?.targetItemName ? (
+            <span>{link.targetItemName}</span>
+          ) : (
+            <span>&nbsp;</span>
+          )}
+          {!readOnly && (
+            <i
+              className={`pi ${showTree ? "pi-angle-up" : "pi-angle-down"} `}
+            ></i>
+          )}
+        </div>
+        <div ref={dropdownRef} className="w-0"></div>
+      </div>
+      <OverlayPanel ref={overlayPanelRef}>
+        <div
+          className="h-64 overflow-auto resize border-b border-x p-2"
+          style={{ width: `${texboxRef.current?.offsetWidth || 100}px` }}
+        >
+          <ContentTree
+            language={editContext.contentEditorItem!.language}
+            expandIdPath={link?.targetItemLongId}
+            rootItemIds={rootItemIds}
+            selectionMode="single"
+            selectedItemIds={selection}
+            onNodeClick={(node) => {
+              setShowTree(false);
+              overlayPanelRef.current?.hide();
+              editContext?.operations.editField({
+                field: field.descriptor,
+                rawValue: node.id,
+              });
+            }}
+          />
+        </div>
+      </OverlayPanel>
+    </>
+  );
+}

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

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { Link, LinkEditorDialog } from "../LinkEditorDialog";
+import { useEditContext } from "../client/editContext";
+import { LinkField } from "../fieldTypes";
+import { classNames } from "primereact/utils";
+
+export function LinkFieldEditor({
+  field,
+  readOnly,
+}: {
+  field: LinkField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const [showDialog, setShowDialog] = useState(false);
+  const [link, setLink] = useState<Link>();
+  useEffect(() => {
+    if (!field.value) return;
+    setLink({
+      url: field.value.url,
+      target: field.value.target,
+      targetItemLongId: field.value.targetItemLongId,
+      type: field.value.type,
+      itemId: field.value.targetItemLongId?.split("/").pop(),
+      queryString: field.value.queryString,
+    });
+  }, [field]);
+  if (!field.value) return;
+
+  return (
+    <>
+      <div
+        className={classNames(
+          "focus-shadow flex justify-between border border-gray-300 p-2",
+          readOnly ? "bg-gray-100" : "cursor-pointer bg-white",
+        )}
+        onClick={(e) => {
+          if (readOnly) return;
+          setShowDialog(true);
+          e.preventDefault();
+        }}
+      >
+        <div>{field.value.url}</div>
+        <i className="pi pi-link"></i>
+      </div>
+      {showDialog && (
+        <LinkEditorDialog
+          linkValue={link || { type: "internal" }}
+          onOk={(link) => {
+            const xml =
+              link.type == "internal"
+                ? '<link linktype="internal" querystring="' +
+                  (link.queryString ?? "") +
+                  '" id="' +
+                  link.itemId +
+                  '" target="' +
+                  link.target +
+                  '" />'
+                : '<link linktype="external" querystring="' +
+                  (link.queryString ?? "") +
+                  '" url="' +
+                  link.url +
+                  '" target="' +
+                  link.target +
+                  '" />';
+
+            editContext?.operations.editField({
+              field: field.descriptor,
+              rawValue: xml,
+              refresh: "immediate",
+            });
+
+            setShowDialog(false);
+          }}
+          onCancel={() => {
+            setShowDialog(false);
+          }}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,63 @@
+"use client";
+
+import { InputTextarea } from "primereact/inputtextarea";
+import {
+  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 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;
+
+  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);
+        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;
+      }}
+    />
+  );
+}