ide-assi 0.343.0 → 0.344.0

package/dist/bundle.cjs.js

@@ -234948,58 +234948,57 @@ class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		// Separate collections for line decorations and mark decorations
+		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
+					// Inline mark decoration for tobe
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Line background decoration for tobe (for each line in the inserted 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({
+						tobeLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-inserted-line-bg" })
 						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to the start of the next line segment
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
+					// Inline mark decoration for asis
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
+					// Line background decoration for asis (for each line in the deleted text)
 					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({
+						asisLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-deleted-line-bg" })
@@ -235010,34 +235009,59 @@ class IdeDiff extends HTMLElement {
 					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
+		// Although separating builders helps, sorting is still a good practice.
+		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);
+		// Build separate RangeSets for lines and marks for ASIS editor
+		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);
+		}
+
+		// Combine line and mark RangeSets for ASIS editor
+		// The `RangeSet.join()` static method is used to combine multiple RangeSets.
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children // Combine children of mark builder's RangeSet
+		});
+
 
-		const tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// Build separate RangeSets for lines and marks for TOBE editor
+		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);
+		}
+
+		// Combine line and mark RangeSets for TOBE editor
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
+
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// Dispatch effects to update decorations
 		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,58 +234944,57 @@ class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		// Separate collections for line decorations and mark decorations
+		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
+					// Inline mark decoration for tobe
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Line background decoration for tobe (for each line in the inserted 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({
+						tobeLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-inserted-line-bg" })
 						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to the start of the next line segment
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
+					// Inline mark decoration for asis
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
+					// Line background decoration for asis (for each line in the deleted text)
 					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({
+						asisLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-deleted-line-bg" })
@@ -235006,34 +235005,59 @@ class IdeDiff extends HTMLElement {
 					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
+		// Although separating builders helps, sorting is still a good practice.
+		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);
+		// Build separate RangeSets for lines and marks for ASIS editor
+		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);
+		}
+
+		// Combine line and mark RangeSets for ASIS editor
+		// The `RangeSet.join()` static method is used to combine multiple RangeSets.
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children // Combine children of mark builder's RangeSet
+		});
+
 
-		const tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// Build separate RangeSets for lines and marks for TOBE editor
+		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);
+		}
+
+		// Combine line and mark RangeSets for TOBE editor
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
+
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// Dispatch effects to update decorations
 		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,58 +221,57 @@ export class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		// Separate collections for line decorations and mark decorations
+		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
+					// Inline mark decoration for tobe
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Line background decoration for tobe (for each line in the inserted 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({
+						tobeLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-inserted-line-bg" })
 						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to the start of the next line segment
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diff_match_patch.DIFF_DELETE: // Deleted text
+					// Inline mark decoration for asis
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
+					// Line background decoration for asis (for each line in the deleted text)
 					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({
+						asisLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-deleted-line-bg" })
@@ -283,34 +282,59 @@ export class IdeDiff extends HTMLElement {
 					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);
-
-		// 정렬된 데코레이션들을 RangeSetBuilder에 추가합니다.
-		const asisBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisDecorationsToAdd) {
-			asisBuilder.add(from, to, deco);
+		// Sort all collections by 'from' position
+		// Although separating builders helps, sorting is still a good practice.
+		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);
+
+		// Build separate RangeSets for lines and marks for ASIS editor
+		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 tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// Combine line and mark RangeSets for ASIS editor
+		// The `RangeSet.join()` static method is used to combine multiple RangeSets.
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children // Combine children of mark builder's RangeSet
+		});
+
+
+		// Build separate RangeSets for lines and marks for TOBE editor
+		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);
+		}
+
+		// Combine line and mark RangeSets for TOBE editor
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
+
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// Dispatch effects to update decorations
 		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.344.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -221,58 +221,57 @@ export class IdeDiff extends HTMLElement {
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		// 모든 데코레이션을 builder에 추가하기 전에 수집합니다.
-		const asisDecorationsToAdd = [];
-		const tobeDecorationsToAdd = [];
+		// Separate collections for line decorations and mark decorations
+		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
+					// Inline mark decoration for tobe
+					tobeMarkDecos.push({
 						from: tobeCursor,
 						to: tobeCursor + len,
 						deco: Decoration.mark({ class: "cm-inserted-inline" })
 					});
 
-					// tobe 쪽에 줄 배경 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Line background decoration for tobe (for each line in the inserted 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({
+						tobeLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-inserted-line-bg" })
 						});
-						currentTobeLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to the start of the next line segment
 					}
 
 					tobeCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // 삭제된 텍스트
-					// asis 쪽에 인라인 데코레이션 추가
-					asisDecorationsToAdd.push({
+				case diff_match_patch.DIFF_DELETE: // Deleted text
+					// Inline mark decoration for asis
+					asisMarkDecos.push({
 						from: asisCursor,
 						to: asisCursor + len,
 						deco: Decoration.mark({ class: "cm-deleted-inline" })
 					});
 
-					// asis 쪽에 줄 배경 데코레이션 추가 (삭제된 줄)
+					// Line background decoration for asis (for each line in the deleted text)
 					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({
+						asisLineDecos.push({
 							from: line.from,
 							to: line.to,
 							deco: Decoration.line({ class: "cm-deleted-line-bg" })
@@ -283,34 +282,59 @@ export class IdeDiff extends HTMLElement {
 					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);
-
-		// 정렬된 데코레이션들을 RangeSetBuilder에 추가합니다.
-		const asisBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisDecorationsToAdd) {
-			asisBuilder.add(from, to, deco);
+		// Sort all collections by 'from' position
+		// Although separating builders helps, sorting is still a good practice.
+		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);
+
+		// Build separate RangeSets for lines and marks for ASIS editor
+		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 tobeBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeDecorationsToAdd) {
-			tobeBuilder.add(from, to, deco);
+		// Combine line and mark RangeSets for ASIS editor
+		// The `RangeSet.join()` static method is used to combine multiple RangeSets.
+		const finalAsisDecorations = asisLineBuilder.finish().update({
+			add: asisMarkBuilder.finish().children // Combine children of mark builder's RangeSet
+		});
+
+
+		// Build separate RangeSets for lines and marks for TOBE editor
+		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);
+		}
+
+		// Combine line and mark RangeSets for TOBE editor
+		const finalTobeDecorations = tobeLineBuilder.finish().update({
+			add: tobeMarkBuilder.finish().children
+		});
+
 
-		// 데코레이션 업데이트를 위한 Effect를 디스패치합니다.
+		// Dispatch effects to update decorations
 		this.#asisEditorView.dispatch({
-			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
+			effects: setAsisDecorationsEffect.of(finalAsisDecorations)
 		});
 		this.#tobeEditorView.dispatch({
-			effects: setTobeDecorationsEffect.of(tobeBuilder.finish())
+			effects: setTobeDecorationsEffect.of(finalTobeDecorations)
 		});
 	};