ide-assi 0.343.0 → 0.345.0

package/dist/bundle.cjs.js

@@ -234948,96 +234948,126 @@ class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		const asisLineDecos = [];
+		const asisMarkDecos = [];
+		const tobeLineDecos = [];
+		const tobeMarkDecos = [];
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
+		let asisCursor = 0;
+		let tobeCursor = 0;
 
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
 			switch (op) {
-				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // 추가된 텍스트
-					// tobe 쪽에 인라인 데코레이션 추가
-					tobeDecorationsToAdd.push({
+				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // Added text
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// 현재 에디터 뷰의 문서에서 줄 정보를 가져옵니다.
-						// 이전에 `tobeEditorView`가 전역 변수처럼 사용되었을 가능성을 위해 `this.#tobeEditorView`로 명시
-						const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
-						tobeDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-inserted-line-bg" })
-						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
+							tobeLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-inserted-line-bg" })
+							});
+						}
+						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
+						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
+							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
+							break;
+						}
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
-						asisDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-deleted-line-bg" })
-						});
-						currentAsisLineOffset += asisLines[i].length + 1;
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
+							asisLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-deleted-line-bg" })
+							});
+						}
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
+							break;
+						}
 					}
 
 					asisCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL: // 변경되지 않은 텍스트
+				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL: // Unchanged text
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// ⭐️ 중요: 데코레이션들을 'from' 위치를 기준으로 정렬합니다.
-		asisDecorationsToAdd.sort((a, b) => a.from - b.from);
-		tobeDecorationsToAdd.sort((a, b) => a.from - b.from);
+		// 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);
 
-		// 정렬된 데코레이션들을 RangeSetBuilder에 추가합니다.
-		const asisBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisDecorationsToAdd) {
-			asisBuilder.add(from, to, deco);
+		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
+		}
+
+		// ASIS 에디터용 줄 및 마크 RangeSet 결합
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children
+		});
 
-		const tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
 		}
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// TOBE 에디터용 줄 및 마크 RangeSet 결합
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
+
+		// 데코레이션 업데이트를 위한 Effect 디스패치
 		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
+			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
 		});
 		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(tobeBuilder.finish())
+			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
 		});
 	};
 

package/dist/bundle.esm.js

@@ -234944,96 +234944,126 @@ class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		const asisLineDecos = [];
+		const asisMarkDecos = [];
+		const tobeLineDecos = [];
+		const tobeMarkDecos = [];
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
+		let asisCursor = 0;
+		let tobeCursor = 0;
 
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
 			switch (op) {
-				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // 추가된 텍스트
-					// tobe 쪽에 인라인 데코레이션 추가
-					tobeDecorationsToAdd.push({
+				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // Added text
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// 현재 에디터 뷰의 문서에서 줄 정보를 가져옵니다.
-						// 이전에 `tobeEditorView`가 전역 변수처럼 사용되었을 가능성을 위해 `this.#tobeEditorView`로 명시
-						const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
-						tobeDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-inserted-line-bg" })
-						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
+							tobeLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-inserted-line-bg" })
+							});
+						}
+						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
+						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
+							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
+							break;
+						}
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
-						asisDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-deleted-line-bg" })
-						});
-						currentAsisLineOffset += asisLines[i].length + 1;
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
+							asisLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-deleted-line-bg" })
+							});
+						}
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
+							break;
+						}
 					}
 
 					asisCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL: // 변경되지 않은 텍스트
+				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL: // Unchanged text
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// ⭐️ 중요: 데코레이션들을 'from' 위치를 기준으로 정렬합니다.
-		asisDecorationsToAdd.sort((a, b) => a.from - b.from);
-		tobeDecorationsToAdd.sort((a, b) => a.from - b.from);
+		// 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);
 
-		// 정렬된 데코레이션들을 RangeSetBuilder에 추가합니다.
-		const asisBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisDecorationsToAdd) {
-			asisBuilder.add(from, to, deco);
+		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
+		}
+
+		// ASIS 에디터용 줄 및 마크 RangeSet 결합
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children
+		});
 
-		const tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
 		}
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// TOBE 에디터용 줄 및 마크 RangeSet 결합
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
+
+		// 데코레이션 업데이트를 위한 Effect 디스패치
 		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
+			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
 		});
 		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(tobeBuilder.finish())
+			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
 		});
 	};
 

package/dist/components/ideDiff.js

@@ -221,96 +221,126 @@ export class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		const asisLineDecos = [];
+		const asisMarkDecos = [];
+		const tobeLineDecos = [];
+		const tobeMarkDecos = [];
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
+		let asisCursor = 0;
+		let tobeCursor = 0;
 
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT: // 추가된 텍스트
-					// tobe 쪽에 인라인 데코레이션 추가
-					tobeDecorationsToAdd.push({
+				case diff_match_patch.DIFF_INSERT: // Added text
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// 현재 에디터 뷰의 문서에서 줄 정보를 가져옵니다.
-						// 이전에 `tobeEditorView`가 전역 변수처럼 사용되었을 가능성을 위해 `this.#tobeEditorView`로 명시
-						const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
-						tobeDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-inserted-line-bg" })
-						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
+							tobeLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-inserted-line-bg" })
+							});
+						}
+						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
+						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
+							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
+							break;
+						}
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diff_match_patch.DIFF_DELETE: // Deleted text
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
-						asisDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-deleted-line-bg" })
-						});
-						currentAsisLineOffset += asisLines[i].length + 1;
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
+							asisLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-deleted-line-bg" })
+							});
+						}
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
+							break;
+						}
 					}
 
 					asisCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_EQUAL: // 변경되지 않은 텍스트
+				case diff_match_patch.DIFF_EQUAL: // Unchanged text
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// ⭐️ 중요: 데코레이션들을 'from' 위치를 기준으로 정렬합니다.
-		asisDecorationsToAdd.sort((a, b) => a.from - b.from);
-		tobeDecorationsToAdd.sort((a, b) => a.from - b.from);
+		// 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);
 
-		// 정렬된 데코레이션들을 RangeSetBuilder에 추가합니다.
-		const asisBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisDecorationsToAdd) {
-			asisBuilder.add(from, to, deco);
+		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
+		}
+
+		// ASIS 에디터용 줄 및 마크 RangeSet 결합
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children
+		});
 
-		const tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
+		}
+
+		// TOBE 에디터용 줄 및 마크 RangeSet 결합
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// 데코레이션 업데이트를 위한 Effect 디스패치
 		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
+			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
 		});
 		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(tobeBuilder.finish())
+			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
 		});
 	};
 

package/package.json

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

package/src/components/ideDiff.js

@@ -221,96 +221,126 @@ export class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		const asisLineDecos = [];
+		const asisMarkDecos = [];
+		const tobeLineDecos = [];
+		const tobeMarkDecos = [];
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
+		let asisCursor = 0;
+		let tobeCursor = 0;
 
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT: // 추가된 텍스트
-					// tobe 쪽에 인라인 데코레이션 추가
-					tobeDecorationsToAdd.push({
+				case diff_match_patch.DIFF_INSERT: // Added text
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
 					let currentTobeLineOffset = tobeCursor;
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
-						// 현재 에디터 뷰의 문서에서 줄 정보를 가져옵니다.
-						// 이전에 `tobeEditorView`가 전역 변수처럼 사용되었을 가능성을 위해 `this.#tobeEditorView`로 명시
-						const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
-						tobeDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-inserted-line-bg" })
-						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentTobeLineOffset < this.#tobeEditorView.state.doc.length) {
+							const line = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset);
+							tobeLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-inserted-line-bg" })
+							});
+						}
+						// 다음 줄의 시작 위치 계산. 마지막 줄이 아니면 +1 (개행문자)
+						currentTobeLineOffset += tobeLines[i].length + (i < tobeLines.length -1 ? 1 : 0);
+						// 만약 마지막 줄이 비어있다면, 더 이상 진행하지 않도록 방지
+						if (i === tobeLines.length - 1 && tobeLines[i].length === 0 && text.endsWith('\n') === false) {
+							// 마지막 줄이 빈 줄이고 텍스트가 개행으로 끝나지 않으면 (오프셋이 더 이상 증가할 필요 없음)
+							break;
+						}
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diff_match_patch.DIFF_DELETE: // Deleted text
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
 					let currentAsisLineOffset = asisCursor;
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
-						const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
-						asisDecorationsToAdd.push({
-							from: line.from,
-							to: line.to,
-							deco: Decoration.line({ class: "cm-deleted-line-bg" })
-						});
-						currentAsisLineOffset += asisLines[i].length + 1;
+						// ⭐️ 중요: lineAt() 호출 전에 유효한 문서 범위 내에 있는지 확인
+						if (currentAsisLineOffset < this.#asisEditorView.state.doc.length) {
+							const line = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset);
+							asisLineDecos.push({
+								from: line.from,
+								to: line.to,
+								deco: Decoration.line({ class: "cm-deleted-line-bg" })
+							});
+						}
+						currentAsisLineOffset += asisLines[i].length + (i < asisLines.length -1 ? 1 : 0);
+						if (i === asisLines.length - 1 && asisLines[i].length === 0 && text.endsWith('\n') === false) {
+							break;
+						}
 					}
 
 					asisCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_EQUAL: // 변경되지 않은 텍스트
+				case diff_match_patch.DIFF_EQUAL: // Unchanged text
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// ⭐️ 중요: 데코레이션들을 'from' 위치를 기준으로 정렬합니다.
-		asisDecorationsToAdd.sort((a, b) => a.from - b.from);
-		tobeDecorationsToAdd.sort((a, b) => a.from - b.from);
+		// 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);
 
-		// 정렬된 데코레이션들을 RangeSetBuilder에 추가합니다.
-		const asisBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisDecorationsToAdd) {
-			asisBuilder.add(from, to, deco);
+		// ASIS 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
+		}
+
+		// ASIS 에디터용 줄 및 마크 RangeSet 결합
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children
+		});
 
-		const tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// TOBE 에디터용 줄 및 마크 데코레이션을 위한 별도 RangeSetBuilder 생성
+		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);
+		}
+
+		// TOBE 에디터용 줄 및 마크 RangeSet 결합
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// 데코레이션 업데이트를 위한 Effect 디스패치
 		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
+			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
 		});
 		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(tobeBuilder.finish())
+			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
 		});
 	};