@alpaca-editor/core 1.0.3941 → 1.0.3943

package/src/editor/page-editor-chrome/PlaceholderDropZones.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+
+import { getAllPlaceholders } from "../componentTreeHelper";
+import { findComponentRect } from "../utils";
+import { PlaceholderDropZone } from "./PlaceholderDropZone";
+import { Placeholder, Component } from "../pageModel";
+
+export function PlaceholderDropZones({
+  scale,
+  iframe,
+  size,
+}: {
+  scale?: number;
+  iframe?: HTMLIFrameElement | null;
+  size: "large" | "small";
+}) {
+  const [placeholders, setPlaceholders] = useState<Placeholder[]>([]);
+  const editContext = useEditContext();
+  const pageViewContext = editContext?.pageView;
+
+  useEffect(() => {
+    if (!pageViewContext?.page) return;
+    setPlaceholders(getAllPlaceholders(pageViewContext.page!));
+  }, [pageViewContext?.page]);
+
+  if (
+    !pageViewContext ||
+    (!editContext?.dragObject && !editContext.selectedForInsertion) ||
+    !placeholders
+  )
+    return null;
+
+  const matchingPlaceholders = placeholders.filter(
+    (x) =>
+      x.parentComponent?.id === editContext.selectedForInsertion ||
+      x.insertOptions?.find(
+        (y) =>
+          y.typeId === editContext.selectedForInsertion ||
+          y.typeId === editContext.dragObject?.typeId ||
+          y.typeId === editContext.dragObject?.templateId ||
+          y.compatibleTypeIds?.find(
+            (z) => z == editContext.dragObject?.typeId,
+          ) !== undefined ||
+          y.typeId === editContext.dragObject?.templateId ||
+          y.compatibleTypeIds?.find(
+            (z) => z == editContext.dragObject?.templateId,
+          ) !== undefined,
+      ),
+  );
+
+  if (!iframe) return;
+
+  const zones: {
+    placeholder: Placeholder;
+    position: { x: number; y: number };
+    index: number;
+    element: Element;
+    anchor: "top" | "bottom" | "left" | "right";
+    description?: string | null;
+  }[] = [];
+
+  const scrollHeight =
+    editContext.pageView.editorIframeRef?.current?.contentWindow?.document
+      .documentElement.scrollHeight || 0;
+
+  matchingPlaceholders.forEach((placeholder) => {
+    let placeholderElement = iframe!.contentWindow?.document.body.querySelector(
+      "[data-placeholder-start='" + placeholder.key + "']",
+    );
+
+    if (!placeholderElement && placeholder.components.length > 0) {
+      placeholderElement = placeholder.components[0]?.firstDOMElement;
+    }
+
+    if (!placeholderElement) return;
+
+    const prev = getPreviousElement(placeholderElement);
+
+    const nextOrParent =
+      getNextElement(placeholderElement) || placeholderElement.parentElement;
+
+    let orientation = placeholderElement?.getAttribute("data-orientation");
+
+    if (!orientation)
+      orientation = detectOrientation(
+        placeholderElement,
+        placeholder.components,
+      );
+
+    const rect = (prev ?? nextOrParent)!.getBoundingClientRect();
+    const zoom = pageViewContext.zoom;
+
+    const position =
+      orientation === "horizontal"
+        ? {
+            x: (prev ? rect.x + rect.width : rect.x) * zoom,
+            y: (rect.y + rect.height / 2) * zoom,
+          }
+        : {
+            x: (rect.x + rect.width / 2) * zoom,
+            y: (prev ? rect.y + rect.height : rect.y) * zoom,
+          };
+
+    let index = 0;
+
+    const description = placeholderElement.getAttribute("data-description");
+
+    let anchor: "top" | "bottom" | "left" | "right" = "top";
+
+    if (prev && orientation === "horizontal") {
+      anchor = "right";
+    }
+    if (prev && orientation !== "horizontal") {
+      anchor = "bottom";
+    }
+    if (!prev && orientation === "horizontal") {
+      anchor = "left";
+    }
+    if (!prev && orientation !== "horizontal") {
+      anchor = "top";
+    }
+
+    zones.push({
+      placeholder,
+      position,
+      index,
+      element: prev ?? nextOrParent!,
+      anchor,
+      description,
+    });
+
+    placeholder.components.forEach((component) => {
+      const componentRect = findComponentRect(iframe, component);
+      if (!componentRect) return;
+
+      const position = getPositionFromRect(
+        componentRect.rect,
+        pageViewContext.zoom,
+        orientation,
+      );
+
+      index++;
+
+      zones.push({
+        placeholder,
+        position,
+        index,
+        anchor: orientation === "horizontal" ? "right" : "bottom",
+        element: componentRect.elements[componentRect.elements.length - 1]!,
+      });
+    });
+
+    //   let nextElement = placeholderElement?.nextElementSibling;
+    //   while (nextElement) {
+    //     nextElement = nextElement?.nextElementSibling;
+    //     if (nextElement) {
+    //       if (
+    //         nextElement.getAttribute("data-placeholder-end") === placeholder.key
+    //       ) {
+    //         break;
+    //       }
+
+    //       if (nextElement.getAttribute("data-component-end")) {
+    //         const componentRect = findComponentRect(
+    //           iframe,
+    //           (nextElement.getAttribute("data-component-end") ||
+    //             nextElement.getAttribute("data-dropzone"))!,
+    //         );
+    //         if (!componentRect) continue;
+    //         const position = getPositionFromRect(
+    //           componentRect.rect,
+    //           pageViewContext.zoom,
+    //           orientation,
+    //         );
+    //         index++;
+    //         zones.push({
+    //           placeholder,
+    //           position,
+    //           index,
+    //           anchor: orientation === "horizontal" ? "right" : "bottom",
+    //           element: componentRect.elements[componentRect.elements.length - 1]!,
+    //         });
+    //       } else if (nextElement.getAttribute("data-dropzone")) {
+    //         const rect = nextElement.getBoundingClientRect();
+    //         const position = getPositionFromRect(rect, pageViewContext.zoom);
+    //         index++;
+    //         zones.push({
+    //           placeholder,
+    //           position,
+    //           index,
+    //           anchor: orientation === "horizontal" ? "left" : "top",
+    //           element: nextElement,
+    //         });
+    //       }
+    //     }
+    //   }
+  });
+
+  return zones.map((zone, index) => {
+    const x = Math.min(
+      pageViewContext.viewport.width - 20,
+      Math.max(20, zone.position.x * (scale || 1)),
+    );
+    const y = Math.min(
+      scrollHeight - 20,
+      Math.max(20 - pageViewContext.scroll, zone.position.y * (scale || 1)),
+    );
+
+    return (
+      <PlaceholderDropZone
+        key={index}
+        placeholder={zone.placeholder}
+        spotPosition={{
+          x,
+          y,
+        }}
+        index={zone.index}
+        size={size}
+        spotPositionElement={zone.element}
+        spotPositionAnchor={zone.anchor}
+        parentName={zone.placeholder.parentComponent?.name}
+        description={zone.description || undefined}
+      />
+    );
+  });
+}
+
+function getPreviousElement(element: Element): Element | null {
+  let prev = element.previousElementSibling;
+  while (prev && prev.tagName === "SCRIPT") {
+    prev = prev.previousElementSibling;
+  }
+  return prev;
+}
+
+function getNextElement(element: Element): Element | null {
+  let next = element.nextElementSibling;
+
+  while (next && next.tagName === "SCRIPT") {
+    next = next.nextElementSibling;
+  }
+  return next;
+}
+
+function getPositionFromRect(
+  rect: { x: number; y: number; width: number; height: number },
+  zoom: number,
+  orientation?: string | null,
+) {
+  const position =
+    orientation === "horizontal"
+      ? {
+          x: rect.x + rect.width * zoom,
+          y: (rect.y + rect.height / 2) * zoom,
+        }
+      : {
+          x: (rect.x + rect.width / 2) * zoom,
+          y: rect.y + rect.height * zoom,
+        };
+
+  return position;
+}
+
+function detectOrientation(
+  placeholderElement: Element,
+  components: Component[],
+): "horizontal" | "vertical" {
+  // Check parent element for flex/grid direction
+  const parentElement = placeholderElement.parentElement;
+  if (parentElement) {
+    const parentStyle = window.getComputedStyle(parentElement);
+    const display = parentStyle.getPropertyValue("display");
+
+    // Check for flex direction
+    if (display === "flex" || display === "inline-flex") {
+      const flexDirection = parentStyle.getPropertyValue("flex-direction");
+      if (flexDirection === "row" || "row-reverse") {
+        return "horizontal";
+      }
+      if (flexDirection === "column" || "column-reverse") {
+        return "vertical";
+      }
+    }
+
+    // Check for grid layout
+    if (display === "grid" || display === "inline-grid") {
+      const gridAutoFlow = parentStyle.getPropertyValue("grid-auto-flow");
+      if (gridAutoFlow.includes("column")) {
+        return "horizontal";
+      }
+      if (gridAutoFlow.includes("row")) {
+        return "vertical";
+      }
+    }
+  }
+
+  // Analyze sibling positions if available
+  if (components.length > 1) {
+    const prevRect = components[0]?.firstDOMElement?.getBoundingClientRect();
+    const nextRect = components[1]?.firstDOMElement?.getBoundingClientRect();
+
+    if (!prevRect || !nextRect) return "horizontal";
+
+    // Compare the position differences
+    const horizontalDiff = Math.abs(nextRect.x - prevRect.x);
+    const verticalDiff = Math.abs(nextRect.y - prevRect.y);
+
+    // If horizontal difference is greater, it's likely a horizontal layout
+    return horizontalDiff > verticalDiff ? "horizontal" : "vertical";
+  }
+
+  // Default to vertical if we can't determine
+  return "vertical";
+}

package/src/editor/page-editor-chrome/SuggestionHighlighting.tsx

@@ -0,0 +1,300 @@
+import {
+  useEditContext,
+  useModifiedFieldsContext,
+} from "../client/editContext";
+import { findFieldElement } from "../utils";
+import { SuggestedEdit } from "../../types";
+import { useState } from "react";
+import { useEffect } from "react";
+import { classNames } from "primereact/utils";
+import { UserRoundPen } from "lucide-react";
+import * as DiffLib from "diff";
+
+export function SuggestionHighlighting({
+  suggestion,
+  scale,
+  iframe,
+}: {
+  suggestion: SuggestedEdit;
+  scale: number;
+  iframe: HTMLIFrameElement;
+}) {
+  const editContext = useEditContext();
+  const modifiedFields = useModifiedFieldsContext();
+  const [ranges, setRanges] = useState<Array<[number, number]>>([]);
+  const [textContent, setTextContent] = useState<string>("");
+
+  useEffect(() => {
+    const findRanges = async () => {
+      if (!editContext) return;
+
+      const field = await editContext.itemsRepository.getField({
+        item: {
+          id: suggestion.itemId,
+          language: suggestion.mainItemLanguage,
+          version: suggestion.mainItemVersion,
+        },
+        fieldId: suggestion.fieldId,
+      });
+
+      const modifiedField = modifiedFields?.modifiedFields.find(
+        (x) =>
+          x.fieldId === field?.id &&
+          x.item.id === suggestion.itemId &&
+          x.item.language === suggestion.mainItemLanguage &&
+          x.item.version === suggestion.mainItemVersion,
+      );
+
+      // Calculate the actual differences between oldValue and newValue
+      const oldValue = suggestion.oldValue || field?.rawValue || "";
+      const newValue = modifiedField?.value || suggestion.newValue || "";
+
+      // If values are identical, no need to highlight
+      if (oldValue === newValue) {
+        setRanges([]);
+        return;
+      }
+
+      // Save oldValue for use in the component
+      setTextContent(oldValue);
+
+      // Use the diff library to find the changed parts - using diffChars for more precise matching
+      const diffResult = DiffLib.diffChars(oldValue, newValue);
+
+      const changeRanges: Array<[number, number]> = [];
+      let positionInOld = 0;
+
+      // Process the diff result to find all change ranges
+      for (const part of diffResult) {
+        if (part.removed) {
+          // If a part is removed, highlight it in the original text
+          changeRanges.push([positionInOld, positionInOld + part.value.length]);
+          positionInOld += part.value.length;
+        } else if (part.added) {
+          // For added parts, mark the insertion point
+          if (changeRanges.length > 0) {
+            const lastRange = changeRanges[changeRanges.length - 1];
+            if (lastRange && lastRange[1] === positionInOld) {
+              // If this addition comes right after a removal, the previous range already covers the position
+              continue;
+            }
+          }
+          // Mark the insertion point for new content
+          changeRanges.push([positionInOld, positionInOld]);
+        } else {
+          // Unchanged part, just advance the position
+          positionInOld += part.value.length;
+        }
+      }
+
+      // Merge adjacent or overlapping ranges
+      const mergedRanges: Array<[number, number]> = [];
+
+      if (changeRanges.length > 0) {
+        changeRanges.sort((a, b) => a[0] - b[0]);
+
+        // Start with the first range
+        const firstRange = changeRanges[0];
+        if (!firstRange) {
+          setRanges([]);
+          return;
+        }
+
+        let currentRange: [number, number] = [...firstRange];
+
+        // Process the rest of the ranges
+        for (let i = 1; i < changeRanges.length; i++) {
+          const nextRange = changeRanges[i];
+
+          // Skip undefined ranges
+          if (!nextRange) continue;
+
+          // If the next range starts very close to the end of the current range, merge them
+          if (nextRange[0] <= currentRange[1] + 3) {
+            // Allow slightly larger gaps (3 chars) for better highlighting
+            // Extend the current range
+            currentRange[1] = Math.max(currentRange[1], nextRange[1]);
+          } else {
+            // Save the current range and start a new one
+            mergedRanges.push([currentRange[0], currentRange[1]]);
+            currentRange = [...nextRange];
+          }
+        }
+
+        // Add the last range
+        mergedRanges.push([currentRange[0], currentRange[1]]);
+      }
+
+      // Set ranges to highlight the changed parts
+      setRanges(mergedRanges);
+    };
+
+    findRanges();
+  }, [editContext, modifiedFields?.modifiedFields, suggestion]);
+
+  if (!editContext) return null;
+
+  if (!suggestion.fieldId) return null;
+
+  const fieldElement = findFieldElement(iframe, {
+    item: {
+      id: suggestion.itemId,
+      language: suggestion.mainItemLanguage,
+      version: suggestion.mainItemVersion,
+    },
+    fieldId: suggestion.fieldId,
+  });
+
+  if (!fieldElement) return null;
+
+  // Process each range and collect all DOM rectangles
+  const allRects: Array<DOMRect> = [];
+
+  ranges.forEach((range) => {
+    if (range[0] !== undefined && range[1] !== undefined) {
+      // For insertion points (zero-length ranges), expand to include at least one character
+      // to make it visible
+      const start = range[0];
+      const end =
+        range[0] === range[1]
+          ? Math.min(range[0] + 1, textContent.length)
+          : range[1];
+
+      if (start < end) {
+        const startData = getTextNodeAtPosition(fieldElement, start);
+        const endData = getTextNodeAtPosition(fieldElement, end);
+
+        if (startData && endData) {
+          try {
+            const textRange = document.createRange();
+            textRange.setStart(startData.node, startData.offset);
+            textRange.setEnd(endData.node, endData.offset);
+
+            const rangeRects = textRange.getClientRects();
+            // Convert DOMRectList to Array
+            for (let i = 0; i < rangeRects.length; i++) {
+              const rect = rangeRects[i];
+              if (rect) {
+                allRects.push(rect);
+              }
+            }
+          } catch (e) {
+            console.error("Error creating range", e);
+          }
+        }
+      }
+    }
+  });
+
+  // If no rects were found, fall back to highlighting the entire field
+  if (allRects.length === 0 && ranges.length > 0) {
+    const fallbackRect = fieldElement.getBoundingClientRect();
+    allRects.push(fallbackRect);
+  }
+
+  const iframeRect = iframe.getBoundingClientRect();
+
+  return (
+    <>
+      {allRects.map((rect, index) => (
+        <div
+          key={index}
+          style={{
+            position: "absolute",
+            top: rect.top * scale,
+            left: rect.left * scale,
+            width: rect.width * scale,
+            height: rect.height * scale,
+            pointerEvents: "none",
+          }}
+        >
+          {index === 0 && (
+            <div
+              className={classNames(
+                "pointer-events-auto absolute h-5 w-5 cursor-pointer",
+                rect.top * scale < 18 ? "top-0" : "top-[-18px]",
+                (rect.left + rect.width) * scale > iframeRect.width - 18
+                  ? "right-0"
+                  : "right-[-18px]",
+              )}
+              onClick={() => {
+                editContext.select([suggestion.itemId]);
+                editContext.setFocusedField(
+                  {
+                    item: {
+                      id: suggestion.itemId,
+                      language: suggestion.mainItemLanguage,
+                      version: suggestion.mainItemVersion,
+                    },
+                    fieldId: suggestion.fieldId,
+                  },
+                  true,
+                );
+              }}
+            >
+              <UserRoundPen
+                className="rounded-full bg-emerald-400/70 p-1 text-white"
+                size={20}
+              />
+            </div>
+          )}
+          {/* <div
+            className="bg-emerald-400/30"
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          ></div> */}
+        </div>
+      ))}
+    </>
+  );
+}
+
+// Improved function to find text node at a given character position
+function getTextNodeAtPosition(
+  root: Node,
+  targetOffset: number,
+): { node: Text; offset: number } | null {
+  // Handle edge cases
+  if (targetOffset < 0) return null;
+
+  // Get all text nodes in order
+  const textNodes: Text[] = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+
+  let node: Text | null;
+  while ((node = walker.nextNode() as Text | null)) {
+    if (node) textNodes.push(node);
+  }
+
+  let currentOffset = 0;
+  // Walk through all text nodes to find the one containing our target position
+  for (const node of textNodes) {
+    const nodeLength = node.textContent?.length || 0;
+
+    // If this node contains our target position
+    if (currentOffset + nodeLength >= targetOffset) {
+      return {
+        node: node,
+        offset: targetOffset - currentOffset,
+      };
+    }
+
+    currentOffset += nodeLength;
+  }
+
+  // If we've gone through all nodes and haven't found the position
+  // Return the last position in the last text node
+  if (textNodes.length > 0) {
+    const lastNode = textNodes[textNodes.length - 1];
+    if (lastNode) {
+      return {
+        node: lastNode,
+        offset: lastNode.textContent?.length || 0,
+      };
+    }
+  }
+
+  return null;
+}

package/src/editor/page-editor-chrome/SuggestionHighlightings.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+
+import { SuggestionHighlighting } from "./SuggestionHighlighting";
+
+import { SuggestedEdit } from "../../types";
+
+export function SuggestionHighlightings({
+  scale,
+  iframe,
+}: {
+  scale: number;
+  iframe: HTMLIFrameElement;
+}) {
+  const editContext = useEditContext();
+
+  const [suggestions, setSuggestions] = useState<SuggestedEdit[]>([]);
+
+  useEffect(() => {
+    setSuggestions(
+      editContext?.suggestedEdits.filter((x) => x.status === "Pending") || [],
+    );
+  }, [editContext?.comments, editContext?.suggestedEdits]);
+
+  return (
+    <>
+      {editContext?.showSuggestedEdits &&
+        suggestions
+          .filter((x) => x.status !== "approved" && x.status !== "rejected")
+          .map((suggestion) => (
+            <SuggestionHighlighting
+              iframe={iframe}
+              scale={scale}
+              key={suggestion.id}
+              suggestion={suggestion}
+            />
+          ))}
+    </>
+  );
+}