@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/page-viewer/PageViewerFrame.tsx

@@ -1,879 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { MiniMap } from "./MiniMap";
-import { useEditContext, useEditContextRef } from "../client/editContext";
-import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
-import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
-import { PageViewContext } from "./pageViewContext";
-import morphdom from "morphdom";
-import uuid from "react-uuid";
-
-import {
-  findComponentRect,
-  findFieldElement,
-  findNearestComponentId,
-  findParentComponentId,
-  findParentWithAttribute,
-  getAbsolutePosition,
-  getFieldDescriptorFromElement,
-  findClosestFieldElement,
-} from "../utils";
-
-import { getComponentById } from "../componentTreeHelper";
-import { showComponentContextMenu } from "../ContextMenu";
-import { loadFieldButtons } from "../services/editService";
-import { usePathname } from "next/navigation";
-import { EditorWarnings } from "../EditorWarnings";
-
-import { Component, ItemDescriptor } from "../pageModel";
-import { NoLayout } from "../page-editor-chrome/NoLayout";
-import { Spinner } from "../ui/Spinner";
-import { DeviceToolbar } from "./DeviceToolbar";
-import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
-declare global {
-  interface Window {
-    requestRefresh?: (newUri?: string) => boolean;
-  }
-}
-
-export function PageViewerFrame({
-  compareView,
-  pageViewContext,
-}: {
-  compareView: boolean;
-  pageViewContext?: PageViewContext;
-}) {
-  const editContext = useEditContext();
-
-  const pathname = usePathname();
-
-  const pageViewContextRef = useRef<PageViewContext | undefined>(undefined);
-
-  if (!editContext || !pageViewContext) return null;
-
-  useEffect(() => {
-    pageViewContextRef.current = pageViewContext;
-  }, [pageViewContext]);
-
-  const editContextRef = useEditContextRef();
-
-  const iframeRef = pageViewContext.editorIframeRef;
-
-  const [showSpinner, setShowSpinner] = useState(false);
-  const [scroll, setScroll] = useState(0);
-  const [showMiniMap, setShowMiniMap] = useState(false);
-
-  const zoom = pageViewContext.zoom;
-  const blockBlurEventRef = useRef(0);
-  const [currentItemDescriptor, setCurrentItemDescriptor] = useState<
-    ItemDescriptor | undefined
-  >(undefined);
-
-  const pageItemDescriptor = pageViewContext.pageItemDescriptor;
-
-  useEffect(() => {
-    //Workaround for iframeref updates not propagating to usePageViewContext
-    pageViewContext.setWorkaround((x) => !x);
-  }, [iframeRef.current]);
-
-  const updateMiniMapVisibility = useDebouncedCallback(() => {
-    if (!iframeRef.current) return;
-    const iframe = iframeRef.current;
-    const doc = iframe.contentDocument;
-    if (!doc?.documentElement) return;
-    const scrollContainer = doc.scrollingElement || doc.body;
-    if (!scrollContainer) return;
-
-    const contentHeight = scrollContainer.scrollHeight;
-    const clientHeight = iframe.clientHeight;
-
-    const upperThreshold = clientHeight + 100; // show minimap if content exceeds this height
-    const lowerThreshold = clientHeight; // hide minimap if content falls below this
-
-    if (showMiniMap) {
-      if (contentHeight <= lowerThreshold) {
-        setShowMiniMap(false);
-      }
-    } else {
-      if (contentHeight > upperThreshold) {
-        setShowMiniMap(true);
-      }
-    }
-  }, 100);
-
-  updateMiniMapVisibility();
-
-  const buildPageModelThrottled = useThrottledCallback(
-    buildPageModelSkeleton,
-    500,
-    {
-      leading: false,
-      trailing: true,
-    },
-  );
-
-  const [iframeSrc, setIframeSrc] = useState<string>();
-
-  useEffect(() => {
-    const isHeadless = pageViewContext.isHeadless;
-    if (!pageItemDescriptor || isHeadless === undefined) return;
-
-    let renderUrl: URL;
-    if (!isHeadless) {
-      // Sitecore MVC rendering
-      renderUrl = new URL(window.location.href);
-      renderUrl.pathname = "/";
-
-      renderUrl.searchParams.set("sc_itemid", pageItemDescriptor.id);
-      renderUrl.searchParams.set("sc_lang", pageItemDescriptor.language);
-      renderUrl.searchParams.set(
-        "sc_version",
-        pageItemDescriptor.version.toString(),
-      );
-      if (editContext.mode === "preview") {
-        renderUrl.searchParams.set("alpaca_preview", "1");
-      } else {
-        renderUrl.searchParams.set("alpaca_editor", "1");
-      }
-      renderUrl.searchParams.set("sc_mode", "edit");
-      renderUrl.searchParams.set("alpaca_editor", "1");
-      renderUrl.searchParams.set("sc_database", "master");
-      //renderUrl.searchParams.set(
-      //        "sc_site",
-      //      editContext.site?.name || "website"
-      //  );
-    } else {
-      // Headless rendering
-      console.log("Headless rendering", pageItemDescriptor);
-      renderUrl = new URL(window.location.href);
-      if (editContext.configuration.services.renderService.path)
-        renderUrl.pathname =
-          editContext.configuration.services.renderService.path;
-
-      renderUrl.searchParams.set("itemid", pageItemDescriptor.id);
-      renderUrl.searchParams.set("lang", pageItemDescriptor.language);
-      renderUrl.searchParams.set(
-        "version",
-        pageItemDescriptor.version.toString(),
-      );
-
-      renderUrl.searchParams.set(
-        "site",
-        editContext.pageView.site?.name || "website",
-      );
-      renderUrl.searchParams.set(
-        "mode",
-        editContext.mode === "preview" ? "preview" : "edit",
-      );
-    }
-
-    renderUrl.searchParams.set("edit_rev", editContext.revision ?? uuid());
-
-    if (iframeRef.current?.contentWindow?.requestRefresh) {
-      console.log("Integration - requesting refresh");
-      iframeRef.current?.contentWindow.requestRefresh(renderUrl.toString());
-    } else {
-      setShowSpinner(true);
-      console.log("No integration - reloading frame");
-      if (isHeadless) {
-        console.log("Setting iframe src", renderUrl.toString());
-        setIframeSrc(renderUrl.toString());
-      } else {
-        const initialLoad =
-          currentItemDescriptor?.id !== pageItemDescriptor.id ||
-          currentItemDescriptor?.language !== pageItemDescriptor.language ||
-          currentItemDescriptor?.version !== pageItemDescriptor.version;
-
-        loadContent(renderUrl.toString(), initialLoad);
-      }
-    }
-
-    setCurrentItemDescriptor(pageItemDescriptor);
-  }, [
-    pathname,
-    editContext.revision,
-    pageItemDescriptor,
-    pageViewContext.isHeadless,
-    editContext.mode,
-  ]);
-
-  useEffect(() => {
-    if (editContext.focusedField) {
-      if (
-        editContext.selection.length > 0 &&
-        editContext.focusedField.item.id !== editContext.selection[0]
-      )
-        return;
-
-      const fieldElement = findFieldElement(
-        iframeRef.current!,
-        editContext.focusedField,
-      );
-      if (fieldElement) {
-        const rect = getAbsolutePosition(
-          fieldElement as HTMLElement,
-          iframeRef.current!,
-        );
-
-        const scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
-        const iframeHeight = iframeRef.current?.getBoundingClientRect().height;
-
-        const isInViewport =
-          rect.y >= scrollTop && rect.y <= scrollTop + (iframeHeight || 0);
-
-        if (!isInViewport) {
-          iframeRef.current?.contentWindow?.scrollTo({
-            top: rect.y,
-            behavior: "smooth",
-          });
-        }
-      }
-    }
-  }, [editContext.focusedField]);
-
-  useEffect(() => {
-    if (!editContext.focusedField && editContext.selection.length > 0) {
-      const lastSelectedComponent = getComponentById(
-        editContext.selection[editContext.selection.length - 1]!,
-        pageViewContextRef.current!.page!,
-      );
-      if (lastSelectedComponent) {
-        editContext.setScrollIntoView(lastSelectedComponent.id);
-      }
-    }
-  }, [editContext.selection]);
-
-  const loadContent = async (href: string, initialLoad: boolean) => {
-    console.log("Loading content:", href);
-    const start = performance.now();
-    if (!href) return;
-    const content = await fetch(href);
-    const text = await content.text();
-    console.log("Content loaded in " + (performance.now() - start) + " ms");
-    const doc = iframeRef.current?.contentDocument;
-
-    if (doc) {
-      if (initialLoad) {
-        doc.open();
-        doc.write(text);
-        doc.close();
-      } else {
-        const parser = new DOMParser();
-        const newDoc = parser.parseFromString(text, "text/html");
-        morphdom(doc.documentElement, newDoc.documentElement);
-        if ((iframeRef.current!.contentWindow as any).XA) {
-          console.log("init XA");
-          (iframeRef.current!.contentWindow as any).XA.init();
-        }
-        setShowSpinner(false);
-      }
-
-      injectEditorCSS(doc, editContext.mode !== "preview");
-
-      setTimeout(() => {
-        injectSXAScripts(iframeRef.current!);
-      }, 1000);
-
-      buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
-    }
-  };
-
-  useEffect(() => {
-    if (
-      !editContext.scrollIntoView ||
-      !iframeRef.current?.contentDocument?.documentElement
-    )
-      return;
-
-    const component = getComponentById(
-      editContext.scrollIntoView,
-      pageViewContextRef.current!.page!,
-    );
-
-    if (!component) return;
-
-    const rect = findComponentRect(iframeRef.current!, component, true);
-
-    if (!rect) return;
-
-    // Check if element is already in viewport
-    const iframeHeight = iframeRef.current.getBoundingClientRect().height;
-
-    const scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
-    const elementTop = rect.rect.y;
-
-    const isInViewport =
-      elementTop >= scrollTop && elementTop <= scrollTop + iframeHeight;
-
-    // If already in viewport, no need to scroll
-    if (isInViewport) {
-      editContext.setScrollIntoView(undefined);
-      return;
-    }
-
-    const scrollPosition =
-      rect.rect.y - iframeHeight / 2 + rect.rect.height / 2;
-
-    iframeRef.current?.contentWindow?.scrollTo({
-      top: scrollPosition,
-      behavior: "smooth",
-    });
-
-    editContext.setScrollIntoView(undefined);
-  }, [editContext.scrollIntoView, pageViewContext.page]);
-
-  useEffect(() => {
-    const handleMessage = (message: MessageEvent) => {
-      if (message.data.type === "editor-exitFullscreen") {
-        editContext.pageView.setFullscreen(false);
-      }
-      if (message.data.type === "editor-timings") {
-        editContext.setTimings(message.data.timings);
-      }
-    };
-    window.addEventListener("message", handleMessage);
-
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, []);
-
-  const selecionChangeHandler = useThrottledCallback(() => {
-    const sel = iframeRef.current?.contentDocument?.getSelection();
-
-    if (sel && sel.rangeCount > 0) {
-      // Find the field element containing the selection
-      const fieldElement = findClosestFieldElement(sel.anchorNode);
-
-      if (!fieldElement) return;
-
-      const fieldId = fieldElement.getAttribute("data-fieldid");
-      if (!fieldId) return;
-
-      const range = sel.getRangeAt(0);
-
-      editContextRef.current?.setFocusedField(
-        {
-          fieldId: fieldId,
-          item: {
-            id: fieldElement.getAttribute("data-itemid") || "",
-            language: fieldElement.getAttribute("data-language") || "",
-            version: parseInt(fieldElement.getAttribute("data-version") || "0"),
-          },
-        },
-        editContext.mode === "edit",
-      );
-
-      // Compute the global offsets relative to the field element.
-      const globalStartOffset = getGlobalTextOffset(
-        fieldElement,
-        range.startContainer,
-        range.startOffset,
-      );
-      const globalEndOffset = getGlobalTextOffset(
-        fieldElement,
-        range.endContainer,
-        range.endOffset,
-      );
-
-      editContextRef.current?.setSelectedRange({
-        itemId: fieldElement.getAttribute("data-itemid") || "",
-        fieldId: fieldId,
-        startOffset: globalStartOffset,
-        endOffset: globalEndOffset,
-        text: range.toString(),
-      });
-    }
-  }, 100);
-
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    const handleIframeMouseDown = async (event: any) => {
-      const target = event.target;
-
-      if (editContextRef.current?.isRefreshing) return;
-
-      const componentId = findParentComponentId(target);
-      if (editContextRef.current?.currentOverlay)
-        editContextRef.current?.setCurrentOverlay(undefined);
-
-      if (componentId) {
-        if (event.ctrlKey) {
-          const currentSelection = editContextRef.current?.selection || [];
-          if (currentSelection.indexOf(componentId) === -1)
-            editContextRef.current?.select([...currentSelection, componentId]);
-        } else {
-          if (editContextRef.current?.selection.indexOf(componentId) === -1) {
-            editContextRef.current?.select([componentId]);
-          }
-        }
-
-        //  if (mode !== "edit") {
-        //editContextRef.current?.setScrollIntoView(componentId);
-        //}
-      } else editContextRef.current?.select([]);
-
-      if (
-        (editContext.mode === "edit" &&
-          pageViewContextRef.current?.page?.item.canWriteItem) ||
-        editContext.mode === "suggestions"
-      ) {
-        const fieldElement = findParentWithAttribute(target, "data-fieldid");
-        if (fieldElement?.hasAttribute("data-itemid")) {
-          blockBlurEventRef.current = Date.now() + 500;
-
-          const hasLock =
-            editContext.mode === "suggestions" ||
-            (await editContextRef.current?.setFocusedField(
-              getFieldDescriptorFromElement(fieldElement),
-              true,
-            ));
-
-          if (
-            hasLock &&
-            editContextRef.current?.inlineEditingFieldElement !== fieldElement
-          ) {
-            editContextRef.current?.setInlineEditingFieldElement(fieldElement);
-            // Don't prevent default - we want the browser's natural cursor positioning
-          }
-        }
-      }
-      //Forward events so primereact overlays can close
-      const clickEvent = new MouseEvent("click", {
-        view: window,
-        bubbles: true,
-        cancelable: true,
-        clientX: event.clientX,
-        clientY: event.clientY,
-      });
-
-      document.dispatchEvent(clickEvent);
-    };
-
-    const handleIframeClick = async (event: any) => {
-      const target = event.target;
-      // Check if the click target is a link (anchor tag)
-      const anchor =
-        target.tagName.toLowerCase() === "a" ? target : target.closest("a");
-      if (anchor) {
-        const href = (anchor as HTMLAnchorElement).href;
-
-        // Block only navigation links, allow anchor links and javascript links
-        if (href && !href.startsWith("#") && !href.startsWith("javascript:")) {
-          event.preventDefault();
-        }
-      }
-    };
-
-    const handleContextMenu = async (event: MouseEvent) => {
-      if (editContextRef.current?.isRefreshing) return;
-      const target = event.target;
-      if (!target) return;
-
-      if (event.ctrlKey) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      const componentId = findNearestComponentId(target as HTMLElement);
-
-      if (componentId) {
-        if (!editContextRef.current?.selection.includes(componentId)) {
-          editContextRef.current!.select([componentId]);
-        }
-      }
-
-      const fieldElement = findParentWithAttribute(
-        target as HTMLElement,
-        "data-fieldid",
-      );
-
-      const selectedComponents = editContextRef.current?.selection
-        .map((id) => getComponentById(id, pageViewContextRef.current!.page!))
-        .filter((x) => x) as Component[];
-
-      const iframeRect = iframe.getBoundingClientRect();
-      const adjustedEvent = new MouseEvent("contextmenu", {
-        bubbles: true,
-        cancelable: true,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-        ctrlKey: event.ctrlKey,
-        view: window,
-        clientX: event.clientX + iframeRect.x,
-        clientY: event.clientY + iframeRect.y,
-      });
-
-      const field = fieldElement
-        ? getFieldDescriptorFromElement(fieldElement)
-        : undefined;
-
-      const fieldButtons = field ? await loadFieldButtons(field) : [];
-
-      const showMenu = await showComponentContextMenu(
-        selectedComponents,
-        editContextRef.current!,
-        field,
-        fieldButtons,
-      );
-      if (showMenu) showMenu(adjustedEvent);
-    };
-
-    const handleLoad = () => {
-      setShowSpinner(false);
-      const iframeDocument =
-        iframe!.contentDocument || iframe!.contentWindow?.document;
-      if (iframeDocument) {
-        iframeDocument.documentElement.addEventListener(
-          "mousedown",
-          handleIframeMouseDown,
-        );
-        iframeDocument.documentElement.addEventListener(
-          "click",
-          handleIframeClick,
-        );
-        iframe.contentWindow?.addEventListener(
-          "contextmenu",
-          handleContextMenu,
-          true,
-        );
-
-        const scrollContainer =
-          iframe.contentWindow?.document.scrollingElement ||
-          iframe.contentWindow?.document.body;
-        scrollContainer?.addEventListener("scroll", () => {
-          const scrollTop = scrollContainer.scrollTop || 0;
-          scrollHandler(scrollTop);
-        });
-        iframe.contentWindow?.addEventListener("scroll", () => {
-          const scrollTop = scrollContainer?.scrollTop || 0;
-          scrollHandler(scrollTop);
-        });
-
-        iframeDocument.addEventListener(
-          "selectionchange",
-          selecionChangeHandler,
-        );
-
-        iframeDocument.addEventListener("keydown", (event: KeyboardEvent) => {
-          editContextRef.current?.handleKeyDown(event);
-        });
-
-        iframeDocument.documentElement?.addEventListener(
-          "blur",
-          () => {
-            // Block blur event if it was triggered by clicking on a field
-            if (blockBlurEventRef.current < Date.now()) {
-              //editContext.setFocusedField(undefined, false);
-              editContext.setInlineEditingFieldElement(undefined);
-            } else {
-              blockBlurEventRef.current = 0;
-            }
-          },
-          true,
-        );
-
-        const observer = new MutationObserver((records) => {
-          // Ignore all text field edits
-          if (
-            records.some(
-              (x) =>
-                !(
-                  x &&
-                  "getAttribute" in x.target &&
-                  (x.target as Element).getAttribute("data-fieldid") &&
-                  (x.target as Element).getAttribute("data-itemid")
-                ),
-            )
-          ) {
-            buildPageModelThrottled(
-              iframeDocument,
-              editContextRef,
-              pageViewContextRef,
-            );
-          }
-        });
-
-        observer.observe(iframeDocument!, {
-          childList: true, // observe direct children changes
-          subtree: true, // observe all descendants changes
-          characterData: false, // observe text changes
-
-          //attributes: true, // observe attribute changes (like style or class)
-        });
-
-        buildPageModelThrottled(
-          iframeDocument,
-          editContextRef,
-          pageViewContextRef,
-        );
-      }
-    };
-
-    if (iframe) {
-      iframe.addEventListener("load", handleLoad);
-    }
-
-    // Cleanup function
-    return () => {
-      if (iframe) {
-        iframe.removeEventListener("load", handleLoad);
-
-        const iframeDocument =
-          iframe.contentDocument || iframe.contentWindow?.document;
-        if (iframeDocument) {
-          iframeDocument.documentElement.removeEventListener(
-            "click",
-            handleIframeMouseDown,
-          );
-          iframeDocument.documentElement.removeEventListener(
-            "contextmenu",
-            handleContextMenu,
-          );
-        }
-      }
-    };
-  }, [iframeRef.current]);
-
-  useEffect(() => {
-    iframeRef.current?.contentWindow?.postMessage(
-      { type: "componentsSelected", componentIds: editContext.selection },
-      "*",
-    );
-  }, [editContext.selection]);
-
-  const updateScrollPosition = (e: number) => {
-    setScroll(e);
-    if (!compareView) pageViewContextRef.current?.setScroll(e);
-  };
-
-  useEffect(() => {
-    if (!iframeRef.current) return;
-    const body = iframeRef.current.contentWindow?.document.documentElement;
-    if (!body) return;
-    body.style.transform = `scale(${zoom})`;
-    body.style.transformOrigin = "top center";
-    body.style.overflow = "auto";
-    //body.style.height = `${body.scrollHeight / zoom}px`;
-  }, [zoom]);
-
-  const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
-
-  if (pageViewContext.page?.item && !pageViewContext.page?.item.hasLayout) {
-    return <NoLayout />;
-  }
-
-  const deviceHeight =
-    pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
-      ? "100%"
-      : pageViewContext.deviceHeight || 640;
-
-  return (
-    <div className="relative flex h-full w-full flex-col items-center bg-slate-100 select-none">
-      {!editContext.pageView.fullscreen && (
-        <EditorWarnings item={pageViewContext.page?.item} />
-      )}
-      {pageViewContext.device !== "desktop" && (
-        <DeviceToolbar
-          pageViewContext={pageViewContext}
-          configuration={editContext.configuration}
-        />
-      )}
-      <div
-        className="relative flex flex-1 select-none"
-        style={{
-          width:
-            pageViewContext.device === "desktop" ||
-            pageViewContext.device === "Responsive"
-              ? "100%"
-              : (pageViewContext.deviceWidth || 640) +
-                editContext.configuration.outline.width +
-                "px",
-        }}
-      >
-        <div className="relative h-full w-full">
-          <iframe
-            ref={iframeRef}
-            className="page-iframe h-full w-full bg-white"
-            style={{ height: deviceHeight }}
-            src={iframeSrc}
-            data-testid="pageEditoriframe"
-          />
-
-          {iframeRef.current && (
-            <PageEditorChrome
-              iframe={iframeRef.current}
-              compareView={compareView}
-              pageViewContext={pageViewContext}
-            />
-          )}
-          {pageViewContext.deviceHeight && pageViewContext.device && (
-            <div className="relative z-40 h-full w-full bg-slate-100"></div>
-          )}
-        </div>
-        {!editContext.pageView.fullscreen && showMiniMap && (
-          <MiniMap
-            compareView={compareView}
-            scroll={scroll}
-            mainViewIframeRef={iframeRef}
-            pageViewContext={pageViewContext}
-            deviceHeight={
-              pageViewContext.device === "Desktop"
-                ? undefined
-                : pageViewContext.deviceHeight
-            }
-          />
-        )}
-        {showSpinner && (
-          <>
-            <div className="absolute top-0 left-0 h-full w-full bg-slate-100/50"></div>
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-              <Spinner />
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function injectEditorCSS(iframeDocument: Document, editMode: boolean) {
-  if (!iframeDocument) return;
-  const style = iframeDocument.createElement("style");
-
-  style.textContent = editMode
-    ? `[contentEditable]:empty:before {
-    content: attr(placeholder);
-    opacity: 0.6;
-  }
-
-  .scChromeData, code {
-    display: none;
-  }
-
-  [contenteditable] {
-    outline: 0px solid transparent;
-  }
-      `
-    : `
- [contenteditable] {
-    outline: 0px solid transparent;
-  }
-  .scChromeData, code {
-    display: none;
-  }
-`;
-
-  if (iframeDocument && iframeDocument.head) {
-    iframeDocument.head.appendChild(style);
-  }
-}
-
-function injectSXAScripts(iframe: HTMLIFrameElement): void {
-  if (!iframe) return;
-  const iframeDocument = iframe.contentDocument;
-  const iframeWindow = iframe.contentWindow as any;
-  if (!iframeDocument || !iframeWindow) return;
-
-  iframeWindow.Sitecore = {
-    PageModes: {
-      HoverFrame: {
-        extend: () => {
-          //  console.log("extend hoverframe");
-        },
-      },
-      ChromeManager: {
-        chromes: () => {
-          //  console.log("chromes");
-          return [];
-        },
-        resetChromes: () => {
-          //   console.log("resetChromes");
-          iframeWindow.XA.init();
-        },
-        chromesReseted: {
-          observe: () => {
-            //  console.log("chromesReseted.observe");
-          },
-        },
-        // Dummy selectionChanged with an _callbacks array
-        selectionChanged: {
-          _callbacks: [] as any[],
-          // Optionally, you can add a method to trigger all callbacks if needed.
-          trigger: function (...args: any[]): void {
-            this._callbacks.forEach((callback: Function) => callback(...args));
-          },
-        },
-      },
-
-      ChromeControls: function () {},
-      ChromeTypes: {
-        PlaceholderSorting: function () {},
-        Rendering: function () {},
-      },
-    },
-  };
-
-  // Option 1: Use main window's jQuery if available.
-  if (iframeWindow.jQuery) {
-    // Be cautious: if the iframe's document is different, it's better to load jQuery within the iframe.
-    iframeWindow.$sc = iframeWindow.jQuery;
-  } else {
-    // Option 2: Dynamically load jQuery in the iframe.
-    const jqueryScript = iframeDocument.createElement("script");
-    jqueryScript.type = "text/javascript";
-    jqueryScript.src = "https://code.jquery.com/jquery-3.6.0.min.js"; // Use the version you prefer.
-    jqueryScript.onload = () => {
-      // Once loaded, assign it to $sc using noConflict to avoid global collisions.
-      iframeWindow.$sc = iframeWindow.jQuery.noConflict();
-      //  console.log("jQuery loaded in iframe and assigned to $sc");
-    };
-    (iframeDocument.head || iframeDocument.body).appendChild(jqueryScript);
-  }
-
-  // Add a dummy implementation for renderExpandCommand on the ChromeControls prototype.
-  iframeWindow.Sitecore.PageModes.ChromeControls.prototype.renderExpandCommand =
-    function () {
-      console.log("renderExpandCommand called");
-      // Return a dummy value if needed. For example, you might return a dummy HTML string.
-      return "<div>Dummy Expand Command</div>";
-    };
-
-  iframeWindow.Sitecore.PageModes.ChromeTypes.PlaceholderSorting.prototype.insertSortingHandle =
-    function () {
-      console.log("insertSortingHandle called");
-    };
-}
-
-/**
- * Calculates the global offset of a given target node and its local offset,
- * relative to the container's complete text content.
- *
- * @param container - The container element that holds the text nodes.
- * @param targetNode - The text node where the selection starts or ends.
- * @param localOffset - The offset within the target text node.
- * @returns The computed global offset.
- */
-function getGlobalTextOffset(
-  container: Node,
-  targetNode: Node,
-  localOffset: number,
-): number {
-  let globalOffset = 0;
-  const walker = document.createTreeWalker(
-    container,
-    NodeFilter.SHOW_TEXT,
-    null,
-  );
-  while (walker.nextNode()) {
-    const currentNode = walker.currentNode;
-    // If we've reached the target node, add the local offset and return.
-    if (currentNode === targetNode) {
-      return globalOffset + localOffset;
-    }
-    // Otherwise, add the length of this text node.
-    globalOffset += (currentNode.textContent || "").length;
-  }
-  return globalOffset;
-}