@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,70 @@
+import { Dropdown } from "primereact/dropdown";
+import { InputNumber } from "primereact/inputnumber";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { RotateDeviceIcon } from "../ui/Icons";
+import { useDebouncedCallback } from "use-debounce";
+import { PageViewContext } from "./pageViewContext";
+import { EditorConfiguration } from "../../config/types";
+
+export function DeviceToolbar({
+  pageViewContext,
+  configuration,
+}: {
+  pageViewContext: PageViewContext;
+  configuration: EditorConfiguration;
+}) {
+  const debouncedSetDeviceWidth = useDebouncedCallback(
+    (width: number | undefined) => {
+      pageViewContext.setDeviceWidth(width);
+    },
+    400
+  );
+  const debouncedSetDeviceHeight = useDebouncedCallback(
+    (height: number | undefined) => {
+      pageViewContext.setDeviceHeight(height);
+    },
+    400
+  );
+
+  return (
+    <div className="flex justify-center w-full items-center bg-gray-100 p-1 z-1000 text-sm gap-2 border-b">
+      <Dropdown
+        options={configuration.devices.map((x) => ({
+          label: x.name,
+          value: x.name,
+        }))}
+        value={pageViewContext.device}
+        onChange={(e) => pageViewContext.setDevice(e.value)}
+      />
+      <InputNumber
+        size={4}
+        max={10000}
+        className="text-sm"
+        value={pageViewContext.deviceWidth}
+        onChange={(e) => debouncedSetDeviceWidth(e.value || undefined)}
+      />
+      x
+      <InputNumber
+        size={4}
+        max={10000}
+        className="text-sm"
+        value={pageViewContext.deviceHeight}
+        onChange={(e) => debouncedSetDeviceHeight(e.value || undefined)}
+      />
+      <SimpleIconButton
+        icon="pi pi-lock"
+        selected={pageViewContext.lockHeight || false}
+        onClick={() =>
+          pageViewContext.setLockHeight(!pageViewContext.lockHeight)
+        }
+        label="Lock Height"
+      />
+      <SimpleIconButton
+        icon={<RotateDeviceIcon className="w-4 h-4" />}
+        selected={pageViewContext.rotate || false}
+        onClick={() => pageViewContext.setRotate(!pageViewContext.rotate)}
+        label="Rotate"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,262 @@
+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, FullItem, RenderedItem } from "../pageModel";
+import { Spinner } from "../ui/Spinner";
+import { PageViewContext } from "./pageViewContext";
+import { SimpleTabs, Tab } from "../ui/SimpleTabs";
+
+export function EditorForm({
+  pageViewContext,
+  readonly,
+  compareView,
+}: {
+  pageViewContext?: PageViewContext;
+  readonly?: boolean;
+  compareView: boolean;
+}) {
+  const editContext = useEditContext()!;
+  if (!pageViewContext) pageViewContext = editContext.pageView;
+
+  const setInsertMode = editContext.setInsertMode;
+  const insertMode =
+    editContext.insertMode && editContext.mode === "edit" && !compareView;
+  const [activeTabKey, setActiveTabKey] = useState("content");
+  const [item, setItem] = useState<RenderedItem>();
+  const [component, setComponent] = useState<Component>();
+  const [fullItem, setFullItem] = useState<FullItem>();
+
+  const toggleInsertMode = () => {
+    if (insertMode) {
+      setInsertMode(false);
+    } else {
+      setInsertMode(true);
+    }
+  };
+
+  useEffect(() => {
+    async function loadFullItem() {
+      if (!item) return;
+      const fullItem = await editContext!.itemsRepository.getItem(item);
+      setFullItem(fullItem);
+    }
+    loadFullItem();
+  }, [item]);
+
+  useEffect(() => {
+    if (editContext.selectedForInsertion) setInsertMode(true);
+  }, [editContext.selectedForInsertion]);
+
+  let isShared = false;
+
+  useEffect(() => {
+    if (!pageViewContext.page) {
+      setComponent(undefined);
+      setItem(undefined);
+      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);
+    }
+
+    setItem(
+      newSelectedItem || pageViewContext.page.rootComponent.datasourceItem,
+    );
+  }, [
+    editContext.selection,
+    pageViewContext.page,
+    pageViewContext.pageItemDescriptor,
+  ]);
+
+  if (!fullItem || !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(fullItem?.fields || []).filter(
+    (x) => x.section === "Design" || x.section === "Rendering",
+  );
+
+  const editorFields = component?.editorFields;
+
+  if (editorFields && editorFields["Design"]) {
+    editorFields["Design"]?.addFields.forEach((fieldName) => {
+      const field = fullItem?.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(fullItem?.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(fullItem?.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">
+            <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 thisdata-field-id
+  if (editorFields) {
+    Object.keys(editorFields).forEach((key) => {
+      if (key !== "Content" && key !== "Design") {
+        const fields = fullItem?.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">
+          <ItemInfo item={fullItem} />
+          <FieldList
+            fields={[{ fields: fullItem?.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">
+        {component && component !== pageViewContext.page?.rootComponent && (
+          <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 text-gray-800"
+          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 ||
+            !fullItem?.canWriteItem ||
+            editContext.mode !== "edit" ||
+            compareView
+          }
+        />
+      </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-2.5 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,362 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEditContext, EditorMode } 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";
+import { SuggestionHighlightings } from "../page-editor-chrome/SuggestionHighlightings";
+
+export function MiniMap({
+  deviceHeight,
+  scroll,
+  mainViewIframeRef,
+  compareView,
+  pageViewContext,
+}: {
+  deviceHeight?: number;
+  scroll: number;
+  mainViewIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  compareView: boolean;
+  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(0);
+
+  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 + 1);
+    });
+    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";
+    }
+
+    setRefreshScale((x) => x + 1);
+  }
+
+  const updateScale = (scale: number) => {
+    if (!iframeRef.current || !scaleContainerRef.current) return;
+
+    // console.log(
+    //   "Update Scale: ScrollHeight: ",
+    //   scrollContainer?.scrollHeight,
+    //   " scrollcontainer: ",
+    //   scrollContainer,
+    // );
+
+    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="relative overflow-hidden bg-white"
+      ref={minimapContainerRef}
+      style={{
+        height: "100%",
+        width: miniMapWidth + "px",
+        boxShadow: "5px 0 5px -5px #333",
+      }}
+    >
+      <div
+        className="bg-opacity-50 absolute inset-0 overflow-hidden select-none"
+        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="pointer-events-none absolute w-full bg-gray-300 opacity-60 hover:opacity-65"
+            style={{
+              top: scrollTop * scale + "px",
+              height: viewport.height * scale + "px",
+            }}
+          ></div>
+        )}
+      {editContext.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} />
+      )}
+      {editContext.showSuggestedEdits && (
+        <SuggestionHighlightings iframe={iframeRef.current!} scale={scale} />
+      )}
+    </div>
+  );
+}