@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/editor-warnings/NoWriteAccess.tsx

@@ -0,0 +1,16 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+
+export function NoWriteAccess({ item }: EditorWarningProps) {
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (editContext.mode !== "edit") return;
+  if (!item.canWriteItem) {
+    return (
+      <EditorWarning title="You dont have write access." severity="warning">
+        <p>You can't edit this item because you don't have write access.</p>
+      </EditorWarning>
+    );
+  }
+}

package/src/editor/editor-warnings/ValidationErrors.tsx

@@ -0,0 +1,54 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+
+export function ValidationErrors({ item, editContext }: EditorWarningProps) {
+  let validationResult = editContext.validationResult
+    ?.find(
+      (x) =>
+        x.item.id === item.id &&
+        x.item.language === item.language &&
+        x.item.version === item.version
+    )
+    ?.results.filter((x) => x.itemId === item.id);
+
+  if (!validationResult) {
+    const pageResult = editContext.validationResult?.find(
+      (x) => x.item.id === editContext?.page?.item.id
+    );
+
+    if (pageResult)
+      validationResult = pageResult.results.filter((x) => x.itemId === item.id);
+  }
+
+  if (!validationResult?.length) return null;
+  const fields = validationResult?.filter((x) => x.fieldId);
+
+  return (
+    <EditorWarning title="Validation" severity="warning">
+      {validationResult
+        ?.filter((x) => !x.fieldId)
+        .map((x) => (
+          <div key={x.validator}>{x.message}</div>
+        ))}
+      {fields?.length > 0 && (
+        <div>
+          The following fields have validation messages:{" "}
+          {fields.map((x) => (
+            <span
+              className="cursor-pointer font-bold"
+              key={x.validator + x.fieldId}
+              onClick={() => {
+                const field = Object.values(item.fields).find(
+                  (f) => f.id === x.fieldId
+                );
+                if (field) editContext.setFocusedField(field.descriptor, false);
+              }}
+            >
+              {x.fieldName}
+            </span>
+          ))}
+        </div>
+      )}
+    </EditorWarning>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { AttachmentField } from "../fieldTypes";
+
+export function AttachmentEditor({ field }: { field: AttachmentField }) {
+  return (
+    <div>
+      <img src={field.value.src} />
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEditContext } from "../client/editContext";
+
+import { Checkbox } from "primereact/checkbox";
+import { useEffect, useState } from "react";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { CheckboxField } from "../fieldTypes";
+
+export function CheckboxEditor({
+  field,
+  readOnly,
+}: {
+  field: CheckboxField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  useEffect(() => {
+    setIsUpdating(false);
+  }, [field]);
+
+  if (!editContext) return;
+  const fieldItem = field.descriptor.item;
+  if (!fieldItem) return;
+
+  if (isUpdating) {
+    return <ProgressSpinner style={{ width: "18px", height: "18px" }} />;
+  }
+
+  return (
+    <Checkbox
+      key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
+      checked={field.value}
+      disabled={readOnly}
+      onClick={() => {
+        setIsUpdating(true);
+        editContext.operations.editField({
+          field: field.descriptor,
+          rawValue: field.value ? "0" : "1",
+          refresh: "immediate",
+        });
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,80 @@
+"use client";
+
+import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
+
+import { useEditContext } from "../client/editContext";
+import { useEffect, useState } from "react";
+
+import { getLookupSources } from "../services/editService";
+import { InternalLinkField } from "../fieldTypes";
+import { ItemIdAndName } from "../pageModel";
+import { normalizeGuid } from "../utils";
+
+export function DropLinkEditor({
+  field,
+  readOnly,
+}: {
+  field: InternalLinkField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [lazyItems, setLazyItems] = useState<ItemIdAndName[]>([]);
+  const [lazyLoading, setLazyLoading] = useState<boolean>(true);
+
+  if (!field) return;
+
+  if (!editContext) return;
+
+  useEffect(() => {
+    onLazyLoad();
+  }, [
+    field.descriptor.fieldId +
+      field.descriptor.item.id +
+      field.descriptor.item.language +
+      field.descriptor.item.version,
+  ]);
+
+  const onLazyLoad = async () => {
+    setLazyLoading(true);
+    const options = await getLookupSources(field, editContext.sessionId);
+    setLazyItems(options);
+    setLazyLoading(false);
+  };
+
+  return (
+    <Dropdown
+      value={field.value?.targetItemId}
+      disabled={readOnly}
+      onChange={(e: DropdownChangeEvent) => {
+        editContext?.operations.editField({
+          field: field.descriptor,
+          rawValue: normalizeGuid(e.value), // typeof e.value === "string" ? e.value : e.value.id, // This has changed in primereact
+        });
+      }}
+      options={lazyItems}
+      optionLabel="name"
+      optionValue="id"
+      placeholder="Select"
+      className="md:w-14rem w-full"
+      virtualScrollerOptions={{
+        lazy: true,
+        onLazyLoad: onLazyLoad,
+        itemSize: 38,
+        // showLoader: true,
+        loading: lazyLoading,
+        //delay: 250,
+        // loadingTemplate: (options) => {
+        //   return (
+        //     <div
+        //       className="flex align-items-center p-2"
+        //       style={{ height: "38px" }}
+        //     >
+        //       <Skeleton width={options.even ? "60%" : "50%"} height="1rem" />
+        //     </div>
+        //   );
+        // },
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
+
+import { useEditContext } from "../client/editContext";
+import { useEffect, useState } from "react";
+
+import { getLookupSources } from "../services/editService";
+import { TextField } from "../fieldTypes";
+import { ItemIdAndName } from "../pageModel";
+
+export function DropListEditor({
+  field,
+  readOnly,
+}: {
+  field: TextField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [lazyItems, setLazyItems] = useState<ItemIdAndName[]>([]);
+  const [lazyLoading, setLazyLoading] = useState<boolean>(true);
+
+  if (!field) return;
+
+  if (!editContext) return;
+
+  useEffect(() => {
+    onLazyLoad();
+  }, [field.descriptor]);
+
+  const onLazyLoad = async () => {
+    setLazyLoading(true);
+    const options = await getLookupSources(field, editContext.sessionId);
+    if (field.value && !options.find((o) => o.name === field.value)) {
+      console.log("Adding unknown option", field.value);
+      options.unshift({
+        id: "unknown",
+        name: `[Unknown: ${field.value}]`,
+      });
+    }
+    setLazyItems(options);
+    setLazyLoading(false);
+  };
+
+  return (
+    <Dropdown
+      value={
+        lazyItems.find((o) => o.name === field.value)?.name ||
+        "[Unknown: " + field.value + "]"
+      }
+      disabled={readOnly}
+      onChange={(e: DropdownChangeEvent) => {
+        editContext?.operations.editField({
+          field: field.descriptor,
+          rawValue: e.value,
+        });
+      }}
+      options={lazyItems}
+      optionLabel="name"
+      optionValue="name"
+      placeholder="Select"
+      className="w-full md:w-14rem"
+      virtualScrollerOptions={{
+        lazy: true,
+        onLazyLoad: onLazyLoad,
+        itemSize: 38,
+        // showLoader: true,
+        loading: lazyLoading,
+        //delay: 250,
+        // loadingTemplate: (options) => {
+        //   return (
+        //     <div
+        //       className="flex align-items-center p-2"
+        //       style={{ height: "38px" }}
+        //     >
+        //       <Skeleton width={options.even ? "60%" : "50%"} height="1rem" />
+        //     </div>
+        //   );
+        // },
+      }}
+    />
+  );
+}

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,188 @@
+"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";
+import ItemSearch from "../ui/ItemSearch";
+import { normalizeGuid } from "../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);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  if (!editContext) return;
+
+  // Helper function to normalize GUID formats for comparison
+  const normalizeKey = (key: string): string => {
+    return key.toLowerCase().replace(/[{}]/g, "");
+  };
+
+  const selection = [];
+  if (link?.itemId) {
+    selection.push(normalizeKey(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.fieldId +
+      field.descriptor.item.id +
+      field.descriptor.item.language +
+      field.descriptor.item.version,
+  ]);
+
+  // Close overlay when parent containers scroll to prevent misalignment
+  useEffect(() => {
+    if (!showTree) return;
+
+    const handleScroll = () => {
+      setShowTree(false);
+      overlayPanelRef.current?.hide();
+    };
+
+    // Find scrollable parent elements
+    const scrollableParents: Element[] = [];
+    let element = texboxRef.current?.parentElement;
+
+    while (element) {
+      const computedStyle = window.getComputedStyle(element);
+      const overflowY = computedStyle.overflowY;
+      const overflowX = computedStyle.overflowX;
+
+      if (
+        overflowY === "auto" ||
+        overflowY === "scroll" ||
+        overflowX === "auto" ||
+        overflowX === "scroll"
+      ) {
+        scrollableParents.push(element);
+      }
+      element = element.parentElement;
+    }
+
+    // Also listen to window scroll
+    scrollableParents.push(window as any);
+
+    // Add scroll listeners
+    scrollableParents.forEach((parent) => {
+      parent.addEventListener("scroll", handleScroll, { passive: true });
+    });
+
+    return () => {
+      scrollableParents.forEach((parent) => {
+        parent.removeEventListener("scroll", handleScroll);
+      });
+    };
+  }, [showTree]);
+
+  return (
+    <>
+      <div>
+        <div
+          ref={texboxRef}
+          className={classNames(
+            "justiy-between focus-shadow flex cursor-pointer justify-between border p-1.5 text-sm",
+            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 style={{ width: `${texboxRef.current?.offsetWidth || 100}px` }}>
+          <div className="border-b border-gray-200 bg-white p-2">
+            <ItemSearch
+              rootItemIds={rootItemIds.map((x) => normalizeGuid(x))}
+              autoFocus={true}
+              itemSelected={(item) => {
+                setShowTree(false);
+                overlayPanelRef.current?.hide();
+                editContext?.operations.editField({
+                  field: field.descriptor,
+                  rawValue: item.id,
+                });
+              }}
+            />
+          </div>
+          <div
+            ref={containerRef}
+            className="h-64 overflow-auto border-x border-b p-2"
+          >
+            <ContentTree
+              language={editContext.contentEditorItem!.language}
+              expandIdPath={link?.targetItemLongId}
+              rootItemIds={rootItemIds}
+              selectionMode="single"
+              selectedItemIds={selection}
+              scrollToSelected={showTree}
+              onSelectionChange={(nodes) => {
+                setShowTree(false);
+                overlayPanelRef.current?.hide();
+                editContext?.operations.editField({
+                  field: field.descriptor,
+                  rawValue: nodes[0]?.id,
+                });
+              }}
+            />
+          </div>
+        </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);
+          }}
+        />
+      )}
+    </>
+  );
+}