ide-assi 0.435.0 → 0.437.0

package/src/components/ideDiff.js

@@ -1,10 +1,9 @@
 import ninegrid from "ninegrid2";
 
-// CodeMirror 6 핵심 및 확장 임포트
 import {
 	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
 	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
-	Decoration
+	Decoration, WidgetType
 } from "@codemirror/view";
 import {
 	EditorState, Compartment, StateField,
@@ -12,17 +11,13 @@ import {
 	StateEffect,
 	Text
 } from "@codemirror/state";
-// ⭐️ indentWithTab, selectAll 함수로 임포트되었는지 확인하고, 아래에서 호출합니다.
 import { history, historyKeymap, indentWithTab, selectAll, defaultKeymap } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-// ⭐️ indentOnInput 함수도 여기서 임포트되었는지 확인합니다.
 import { indentOnInput, bracketMatching, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
 import { javascript } from "@codemirror/lang-javascript";
-
 import { lintKeymap } from "@codemirror/lint";
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 
-// Diff 로직을 위해 diff-match-patch 사용
 import { diff_match_patch } from 'diff-match-patch';
 
 // --- Diff 데코레이션을 위한 StateEffect 정의 ---
@@ -63,8 +58,71 @@ const tobeDiffDecorations = StateField.define({
 });
 
 
-export class IdeDiff extends HTMLElement {
+// IdeDiff 클래스 외부 (파일 상단 or 하단)에 추가
+class MergeButtonWidget extends WidgetType {
+	// ⭐️ diffRange는 변경이 발생할 대상 에디터의 범위입니다.
+	// ⭐️ isAsisButton: ASIS 에디터 쪽에 붙는 버튼인가? (true면 ASIS -> TOBE 적용)
+	// ⭐️ isAsisButton이 false면 TOBE 에디터 쪽에 붙는 버튼 (TOBE -> ASIS 되돌리기)
+	constructor(isAsisButton, textToApply, targetEditorView, diffRange, hostComponent) {
+		super();
+		this.isAsisButton = isAsisButton; // 이 버튼이 ASIS 에디터에 붙는 버튼인가 (true) TOBE 에디터에 붙는 버튼인가 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰 (상대편 에디터)
+		this.diffRange = diffRange; // 대상 에디터에서 변경이 일어날 정확한 from/to 오프셋
+		this.hostComponent = hostComponent; // IdeDiff 인스턴스 참조
+	}
+
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
+	eq(other) { return false; }
+
+	// 위젯의 DOM 요소를 생성합니다.
+	toDOM(view) {
+		const button = document.createElement("button");
+		// 버튼 클래스 및 텍스트는 버튼의 위치(ASIS/TOBE)에 따라 결정됩니다.
+		button.className = `cm-merge-button ${this.isAsisButton ? 'accept' : 'revert'}`;
+		button.textContent = this.isAsisButton ? "→ 적용" : "← 되돌리기"; // ASIS 버튼: TOBE로 적용, TOBE 버튼: ASIS로 되돌리기
+
+		// 클릭 이벤트 핸들러
+		button.addEventListener("click", () => {
+			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+			console.log("대상 에디터:", this.targetEditorView === this.hostComponent.#asisEditorView ? "ASIS" : "TOBE");
+			console.log("대상 범위:", this.diffRange);
+
+			this.applyChanges(this.textToApply, this.targetEditorView, this.diffRange);
+		});
+
+		const container = document.createElement("div");
+		container.className = "cm-merge-button-container";
+		container.appendChild(button);
+		return container;
+	}
+
+	// 실제 변경 적용 로직
+	applyChanges(text, editorView, range) {
+		if (!editorView || !range) {
+			console.error("Target editor view or range is undefined.", editorView, range);
+			return;
+		}
+
+		editorView.dispatch({
+			changes: {
+				from: range.from,
+				to: range.to,
+				insert: text
+			}
+		});
+
+		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트합니다.
+		// requestAnimationFrame으로 감싸서 다음 렌더링 사이클에서 Diff 계산이 이루어지도록 합니다.
+		// 이렇게 하면 UI 블로킹을 줄일 수 있습니다.
+		requestAnimationFrame(() => {
+			this.hostComponent.recalculateDiff();
+		});
+	}
+}
+
 
+export class IdeDiff extends HTMLElement {
 	#asisEditorView;
 	#tobeEditorView;
 	#asisEditorEl;
@@ -88,6 +146,62 @@ export class IdeDiff extends HTMLElement {
                 /* ninegrid CSS 및 필요한 기본 스타일 */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
+
+                /* --- 추가된 CSS 규칙 (버튼 및 선택 관련) --- */
+                .cm-line {
+                    position: relative;
+                }
+                .cm-merge-button-container {
+                    position: absolute;
+                    right: 5px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    z-index: 10;
+                    display: flex;
+                    gap: 5px;
+                }
+                .cm-merge-button {
+                    background-color: #f0f0f0;
+                    border: 1px solid #ccc;
+                    border-radius: 3px;
+                    padding: 2px 6px;
+                    cursor: pointer;
+                    font-size: 0.8em;
+                    line-height: 1;
+                    white-space: nowrap;
+                    opacity: 0.7;
+                    transition: opacity 0.2s ease-in-out;
+                }
+                .cm-merge-button:hover {
+                    opacity: 1;
+                    background-color: #e0e0e0;
+                }
+                .cm-merge-button.accept {
+                    background-color: #4CAF50;
+                    color: white;
+                    border-color: #4CAF50;
+                }
+                .cm-merge-button.revert {
+                    background-color: #f44336;
+                    color: white;
+                    border-color: #f44336;
+                }
+                /* Diff 데코레이션 CSS (ideDiff.css에 없으면 여기에 추가) */
+                .cm-inserted-line-bg { background-color: #e6ffed; border-left: 3px solid #66bb6a; }
+                .cm-deleted-line-bg { background-color: #ffebe9; border-left: 3px solid #ef5350; }
+
+                /* CodeMirror 선택 스타일 (ideDiff.css에 없으면 여기에 추가) */
+                .cm-selectionBackground {
+                    background-color: #d7d4f9 !important;
+                }
+                .cm-editor ::selection {
+                    background-color: #d7d4f9 !important;
+                    color: inherit !important;
+                }
+                .cm-editor::-moz-selection {
+                    background-color: #d7d4f9 !important;
+                    color: inherit !important;
+                }
             </style>
 
             <div class="wrapper">
@@ -133,7 +247,7 @@ export class IdeDiff extends HTMLElement {
 			drawSelection(),
 			dropCursor(),
 			EditorState.allowMultipleSelections.of(true),
-			indentOnInput(), // ⭐️ 함수 호출
+			indentOnInput(),
 			bracketMatching(),
 			highlightActiveLine(),
 			highlightActiveLineGutter(),
@@ -144,11 +258,11 @@ export class IdeDiff extends HTMLElement {
 				...historyKeymap,
 				...lintKeymap,
 				...completionKeymap,
-				//indentWithTab(), // ⭐️ 함수 호출
-				//selectAll()      // ⭐️ 함수 호출
+				indentWithTab, // ⭐️ 함수가 아닌 확장 자체를 전달
+				selectAll // ⭐️ 함수가 아닌 확장 자체를 전달
 			]),
-			syntaxHighlighting(defaultHighlightStyle), // { fallback: true } 제거 확인
-			autocompletion(), // ⭐️ 함수 호출
+			syntaxHighlighting(defaultHighlightStyle),
+			autocompletion(),
 		];
 
 		// ASIS 에디터 뷰 초기화
@@ -157,9 +271,9 @@ export class IdeDiff extends HTMLElement {
 				doc: '',
 				extensions: [
 					basicExtensions,
-					this.#languageCompartment.of(javascript()), // 초기 언어 설정
-					EditorState.readOnly.of(true),
-					asisDiffDecorations, // ASIS Diff 데코레이션 필드
+					this.#languageCompartment.of(javascript()),
+					EditorState.readOnly.of(true), // ASIS는 읽기 전용 유지
+					asisDiffDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -177,9 +291,9 @@ export class IdeDiff extends HTMLElement {
 				doc: '',
 				extensions: [
 					basicExtensions,
-					this.#languageCompartment.of(javascript()), // 초기 언어 설정
-					EditorState.readOnly.of(true),
-					tobeDiffDecorations, // TOBE Diff 데코레이션 필드
+					this.#languageCompartment.of(javascript()),
+					// EditorState.readOnly.of(true), // TOBE는 편집 가능하도록 주석 처리 유지
+					tobeDiffDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -232,72 +346,66 @@ export class IdeDiff extends HTMLElement {
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 
-		// dmp의 기본 cleanupThreshold를 줄여서 더 세밀한 차이를 감지하도록 시도
-		// 기본값은 0.5인데, 0으로 하면 더 많은 변화를 감지할 수 있습니다.
-		// 하지만 너무 낮추면 노이즈가 많아질 수 있습니다.
-		// dmp.Diff_EditCost = 4; // 편집 비용 조정, 기본 4
-		// dmp.Diff_DualThreshold = 0.5; // 불명확한 Diff에 대한 임계값. 기본 0.5
-		// dmp.Diff_Timeout = 1.0; // 타임아웃, 기본 1.0
-
-		// 텍스트를 줄 단위로 변환하여 Diff 수행
 		const a = dmp.diff_linesToChars_(asisSrc, tobeSrc);
 		const lineText1 = a.chars1;
 		const lineText2 = a.chars2;
 		const lineArray = a.lineArray;
 
-		// dmp.diff_main(text1, text2, checklines, deadline)
-		// checklines: true (기본값)는 줄 단위 최적화, false는 문자 단위로.
-		// 여기서는 diff_linesToChars_를 사용했으므로 true가 적절.
 		const diffs = dmp.diff_main(lineText1, lineText2, true);
-
-		// cleanupEfficiency를 먼저 적용하여 효율적인 Diff를 만듭니다.
-		// 이는 작은 변경사항이 인접해 있을 때 하나의 큰 변경으로 합치는 경향이 있습니다.
-		// dmp.diff_cleanupEfficiency(diffs); // 오히려 이동을 놓칠 수 있음
-
-		// 그 다음 의미론적 정리를 적용합니다.
 		dmp.diff_cleanupSemantic(diffs);
-
-		// 다시 문자열로 변환
 		dmp.diff_charsToLines_(diffs, lineArray);
 
-		console.log(diffs);
+		console.log("Calculated Diffs:", diffs); // Diff 결과 확인용
 
 		const asisLineBuilder = new RangeSetBuilder();
 		const tobeLineBuilder = new RangeSetBuilder();
 
-		let asisCursor = 0;
-		let tobeCursor = 0;
+		let asisCursor = 0; // ASIS 텍스트에서의 현재 오프셋
+		let tobeCursor = 0; // TOBE 텍스트에서의 현재 오프셋
 
-		// 변경된 줄에 대한 새로운 데코레이션 클래스를 추가할 수 있습니다.
 		const insertedLineDeco = Decoration.line({ class: "cm-inserted-line-bg" });
 		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
-		// const changedLineDeco = Decoration.line({ class: "cm-changed-line-bg" }); // 필요하다면
+
+		const currentInstance = this;
 
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
+			// 각 diff op 이전에 현재 커서 위치를 저장
+			const asisRangeStart = asisCursor;
+			const tobeRangeStart = tobeCursor;
+
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT:
-					console.log(diff_match_patch.DIFF_INSERT, text);
+				case diff_match_patch.DIFF_INSERT: // TOBE에 추가된 내용 (ASIS에는 없음)
+					console.log("DIFF_INSERT (TOBE added):", JSON.stringify(text));
 					const tobeLines = text.split('\n');
-
 					for (let i = 0; i < tobeLines.length; i++) {
-						// 빈 줄이 아니고, 마지막 줄이면서 줄바꿈이 없는 경우가 아니면 데코레이션
-						/**
-						if (!(i === tobeLines.length - 1 && tobeLines[i] === '' && !text.endsWith('\n'))) {
-							tobeLineBuilder.add(tobeCursor, tobeCursor, insertedLineDeco);
-						}
-						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
-						 */
 						if (!(i === tobeLines.length - 1 && tobeLines[i] === '' && text.endsWith('\n'))) {
 							tobeLineBuilder.add(tobeCursor, tobeCursor, insertedLineDeco);
 						}
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
+
+					// ⭐️ TOBE 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS로 '되돌리기' (ASIS에서 삭제)
+					// 즉, TOBE에서 삽입된 내용을 ASIS에서 '없애는' 작업
+					tobeLineBuilder.add(
+						tobeRangeStart, // TOBE에서의 해당 Diff 청크 시작 오프셋
+						tobeRangeStart,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								false, // 이 버튼은 TOBE 에디터에 붙는 버튼 (되돌리기)
+								"", // 텍스트를 ""로 삽입하면 삭제 효과 (ASIS에서 없앨 내용)
+								currentInstance.#asisEditorView, // 대상 에디터는 ASIS
+								{ from: asisRangeStart, to: asisRangeStart + 0 }, // ASIS에서의 대상 범위 (삽입 지점)
+								currentInstance
+							),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
 					break;
 
-				case diff_match_patch.DIFF_DELETE:
-					console.log(diff_match_patch.DIFF_DELETE, text);
+				case diff_match_patch.DIFF_DELETE: // ASIS에서 삭제된 내용 (TOBE에는 없음)
+					console.log("DIFF_DELETE (ASIS deleted):", JSON.stringify(text));
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
 						if (!(i === asisLines.length - 1 && asisLines[i] === '' && text.endsWith('\n'))) {
@@ -305,16 +413,29 @@ export class IdeDiff extends HTMLElement {
 						}
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
+
+					// ⭐️ ASIS 에디터에 버튼 추가: ASIS의 삭제 내용을 TOBE로 '적용' (TOBE에 삽입)
+					// 즉, ASIS에서 삭제된 내용을 TOBE에 '넣는' 작업
+					asisLineBuilder.add(
+						asisRangeStart, // ASIS에서의 해당 Diff 청크 시작 오프셋
+						asisRangeStart,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								true, // 이 버튼은 ASIS 에디터에 붙는 버튼 (적용)
+								text, // ASIS에서 삭제된 내용을 TOBE에 삽입
+								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE
+								{ from: tobeRangeStart, to: tobeRangeStart + 0 }, // TOBE에서의 대상 범위 (삽입 지점)
+								currentInstance
+							),
+							side: 1 // 텍스트 뒤에 삽입
+						})
+					);
 					break;
 
-				case diff_match_patch.DIFF_EQUAL:
+				case diff_match_patch.DIFF_EQUAL: // 동일한 내용
 					asisCursor += len;
 					tobeCursor += len;
 					break;
-
-				default:
-					console.log(op);
-					break;
 			}
 		}
 
@@ -324,6 +445,20 @@ export class IdeDiff extends HTMLElement {
 		};
 	};
 
+	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.');