ide-assi 0.333.0 → 0.335.0

package/src/components/ideDiff.js

@@ -1,31 +1,72 @@
 import ninegrid from "ninegrid2";
 
 // CodeMirror 6 핵심 및 확장 임포트
-import { EditorView, lineNumbers, highlightSpecialChars, drawSelection, dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter } from "@codemirror/view";
-import { EditorState, Compartment } from "@codemirror/state";
+import {
+	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
+	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
+	// 데코레이션을 위한 Decoration 클래스 임포트
+	Decoration
+} from "@codemirror/view";
+import {
+	EditorState, Compartment, StateField,
+	// 데코레이션 빌더를 위한 RangeSetBuilder 임포트
+	RangeSetBuilder
+} from "@codemirror/state";
 import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
-// ⭐️ 여기서 searchKeymap을 제거합니다.
-import { defaultKeymap, selectAll } from "@codemirror/commands"; // selectAll은 commands에 남아있습니다.
-// ⭐️ searchKeymap은 이제 @codemirror/search 에서 가져옵니다.
+import { defaultKeymap, selectAll } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
 import { bracketMatching } from "@codemirror/language";
-import { javascript } from "@codemirror/lang-javascript"; // 예시 언어 (필요에 따라 다른 언어 팩 추가)
-import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language"; // syntaxHighlighting 추가
+import { javascript } from "@codemirror/lang-javascript";
+import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
 import { lintKeymap } from "@codemirror/lint";
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 
 // Diff 로직을 위해 diff-match-patch 사용
 import { diff_match_patch } from 'diff-match-patch';
 
-// ... (나머지 IdeDiff 클래스 코드는 동일) ...
+// Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
+const asisDiffDecorations = StateField.define({
+	create() { return Decoration.none; }, // 초기 상태
+	update(decorations, tr) {
+		// 트랜잭션에 포함된 Effects를 처리하여 데코레이션을 업데이트
+		// `#applyDiffDecorations` 함수에서 데코레이션 업데이트 요청을 보낼 때 사용
+		return tr.effects.reduce((currentDecos, effect) => {
+			if (effect.is(setAsisDecorationsEffect)) {
+				return effect.value;
+			}
+			return currentDecos;
+		}, decorations);
+	},
+	// 데코레이션을 뷰에 제공
+	provide: f => EditorView.decorations.from(f)
+});
+
+// Diff 데코레이션을 위한 StateField 정의 (tobe 에디터용)
+const tobeDiffDecorations = StateField.define({
+	create() { return Decoration.none; },
+	update(decorations, tr) {
+		return tr.effects.reduce((currentDecos, effect) => {
+			if (effect.is(setTobeDecorationsEffect)) {
+				return effect.value;
+			}
+			return currentDecos;
+		}, decorations);
+	},
+	provide: f => EditorView.decorations.from(f)
+});
+
+// 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
+const setAsisDecorationsEffect = EditorState.define.effect();
+const setTobeDecorationsEffect = EditorState.define.effect();
+
 
 export class IdeDiff extends HTMLElement {
-	#asisEditorView; // asis 패널의 CodeMirror EditorView 인스턴스
-	#tobeEditorView; // tobe 패널의 CodeMirror EditorView 인스턴스
-	#asisEditorEl;   // asis 에디터를 렌더링할 DOM 요소
-	#tobeEditorEl;   // tobe 에디터를 렌더링할 DOM 요소
+	#asisEditorView;
+	#tobeEditorView;
+	#asisEditorEl;
+	#tobeEditorEl;
 
-	#languageCompartment = new Compartment(); // 언어 확장을 동적으로 변경하기 위한 Compartment
+	#languageCompartment = new Compartment();
 
 	constructor() {
 		super();
@@ -49,27 +90,29 @@ export class IdeDiff extends HTMLElement {
                 .panel {
                     flex: 1; /* 패널들이 남은 공간을 채우도록 */
                     overflow: hidden; /* CodeMirror EditorView 자체가 스크롤을 처리 */
-                    /* position: relative; */ /* CodeMirror가 자체적으로 관리하므로 필요 없을 수 있음 */
                     min-width: 0; /* Flexbox 아이템이 content 때문에 늘어나는 것을 방지 */
                 }
                 .cm-editor {
                     height: 100%; /* EditorView가 부모 div의 높이를 채우도록 */
                 }
 
-                /* Diff 시각화를 위한 기본 스타일 (나중에 데코레이션으로 더 정교하게) */
-                .cm-line.cm-deleted-line {
-                    background-color: #ffeef0; /* 삭제된 줄 배경 */
-                }
-                .cm-line.cm-inserted-line {
-                    background-color: #e6ffed; /* 삽입된 줄 배경 */
+                /* Diff 시각화를 위한 CSS 클래스 */
+                /* 줄 전체 배경색 */
+                .cm-inserted-line-bg { background-color: #e6ffe6; } /* 연한 녹색 */
+                .cm-deleted-line-bg { background-color: #ffe6e6; } /* 연한 빨간색 */
+
+                /* 인라인(단어/문자) 변경 강조 */
+                .cm-inserted-inline {
+                    background-color: #90ee90; /* 밝은 녹색 */
+                    font-weight: bold;
                 }
                 .cm-deleted-inline {
-                    background-color: #ffcccc; /* 인라인 삭제 */
+                    background-color: #ff9999; /* 밝은 빨간색 */
                     text-decoration: line-through;
+                    font-weight: bold;
                 }
-                .cm-inserted-inline {
-                    background-color: #ccffcc; /* 인라인 삽입 */
-                }
+                /* 선택적: 동일하지만 이동된 줄 강조 (복잡함) */
+                /* .cm-moved-line-bg {} */
             </style>
 
             <div class="wrapper">
@@ -95,58 +138,59 @@ export class IdeDiff extends HTMLElement {
 
 		// CodeMirror 확장 기본 설정
 		const basicExtensions = [
-			lineNumbers(), // 줄 번호
-			highlightSpecialChars(), // 특수 문자 강조 (예: 공백)
-			history(), // 실행 취소/다시 실행
-			drawSelection(), // 선택 영역 표시
-			dropCursor(), // 드래그 시 커서 위치
-			EditorState.allowMultipleSelections.of(true), // 다중 선택 허용
-			indentOnInput(), // 입력 시 자동 들여쓰기
-			bracketMatching(), // 괄호 짝 맞추기
-			highlightActiveLine(), // 현재 줄 강조
-			highlightSelectionMatches(), // 선택된 텍스트와 일치하는 부분 강조
+			lineNumbers(),
+			highlightSpecialChars(),
+			history(),
+			drawSelection(),
+			dropCursor(),
+			EditorState.allowMultipleSelections.of(true),
+			indentOnInput(),
+			bracketMatching(),
+			highlightActiveLine(),
+			highlightSelectionMatches(),
 			keymap.of([
-				...defaultKeymap, // 기본 키맵 (Enter, Backspace 등)
-				...searchKeymap, // 검색 관련 키맵
-				...historyKeymap, // undo/redo 키맵
-				...lintKeymap, // 린트 관련 키맵
-				...completionKeymap, // 자동 완성 키맵
-				indentWithTab // 탭으로 들여쓰기 (필요시)
+				...defaultKeymap,
+				...searchKeymap,
+				...historyKeymap,
+				...lintKeymap,
+				...completionKeymap,
+				indentWithTab,
+				selectAll // selectAll 추가
 			]),
-			syntaxHighlighting(defaultHighlightStyle, { fallback: true }), // 기본 구문 하이라이팅
-			autocompletion(), // 자동 완성
-			// EditorState.readOnly.of(true) // 기본적으로 읽기 전용으로 설정
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			autocompletion(),
 		];
 
 		// asis 에디터 생성 (읽기 전용)
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
-				doc: '', // 초기 내용 비워둠
+				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (필요에 따라 변경)
+					javascript(), // JS 언어 모드 (기본)
 					EditorState.readOnly.of(true), // asis는 읽기 전용
-					this.#languageCompartment.of(javascript()) // 언어 변경을 위한 compartment
+					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
+					asisDiffDecorations // asis 에디터에 Diff 데코레이션 필드 추가
 				]
 			}),
 			parent: this.#asisEditorEl
 		});
 
-		// tobe 에디터 생성 (읽기 전용, 또는 편집 가능하게 할 수도 있음)
+		// tobe 에디터 생성 (읽기 전용, 필요 시 편집 가능하게 설정)
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
-				doc: '', // 초기 내용 비워둠
+				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (필요에 따라 변경)
-					EditorState.readOnly.of(true), // tobe도 읽기 전용으로 설정 (필요시 false)
-					this.#languageCompartment.of(javascript()) // 언어 변경을 위한 compartment
+					javascript(), // JS 언어 모드 (기본)
+					EditorState.readOnly.of(true), // tobe도 읽기 전용
+					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
+					tobeDiffDecorations // tobe 에디터에 Diff 데코레이션 필드 추가
 				]
 			}),
 			parent: this.#tobeEditorEl
 		});
 
-		// 스크롤 동기화 설정
 		this.#setupScrollSync();
 	};
 
@@ -173,44 +217,101 @@ export class IdeDiff extends HTMLElement {
 		});
 	};
 
-	// Diff를 계산하고 에디터에 적용하는 메서드
-	#renderDiff = (asisSrc, tobeSrc) => {
+	// ⭐️⭐️⭐️ Diff 데코레이션 적용 로직 구현 ⭐️⭐️⭐️
+	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// TODO: diffs 결과를 바탕으로 CodeMirror 데코레이션(Decoration)을 생성하고 에디터에 적용하는 로직 구현
-		// 이 부분은 CodeMirror의 Decoration, StateField, ViewPlugin 등을 이해하고 구현해야 합니다.
-		// 각 줄에 대한 변경 상태(삽입/삭제/동일)를 판단하고, 인라인 변경(단어 단위)도 처리해야 합니다.
-		// 예를 들어:
-		// const asisDecorations = [];
-		// const tobeDecorations = [];
-		// let asisCursor = 0;
-		// let tobeCursor = 0;
-		// for (const [op, text] of diffs) {
-		//     const len = text.length;
-		//     if (op === diff_match_patch.DIFF_INSERT) {
-		//         // tobe 쪽에 삽입된 부분 데코레이션 추가
-		//         tobeDecorations.push(Decoration.mark({class: "cm-inserted-inline"}).range(tobeCursor, tobeCursor + len));
-		//         tobeCursor += len;
-		//     } else if (op === diff_match_patch.DIFF_DELETE) {
-		//         // asis 쪽에 삭제된 부분 데코레이션 추가
-		//         asisDecorations.push(Decoration.mark({class: "cm-deleted-inline"}).range(asisCursor, asisCursor + len));
-		//         asisCursor += len;
-		//     } else { // DIFF_EQUAL
-		//         asisCursor += len;
-		//         tobeCursor += len;
-		//     }
-		// }
-		// 에디터 상태를 업데이트하고 데코레이션을 적용하는 복잡한 로직이 필요합니다.
-		// 이 예시에서는 생략하지만, 실제 구현 시 핵심이 됩니다.
-
-		// 현재는 단순히 텍스트만 업데이트
+		const asisBuilder = new RangeSetBuilder();
+		const tobeBuilder = new RangeSetBuilder();
+
+		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
+		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
+
+		// 줄 단위 데코레이션을 위해 줄 시작 위치를 추적
+		const asisLineStartMap = new Map();
+		const tobeLineStartMap = new Map();
+
+		// 각 텍스트에 대한 줄 시작 위치 미리 계산
+		let currentPos = 0;
+		for (const line of asisSrc.split('\n')) {
+			asisLineStartMap.set(currentPos, true);
+			currentPos += line.length + 1; // +1은 줄바꿈 문자 포함
+		}
+		currentPos = 0;
+		for (const line of tobeSrc.split('\n')) {
+			tobeLineStartMap.set(currentPos, true);
+			currentPos += line.length + 1;
+		}
+
+		for (const [op, text] of diffs) {
+			const len = text.length;
+
+			switch (op) {
+				case diff_match_patch.DIFF_INSERT: // Added text
+					// tobe 쪽에 인라인 데코레이션 추가
+					tobeBuilder.add(
+						tobeCursor, tobeCursor + len,
+						Decoration.mark({ class: "cm-inserted-inline" })
+					);
+
+					// tobe 쪽에 줄 전체 데코레이션 추가 (삽입된 줄)
+					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					const tobeLines = text.split('\n');
+					let currentLineOffset = tobeCursor;
+					for(let i = 0; i < tobeLines.length; i++) {
+						// 각 줄의 시작 위치를 찾기
+						const lineStart = tobeEditorView.state.doc.lineAt(currentLineOffset).from;
+						// 만약 다음 줄이 있다면 해당 줄의 끝까지, 마지막 줄이라면 텍스트의 끝까지
+						const lineEnd = i === tobeLines.length - 1 ? currentLineOffset + tobeLines[i].length : tobeEditorView.state.doc.lineAt(currentLineOffset).to;
+						tobeBuilder.add(
+							lineStart, lineEnd, // 줄의 실제 시작부터 끝까지
+							Decoration.line({ class: "cm-inserted-line-bg" })
+						);
+						currentLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+					}
+
+
+					tobeCursor += len;
+					break;
+
+				case diff_match_patch.DIFF_DELETE: // Deleted text
+					// asis 쪽에 인라인 데코레이션 추가
+					asisBuilder.add(
+						asisCursor, asisCursor + len,
+						Decoration.mark({ class: "cm-deleted-inline" })
+					);
+
+					// asis 쪽에 줄 전체 데코레이션 추가 (삭제된 줄)
+					const asisLines = text.split('\n');
+					let currentAsisLineOffset = asisCursor;
+					for(let i = 0; i < asisLines.length; i++) {
+						const lineStart = asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
+						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+						asisBuilder.add(
+							lineStart, lineEnd,
+							Decoration.line({ class: "cm-deleted-line-bg" })
+						);
+						currentAsisLineOffset += asisLines[i].length + 1;
+					}
+
+					asisCursor += len;
+					break;
+
+				case diff_match_patch.DIFF_EQUAL: // Unchanged text
+					asisCursor += len;
+					tobeCursor += len;
+					break;
+			}
+		}
+
+		// 에디터 뷰에 데코레이션 업데이트 요청 디스패치
 		this.#asisEditorView.dispatch({
-			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: asisSrc }
+			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
 		});
 		this.#tobeEditorView.dispatch({
-			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: tobeSrc }
+			effects: setTobeDecorationsEffect.of(tobeBuilder.finish())
 		});
 	};
 
@@ -227,13 +328,15 @@ export class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 				break;
 			// case 'html':
-			//     langExtension = html(); // @codemirror/lang-html 임포트 필요
+			//     import { html } from "@codemirror/lang-html"; // 상단에 임포트 필요
+			//     langExtension = html();
 			//     break;
 			// case 'css':
-			//     langExtension = css();   // @codemirror/lang-css 임포트 필요
+			//     import { css } from "@codemirror/lang-css";   // 상단에 임포트 필요
+			//     langExtension = css();
 			//     break;
 			default:
-				langExtension = javascript(); // 기본값
+				langExtension = javascript();
 		}
 
 		// 언어 확장 업데이트
@@ -244,11 +347,19 @@ export class IdeDiff extends HTMLElement {
 			effects: this.#languageCompartment.reconfigure(langExtension)
 		});
 
-		this.#renderDiff(src1, src2);
+		// 텍스트 내용 업데이트
+		this.#asisEditorView.dispatch({
+			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 }
+		});
+		this.#tobeEditorView.dispatch({
+			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 }
+		});
+
+		// Diff 데코레이션 적용
+		this.#applyDiffDecorations(src1, src2);
 	};
 
 	disconnectedCallback() {
-		// 컴포넌트가 DOM에서 제거될 때 에디터 인스턴스 정리
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();
 		}