ide-assi 0.330.0 → 0.333.0

package/src/components/ideDiff.js

@@ -1,12 +1,31 @@
 import ninegrid from "ninegrid2";
-import {diff_match_patch} from 'diff-match-patch';
 
-export class IdeDiff extends HTMLElement
-{
-	#asisSrc;
-	#tobeSrc;
-	#asisPre; // <pre> 요소 참조 저장
-	#tobePre; // <pre> 요소 참조 저장
+// CodeMirror 6 핵심 및 확장 임포트
+import { EditorView, lineNumbers, highlightSpecialChars, drawSelection, dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter } from "@codemirror/view";
+import { EditorState, Compartment } from "@codemirror/state";
+import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
+// ⭐️ 여기서 searchKeymap을 제거합니다.
+import { defaultKeymap, selectAll } from "@codemirror/commands"; // selectAll은 commands에 남아있습니다.
+// ⭐️ searchKeymap은 이제 @codemirror/search 에서 가져옵니다.
+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 { lintKeymap } from "@codemirror/lint";
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+
+// Diff 로직을 위해 diff-match-patch 사용
+import { diff_match_patch } from 'diff-match-patch';
+
+// ... (나머지 IdeDiff 클래스 코드는 동일) ...
+
+export class IdeDiff extends HTMLElement {
+	#asisEditorView; // asis 패널의 CodeMirror EditorView 인스턴스
+	#tobeEditorView; // tobe 패널의 CodeMirror EditorView 인스턴스
+	#asisEditorEl;   // asis 에디터를 렌더링할 DOM 요소
+	#tobeEditorEl;   // tobe 에디터를 렌더링할 DOM 요소
+
+	#languageCompartment = new Compartment(); // 언어 확장을 동적으로 변경하기 위한 Compartment
 
 	constructor() {
 		super();
@@ -15,127 +34,227 @@ export class IdeDiff extends HTMLElement
 
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
-          <style>
-             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
-             * {
-                box-sizing: border-box;
-             }
-             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-             ${ninegrid.getCustomPath(this,"ideDiff.css")}
-
-             /* 추가 CSS (필요 시) */
-             .wrapper {
-                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
-                 height: 100%; /* 부모의 높이를 채우도록 설정 */
-                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
-             }
-             .panel {
-                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
-                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
-                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
-             }
-             .panel pre {
-                 margin: 0; /* pre 태그의 기본 마진 제거 */
-                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
-                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
-                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
-                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
-                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
-             }
-             ins {
-                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
-                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
-             }
-             del {
-                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
-                 text-decoration: none; /* 취소선 제거 (일반적으로) */
-             }
-          </style>
-
-          <div class="wrapper">
-             <div class="panel asis"><pre></pre></div>
-             <nx-splitter></nx-splitter>
-             <div class="panel tobe"><pre></pre></div>
-          </div>
-       `;
+            <style>
+                /* ninegrid CSS 및 필요한 기본 스타일 */
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+                ${ninegrid.getCustomPath(this, "ideDiff.css")}
+
+                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 */
+                .wrapper {
+                    display: flex;
+                    width: 100%;
+                    height: 100%; /* 부모의 높이를 채우도록 설정 */
+                    overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+                }
+                .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; /* 삽입된 줄 배경 */
+                }
+                .cm-deleted-inline {
+                    background-color: #ffcccc; /* 인라인 삭제 */
+                    text-decoration: line-through;
+                }
+                .cm-inserted-inline {
+                    background-color: #ccffcc; /* 인라인 삽입 */
+                }
+            </style>
+
+            <div class="wrapper">
+                <div class="panel asis"></div>
+                <nx-splitter></nx-splitter>
+                <div class="panel tobe"></div>
+            </div>
+        `;
 
 		requestAnimationFrame(() => {
-			this.#init();
+			this.#initCodeMirror();
 		});
-	};
+	}
 
-	#init = () => {
-		// 패널 pre 요소에 대한 참조를 저장
-		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
-		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
+	#initCodeMirror = () => {
+		this.#asisEditorEl = this.shadowRoot.querySelector('.panel.asis');
+		this.#tobeEditorEl = this.shadowRoot.querySelector('.panel.tobe');
 
-		// 스크롤 동기화 이벤트 리스너 추가
-		this.#asisPre.addEventListener('scroll', this.#syncScroll);
-		this.#tobePre.addEventListener('scroll', this.#syncScroll);
+		if (!this.#asisEditorEl || !this.#tobeEditorEl) {
+			console.error('CodeMirror panel containers not found!');
+			return;
+		}
+
+		// CodeMirror 확장 기본 설정
+		const basicExtensions = [
+			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 // 탭으로 들여쓰기 (필요시)
+			]),
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }), // 기본 구문 하이라이팅
+			autocompletion(), // 자동 완성
+			// EditorState.readOnly.of(true) // 기본적으로 읽기 전용으로 설정
+		];
+
+		// asis 에디터 생성 (읽기 전용)
+		this.#asisEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '', // 초기 내용 비워둠
+				extensions: [
+					basicExtensions,
+					javascript(), // JS 언어 모드 (필요에 따라 변경)
+					EditorState.readOnly.of(true), // asis는 읽기 전용
+					this.#languageCompartment.of(javascript()) // 언어 변경을 위한 compartment
+				]
+			}),
+			parent: this.#asisEditorEl
+		});
+
+		// tobe 에디터 생성 (읽기 전용, 또는 편집 가능하게 할 수도 있음)
+		this.#tobeEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '', // 초기 내용 비워둠
+				extensions: [
+					basicExtensions,
+					javascript(), // JS 언어 모드 (필요에 따라 변경)
+					EditorState.readOnly.of(true), // tobe도 읽기 전용으로 설정 (필요시 false)
+					this.#languageCompartment.of(javascript()) // 언어 변경을 위한 compartment
+				]
+			}),
+			parent: this.#tobeEditorEl
+		});
+
+		// 스크롤 동기화 설정
+		this.#setupScrollSync();
 	};
 
-	#syncScroll = (e) => {
-		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
-		// `e.target`이 스크롤 이벤트를 발생시킨 요소
-		if (e.target === this.#asisPre) {
-			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
-		} else if (e.target === this.#tobePre) {
-			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
-		}
+	#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;
+		});
 	};
 
-	#renderDiff = () => {
+	// Diff를 계산하고 에디터에 적용하는 메서드
+	#renderDiff = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
-		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
-		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
-		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
-
-		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
+		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		const asisHtml = [];
-		const tobeHtml = [];
-
-		for (const [op, text] of diffs) {
-			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
-			const escapedText = text
-				.replace(/&/g, '&amp;')
-				.replace(/</g, '&lt;')
-				.replace(/>/g, '&gt;');
-
-			switch (op) {
-				case diff_match_patch.DIFF_INSERT:
-					tobeHtml.push(`<ins>${escapedText}</ins>`);
-					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
-					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
-					break;
-				case diff_match_patch.DIFF_DELETE:
-					asisHtml.push(`<del>${escapedText}</del>`);
-					// 추가된 내용이 없으므로 tobe에는 공백을 유지
-					break;
-				case diff_match_patch.DIFF_EQUAL:
-					asisHtml.push(`<span>${escapedText}</span>`);
-					tobeHtml.push(`<span>${escapedText}</span>`);
-					break;
-			}
-		}
+		// 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;
+		//     }
+		// }
+		// 에디터 상태를 업데이트하고 데코레이션을 적용하는 복잡한 로직이 필요합니다.
+		// 이 예시에서는 생략하지만, 실제 구현 시 핵심이 됩니다.
 
-		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
-		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
-		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
-		this.#asisPre.innerHTML = asisHtml.join('');
-		this.#tobePre.innerHTML = tobeHtml.join('');
+		// 현재는 단순히 텍스트만 업데이트
+		this.#asisEditorView.dispatch({
+			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: asisSrc }
+		});
+		this.#tobeEditorView.dispatch({
+			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: tobeSrc }
+		});
 	};
 
+	initialize = (src1, src2, language = 'javascript') => {
+		if (!this.#asisEditorView || !this.#tobeEditorView) {
+			console.warn('CodeMirror Editors not initialized yet.');
+			return;
+		}
 
-	initialize = (src1, src2) => {
-		console.log("Initializing IdeDiff with sources:", src1, src2);
+		// 언어 변경 (선택 사항, 필요 시 활성화)
+		let langExtension;
+		switch(language) {
+			case 'javascript':
+				langExtension = javascript();
+				break;
+			// case 'html':
+			//     langExtension = html(); // @codemirror/lang-html 임포트 필요
+			//     break;
+			// case 'css':
+			//     langExtension = css();   // @codemirror/lang-css 임포트 필요
+			//     break;
+			default:
+				langExtension = javascript(); // 기본값
+		}
 
-		this.#asisSrc = src1;
-		this.#tobeSrc = src2;
+		// 언어 확장 업데이트
+		this.#asisEditorView.dispatch({
+			effects: this.#languageCompartment.reconfigure(langExtension)
+		});
+		this.#tobeEditorView.dispatch({
+			effects: this.#languageCompartment.reconfigure(langExtension)
+		});
 
-		this.#renderDiff();
+		this.#renderDiff(src1, src2);
 	};
-}
 
+	disconnectedCallback() {
+		// 컴포넌트가 DOM에서 제거될 때 에디터 인스턴스 정리
+		if (this.#asisEditorView) {
+			this.#asisEditorView.destroy();
+		}
+		if (this.#tobeEditorView) {
+			this.#tobeEditorView.destroy();
+		}
+	}
+}
 customElements.define("ide-diff", IdeDiff);

package/src/components/ideDiff.js.bak

@@ -0,0 +1,141 @@
+import ninegrid from "ninegrid2";
+import {diff_match_patch} from 'diff-match-patch';
+
+export class IdeDiff extends HTMLElement
+{
+	#asisSrc;
+	#tobeSrc;
+	#asisPre; // <pre> 요소 참조 저장
+	#tobePre; // <pre> 요소 참조 저장
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = `
+          <style>
+             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
+             * {
+                box-sizing: border-box;
+             }
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+             ${ninegrid.getCustomPath(this,"ideDiff.css")}
+
+             /* 추가 CSS (필요 시) */
+             .wrapper {
+                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
+                 height: 100%; /* 부모의 높이를 채우도록 설정 */
+                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+             }
+             .panel {
+                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
+                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
+                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
+             }
+             .panel pre {
+                 margin: 0; /* pre 태그의 기본 마진 제거 */
+                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
+                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
+                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
+                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
+                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
+             }
+             ins {
+                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
+             }
+             del {
+                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
+                 text-decoration: none; /* 취소선 제거 (일반적으로) */
+             }
+          </style>
+
+          <div class="wrapper">
+             <div class="panel asis"><pre></pre></div>
+             <nx-splitter></nx-splitter>
+             <div class="panel tobe"><pre></pre></div>
+          </div>
+       `;
+
+		requestAnimationFrame(() => {
+			this.#init();
+		});
+	};
+
+	#init = () => {
+		// 패널 pre 요소에 대한 참조를 저장
+		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
+		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
+
+		// 스크롤 동기화 이벤트 리스너 추가
+		this.#asisPre.addEventListener('scroll', this.#syncScroll);
+		this.#tobePre.addEventListener('scroll', this.#syncScroll);
+	};
+
+	#syncScroll = (e) => {
+		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
+		// `e.target`이 스크롤 이벤트를 발생시킨 요소
+		if (e.target === this.#asisPre) {
+			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
+		} else if (e.target === this.#tobePre) {
+			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
+		}
+	};
+
+	#renderDiff = () => {
+		const dmp = new diff_match_patch();
+		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
+		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
+		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
+
+		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
+		dmp.diff_cleanupSemantic(diffs);
+
+		const asisHtml = [];
+		const tobeHtml = [];
+
+		for (const [op, text] of diffs) {
+			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
+			const escapedText = text
+				.replace(/&/g, '&amp;')
+				.replace(/</g, '&lt;')
+				.replace(/>/g, '&gt;');
+
+			switch (op) {
+				case diff_match_patch.DIFF_INSERT:
+					tobeHtml.push(`<ins>${escapedText}</ins>`);
+					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
+					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
+					break;
+				case diff_match_patch.DIFF_DELETE:
+					asisHtml.push(`<del>${escapedText}</del>`);
+					// 추가된 내용이 없으므로 tobe에는 공백을 유지
+					break;
+				case diff_match_patch.DIFF_EQUAL:
+					asisHtml.push(`<span>${escapedText}</span>`);
+					tobeHtml.push(`<span>${escapedText}</span>`);
+					break;
+			}
+		}
+
+		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
+		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
+		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
+		this.#asisPre.innerHTML = asisHtml.join('');
+		this.#tobePre.innerHTML = tobeHtml.join('');
+	};
+
+
+	initialize = (src1, src2) => {
+		console.log("Initializing IdeDiff with sources:", src1, src2);
+
+		this.#asisSrc = src1;
+		this.#tobeSrc = src2;
+
+		this.#renderDiff();
+	};
+}
+
+customElements.define("ide-diff", IdeDiff);