@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,412 +0,0 @@
-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

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