ide-assi 0.345.0 → 0.347.0

package/dist/bundle.cjs.js

@@ -234751,10 +234751,6 @@ function requireDiffMatchPatch () {
 
 var diffMatchPatchExports = requireDiffMatchPatch();
 
-// ... (나머지 코드는 동일) ...
-
-// --- 여기서부터 수정된 부분 ---
-
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
@@ -234784,12 +234780,10 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// ⭐️ StateEffect.define()을 사용하여 이펙트를 정의합니다.
+// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
-// --- 여기까지 수정된 부분 ---
-
 class IdeDiff extends HTMLElement {
 
 	#asisEditorView;
@@ -234943,6 +234937,7 @@ class IdeDiff extends HTMLElement {
 		});
 	};
 
+	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -234970,8 +234965,16 @@ class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+						// 중요한 변경: line.from/to는 현재 에디터 뷰의 doc에서 가져옵니다.
+						// 이 함수는 initialize 내에서 텍스트 변경과 함께 호출되므로,
+						// 이 시점의 this.#tobeEditorView.state.doc은 아직 이전 내용일 수 있습니다.
+						// 그러나, Effect로 반환되어 트랜잭션에 포함될 때 CodeMirror는
+						// Effect를 처리하는 시점에 이미 텍스트가 업데이트되었음을 보장합니다.
+						// 따라서 여기서 doc.length로 유효성 검사하는 것은 새로운 src2 기준이어야 더 정확합니다.
+						// 하지만, 이 라인은 결국 새로운 doc에서 실행될 것이므로,
+						// 여기서의 this.#tobeEditorView.state.doc.length 검사는 불필요하거나 오해의 소지가 있습니다.
+						// 대신, tobeCursor + len (또는 currentTobeLineOffset)이 tobeSrc의 길이를 벗어나지 않는지 확인하는 것이 좋습니다.
+						if (currentTobeLineOffset < tobeSrc.length) { // src2 (새로운 텍스트)의 길이와 비교
 							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
 								from: line.from,
@@ -234979,11 +234982,8 @@ class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
-						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
-						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
-						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
-							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
 							break;
 						}
 					}
@@ -235001,8 +235001,7 @@ class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+						if (currentAsisLineOffset < asisSrc.length) { // src1 (새로운 텍스트)의 길이와 비교
 							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
 								from: line.from,
@@ -235010,7 +235009,7 @@ class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
-						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
@@ -235026,13 +235025,11 @@ class IdeDiff extends HTMLElement {
 			}
 		}
 
-		// Sort all collections by 'from' position (항상 좋은 습관)
 		asisLineDecos.sort((a, b) => a.from - b.from);
 		asisMarkDecos.sort((a, b) => a.from - b.from);
 		tobeLineDecos.sort((a, b) => a.from - b.from);
 		tobeMarkDecos.sort((a, b) => a.from - b.from);
 
-		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
@@ -235041,13 +235038,10 @@ class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of asisMarkDecos) {
 			asisMarkBuilder.add(from, to, deco);
 		}
-
-		// ASIS 에디터용 줄 및 마크 RangeSet 결합
 		const finalAsisDecorations = asisLineBuilder.finish().update({
 			add: asisMarkBuilder.finish().children
 		});
 
-		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
@@ -235056,21 +235050,18 @@ class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of tobeMarkDecos) {
 			tobeMarkBuilder.add(from, to, deco);
 		}
-
-		// TOBE 에디터용 줄 및 마크 RangeSet 결합
 		const finalTobeDecorations = tobeLineBuilder.finish().update({
 			add: tobeMarkBuilder.finish().children
 		});
 
-		// 데코레이션 업데이트를 위한 Effect 디스패치
-		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
-		});
+		// ⭐️ 중요: 데코레이션 효과를 반환합니다. 여기서 직접 dispatch 하지 않습니다.
+		return {
+			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
+			tobeEffect: setTobeDecorationsEffect.of(finalTobeDecorations)
+		};
 	};
 
+	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -235086,23 +235077,26 @@ class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		this.#asisEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
+		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		// 텍스트 내용 업데이트
+		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
-			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 }
+			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				asisEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
+
+		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
-			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 }
+			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				tobeEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
-
-		// Diff 데코레이션 적용
-		this.#applyDiffDecorations(src1, src2);
 	};
 
 	disconnectedCallback() {

package/dist/bundle.esm.js

@@ -234747,10 +234747,6 @@ function requireDiffMatchPatch () {
 
 var diffMatchPatchExports = requireDiffMatchPatch();
 
-// ... (나머지 코드는 동일) ...
-
-// --- 여기서부터 수정된 부분 ---
-
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
@@ -234780,12 +234776,10 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// ⭐️ StateEffect.define()을 사용하여 이펙트를 정의합니다.
+// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
-// --- 여기까지 수정된 부분 ---
-
 class IdeDiff extends HTMLElement {
 
 	#asisEditorView;
@@ -234939,6 +234933,7 @@ class IdeDiff extends HTMLElement {
 		});
 	};
 
+	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -234966,8 +234961,16 @@ class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+						// 중요한 변경: line.from/to는 현재 에디터 뷰의 doc에서 가져옵니다.
+						// 이 함수는 initialize 내에서 텍스트 변경과 함께 호출되므로,
+						// 이 시점의 this.#tobeEditorView.state.doc은 아직 이전 내용일 수 있습니다.
+						// 그러나, Effect로 반환되어 트랜잭션에 포함될 때 CodeMirror는
+						// Effect를 처리하는 시점에 이미 텍스트가 업데이트되었음을 보장합니다.
+						// 따라서 여기서 doc.length로 유효성 검사하는 것은 새로운 src2 기준이어야 더 정확합니다.
+						// 하지만, 이 라인은 결국 새로운 doc에서 실행될 것이므로,
+						// 여기서의 this.#tobeEditorView.state.doc.length 검사는 불필요하거나 오해의 소지가 있습니다.
+						// 대신, tobeCursor + len (또는 currentTobeLineOffset)이 tobeSrc의 길이를 벗어나지 않는지 확인하는 것이 좋습니다.
+						if (currentTobeLineOffset < tobeSrc.length) { // src2 (새로운 텍스트)의 길이와 비교
 							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
 								from: line.from,
@@ -234975,11 +234978,8 @@ class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
-						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
-						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
-						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
-							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
 							break;
 						}
 					}
@@ -234997,8 +234997,7 @@ class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+						if (currentAsisLineOffset < asisSrc.length) { // src1 (새로운 텍스트)의 길이와 비교
 							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
 								from: line.from,
@@ -235006,7 +235005,7 @@ class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
-						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
@@ -235022,13 +235021,11 @@ class IdeDiff extends HTMLElement {
 			}
 		}
 
-		// Sort all collections by 'from' position (항상 좋은 습관)
 		asisLineDecos.sort((a, b) => a.from - b.from);
 		asisMarkDecos.sort((a, b) => a.from - b.from);
 		tobeLineDecos.sort((a, b) => a.from - b.from);
 		tobeMarkDecos.sort((a, b) => a.from - b.from);
 
-		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
@@ -235037,13 +235034,10 @@ class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of asisMarkDecos) {
 			asisMarkBuilder.add(from, to, deco);
 		}
-
-		// ASIS 에디터용 줄 및 마크 RangeSet 결합
 		const finalAsisDecorations = asisLineBuilder.finish().update({
 			add: asisMarkBuilder.finish().children
 		});
 
-		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
@@ -235052,21 +235046,18 @@ class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of tobeMarkDecos) {
 			tobeMarkBuilder.add(from, to, deco);
 		}
-
-		// TOBE 에디터용 줄 및 마크 RangeSet 결합
 		const finalTobeDecorations = tobeLineBuilder.finish().update({
 			add: tobeMarkBuilder.finish().children
 		});
 
-		// 데코레이션 업데이트를 위한 Effect 디스패치
-		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
-		});
+		// ⭐️ 중요: 데코레이션 효과를 반환합니다. 여기서 직접 dispatch 하지 않습니다.
+		return {
+			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
+			tobeEffect: setTobeDecorationsEffect.of(finalTobeDecorations)
+		};
 	};
 
+	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -235082,23 +235073,26 @@ class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		this.#asisEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
+		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		// 텍스트 내용 업데이트
+		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
-			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 }
+			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				asisEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
+
+		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
-			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 }
+			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				tobeEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
-
-		// Diff 데코레이션 적용
-		this.#applyDiffDecorations(src1, src2);
 	};
 
 	disconnectedCallback() {

package/dist/components/ideDiff.js

@@ -9,12 +9,12 @@ import {
 import {
 	EditorState, Compartment, StateField,
 	RangeSetBuilder,
-	StateEffect
+	StateEffect // StateEffect를 올바르게 임포트
 } from "@codemirror/state";
 import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultKeymap, selectAll } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-// ⭐️ 이 부분이 수정되었습니다: => 가 아니라 from 입니다.
+// 올바른 import 구문: '=>' 대신 'from'
 import { bracketMatching } from "@codemirror/language";
 import { javascript } from "@codemirror/lang-javascript";
 import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
@@ -22,11 +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({
@@ -57,12 +53,10 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// ⭐️ StateEffect.define()을 사용하여 이펙트를 정의합니다.
+// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
-// --- 여기까지 수정된 부분 ---
-
 export class IdeDiff extends HTMLElement {
 
 	#asisEditorView;
@@ -216,6 +210,7 @@ export class IdeDiff extends HTMLElement {
 		});
 	};
 
+	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -243,8 +238,16 @@ export class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+						// 중요한 변경: line.from/to는 현재 에디터 뷰의 doc에서 가져옵니다.
+						// 이 함수는 initialize 내에서 텍스트 변경과 함께 호출되므로,
+						// 이 시점의 this.#tobeEditorView.state.doc은 아직 이전 내용일 수 있습니다.
+						// 그러나, Effect로 반환되어 트랜잭션에 포함될 때 CodeMirror는
+						// Effect를 처리하는 시점에 이미 텍스트가 업데이트되었음을 보장합니다.
+						// 따라서 여기서 doc.length로 유효성 검사하는 것은 새로운 src2 기준이어야 더 정확합니다.
+						// 하지만, 이 라인은 결국 새로운 doc에서 실행될 것이므로,
+						// 여기서의 this.#tobeEditorView.state.doc.length 검사는 불필요하거나 오해의 소지가 있습니다.
+						// 대신, tobeCursor + len (또는 currentTobeLineOffset)이 tobeSrc의 길이를 벗어나지 않는지 확인하는 것이 좋습니다.
+						if (currentTobeLineOffset < tobeSrc.length) { // src2 (새로운 텍스트)의 길이와 비교
 							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
 								from: line.from,
@@ -252,11 +255,8 @@ export class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
-						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
-						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
-						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
-							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
 							break;
 						}
 					}
@@ -274,8 +274,7 @@ export class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+						if (currentAsisLineOffset < asisSrc.length) { // src1 (새로운 텍스트)의 길이와 비교
 							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
 								from: line.from,
@@ -283,7 +282,7 @@ export class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
-						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
@@ -299,13 +298,11 @@ export class IdeDiff extends HTMLElement {
 			}
 		}
 
-		// Sort all collections by 'from' position (항상 좋은 습관)
 		asisLineDecos.sort((a, b) => a.from - b.from);
 		asisMarkDecos.sort((a, b) => a.from - b.from);
 		tobeLineDecos.sort((a, b) => a.from - b.from);
 		tobeMarkDecos.sort((a, b) => a.from - b.from);
 
-		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
@@ -314,13 +311,10 @@ export class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of asisMarkDecos) {
 			asisMarkBuilder.add(from, to, deco);
 		}
-
-		// ASIS 에디터용 줄 및 마크 RangeSet 결합
 		const finalAsisDecorations = asisLineBuilder.finish().update({
 			add: asisMarkBuilder.finish().children
 		});
 
-		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
@@ -329,21 +323,18 @@ export class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of tobeMarkDecos) {
 			tobeMarkBuilder.add(from, to, deco);
 		}
-
-		// TOBE 에디터용 줄 및 마크 RangeSet 결합
 		const finalTobeDecorations = tobeLineBuilder.finish().update({
 			add: tobeMarkBuilder.finish().children
 		});
 
-		// 데코레이션 업데이트를 위한 Effect 디스패치
-		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
-		});
+		// ⭐️ 중요: 데코레이션 효과를 반환합니다. 여기서 직접 dispatch 하지 않습니다.
+		return {
+			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
+			tobeEffect: setTobeDecorationsEffect.of(finalTobeDecorations)
+		};
 	};
 
+	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -359,23 +350,26 @@ export class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		this.#asisEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
+		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		// 텍스트 내용 업데이트
+		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
-			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 }
+			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				asisEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
+
+		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
-			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 }
+			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				tobeEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
-
-		// Diff 데코레이션 적용
-		this.#applyDiffDecorations(src1, src2);
 	};
 
 	disconnectedCallback() {

package/package.json

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

package/src/components/ideDiff.js

@@ -9,12 +9,12 @@ import {
 import {
 	EditorState, Compartment, StateField,
 	RangeSetBuilder,
-	StateEffect
+	StateEffect // StateEffect를 올바르게 임포트
 } from "@codemirror/state";
 import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultKeymap, selectAll } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-// ⭐️ 이 부분이 수정되었습니다: => 가 아니라 from 입니다.
+// 올바른 import 구문: '=>' 대신 'from'
 import { bracketMatching } from "@codemirror/language";
 import { javascript } from "@codemirror/lang-javascript";
 import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
@@ -22,11 +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({
@@ -57,12 +53,10 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-// ⭐️ StateEffect.define()을 사용하여 이펙트를 정의합니다.
+// StateEffect.define()을 사용하여 이펙트를 정의합니다.
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
-// --- 여기까지 수정된 부분 ---
-
 export class IdeDiff extends HTMLElement {
 
 	#asisEditorView;
@@ -216,6 +210,7 @@ export class IdeDiff extends HTMLElement {
 		});
 	};
 
+	// ⭐️ #applyDiffDecorations 함수를 수정하여 Effect 객체를 반환하도록 변경
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -243,8 +238,16 @@ export class IdeDiff extends HTMLElement {
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+						// 중요한 변경: line.from/to는 현재 에디터 뷰의 doc에서 가져옵니다.
+						// 이 함수는 initialize 내에서 텍스트 변경과 함께 호출되므로,
+						// 이 시점의 this.#tobeEditorView.state.doc은 아직 이전 내용일 수 있습니다.
+						// 그러나, Effect로 반환되어 트랜잭션에 포함될 때 CodeMirror는
+						// Effect를 처리하는 시점에 이미 텍스트가 업데이트되었음을 보장합니다.
+						// 따라서 여기서 doc.length로 유효성 검사하는 것은 새로운 src2 기준이어야 더 정확합니다.
+						// 하지만, 이 라인은 결국 새로운 doc에서 실행될 것이므로,
+						// 여기서의 this.#tobeEditorView.state.doc.length 검사는 불필요하거나 오해의 소지가 있습니다.
+						// 대신, tobeCursor + len (또는 currentTobeLineOffset)이 tobeSrc의 길이를 벗어나지 않는지 확인하는 것이 좋습니다.
+						if (currentTobeLineOffset < tobeSrc.length) { // src2 (새로운 텍스트)의 길이와 비교
 							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
 								from: line.from,
@@ -252,11 +255,8 @@ export class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
-						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
-						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
-						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
-							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
 							break;
 						}
 					}
@@ -274,8 +274,7 @@ export class IdeDiff extends HTMLElement {
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
-						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+						if (currentAsisLineOffset < asisSrc.length) { // src1 (새로운 텍스트)의 길이와 비교
 							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
 								from: line.from,
@@ -283,7 +282,7 @@ export class IdeDiff extends HTMLElement {
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
-						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
@@ -299,13 +298,11 @@ export class IdeDiff extends HTMLElement {
 			}
 		}
 
-		// Sort all collections by 'from' position (항상 좋은 습관)
 		asisLineDecos.sort((a, b) => a.from - b.from);
 		asisMarkDecos.sort((a, b) => a.from - b.from);
 		tobeLineDecos.sort((a, b) => a.from - b.from);
 		tobeMarkDecos.sort((a, b) => a.from - b.from);
 
-		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
@@ -314,13 +311,10 @@ export class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of asisMarkDecos) {
 			asisMarkBuilder.add(from, to, deco);
 		}
-
-		// ASIS 에디터용 줄 및 마크 RangeSet 결합
 		const finalAsisDecorations = asisLineBuilder.finish().update({
 			add: asisMarkBuilder.finish().children
 		});
 
-		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
@@ -329,21 +323,18 @@ export class IdeDiff extends HTMLElement {
 		for (const { from, to, deco } of tobeMarkDecos) {
 			tobeMarkBuilder.add(from, to, deco);
 		}
-
-		// TOBE 에디터용 줄 및 마크 RangeSet 결합
 		const finalTobeDecorations = tobeLineBuilder.finish().update({
 			add: tobeMarkBuilder.finish().children
 		});
 
-		// 데코레이션 업데이트를 위한 Effect 디스패치
-		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
-		});
+		// ⭐️ 중요: 데코레이션 효과를 반환합니다. 여기서 직접 dispatch 하지 않습니다.
+		return {
+			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
+			tobeEffect: setTobeDecorationsEffect.of(finalTobeDecorations)
+		};
 	};
 
+	// ⭐️ initialize 함수를 수정하여 텍스트 변경과 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 	initialize = (src1, src2, language = 'javascript') => {
 		if (!this.#asisEditorView || !this.#tobeEditorView) {
 			console.warn('CodeMirror Editors not initialized yet.');
@@ -359,23 +350,26 @@ export class IdeDiff extends HTMLElement {
 				langExtension = javascript();
 		}
 
-		this.#asisEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
-		this.#tobeEditorView.dispatch({
-			effects: this.#languageCompartment.reconfigure(langExtension)
-		});
+		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
-		// 텍스트 내용 업데이트
+		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
-			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 }
+			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				asisEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
+
+		// tobe 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#tobeEditorView.dispatch({
-			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 }
+			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension),
+				tobeEffect // 계산된 데코레이션 효과를 포함
+			]
 		});
-
-		// Diff 데코레이션 적용
-		this.#applyDiffDecorations(src1, src2);
 	};
 
 	disconnectedCallback() {