ide-assi 0.361.0 → 0.362.0

package/dist/components/ideDiff.js

@@ -129,58 +129,89 @@ export class IdeDiff extends HTMLElement {
 	}
 
 	#initCodeMirror = () => {
-		// ... (기존 코드) ...
-
-		const initialExtensions = [
-			basicExtensions,
-			javascript(),
-			EditorState.readOnly.of(true),
-			this.#languageCompartment.of(javascript()),
-			asisDiffDecorations,
-			// ⭐️ updateListener 추가
-			EditorView.updateListener.of((update) => {
-				// 뷰가 첫 번째 업데이트를 완료하고 모든 DOM이 생성된 후
-				if (update.view.contentDOM.firstChild && !update.view._initialContentLoaded) {
-					update.view._initialContentLoaded = true; // 플래그 설정
-					// ⭐️ 이 시점에서 initialize 호출 (예시, 실제 데이터는 외부에서 받아야 함)
-					// this.initialize("const old = 'value';", "const new = 'value';\nconsole.log('diff');");
-					console.log("CodeMirror ASIS view is ready for initial content.");
-				}
-			})
+		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;
+		}
+
+		const basicExtensions = [
+			lineNumbers(),
+			highlightSpecialChars(),
+			history(),
+			drawSelection(),
+			dropCursor(),
+			EditorState.allowMultipleSelections.of(true),
+			indentOnInput(),
+			bracketMatching(),
+			highlightActiveLine(),
+			highlightSelectionMatches(),
+			keymap.of([
+				...defaultKeymap,
+				...searchKeymap,
+				...historyKeymap,
+				...lintKeymap,
+				...completionKeymap,
+				indentWithTab,
+				selectAll
+			]),
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			autocompletion(),
 		];
 
+		// ASIS 에디터 뷰 초기화
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: initialExtensions // 수정된 extensions 사용
+				extensions: [
+					basicExtensions,
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					asisDiffDecorations,
+					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					EditorView.updateListener.of((update) => {
+						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
+						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
+							update.view._initialAsisContentLoaded = true; // 플래그 설정
+							console.log("CodeMirror ASIS view is ready for initial content.");
+							// 뷰가 준비되었을 때 initialize를 호출해야 한다면 여기에 로직 추가 (예: 외부에서 데이터 주입)
+							// 예시: this.initialize("초기 ASIS 코드", "초기 TOBE 코드");
+							// 단, initialize는 한 번만 호출되도록 외부 로직을 구성해야 합니다.
+						}
+					})
+				]
 			}),
 			parent: this.#asisEditorEl
 		});
 
-		// TOBE 에디터도 동일하게 처리
-		const tobeInitialExtensions = [
-			basicExtensions,
-			javascript(),
-			EditorState.readOnly.of(true),
-			this.#languageCompartment.of(javascript()),
-			tobeDiffDecorations,
-			EditorView.updateListener.of((update) => {
-				if (update.view.contentDOM.firstChild && !update.view._initialContentLoaded) {
-					update.view._initialContentLoaded = true;
-					console.log("CodeMirror TOBE view is ready for initial content.");
-				}
-			})
-		];
-
+		// TOBE 에디터 뷰 초기화
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: tobeInitialExtensions
+				extensions: [
+					basicExtensions,
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					tobeDiffDecorations,
+					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					EditorView.updateListener.of((update) => {
+						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
+						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
+							update.view._initialTobeContentLoaded = true; // 플래그 설정
+							console.log("CodeMirror TOBE view is ready for initial content.");
+						}
+					})
+				]
 			}),
 			parent: this.#tobeEditorEl
 		});
 
-		// 스크롤 동기화 설정 (여전히 초기에는 비활성화 상태)
+		// ⭐️ 스크롤 동기화는 여기서 설정만 하고, `initialize` 함수 내에서 활성화 시점을 제어합니다.
+		// (이전 단계에서 이미 `initialize`에 활성/비활성화 로직을 추가했다고 가정)
 		this.#setupScrollSync();
 	};
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.361.0",
+  "version": "0.362.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -129,58 +129,89 @@ export class IdeDiff extends HTMLElement {
 	}
 
 	#initCodeMirror = () => {
-		// ... (기존 코드) ...
-
-		const initialExtensions = [
-			basicExtensions,
-			javascript(),
-			EditorState.readOnly.of(true),
-			this.#languageCompartment.of(javascript()),
-			asisDiffDecorations,
-			// ⭐️ updateListener 추가
-			EditorView.updateListener.of((update) => {
-				// 뷰가 첫 번째 업데이트를 완료하고 모든 DOM이 생성된 후
-				if (update.view.contentDOM.firstChild && !update.view._initialContentLoaded) {
-					update.view._initialContentLoaded = true; // 플래그 설정
-					// ⭐️ 이 시점에서 initialize 호출 (예시, 실제 데이터는 외부에서 받아야 함)
-					// this.initialize("const old = 'value';", "const new = 'value';\nconsole.log('diff');");
-					console.log("CodeMirror ASIS view is ready for initial content.");
-				}
-			})
+		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;
+		}
+
+		const basicExtensions = [
+			lineNumbers(),
+			highlightSpecialChars(),
+			history(),
+			drawSelection(),
+			dropCursor(),
+			EditorState.allowMultipleSelections.of(true),
+			indentOnInput(),
+			bracketMatching(),
+			highlightActiveLine(),
+			highlightSelectionMatches(),
+			keymap.of([
+				...defaultKeymap,
+				...searchKeymap,
+				...historyKeymap,
+				...lintKeymap,
+				...completionKeymap,
+				indentWithTab,
+				selectAll
+			]),
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			autocompletion(),
 		];
 
+		// ASIS 에디터 뷰 초기화
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: initialExtensions // 수정된 extensions 사용
+				extensions: [
+					basicExtensions,
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					asisDiffDecorations,
+					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					EditorView.updateListener.of((update) => {
+						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
+						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
+							update.view._initialAsisContentLoaded = true; // 플래그 설정
+							console.log("CodeMirror ASIS view is ready for initial content.");
+							// 뷰가 준비되었을 때 initialize를 호출해야 한다면 여기에 로직 추가 (예: 외부에서 데이터 주입)
+							// 예시: this.initialize("초기 ASIS 코드", "초기 TOBE 코드");
+							// 단, initialize는 한 번만 호출되도록 외부 로직을 구성해야 합니다.
+						}
+					})
+				]
 			}),
 			parent: this.#asisEditorEl
 		});
 
-		// TOBE 에디터도 동일하게 처리
-		const tobeInitialExtensions = [
-			basicExtensions,
-			javascript(),
-			EditorState.readOnly.of(true),
-			this.#languageCompartment.of(javascript()),
-			tobeDiffDecorations,
-			EditorView.updateListener.of((update) => {
-				if (update.view.contentDOM.firstChild && !update.view._initialContentLoaded) {
-					update.view._initialContentLoaded = true;
-					console.log("CodeMirror TOBE view is ready for initial content.");
-				}
-			})
-		];
-
+		// TOBE 에디터 뷰 초기화
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: tobeInitialExtensions
+				extensions: [
+					basicExtensions,
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					tobeDiffDecorations,
+					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					EditorView.updateListener.of((update) => {
+						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
+						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
+							update.view._initialTobeContentLoaded = true; // 플래그 설정
+							console.log("CodeMirror TOBE view is ready for initial content.");
+						}
+					})
+				]
 			}),
 			parent: this.#tobeEditorEl
 		});
 
-		// 스크롤 동기화 설정 (여전히 초기에는 비활성화 상태)
+		// ⭐️ 스크롤 동기화는 여기서 설정만 하고, `initialize` 함수 내에서 활성화 시점을 제어합니다.
+		// (이전 단계에서 이미 `initialize`에 활성/비활성화 로직을 추가했다고 가정)
 		this.#setupScrollSync();
 	};