ide-assi 0.384.0 → 0.387.0

package/dist/bundle.cjs.js

@@ -234777,7 +234777,7 @@ function requireDiffMatchPatch () {
 var diffMatchPatchExports = requireDiffMatchPatch();
 
 // Diff 데코레이션을 위한 StateField 정의 (변동 없음)
-StateField.define({
+const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -234790,7 +234790,7 @@ StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-StateField.define({
+const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -235231,7 +235231,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//asisDiffDecorations,
+					asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -235253,7 +235253,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//tobeDiffDecorations,
+					tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -235304,20 +235304,19 @@ export default DocManager;
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
+	// IdeDiff 클래스 내부
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisLineDecos = [];
-		const asisMarkDecos = [];
 		const tobeLineDecos = [];
-		const tobeMarkDecos = [];
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
 		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
@@ -235327,16 +235326,10 @@ export default DocManager;
 
 			switch (op) {
 				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // Added text
-					/**
-					tobeMarkDecos.push({
-						from: tobeCursor,
-						to: tobeCursor + len,
-						deco: Decoration.mark({ class: "cm-inserted-inline" })
-					}); */
-
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
+						// 줄의 시작 오프셋이 tobeDoc의 길이를 넘지 않는지 확인
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -235345,26 +235338,21 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					tobeCursor += len;
 					break;
 
 				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
-					/**
-					asisMarkDecos.push({
-						from: asisCursor,
-						to: asisCursor + len,
-						deco: Decoration.mark({ class: "cm-deleted-inline" })
-					}); */
-
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
+						// 줄의 시작 오프셋이 asisDoc의 길이를 넘지 않는지 확인
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -235373,12 +235361,13 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					asisCursor += len;
 					break;
 
@@ -235389,34 +235378,22 @@ export default DocManager;
 			}
 		}
 
+		// 데코레이션 중복 및 겹침 방지를 위해 정렬
 		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);
 
+		// 라인 데코레이션 빌더 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
 		}
-		const asisMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisMarkDecos) {
-			asisMarkBuilder.add(from, to, deco);
-		}
-		const finalAsisDecorations = asisLineBuilder.finish().update({
-			add: asisMarkBuilder.finish().children
-		});
+		const finalAsisDecorations = asisLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
 		}
-		const tobeMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeMarkDecos) {
-			tobeMarkBuilder.add(from, to, deco);
-		}
-		const finalTobeDecorations = tobeLineBuilder.finish().update({
-			add: tobeMarkBuilder.finish().children
-		});
+		const finalTobeDecorations = tobeLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		return {
 			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
@@ -235442,7 +235419,7 @@ export default DocManager;
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -235460,7 +235437,6 @@ export default DocManager;
 			]
 		});
 
-		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -235479,7 +235455,7 @@ export default DocManager;
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		}); */
+		});
 	};
 
 	disconnectedCallback() {

package/dist/bundle.esm.js

@@ -234773,7 +234773,7 @@ function requireDiffMatchPatch () {
 var diffMatchPatchExports = requireDiffMatchPatch();
 
 // Diff 데코레이션을 위한 StateField 정의 (변동 없음)
-StateField.define({
+const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -234786,7 +234786,7 @@ StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-StateField.define({
+const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
 		return tr.effects.reduce((currentDecos, effect) => {
@@ -235227,7 +235227,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//asisDiffDecorations,
+					asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -235249,7 +235249,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//tobeDiffDecorations,
+					tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -235300,20 +235300,19 @@ export default DocManager;
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
+	// IdeDiff 클래스 내부
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisLineDecos = [];
-		const asisMarkDecos = [];
 		const tobeLineDecos = [];
-		const tobeMarkDecos = [];
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
 		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
@@ -235323,16 +235322,10 @@ export default DocManager;
 
 			switch (op) {
 				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // Added text
-					/**
-					tobeMarkDecos.push({
-						from: tobeCursor,
-						to: tobeCursor + len,
-						deco: Decoration.mark({ class: "cm-inserted-inline" })
-					}); */
-
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
+						// 줄의 시작 오프셋이 tobeDoc의 길이를 넘지 않는지 확인
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -235341,26 +235334,21 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					tobeCursor += len;
 					break;
 
 				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
-					/**
-					asisMarkDecos.push({
-						from: asisCursor,
-						to: asisCursor + len,
-						deco: Decoration.mark({ class: "cm-deleted-inline" })
-					}); */
-
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
+						// 줄의 시작 오프셋이 asisDoc의 길이를 넘지 않는지 확인
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -235369,12 +235357,13 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					asisCursor += len;
 					break;
 
@@ -235385,34 +235374,22 @@ export default DocManager;
 			}
 		}
 
+		// 데코레이션 중복 및 겹침 방지를 위해 정렬
 		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);
 
+		// 라인 데코레이션 빌더 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
 		}
-		const asisMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisMarkDecos) {
-			asisMarkBuilder.add(from, to, deco);
-		}
-		const finalAsisDecorations = asisLineBuilder.finish().update({
-			add: asisMarkBuilder.finish().children
-		});
+		const finalAsisDecorations = asisLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
 		}
-		const tobeMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeMarkDecos) {
-			tobeMarkBuilder.add(from, to, deco);
-		}
-		const finalTobeDecorations = tobeLineBuilder.finish().update({
-			add: tobeMarkBuilder.finish().children
-		});
+		const finalTobeDecorations = tobeLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		return {
 			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
@@ -235438,7 +235415,7 @@ export default DocManager;
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -235456,7 +235433,6 @@ export default DocManager;
 			]
 		});
 
-		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -235475,7 +235451,7 @@ export default DocManager;
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		}); */
+		});
 	};
 
 	disconnectedCallback() {

package/dist/components/ideDiff.js

@@ -479,7 +479,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//asisDiffDecorations,
+					asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -501,7 +501,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//tobeDiffDecorations,
+					tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -552,20 +552,19 @@ export default DocManager;
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
+	// IdeDiff 클래스 내부
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisLineDecos = [];
-		const asisMarkDecos = [];
 		const tobeLineDecos = [];
-		const tobeMarkDecos = [];
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
 		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
@@ -575,16 +574,10 @@ export default DocManager;
 
 			switch (op) {
 				case diff_match_patch.DIFF_INSERT: // Added text
-					/**
-					tobeMarkDecos.push({
-						from: tobeCursor,
-						to: tobeCursor + len,
-						deco: Decoration.mark({ class: "cm-inserted-inline" })
-					}); */
-
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
+						// 줄의 시작 오프셋이 tobeDoc의 길이를 넘지 않는지 확인
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -593,26 +586,21 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					tobeCursor += len;
 					break;
 
 				case diff_match_patch.DIFF_DELETE: // Deleted text
-					/**
-					asisMarkDecos.push({
-						from: asisCursor,
-						to: asisCursor + len,
-						deco: Decoration.mark({ class: "cm-deleted-inline" })
-					}); */
-
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
+						// 줄의 시작 오프셋이 asisDoc의 길이를 넘지 않는지 확인
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -621,12 +609,13 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					asisCursor += len;
 					break;
 
@@ -637,34 +626,22 @@ export default DocManager;
 			}
 		}
 
+		// 데코레이션 중복 및 겹침 방지를 위해 정렬
 		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);
 
+		// 라인 데코레이션 빌더 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
 		}
-		const asisMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisMarkDecos) {
-			asisMarkBuilder.add(from, to, deco);
-		}
-		const finalAsisDecorations = asisLineBuilder.finish().update({
-			add: asisMarkBuilder.finish().children
-		});
+		const finalAsisDecorations = asisLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
 		}
-		const tobeMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeMarkDecos) {
-			tobeMarkBuilder.add(from, to, deco);
-		}
-		const finalTobeDecorations = tobeLineBuilder.finish().update({
-			add: tobeMarkBuilder.finish().children
-		});
+		const finalTobeDecorations = tobeLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		return {
 			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
@@ -690,7 +667,7 @@ export default DocManager;
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -708,7 +685,6 @@ export default DocManager;
 			]
 		});
 
-		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -727,7 +703,7 @@ export default DocManager;
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		}); */
+		});
 	};
 
 	disconnectedCallback() {

package/package.json

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

package/src/components/ideDiff.js

@@ -479,7 +479,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//asisDiffDecorations,
+					asisDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
@@ -501,7 +501,7 @@ export default DocManager;
 					javascript(),
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
-					//tobeDiffDecorations,
+					tobeDiffDecorations,
 					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
@@ -552,20 +552,19 @@ export default DocManager;
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
+	// IdeDiff 클래스 내부
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
 		const asisLineDecos = [];
-		const asisMarkDecos = [];
 		const tobeLineDecos = [];
-		const tobeMarkDecos = [];
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
-		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
 		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
@@ -575,16 +574,10 @@ export default DocManager;
 
 			switch (op) {
 				case diff_match_patch.DIFF_INSERT: // Added text
-					/**
-					tobeMarkDecos.push({
-						from: tobeCursor,
-						to: tobeCursor + len,
-						deco: Decoration.mark({ class: "cm-inserted-inline" })
-					}); */
-
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
+						// 줄의 시작 오프셋이 tobeDoc의 길이를 넘지 않는지 확인
 						if (currentTobeLineOffset < tobeDoc.length) {
 							const line = tobeDoc.lineAt(currentTobeLineOffset);
 							tobeLineDecos.push({
@@ -593,26 +586,21 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-inserted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					tobeCursor += len;
 					break;
 
 				case diff_match_patch.DIFF_DELETE: // Deleted text
-					/**
-					asisMarkDecos.push({
-						from: asisCursor,
-						to: asisCursor + len,
-						deco: Decoration.mark({ class: "cm-deleted-inline" })
-					}); */
-
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
+						// 줄의 시작 오프셋이 asisDoc의 길이를 넘지 않는지 확인
 						if (currentAsisLineOffset < asisDoc.length) {
 							const line = asisDoc.lineAt(currentAsisLineOffset);
 							asisLineDecos.push({
@@ -621,12 +609,13 @@ export default DocManager;
 								deco: Decoration.line({ class: "cm-deleted-line-bg" })
 							});
 						}
+						// 다음 줄의 시작 오프셋 계산 (개행 문자 고려)
 						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
+						// 마지막 줄이 비어 있고 개행으로 끝나지 않으면 루프 종료 (lineAt 오류 방지)
 						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
 							break;
 						}
 					}
-
 					asisCursor += len;
 					break;
 
@@ -637,34 +626,22 @@ export default DocManager;
 			}
 		}
 
+		// 데코레이션 중복 및 겹침 방지를 위해 정렬
 		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);
 
+		// 라인 데코레이션 빌더 생성
 		const asisLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of asisLineDecos) {
 			asisLineBuilder.add(from, to, deco);
 		}
-		const asisMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisMarkDecos) {
-			asisMarkBuilder.add(from, to, deco);
-		}
-		const finalAsisDecorations = asisLineBuilder.finish().update({
-			add: asisMarkBuilder.finish().children
-		});
+		const finalAsisDecorations = asisLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		const tobeLineBuilder = new RangeSetBuilder();
 		for (const { from, to, deco } of tobeLineDecos) {
 			tobeLineBuilder.add(from, to, deco);
 		}
-		const tobeMarkBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeMarkDecos) {
-			tobeMarkBuilder.add(from, to, deco);
-		}
-		const finalTobeDecorations = tobeLineBuilder.finish().update({
-			add: tobeMarkBuilder.finish().children
-		});
+		const finalTobeDecorations = tobeLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
 
 		return {
 			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
@@ -690,7 +667,7 @@ export default DocManager;
 		}
 
 		// 데코레이션 효과는 미리 계산해 둡니다.
-		//const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
+		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
 		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
@@ -708,7 +685,6 @@ export default DocManager;
 			]
 		});
 
-		/**
 		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
@@ -727,7 +703,7 @@ export default DocManager;
 				// this.#asisEditorView.scrollDOM.scrollTop = 0;
 				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
 			});
-		}); */
+		});
 	};
 
 	disconnectedCallback() {