@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,247 @@
+import { useEditContext } from "../client/editContext";
+import { getComponentById } from "../componentTreeHelper";
+
+import { FieldList, ItemFields } from "../FieldList";
+import { ItemInfo } from "../ItemInfo";
+import { Insert } from "../sidebar/Insert";
+import { useEffect, useState } from "react";
+
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Component, Field, RenderedItem } from "../pageModel";
+import { Spinner } from "../ui/Spinner";
+import { PageViewContext } from "./pageViewContext";
+import { SimpleTabs, Tab } from "../ui/SimpleTabs";
+
+export function EditorForm({
+  pageViewContext,
+  readonly,
+}: {
+  pageViewContext?: PageViewContext;
+  readonly?: boolean;
+}) {
+  const editContext = useEditContext()!;
+  if (!pageViewContext) pageViewContext = editContext.pageView;
+
+  const setInsertMode = editContext.setInsertMode;
+  const insertMode = editContext.insertMode;
+  const [activeTabKey, setActiveTabKey] = useState("content");
+  const [item, setItem] = useState<RenderedItem>();
+  const [component, setComponent] = useState<Component>();
+
+  const toggleInsertMode = () => {
+    if (insertMode) {
+      setInsertMode(false);
+    } else {
+      // if (editContext.selection.length > 0)
+      //   editContext.setSelectedForInsertion(editContext.selection[0]);
+      setInsertMode(true);
+    }
+  };
+
+  useEffect(() => {
+    if (editContext.selectedForInsertion) setInsertMode(true);
+  }, [editContext.selectedForInsertion]);
+
+  let isShared = false;
+
+  useEffect(() => {
+    if (!pageViewContext.page) return;
+    let newSelectedItem;
+
+    if (editContext.selection.length === 1) {
+      const component = getComponentById(
+        editContext.selection[0]!,
+        pageViewContext.page,
+      );
+      setComponent(component);
+      newSelectedItem = component?.datasourceItem;
+      if (
+        component?.datasourceItem &&
+        component?.datasourceItem?.id !== component?.id
+      )
+        isShared = true;
+    } else {
+      newSelectedItem = pageViewContext.page.rootComponent.datasourceItem;
+      setComponent(pageViewContext.page.rootComponent);
+    }
+
+    // if (
+    //   newSelectedItem?.id !== item?.id ||
+    //   newSelectedItem?.language !== item?.language ||
+    //   newSelectedItem?.version !== item?.version
+    // ) {
+    //   setInsertMode(false);
+    // }
+
+    setItem(
+      newSelectedItem || pageViewContext.page.rootComponent.datasourceItem,
+    );
+  }, [
+    editContext.selection,
+    pageViewContext.page,
+    pageViewContext.pageItemDescriptor,
+  ]);
+
+  if (!item)
+    return (
+      <div className="grid h-full w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
+
+  const validators =
+    editContext.validationResult?.find(
+      (x) =>
+        x.item.id === item?.id &&
+        x.item.language === item?.language &&
+        x.item.version === item?.version,
+    )?.results || [];
+
+  let designFields = Object.values(item?.fields).filter(
+    (x) => x.section === "Design" || x.section === "Rendering",
+  );
+
+  const editorFields = component?.editorFields;
+
+  if (editorFields && editorFields["Design"]) {
+    editorFields["Design"]?.addFields.forEach((fieldName) => {
+      const field = item?.fields.find((x) => x.name === fieldName);
+      if (field) designFields.push(field);
+    });
+    editorFields["Design"]?.removeFields.forEach((fieldName) => {
+      designFields = designFields.filter((x) => x.name !== fieldName);
+    });
+  }
+
+  const itemFields: ItemFields[] = [];
+
+  const contentFields = Object.values(item?.fields).filter(
+    (x) =>
+      ((editorFields && editorFields["Content"]?.addFields.includes(x.name!)) ||
+        item.renderedFieldIds.indexOf(x.id) >= 0) &&
+      !(
+        editorFields && editorFields["Content"]?.removeFields.includes(x.name!)
+      ),
+  );
+  if (contentFields.length > 0) itemFields.push({ fields: contentFields });
+
+  component?.items
+    .filter((x) => x.id !== item.id)
+    .forEach((i) => {
+      const fields: Field[] = [];
+      i.renderedFieldIds.forEach((id) => {
+        const field = Object.values(i?.fields).find((x) => x.id === id);
+        if (field) fields.push(field);
+      });
+      if (fields.length > 0) itemFields.push({ headline: i.name, fields });
+    });
+
+  const getFieldsTab = (fields: ItemFields[], headline: string, id: string) => {
+    return {
+      label: headline,
+      content: (
+        <div className="relative h-full">
+          <div className="absolute inset-0 overflow-auto px-3">
+            <FieldList
+              fields={fields}
+              validators={validators}
+              simplified={true}
+              readonly={readonly}
+            />
+          </div>
+        </div>
+      ),
+      id,
+    };
+  };
+
+  const tabPanels: Tab[] = [];
+  if (itemFields.length > 0)
+    tabPanels.push(getFieldsTab(itemFields, "Content", "content"));
+
+  //TODO: generalize this
+  if (editorFields) {
+    Object.keys(editorFields).forEach((key) => {
+      if (key !== "Content" && key !== "Design") {
+        const fields = item?.fields.filter((x) =>
+          editorFields[key]?.addFields.includes(x.name!),
+        );
+        if (fields?.length)
+          tabPanels.push(getFieldsTab([{ fields }], key, key));
+      }
+    });
+  }
+
+  if (designFields?.length)
+    tabPanels.push(
+      getFieldsTab([{ fields: designFields }], "Design", "design"),
+    );
+
+  tabPanels.push({
+    label: "Advanced",
+    content: (
+      <div className="relative h-full">
+        <div className="absolute inset-0 overflow-auto px-3">
+          <ItemInfo item={item} />
+          <FieldList
+            fields={[{ fields: item.fields }]}
+            validators={validators}
+            showStandardFieldsEnabled={true}
+            readonly={readonly}
+          />
+        </div>
+      </div>
+    ),
+    id: "advanced",
+  });
+
+  return (
+    <div
+      className="flex h-full flex-col bg-gray-50"
+      data-testid="editor-sidepanel"
+    >
+      <h1 className="flex h-12 items-center justify-center border-b border-gray-200 p-2">
+        {editContext.selection.length > 0 && (
+          <SimpleIconButton
+            icon="pi pi-angle-left"
+            onClick={() => editContext.select([])}
+            label="Back to page"
+            size="large"
+          />
+        )}
+        {editContext.selection.length === 0 && <div className="w-12" />}
+        <div
+          className="flex-1 text-center"
+          id="item-name"
+          data-testid="component-name"
+        >
+          {item?.name}
+          {isShared && (
+            <span className="ml-2 rounded-md bg-orange-400 p-2 text-sm text-black">
+              Shared
+            </span>
+          )}
+        </div>
+        <SimpleIconButton
+          id="insert-component-button"
+          icon={insertMode ? "pi pi-pencil" : "pi pi-plus"}
+          onClick={() => toggleInsertMode()}
+          label={insertMode ? "Continue editing" : "Insert component"}
+          size="large"
+          disabled={!editContext.page?.item.canWriteItem || !item?.canWriteItem}
+        />
+      </h1>
+
+      {insertMode && <Insert />}
+      {!insertMode && (
+        <SimpleTabs
+          key="editor-tabs"
+          tabs={tabPanels}
+          className="flex flex-1 items-center justify-center border-b border-gray-200 bg-gray-50 py-3 text-sm"
+          activeTab={tabPanels.findIndex((x) => x.id === activeTabKey) || 0}
+          setActiveTab={(index) => setActiveTabKey(tabPanels[index]?.id!)}
+        ></SimpleTabs>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,351 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEditContext } from "../client/editContext";
+import { PlaceholderDropZones } from "../page-editor-chrome/PlaceholderDropZones";
+import { FieldEditedIndicators } from "../page-editor-chrome/FieldEditedIndicators";
+import { PageViewContext } from "./pageViewContext";
+import { CommentHighlightings } from "../page-editor-chrome/CommentHighlightings";
+
+export function MiniMap({
+  deviceHeight,
+  scroll,
+  mainViewIframeRef,
+  mode,
+  pageViewContext,
+}: {
+  deviceHeight?: number;
+  scroll: number;
+  mainViewIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  mode: "edit" | "compare" | "view";
+  pageViewContext: PageViewContext;
+}) {
+  const editContext = useEditContext();
+
+  const [scale, setScale] = React.useState(1);
+  const minimapRef = useRef<HTMLDivElement>(null);
+  const scaleContainerRef = useRef<HTMLDivElement>(null);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [minimapReady, setMinimapReady] = React.useState(false);
+  const [refreshScale, setRefreshScale] = React.useState(false);
+
+  const observerRef = useRef<MutationObserver | null>(null);
+
+  const editorIframeRef = mainViewIframeRef;
+  const minimapContainerRef = useRef<HTMLDivElement>(null);
+
+  if (!mainViewIframeRef.current) return;
+
+  const scrollContainer =
+    editorIframeRef.current?.contentWindow?.document.scrollingElement ||
+    editorIframeRef.current?.contentWindow?.document.body;
+
+  const calcAndUpdateScale = () => {
+    const viewport = pageViewContext.viewport;
+    const minimapHeight = minimapContainerRef.current?.clientHeight;
+    if (!viewport || !scrollContainer) return;
+    const width = viewport.width;
+    const scaleX = (editContext?.configuration.outline.width || 100) / width;
+    const scaleY =
+      Math.max(deviceHeight || 0, minimapHeight || viewport.height) /
+      scrollContainer.scrollHeight!;
+
+    const newScale = Math.min(scaleX, scaleY, 1);
+    updateScale(newScale);
+    setScale(newScale);
+    return newScale;
+  };
+  // Prevent scale/width feedback loop by tracking previous values
+  const prevScaleRef = useRef(scale);
+  const prevWidthRef = useRef(0);
+
+  const miniMapWidth = useMemo(() => {
+    const currentWidth = Math.max(
+      30,
+      scale * (pageViewContext.viewport.width || 0)
+    );
+
+    // Only update if change is significant (>1px) to avoid minor oscillations
+    if (
+      prevWidthRef.current < currentWidth ||
+      (Math.abs(currentWidth - prevWidthRef.current) > 1 &&
+        Math.abs(scale - prevScaleRef.current) > 0.01)
+    ) {
+      prevWidthRef.current = currentWidth;
+      prevScaleRef.current = scale;
+      return currentWidth;
+    }
+
+    return prevWidthRef.current;
+  }, [scale, scrollContainer?.clientWidth, pageViewContext.viewport]);
+
+  function updateCorrespondingNode(node: HTMLElement) {
+    const path = [];
+    let current: Node | null = node;
+
+    if (node?.tagName === "HTML") return;
+
+    while (
+      current &&
+      current !== current.ownerDocument?.documentElement &&
+      current.parentNode
+    ) {
+      const index = Array.prototype.indexOf.call(
+        current.parentNode.childNodes,
+        current
+      );
+      path.unshift(index);
+      current = current.parentNode;
+    }
+
+    const minimapDoc = iframeRef.current?.contentDocument;
+
+    if (!minimapDoc) return;
+    let correspondingNode: HTMLElement | null = minimapDoc.documentElement;
+    let originalNode: HTMLElement | null | undefined =
+      mainViewIframeRef.current?.contentWindow?.document.documentElement;
+    for (const index of path) {
+      if (originalNode && correspondingNode) {
+        if (
+          originalNode.childNodes.length !== correspondingNode.childNodes.length
+        ) {
+          correspondingNode.innerHTML = originalNode.innerHTML;
+          return;
+        }
+      }
+
+      if (originalNode) {
+        originalNode = originalNode.childNodes[index] as HTMLElement;
+      }
+      if (correspondingNode) {
+        correspondingNode = correspondingNode.childNodes[index] as HTMLElement;
+      }
+    }
+
+    if (correspondingNode && originalNode) {
+      if (originalNode.tagName === "HEAD")
+        correspondingNode.innerHTML = originalNode.innerHTML;
+      else {
+        correspondingNode.outerHTML = originalNode.outerHTML;
+      }
+    }
+  }
+
+  const handleLoad = () => {
+    if (!mainViewIframeRef?.current?.contentWindow?.document) return;
+
+    mirrorIframeContent(editorIframeRef.current!, iframeRef.current!);
+
+    const observer = new MutationObserver((mutationsList) => {
+      const minimapDoc = iframeRef.current?.contentDocument;
+      if (!minimapDoc) return;
+
+      // get distinct list of target nodes
+      const targetNodes = mutationsList
+        .filter((x) => x.type === "childList" && x.target.parentElement)
+        .map((m) => m.target)
+        .concat(
+          mutationsList
+            .filter(
+              (x) =>
+                x.type === "characterData" ||
+                (x.type === "attributes" && x.target.parentElement)
+            )
+            .map((m) => m.target.parentElement!)
+        );
+
+      const distinctTargetNodes = Array.from(new Set(targetNodes));
+
+      const nodesToRemove = new Set<Node>();
+
+      for (let i = 0; i < distinctTargetNodes.length; i++) {
+        for (let j = 0; j < distinctTargetNodes.length; j++) {
+          if (i !== j) {
+            if (
+              distinctTargetNodes[i]?.contains(distinctTargetNodes[j] as Node)
+            ) {
+              nodesToRemove.add(distinctTargetNodes[j] as Node);
+            }
+          }
+        }
+      }
+
+      const filteredNodes = distinctTargetNodes.filter(
+        (node) => !nodesToRemove.has(node)
+      );
+
+      filteredNodes.forEach((targetNode) => {
+        updateCorrespondingNode(targetNode as HTMLElement);
+      });
+
+      setRefreshScale((x) => !x);
+    });
+    observer.observe(mainViewIframeRef.current.contentWindow!.document!, {
+      childList: true, // observe direct children changes
+      subtree: true, // observe all descendants changes
+      characterData: true, // observe text changes
+      attributes: true, // observe attribute changes (like style or class)
+    });
+
+    setMinimapReady(true);
+    observerRef.current = observer;
+  };
+
+  useEffect(() => {
+    if (editorIframeRef?.current) {
+      editorIframeRef?.current.addEventListener("load", handleLoad);
+    }
+
+    handleLoad();
+
+    // Cleanup function
+    return () => {
+      editorIframeRef?.current?.removeEventListener("load", handleLoad);
+    };
+  }, [mainViewIframeRef.current, iframeRef.current]);
+
+  useEffect(() => {
+    calcAndUpdateScale();
+  }, [
+    refreshScale,
+    editorIframeRef,
+    //pageViewContext?.windowSize,
+    pageViewContext?.zoom,
+    pageViewContext.viewport,
+    pageViewContext.deviceHeight,
+    pageViewContext.deviceWidth,
+  ]);
+
+  if (!editContext) {
+    return null;
+  }
+
+  const scrollDocumentTo = (y: number) => {
+    if (!editorIframeRef?.current) return;
+
+    if (!scrollContainer) return;
+
+    scrollContainer.scrollTo({
+      top: y,
+      behavior: "smooth",
+    });
+  };
+
+  const scrollHeight = scrollContainer?.scrollHeight;
+  const scrollTop = scroll;
+
+  const viewport = pageViewContext.viewport;
+
+  function mirrorIframeContent(
+    sourceIframe: HTMLIFrameElement,
+    targetIframe: HTMLIFrameElement
+  ) {
+    if (sourceIframe.contentDocument && targetIframe.contentDocument) {
+      const sourceHtml = sourceIframe.contentDocument.documentElement.innerHTML;
+      targetIframe.contentDocument.documentElement.innerHTML = sourceHtml;
+      targetIframe.contentDocument.documentElement.style.overflow = "hidden";
+    }
+
+    calcAndUpdateScale();
+  }
+
+  const updateScale = (scale: number) => {
+    if (!iframeRef.current || !scaleContainerRef.current) return;
+
+    scaleContainerRef.current.style.transform = `scale(${scale})`;
+    scaleContainerRef.current.style.transformOrigin = "0 0";
+
+    iframeRef.current.style.width = `${scrollContainer?.clientWidth}px`;
+    iframeRef.current.style.height = `${scrollContainer?.scrollHeight}px`;
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (!scrollContainer) return;
+    const iframeRect = iframeRef.current!.getBoundingClientRect();
+    const absY = e.clientY - iframeRect.top;
+    const relY = (absY / iframeRect.height) * scrollContainer.scrollHeight;
+
+    e.stopPropagation();
+    scrollDocumentTo(relY - viewport.height / 2);
+  };
+
+  const handleScroll = useCallback(
+    (e: React.WheelEvent) => {
+      if (!scrollContainer) return;
+      scrollContainer.scrollBy({
+        behavior: "instant",
+        left: 0,
+        top: e.deltaY,
+      });
+      editorIframeRef.current?.contentWindow?.document.documentElement?.scrollBy(
+        {
+          behavior: "instant",
+          left: 0,
+          top: e.deltaY,
+        }
+      );
+      e.stopPropagation();
+    },
+    [editorIframeRef]
+  );
+
+  return (
+    <div
+      className="bg-white z-50 relative overflow-hidden"
+      ref={minimapContainerRef}
+      style={{
+        height: "100%",
+        width: miniMapWidth + "px",
+        boxShadow: "5px 0 5px -5px #333",
+      }}
+    >
+      <div
+        className="absolute bg-opacity-50 overflow-hidden select-none  inset-0"
+        style={{
+          boxShadow: "rgb(200, 200, 200) -10px 1px 13px -10px",
+        }}
+      >
+        <div
+          ref={minimapRef}
+          onClickCapture={handleClick}
+          onDragOverCapture={handleClick}
+          onWheelCapture={handleScroll}
+          className="h-full w-full cursor-pointer"
+        >
+          <div ref={scaleContainerRef}>
+            <iframe
+              className="pointer-events-none"
+              ref={iframeRef}
+              style={{ visibility: minimapReady ? "visible" : "hidden" }}
+            />
+          </div>
+        </div>
+      </div>
+      {scrollTop !== undefined &&
+        scrollHeight !== undefined &&
+        minimapReady && (
+          <div
+            className="absolute bg-opacity-60 hover:bg-opacity-65 bg-gray-300 w-full pointer-events-none"
+            style={{
+              top: scrollTop * scale + "px",
+              height: viewport.height * scale + "px",
+            }}
+          ></div>
+        )}
+      {mode === "edit" && (
+        <PlaceholderDropZones
+          scale={scale}
+          iframe={iframeRef.current}
+          size="small"
+        />
+      )}
+      <FieldEditedIndicators
+        scale={scale}
+        pageViewContext={pageViewContext}
+        scroll={scroll}
+      />
+      {editContext.showComments && (
+        <CommentHighlightings iframe={iframeRef.current!} scale={scale} />
+      )}
+    </div>
+  );
+}