ide-assi 0.331.0 → 0.334.0

package/src/components/ideDiff.js

@@ -1,11 +1,72 @@
-import { EditorView } from "@codemirror/view";
-import { EditorState } from "@codemirror/state";
-import { javascript } from "@codemirror/lang-javascript"; // 예시 언어
-import { lineNumbers } from "@codemirror/view";
-import { DiffEditor } from "codemirror-editor-diff"; // Diff 기능 라이브러리 (예시)
+import ninegrid from "ninegrid2";
+
+// CodeMirror 6 핵심 및 확장 임포트
+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";
+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";
+import { lintKeymap } from "@codemirror/lint";
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+
+// Diff 로직을 위해 diff-match-patch 사용
+import { diff_match_patch } from 'diff-match-patch';
+
+// 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 {
-	#diffEditorInstance; // DiffEditor 인스턴스
+	#asisEditorView;
+	#tobeEditorView;
+	#asisEditorEl;
+	#tobeEditorEl;
+
+	#languageCompartment = new Compartment();
 
 	constructor() {
 		super();
@@ -18,23 +79,46 @@ 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")}
+
+                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 */
                 .wrapper {
-                    width: 100%;
-                    height: 100%;
                     display: flex;
+                    width: 100%;
+                    height: 100%; /* 부모의 높이를 채우도록 설정 */
+                    overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
                 }
-                #editor-container {
-                    flex: 1;
-                    min-height: 0;
+                .panel {
+                    flex: 1; /* 패널들이 남은 공간을 채우도록 */
+                    overflow: hidden; /* CodeMirror EditorView 자체가 스크롤을 처리 */
+                    min-width: 0; /* Flexbox 아이템이 content 때문에 늘어나는 것을 방지 */
                 }
-                /* CodeMirror 기본 스타일 */
                 .cm-editor {
-                    height: 100%;
-                    /* border: 1px solid #eee; */
+                    height: 100%; /* EditorView가 부모 div의 높이를 채우도록 */
                 }
+
+                /* 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: #ff9999; /* 밝은 빨간색 */
+                    text-decoration: line-through;
+                    font-weight: bold;
+                }
+                /* 선택적: 동일하지만 이동된 줄 강조 (복잡함) */
+                /* .cm-moved-line-bg {} */
             </style>
+
             <div class="wrapper">
-                <div id="editor-container"></div>
+                <div class="panel asis"></div>
+                <nx-splitter></nx-splitter>
+                <div class="panel tobe"></div>
             </div>
         `;
 
@@ -44,38 +128,243 @@ export class IdeDiff extends HTMLElement {
 	}
 
 	#initCodeMirror = () => {
-		const container = this.shadowRoot.getElementById('editor-container');
-		if (!container) {
-			console.error('CodeMirror container not found!');
+		this.#asisEditorEl = this.shadowRoot.querySelector('.panel.asis');
+		this.#tobeEditorEl = this.shadowRoot.querySelector('.panel.tobe');
+
+		if (!this.#asisEditorEl || !this.#tobeEditorEl) {
+			console.error('CodeMirror panel containers not found!');
 			return;
 		}
 
-		// DiffEditor 인스턴스 생성
-		this.#diffEditorInstance = new DiffEditor(container, {
-			// CodeMirror 확장을 이곳에 배열로 전달
-			extensions: [
-				lineNumbers(), // 줄 번호
-				javascript(), // 구문 하이라이팅 (JavaScript 예시)
-				EditorState.readOnly.of(true) // 읽기 전용
-				// ... 기타 CodeMirror 확장
-			],
-			// DiffEditor 자체 옵션 (만약 있다면)
+		// CodeMirror 확장 기본 설정
+		const basicExtensions = [
+			lineNumbers(),
+			highlightSpecialChars(),
+			history(),
+			drawSelection(),
+			dropCursor(),
+			EditorState.allowMultipleSelections.of(true),
+			indentOnInput(),
+			bracketMatching(),
+			highlightActiveLine(),
+			highlightSelectionMatches(),
+			keymap.of([
+				...defaultKeymap,
+				...searchKeymap,
+				...historyKeymap,
+				...lintKeymap,
+				...completionKeymap,
+				indentWithTab,
+				selectAll // selectAll 추가
+			]),
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			autocompletion(),
+		];
+
+		// asis 에디터 생성 (읽기 전용)
+		this.#asisEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: [
+					basicExtensions,
+					javascript(), // JS 언어 모드 (기본)
+					EditorState.readOnly.of(true), // asis는 읽기 전용
+					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
+					asisDiffDecorations // asis 에디터에 Diff 데코레이션 필드 추가
+				]
+			}),
+			parent: this.#asisEditorEl
+		});
+
+		// tobe 에디터 생성 (읽기 전용, 필요 시 편집 가능하게 설정)
+		this.#tobeEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: [
+					basicExtensions,
+					javascript(), // JS 언어 모드 (기본)
+					EditorState.readOnly.of(true), // tobe도 읽기 전용
+					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
+					tobeDiffDecorations // tobe 에디터에 Diff 데코레이션 필드 추가
+				]
+			}),
+			parent: this.#tobeEditorEl
+		});
+
+		this.#setupScrollSync();
+	};
+
+	#setupScrollSync = () => {
+		let scrollingA = false;
+		let scrollingB = false;
+
+		this.#asisEditorView.scrollDOM.addEventListener('scroll', () => {
+			if (!scrollingB) {
+				scrollingA = true;
+				this.#tobeEditorView.scrollDOM.scrollTop = this.#asisEditorView.scrollDOM.scrollTop;
+				this.#tobeEditorView.scrollDOM.scrollLeft = this.#asisEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingB = false;
+		});
+
+		this.#tobeEditorView.scrollDOM.addEventListener('scroll', () => {
+			if (!scrollingA) {
+				scrollingB = true;
+				this.#asisEditorView.scrollDOM.scrollTop = this.#tobeEditorView.scrollDOM.scrollTop;
+				this.#asisEditorView.scrollDOM.scrollLeft = this.#tobeEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingA = false;
 		});
-		// 이 라이브러리가 내부적으로 두 개의 EditorView를 만들고 관리합니다.
-		// 스크롤 동기화, Diff 시각화 등은 이 라이브러리가 처리합니다.
 	};
 
-	initialize = (src1, src2) => {
-		if (!this.#diffEditorInstance) {
-			console.warn('CodeMirror Diff Editor not initialized yet.');
+	// ⭐️⭐️⭐️ Diff 데코레이션 적용 로직 구현 ⭐️⭐️⭐️
+	#applyDiffDecorations = (asisSrc, tobeSrc) => {
+		const dmp = new diff_match_patch();
+		const diffs = dmp.diff_main(asisSrc, tobeSrc);
+		dmp.diff_cleanupSemantic(diffs);
+
+		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({
+			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
+		});
+		this.#tobeEditorView.dispatch({
+			effects: setTobeDecorationsEffect.of(tobeBuilder.finish())
+		});
+	};
+
+	initialize = (src1, src2, language = 'javascript') => {
+		if (!this.#asisEditorView || !this.#tobeEditorView) {
+			console.warn('CodeMirror Editors not initialized yet.');
 			return;
 		}
-		this.#diffEditorInstance.setValues(src1, src2);
+
+		// 언어 변경 (선택 사항, 필요 시 활성화)
+		let langExtension;
+		switch(language) {
+			case 'javascript':
+				langExtension = javascript();
+				break;
+			// case 'html':
+			//     import { html } from "@codemirror/lang-html"; // 상단에 임포트 필요
+			//     langExtension = html();
+			//     break;
+			// case 'css':
+			//     import { css } from "@codemirror/lang-css";   // 상단에 임포트 필요
+			//     langExtension = css();
+			//     break;
+			default:
+				langExtension = javascript();
+		}
+
+		// 언어 확장 업데이트
+		this.#asisEditorView.dispatch({
+			effects: this.#languageCompartment.reconfigure(langExtension)
+		});
+		this.#tobeEditorView.dispatch({
+			effects: this.#languageCompartment.reconfigure(langExtension)
+		});
+
+		// 텍스트 내용 업데이트
+		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() {
-		if (this.#diffEditorInstance) {
-			this.#diffEditorInstance.destroy(); // 인스턴스 정리 메서드 호출 (라이브러리마다 다름)
+		if (this.#asisEditorView) {
+			this.#asisEditorView.destroy();
+		}
+		if (this.#tobeEditorView) {
+			this.#tobeEditorView.destroy();
 		}
 	}
 }