@alpaca-editor/core 1.0.3942 → 1.0.3944

package/src/editor/page-viewer/pageModelSkeletonBuilder.ts

@@ -0,0 +1,412 @@
+import { EditContextType } from "../client/editContext";
+import { PageViewContext } from "./pageViewContext";
+import {
+  ComponentSkeleton,
+  PageSkeleton,
+  PlaceholderSkeleton,
+  RenderedItemSkeleton,
+} from "../pageModel";
+
+export function buildPageModelSkeleton(
+  iframeDocument: Document | undefined,
+  editContextRef: React.MutableRefObject<EditContextType | undefined>,
+  pageViewContextRef: React.MutableRefObject<PageViewContext | undefined>,
+) {
+  if (!iframeDocument || !editContextRef.current || !pageViewContextRef.current)
+    return;
+
+  const extractItemId = (uri: string): string => {
+    const match = uri.match(/\{[A-F0-9-]+\}/i);
+    return match
+      ? match[0].replace(/[{}]/g, "").toLowerCase()
+      : uri.toLowerCase();
+  };
+
+  // Function to ensure IDs are in UUID format
+  const ensureUUIDFormat = (id: string): string => {
+    // If it's already in UUID format (with or without curly braces), return it
+    if (
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)
+    ) {
+      return id;
+    }
+
+    // If it's in curly braces format, remove them
+    if (
+      /^\{[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\}$/i.test(
+        id,
+      )
+    ) {
+      return id.replace(/[{}]/g, "");
+    }
+
+    // If it's a GUID without hyphens, add them
+    if (/^[0-9a-f]{32}$/i.test(id)) {
+      return `${id.substring(0, 8)}-${id.substring(8, 12)}-${id.substring(12, 16)}-${id.substring(16, 20)}-${id.substring(20, 32)}`;
+    }
+
+    // If it's a shorter ID, pad it to make it a valid UUID
+    if (id.length < 32) {
+      const paddedId = id.padEnd(32, "0");
+      return `${paddedId.substring(0, 8)}-${paddedId.substring(8, 12)}-${paddedId.substring(12, 16)}-${paddedId.substring(16, 20)}-${paddedId.substring(20, 32)}`;
+    }
+
+    // For any other format, return as is
+    return id;
+  };
+
+  const pageItemDescriptor = pageViewContextRef.current?.pageItemDescriptor;
+
+  if (!pageItemDescriptor) return;
+
+  const pageItem: RenderedItemSkeleton = {
+    ...pageItemDescriptor,
+    renderedFieldIds: [],
+  };
+
+  const start = performance.now();
+
+  const treeWalker = iframeDocument.createTreeWalker(
+    iframeDocument.documentElement, // Root node to start traversal
+    NodeFilter.SHOW_ELEMENT, // Only show element nodes
+    null, // Optional filter function, can be `null`
+  );
+
+  const root: ComponentSkeleton = {
+    placeholders: [],
+    id: "page",
+    type: "Page",
+    typeId: "",
+    name: "Page",
+    items: [pageItem],
+    datasourceItem: pageItem,
+    renderedDictionaryKeys: [],
+    editorFields: {},
+  };
+
+  let currentComponent: ComponentSkeleton | undefined = root;
+  let currentPlaceholder: undefined | PlaceholderSkeleton;
+
+  const startComponent = (
+    componentStartId: string,
+    element: Element,
+    dataSourceItemId?: string,
+  ) => {
+    if (!currentPlaceholder) {
+      if (!currentComponent) {
+        console.error(
+          "Component start without parent component:",
+          componentStartId,
+        );
+        return;
+      }
+
+      currentPlaceholder = currentComponent.placeholders.find(
+        (x) => x.key === "implicit_" + currentComponent?.datasourceItem?.id,
+      );
+
+      if (!currentPlaceholder) {
+        currentPlaceholder = {
+          key: "implicit_" + currentComponent?.datasourceItem?.id,
+          name: "Implicit placeholder: " + currentComponent?.datasourceItem?.id,
+          description: "",
+          components: [],
+          parentComponent: currentComponent,
+        };
+
+        if (!currentComponent) {
+          console.error(
+            "Component start without placeholder or parent component",
+          );
+        } else {
+          currentComponent.placeholders.push(currentPlaceholder);
+        }
+      }
+    }
+    if (currentPlaceholder) {
+      const language =
+        element.getAttribute("data-language") || pageItem.language;
+      const version = element.hasAttribute("data-version")
+        ? parseInt(element.getAttribute("data-version")!)
+        : pageItem.version;
+
+      const itemId = dataSourceItemId || element.getAttribute("data-itemid");
+
+      const datasourceItem = itemId
+        ? {
+            id: itemId,
+            language,
+            version,
+            renderedFieldIds: [],
+          }
+        : undefined;
+
+      const layoutId = element.getAttribute("data-layoutid");
+
+      currentComponent = currentPlaceholder.components.find(
+        (x) => x.id === componentStartId,
+      );
+
+      if (!currentComponent) {
+        currentComponent = {
+          id: componentStartId,
+          name: "",
+          type: element.getAttribute("data-type") || "",
+          typeId: element.getAttribute("data-typeid") || "",
+          items: datasourceItem ? [datasourceItem] : [],
+          placeholders: [],
+          parentPlaceholder: currentPlaceholder,
+          renderedDictionaryKeys: [],
+          datasourceItem,
+          layoutId: layoutId || undefined,
+          editorFields: {},
+          firstDOMElement:
+            element.tagName === "SCRIPT"
+              ? (element.nextElementSibling ?? element)
+              : element,
+        };
+
+        currentPlaceholder.components.push(currentComponent);
+      }
+      currentPlaceholder = undefined;
+      return currentComponent;
+    }
+  };
+
+  const endComponent = (componentEndId: string) => {
+    if (!currentComponent || currentComponent.id !== componentEndId) {
+      console.error(
+        "Component end does not match start",
+        currentComponent,
+        componentEndId,
+      );
+
+      // Placeholder closed implicitly
+      if (currentPlaceholder?.parentComponent.id === componentEndId) {
+        currentComponent = currentPlaceholder.parentComponent;
+        currentPlaceholder = undefined;
+      }
+    }
+    currentPlaceholder = currentComponent?.parentPlaceholder;
+
+    if (currentPlaceholder?.key.startsWith("implicit_")) {
+      currentComponent = currentPlaceholder.parentComponent;
+    } else currentComponent = undefined;
+  };
+
+  const componentStack: { component: ComponentSkeleton; element: Element }[] =
+    [];
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+
+    const element = node as Element;
+
+    if (componentStack.length > 0) {
+      const component = componentStack[componentStack.length - 1];
+      //if element is not a descendant of the component's firstDOMElement,   the component from the stack
+      if (component && !component.element.contains(element)) {
+        componentStack.pop();
+        endComponent(component.component.id);
+      }
+    }
+
+    if (currentComponent && element.getAttribute("chrometype") === "field") {
+      const id = element.getAttribute("id");
+
+      if (id) {
+        //fld_C866BEE59CE340F18529EF72E1EC34A7_427EC0BD3BF245B9880FBDB0054E7925_en_1_f3327de03c4c4fb39dae57c139e6202d_913_edit
+        const idComponents = id.split("_");
+        if (idComponents.length > 2) {
+          let fieldId = idComponents[2]?.toLocaleLowerCase();
+          if (!fieldId) continue;
+          fieldId = ensureUUIDFormat(fieldId);
+
+          let itemId = idComponents[1]?.toLocaleLowerCase();
+          if (!itemId) continue;
+          itemId = ensureUUIDFormat(itemId);
+
+          let renderedItem =
+            itemId == currentComponent.datasourceItem?.id
+              ? currentComponent.datasourceItem
+              : currentComponent.items.find((x) => x.id === itemId);
+
+          if (!renderedItem) {
+            renderedItem = {
+              id: itemId,
+              language: currentComponent.datasourceItem?.language || "",
+              version: currentComponent.datasourceItem?.version || 0,
+              renderedFieldIds: [],
+            };
+            currentComponent.items.push(renderedItem);
+          }
+
+          if (
+            renderedItem &&
+            renderedItem.renderedFieldIds.indexOf(fieldId) === -1
+          ) {
+            renderedItem.renderedFieldIds.push(fieldId);
+          }
+
+          currentComponent.editorFields;
+        }
+      }
+    }
+
+    if (currentComponent && element.hasAttribute("data-fieldid")) {
+      const fieldId = element.getAttribute("data-fieldid")!;
+      const formattedFieldId = ensureUUIDFormat(fieldId);
+
+      const language =
+        element.getAttribute("data-language") ||
+        currentComponent.datasourceItem?.language ||
+        pageItem.language;
+      const version = element.hasAttribute("data-version")
+        ? parseInt(element.getAttribute("data-version")!)
+        : currentComponent.datasourceItem?.version || pageItem.version;
+      const itemId =
+        element.getAttribute("data-itemid") ||
+        currentComponent.datasourceItem?.id;
+
+      if (!itemId) continue;
+
+      let renderedItem = currentComponent.items.find(
+        (x) =>
+          x.id === itemId && x.language === language && x.version === version,
+      );
+
+      if (!renderedItem) {
+        renderedItem = {
+          id: itemId,
+          language,
+          version,
+          renderedFieldIds: [],
+        };
+        currentComponent.items.push(renderedItem);
+      }
+
+      if (renderedItem.renderedFieldIds.indexOf(formattedFieldId) === -1) {
+        renderedItem.renderedFieldIds.push(formattedFieldId);
+      }
+    }
+
+    if (element.tagName == "DIV" && element.hasAttribute("sc_item")) {
+      const componentId = extractItemId(element.getAttribute("sc_item")!);
+      if (componentId) {
+        const component = startComponent(componentId, element, componentId);
+
+        if (component) {
+          component.lastDOMElement = component.firstDOMElement;
+          componentStack.push({ component, element });
+        }
+      }
+    }
+
+    if (element.tagName === "SCRIPT") {
+      const placeholderStartId = element.getAttribute("data-placeholder-start");
+      const placeholderEndId = element.getAttribute("data-placeholder-end");
+      const componentStartId = element.getAttribute("data-component-start");
+      const componentEndId = element.getAttribute("data-component-end");
+      const dictionaryKeyStart = element.getAttribute(
+        "data-dictionary-key-start",
+      );
+      const editorGroup = element.getAttribute("data-editor-group");
+
+      if (currentComponent && editorGroup) {
+        let group = currentComponent.editorFields[editorGroup];
+        if (!group) {
+          group = {
+            addFields: [],
+            removeFields: [],
+          };
+          currentComponent.editorFields[editorGroup] = group;
+        }
+        const addFields = element.getAttribute("data-add-fields")?.split(",");
+        const removeFields = element
+          .getAttribute("data-remove-fields")
+          ?.split(",");
+
+        group.addFields = [...group.addFields, ...(addFields || [])];
+        group.removeFields = [...group.removeFields, ...(removeFields || [])];
+      }
+
+      if (dictionaryKeyStart) {
+        if (!currentComponent) {
+          console.error(
+            "Dictionary key without component:",
+            dictionaryKeyStart,
+          );
+        } else {
+          currentComponent.renderedDictionaryKeys.push(dictionaryKeyStart);
+        }
+      }
+      if (placeholderStartId) {
+        if (!currentComponent) {
+          console.error(
+            "Placeholder start without component:",
+            placeholderStartId,
+            "Current placeholder",
+            currentPlaceholder,
+          );
+        } else {
+          currentPlaceholder = currentComponent.placeholders.find(
+            (x) => x.key === placeholderStartId,
+          );
+
+          if (!currentPlaceholder) {
+            currentPlaceholder = {
+              key: placeholderStartId,
+              name:
+                placeholderStartId.indexOf(currentComponent.id + "_") === 0
+                  ? placeholderStartId.substring(currentComponent.id.length + 1)
+                  : placeholderStartId,
+              description: element.getAttribute("data-description") || "",
+              components: [],
+              parentComponent: currentComponent,
+            };
+
+            currentComponent.placeholders.push(currentPlaceholder);
+          }
+          currentComponent = undefined;
+        }
+      }
+
+      if (placeholderEndId) {
+        currentComponent = currentPlaceholder?.parentComponent;
+        if (currentPlaceholder?.key !== placeholderEndId) {
+          console.error(
+            "Placeholder end does not match start",
+            currentPlaceholder,
+            placeholderEndId,
+          );
+        }
+        currentPlaceholder = undefined;
+      }
+
+      if (componentStartId) {
+        startComponent(componentStartId, element);
+      }
+
+      if (componentEndId) {
+        if (currentComponent) {
+          currentComponent.lastDOMElement =
+            element.previousElementSibling || element;
+          endComponent(componentEndId);
+        }
+      }
+    }
+  }
+
+  const page: PageSkeleton = {
+    rootComponent: root,
+    item: pageItem,
+    editRevision: editContextRef.current?.revision ?? "",
+  };
+
+  const time = performance.now() - start;
+
+  console.log("PAGE MODEL SKELETON", page, time);
+  pageViewContextRef.current?.setPageSkeleton(page);
+}

package/src/editor/page-viewer/pageViewContext.ts

@@ -0,0 +1,186 @@
+import { useEffect, useRef, useState } from "react";
+
+import { ItemDescriptor, Page, PageSkeleton } from "../pageModel";
+import { usePageModel } from "../client/pageModelBuilder";
+import { ItemsRepository } from "../client/itemsRepository";
+import { EditorConfiguration } from "../../config/types";
+import { useDebouncedCallback } from "use-debounce";
+import { resolvePageAndSite } from "../services/contentService";
+import { Site } from "../../types";
+
+export type PageViewContext = {
+  device: string;
+  setDevice: React.Dispatch<React.SetStateAction<string>>;
+  zoom: number;
+  setZoom: React.Dispatch<React.SetStateAction<number>>;
+  scroll: number;
+  setScroll: React.Dispatch<React.SetStateAction<number>>;
+  fullscreen: boolean;
+  setFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
+  editorIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  deviceWidth?: number;
+  deviceHeight?: number;
+  setDeviceWidth: React.Dispatch<React.SetStateAction<number | undefined>>;
+  setDeviceHeight: React.Dispatch<React.SetStateAction<number | undefined>>;
+  lockHeight: boolean;
+  setLockHeight: React.Dispatch<React.SetStateAction<boolean>>;
+  rotate: boolean;
+  setRotate: React.Dispatch<React.SetStateAction<boolean>>;
+  page?: Page;
+  pageItemDescriptor?: ItemDescriptor;
+  setPageSkeleton: React.Dispatch<
+    React.SetStateAction<PageSkeleton | undefined>
+  >;
+  viewport: { width: number; height: number };
+  setWorkaround: React.Dispatch<React.SetStateAction<boolean>>;
+  isHeadless: boolean;
+  site?: Site;
+};
+
+export function usePageViewContext({
+  pageItemDescriptor,
+  itemsRepository,
+  configuration,
+}: {
+  pageItemDescriptor?: ItemDescriptor;
+  itemsRepository?: ItemsRepository;
+  configuration?: EditorConfiguration;
+}) {
+  const [device, setDevice] = useState<string>("desktop");
+  const [zoom, setZoom] = useState<number>(1);
+  const [scroll, setScroll] = useState<number>(0);
+  const [fullscreen, setFullscreen] = useState<boolean>(false);
+  const editorIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [deviceWidth, setDeviceWidth] = useState<number>();
+  const [deviceHeight, setDeviceHeight] = useState<number>();
+  const [lockHeight, setLockHeight] = useState(true);
+  const [rotate, setRotate] = useState(false);
+  const [viewportRect, setViewportRect] = useState({ width: 0, height: 0 });
+  const [workaround, setWorkaround] = useState(false);
+  const [site, setSite] = useState<Site>();
+  const [resolvedPageItemDescriptor, setResolvedPageItemDescriptor] =
+    useState<ItemDescriptor>();
+  const [isHeadless, setIsHeadless] = useState(false);
+
+  const { page, setPageSkeleton } = usePageModel(
+    itemsRepository,
+    pageItemDescriptor
+  );
+
+  useEffect(() => {
+    var deviceConfig = configuration?.devices.find((x) => x.name === device);
+
+    let width = deviceConfig?.width;
+    let height = deviceConfig?.height;
+
+    if (rotate) {
+      [width, height] = [height, width];
+    }
+
+    if (device) {
+      setDeviceWidth(width);
+      setDeviceHeight(lockHeight ? height : undefined);
+    }
+  }, [rotate, device, lockHeight, configuration]);
+
+  useEffect(() => {
+    updateViewportRect();
+  }, [fullscreen, device, deviceHeight, deviceWidth]);
+
+  const updateViewportRectDebounced = useDebouncedCallback(() => {
+    updateViewportRect();
+  }, 100);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      updateViewportRectDebounced();
+    });
+
+    if (editorIframeRef.current) {
+      resizeObserver.observe(editorIframeRef.current);
+    }
+
+    // Cleanup function
+    return () => {
+      if (editorIframeRef.current) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [editorIframeRef.current, workaround]);
+
+  useEffect(() => {
+    if (!pageItemDescriptor) return;
+
+    async function resolvePage() {
+      if (!pageItemDescriptor) {
+        setSite(undefined);
+        setResolvedPageItemDescriptor(undefined);
+        setPageSkeleton(undefined);
+        return;
+      }
+      if (!itemsRepository) return;
+
+      const item = await itemsRepository.getItem(pageItemDescriptor);
+      if (!item?.hasLayout) {
+        setSite(undefined);
+        setResolvedPageItemDescriptor(undefined);
+        setPageSkeleton(undefined);
+        return;
+      }
+
+      console.log(
+        "resolve page",
+        pageItemDescriptor.id,
+        pageItemDescriptor.language,
+        pageItemDescriptor.version
+      );
+
+      const result = await resolvePageAndSite(
+        pageItemDescriptor.id,
+        pageItemDescriptor.language,
+        pageItemDescriptor.version
+      );
+
+      if (result) {
+        setIsHeadless(result.isHeadless);
+        setSite(result.site);
+        setResolvedPageItemDescriptor(result.pageItem);
+      }
+    }
+    resolvePage();
+  }, [pageItemDescriptor]);
+
+  function updateViewportRect() {
+    const rect = editorIframeRef.current?.getBoundingClientRect();
+    if (rect) setViewportRect({ width: rect.width, height: rect.height });
+  }
+
+  const pageViewContext: PageViewContext = {
+    device,
+    setDevice,
+    deviceWidth,
+    setDeviceWidth,
+    deviceHeight,
+    setDeviceHeight,
+    lockHeight,
+    setLockHeight,
+    scroll,
+    setScroll,
+    zoom,
+    setZoom,
+    fullscreen,
+    setFullscreen,
+    editorIframeRef,
+    rotate,
+    setRotate,
+    page,
+    setPageSkeleton,
+    viewport: viewportRect,
+    pageItemDescriptor: resolvedPageItemDescriptor,
+    setWorkaround,
+    isHeadless,
+    site,
+  };
+
+  return pageViewContext;
+}