ide-assi 0.356.0 → 0.358.0

package/dist/bundle.cjs.js

@@ -234805,7 +234805,6 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -234818,6 +234817,12 @@ class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
+	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
+	#isScrollSyncActive = false;
+	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -234936,33 +234941,16 @@ class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		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;
-		});
+		return;
 	};
 
-	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
+	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -234976,8 +234964,6 @@ class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
-		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -234995,7 +234981,6 @@ class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ this.#tobeEditorView.state.doc 대신 tobeDoc 사용
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -235023,7 +235008,6 @@ class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ this.#asisEditorView.state.doc 대신 asisDoc 사용
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -235083,13 +235067,15 @@ class IdeDiff extends HTMLElement {
 		};
 	};
 
-	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
 			return;
 		}
 
+		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		this.#isScrollSyncActive = false;
+
 		let langExtension;
 		switch(language) {
 			case 'javascript':
@@ -235102,13 +235088,12 @@ class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		console.log(asisEffect, tobeEffect);
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
 				this.#languageCompartment.reconfigure(langExtension),
-				asisEffect // 계산된 데코레이션 효과를 포함
+				asisEffect
 			]
 		});
 
@@ -235116,13 +235101,29 @@ class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				//this.#languageCompartment.reconfigure(langExtension),
-				//tobeEffect // 계산된 데코레이션 효과를 포함
+				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
+				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
 		});
+
+		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
+		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		requestAnimationFrame(() => {
+			this.#isScrollSyncActive = true;
+			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+			// this.#asisEditorView.scrollDOM.scrollTop = 0;
+			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+		});
 	};
 
 	disconnectedCallback() {
+		// 컴포넌트 해제 시 스크롤 리스너 제거
+		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+			this._asisScrollHandler = null; // 참조 제거
+			this._tobeScrollHandler = null; // 참조 제거
+		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();
 		}

package/dist/bundle.esm.js

@@ -234801,7 +234801,6 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -234814,6 +234813,12 @@ class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
+	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
+	#isScrollSyncActive = false;
+	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -234932,33 +234937,16 @@ class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		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;
-		});
+		return;
 	};
 
-	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
+	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -234972,8 +234960,6 @@ class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
-		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -234991,7 +234977,6 @@ class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ this.#tobeEditorView.state.doc 대신 tobeDoc 사용
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -235019,7 +235004,6 @@ class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ this.#asisEditorView.state.doc 대신 asisDoc 사용
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -235079,13 +235063,15 @@ class IdeDiff extends HTMLElement {
 		};
 	};
 
-	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
 			return;
 		}
 
+		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		this.#isScrollSyncActive = false;
+
 		let langExtension;
 		switch(language) {
 			case 'javascript':
@@ -235098,13 +235084,12 @@ class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		console.log(asisEffect, tobeEffect);
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
 				this.#languageCompartment.reconfigure(langExtension),
-				asisEffect // 계산된 데코레이션 효과를 포함
+				asisEffect
 			]
 		});
 
@@ -235112,13 +235097,29 @@ class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				//this.#languageCompartment.reconfigure(langExtension),
-				//tobeEffect // 계산된 데코레이션 효과를 포함
+				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
+				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
 		});
+
+		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
+		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		requestAnimationFrame(() => {
+			this.#isScrollSyncActive = true;
+			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+			// this.#asisEditorView.scrollDOM.scrollTop = 0;
+			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+		});
 	};
 
 	disconnectedCallback() {
+		// 컴포넌트 해제 시 스크롤 리스너 제거
+		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+			this._asisScrollHandler = null; // 참조 제거
+			this._tobeScrollHandler = null; // 참조 제거
+		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();
 		}

package/dist/components/ideDiff.js

@@ -15,7 +15,6 @@ import {
 import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultKeymap, selectAll } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-// 올바른 import 구문: '=>' 대신 'from'
 import { bracketMatching } from "@codemirror/language";
 import { javascript } from "@codemirror/lang-javascript";
 import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
@@ -23,7 +22,7 @@ import { lintKeymap } from "@codemirror/lint";
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 
 // Diff 로직을 위해 diff-match-patch 사용
-import { diff_match_patch } from 'diff-match-patch'; // 올바른 패키지 이름: 하이픈 '-'
+import { diff_match_patch } from 'diff-match-patch';
 
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
@@ -54,7 +53,6 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -67,6 +65,12 @@ export class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
+	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
+	#isScrollSyncActive = false;
+	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -185,33 +189,49 @@ export class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
+	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
+		return;
+		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
+		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+		}
+
 		let scrollingA = false;
 		let scrollingB = false;
 
-		this.#asisEditorView.scrollDOM.addEventListener('scroll', () => {
+		this._asisScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+
 			if (!scrollingB) {
 				scrollingA = true;
 				this.#tobeEditorView.scrollDOM.scrollTop = this.#asisEditorView.scrollDOM.scrollTop;
 				this.#tobeEditorView.scrollDOM.scrollLeft = this.#asisEditorView.scrollDOM.scrollLeft;
 			}
 			scrollingB = false;
-		});
+		};
+
+		this._tobeScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
 
-		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;
-		});
+		};
+
+		this.#asisEditorView.scrollDOM.addEventListener('scroll', this._asisScrollHandler);
+		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
+	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -225,8 +245,6 @@ export class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
-		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -244,7 +262,6 @@ export class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ this.#tobeEditorView.state.doc 대신 tobeDoc 사용
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -272,7 +289,6 @@ export class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ this.#asisEditorView.state.doc 대신 asisDoc 사용
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -332,13 +348,15 @@ export class IdeDiff extends HTMLElement {
 		};
 	};
 
-	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
 			return;
 		}
 
+		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		this.#isScrollSyncActive = false;
+
 		let langExtension;
 		switch(language) {
 			case 'javascript':
@@ -351,13 +369,12 @@ export class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		console.log(asisEffect, tobeEffect);
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
 				this.#languageCompartment.reconfigure(langExtension),
-				asisEffect // 계산된 데코레이션 효과를 포함
+				asisEffect
 			]
 		});
 
@@ -365,13 +382,29 @@ export class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				//this.#languageCompartment.reconfigure(langExtension),
-				//tobeEffect // 계산된 데코레이션 효과를 포함
+				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
+				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
 		});
+
+		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
+		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		requestAnimationFrame(() => {
+			this.#isScrollSyncActive = true;
+			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+			// this.#asisEditorView.scrollDOM.scrollTop = 0;
+			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+		});
 	};
 
 	disconnectedCallback() {
+		// 컴포넌트 해제 시 스크롤 리스너 제거
+		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+			this._asisScrollHandler = null; // 참조 제거
+			this._tobeScrollHandler = null; // 참조 제거
+		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();
 		}

package/package.json

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

package/src/components/ideDiff.js

@@ -15,7 +15,6 @@ import {
 import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultKeymap, selectAll } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-// 올바른 import 구문: '=>' 대신 'from'
 import { bracketMatching } from "@codemirror/language";
 import { javascript } from "@codemirror/lang-javascript";
 import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
@@ -23,7 +22,7 @@ import { lintKeymap } from "@codemirror/lint";
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 
 // Diff 로직을 위해 diff-match-patch 사용
-import { diff_match_patch } from 'diff-match-patch'; // 올바른 패키지 이름: 하이픈 '-'
+import { diff_match_patch } from 'diff-match-patch';
 
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
@@ -54,7 +53,6 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -67,6 +65,12 @@ export class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
+	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
+	#isScrollSyncActive = false;
+	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -185,33 +189,49 @@ export class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
+		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
+	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
+		return;
+		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
+		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+		}
+
 		let scrollingA = false;
 		let scrollingB = false;
 
-		this.#asisEditorView.scrollDOM.addEventListener('scroll', () => {
+		this._asisScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+
 			if (!scrollingB) {
 				scrollingA = true;
 				this.#tobeEditorView.scrollDOM.scrollTop = this.#asisEditorView.scrollDOM.scrollTop;
 				this.#tobeEditorView.scrollDOM.scrollLeft = this.#asisEditorView.scrollDOM.scrollLeft;
 			}
 			scrollingB = false;
-		});
+		};
+
+		this._tobeScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
 
-		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;
-		});
+		};
+
+		this.#asisEditorView.scrollDOM.addEventListener('scroll', this._asisScrollHandler);
+		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
+	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -225,8 +245,6 @@ export class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
-		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -244,7 +262,6 @@ export class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ this.#tobeEditorView.state.doc 대신 tobeDoc 사용
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -272,7 +289,6 @@ export class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ this.#asisEditorView.state.doc 대신 asisDoc 사용
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -332,13 +348,15 @@ export class IdeDiff extends HTMLElement {
 		};
 	};
 
-	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
 			return;
 		}
 
+		// ⭐️ initialize 시작 시 스크롤 동기화 일시 중지
+		this.#isScrollSyncActive = false;
+
 		let langExtension;
 		switch(language) {
 			case 'javascript':
@@ -351,13 +369,12 @@ export class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		console.log(asisEffect, tobeEffect);
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
 				this.#languageCompartment.reconfigure(langExtension),
-				asisEffect // 계산된 데코레이션 효과를 포함
+				asisEffect
 			]
 		});
 
@@ -365,13 +382,29 @@ export class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.dispatch({
 			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
 			effects: [
-				//this.#languageCompartment.reconfigure(langExtension),
-				//tobeEffect // 계산된 데코레이션 효과를 포함
+				this.#languageCompartment.reconfigure(langExtension), // <-- 이 주석을 풀어주세요!
+				tobeEffect // <-- 이 주석을 풀어주세요!
 			]
 		});
+
+		// ⭐️ 모든 뷰 업데이트가 완료된 후 스크롤 동기화를 다시 활성화
+		// requestAnimationFrame을 사용하여 다음 브라우저 렌더링 사이클에서 실행
+		requestAnimationFrame(() => {
+			this.#isScrollSyncActive = true;
+			// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
+			// this.#asisEditorView.scrollDOM.scrollTop = 0;
+			// this.#tobeEditorView.scrollDOM.scrollTop = 0;
+		});
 	};
 
 	disconnectedCallback() {
+		// 컴포넌트 해제 시 스크롤 리스너 제거
+		if (this._asisScrollHandler) { // 핸들러가 존재하면 제거
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+			this._asisScrollHandler = null; // 참조 제거
+			this._tobeScrollHandler = null; // 참조 제거
+		}
 		if (this.#asisEditorView) {
 			this.#asisEditorView.destroy();
 		}