ide-assi 0.360.0 → 0.361.0

package/dist/bundle.cjs.js

@@ -227115,7 +227115,7 @@ function requireDiffMatchPatch () {
 var diffMatchPatchExports = requireDiffMatchPatch();
 
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
-StateField.define({
+const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -227129,7 +227129,7 @@ StateField.define({
 });
 
 // Diff 데코레이션을 위한 StateField 정의 (tobe 에디터용)
-StateField.define({
+const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -227219,7 +227219,59 @@ class IdeDiff extends HTMLElement {
 	}
 
 	#initCodeMirror = () => {
-		return;
+		// ... (기존 코드) ...
+
+		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.#asisEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: initialExtensions // 수정된 extensions 사용
+			}),
+			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.");
+				}
+			})
+		];
+
+		this.#tobeEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: tobeInitialExtensions
+			}),
+			parent: this.#tobeEditorEl
+		});
+
+		// 스크롤 동기화 설정 (여전히 초기에는 비활성화 상태)
+		this.#setupScrollSync();
 	};
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용

package/dist/bundle.esm.js

@@ -227111,7 +227111,7 @@ function requireDiffMatchPatch () {
 var diffMatchPatchExports = requireDiffMatchPatch();
 
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
-StateField.define({
+const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -227125,7 +227125,7 @@ StateField.define({
 });
 
 // Diff 데코레이션을 위한 StateField 정의 (tobe 에디터용)
-StateField.define({
+const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -227215,7 +227215,59 @@ class IdeDiff extends HTMLElement {
 	}
 
 	#initCodeMirror = () => {
-		return;
+		// ... (기존 코드) ...
+
+		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.#asisEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: initialExtensions // 수정된 extensions 사용
+			}),
+			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.");
+				}
+			})
+		];
+
+		this.#tobeEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: tobeInitialExtensions
+			}),
+			parent: this.#tobeEditorEl
+		});
+
+		// 스크롤 동기화 설정 (여전히 초기에는 비활성화 상태)
+		this.#setupScrollSync();
 	};
 
 	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용

package/dist/components/ideDiff.js

@@ -129,69 +129,58 @@ export class IdeDiff extends HTMLElement {
 	}
 
 	#initCodeMirror = () => {
-		return;
-
-		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(),
+		// ... (기존 코드) ...
+
+		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.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: [
-					basicExtensions,
-					javascript(),
-					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations
-				]
+				extensions: initialExtensions // 수정된 extensions 사용
 			}),
 			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.");
+				}
+			})
+		];
+
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: [
-					basicExtensions,
-					javascript(),
-					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations
-				]
+				extensions: tobeInitialExtensions
 			}),
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
+		// 스크롤 동기화 설정 (여전히 초기에는 비활성화 상태)
 		this.#setupScrollSync();
 	};
 

package/package.json

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

package/src/components/ideDiff.js

@@ -129,69 +129,58 @@ export class IdeDiff extends HTMLElement {
 	}
 
 	#initCodeMirror = () => {
-		return;
-
-		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(),
+		// ... (기존 코드) ...
+
+		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.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: [
-					basicExtensions,
-					javascript(),
-					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations
-				]
+				extensions: initialExtensions // 수정된 extensions 사용
 			}),
 			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.");
+				}
+			})
+		];
+
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
-				extensions: [
-					basicExtensions,
-					javascript(),
-					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations
-				]
+				extensions: tobeInitialExtensions
 			}),
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
+		// 스크롤 동기화 설정 (여전히 초기에는 비활성화 상태)
 		this.#setupScrollSync();
 	};