Handle action gutter buttons click

This commit is contained in:
Silvano Cerza 2025-02-20 18:36:38 +01:00
parent fd7cffffab
commit a0f2439b1f
2 changed files with 80 additions and 20 deletions

View file

@ -11,11 +11,17 @@ interface ActionsGutterProps {
// This is essential to correctly draw the lines between
// the left and right editor
lineHeight: number;
onAcceptLeft: (chunk: DiffChunk) => void;
onAcceptRight: (chunk: DiffChunk) => void;
onReject: (chunk: DiffChunk) => void;
}
const ActionsGutter: React.FC<ActionsGutterProps> = ({
diffChunks,
lineHeight,
onAcceptLeft,
onAcceptRight,
onReject,
}) => {
const [actualWidth, setActualWidth] = React.useState(0);
const containerRef = React.useRef<HTMLDivElement>(null);
@ -55,15 +61,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
<div style={{ display: "flex", flexDirection: "row" }}>
<ButtonCross
tooltipText="Delete lines"
onClick={() => {
console.log("CLICKED");
}}
onClick={() => onReject(chunk)}
/>
<ButtonLeftArrow
tooltipText="Add lines"
onClick={() => {
console.log("CLICKED");
}}
onClick={() => onAcceptLeft(chunk)}
/>
</div>
</foreignObject>
@ -79,15 +81,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
<div style={{ display: "flex", flexDirection: "row" }}>
<ButtonRightArrow
tooltipText="Add lines"
onClick={() => {
console.log("CLICKED");
}}
onClick={() => onAcceptRight(chunk)}
/>
<ButtonCross
tooltipText="Delete lines"
onClick={() => {
console.log("CLICKED");
}}
onClick={() => onReject(chunk)}
/>
</div>
</foreignObject>
@ -109,15 +107,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
>
<ButtonRightArrow
tooltipText="Overwrite right lines"
onClick={() => {
console.log("CLICKED");
}}
onClick={() => onAcceptRight(chunk)}
/>
<ButtonLeftArrow
tooltipText="Overwrite left lines"
onClick={() => {
console.log("CLICKED");
}}
onClick={() => onAcceptLeft(chunk)}
/>
</div>
</foreignObject>

View file

@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";
import { markdown } from "@codemirror/lang-markdown";
import diff from "./diff";
import diff, { DiffChunk } from "./diff";
import { createDiffHighlightPlugin } from "./diff-highlight-plugin";
import EditorPane from "./editor-pane";
import ActionsGutter from "./actions-gutter";
@ -65,7 +65,73 @@ const DiffView: React.FC<DiffViewProps> = ({
/>
</div>
<div style={{ minWidth: "160px", width: "auto" }}>
<ActionsGutter diffChunks={diffs} lineHeight={lineHeight} />
<ActionsGutter
diffChunks={diffs}
lineHeight={lineHeight}
onAcceptLeft={(chunk: DiffChunk) => {
if (chunk.type === "add") {
const oldLines = oldText.split("\n");
oldLines.splice(
chunk.startLeftLine - 1,
0,
...newText
.split("\n")
.slice(chunk.startRightLine - 1, chunk.endRightLine - 1),
);
onOldTextChange(oldLines.join("\n"));
} else if (chunk.type === "modify") {
const oldLines = oldText.split("\n");
oldLines.splice(
chunk.startLeftLine - 1,
chunk.endLeftLine - chunk.startLeftLine,
...newText
.split("\n")
.slice(chunk.startRightLine - 1, chunk.endRightLine - 1),
);
onOldTextChange(oldLines.join("\n"));
}
}}
onAcceptRight={(chunk: DiffChunk) => {
if (chunk.type === "remove") {
const newLines = newText.split("\n");
newLines.splice(
chunk.startRightLine - 1,
0,
...oldText
.split("\n")
.slice(chunk.startLeftLine - 1, chunk.endLeftLine - 1),
);
onNewTextChange(newLines.join("\n"));
} else if (chunk.type === "modify") {
const newLines = newText.split("\n");
newLines.splice(
chunk.startRightLine - 1,
chunk.endRightLine - chunk.startRightLine,
...oldText
.split("\n")
.slice(chunk.startLeftLine - 1, chunk.endLeftLine - 1),
);
onNewTextChange(newLines.join("\n"));
}
}}
onReject={(chunk: DiffChunk) => {
if (chunk.type === "add") {
const newLines = newText.split("\n");
newLines.splice(
chunk.startRightLine - 1,
chunk.endRightLine - chunk.startRightLine,
);
onNewTextChange(newLines.join("\n"));
} else if (chunk.type === "remove") {
const oldLines = oldText.split("\n");
oldLines.splice(
chunk.startLeftLine - 1,
chunk.endLeftLine - chunk.startLeftLine,
);
onOldTextChange(oldLines.join("\n"));
}
}}
/>
</div>
<div style={{ flex: 1, overflow: "hidden" }}>
<EditorPane