@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,287 @@
+import {
+  useEditContext,
+  useModifiedFieldsContext,
+} from "../client/editContext";
+import { 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";
+
+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;
+
+  if (!comment.fieldId) return null;
+
+  const fieldElement = findFieldElement(iframe, {
+    item: {
+      id: comment.itemId,
+
+      language: comment.language,
+      version: comment.version,
+    },
+    fieldId: comment.fieldId,
+  });
+
+  if (!fieldElement) return null;
+
+  let rects: DOMRectList | null = null;
+
+  if (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();
+    }
+  }
+
+  if (!rects || rects.length === 0) {
+    const fallbackRect = fieldElement.getBoundingClientRect();
+    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(
+                "absolute w-5 h-5  cursor-pointer pointer-events-auto ",
+                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>
+          )}
+          <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

@@ -0,0 +1,35 @@
+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]);
+
+  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

@@ -0,0 +1,44 @@
+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}"]`
+    );
+
+  if (!fieldElements) return null;
+  return (
+    <>
+      {[...fieldElements].map((element, index) => (
+        <SingleIndicator
+          element={element}
+          key={action.field.fieldId + action.field + index}
+        />
+      ))}
+    </>
+  );
+}
+
+function SingleIndicator({ element }: { element: Element }) {
+  const rect = element.getBoundingClientRect();
+
+  const indicatorRect = rect;
+  return (
+    <div
+      className={`pointer-events-none absolute focus-shadow executing-action`}
+      style={{
+        left: indicatorRect.x,
+        top: indicatorRect.y,
+        width: indicatorRect.width,
+        height: indicatorRect.height,
+        zIndex: 800,
+      }}
+    />
+  );
+}

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

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

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

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