@alpaca-editor/core 1.0.3813 → 1.0.3817

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

@@ -1,6 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import { MiniMap } from "./MiniMap";
-import { useEditContext, useEditContextRef } from "../client/editContext";
+import {
+  useEditContext,
+  useEditContextRef,
+  EditorMode,
+} from "../client/editContext";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
 import { PageViewContext } from "./pageViewContext";
@@ -24,18 +28,11 @@ import { loadFieldButtons } from "../services/editService";
 import { usePathname } from "next/navigation";
 import { EditorWarnings } from "../EditorWarnings";
 
-import {
-  Component,
-  PageSkeleton,
-  ComponentSkeleton,
-  PlaceholderSkeleton,
-  RenderedItemSkeleton,
-  ItemDescriptor,
-} from "../pageModel";
+import { Component, ItemDescriptor } from "../pageModel";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
 import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
-
+import { buildPageModel } from "./pageModelBuilder";
 declare global {
   interface Window {
     requestRefresh?: (newUri?: string) => boolean;
@@ -43,10 +40,10 @@ declare global {
 }
 
 export function PageViewerFrame({
-  mode,
+  compareView,
   pageViewContext,
 }: {
-  mode: "edit" | "compare" | "view";
+  compareView: boolean;
   pageViewContext?: PageViewContext;
 }) {
   const editContext = useEditContext();
@@ -109,278 +106,6 @@ export function PageViewerFrame({
 
   updateMiniMapVisibility();
 
-  function buildPageModel(iframeDocument: Document | undefined) {
-    if (
-      !iframeDocument ||
-      !editContextRef.current ||
-      !pageViewContextRef.current
-    )
-      return;
-
-    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;
-
-    while (treeWalker.nextNode()) {
-      const node = treeWalker.currentNode;
-
-      if (node.nodeType !== Node.ELEMENT_NODE) continue;
-
-      const element = node as Element;
-
-      if (currentComponent && element.hasAttribute("data-fieldid")) {
-        const fieldId = element.getAttribute("data-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(fieldId) === -1) {
-          renderedItem.renderedFieldIds.push(fieldId);
-        }
-      }
-
-      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: "",
-                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) {
-          if (!currentPlaceholder) {
-            if (!currentComponent) {
-              console.error(
-                "Component start without parent component:",
-                componentStartId,
-              );
-              continue;
-            }
-
-            currentPlaceholder = {
-              key: "implicit_" + componentStartId,
-              name: "no-placeholder",
-              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 = 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: {},
-              };
-
-              currentPlaceholder.components.push(currentComponent);
-            }
-            currentPlaceholder = undefined;
-          }
-        }
-
-        if (componentEndId) {
-          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 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);
-  }
-
   const buildPageModelThrottled = useThrottledCallback(buildPageModel, 1000);
 
   const [iframeSrc, setIframeSrc] = useState<string>();
@@ -401,10 +126,12 @@ export function PageViewerFrame({
         "sc_version",
         pageItemDescriptor.version.toString(),
       );
-      renderUrl.searchParams.set(
-        "sc_mode",
-        editContext.previewMode ? "preview" : "edit",
-      );
+      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(
@@ -432,7 +159,7 @@ export function PageViewerFrame({
       );
       renderUrl.searchParams.set(
         "mode",
-        editContext.previewMode ? "preview" : "edit",
+        editContext.mode === "preview" ? "preview" : "edit",
       );
     }
 
@@ -463,7 +190,7 @@ export function PageViewerFrame({
     editContext.revision,
     pageItemDescriptor,
     pageViewContext.isHeadless,
-    editContext.previewMode,
+    editContext.mode,
   ]);
 
   useEffect(() => {
@@ -528,12 +255,20 @@ export function PageViewerFrame({
         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);
       }
 
-      if (mode === "edit" && !editContext.previewMode) injectEditorCSS(doc);
+      injectEditorCSS(doc, editContext.mode !== "preview");
 
-      buildPageModel(doc);
+      setTimeout(() => {
+        injectSXAScripts(iframeRef.current!);
+      }, 1000);
+
+      buildPageModel(doc, editContextRef, pageViewContextRef);
     }
   };
 
@@ -544,12 +279,15 @@ export function PageViewerFrame({
     )
       return;
 
-    const rect = findComponentRect(
-      iframeRef.current!,
+    const component = getComponentById(
       editContext.scrollIntoView,
-      true,
+      pageViewContextRef.current!.page!,
     );
 
+    if (!component) return;
+
+    const rect = findComponentRect(iframeRef.current!, component, true);
+
     if (!rect) return;
 
     // Check if element is already in viewport
@@ -633,7 +371,7 @@ export function PageViewerFrame({
       );
 
       editContextRef.current?.setSelectedRange({
-        itemId: fieldId,
+        itemId: fieldElement.getAttribute("data-itemid") || "",
         fieldId: fieldId,
         startOffset: globalStartOffset,
         endOffset: globalEndOffset,
@@ -652,7 +390,8 @@ export function PageViewerFrame({
       if (editContextRef.current?.isRefreshing) return;
 
       const componentId = findParentComponentId(target);
-      editContextRef.current?.setCurrentOverlay(undefined);
+      if (editContextRef.current?.currentOverlay)
+        editContextRef.current?.setCurrentOverlay(undefined);
 
       if (componentId) {
         if (event.ctrlKey) {
@@ -660,7 +399,9 @@ export function PageViewerFrame({
           if (currentSelection.indexOf(componentId) === -1)
             editContextRef.current?.select([...currentSelection, componentId]);
         } else {
-          editContextRef.current?.select([componentId]);
+          if (editContextRef.current?.selection.indexOf(componentId) === -1) {
+            editContextRef.current?.select([componentId]);
+          }
         }
 
         //  if (mode !== "edit") {
@@ -669,7 +410,7 @@ export function PageViewerFrame({
       } else editContextRef.current?.select([]);
 
       if (
-        mode === "edit" &&
+        (editContext.mode === "edit" || editContext.mode === "suggestions") &&
         pageViewContextRef.current?.page?.item.canWriteItem
       ) {
         const fieldElement = findParentWithAttribute(target, "data-fieldid");
@@ -680,7 +421,10 @@ export function PageViewerFrame({
           );
           blockBlurEventRef.current = Date.now() + 500;
 
-          if (hasLock) {
+          if (
+            hasLock &&
+            editContextRef.current?.inlineEditingFieldElement !== fieldElement
+          ) {
             editContextRef.current?.setInlineEditingFieldElement(fieldElement);
           }
         }
@@ -727,7 +471,6 @@ export function PageViewerFrame({
 
       if (componentId) {
         if (!editContextRef.current?.selection.includes(componentId)) {
-          console.log("Selecting component CONTEXT MENU", componentId);
           editContextRef.current!.select([componentId]);
         }
       }
@@ -837,7 +580,11 @@ export function PageViewerFrame({
                 ),
             )
           ) {
-            buildPageModelThrottled(iframeDocument);
+            buildPageModelThrottled(
+              iframeDocument,
+              editContextRef,
+              pageViewContextRef,
+            );
           }
         });
 
@@ -849,7 +596,7 @@ export function PageViewerFrame({
           //attributes: true, // observe attribute changes (like style or class)
         });
 
-        buildPageModel(iframeDocument);
+        buildPageModel(iframeDocument, editContextRef, pageViewContextRef);
       }
     };
 
@@ -887,7 +634,7 @@ export function PageViewerFrame({
 
   const updateScrollPosition = (e: number) => {
     setScroll(e);
-    if (mode === "edit") pageViewContextRef.current?.setScroll(e);
+    if (!compareView) pageViewContextRef.current?.setScroll(e);
   };
 
   useEffect(() => {
@@ -946,7 +693,7 @@ export function PageViewerFrame({
           {iframeRef.current && (
             <PageEditorChrome
               iframe={iframeRef.current}
-              mode={mode || "edit"}
+              compareView={compareView}
               pageViewContext={pageViewContext}
             />
           )}
@@ -956,7 +703,7 @@ export function PageViewerFrame({
         </div>
         {!editContext.pageView.fullscreen && showMiniMap && (
           <MiniMap
-            mode={mode}
+            compareView={compareView}
             scroll={scroll}
             mainViewIframeRef={iframeRef}
             pageViewContext={pageViewContext}
@@ -980,24 +727,114 @@ export function PageViewerFrame({
   );
 }
 
-export function injectEditorCSS(iframeDocument: Document) {
+function injectEditorCSS(iframeDocument: Document, editMode: boolean) {
   if (!iframeDocument) return;
   const style = iframeDocument.createElement("style");
-  style.textContent = `[contentEditable]:empty:before {
+
+  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.