@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,150 @@
+"use client";
+
+import { InputText } from "primereact/inputtext";
+import {
+  useEditContext,
+  useEditContextRef,
+  useModifiedFieldsContext,
+  SelectionRange,
+} from "../client/editContext";
+
+import { useEffect, useRef, useState } from "react";
+
+import { Field } from "../pageModel";
+
+export function SingleLineText({
+  field,
+  readOnly,
+  updateFieldValue,
+}: {
+  field: Field;
+  readOnly?: boolean;
+  updateFieldValue: (value: string) => void;
+}) {
+  const editContextRef = useEditContextRef();
+  const editContext = useEditContext();
+  const modifiedFieldsContext = useModifiedFieldsContext();
+  const inputRef = useRef<HTMLInputElement>(null);
+  // const [selectionStart, setSelectionStart] = useState(0);
+  // const [selectionEnd, setSelectionEnd] = useState(0);
+  if (!editContextRef.current) return;
+
+  const fieldItem = field.descriptor.item;
+  const [value, setValue] = useState<string | undefined>(undefined);
+
+  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 (!fieldItem) return;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (editContextRef.current?.operations.undoing) {
+      return;
+    }
+
+    const newValue = e.target.value;
+    if (newValue !== value) {
+      setValue(newValue);
+      updateFieldValue(newValue);
+    }
+  };
+
+  const handleSelect = (e: React.SyntheticEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement;
+    const range: SelectionRange = {
+      fieldId: field.id,
+      startOffset: target.selectionStart || 0,
+      endOffset: target.selectionEnd || 0,
+      text: target.value.slice(
+        target.selectionStart || 0,
+        target.selectionEnd || 0
+      ),
+    };
+
+    editContextRef.current?.setSelectedRange(range);
+  };
+
+  useEffect(() => {
+    if (
+      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
+    ) {
+      const range = editContextRef.current.selectedRange;
+      if (range && inputRef.current) {
+        inputRef.current.setSelectionRange(range.startOffset, range.endOffset);
+        // setSelectionStart(range.startOffset);
+        // setSelectionEnd(range.endOffset);
+      }
+    }
+  }, [editContext?.selectedRange]);
+
+  // // Calculate the position of the highlight
+  // const getHighlightStyle = () => {
+  //   if (!inputRef.current || selectionStart === selectionEnd) return {};
+
+  //   const text = value || "";
+  //   const beforeSelection = text.slice(0, selectionStart);
+  //   const selection = text.slice(selectionStart, selectionEnd);
+
+  //   // Use a temporary span to measure text width
+  //   const temp = document.createElement("span");
+  //   temp.style.font = window.getComputedStyle(inputRef.current).font;
+  //   temp.style.visibility = "hidden";
+  //   temp.style.position = "absolute";
+  //   document.body.appendChild(temp);
+
+  //   temp.textContent = beforeSelection;
+  //   const startPos = temp.getBoundingClientRect().width + 5; // padding
+
+  //   temp.textContent = selection;
+  //   const width = temp.getBoundingClientRect().width;
+
+  //   document.body.removeChild(temp);
+
+  //   return {
+  //     left: `${startPos}px`,
+  //     width: `${width}px`,
+  //   };
+  // };
+
+  return (
+    <div className="relative">
+      {/* <div
+        className="absolute top-0 h-full pointer-events-none"
+        style={{
+          ...getHighlightStyle(),
+          backgroundColor: "rgba(128, 128, 128, 0.2)",
+          display:
+            document.activeElement !== inputRef.current ? "block" : "none",
+        }}
+      /> */}
+      <InputText
+        ref={inputRef}
+        key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
+        value={value || ""}
+        disabled={readOnly}
+        className="p-1.5 focus-shadow text-sm"
+        style={{ width: "100%" }}
+        onChange={handleChange}
+        onSelect={handleSelect}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,261 @@
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useEditContext } from "../client/editContext";
+import { useEffect, useState, useRef } from "react";
+import { OverlayPanel } from "primereact/overlaypanel";
+
+import { ListBox } from "primereact/listbox";
+import { ReferencedItem, TreeListField } from "../fieldTypes";
+import { getLookupSources } from "../services/editService";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { normalizeGuid } from "../utils";
+import ItemSearch from "../ui/ItemSearch";
+import { Button } from "primereact/button";
+import ContentTree from "../ContentTree";
+import { FullItem } from "../pageModel";
+
+type ItemData = {
+  id: string;
+  path?: string;
+  name: string;
+  icon?: string;
+  idPath: string;
+};
+
+export default function TreeListEditor({
+  field,
+  readOnly,
+}: {
+  field: TreeListField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const [selectedItemNodesInTree, setSelectedItemNodesInTree] = useState<
+    ItemData[]
+  >([]);
+  const [selectedFromList, setSelectedFromList] = useState<ReferencedItem[]>(
+    []
+  );
+  const overlayPanelRef = useRef<OverlayPanel>(null);
+  const [currentItemId, setCurrentItemId] = useState<string>("");
+  const [rootItemIds, setRootItemIds] = useState<string[]>([]);
+  const [values, setValues] = useState<ReferencedItem[]>([]);
+  const [hoveredItemId, setHoveredItemId] = useState<string | undefined>();
+  const [hoveredItem, setHoveredItem] = useState<FullItem | undefined>();
+
+  if (!editContext) return;
+
+  useEffect(() => {
+    const loadItem = async () => {
+      if (!hoveredItemId) return;
+      const item = await editContext!.itemsRepository.getItem({
+        id: hoveredItemId,
+        language: editContext!.currentItemDescriptor?.language ?? "en",
+        version: 0,
+      });
+      if (item) setHoveredItem(item);
+    };
+    loadItem();
+  }, [hoveredItemId]);
+
+  useEffect(() => {
+    if (
+      editContext.lockedField?.fieldId === field.descriptor.fieldId &&
+      editContext.lockedField.item.id == field.descriptor.item.id &&
+      editContext.lockedField.item.language == field.descriptor.item.language &&
+      editContext.lockedField.item.version == field.descriptor.item.version
+    )
+      return;
+
+    setValues(field.value || []);
+  }, [field.value]);
+
+  useEffect(() => {
+    const loadLookupSources = async () => {
+      const datasources = await getLookupSources(field, editContext.sessionId);
+      if (datasources.length) {
+        setRootItemIds(datasources.map((x) => x.id));
+      } else setRootItemIds(["{11111111-1111-1111-1111-111111111111}"]);
+    };
+
+    loadLookupSources();
+  }, [field.id, field.descriptor.item.id]);
+
+  const trimPath = (path: string) => {
+    const splitPath = path.split("/");
+
+    if (splitPath.length > 2) {
+      return (
+        splitPath[splitPath.length - 2] + "/" + splitPath[splitPath.length - 1]
+      );
+    }
+    return path;
+  };
+
+  async function removeFromList(items: ReferencedItem[]) {
+    const newValues = values.filter((x) => !items.find((i) => x.id == i.id));
+    setValues(newValues);
+    await editContext?.operations.editField({
+      field: field.descriptor,
+      value: newValues,
+      rawValue: newValues.map((x) => normalizeGuid(x.id)).join("|"),
+      refresh: "waitForQuietPeriod",
+    });
+  }
+
+  async function addToList(
+    itemNodes: {
+      id: string;
+      path?: string;
+      idPath?: string;
+      name: string;
+      icon?: string;
+    }[]
+  ) {
+    setSelectedItemNodesInTree([]);
+
+    const newValues = [...values];
+
+    itemNodes.forEach((node) => {
+      if (!newValues.find((x) => x.id == node.id)) {
+        newValues.push({
+          id: node.id,
+          path: node.path || node.name,
+          name: node.name,
+          icon: node.icon,
+          idPath: node.idPath,
+        });
+      }
+    });
+
+    setValues(newValues);
+
+    await editContext?.operations.editField({
+      field: field.descriptor,
+      value: newValues,
+      rawValue: newValues.map((x) => normalizeGuid(x.id)).join("|"),
+      refresh: "waitForQuietPeriod",
+    });
+  }
+
+  return (
+    <div className="border focus-shadow border-gray-200">
+      <div className="bg-white mb-1 p-2 border-b border-gray-200">
+        <ItemSearch
+          rootItemIds={rootItemIds.map((x) => normalizeGuid(x))}
+          itemSelected={async (item) => {
+            addToList([
+              {
+                id: item.id,
+                path: item.path || item.name,
+                idPath: item.idPath,
+                name: item.name || "",
+                icon: item.icon,
+              },
+            ]);
+          }}
+        />
+      </div>
+      <Splitter className="h-60">
+        <SplitterPanel size={50} className="relative">
+          <div className="absolute inset-0 overflow-auto">
+            <ContentTree
+              expandIdPath={hoveredItem?.idPath}
+              language={editContext.currentItemDescriptor?.language ?? "en"}
+              onDoubleClick={(node) => {
+                if (!readOnly) addToList([node]);
+              }}
+              selectionMode="multiple"
+              selectedItemIds={
+                selectedItemNodesInTree.length
+                  ? selectedItemNodesInTree.map((x) => x.id)
+                  : hoveredItemId
+                    ? [hoveredItemId]
+                    : []
+              }
+              onSelectionChange={(e) => {
+                setSelectedItemNodesInTree(e as ItemData[]);
+              }}
+              rootItemIds={rootItemIds}
+              includeItemPath={true}
+            />
+          </div>
+        </SplitterPanel>
+        <SplitterPanel>
+          <div className="h-full w-full relative">
+            <div className="absolute inset-0 flex">
+              <div className="bg-gray-100 flex flex-col justify-center gap-1 p-1">
+                <SimpleIconButton
+                  label="Add"
+                  icon="pi pi-angle-right"
+                  onClick={() => addToList(selectedItemNodesInTree)}
+                  disabled={readOnly}
+                />
+                <SimpleIconButton
+                  label="Remove"
+                  icon="pi pi-angle-left"
+                  onClick={() => removeFromList(selectedFromList)}
+                  disabled={readOnly}
+                />
+              </div>
+              <div className="flex-1 h-full relative">
+                <ListBox
+                  className="absolute inset-0 overflow-auto text-xs"
+                  options={values}
+                  optionLabel="path"
+                  metaKeySelection={true}
+                  emptyMessage={"None selected"}
+                  multiple={true}
+                  value={selectedFromList}
+                  onChange={(e) => setSelectedFromList(e.value)}
+                  itemTemplate={(option) => (
+                    <div
+                      className="select-none hover:bg-gray-50 relative group flex items-center gap-1"
+                      onMouseEnter={async () => {
+                        setHoveredItemId(option.id);
+                        // setExpandIdPath(option.idPath || "");
+                        setSelectedItemNodesInTree([option]);
+                      }}
+                      onDoubleClick={() => {
+                        if (!readOnly) removeFromList([option]);
+                      }}
+                    >
+                      <img src={option.icon} className="w-4 h-4 mr-2" />
+                      {trimPath(option.path)}{" "}
+                      <button
+                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setCurrentItemId(option.id);
+                          overlayPanelRef.current?.toggle(e);
+                        }}
+                        title="Open"
+                      >
+                        <i className="pi pi-arrow-up-right text-xs text-gray-500" />
+                      </button>
+                    </div>
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </SplitterPanel>
+      </Splitter>
+
+      <OverlayPanel ref={overlayPanelRef} className="p-0" showCloseIcon={true}>
+        <div className="p-3">
+          <div className="flex justify-end gap-2">
+            <Button
+              className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
+              onClick={() => {
+                editContext.loadItem(currentItemId);
+                overlayPanelRef.current?.hide();
+              }}
+            >
+              Open
+            </Button>
+          </div>
+        </div>
+      </OverlayPanel>
+    </div>
+  );
+}

package/src/editor/fieldTypes.ts

@@ -0,0 +1,140 @@
+import { Field } from "./pageModel";
+
+export type TextField = Field & {
+  value: string;
+};
+
+export type PictureField = Field & {
+  value: PictureValue | null;
+};
+
+export type LinkField = Field & {
+  value: LinkValue;
+};
+
+export type InternalLinkField = Field & {
+  value: LinkValue;
+};
+
+export type PictureValue = {
+  name: string;
+  alt: string;
+  variants: PictureVariant[];
+  loopVideos: boolean;
+  allowVideos?: boolean;
+  error?: string;
+};
+
+export type PictureVariant = {
+  mediaItemName: string;
+  name: string;
+  src: string;
+  videoUrl?: string;
+  width: number;
+  height: number;
+  aspectRatio: number;
+  aspectRatioLock?: number;
+  aspectRatioLockText?: string;
+  minWidth?: number;
+  minHeight?: number;
+  thumbSrc?: string;
+  originalSrc?: string;
+  mediaId?: string;
+  idPath?: string;
+  region: PictureRegion;
+};
+
+export type PictureRegion = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type PictureRawValue = {
+  Variants: PictureRawVariant[];
+  AltText?: string;
+};
+
+export type PictureRawVariant = {
+  Name: string;
+  MediaId?: string;
+  VideoId?: string;
+  Region?: PictureRawRegion;
+};
+
+export type PictureRawRegion = {
+  X: number;
+  Y: number;
+  Width: number;
+  Height: number;
+};
+
+export type ImageField = Field & {
+  value: ImageValue | null;
+};
+
+export type ImageValue = {
+  alt: string;
+  src: string;
+};
+
+export type LinkValue = {
+  url: string;
+  type: "internal" | "external";
+  target?: string;
+  targetItemLongId?: string;
+  targetItemName?: string;
+  queryString?: string;
+  targetItemId?: string;
+};
+
+export interface KeyValuePair {
+  key: string;
+  value: string;
+}
+
+export type EnhancedNameValueListField = {
+  value: KeyValuePair[];
+};
+
+export type ReferencedItem = {
+  id: string;
+  name: string;
+  path: string;
+  icon?: string;
+  idPath?: string;
+};
+
+export type TreeListField = Field & {
+  value: ReferencedItem[];
+  _editor: {
+    customEditorProperties: {
+      datasources: string[];
+    };
+  };
+};
+
+export type CheckboxField = Field & {
+  value: boolean;
+};
+
+export type DateField = Field & {
+  value: DateFieldValue;
+};
+
+export type DateFieldValue = Field & {
+  date: string;
+};
+
+export type NumberField = Field & {
+  value: number;
+};
+
+export type AttachmentField = Field & {
+  value: AttachmentValue;
+};
+
+export type AttachmentValue = {
+  src: string;
+};