@alpaca-editor/core 1.0.3818 → 1.0.3822

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/reviews/Comments.tsx

@@ -5,7 +5,14 @@ import { SuggestedEditComponent } from "./SuggestedEdit";
 import { Comment as CommentType, SuggestedEdit } from "../../types";
 import { SimpleToolbar } from "../ui/SimpleToolbar";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { FileDiff, MessageCircle, SquarePen } from "lucide-react";
+import {
+  FileDiff,
+  MessageCircle,
+  SquarePen,
+  CheckCircle,
+  CheckCircle2,
+  Eye,
+} from "lucide-react";
 
 // Define a union type for feedback items:
 export type FeedbackItem = CommentType | SuggestedEdit;
@@ -13,13 +20,21 @@ export type FeedbackItem = CommentType | SuggestedEdit;
 export function Comments() {
   const editContext = useEditContext();
   const [feedbackItems, setFeedbackItems] = useState<FeedbackItem[]>([]);
+  const [hideAppliedSuggestions, setHideAppliedSuggestions] =
+    useState<boolean>(true);
 
   useEffect(() => {
     // Retrieve your list of comments (and ensure there's an array of suggested edits,
     // for instance from your editContext)
     const comments: CommentType[] = editContext?.comments || [];
     const suggestedEdits: SuggestedEdit[] = editContext?.suggestedEdits || [];
-    const combined: FeedbackItem[] = [...comments, ...suggestedEdits];
+
+    // Filter out applied suggestions if hideAppliedSuggestions is true
+    const filteredSuggestedEdits = hideAppliedSuggestions
+      ? suggestedEdits.filter((edit) => edit.status !== "Applied")
+      : suggestedEdits;
+
+    const combined: FeedbackItem[] = [...comments, ...filteredSuggestedEdits];
 
     // Sort by creation date. Adjust the comparison as needed if the date properties differ.
     combined.sort(
@@ -29,7 +44,7 @@ export function Comments() {
     );
 
     setFeedbackItems(combined);
-  }, [editContext]);
+  }, [editContext, hideAppliedSuggestions]);
 
   return (
     <div className="flex h-full flex-col">
@@ -44,7 +59,7 @@ export function Comments() {
         />
         <SimpleIconButton
           selected={editContext?.showComments}
-          icon={<MessageCircle size={16} className="p-0.5" />}
+          icon={<Eye size={16} className="p-0.5" />}
           label="Show Comments"
           onClick={() => {
             editContext?.setShowComments((x) => !x);
@@ -66,6 +81,24 @@ export function Comments() {
             editContext?.setShowSuggestedEditsDiff((x) => !x);
           }}
         />
+        <SimpleIconButton
+          selected={hideAppliedSuggestions}
+          icon={
+            hideAppliedSuggestions ? (
+              <CheckCircle2 size={16} className="p-0.5" />
+            ) : (
+              <CheckCircle size={16} className="p-0.5" />
+            )
+          }
+          label={
+            hideAppliedSuggestions
+              ? "Show Applied Suggestions"
+              : "Hide Applied Suggestions"
+          }
+          onClick={() => {
+            setHideAppliedSuggestions((x) => !x);
+          }}
+        />
       </SimpleToolbar>
 
       <div className="flex-1 overflow-auto">

package/src/editor/sidebar/ComponentTree.tsx

@@ -2,7 +2,7 @@
 
 import { useEditContext, useEditContextRef } from "../client/editContext";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { confirmDialog } from "primereact/confirmdialog";
 import { getComponentCommands } from "../commands/componentCommands";
@@ -252,26 +252,29 @@ export function ComponentTree({}) {
     setNodeDictionary(dict);
   }, [page]);
 
-  const handleTreeSelection = (key: string, event: React.MouseEvent) => {
-    let newKeys = [key];
-    if (event.ctrlKey) {
-      if (selectedKeys.includes(key)) {
-        newKeys = selectedKeys.filter((x) => x !== key);
-      } else {
-        newKeys = [...selectedKeys, key];
+  const handleTreeSelection = useCallback(
+    (key: string, event: React.MouseEvent) => {
+      let newKeys = [key];
+      if (event.ctrlKey) {
+        if (selectedKeys.includes(key)) {
+          newKeys = selectedKeys.filter((x) => x !== key);
+        } else {
+          newKeys = [...selectedKeys, key];
+        }
       }
-    }
 
-    const selectedComponentIds = newKeys
-      .filter((key) => nodeDictionary[key])
-      .map((key) => nodeDictionary[key]!.componentId!);
+      const selectedComponentIds = newKeys
+        .filter((key) => nodeDictionary[key])
+        .map((key) => nodeDictionary[key]!.componentId!);
 
-    editContextRef.current?.select(selectedComponentIds);
+      editContextRef.current?.select(selectedComponentIds);
 
-    if (selectedComponentIds.length === 1) {
-      editContextRef.current?.setScrollIntoView(selectedComponentIds[0]);
-    }
-  };
+      if (selectedComponentIds.length === 1) {
+        editContextRef.current?.setScrollIntoView(selectedComponentIds[0]);
+      }
+    },
+    [selectedKeys, nodeDictionary, editContextRef],
+  );
 
   // Handle tree context menu
   const handleTreeContextMenu = (
@@ -333,28 +336,34 @@ export function ComponentTree({}) {
 
   // Convert selected keys for PerfectTree
   const selectedItems = selectedKeys;
+  const handleCollapseItem = useCallback(
+    (key: string) => {
+      // First, get the node we're collapsing
+      const nodeToCollapse = nodeDictionary[key];
 
-  // Handle expanding nodes
-  const handleToggle = (key: string) => {
-    if (expandedKeys.includes(key)) {
-      handleCollapseItem(key);
-    } else {
-      const newExpandedKeys = [...expandedKeys];
-      newExpandedKeys.push(key);
-      setExpandedKeys(newExpandedKeys);
-    }
-  };
+      // Create a new array for expanded keys
+      const newExpandedKeys = [...expandedKeys].filter((x) => x !== key);
 
-  // Handle collapsing nodes
-  const handleCollapseItem = (key: string) => {
-    // First, get the node we're collapsing
-    const nodeToCollapse = nodeDictionary[key];
+      setExpandedKeys(newExpandedKeys);
+    },
+    [expandedKeys, nodeDictionary],
+  );
 
-    // Create a new array for expanded keys
-    const newExpandedKeys = [...expandedKeys].filter((x) => x !== key);
+  // Handle expanding nodes
+  const handleToggle = useCallback(
+    (key: string) => {
+      if (expandedKeys.includes(key)) {
+        handleCollapseItem(key);
+      } else {
+        const newExpandedKeys = [...expandedKeys];
+        newExpandedKeys.push(key);
+        setExpandedKeys(newExpandedKeys);
+      }
+    },
+    [expandedKeys, handleCollapseItem],
+  );
 
-    setExpandedKeys(newExpandedKeys);
-  };
+  // Handle collapsing nodes
 
   const getPlaceholder = (node: CustomTreeNode | null): Placeholder | null => {
     if (!node) return null;
@@ -419,18 +428,19 @@ export function ComponentTree({}) {
 
           // Only create drag object for components with datasourceItem
           if (!component?.datasourceItem) return;
-
-          editContext!.dragStart({
-            type: "component",
-            typeId: component.typeId,
-            templateId: component.datasourceItem?.templateId,
-            name: component.name,
-            component: {
-              id: component.id,
-              language: editContext!.page!.item.language,
-              version: editContext!.page!.item.version,
-            },
-          });
+          setTimeout(() => {
+            editContext!.dragStart({
+              type: "component",
+              typeId: component.typeId,
+              templateId: component.datasourceItem?.templateId,
+              name: component.name,
+              component: {
+                id: component.id,
+                language: editContext!.page!.item.language,
+                version: editContext!.page!.item.version,
+              },
+            });
+          }, 1);
         }}
         onDragEnd={(event) => {
           editContext!.dragEnd();