@alpaca-editor/core 1.0.3938 → 1.0.3941

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

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

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

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

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

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

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

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

@@ -1,117 +0,0 @@
-"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.fieldId +
-      field.descriptor.item.id +
-      field.descriptor.item.language +
-      field.descriptor.item.version,
-  ]);
-
-  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
-          className="h-64 resize overflow-auto border-x border-b p-2"
-          style={{ width: `${texboxRef.current?.offsetWidth || 100}px` }}
-        >
-          <ContentTree
-            language={editContext.contentEditorItem!.language}
-            expandIdPath={link?.targetItemLongId}
-            rootItemIds={rootItemIds}
-            selectionMode="single"
-            selectedItemIds={selection}
-            onSelectionChange={(nodes) => {
-              setShowTree(false);
-              overlayPanelRef.current?.hide();
-              editContext?.operations.editField({
-                field: field.descriptor,
-                rawValue: nodes[0]?.id,
-              });
-            }}
-          />
-        </div>
-      </OverlayPanel>
-    </>
-  );
-}

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

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

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