ide-assi 0.438.0 → 0.439.0

package/src/components/ideDiff.js

@@ -24,6 +24,10 @@ import { diff_match_patch } from 'diff-match-patch';
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
+// --- 버튼 데코레이션을 위한 새로운 StateEffect 정의 ---
+const setAsisButtonDecorationsEffect = StateEffect.define();
+const setTobeButtonDecorationsEffect = StateEffect.define();
+
 // --- Diff 데코레이션을 위한 StateField 정의 ---
 const asisDiffDecorations = StateField.define({
 	create() {
@@ -57,35 +61,61 @@ const tobeDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
+// --- 버튼 데코레이션을 위한 새로운 StateField 정의 ---
+const asisButtonDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, tr) {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
+			if (effect.is(setAsisButtonDecorationsEffect)) {
+				return effect.value;
+			}
+		}
+		return decorations;
+	},
+	provide: f => EditorView.decorations.from(f)
+});
+
+const tobeButtonDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, tr) {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
+			if (effect.is(setTobeButtonDecorationsEffect)) {
+				return effect.value;
+			}
+		}
+		return decorations;
+	},
+	provide: f => EditorView.decorations.from(f)
+});
+
 
 // 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 인스턴스 참조
+		this.isAsisButton = isAsisButton;
+		this.textToApply = textToApply;
+		this.targetEditorView = targetEditorView;
+		this.diffRange = diffRange;
+		this.hostComponent = hostComponent;
 	}
 
-	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. 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.textContent = this.isAsisButton ? "→ 적용" : "← 되돌리기";
 
-		// 클릭 이벤트 핸들러
 		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.targetEditorView === this.hostComponent.#asisEditorView ? "ASIS" : "TOBE");
 			console.log("대상 범위:", this.diffRange);
 
 			this.applyChanges(this.textToApply, this.targetEditorView, this.diffRange);
@@ -97,13 +127,22 @@ class MergeButtonWidget extends WidgetType {
 		return container;
 	}
 
-	// 실제 변경 적용 로직
 	applyChanges(text, editorView, range) {
 		if (!editorView || !range) {
 			console.error("Target editor view or range is undefined.", editorView, range);
 			return;
 		}
 
+		// 특정 줄의 시작 오프셋과 끝 오프셋을 정확히 계산하여 적용해야 합니다.
+		// 현재 로직은 단순 치환이므로 Diff 유형에 따라 복잡해질 수 있습니다.
+		// 예를 들어, TOBE에 삽입된 내용을 ASIS에서 되돌릴 경우, ASIS에서 해당 내용 길이만큼의 공백을 지워야 합니다.
+		// ASIS에서 삭제된 내용을 TOBE에 적용할 경우, TOBE의 해당 위치에 내용을 삽입해야 합니다.
+
+		// CodeMirror의 Doc에서 특정 범위를 가져오는 것은 `state.sliceDoc(from, to)`
+		// `dmp.diff_main`의 결과는 줄 단위로 매핑된 문자열이므로,
+		// 실제 오프셋 계산 및 적용 로직은 더 정교해야 합니다.
+		// 지금은 임시로 range.from, range.to를 사용합니다.
+
 		editorView.dispatch({
 			changes: {
 				from: range.from,
@@ -112,9 +151,6 @@ class MergeButtonWidget extends WidgetType {
 			}
 		});
 
-		// 변경 후 Diff를 다시 계산하고 데코레이션을 업데이트합니다.
-		// requestAnimationFrame으로 감싸서 다음 렌더링 사이클에서 Diff 계산이 이루어지도록 합니다.
-		// 이렇게 하면 UI 블로킹을 줄일 수 있습니다.
 		requestAnimationFrame(() => {
 			this.hostComponent.recalculateDiff();
 		});
@@ -135,79 +171,16 @@ export class IdeDiff extends HTMLElement {
 	_tobeScrollHandler = null;
 
 
-	get asisEditorView() {
-		return this.#asisEditorView;
-	};
-
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
 
-
-
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
-                /* 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">
@@ -264,22 +237,22 @@ export class IdeDiff extends HTMLElement {
 				...historyKeymap,
 				...lintKeymap,
 				...completionKeymap,
-				indentWithTab, // ⭐️ 함수가 아닌 확장 자체를 전달
-				selectAll // ⭐️ 함수가 아닌 확장 자체를 전달
+				indentWithTab,
+				selectAll
 			]),
 			syntaxHighlighting(defaultHighlightStyle),
 			autocompletion(),
 		];
 
-		// ASIS 에디터 뷰 초기화
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
-					EditorState.readOnly.of(true), // ASIS는 읽기 전용 유지
+					EditorState.readOnly.of(true),
 					asisDiffDecorations,
+					asisButtonDecorations, // ⭐️ 새로운 StateField 추가
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -291,15 +264,14 @@ export class IdeDiff extends HTMLElement {
 			parent: this.#asisEditorEl
 		});
 
-		// TOBE 에디터 뷰 초기화
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
-					// EditorState.readOnly.of(true), // TOBE는 편집 가능하도록 주석 처리 유지
 					tobeDiffDecorations,
+					tobeButtonDecorations, // ⭐️ 새로운 StateField 추가
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -361,13 +333,15 @@ export class IdeDiff extends HTMLElement {
 		dmp.diff_cleanupSemantic(diffs);
 		dmp.diff_charsToLines_(diffs, lineArray);
 
-		console.log("Calculated Diffs:", diffs); // Diff 결과 확인용
+		console.log("Calculated Diffs:", diffs);
 
 		const asisLineBuilder = new RangeSetBuilder();
 		const tobeLineBuilder = new RangeSetBuilder();
+		const asisButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
+		const tobeButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
 
-		let asisCursor = 0; // ASIS 텍스트에서의 현재 오프셋
-		let tobeCursor = 0; // TOBE 텍스트에서의 현재 오프셋
+		let asisCursor = 0;
+		let tobeCursor = 0;
 
 		const insertedLineDeco = Decoration.line({ class: "cm-inserted-line-bg" });
 		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
@@ -377,7 +351,6 @@ export class IdeDiff extends HTMLElement {
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
-			// 각 diff op 이전에 현재 커서 위치를 저장
 			const asisRangeStart = asisCursor;
 			const tobeRangeStart = tobeCursor;
 
@@ -392,20 +365,22 @@ export class IdeDiff extends HTMLElement {
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ TOBE 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS로 '되돌리기' (ASIS에서 삭제)
-					// 즉, TOBE에서 삽입된 내용을 ASIS에서 '없애는' 작업
-					tobeLineBuilder.add(
+					// ⭐️ TOBE 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS로 '되돌리기' (ASIS에서 제거)
+					// TOBE의 해당 Diff가 끝나는 지점에 버튼을 붙이는 것이 자연스럽습니다.
+					// tobeRangeStart는 Diff 청크의 시작 오프셋입니다.
+					// 버튼을 Line Decoration과 같은 위치에 추가하되, 별도의 builder 사용
+					tobeButtonBuilder.add(
 						tobeRangeStart, // TOBE에서의 해당 Diff 청크 시작 오프셋
 						tobeRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
 								false, // 이 버튼은 TOBE 에디터에 붙는 버튼 (되돌리기)
-								"", // 텍스트를 ""로 삽입하면 삭제 효과 (ASIS에서 없앨 내용)
+								"",    // ASIS에서 해당 내용을 제거하므로 삽입할 텍스트는 없음 (즉, 삭제)
 								currentInstance.#asisEditorView, // 대상 에디터는 ASIS
-								{ from: asisRangeStart, to: asisRangeStart + 0 }, // ASIS에서의 대상 범위 (삽입 지점)
+								{ from: asisRangeStart, to: asisRangeStart + text.length }, // ASIS에서 '삭제될' 범위
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입
+							side: 1 // 텍스트 뒤에 삽입 (이전에 `side: -1`로 시도했다면 `-1`이 우선순위가 더 높습니다.)
 						})
 					);
 					break;
@@ -420,9 +395,8 @@ export class IdeDiff extends HTMLElement {
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ ASIS 에디터에 버튼 추가: ASIS의 삭제 내용을 TOBE로 '적용' (TOBE에 삽입)
-					// 즉, ASIS에서 삭제된 내용을 TOBE에 '넣는' 작업
-					asisLineBuilder.add(
+					// ⭐️ ASIS 에디터에 버튼 추가: ASIS의 삭제 내용을 TOBE로 '적용' (TOBE에 해당 내용 삽입)
+					asisButtonBuilder.add(
 						asisRangeStart, // ASIS에서의 해당 Diff 청크 시작 오프셋
 						asisRangeStart,
 						Decoration.widget({
@@ -430,7 +404,7 @@ export class IdeDiff extends HTMLElement {
 								true, // 이 버튼은 ASIS 에디터에 붙는 버튼 (적용)
 								text, // ASIS에서 삭제된 내용을 TOBE에 삽입
 								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE
-								{ from: tobeRangeStart, to: tobeRangeStart + 0 }, // TOBE에서의 대상 범위 (삽입 지점)
+								{ from: tobeRangeStart, to: tobeRangeStart + 0 }, // TOBE에서 '삽입될' 위치
 								currentInstance
 							),
 							side: 1 // 텍스트 뒤에 삽입
@@ -447,7 +421,9 @@ export class IdeDiff extends HTMLElement {
 
 		return {
 			asisDecorations: asisLineBuilder.finish(),
-			tobeDecorations: tobeLineBuilder.finish()
+			tobeDecorations: tobeLineBuilder.finish(),
+			asisButtonDecorations: asisButtonBuilder.finish(), // ⭐️ 추가 반환
+			tobeButtonDecorations: tobeButtonBuilder.finish()  // ⭐️ 추가 반환
 		};
 	};
 
@@ -455,13 +431,19 @@ export class IdeDiff extends HTMLElement {
 		const asisDoc = this.#asisEditorView.state.doc.toString();
 		const tobeDoc = this.#tobeEditorView.state.doc.toString();
 
-		const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(asisDoc, tobeDoc);
+		const { asisDecorations, tobeDecorations, asisButtonDecorations, tobeButtonDecorations } = this.#applyDiffDecorations(asisDoc, tobeDoc);
 
 		this.#asisEditorView.dispatch({
-			effects: [setAsisDecorationsEffect.of(asisDecorations)]
+			effects: [
+				setAsisDecorationsEffect.of(asisDecorations),
+				setAsisButtonDecorationsEffect.of(asisButtonDecorations) // ⭐️ Effect 추가
+			]
 		});
 		this.#tobeEditorView.dispatch({
-			effects: [setTobeDecorationsEffect.of(tobeDecorations)]
+			effects: [
+				setTobeDecorationsEffect.of(tobeDecorations),
+				setTobeButtonDecorationsEffect.of(tobeButtonDecorations) // ⭐️ Effect 추가
+			]
 		});
 	};
 
@@ -497,13 +479,19 @@ export class IdeDiff extends HTMLElement {
 		});
 
 		requestAnimationFrame(() => {
-			const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(src1, src2);
+			const { asisDecorations, tobeDecorations, asisButtonDecorations, tobeButtonDecorations } = this.#applyDiffDecorations(src1, src2);
 
 			this.#asisEditorView.dispatch({
-				effects: [setAsisDecorationsEffect.of(asisDecorations)]
+				effects: [
+					setAsisDecorationsEffect.of(asisDecorations),
+					setAsisButtonDecorationsEffect.of(asisButtonDecorations)
+				]
 			});
 			this.#tobeEditorView.dispatch({
-				effects: [setTobeDecorationsEffect.of(tobeDecorations)]
+				effects: [
+					setTobeDecorationsEffect.of(tobeDecorations),
+					setTobeButtonDecorationsEffect.of(tobeButtonDecorations)
+				]
 			});
 
 			requestAnimationFrame(() => {