@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/utils/useMemoDebug.ts

@@ -1,28 +0,0 @@
-import { useMemo, useRef } from "react";
-
-// Generic type for the return value of the memoized factory
-export function useMemoWithDebug<T>(factory: () => T, dependencies: any[]): T {
-  const previousDependenciesRef = useRef<any[]>([]);
-
-  const hasChanged = dependencies.some((dep, index) => {
-    return dep !== previousDependenciesRef.current[index];
-  });
-
-  if (hasChanged) {
-    dependencies.forEach((dep, index) => {
-      if (dep !== previousDependenciesRef.current[index]) {
-        console.log(
-          `Dependency at index ${index} changed:`,
-          "\nPrevious:",
-          previousDependenciesRef.current[index],
-          "\nCurrent:",
-          dep
-        );
-      }
-    });
-  }
-
-  previousDependenciesRef.current = dependencies;
-
-  return useMemo(factory, dependencies);
-}

package/src/editor/utils.ts

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