@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,307 +0,0 @@
-import {
-  useEditContext,
-  useModifiedFieldsContext,
-} from "../client/editContext";
-import { findComponentRect, findFieldElement } from "../utils";
-import { Comment } from "../../types";
-import { useState } from "react";
-import { useEffect } from "react";
-import { classNames } from "primereact/utils";
-import { CommentIcon } from "../ui/Icons";
-import { getComponentById } from "../componentTreeHelper";
-
-export function CommentHighlighting({
-  comment,
-  scale,
-  iframe,
-}: {
-  comment: Comment;
-  scale: number;
-  iframe: HTMLIFrameElement;
-}) {
-  const editContext = useEditContext();
-  const modifiedFields = useModifiedFieldsContext();
-
-  const [range, setRange] = useState<number[]>([
-    comment.rangeStart || 0,
-    comment.rangeEnd || 0,
-  ]);
-
-  useEffect(() => {
-    const findRange = async () => {
-      if (!editContext) return;
-      if (
-        comment.fieldValue &&
-        comment.fieldId &&
-        comment.rangeStart !== undefined &&
-        comment.rangeEnd !== undefined
-      ) {
-        const field = await editContext.itemsRepository.getField({
-          item: {
-            id: comment.itemId,
-            language: comment.language,
-            version: comment.version,
-          },
-          fieldId: comment.fieldId,
-        });
-
-        const modifiedField = modifiedFields?.modifiedFields.find(
-          (x) =>
-            x.fieldId === field?.id &&
-            x.item.id === comment.itemId &&
-            x.item.language === comment.language &&
-            x.item.version === comment.version,
-        );
-
-        const mapping = computeMapping(
-          modifiedField?.value || field?.rawValue || "",
-          comment.fieldValue,
-        );
-
-        const mappedRange = [
-          mapping[comment.rangeStart],
-          mapping[comment.rangeEnd],
-        ];
-
-        if (mappedRange[0] !== undefined && mappedRange[1] !== undefined) {
-          setRange(mappedRange as number[]);
-        }
-      }
-    };
-
-    findRange();
-  }, [comment.fieldValue, modifiedFields?.modifiedFields]);
-
-  if (!editContext) return null;
-
-  const fieldElement = comment.fieldId
-    ? findFieldElement(iframe, {
-        item: {
-          id: comment.itemId,
-          language: comment.language,
-          version: comment.version,
-        },
-        fieldId: comment.fieldId,
-      })
-    : undefined;
-
-  let rects: DOMRectList | null = null;
-  let isTextRange = false;
-
-  if (fieldElement && range[0] !== undefined && range[1] !== undefined) {
-    const startData = getTextNodeAtOffset(fieldElement, range[0]);
-    const endData = getTextNodeAtOffset(fieldElement, range[1]);
-
-    if (startData && endData) {
-      const textRange = document.createRange();
-      textRange.setStart(startData.node, startData.offset);
-      textRange.setEnd(endData.node, endData.offset);
-      rects = textRange.getClientRects();
-      isTextRange = true;
-    }
-  }
-
-  if (!rects || rects.length === 0) {
-    let fallbackElement = fieldElement;
-    if (
-      !fallbackElement &&
-      comment.itemId &&
-      editContext.page &&
-      iframe.contentWindow?.document.body
-    ) {
-      const componentStart = iframe.contentWindow?.document.body.querySelector(
-        "[data-component-start='" + comment.itemId + "']",
-      );
-
-      fallbackElement = componentStart?.nextElementSibling;
-      while (fallbackElement && fallbackElement.tagName === "SCRIPT") {
-        fallbackElement = fallbackElement.nextElementSibling;
-      }
-    }
-    if (!fallbackElement) return null;
-    const fallbackRect = fallbackElement.getBoundingClientRect();
-    if (!fallbackRect) return null;
-    rects = {
-      length: 1,
-      0: fallbackRect,
-      item: (index: number) => (index === 0 ? fallbackRect : null),
-      [Symbol.iterator]: function* () {
-        yield fallbackRect;
-      },
-    } as DOMRectList;
-  }
-
-  const iframeRect = iframe.getBoundingClientRect();
-
-  return (
-    <>
-      {Array.from(rects).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.switchView("reviews");
-                editContext?.select([comment.itemId]);
-                editContext?.setSelectedComment(comment);
-              }}
-            >
-              <CommentIcon className="text-blue-500 hover:text-blue-600" />
-            </div>
-          )}
-          {isTextRange && (
-            <div
-              className="opacity-45"
-              style={{
-                width: "100%",
-                height: "100%",
-                backgroundColor: comment.isResolved
-                  ? "rgba(0, 255, 0, 0.45)"
-                  : "rgba(255, 0, 0, 0.45)",
-              }}
-            ></div>
-          )}
-        </div>
-      ))}
-    </>
-  );
-}
-
-function getTextNodeAtOffset(
-  root: Node,
-
-  offset: number,
-): { node: Text; offset: number } | null {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
-  let currentNode: Text | null;
-  while ((currentNode = walker.nextNode() as Text | null)) {
-    const nodeLength = currentNode.textContent?.length || 0;
-    if (offset <= nodeLength) {
-      return { node: currentNode, offset };
-    }
-    offset -= nodeLength;
-  }
-  return null;
-}
-
-/**
- * Erzeugt ein Mapping von Positionen im modifizierten String s2 auf die entsprechenden Positionen in s1,
- * basierend auf einer minimalen Edit-Sequenz (Levenshtein-Distance).
- *
- * @param s1 Originalstring
- * @param s2 Modifizierter String
- * @returns Ein Array, in dem mapping[j] die Position in s1 angibt, die erreicht wird, nachdem das j-te Zeichen in s2 erzeugt wurde.
- */
-function computeMapping(s1: string, s2: string): number[] {
-  const n = s1.length;
-  const m = s2.length;
-
-  // 1. Aufbau der DP-Matrix und Backpointer-Matrix
-  // dp[i][j] enthält die minimale Anzahl von Operationen, um s1[0..i-1] in s2[0..j-1] zu überführen.
-  const dp: number[][] = Array.from({ length: n + 1 }, () =>
-    new Array(m + 1).fill(0),
-  );
-  const back: string[][] = Array.from({ length: n + 1 }, () =>
-    new Array(m + 1).fill(""),
-  );
-
-  // Initialisierung: leere Präfixe
-  for (let i = 0; i <= n; i++) {
-    dp[i]![0] = i;
-    if (i > 0) {
-      back[i]![0] = "D"; // "Deletion": Zeichen aus s1 wird gelöscht.
-    }
-  }
-  for (let j = 0; j <= m; j++) {
-    dp[0]![j] = j;
-    if (j > 0) {
-      back[0]![j] = "I"; // "Insertion": Zeichen in s2 wurde eingefügt.
-    }
-  }
-
-  // Füllen der DP-Matrix (Wagner–Fischer-Algorithmus)
-  for (let i = 1; i <= n; i++) {
-    for (let j = 1; j <= m; j++) {
-      const cost = s1[i - 1] === s2[j - 1] ? 0 : 1;
-
-      // Drei Möglichkeiten:
-      const deletion = dp[i - 1]![j]! + 1;
-      const insertion = dp[i]![j - 1]! + 1;
-      const substitution = dp[i - 1]![j - 1]! + cost; // "M" (Match) wenn cost==0, sonst "S" (Substitution)
-
-      // Feste Tie-Breaking Reihenfolge: zuerst Deletion, dann Insertion, dann Substitution.
-      let bestVal = deletion;
-      let op = "D";
-      if (insertion < bestVal) {
-        bestVal = insertion;
-        op = "I";
-      }
-      if (substitution < bestVal) {
-        bestVal = substitution;
-        op = cost === 0 ? "M" : "S";
-      }
-
-      dp[i]![j] = bestVal;
-      back[i]![j] = op;
-    }
-  }
-
-  // 2. Rekonstruktion des Edit-Skripts per Backtracking
-  const ops: string[] = [];
-  let i = n;
-  let j = m;
-  while (i > 0 || j > 0) {
-    const op = back[i]![j]!;
-    ops.push(op);
-    if (op === "M" || op === "S") {
-      i--;
-      j--;
-    } else if (op === "D") {
-      i--;
-    } else if (op === "I") {
-      j--;
-    }
-  }
-  ops.reverse(); // Jetzt liegen die Operationen in der Vorwärtsreihenfolge vor.
-
-  // 3. Simulation der Transformation von s1 zu s2 und Aufbau des Mappings.
-  // mapping[j] soll die Position in s1 angeben, nachdem das j-te Zeichen in s2 erzeugt wurde.
-  const mapping: number[] = new Array(m + 1);
-  let iPos = 0; // Aktuelle Position in s1
-  let jPos = 0; // Aktuelle Position in s2
-  mapping[jPos] = iPos; // Vor jeglicher Transformation
-
-  for (const op of ops) {
-    if (op === "M" || op === "S") {
-      // Bei Match oder Substitution wird in beiden Strings ein Zeichen verarbeitet.
-      iPos++;
-      jPos++;
-      mapping[jPos] = iPos;
-    } else if (op === "I") {
-      // Bei Insertion wird in s2 ein Zeichen eingefügt, s1 bleibt unverändert.
-      jPos++;
-      mapping[jPos] = iPos;
-    } else if (op === "D") {
-      // Bei Deletion wird in s1 ein Zeichen übersprungen.
-      iPos++;
-    }
-  }
-
-  return mapping;
-}

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

@@ -1,35 +0,0 @@
-import { useEffect, useState } from "react";
-import { useEditContext } from "../client/editContext";
-import { CommentHighlighting } from "./CommentHighlighting";
-
-import { Comment } from "../../types";
-
-export function CommentHighlightings({
-  scale,
-  iframe,
-}: {
-  scale: number;
-  iframe: HTMLIFrameElement;
-}) {
-  const editContext = useEditContext();
-  const [comments, setComments] = useState<Comment[]>([]);
-
-  useEffect(() => {
-    setComments(editContext?.comments || []);
-  }, [editContext?.comments, editContext?.suggestedEdits]);
-
-  return (
-    <>
-      {comments
-        .filter((x) => !x.isResolved)
-        .map((comment) => (
-          <CommentHighlighting
-            iframe={iframe}
-            scale={scale}
-            key={comment.id}
-            comment={comment}
-          />
-        ))}
-    </>
-  );
-}

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

@@ -1,59 +0,0 @@
-import { ProgressSpinner } from "primereact/progressspinner";
-import { FieldAction } from "../client/EditorClient";
-import { useEditContext } from "../client/editContext";
-
-export function FieldActionIndicator({ action }: { action: FieldAction }) {
-  const editContext = useEditContext();
-  if (!editContext) return null;
-
-  const pageViewContext = editContext.pageView;
-  const field = action.field;
-  const fieldElements =
-    pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(
-      `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"]`,
-    );
-
-  if (!fieldElements) return null;
-  return (
-    <>
-      {[...fieldElements].map((element, index) => (
-        <SingleIndicator
-          element={element}
-          key={action.field.fieldId + action.field + index}
-          action={action}
-        />
-      ))}
-    </>
-  );
-}
-
-function SingleIndicator({
-  element,
-  action,
-}: {
-  element: Element;
-  action: FieldAction;
-}) {
-  const rect = element.getBoundingClientRect();
-  const indicatorRect = rect;
-  return (
-    <div
-      className={`focus-shadow executing-action bg-theme-secondary/20 pointer-events-none absolute flex items-center justify-center`}
-      style={{
-        left: indicatorRect.x,
-        top: indicatorRect.y,
-        width: indicatorRect.width,
-        height: indicatorRect.height,
-        zIndex: 800,
-      }}
-    >
-      <div className="text-theme-secondary rounded-mdp-3 bg-theme-secondary-light border-theme-secondary text-3xs flex flex-col items-center justify-center gap-1.5 rounded border p-1 font-bold">
-        <div className="flex items-center gap-1">
-          <ProgressSpinner style={{ width: "1rem", height: "1rem" }} />
-          {action.label}
-        </div>
-        <div className="text-3xs">{action.message}</div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,23 +0,0 @@
-import { FieldActionIndicator } from "./FieldActionIndicator";
-import { useEditContext } from "../client/editContext";
-
-export function FieldActionsIndicators() {
-  const editContext = useEditContext();
-
-  if (!editContext) return null;
-
-  const actions = editContext.activeFieldActions;
-
-  return (
-    <>
-      {actions
-        .filter((x) => x.state === "running")
-        .map((action) => (
-          <FieldActionIndicator
-            action={action}
-            key={action.field.fieldId + action.field.item.id}
-          />
-        ))}
-    </>
-  );
-}

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

@@ -1,64 +0,0 @@
-import { EditedField, useEditContext } from "../client/editContext";
-import { PageViewContext } from "../page-viewer/pageViewContext";
-
-export function FieldEditedIndicator({
-  field,
-  scale,
-  pageViewContext,
-  scroll,
-}: {
-  field: EditedField;
-  scale?: number;
-  pageViewContext: PageViewContext;
-  scroll?: number;
-}) {
-  const editContext = useEditContext();
-  if (!editContext) return null;
-
-  const fieldElements =
-    pageViewContext.editorIframeRef.current?.contentWindow?.document.querySelectorAll(
-      `[data-fieldid="${field.fieldId}"][data-itemid="${field.item.id}"][data-language="${field.item.language}"][data-version="${field.item.version}"]`
-    );
-
-  if (!fieldElements) return null;
-  return (
-    <>
-      {[...fieldElements]
-        .filter((x) => x != editContext.inlineEditingFieldElement)
-        .map((element) => (
-          <SingleFieldEditedIndicator
-            element={element}
-            key={field.fieldId + field.item.id}
-            scale={scale}
-            scroll={scroll}
-          />
-        ))}
-    </>
-  );
-}
-
-function SingleFieldEditedIndicator({
-  element,
-  scale,
-  scroll,
-}: {
-  element: Element;
-  scale?: number;
-  scroll?: number;
-}) {
-  const rect = element.getBoundingClientRect();
-
-  const indicatorRect = rect;
-  return (
-    <div
-      className={`pointer-events-none absolute focus-shadow edited-field`}
-      style={{
-        left: indicatorRect.x * (scale || 1),
-        top: (indicatorRect.y + (scroll || 0)) * (scale || 1),
-        width: indicatorRect.width * (scale || 1),
-        height: indicatorRect.height * (scale || 1),
-        zIndex: 800,
-      }}
-    />
-  );
-}

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

@@ -1,35 +0,0 @@
-import { useEditContext } from "../client/editContext";
-import { PageViewContext } from "../page-viewer/pageViewContext";
-import { FieldEditedIndicator } from "./FieldEditedIndicator";
-
-export function FieldEditedIndicators({
-  scale,
-  pageViewContext,
-  scroll,
-}: {
-  scale?: number;
-  pageViewContext: PageViewContext;
-  scroll?: number;
-}) {
-  const editContext = useEditContext();
-
-  if (!editContext) return null;
-
-  const fields = editContext.lastEditedFields;
-
-  return (
-    <>
-      {fields
-        .filter((x) => x.timestamp > Date.now() - 10000 && x.user.ai)
-        .map((field) => (
-          <FieldEditedIndicator
-            field={field}
-            key={field.fieldId + field.item.id + field.timestamp}
-            scale={scale}
-            pageViewContext={pageViewContext}
-            scroll={scroll}
-          />
-        ))}
-    </>
-  );
-}