@alpaca-editor/core 1.0.3938 → 1.0.3941

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

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

@@ -1,258 +0,0 @@
-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) 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 !== 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

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