@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,127 +0,0 @@
-"use client";
-
-import {
-  useEditContext,
-  useEditContextRef,
-  useModifiedFieldsContext,
-} from "../client/editContext";
-
-import { useThrottledCallback } from "use-debounce";
-import { useEffect, useRef, useState } from "react";
-
-import { ReactQuill } from "./ReactQuill";
-import "react-quill-new/dist/quill.snow.css";
-import { classNames } from "primereact/utils";
-import { Field } from "../pageModel";
-
-export function RichTextEditorComponent({
-  field,
-  readOnly,
-}: {
-  field: Field;
-  readOnly?: boolean;
-}) {
-  const editContextRef = useEditContextRef();
-  const editContext = useEditContext();
-  const modifiedFieldsContext = useModifiedFieldsContext();
-
-  const state = useRef({ focus: false });
-  const inputRef = useRef<ReactQuill>(null);
-
-  if (!editContextRef.current) return;
-
-  const [value, setValue] = useState(field.value as string);
-  const fieldItem = field.descriptor.item;
-
-  if (!fieldItem) return;
-
-  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 (
-      !state.current.focus ||
-      !document.activeElement?.classList.contains("ql-editor")
-    ) {
-      if (field.isHistoric) setValue(field.value as string);
-      else setValue(modifiedField?.value ?? (field.value as string));
-    }
-  }, [field.value, modifiedFieldsContext?.modifiedFields]);
-
-  const debouncedSetFieldvalue = useThrottledCallback((value) => {
-    editContextRef.current?.operations.editField({
-      field: field.descriptor,
-      value: value,
-      refresh: "none",
-    });
-  }, editContextRef.current?.configuration.debounceFieldEditsInterval);
-
-  const handleChange = (newValue: string) => {
-    if (newValue === "<p><br></p>" && !field.value) return;
-    if (newValue !== value && state.current.focus && !readOnly) {
-      setValue(newValue);
-      debouncedSetFieldvalue(newValue);
-    }
-  };
-
-  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 (
-    // Primereact 10.6.6: - Editor takes focus on value change
-
-    // <Editor
-    //   className="focus-shadow"
-    //   key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
-    //   disabled={readOnly}
-    //   value={value}
-    //   style={{ width: "100%" }}
-    //   // onTextChange={(e) => {
-    //   //   const val = e.htmlValue ?? "";
-    //   //   setValue(val);
-    //   //   debouncedSetFieldvalue(val);
-    //   // }}
-    // />
-    <div
-      className={classNames(
-        readOnly ? "bg-gray-100" : "bg-white",
-        "focus-shadow",
-      )}
-    >
-      <ReactQuill
-        ref={inputRef}
-        theme="snow"
-        value={value}
-        onChange={handleChange}
-        onFocus={() => {
-          setTimeout(() => {
-            state.current.focus = true;
-          }, 101);
-        }}
-        onBlur={() => {
-          state.current.focus = false;
-        }}
-        readOnly={readOnly}
-      />
-    </div>
-  );
-}

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

@@ -1,174 +0,0 @@
-"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 = {
-      itemId: fieldItem.id,
-      fieldId: field.id,
-      startOffset: target.selectionStart || 0,
-      endOffset: target.selectionEnd || 0,
-      text: target.value.slice(
-        target.selectionStart || 0,
-        target.selectionEnd || 0,
-      ),
-    };
-
-    if (
-      range.text !== editContext?.selectedRange?.text ||
-      (range.text && range.fieldId !== editContext?.selectedRange.fieldId) ||
-      range.itemId !== editContext.selectedRange.itemId
-    ) {
-      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`,
-  //   };
-  // };
-
-  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 (
-    <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="focus-shadow p-1.5 text-sm"
-        style={{ width: "100%" }}
-        onChange={handleChange}
-        onSelect={handleSelect}
-      />
-    </div>
-  );
-}

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

@@ -1,261 +0,0 @@
-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="focus-shadow border border-gray-200">
-      <div className="mb-1 border-b border-gray-200 bg-white p-2">
-        <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="relative h-full w-full">
-            <div className="absolute inset-0 flex">
-              <div className="flex flex-col justify-center gap-1 bg-gray-100 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="relative h-full flex-1">
-                <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="group relative flex items-center gap-1.5 select-none hover:bg-gray-50"
-                      onMouseEnter={async () => {
-                        setHoveredItemId(option.id);
-                        // setExpandIdPath(option.idPath || "");
-                        setSelectedItemNodesInTree([option]);
-                      }}
-                      onDoubleClick={() => {
-                        if (!readOnly) removeFromList([option]);
-                      }}
-                    >
-                      <img src={option.icon} className="h-4 w-4" />
-                      {trimPath(option.path)}{" "}
-                      <button
-                        className="opacity-0 transition-opacity group-hover:opacity-100"
-                        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="rounded bg-blue-500 px-3 py-1 text-sm text-white"
-              onClick={() => {
-                editContext.loadItem(currentItemId);
-                overlayPanelRef.current?.hide();
-              }}
-            >
-              Open
-            </Button>
-          </div>
-        </div>
-      </OverlayPanel>
-    </div>
-  );
-}

package/src/editor/fieldTypes.ts

@@ -1,140 +0,0 @@
-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;
-};