@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/utils.ts

@@ -0,0 +1,486 @@
+import React, { useState } from "react";
+import { useEffect, useRef } from "react";
+
+import { EditContextType } from "./client/editContext";
+
+import { FieldDescriptor } from "../types";
+import { Field, FullItem, ItemDescriptor, Component } 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,
+  component: Component,
+  takeScrollPositionIntoAccount = false,
+) {
+  if (!iframe.contentWindow?.document.body) return undefined;
+
+  let startElement: Element | undefined | null = component.firstDOMElement;
+
+  while (startElement && startElement.tagName === "SCRIPT") {
+    startElement = startElement.nextElementSibling;
+  }
+
+  if (!startElement) {
+    console.error("No start element found for component " + component.id);
+    return null;
+  }
+
+  const startRect = takeScrollPositionIntoAccount
+    ? getAbsolutePosition(startElement as HTMLElement, iframe)
+    : startElement.getBoundingClientRect();
+
+  let endElement: Element | undefined | null = component.lastDOMElement;
+
+  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];
+
+  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 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;
+}