@keboola/design 1.0.0

package/src/components/MergeEditor/useMergeDiff.ts

@@ -0,0 +1,573 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { diff3Merge } from 'node-diff3';
+
+import {
+  CHANGE_CLASS,
+  type ChangeClassification,
+  CHUNK_TYPE,
+  type DiffChunk,
+  type MergeConflict,
+} from './constants';
+import {
+  computeDiffChunks,
+  filterHighlightedLines,
+  getChangedLineNumbers,
+  replaceLines,
+} from './helpers';
+
+const DEBOUNCE_MS = 150;
+
+type ConflictPair = {
+  id: string;
+  leftStart: number;
+  leftEnd: number;
+  rightStart: number;
+  rightEnd: number;
+};
+
+type Side = 'left' | 'right';
+
+const rangesOverlap = (s1: number, e1: number, s2: number, e2: number) => s1 <= e2 && e1 >= s2;
+
+const computeSuppressedLines = (
+  dismissedLines: Set<number>,
+  pairs: ConflictPair[],
+  resolvedIds: Set<string>,
+  getRange: (p: ConflictPair) => [number, number],
+): Set<number> => {
+  const lines = new Set(dismissedLines);
+  for (const pair of pairs) {
+    if (resolvedIds.has(pair.id)) {
+      const [start, end] = getRange(pair);
+      for (let i = start; i <= end; i++) lines.add(i);
+    }
+  }
+  return lines;
+};
+
+const filterVisibleConflicts = (
+  conflicts: MergeConflict[],
+  classification: Map<number, ChangeClassification>,
+  dismissedLines: Set<number>,
+  getRange: (c: MergeConflict) => [number, number],
+  findPair: (c: MergeConflict) => ConflictPair | undefined,
+  fullyResolvedPairIds: Set<string>,
+): MergeConflict[] =>
+  conflicts.filter((c) => {
+    const [start, end] = getRange(c);
+    let hasClassifiedLine = false;
+    let allDismissed = true;
+    for (let i = start; i <= end; i++) {
+      if (classification.has(i)) hasClassifiedLine = true;
+      if (!dismissedLines.has(i)) allDismissed = false;
+    }
+    if (!hasClassifiedLine || allDismissed) return false;
+
+    const pair = findPair(c);
+    return !pair || !fullyResolvedPairIds.has(pair.id);
+  });
+
+export const useMergeDiff = (baseText: string, leftText: string, rightText: string) => {
+  const [mergeValue, setMergeValue] = useState(baseText);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [debouncedMergeValue, setDebouncedMergeValue] = useState(mergeValue);
+  const [acceptedPairSides, setAcceptedPairSides] = useState<Map<string, Set<Side>>>(
+    () => new Map(),
+  );
+  const [dismissedLeftLines, setDismissedLeftLines] = useState<Set<number>>(() => new Set());
+  const [dismissedRightLines, setDismissedRightLines] = useState<Set<number>>(() => new Set());
+
+  const reset = useCallback(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+
+    setMergeValue(baseText);
+    setDebouncedMergeValue(baseText);
+    setAcceptedPairSides(new Map());
+    setDismissedLeftLines(new Set());
+    setDismissedRightLines(new Set());
+  }, [baseText]);
+
+  // Reset all state when input texts change (e.g. async data arrives).
+  // useLayoutEffect prevents a one-frame flash of incorrect diff rendering
+  // when mergeValue is still '' but the real texts have arrived.
+  useLayoutEffect(() => {
+    reset();
+  }, [baseText, leftText, rightText]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Clean up debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  const handleMergeChange = useCallback((value: string) => {
+    setMergeValue(value);
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(() => {
+      setDebouncedMergeValue(value);
+    }, DEBOUNCE_MS);
+  }, []);
+
+  // diff(production, mergeResult) — highlights for left pane
+  const leftDiffChunks = useMemo(
+    () => computeDiffChunks(leftText, debouncedMergeValue),
+    [leftText, debouncedMergeValue],
+  );
+
+  // diff(mergeResult, branch) — highlights for right pane
+  const rightDiffChunks = useMemo(
+    () => computeDiffChunks(debouncedMergeValue, rightText),
+    [debouncedMergeValue, rightText],
+  );
+
+  // Recompute conflict positions based on current merge value vs both sides
+  const leftConflicts = useMemo(() => pairChunksIntoConflicts(leftDiffChunks), [leftDiffChunks]);
+
+  const rightConflicts = useMemo(() => pairChunksIntoConflicts(rightDiffChunks), [rightDiffChunks]);
+
+  // Base-vs-side diffs (stable unless source texts change)
+  const leftVsBase = useMemo(() => computeDiffChunks(baseText, leftText), [baseText, leftText]);
+  const rightVsBase = useMemo(() => computeDiffChunks(baseText, rightText), [baseText, rightText]);
+
+  const { leftClassification, rightClassification, conflictPairs } = useMemo(() => {
+    const baseLines = baseText.split('\n');
+    const leftLines = leftText.split('\n');
+    const rightLines = rightText.split('\n');
+
+    const result = diff3Merge(leftLines, baseLines, rightLines);
+
+    const leftConflictLineSet = new Set<number>();
+    const rightConflictLineSet = new Set<number>();
+    const pairs: ConflictPair[] = [];
+
+    for (const block of result) {
+      if ('conflict' in block && block.conflict) {
+        const { a, aIndex, b, bIndex } = block.conflict;
+        for (let i = 0; i < a.length; i++) leftConflictLineSet.add(aIndex + i + 1);
+        for (let i = 0; i < b.length; i++) rightConflictLineSet.add(bIndex + i + 1);
+
+        pairs.push({
+          id: `pair-${aIndex}-${bIndex}`,
+          leftStart: aIndex + 1,
+          leftEnd: aIndex + a.length,
+          rightStart: bIndex + 1,
+          rightEnd: bIndex + b.length,
+        });
+      }
+    }
+
+    const leftChanged = getChangedLineNumbers(leftVsBase, 'new');
+    const rightChanged = getChangedLineNumbers(rightVsBase, 'new');
+
+    const leftMap = new Map<number, ChangeClassification>();
+    for (const line of leftChanged) {
+      leftMap.set(line, leftConflictLineSet.has(line) ? CHANGE_CLASS.CONFLICT : CHANGE_CLASS.SAFE);
+    }
+
+    const rightMap = new Map<number, ChangeClassification>();
+    for (const line of rightChanged) {
+      rightMap.set(
+        line,
+        rightConflictLineSet.has(line) ? CHANGE_CLASS.CONFLICT : CHANGE_CLASS.SAFE,
+      );
+    }
+
+    return {
+      leftClassification: leftMap,
+      rightClassification: rightMap,
+      conflictPairs: pairs,
+    };
+  }, [baseText, leftText, rightText, leftVsBase, rightVsBase]);
+
+  const findPairForLeft = useCallback(
+    (conflict: MergeConflict) =>
+      conflictPairs.find((p) =>
+        rangesOverlap(conflict.oldStartLine, conflict.oldEndLine, p.leftStart, p.leftEnd),
+      ),
+    [conflictPairs],
+  );
+
+  const findPairForRight = useCallback(
+    (conflict: MergeConflict) =>
+      conflictPairs.find((p) =>
+        rangesOverlap(conflict.newStartLine, conflict.newEndLine, p.rightStart, p.rightEnd),
+      ),
+    [conflictPairs],
+  );
+
+  const markSideAccepted = useCallback((pair: ConflictPair | undefined, side: Side) => {
+    if (!pair) return;
+    setAcceptedPairSides((prev) => {
+      const next = new Map(prev);
+      const sides = new Set(prev.get(pair.id) ?? []);
+      sides.add(side);
+      next.set(pair.id, sides);
+      return next;
+    });
+  }, []);
+
+  const isOtherSideAccepted = useCallback(
+    (pair: ConflictPair | undefined, side: Side) => {
+      if (!pair) return false;
+      const otherSide = side === 'left' ? 'right' : 'left';
+      return acceptedPairSides.get(pair.id)?.has(otherSide) ?? false;
+    },
+    [acceptedPairSides],
+  );
+
+  const acceptSide = useCallback(
+    (conflict: MergeConflict, side: Side) => {
+      const findPair = side === 'left' ? findPairForLeft : findPairForRight;
+      const pair = findPair(conflict);
+      const otherAccepted = isOtherSideAccepted(pair, side);
+      const sourceValue = side === 'left' ? conflict.oldValue : conflict.newValue;
+      const targetStart = side === 'left' ? conflict.newStartLine : conflict.oldStartLine;
+      const targetEnd = side === 'left' ? conflict.newEndLine : conflict.oldEndLine;
+
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = null;
+      }
+
+      const mergeTargetEmpty =
+        side === 'left' ? conflict.newValue === '' : conflict.oldValue === '';
+      const newValue = otherAccepted
+        ? replaceLines(mergeValue, targetEnd + 1, targetEnd, sourceValue)
+        : mergeTargetEmpty
+          ? replaceLines(mergeValue, targetStart, targetStart - 1, sourceValue)
+          : replaceLines(mergeValue, targetStart, targetEnd, sourceValue);
+
+      setMergeValue(newValue);
+      setDebouncedMergeValue(newValue);
+      markSideAccepted(pair, side);
+
+      if (!pair) {
+        // Dismiss the source side-pane lines so the change doesn't reappear
+        // if the user later edits the accepted text in the merge pane
+        const setDismissedSide = side === 'left' ? setDismissedLeftLines : setDismissedRightLines;
+        const [sideStart, sideEnd] =
+          side === 'left'
+            ? [conflict.oldStartLine, conflict.oldEndLine]
+            : [conflict.newStartLine, conflict.newEndLine];
+
+        setDismissedSide((prev) => {
+          const next = new Set(prev);
+          for (let i = sideStart; i <= sideEnd; i++) next.add(i);
+          return next;
+        });
+      }
+    },
+    [mergeValue, findPairForLeft, findPairForRight, isOtherSideAccepted, markSideAccepted],
+  );
+
+  const acceptLeft = useCallback(
+    (conflict: MergeConflict) => acceptSide(conflict, 'left'),
+    [acceptSide],
+  );
+
+  const acceptRight = useCallback(
+    (conflict: MergeConflict) => acceptSide(conflict, 'right'),
+    [acceptSide],
+  );
+
+  const dismissSide = useCallback((conflict: MergeConflict, side: Side) => {
+    const setDismissed = side === 'left' ? setDismissedLeftLines : setDismissedRightLines;
+    const [sideStart, sideEnd] =
+      side === 'left'
+        ? [conflict.oldStartLine, conflict.oldEndLine]
+        : [conflict.newStartLine, conflict.newEndLine];
+
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      for (let i = sideStart; i <= sideEnd; i++) next.add(i);
+      return next;
+    });
+  }, []);
+
+  const dismissLeft = useCallback(
+    (conflict: MergeConflict) => dismissSide(conflict, 'left'),
+    [dismissSide],
+  );
+
+  const dismissRight = useCallback(
+    (conflict: MergeConflict) => dismissSide(conflict, 'right'),
+    [dismissSide],
+  );
+
+  const fullyResolvedPairIds = useMemo(() => {
+    const ids = new Set<string>();
+    for (const pair of conflictPairs) {
+      const leftAccepted = acceptedPairSides.get(pair.id)?.has('left') ?? false;
+      const rightAccepted = acceptedPairSides.get(pair.id)?.has('right') ?? false;
+
+      let leftDismissed = true;
+      for (let i = pair.leftStart; i <= pair.leftEnd; i++) {
+        if (!dismissedLeftLines.has(i)) {
+          leftDismissed = false;
+          break;
+        }
+      }
+
+      let rightDismissed = true;
+      for (let i = pair.rightStart; i <= pair.rightEnd; i++) {
+        if (!dismissedRightLines.has(i)) {
+          rightDismissed = false;
+          break;
+        }
+      }
+
+      if ((leftAccepted || leftDismissed) && (rightAccepted || rightDismissed)) {
+        ids.add(pair.id);
+      }
+    }
+    return ids;
+  }, [conflictPairs, acceptedPairSides, dismissedLeftLines, dismissedRightLines]);
+
+  const visibleLeftConflicts = useMemo(
+    () =>
+      filterVisibleConflicts(
+        leftConflicts,
+        leftClassification,
+        dismissedLeftLines,
+        (c) => [c.oldStartLine, c.oldEndLine],
+        findPairForLeft,
+        fullyResolvedPairIds,
+      ),
+    [leftConflicts, leftClassification, dismissedLeftLines, findPairForLeft, fullyResolvedPairIds],
+  );
+
+  const visibleRightConflicts = useMemo(
+    () =>
+      filterVisibleConflicts(
+        rightConflicts,
+        rightClassification,
+        dismissedRightLines,
+        (c) => [c.newStartLine, c.newEndLine],
+        findPairForRight,
+        fullyResolvedPairIds,
+      ),
+    [
+      rightConflicts,
+      rightClassification,
+      dismissedRightLines,
+      findPairForRight,
+      fullyResolvedPairIds,
+    ],
+  );
+
+  const suppressedLeftLines = useMemo(
+    () =>
+      computeSuppressedLines(dismissedLeftLines, conflictPairs, fullyResolvedPairIds, (p) => [
+        p.leftStart,
+        p.leftEnd,
+      ]),
+    [conflictPairs, fullyResolvedPairIds, dismissedLeftLines],
+  );
+
+  const suppressedRightLines = useMemo(
+    () =>
+      computeSuppressedLines(dismissedRightLines, conflictPairs, fullyResolvedPairIds, (p) => [
+        p.rightStart,
+        p.rightEnd,
+      ]),
+    [conflictPairs, fullyResolvedPairIds, dismissedRightLines],
+  );
+
+  const { mergeHighlightedLines, mergeClassification } = useMemo(() => {
+    const mergeLeftLines = getChangedLineNumbers(leftDiffChunks, 'new');
+    const mergeRightLines = getChangedLineNumbers(rightDiffChunks, 'old');
+
+    const mergeLineToPair = new Map<number, string>();
+
+    for (const conflict of leftConflicts) {
+      const pair = findPairForLeft(conflict);
+      if (pair) {
+        for (let i = conflict.newStartLine; i <= conflict.newEndLine; i++) {
+          mergeLineToPair.set(i, pair.id);
+        }
+      }
+    }
+
+    for (const conflict of rightConflicts) {
+      const pair = findPairForRight(conflict);
+      if (pair) {
+        for (let i = conflict.oldStartLine; i <= conflict.oldEndLine; i++) {
+          mergeLineToPair.set(i, pair.id);
+        }
+      }
+    }
+
+    // Derive suppressed merge lines from side-pane dismissals.
+    // Side texts are static, so their line numbers never go stale.
+    const suppressedMergeLines = new Set<number>();
+
+    for (const conflict of leftConflicts) {
+      if (findPairForLeft(conflict)) continue;
+      if (conflict.oldStartLine > conflict.oldEndLine) continue;
+      let allDismissed = true;
+      for (let i = conflict.oldStartLine; i <= conflict.oldEndLine; i++) {
+        if (!dismissedLeftLines.has(i)) {
+          allDismissed = false;
+          break;
+        }
+      }
+      if (allDismissed) {
+        for (let i = conflict.newStartLine; i <= conflict.newEndLine; i++) {
+          suppressedMergeLines.add(i);
+        }
+      }
+    }
+
+    for (const conflict of rightConflicts) {
+      if (findPairForRight(conflict)) continue;
+      if (conflict.newStartLine > conflict.newEndLine) continue;
+      let allDismissed = true;
+      for (let i = conflict.newStartLine; i <= conflict.newEndLine; i++) {
+        if (!dismissedRightLines.has(i)) {
+          allDismissed = false;
+          break;
+        }
+      }
+      if (allDismissed) {
+        for (let i = conflict.oldStartLine; i <= conflict.oldEndLine; i++) {
+          suppressedMergeLines.add(i);
+        }
+      }
+    }
+
+    const allMergeLines = new Set<number>();
+    for (const line of mergeLeftLines) allMergeLines.add(line);
+    for (const line of mergeRightLines) allMergeLines.add(line);
+
+    const highlighted = new Set<number>();
+    const classification = new Map<number, ChangeClassification>();
+
+    for (const line of allMergeLines) {
+      if (suppressedMergeLines.has(line)) continue;
+
+      const pairId = mergeLineToPair.get(line);
+      if (pairId && fullyResolvedPairIds.has(pairId)) continue;
+
+      highlighted.add(line);
+      classification.set(line, pairId ? CHANGE_CLASS.CONFLICT : CHANGE_CLASS.SAFE);
+    }
+
+    return { mergeHighlightedLines: highlighted, mergeClassification: classification };
+  }, [
+    leftDiffChunks,
+    rightDiffChunks,
+    leftConflicts,
+    rightConflicts,
+    findPairForLeft,
+    findPairForRight,
+    fullyResolvedPairIds,
+    dismissedLeftLines,
+    dismissedRightLines,
+  ]);
+
+  const leftHighlightedLines = useMemo(
+    () => filterHighlightedLines(leftDiffChunks, 'old', leftClassification, suppressedLeftLines),
+    [leftDiffChunks, leftClassification, suppressedLeftLines],
+  );
+
+  const rightHighlightedLines = useMemo(
+    () => filterHighlightedLines(rightDiffChunks, 'new', rightClassification, suppressedRightLines),
+    [rightDiffChunks, rightClassification, suppressedRightLines],
+  );
+
+  const remainingSafeChanges = useMemo(() => {
+    const leftSafe = visibleLeftConflicts.filter((c) => !findPairForLeft(c)).length;
+    const rightSafe = visibleRightConflicts.filter((c) => !findPairForRight(c)).length;
+    return leftSafe + rightSafe;
+  }, [visibleLeftConflicts, visibleRightConflicts, findPairForLeft, findPairForRight]);
+
+  return {
+    mergeValue,
+    handleMergeChange,
+    leftConflicts: visibleLeftConflicts,
+    rightConflicts: visibleRightConflicts,
+    leftHighlightedLines,
+    rightHighlightedLines,
+    leftClassification,
+    rightClassification,
+    mergeHighlightedLines,
+    mergeClassification,
+    acceptLeft,
+    acceptRight,
+    dismissLeft,
+    dismissRight,
+    totalConflicts: conflictPairs.length,
+    resolvedConflicts: fullyResolvedPairIds.size,
+    remainingSafeChanges,
+    isDirty: mergeValue !== baseText || dismissedLeftLines.size > 0 || dismissedRightLines.size > 0,
+    reset,
+  };
+};
+
+/**
+ * Pairs adjacent removed+added chunks into MergeConflicts.
+ * A standalone REMOVED or ADDED chunk becomes a conflict with
+ * the other side empty.
+ */
+const pairChunksIntoConflicts = (chunks: DiffChunk[]): MergeConflict[] => {
+  const conflicts: MergeConflict[] = [];
+  let i = 0;
+
+  while (i < chunks.length) {
+    const chunk = chunks[i]!;
+
+    if (chunk.type === CHUNK_TYPE.UNCHANGED) {
+      i++;
+      continue;
+    }
+
+    if (chunk.type === CHUNK_TYPE.REMOVED) {
+      const next = chunks[i + 1];
+
+      if (next?.type === CHUNK_TYPE.ADDED) {
+        conflicts.push({
+          id: `${chunk.oldStart}-${next.newStart}`,
+          oldValue: chunk.value,
+          oldStartLine: chunk.oldStart,
+          oldEndLine: chunk.oldEnd,
+          newValue: next.value,
+          newStartLine: next.newStart,
+          newEndLine: next.newEnd,
+        });
+        i += 2;
+      } else {
+        conflicts.push({
+          id: `${chunk.oldStart}-del`,
+          oldValue: chunk.value,
+          oldStartLine: chunk.oldStart,
+          oldEndLine: chunk.oldEnd,
+          newValue: '',
+          newStartLine: chunk.newStart,
+          newEndLine: chunk.newStart,
+        });
+        i++;
+      }
+    } else {
+      conflicts.push({
+        id: `add-${chunk.newStart}`,
+        oldValue: '',
+        oldStartLine: chunk.oldStart,
+        oldEndLine: chunk.oldStart,
+        newValue: chunk.value,
+        newStartLine: chunk.newStart,
+        newEndLine: chunk.newEnd,
+      });
+      i++;
+    }
+  }
+
+  return conflicts;
+};

package/src/components/MergeEditor/useScrollSync.ts

@@ -0,0 +1,79 @@
+import { useCallback, useRef } from 'react';
+
+export const useScrollSync = () => {
+  const scrollersRef = useRef<(HTMLElement | null)[]>([]);
+  const followersRef = useRef<Map<string, { paneIndex: number; el: HTMLElement }>>(new Map());
+  const isSyncingRef = useRef(false);
+  const scrollerCallbacksRef = useRef<Map<number, (el: HTMLElement | null) => void>>(new Map());
+  const followerCallbacksRef = useRef<Map<string, (el: HTMLElement | null) => void>>(new Map());
+
+  const updateFollowers = useCallback(() => {
+    for (const [, { paneIndex, el }] of followersRef.current) {
+      const scroller = scrollersRef.current[paneIndex];
+      if (!scroller) continue;
+      el.style.transform = `translateY(-${scroller.scrollTop}px)`;
+    }
+  }, []);
+
+  const handleScroll = useCallback(
+    (e: Event) => {
+      if (isSyncingRef.current) return;
+      isSyncingRef.current = true;
+
+      // Px-aligned sync. All panes share LINE_HEIGHT_PX, so matching scrollTop is the same
+      // as matching the line at the top of the viewport. Previous ratio-based sync drifted
+      // badly when pane heights differed (e.g. 50 lines vs 500 — half-scrolling left snapped
+      // right to its midpoint, not to the equivalent line). Clamp to each target's max so
+      // the source can scroll past where shorter panes bottom out without errors.
+      const sourceScrollTop = (e.target as HTMLElement).scrollTop;
+
+      for (const scroller of scrollersRef.current) {
+        if (!scroller || scroller === e.target) continue;
+        const targetMax = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+        scroller.scrollTop = Math.min(sourceScrollTop, targetMax);
+      }
+
+      updateFollowers();
+      isSyncingRef.current = false;
+    },
+    [updateFollowers],
+  );
+
+  const registerScroller = useCallback(
+    (index: number) => {
+      const existing = scrollerCallbacksRef.current.get(index);
+      if (existing) return existing;
+
+      const callback = (el: HTMLElement | null) => {
+        const prev = scrollersRef.current[index];
+        if (prev === el) return;
+
+        prev?.removeEventListener('scroll', handleScroll);
+        scrollersRef.current[index] = el;
+        el?.addEventListener('scroll', handleScroll, { passive: true });
+      };
+
+      scrollerCallbacksRef.current.set(index, callback);
+      return callback;
+    },
+    [handleScroll],
+  );
+
+  const registerFollower = useCallback((paneIndex: number, key: string) => {
+    const existing = followerCallbacksRef.current.get(key);
+    if (existing) return existing;
+
+    const callback = (el: HTMLElement | null) => {
+      if (el) {
+        followersRef.current.set(key, { paneIndex, el });
+      } else {
+        followersRef.current.delete(key);
+      }
+    };
+
+    followerCallbacksRef.current.set(key, callback);
+    return callback;
+  }, []);
+
+  return { registerScroller, registerFollower };
+};