@alpaca-editor/core 1.0.0

package/src/editor/utils.ts

@@ -0,0 +1,435 @@
+import React, { useState } from "react";
+import { useEffect, useRef } from "react";
+
+import { EditContextType } from "./client/editContext";
+
+import { FieldDescriptor } from "../types";
+import { Field, FullItem, ItemDescriptor } from "./pageModel";
+
+export type Rect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+// Hook
+export function useEventListenerExt(
+  eventName: string,
+  handler: any,
+  element: HTMLElement | Window,
+  capture = false
+) {
+  // Create a ref that stores handler
+  const savedHandler = useRef<any>(undefined);
+
+  // Update ref.current value if handler changes.
+  // This allows our effect below to always get latest handler ...
+  // ... without us needing to pass it in effect deps array ...
+  // ... and potentially cause effect to re-run every render.
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(
+    () => {
+      // Make sure element supports addEventListener
+      // On
+      const isSupported = element && element.addEventListener;
+      if (!isSupported) return;
+
+      // Create event listener that calls handler function stored in ref
+      const eventListener = (event: Event) => savedHandler.current(event);
+
+      // Add event listener
+      element.addEventListener(eventName, eventListener, { capture: capture });
+
+      // Remove event listener on cleanup
+      return () => {
+        element.removeEventListener(eventName, eventListener);
+      };
+    },
+    [eventName, element] // Re-run if eventName or element changes
+  );
+}
+
+export const useLocalStorage = <T>(
+  storageKey: string,
+  fallbackState: T
+): [T, React.Dispatch<React.SetStateAction<T>>] => {
+  const [value, setValue] = useState<T>(
+    JSON.parse(
+      typeof window !== "undefined"
+        ? localStorage.getItem(storageKey) ?? JSON.stringify(fallbackState)
+        : JSON.stringify(fallbackState)
+    )
+  );
+
+  useEffect(() => {
+    if (typeof window !== "undefined")
+      localStorage.setItem(storageKey, JSON.stringify(value));
+  }, [value, storageKey]);
+
+  return [value, setValue];
+};
+
+export function isFieldActionExecuting(
+  field: Field,
+  editContext: EditContextType
+) {
+  const fieldItem = field.descriptor.item;
+
+  if (!fieldItem) {
+    return false;
+  }
+
+  var action = editContext.activeFieldActions.find(
+    (x) =>
+      x.field.fieldId == field.id &&
+      x.field.item?.id == fieldItem.id &&
+      x.field.item?.language == fieldItem.language &&
+      x.field.item?.version == fieldItem.version
+  );
+
+  return action?.state == "running";
+}
+
+export function getItemDescriptor(
+  item: FullItem | ItemDescriptor
+): ItemDescriptor {
+  if (!item) throw new Error("Item is null");
+
+  if ("descriptor" in item) {
+    return item.descriptor;
+  }
+
+  return {
+    id: item!.id,
+    language: item!.language,
+    version: item!.version,
+    name: item!.name,
+  };
+}
+
+export function getAbsoluteIconUrl(url: string) {
+  //return configuration.services.editorService.baseUrl + url;
+  return url;
+}
+
+export function findParentWithAttribute(
+  element: HTMLElement,
+  attr: string
+): HTMLElement | null {
+  while (element && element !== document.documentElement) {
+    if (element.hasAttribute(attr)) {
+      return element;
+    }
+    element = element.parentElement as HTMLElement;
+  }
+  return null;
+}
+
+export function parsePlaceholderKey(key: string) {
+  const placeholderKeyComponents = key.split("_");
+
+  const placeholderName =
+    placeholderKeyComponents.length === 1
+      ? placeholderKeyComponents[0]
+      : placeholderKeyComponents[1];
+  const parentId =
+    placeholderKeyComponents.length === 1
+      ? undefined
+      : placeholderKeyComponents[0];
+  return {
+    name: placeholderName,
+    componentId: parentId,
+  };
+}
+
+// export function getFieldRawValue(field: Field, editContext: EditContextType) {
+//   return (
+//     getModifiedField(field.descriptor, editContext)?.rawValue ??
+//     field.rawValue ??
+//     field.value
+//   );
+// }
+
+// export function getFieldValue(field: Field, editContext: EditContextType) {
+//   return getModifiedField(field.descriptor, editContext)?.value ?? field.value;
+// }
+
+// export function getModifiedField(
+//   field: FieldDescriptor,
+//   editContext: EditContextType
+// ) {
+//   const modifiedField = editContext.modifiedFields.find(
+//     (x) =>
+//       x.field.fieldId === field.fieldId &&
+//       x.field.item.id === field.item.id &&
+//       x.field.item.language === field.item.language &&
+//       x.field.item.version === field.item.version
+//   );
+
+//   return modifiedField;
+// }
+
+// export function getModifiedFieldValue(
+//   field: FieldDescriptor,
+//   editContext: EditContextType
+// ) {
+//   return getModifiedField(field, editContext)?.value;
+// }
+
+// export function setModifiedFieldValue(
+//   field: FieldDescriptor,
+//   value: string,
+//   editContext: EditContextType
+// ) {
+//   const modifiedValue = editContext.modifiedFields.find(
+//     (x) =>
+//       x.field.fieldId === field.fieldId &&
+//       x.field.item.id === field.item.id &&
+//       x.field.item.language === field.item.language &&
+//       x.field.item.version === field.item.version
+//   );
+
+//   if (modifiedValue) {
+//     modifiedValue.value = value;
+//   } else {
+//     editContext.modifiedFields.push({
+//       field: field,
+//       value: value,
+//     });
+//   }
+
+//   editContext.setModifiedFields([...editContext.modifiedFields]);
+// }
+
+export function hasFieldLock(
+  field: FieldDescriptor,
+  editContext: EditContextType
+) {
+  if (!editContext.lockedField) {
+    return false;
+  }
+  return (
+    editContext.lockedField.fieldId === field.fieldId &&
+    editContext.lockedField.item.id === field.item.id &&
+    editContext.lockedField.item.language === field.item.language &&
+    editContext.lockedField.item.version === field.item.version
+  );
+}
+
+export function getSessionWithFieldLock(
+  field: FieldDescriptor,
+  editContext: EditContextType
+) {
+  return editContext.activeSessions.find(
+    (s) =>
+      s.fieldLock?.fieldId === field.fieldId &&
+      s.fieldLock?.fieldId === field.fieldId &&
+      s.fieldLock?.item.id === field.item.id &&
+      s.fieldLock?.item.language === field.item.language &&
+      s.fieldLock?.item.version === field.item.version
+  );
+}
+
+export function getFieldDescriptorFromElement(
+  element: Element
+): FieldDescriptor {
+  return {
+    item: {
+      id: element.getAttribute("data-itemid")!,
+      version: parseInt(element.getAttribute("data-version")!),
+      language: element.getAttribute("data-language")!,
+    },
+    fieldId: element.getAttribute("data-fieldid")!,
+  };
+}
+
+export function findNearestComponentId(startElement: Element) {
+  let element: Element | null = startElement;
+  while (element) {
+    if (element.hasAttribute("data-component-start")) {
+      return element.getAttribute("data-component-start") ?? undefined;
+    }
+    const prev: Element | null = element.previousElementSibling;
+    if (!prev) {
+      element = element.parentElement;
+    } else element = prev;
+  }
+  return;
+}
+
+export function findFieldElement(
+  iframe: HTMLIFrameElement,
+  fieldDescriptor: FieldDescriptor
+) {
+  if (!iframe.contentWindow?.document.body) return undefined;
+
+  const fieldElement = iframe.contentWindow?.document.body.querySelector(
+    "[data-itemid='" +
+    fieldDescriptor.item.id +
+      "'][data-language='" +
+      fieldDescriptor.item.language +
+      "'][data-version='" +
+      fieldDescriptor.item.version +
+      "'][data-fieldid='" +
+      fieldDescriptor.fieldId +
+      "']"
+  );
+
+  return fieldElement;
+}
+
+export function findComponentRect(
+  iframe: HTMLIFrameElement,
+  componentId: string,
+  takeScrollPositionIntoAccount = false
+) {
+  if (!iframe.contentWindow?.document.body) return undefined;
+
+  const componentStart = iframe.contentWindow?.document.body.querySelector(
+    "[data-component-start='" + componentId + "']"
+  );
+
+  const componentEnd = iframe?.contentWindow?.document.body.querySelector(
+    "[data-component-end='" + componentId + "']"
+  );
+
+  if (!componentStart || !componentEnd) {
+    return null;
+  }
+
+  let startElement = componentStart.nextElementSibling;
+
+  while (startElement && startElement.tagName === "SCRIPT") {
+    startElement = startElement.nextElementSibling;
+  }
+
+  if (!startElement) {
+    console.error("No start element found for component " + componentId);
+    return null;
+  }
+
+  const startRect = takeScrollPositionIntoAccount
+    ? getAbsolutePosition(startElement as HTMLElement, iframe)
+    : startElement.getBoundingClientRect();
+
+  let endElement = componentEnd.previousElementSibling;  
+
+  while (endElement && endElement.tagName === "SCRIPT") {
+    endElement = endElement.previousElementSibling;
+  }
+
+  if (!endElement) return null;
+
+  const endRect = takeScrollPositionIntoAccount
+    ? getAbsolutePosition(endElement as HTMLElement, iframe)
+    : endElement.getBoundingClientRect();
+
+  const elements =
+    startElement === endElement ? [startElement] : [startElement, endElement];
+
+  // console.log(
+  //   "start rect",
+  //   startRect,
+  //   startElement,
+  //   iframe.contentWindow?.scrollY,
+  //   takeScrollPositionIntoAccount
+  // );
+
+  return {
+    rect: {
+      x: startRect.x,
+      y: startRect.y,
+      width: endRect.x + endRect.width - startRect.x,
+      height: endRect.y + endRect.height - startRect.y,
+    },
+    elements: elements,
+  };
+}
+
+export const getAbsolutePosition = (
+  element: HTMLElement,
+  iframe: HTMLIFrameElement
+) => {
+  const rect = element.getBoundingClientRect();
+  const scrollLeft =
+    iframe.contentWindow?.scrollX ||
+    iframe.contentDocument?.documentElement.scrollLeft || 0;
+  const scrollTop =
+    iframe.contentWindow?.scrollY ||
+    iframe.contentDocument?.documentElement.scrollTop || 0;
+
+  
+
+  return {
+    x: rect.left + scrollLeft,
+    y: rect.top + scrollTop,
+    width: rect.width,
+    height: rect.height,
+  };
+};
+
+export function findParentComponentId(element: HTMLElement) {
+  while (element && element !== document.documentElement) {
+    const startElement = findStartElement(element);
+
+    if (startElement) {
+      return startElement.getAttribute("data-component-start");
+    }
+    element = element.parentElement as HTMLElement;
+  }
+  return null;
+}
+
+function findStartElement(element: HTMLElement) {
+  let prev: Element | null = element;
+  while (prev) {
+    prev = prev.previousElementSibling;
+    if (prev?.getAttribute("data-component-start")) {
+      return prev;
+    }
+  }
+  return null;
+}
+
+export function normalizeGuid(id: string) {
+  id = id.toUpperCase();
+
+  if (id.length && id[0] === "{") return id;
+  return "{" + id + "}";
+}
+
+const dateOptions: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "numeric",
+  day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  hour12: false,
+};
+
+const dateFormat = Intl.DateTimeFormat(typeof navigator !== 'undefined' ? navigator.language : 'en', dateOptions);
+
+export function formatDate(date: Date) {
+  return dateFormat.format(date);
+}
+
+export function findClosestFieldElement(node: Node | null): HTMLElement | null {
+  let current: Node | null = node;
+
+  while (current) {        
+    if (current.nodeType === Node.ELEMENT_NODE) {
+      const element = current as Element;
+      if (element.hasAttribute("data-fieldid")) {
+        return element as HTMLElement;
+      }
+    }
+    current = current.parentNode;
+  }
+
+  return null;
+}

package/src/editor/views/CompareView.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { LanguageSelector } from "../menubar/LanguageSelector";
+import { VersionSelector } from "../menubar/VersionSelector";
+import { FullItem, ItemDescriptor, Version } from "../pageModel";
+import { usePageViewContext } from "../page-viewer/pageViewContext";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { SingleEditView } from "./SingleEditView";
+import { getLanguagesAndVersions } from "../services/contentService";
+import { Allotment } from "allotment";
+import { ItemEditor } from "./ItemEditor";
+
+export function CompareView() {
+  const editContext = useEditContext();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  if (!editContext) return;
+
+  const [compareToItem, setCompareToItem] = useState<FullItem | undefined>();
+  const [compareToVersions, setCompareToVersions] = useState<Version[]>([]);
+
+  const compareTo = editContext.compareTo;
+  const setCompareTo = editContext.setCompareTo;
+
+  const comparePageViewContext = usePageViewContext({
+    pageItemDescriptor: compareToItem?.descriptor,
+    itemsRepository: editContext.itemsRepository,
+    configuration: editContext.configuration,
+  });
+
+  useEffect(() => {
+    comparePageViewContext.setDevice(editContext.pageView.device);
+  }, [editContext.pageView.device]);
+
+  const updateCompareToVersions = async () => {
+    if (!compareTo || !compareTo.id || !compareTo.language) {
+      setCompareToVersions([]);
+      return;
+    }
+    const result = await getLanguagesAndVersions(compareTo);
+    if (result?.data) {
+      const versions = result.data.versions.reverse();
+      setCompareToVersions(versions);
+    }
+  };
+
+  useEffect(() => {
+    const updateCompareTo = async () => {
+      if (!editContext) return;
+      if (editContext.contentEditorItem) {
+        let urlLanguage =
+          searchParams.get("compareLanguage") ||
+          editContext.contentEditorItem.descriptor.language;
+        let urlVersion =
+          parseInt(searchParams.get("compareVersion") || "0") ||
+          editContext.currentItemDescriptor?.version;
+
+        const language = editContext.itemLanguages.find(
+          (x) => x.languageCode === urlLanguage
+        );
+
+        if (!language || !language.versions) {
+          urlLanguage = "";
+        }
+
+        if (!editContext.currentItemDescriptor?.id || !language) {
+          setCompareTo(undefined);
+          return;
+        }
+
+        const result = await getLanguagesAndVersions({
+          id: editContext.currentItemDescriptor?.id,
+          language: language.languageCode,
+          version: 0,
+        });
+        if (result?.data) {
+          const versions = [...result.data.versions].reverse();
+          const version = versions.find((x) => x.version === urlVersion);
+
+          setCompareTo({
+            id: editContext.contentEditorItem.descriptor.id,
+            language: urlLanguage,
+            version: version?.version || 0,
+          });
+        }
+      }
+    };
+    updateCompareTo();
+  }, [searchParams, editContext?.itemLanguages]);
+
+  useEffect(() => {
+    const updateCompareToItem = async () => {
+      if (!compareTo || !compareTo.id || !compareTo.language) {
+        setCompareToItem(undefined);
+        return;
+      }
+      const item = await editContext?.itemsRepository.getItem(compareTo);
+      setCompareToItem(item);
+    };
+    updateCompareToItem();
+    updateCompareToVersions();
+  }, [compareTo]);
+
+  function updateCompareTo(compareToItemDescriptor: ItemDescriptor) {
+    if (compareToItemDescriptor) {
+      const newParams = new URLSearchParams(searchParams.toString());
+      newParams.set("compareLanguage", compareToItemDescriptor.language);
+      newParams.set(
+        "compareVersion",
+        compareToItemDescriptor.version.toString()
+      );
+      router.push(`?${newParams.toString()}`);
+    }
+  }
+
+  const originalSelector = (
+    <div className="flex-1 bg-gray-100 border-b flex items-center justify-center flex-shrink-0 text-sm text-gray-600 p-1">
+      <LanguageSelector
+        selectedLanguage={editContext.contentEditorItem?.descriptor?.language}
+        showAllLanguagesSwitch={false}
+        darkMode
+        onLanguageSelected={(language) => {
+          if (!editContext.contentEditorItem) return;
+          editContext.loadItem({
+            id: editContext.contentEditorItem.descriptor.id,
+            language: language.languageCode,
+            version: 0,
+          });
+        }}
+      />
+      {compareTo?.language && (
+        <VersionSelector
+          darkMode
+          readOnly={true}
+          versions={editContext.itemVersions}
+          itemDescriptor={editContext.currentItemDescriptor}
+          actualVersion={editContext.contentEditorItem?.version}
+          onVersionSelected={(version) => {
+            if (!editContext.contentEditorItem) return;
+            editContext.loadItem({
+              id: editContext.contentEditorItem.descriptor.id,
+              language: editContext.contentEditorItem.descriptor.language,
+              version,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+
+  const compareToSelector = (
+    <div className="flex-1 bg-gray-100 border-b flex items-center justify-center flex-shrink-0 text-sm text-gray-600 p-1">
+      <LanguageSelector
+        selectedLanguage={compareTo?.language}
+        showAllLanguagesSwitch={false}
+        darkMode
+        onLanguageSelected={(language) => {
+          if (!compareTo?.id) return;
+          updateCompareTo({
+            id: compareTo.id,
+            language: language.languageCode,
+            version: compareTo.version,
+          });
+        }}
+      />
+      {compareTo?.language && (
+        <VersionSelector
+          darkMode
+          readOnly={true}
+          versions={compareToVersions}
+          itemDescriptor={compareTo}
+          actualVersion={compareToItem?.version}
+          onVersionSelected={(version) => {
+            if (!compareTo?.id) return;
+            updateCompareTo({
+              id: compareTo.id,
+              language: compareTo.language,
+              version,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+
+  if (
+    (compareToItem && !compareToItem.hasLayout) ||
+    comparePageViewContext.device === ""
+  )
+    return (
+      <div className="flex flex-col h-full w-full items-stretch">
+        <div className="flex w-full">
+          {originalSelector}
+          {compareToSelector}
+        </div>
+        <div className="flex-1 relative">
+          <div className="absolute w-full h-full">
+            <ItemEditor
+              pageViewContext={editContext.pageView}
+              compareToItem={compareToItem}
+            />
+          </div>
+        </div>
+      </div>
+    );
+
+  return (
+    <Allotment className="flex h-full w-full">
+      <Allotment.Pane>
+        <div className="flex flex-col h-full w-full items-stretch">
+          {originalSelector}
+          <SingleEditView
+            key="original"
+            name="original"
+            mode={editContext?.previewMode ? "view" : "edit"}
+            pageViewContext={editContext.pageView}
+            itemDescriptor={editContext.contentEditorItem?.descriptor}
+          />
+        </div>
+      </Allotment.Pane>
+      <Allotment.Pane>
+        <div className="flex flex-col h-full w-full items-stretch">
+          {compareToSelector}
+          {compareTo?.language && (
+            <SingleEditView
+              key="compareTo"
+              name="compareTo"
+              mode={
+                compareToItem?.id ===
+                  editContext.contentEditorItem?.descriptor.id &&
+                compareToItem?.language ===
+                  editContext.contentEditorItem?.descriptor.language &&
+                compareToItem?.version ===
+                  editContext.contentEditorItem?.descriptor.version
+                  ? editContext?.previewMode
+                    ? "view"
+                    : "edit"
+                  : "compare"
+              }
+              pageViewContext={comparePageViewContext}
+              itemDescriptor={compareTo}
+            />
+          )}
+          {!compareTo?.language && (
+            <div className="flex flex-col h-full w-full items-center justify-center">
+              <div className="text-gray-400">
+                Select a language and version to compare
+              </div>
+            </div>
+          )}
+        </div>
+      </Allotment.Pane>
+    </Allotment>
+  );
+}

package/src/editor/views/EditView.tsx

@@ -0,0 +1,27 @@
+import { useEditContext } from "../client/editContext";
+import { CompareView } from "./CompareView";
+import { SingleEditView } from "./SingleEditView";
+
+export function EditView() {
+  const editContext = useEditContext();
+  if (!editContext) return null;
+
+  if (!editContext.contentEditorItem?.descriptor)
+    return (
+      <div className="grid items-center justify-center h-full w-full">
+        <div className="text-sm text-gray-500">Not item selected</div>
+      </div>
+    );
+
+  if (editContext.compareMode) return <CompareView />;
+
+  return (
+    <SingleEditView
+      key="single"
+      name="single"
+      mode={editContext?.previewMode ? "view" : "edit"}
+      pageViewContext={editContext.pageView}
+      itemDescriptor={editContext.contentEditorItem?.descriptor}
+    />
+  );
+}