ide-assi 0.402.0 → 0.403.0

package/src/components/ideDiff.js

@@ -1,6 +1,6 @@
 import ninegrid from "ninegrid2";
 
-// CodeMirror 6 핵심 및 확장 임포트 (변동 없음)
+// CodeMirror 6 핵심 및 확장 임포트
 import {
 	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
 	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
@@ -12,47 +12,57 @@ import {
 	StateEffect,
 	Text
 } from "@codemirror/state";
-import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { defaultKeymap, selectAll } from "@codemirror/commands";
+import { history, historyKeymap, indentWithTab, selectAll } from "@codemirror/commands"; // selectAll, indentWithTab 임포트 확인
+import { defaultKeymap } from "@codemirror/commands"; // defaultKeymap 별도 임포트
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-import { bracketMatching } from "@codemirror/language";
-import { javascript } from "@codemirror/lang-javascript";
-import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
+import { 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 사용 (변동 없음)
+// Diff 로직을 위해 diff-match-patch 사용
 import { diff_match_patch } from 'diff-match-patch';
 
-// Diff 데코레이션을 위한 StateField 정의 (변동 없음)
+// --- Diff 데코레이션을 위한 StateEffect 정의 (수정: DecorationSet 타입 명시) ---
+const setAsisDecorationsEffect = StateEffect.define();
+const setTobeDecorationsEffect = StateEffect.define();
+
+// --- Diff 데코레이션을 위한 StateField 정의 ---
 const asisDiffDecorations = StateField.define({
-	create() { return Decoration.none; },
+	create() {
+		return Decoration.none; // 초기 상태: 데코레이션 없음
+	},
 	update(decorations, tr) {
-		return tr.effects.reduce((currentDecos, effect) => {
+		// 트랜잭션의 변화를 데코레이션에 매핑하여 위치가 변경되어도 데코레이션이 유지되도록 함
+		decorations = decorations.map(tr.changes);
+		// setAsisDecorationsEffect가 있다면 해당 효과의 값을 적용
+		for (let effect of tr.effects) {
 			if (effect.is(setAsisDecorationsEffect)) {
-				return effect.value;
+				return effect.value; // 새로운 DecorationSet으로 교체
 			}
-			return currentDecos;
-		}, decorations);
+		}
+		return decorations; // 효과가 없으면 기존 데코레이션 반환
 	},
-	provide: f => EditorView.decorations.from(f)
+	provide: f => EditorView.decorations.from(f) // 이 필드가 제공하는 데코레이션을 EditorView.decorations 확장으로 등록
 });
 
 const tobeDiffDecorations = StateField.define({
-	create() { return Decoration.none; },
+	create() {
+		return Decoration.none; // 초기 상태: 데코레이션 없음
+	},
 	update(decorations, tr) {
-		return tr.effects.reduce((currentDecos, effect) => {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
 			if (effect.is(setTobeDecorationsEffect)) {
-				return effect.value;
+				return effect.value; // 새로운 DecorationSet으로 교체
 			}
-			return currentDecos;
-		}, decorations);
+		}
+		return decorations;
 	},
 	provide: f => EditorView.decorations.from(f)
 });
 
-const setAsisDecorationsEffect = StateEffect.define();
-const setTobeDecorationsEffect = StateEffect.define();
 
 export class IdeDiff extends HTMLElement {
 
@@ -76,9 +86,13 @@ export class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
-                /* ninegrid CSS 및 필요한 기본 스타일 (변동 없음) */
+                /* ninegrid CSS 및 필요한 기본 스타일 */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
+                
+                /* 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; }
             </style>
 
             <div class="wrapper">
@@ -93,6 +107,22 @@ export class IdeDiff extends HTMLElement {
 		});
 	}
 
+	disconnectedCallback() {
+		// 컴포넌트 해제 시 스크롤 리스너 제거
+		if (this._asisScrollHandler) {
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+			this._asisScrollHandler = null;
+			this._tobeScrollHandler = null;
+		}
+		if (this.#asisEditorView) {
+			this.#asisEditorView.destroy();
+		}
+		if (this.#tobeEditorView) {
+			this.#tobeEditorView.destroy();
+		}
+	}
+
 	#initCodeMirror = () => {
 		this.#asisEditorEl = this.shadowRoot.querySelector('.panel.asis');
 		this.#tobeEditorEl = this.shadowRoot.querySelector('.panel.tobe');
@@ -109,9 +139,10 @@ export class IdeDiff extends HTMLElement {
 			drawSelection(),
 			dropCursor(),
 			EditorState.allowMultipleSelections.of(true),
-			indentOnInput(),
+			indentOnInput(), // 함수 호출
 			bracketMatching(),
 			highlightActiveLine(),
+			highlightActiveLineGutter(),
 			highlightSelectionMatches(),
 			keymap.of([
 				...defaultKeymap,
@@ -119,11 +150,11 @@ export class IdeDiff extends HTMLElement {
 				...historyKeymap,
 				...lintKeymap,
 				...completionKeymap,
-				indentWithTab,
-				selectAll
+				indentWithTab(), // 함수 호출
+				selectAll() // 함수 호출
 			]),
-			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-			autocompletion(),
+			syntaxHighlighting(defaultHighlightStyle), // { fallback: true } 제거
+			autocompletion(), // 함수 호출
 		];
 
 		// ASIS 에디터 뷰 초기화
@@ -132,11 +163,9 @@ export class IdeDiff extends HTMLElement {
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(),
+					this.#languageCompartment.of(javascript()), // 초기 언어 설정
 					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations,
-					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
+					asisDiffDecorations, // ASIS Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -154,11 +183,9 @@ export class IdeDiff extends HTMLElement {
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(),
+					this.#languageCompartment.of(javascript()), // 초기 언어 설정
 					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations,
-					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
+					tobeDiffDecorations, // TOBE Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -208,71 +235,49 @@ export class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// IdeDiff 클래스 내부
+	// Diff 데코레이션 계산 및 반환 함수
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		const asisLineDecos = [];
-		const tobeLineDecos = [];
+		const asisLineBuilder = new RangeSetBuilder();
+		const tobeLineBuilder = new RangeSetBuilder();
 
-		let asisCursor = 0;
-		let tobeCursor = 0;
+		let asisCursor = 0; // ASIS 텍스트에서의 현재 커서 위치 (문자 오프셋)
+		let tobeCursor = 0; // TOBE 텍스트에서의 현재 커서 위치 (문자 오프셋)
 
-		// 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
-		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
-		const asisDoc = Text.of(asisSrc.split('\n'));
-		const tobeDoc = Text.of(tobeSrc.split('\n'));
+		// Decoration 인스턴스 미리 생성
+		const insertedLineDeco = Decoration.line({ class: "cm-inserted-line-bg" });
+		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
 
 		for (const [op, text] of diffs) {
-			const len = text.length;
+			const len = text.length; // 현재 Diff 청크의 텍스트 길이
+			const linesInChunk = text.split('\n');
 
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT: // Added text
-					let currentTobeLineOffset = tobeCursor;
-					const tobeLines = text.split('\n');
-					for (let i = 0; i < tobeLines.length; i++) {
-						// 줄의 시작 오프셋이 tobeDoc의 길이를 넘지 않는지 확인
-						if (currentTobeLineOffset < tobeDoc.length) {
-							const line = tobeDoc.lineAt(currentTobeLineOffset);
-							tobeLineDecos.push({
-								from: line.from,
-								to: line.to,
-								deco: Decoration.line({ class: "cm-inserted-line-bg" })
-							});
-						}
-						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
-						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
-						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
-						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
+				case diff_match_patch.DIFF_INSERT: // Added text (TOBE에만 존재)
+					for (let i = 0; i < linesInChunk.length; i++) {
+						// 마지막 줄이 비어있고 해당 청크가 개행으로 끝나지 않으면 스킵
+						if (i === linesInChunk.length - 1 && linesInChunk[i] === '' && !text.endsWith('\n')) {
+							tobeCursor += len; // tobeCursor만 해당 청크 길이만큼 증가
 							break;
 						}
+						// Decoration.line은 줄의 시작 위치에만 추가하면 CodeMirror가 해당 줄 전체에 적용합니다.
+						tobeLineBuilder.add(tobeCursor, tobeCursor, insertedLineDeco);
+						tobeCursor += linesInChunk[i].length + (i < linesInChunk.length - 1 ? 1 : 0);
 					}
-					tobeCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // Deleted text
-					let currentAsisLineOffset = asisCursor;
-					const asisLines = text.split('\n');
-					for (let i = 0; i < asisLines.length; i++) {
-						// 줄의 시작 오프셋이 asisDoc의 길이를 넘지 않는지 확인
-						if (currentAsisLineOffset < asisDoc.length) {
-							const line = asisDoc.lineAt(currentAsisLineOffset);
-							asisLineDecos.push({
-								from: line.from,
-								to: line.to,
-								deco: Decoration.line({ class: "cm-deleted-line-bg" })
-							});
-						}
-						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
-						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
-						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
-						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
+				case diff_match_patch.DIFF_DELETE: // Deleted text (ASIS에만 존재)
+					for (let i = 0; i < linesInChunk.length; i++) {
+						if (i === linesInChunk.length - 1 && linesInChunk[i] === '' && !text.endsWith('\n')) {
+							asisCursor += len;
 							break;
 						}
+						asisLineBuilder.add(asisCursor, asisCursor, deletedLineDeco);
+						asisCursor += linesInChunk[i].length + (i < linesInChunk.length - 1 ? 1 : 0);
 					}
-					asisCursor += len;
 					break;
 
 				case diff_match_patch.DIFF_EQUAL: // Unchanged text
@@ -282,26 +287,9 @@ export class IdeDiff extends HTMLElement {
 			}
 		}
 
-		// 데코레이션 중복 및 겹침 방지를 위해 정렬
-		asisLineDecos.sort((a, b) => a.from - b.from);
-		tobeLineDecos.sort((a, b) => a.from - b.from);
-
-		// 라인 데코레이션 빌더 생성
-		const asisLineBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisLineDecos) {
-			asisLineBuilder.add(from, to, deco);
-		}
-		const finalAsisDecorations = asisLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
-
-		const tobeLineBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeLineDecos) {
-			tobeLineBuilder.add(from, to, deco);
-		}
-		const finalTobeDecorations = tobeLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
-
 		return {
-			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
-			tobeEffect: setTobeDecorationsEffect.of(finalTobeDecorations)
+			asisDecorations: asisLineBuilder.finish(),
+			tobeDecorations: tobeLineBuilder.finish()
 		};
 	};
 
@@ -318,16 +306,17 @@ export class IdeDiff extends HTMLElement {
 			case 'javascript':
 				langExtension = javascript();
 				break;
+			// case 'java':
+			//    langExtension = java();
+			//    break;
+			// case 'xml':
+			//    langExtension = xml();
+			//    break;
 			default:
-				langExtension = javascript();
+				langExtension = javascript(); // 기본값
 		}
 
-		// 데코레이션 효과는 미리 계산해 둡니다.
-		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
-
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
-		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
-
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
@@ -342,27 +331,19 @@ export class IdeDiff extends HTMLElement {
 			]
 		});
 
-		console.log(asisEffect, tobeEffect);
-
-		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
+		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
+			const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(src1, src2);
+
 			this.#asisEditorView.dispatch({
-				effects: [
-					StateEffect.reconfigure.of(
-						EditorView.decorations.of(
-							Decoration.set(
-								Decoration.line({ attributes: { style: "font-weight: bold" } }).range(0)
-							)
-						)
-					)
-				]
+				effects: [setAsisDecorationsEffect.of(asisDecorations)] // StateField가 처리할 효과
 			});
 			this.#tobeEditorView.dispatch({
-				//effects: [tobeEffect]
+				effects: [setTobeDecorationsEffect.of(tobeDecorations)] // StateField가 처리할 효과
 			});
 
-			// ⭐️ 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
+			// 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
 			// 그 다음 프레임에서 스크롤 동기화를 활성화합니다.
 			requestAnimationFrame(() => {
 				this.#isScrollSyncActive = true;
@@ -372,21 +353,6 @@ export class IdeDiff extends HTMLElement {
 			});
 		});
 	};
-
-	disconnectedCallback() {
-		// 컴포넌트 해제 시 스크롤 리스너 제거
-		if (this._asisScrollHandler) {
-			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
-			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
-			this._asisScrollHandler = null;
-			this._tobeScrollHandler = null;
-		}
-		if (this.#asisEditorView) {
-			this.#asisEditorView.destroy();
-		}
-		if (this.#tobeEditorView) {
-			this.#tobeEditorView.destroy();
-		}
-	}
 }
+
 customElements.define("ide-diff", IdeDiff);