@alpaca-editor/core 1.0.3938 → 1.0.3941

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

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

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

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