ide-assi 0.435.0 → 0.436.0

package/dist/bundle.cjs.js

@@ -234970,7 +234970,7 @@ class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()), // 초기 언어 설정
-					EditorState.readOnly.of(true),
+					//EditorState.readOnly.of(true),
 					tobeDiffDecorations, // TOBE Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -235065,9 +235065,17 @@ class IdeDiff extends HTMLElement {
 		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
 		// const changedLineDeco = Decoration.line({ class: "cm-changed-line-bg" }); // 필요하다면
 
+		// ⭐️ IdeDiff 인스턴스에 대한 참조를 위젯에 넘겨주기 위해 임시 변수 사용
+		// 실제로는 Closure나 Bound method로 넘겨줄 수 있음
+		const currentInstance = this;
+
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
+			// ⭐️ 해당 diff 청크의 시작 오프셋을 저장 (버튼 위젯 위치 결정용)
+			const currentAsisOffset = asisCursor;
+			const currentTobeOffset = tobeCursor;
+
 			switch (op) {
 				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT:
 					console.log(diffMatchPatchExports.diff_match_patch.DIFF_INSERT, text);
@@ -235086,6 +235094,22 @@ class IdeDiff extends HTMLElement {
 						}
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
+
+					tobeLineBuilder.add(
+						currentTobeOffset, // 이 Diff 청크의 시작 오프셋
+						currentTobeOffset,
+						Decoration.widget({
+							widget: // #applyDiffDecorations 내 MergeButtonWidget 생성 시
+								new MergeButtonWidget(
+									true, // ASIS 쪽 버튼 (적용)
+									text,  // 적용할 텍스트
+									currentInstance.#tobeEditorView, // 적용 대상 에디터
+									{ from: currentAsisOffset, to: currentAsisOffset + text.length }, // ⭐️ diffRange 전달
+									currentInstance // ⭐️ IdeDiff 인스턴스 전달
+								),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
 					break;
 
 				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE:
@@ -235097,6 +235121,21 @@ class IdeDiff extends HTMLElement {
 						}
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
+
+					// ⭐️ ASIS 에디터에서 삭제된 청크의 경우, ASIS 쪽에 적용 버튼 (TOBE로 적용) 추가
+					asisLineBuilder.add(
+						currentAsisOffset, // 이 Diff 청크의 시작 오프셋
+						currentAsisOffset,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								true, // ASIS 쪽 버튼 (적용)
+								text,  // 적용할 텍스트 (이 경우 ASIS에서 가져올 내용)
+								currentInstance.#tobeEditorView // 적용 대상은 TOBE 에디터
+							),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
+
 					break;
 
 				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL:
@@ -235116,6 +235155,21 @@ class IdeDiff extends HTMLElement {
 		};
 	};
 
+	// IdeDiff 클래스 내부에 변경 후 Diff를 다시 계산하는 메서드 추가
+	recalculateDiff = () => {
+		const asisDoc = this.#asisEditorView.state.doc.toString();
+		const tobeDoc = this.#tobeEditorView.state.doc.toString();
+
+		const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(asisDoc, tobeDoc);
+
+		this.#asisEditorView.dispatch({
+			effects: [setAsisDecorationsEffect.of(asisDecorations)]
+		});
+		this.#tobeEditorView.dispatch({
+			effects: [setTobeDecorationsEffect.of(tobeDecorations)]
+		});
+	};
+
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -235164,6 +235218,71 @@ class IdeDiff extends HTMLElement {
 	};
 }
 
+// IdeDiff 클래스 외부 (파일 상단 or 하단)에 추가
+class MergeButtonWidget extends WidgetType {
+	constructor(isAsis, textToApply, targetEditorView, diffRange, hostComponent) {
+		super();
+		this.isAsis = isAsis; // ASIS 쪽 버튼인지 (true) TOBE 쪽 버튼인지 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰
+		this.diffRange = diffRange; // ⭐️ 추가된 속성
+		this.hostComponent = hostComponent; // ⭐️ IdeDiff 인스턴스 참조
+	}
+
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
+	eq(other) { return false; }
+
+	// 위젯의 DOM 요소를 생성합니다.
+	toDOM(view) {
+		const button = document.createElement("button");
+		button.className = `cm-merge-button ${this.isAsis ? 'accept' : 'revert'}`;
+		button.textContent = this.isAsis ? "→ 적용" : "← 되돌리기"; // 버튼 텍스트
+
+		// 클릭 이벤트 핸들러
+		button.addEventListener("click", () => {
+			// 이 로직은 나중에 구현할 `applyChanges` 메서드를 호출할 것입니다.
+			// 지금은 콘솔에 로그만 남깁니다.
+			console.log(`버튼 클릭: ${this.isAsis ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+
+			// 실제 변경 로직 (아래 applyChanges 메서드 구현 후 주석 해제)
+			this.applyChanges(this.textToApply, this.targetEditorView);
+		});
+
+		const container = document.createElement("div");
+		container.className = "cm-merge-button-container";
+		container.appendChild(button);
+		return container;
+	}
+
+	// 실제 변경 적용 로직
+	applyChanges(text, editorView) {
+		if (!editorView || !this.diffRange) {
+			console.error("Target editor view or diffRange is undefined.");
+			return;
+		}
+
+		// ⭐️ 해당 오프셋 범위의 내용을 교체 (삽입 또는 삭제)
+		editorView.dispatch({
+			changes: {
+				from: this.diffRange.from,
+				to: this.diffRange.to, // 삭제될 범위
+				insert: text // 삽입될 내용
+			}
+		});
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트해야 합니다.
+		// this.hostComponent.recalculateDiff(); 와 같은 메서드를 호출해야 함.
+		// 이 부분은 IdeDiff 클래스 내에서 구현해야 합니다.
+		// 일단은 콘솔 로그와 함께 작동하는지 확인합니다.
+		console.log("Changes applied and diff recalculation needed!");
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트합니다.
+		this.hostComponent.recalculateDiff(); // ⭐️ hostComponent를 통해 메서드 호출
+	}
+
+
+}
+
 customElements.define("ide-diff", IdeDiff);
 
 //import "./components/ideAssi.js";

package/dist/bundle.esm.js

@@ -234966,7 +234966,7 @@ class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()), // 초기 언어 설정
-					EditorState.readOnly.of(true),
+					//EditorState.readOnly.of(true),
 					tobeDiffDecorations, // TOBE Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -235061,9 +235061,17 @@ class IdeDiff extends HTMLElement {
 		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
 		// const changedLineDeco = Decoration.line({ class: "cm-changed-line-bg" }); // 필요하다면
 
+		// ⭐️ IdeDiff 인스턴스에 대한 참조를 위젯에 넘겨주기 위해 임시 변수 사용
+		// 실제로는 Closure나 Bound method로 넘겨줄 수 있음
+		const currentInstance = this;
+
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
+			// ⭐️ 해당 diff 청크의 시작 오프셋을 저장 (버튼 위젯 위치 결정용)
+			const currentAsisOffset = asisCursor;
+			const currentTobeOffset = tobeCursor;
+
 			switch (op) {
 				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT:
 					console.log(diffMatchPatchExports.diff_match_patch.DIFF_INSERT, text);
@@ -235082,6 +235090,22 @@ class IdeDiff extends HTMLElement {
 						}
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
+
+					tobeLineBuilder.add(
+						currentTobeOffset, // 이 Diff 청크의 시작 오프셋
+						currentTobeOffset,
+						Decoration.widget({
+							widget: // #applyDiffDecorations 내 MergeButtonWidget 생성 시
+								new MergeButtonWidget(
+									true, // ASIS 쪽 버튼 (적용)
+									text,  // 적용할 텍스트
+									currentInstance.#tobeEditorView, // 적용 대상 에디터
+									{ from: currentAsisOffset, to: currentAsisOffset + text.length }, // ⭐️ diffRange 전달
+									currentInstance // ⭐️ IdeDiff 인스턴스 전달
+								),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
 					break;
 
 				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE:
@@ -235093,6 +235117,21 @@ class IdeDiff extends HTMLElement {
 						}
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
+
+					// ⭐️ ASIS 에디터에서 삭제된 청크의 경우, ASIS 쪽에 적용 버튼 (TOBE로 적용) 추가
+					asisLineBuilder.add(
+						currentAsisOffset, // 이 Diff 청크의 시작 오프셋
+						currentAsisOffset,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								true, // ASIS 쪽 버튼 (적용)
+								text,  // 적용할 텍스트 (이 경우 ASIS에서 가져올 내용)
+								currentInstance.#tobeEditorView // 적용 대상은 TOBE 에디터
+							),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
+
 					break;
 
 				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL:
@@ -235112,6 +235151,21 @@ class IdeDiff extends HTMLElement {
 		};
 	};
 
+	// IdeDiff 클래스 내부에 변경 후 Diff를 다시 계산하는 메서드 추가
+	recalculateDiff = () => {
+		const asisDoc = this.#asisEditorView.state.doc.toString();
+		const tobeDoc = this.#tobeEditorView.state.doc.toString();
+
+		const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(asisDoc, tobeDoc);
+
+		this.#asisEditorView.dispatch({
+			effects: [setAsisDecorationsEffect.of(asisDecorations)]
+		});
+		this.#tobeEditorView.dispatch({
+			effects: [setTobeDecorationsEffect.of(tobeDecorations)]
+		});
+	};
+
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -235160,6 +235214,71 @@ class IdeDiff extends HTMLElement {
 	};
 }
 
+// IdeDiff 클래스 외부 (파일 상단 or 하단)에 추가
+class MergeButtonWidget extends WidgetType {
+	constructor(isAsis, textToApply, targetEditorView, diffRange, hostComponent) {
+		super();
+		this.isAsis = isAsis; // ASIS 쪽 버튼인지 (true) TOBE 쪽 버튼인지 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰
+		this.diffRange = diffRange; // ⭐️ 추가된 속성
+		this.hostComponent = hostComponent; // ⭐️ IdeDiff 인스턴스 참조
+	}
+
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
+	eq(other) { return false; }
+
+	// 위젯의 DOM 요소를 생성합니다.
+	toDOM(view) {
+		const button = document.createElement("button");
+		button.className = `cm-merge-button ${this.isAsis ? 'accept' : 'revert'}`;
+		button.textContent = this.isAsis ? "→ 적용" : "← 되돌리기"; // 버튼 텍스트
+
+		// 클릭 이벤트 핸들러
+		button.addEventListener("click", () => {
+			// 이 로직은 나중에 구현할 `applyChanges` 메서드를 호출할 것입니다.
+			// 지금은 콘솔에 로그만 남깁니다.
+			console.log(`버튼 클릭: ${this.isAsis ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+
+			// 실제 변경 로직 (아래 applyChanges 메서드 구현 후 주석 해제)
+			this.applyChanges(this.textToApply, this.targetEditorView);
+		});
+
+		const container = document.createElement("div");
+		container.className = "cm-merge-button-container";
+		container.appendChild(button);
+		return container;
+	}
+
+	// 실제 변경 적용 로직
+	applyChanges(text, editorView) {
+		if (!editorView || !this.diffRange) {
+			console.error("Target editor view or diffRange is undefined.");
+			return;
+		}
+
+		// ⭐️ 해당 오프셋 범위의 내용을 교체 (삽입 또는 삭제)
+		editorView.dispatch({
+			changes: {
+				from: this.diffRange.from,
+				to: this.diffRange.to, // 삭제될 범위
+				insert: text // 삽입될 내용
+			}
+		});
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트해야 합니다.
+		// this.hostComponent.recalculateDiff(); 와 같은 메서드를 호출해야 함.
+		// 이 부분은 IdeDiff 클래스 내에서 구현해야 합니다.
+		// 일단은 콘솔 로그와 함께 작동하는지 확인합니다.
+		console.log("Changes applied and diff recalculation needed!");
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트합니다.
+		this.hostComponent.recalculateDiff(); // ⭐️ hostComponent를 통해 메서드 호출
+	}
+
+
+}
+
 customElements.define("ide-diff", IdeDiff);
 
 //import "./components/ideAssi.js";

package/dist/components/ideDiff.js

@@ -4,7 +4,7 @@ import ninegrid from "ninegrid2";
 import {
 	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
 	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
-	Decoration
+	Decoration, WidgetType
 } from "@codemirror/view";
 import {
 	EditorState, Compartment, StateField,
@@ -178,7 +178,7 @@ export class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()), // 초기 언어 설정
-					EditorState.readOnly.of(true),
+					//EditorState.readOnly.of(true),
 					tobeDiffDecorations, // TOBE Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -273,9 +273,17 @@ export class IdeDiff extends HTMLElement {
 		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
 		// const changedLineDeco = Decoration.line({ class: "cm-changed-line-bg" }); // 필요하다면
 
+		// ⭐️ IdeDiff 인스턴스에 대한 참조를 위젯에 넘겨주기 위해 임시 변수 사용
+		// 실제로는 Closure나 Bound method로 넘겨줄 수 있음
+		const currentInstance = this;
+
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
+			// ⭐️ 해당 diff 청크의 시작 오프셋을 저장 (버튼 위젯 위치 결정용)
+			const currentAsisOffset = asisCursor;
+			const currentTobeOffset = tobeCursor;
+
 			switch (op) {
 				case diff_match_patch.DIFF_INSERT:
 					console.log(diff_match_patch.DIFF_INSERT, text);
@@ -294,6 +302,22 @@ export class IdeDiff extends HTMLElement {
 						}
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
+
+					tobeLineBuilder.add(
+						currentTobeOffset, // 이 Diff 청크의 시작 오프셋
+						currentTobeOffset,
+						Decoration.widget({
+							widget: // #applyDiffDecorations 내 MergeButtonWidget 생성 시
+								new MergeButtonWidget(
+									true, // ASIS 쪽 버튼 (적용)
+									text,  // 적용할 텍스트
+									currentInstance.#tobeEditorView, // 적용 대상 에디터
+									{ from: currentAsisOffset, to: currentAsisOffset + text.length }, // ⭐️ diffRange 전달
+									currentInstance // ⭐️ IdeDiff 인스턴스 전달
+								),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
 					break;
 
 				case diff_match_patch.DIFF_DELETE:
@@ -305,6 +329,21 @@ export class IdeDiff extends HTMLElement {
 						}
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
+
+					// ⭐️ ASIS 에디터에서 삭제된 청크의 경우, ASIS 쪽에 적용 버튼 (TOBE로 적용) 추가
+					asisLineBuilder.add(
+						currentAsisOffset, // 이 Diff 청크의 시작 오프셋
+						currentAsisOffset,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								true, // ASIS 쪽 버튼 (적용)
+								text,  // 적용할 텍스트 (이 경우 ASIS에서 가져올 내용)
+								currentInstance.#tobeEditorView // 적용 대상은 TOBE 에디터
+							),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
+
 					break;
 
 				case diff_match_patch.DIFF_EQUAL:
@@ -324,6 +363,21 @@ export class IdeDiff extends HTMLElement {
 		};
 	};
 
+	// IdeDiff 클래스 내부에 변경 후 Diff를 다시 계산하는 메서드 추가
+	recalculateDiff = () => {
+		const asisDoc = this.#asisEditorView.state.doc.toString();
+		const tobeDoc = this.#tobeEditorView.state.doc.toString();
+
+		const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(asisDoc, tobeDoc);
+
+		this.#asisEditorView.dispatch({
+			effects: [setAsisDecorationsEffect.of(asisDecorations)]
+		});
+		this.#tobeEditorView.dispatch({
+			effects: [setTobeDecorationsEffect.of(tobeDecorations)]
+		});
+	};
+
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -372,4 +426,69 @@ export class IdeDiff extends HTMLElement {
 	};
 }
 
+// IdeDiff 클래스 외부 (파일 상단 or 하단)에 추가
+class MergeButtonWidget extends WidgetType {
+	constructor(isAsis, textToApply, targetEditorView, diffRange, hostComponent) {
+		super();
+		this.isAsis = isAsis; // ASIS 쪽 버튼인지 (true) TOBE 쪽 버튼인지 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰
+		this.diffRange = diffRange; // ⭐️ 추가된 속성
+		this.hostComponent = hostComponent; // ⭐️ IdeDiff 인스턴스 참조
+	}
+
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
+	eq(other) { return false; }
+
+	// 위젯의 DOM 요소를 생성합니다.
+	toDOM(view) {
+		const button = document.createElement("button");
+		button.className = `cm-merge-button ${this.isAsis ? 'accept' : 'revert'}`;
+		button.textContent = this.isAsis ? "→ 적용" : "← 되돌리기"; // 버튼 텍스트
+
+		// 클릭 이벤트 핸들러
+		button.addEventListener("click", () => {
+			// 이 로직은 나중에 구현할 `applyChanges` 메서드를 호출할 것입니다.
+			// 지금은 콘솔에 로그만 남깁니다.
+			console.log(`버튼 클릭: ${this.isAsis ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+
+			// 실제 변경 로직 (아래 applyChanges 메서드 구현 후 주석 해제)
+			this.applyChanges(this.textToApply, this.targetEditorView);
+		});
+
+		const container = document.createElement("div");
+		container.className = "cm-merge-button-container";
+		container.appendChild(button);
+		return container;
+	}
+
+	// 실제 변경 적용 로직
+	applyChanges(text, editorView) {
+		if (!editorView || !this.diffRange) {
+			console.error("Target editor view or diffRange is undefined.");
+			return;
+		}
+
+		// ⭐️ 해당 오프셋 범위의 내용을 교체 (삽입 또는 삭제)
+		editorView.dispatch({
+			changes: {
+				from: this.diffRange.from,
+				to: this.diffRange.to, // 삭제될 범위
+				insert: text // 삽입될 내용
+			}
+		});
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트해야 합니다.
+		// this.hostComponent.recalculateDiff(); 와 같은 메서드를 호출해야 함.
+		// 이 부분은 IdeDiff 클래스 내에서 구현해야 합니다.
+		// 일단은 콘솔 로그와 함께 작동하는지 확인합니다.
+		console.log("Changes applied and diff recalculation needed!");
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트합니다.
+		this.hostComponent.recalculateDiff(); // ⭐️ hostComponent를 통해 메서드 호출
+	}
+
+
+}
+
 customElements.define("ide-diff", IdeDiff);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.435.0",
+  "version": "0.436.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -4,7 +4,7 @@ import ninegrid from "ninegrid2";
 import {
 	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
 	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
-	Decoration
+	Decoration, WidgetType
 } from "@codemirror/view";
 import {
 	EditorState, Compartment, StateField,
@@ -178,7 +178,7 @@ export class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()), // 초기 언어 설정
-					EditorState.readOnly.of(true),
+					//EditorState.readOnly.of(true),
 					tobeDiffDecorations, // TOBE Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -273,9 +273,17 @@ export class IdeDiff extends HTMLElement {
 		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
 		// const changedLineDeco = Decoration.line({ class: "cm-changed-line-bg" }); // 필요하다면
 
+		// ⭐️ IdeDiff 인스턴스에 대한 참조를 위젯에 넘겨주기 위해 임시 변수 사용
+		// 실제로는 Closure나 Bound method로 넘겨줄 수 있음
+		const currentInstance = this;
+
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
+			// ⭐️ 해당 diff 청크의 시작 오프셋을 저장 (버튼 위젯 위치 결정용)
+			const currentAsisOffset = asisCursor;
+			const currentTobeOffset = tobeCursor;
+
 			switch (op) {
 				case diff_match_patch.DIFF_INSERT:
 					console.log(diff_match_patch.DIFF_INSERT, text);
@@ -294,6 +302,22 @@ export class IdeDiff extends HTMLElement {
 						}
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
+
+					tobeLineBuilder.add(
+						currentTobeOffset, // 이 Diff 청크의 시작 오프셋
+						currentTobeOffset,
+						Decoration.widget({
+							widget: // #applyDiffDecorations 내 MergeButtonWidget 생성 시
+								new MergeButtonWidget(
+									true, // ASIS 쪽 버튼 (적용)
+									text,  // 적용할 텍스트
+									currentInstance.#tobeEditorView, // 적용 대상 에디터
+									{ from: currentAsisOffset, to: currentAsisOffset + text.length }, // ⭐️ diffRange 전달
+									currentInstance // ⭐️ IdeDiff 인스턴스 전달
+								),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
 					break;
 
 				case diff_match_patch.DIFF_DELETE:
@@ -305,6 +329,21 @@ export class IdeDiff extends HTMLElement {
 						}
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
+
+					// ⭐️ ASIS 에디터에서 삭제된 청크의 경우, ASIS 쪽에 적용 버튼 (TOBE로 적용) 추가
+					asisLineBuilder.add(
+						currentAsisOffset, // 이 Diff 청크의 시작 오프셋
+						currentAsisOffset,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								true, // ASIS 쪽 버튼 (적용)
+								text,  // 적용할 텍스트 (이 경우 ASIS에서 가져올 내용)
+								currentInstance.#tobeEditorView // 적용 대상은 TOBE 에디터
+							),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
+
 					break;
 
 				case diff_match_patch.DIFF_EQUAL:
@@ -324,6 +363,21 @@ export class IdeDiff extends HTMLElement {
 		};
 	};
 
+	// IdeDiff 클래스 내부에 변경 후 Diff를 다시 계산하는 메서드 추가
+	recalculateDiff = () => {
+		const asisDoc = this.#asisEditorView.state.doc.toString();
+		const tobeDoc = this.#tobeEditorView.state.doc.toString();
+
+		const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(asisDoc, tobeDoc);
+
+		this.#asisEditorView.dispatch({
+			effects: [setAsisDecorationsEffect.of(asisDecorations)]
+		});
+		this.#tobeEditorView.dispatch({
+			effects: [setTobeDecorationsEffect.of(tobeDecorations)]
+		});
+	};
+
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -372,4 +426,69 @@ export class IdeDiff extends HTMLElement {
 	};
 }
 
+// IdeDiff 클래스 외부 (파일 상단 or 하단)에 추가
+class MergeButtonWidget extends WidgetType {
+	constructor(isAsis, textToApply, targetEditorView, diffRange, hostComponent) {
+		super();
+		this.isAsis = isAsis; // ASIS 쪽 버튼인지 (true) TOBE 쪽 버튼인지 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰
+		this.diffRange = diffRange; // ⭐️ 추가된 속성
+		this.hostComponent = hostComponent; // ⭐️ IdeDiff 인스턴스 참조
+	}
+
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
+	eq(other) { return false; }
+
+	// 위젯의 DOM 요소를 생성합니다.
+	toDOM(view) {
+		const button = document.createElement("button");
+		button.className = `cm-merge-button ${this.isAsis ? 'accept' : 'revert'}`;
+		button.textContent = this.isAsis ? "→ 적용" : "← 되돌리기"; // 버튼 텍스트
+
+		// 클릭 이벤트 핸들러
+		button.addEventListener("click", () => {
+			// 이 로직은 나중에 구현할 `applyChanges` 메서드를 호출할 것입니다.
+			// 지금은 콘솔에 로그만 남깁니다.
+			console.log(`버튼 클릭: ${this.isAsis ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+
+			// 실제 변경 로직 (아래 applyChanges 메서드 구현 후 주석 해제)
+			this.applyChanges(this.textToApply, this.targetEditorView);
+		});
+
+		const container = document.createElement("div");
+		container.className = "cm-merge-button-container";
+		container.appendChild(button);
+		return container;
+	}
+
+	// 실제 변경 적용 로직
+	applyChanges(text, editorView) {
+		if (!editorView || !this.diffRange) {
+			console.error("Target editor view or diffRange is undefined.");
+			return;
+		}
+
+		// ⭐️ 해당 오프셋 범위의 내용을 교체 (삽입 또는 삭제)
+		editorView.dispatch({
+			changes: {
+				from: this.diffRange.from,
+				to: this.diffRange.to, // 삭제될 범위
+				insert: text // 삽입될 내용
+			}
+		});
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트해야 합니다.
+		// this.hostComponent.recalculateDiff(); 와 같은 메서드를 호출해야 함.
+		// 이 부분은 IdeDiff 클래스 내에서 구현해야 합니다.
+		// 일단은 콘솔 로그와 함께 작동하는지 확인합니다.
+		console.log("Changes applied and diff recalculation needed!");
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트합니다.
+		this.hostComponent.recalculateDiff(); // ⭐️ hostComponent를 통해 메서드 호출
+	}
+
+
+}
+
 customElements.define("ide-diff", IdeDiff);