ide-assi 0.335.0 → 0.337.0

package/dist/bundle.cjs.js

@@ -234751,12 +234751,12 @@ function requireDiffMatchPatch () {
 
 var diffMatchPatchExports = requireDiffMatchPatch();
 
+// --- 여기서부터 수정된 부분 ---
+
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
-	create() { return Decoration.none; }, // 초기 상태
+	create() { return Decoration.none; },
 	update(decorations, tr) {
-		// 트랜잭션에 포함된 Effects를 처리하여 데코레이션을 업데이트
-		// `#applyDiffDecorations` 함수에서 데코레이션 업데이트 요청을 보낼 때 사용
 		return tr.effects.reduce((currentDecos, effect) => {
 			if (effect.is(setAsisDecorationsEffect)) {
 				return effect.value;
@@ -234764,7 +234764,6 @@ const asisDiffDecorations = StateField.define({
 			return currentDecos;
 		}, decorations);
 	},
-	// 데코레이션을 뷰에 제공
 	provide: f => EditorView.decorations.from(f)
 });
 
@@ -234783,9 +234782,11 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-const setAsisDecorationsEffect = EditorState.define.effect();
-const setTobeDecorationsEffect = EditorState.define.effect();
+// ⭐️ 이 부분이 수정되었습니다: .define.effect() -> .defineEffect()
+const setAsisDecorationsEffect = EditorState.defineEffect();
+const setTobeDecorationsEffect = EditorState.defineEffect();
 
+// --- 여기까지 수정된 부분 ---
 
 class IdeDiff extends HTMLElement {
 	#asisEditorView;
@@ -234838,8 +234839,6 @@ class IdeDiff extends HTMLElement {
                     text-decoration: line-through;
                     font-weight: bold;
                 }
-                /* 선택적: 동일하지만 이동된 줄 강조 (복잡함) */
-                /* .cm-moved-line-bg {} */
             </style>
 
             <div class="wrapper">
@@ -234863,7 +234862,6 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// CodeMirror 확장 기본 설정
 		const basicExtensions = [
 			lineNumbers(),
 			highlightSpecialChars(),
@@ -234882,37 +234880,35 @@ class IdeDiff extends HTMLElement {
 				...lintKeymap,
 				...completionKeymap,
 				indentWithTab,
-				selectAll // selectAll 추가
+				selectAll
 			]),
 			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
 			autocompletion(),
 		];
 
-		// asis 에디터 생성 (읽기 전용)
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // asis는 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					asisDiffDecorations // asis 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					asisDiffDecorations
 				]
 			}),
 			parent: this.#asisEditorEl
 		});
 
-		// tobe 에디터 생성 (읽기 전용, 필요 시 편집 가능하게 설정)
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // tobe도 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					tobeDiffDecorations // tobe 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					tobeDiffDecorations
 				]
 			}),
 			parent: this.#tobeEditorEl
@@ -234944,7 +234940,6 @@ class IdeDiff extends HTMLElement {
 		});
 	};
 
-	// ⭐️⭐️⭐️ Diff 데코레이션 적용 로직 구현 ⭐️⭐️⭐️
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -234953,69 +234948,52 @@ class IdeDiff extends HTMLElement {
 		const asisBuilder = new RangeSetBuilder();
 		const tobeBuilder = new RangeSetBuilder();
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
-
-		// 줄 단위 데코레이션을 위해 줄 시작 위치를 추적
-		const asisLineStartMap = new Map();
-		const tobeLineStartMap = new Map();
-
-		// 각 텍스트에 대한 줄 시작 위치 미리 계산
-		let currentPos = 0;
-		for (const line of asisSrc.split('\n')) {
-			asisLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1; // +1은 줄바꿈 문자 포함
-		}
-		currentPos = 0;
-		for (const line of tobeSrc.split('\n')) {
-			tobeLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1;
-		}
+		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: // Added text
-					// tobe 쪽에 인라인 데코레이션 추가
+				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT:
 					tobeBuilder.add(
 						tobeCursor, tobeCursor + len,
 						Decoration.mark({ class: "cm-inserted-inline" })
 					);
 
-					// tobe 쪽에 줄 전체 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Inserted lines background
 					const tobeLines = text.split('\n');
-					let currentLineOffset = tobeCursor;
+					let currentTobeLineOffset = tobeCursor;
 					for(let i = 0; i < tobeLines.length; i++) {
-						// 각 줄의 시작 위치를 찾기
-						const lineStart = tobeEditorView.state.doc.lineAt(currentLineOffset).from;
-						// 만약 다음 줄이 있다면 해당 줄의 끝까지, 마지막 줄이라면 텍스트의 끝까지
-						const lineEnd = i === tobeLines.length - 1 ? currentLineOffset + tobeLines[i].length : tobeEditorView.state.doc.lineAt(currentLineOffset).to;
+						// Get line start/end from the *current* editor view's document
+						const lineStart = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).from;
+						// For the last segment of a multi-line insertion, the end is just current offset + segment length
+						// Otherwise, it's the end of the current line in the doc.
+						const lineEnd = i === tobeLines.length - 1 ? currentTobeLineOffset + tobeLines[i].length : this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).to;
+
 						tobeBuilder.add(
-							lineStart, lineEnd, // 줄의 실제 시작부터 끝까지
+							lineStart, lineEnd,
 							Decoration.line({ class: "cm-inserted-line-bg" })
 						);
-						currentLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to next line start
 					}
 
-
 					tobeCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
-					// asis 쪽에 인라인 데코레이션 추가
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE:
 					asisBuilder.add(
 						asisCursor, asisCursor + len,
 						Decoration.mark({ class: "cm-deleted-inline" })
 					);
 
-					// asis 쪽에 줄 전체 데코레이션 추가 (삭제된 줄)
+					// Deleted lines background
 					const asisLines = text.split('\n');
 					let currentAsisLineOffset = asisCursor;
 					for(let i = 0; i < asisLines.length; i++) {
-						const lineStart = asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
-						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+						const lineStart = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
+						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+
 						asisBuilder.add(
 							lineStart, lineEnd,
 							Decoration.line({ class: "cm-deleted-line-bg" })
@@ -235026,14 +235004,13 @@ class IdeDiff extends HTMLElement {
 					asisCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL: // Unchanged text
+				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL:
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// 에디터 뷰에 데코레이션 업데이트 요청 디스패치
 		this.#asisEditorView.dispatch({
 			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
 		});
@@ -235048,25 +235025,15 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 언어 변경 (선택 사항, 필요 시 활성화)
 		let langExtension;
 		switch(language) {
 			case 'javascript':
 				langExtension = javascript();
 				break;
-			// case 'html':
-			//     import { html } from "@codemirror/lang-html"; // 상단에 임포트 필요
-			//     langExtension = html();
-			//     break;
-			// case 'css':
-			//     import { css } from "@codemirror/lang-css";   // 상단에 임포트 필요
-			//     langExtension = css();
-			//     break;
 			default:
 				langExtension = javascript();
 		}
 
-		// 언어 확장 업데이트
 		this.#asisEditorView.dispatch({
 			effects: this.#languageCompartment.reconfigure(langExtension)
 		});

package/dist/bundle.esm.js

@@ -234747,12 +234747,12 @@ function requireDiffMatchPatch () {
 
 var diffMatchPatchExports = requireDiffMatchPatch();
 
+// --- 여기서부터 수정된 부분 ---
+
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
-	create() { return Decoration.none; }, // 초기 상태
+	create() { return Decoration.none; },
 	update(decorations, tr) {
-		// 트랜잭션에 포함된 Effects를 처리하여 데코레이션을 업데이트
-		// `#applyDiffDecorations` 함수에서 데코레이션 업데이트 요청을 보낼 때 사용
 		return tr.effects.reduce((currentDecos, effect) => {
 			if (effect.is(setAsisDecorationsEffect)) {
 				return effect.value;
@@ -234760,7 +234760,6 @@ const asisDiffDecorations = StateField.define({
 			return currentDecos;
 		}, decorations);
 	},
-	// 데코레이션을 뷰에 제공
 	provide: f => EditorView.decorations.from(f)
 });
 
@@ -234779,9 +234778,11 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-const setAsisDecorationsEffect = EditorState.define.effect();
-const setTobeDecorationsEffect = EditorState.define.effect();
+// ⭐️ 이 부분이 수정되었습니다: .define.effect() -> .defineEffect()
+const setAsisDecorationsEffect = EditorState.defineEffect();
+const setTobeDecorationsEffect = EditorState.defineEffect();
 
+// --- 여기까지 수정된 부분 ---
 
 class IdeDiff extends HTMLElement {
 	#asisEditorView;
@@ -234834,8 +234835,6 @@ class IdeDiff extends HTMLElement {
                     text-decoration: line-through;
                     font-weight: bold;
                 }
-                /* 선택적: 동일하지만 이동된 줄 강조 (복잡함) */
-                /* .cm-moved-line-bg {} */
             </style>
 
             <div class="wrapper">
@@ -234859,7 +234858,6 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// CodeMirror 확장 기본 설정
 		const basicExtensions = [
 			lineNumbers(),
 			highlightSpecialChars(),
@@ -234878,37 +234876,35 @@ class IdeDiff extends HTMLElement {
 				...lintKeymap,
 				...completionKeymap,
 				indentWithTab,
-				selectAll // selectAll 추가
+				selectAll
 			]),
 			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
 			autocompletion(),
 		];
 
-		// asis 에디터 생성 (읽기 전용)
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // asis는 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					asisDiffDecorations // asis 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					asisDiffDecorations
 				]
 			}),
 			parent: this.#asisEditorEl
 		});
 
-		// tobe 에디터 생성 (읽기 전용, 필요 시 편집 가능하게 설정)
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // tobe도 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					tobeDiffDecorations // tobe 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					tobeDiffDecorations
 				]
 			}),
 			parent: this.#tobeEditorEl
@@ -234940,7 +234936,6 @@ class IdeDiff extends HTMLElement {
 		});
 	};
 
-	// ⭐️⭐️⭐️ Diff 데코레이션 적용 로직 구현 ⭐️⭐️⭐️
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -234949,69 +234944,52 @@ class IdeDiff extends HTMLElement {
 		const asisBuilder = new RangeSetBuilder();
 		const tobeBuilder = new RangeSetBuilder();
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
-
-		// 줄 단위 데코레이션을 위해 줄 시작 위치를 추적
-		const asisLineStartMap = new Map();
-		const tobeLineStartMap = new Map();
-
-		// 각 텍스트에 대한 줄 시작 위치 미리 계산
-		let currentPos = 0;
-		for (const line of asisSrc.split('\n')) {
-			asisLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1; // +1은 줄바꿈 문자 포함
-		}
-		currentPos = 0;
-		for (const line of tobeSrc.split('\n')) {
-			tobeLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1;
-		}
+		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: // Added text
-					// tobe 쪽에 인라인 데코레이션 추가
+				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT:
 					tobeBuilder.add(
 						tobeCursor, tobeCursor + len,
 						Decoration.mark({ class: "cm-inserted-inline" })
 					);
 
-					// tobe 쪽에 줄 전체 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Inserted lines background
 					const tobeLines = text.split('\n');
-					let currentLineOffset = tobeCursor;
+					let currentTobeLineOffset = tobeCursor;
 					for(let i = 0; i < tobeLines.length; i++) {
-						// 각 줄의 시작 위치를 찾기
-						const lineStart = tobeEditorView.state.doc.lineAt(currentLineOffset).from;
-						// 만약 다음 줄이 있다면 해당 줄의 끝까지, 마지막 줄이라면 텍스트의 끝까지
-						const lineEnd = i === tobeLines.length - 1 ? currentLineOffset + tobeLines[i].length : tobeEditorView.state.doc.lineAt(currentLineOffset).to;
+						// Get line start/end from the *current* editor view's document
+						const lineStart = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).from;
+						// For the last segment of a multi-line insertion, the end is just current offset + segment length
+						// Otherwise, it's the end of the current line in the doc.
+						const lineEnd = i === tobeLines.length - 1 ? currentTobeLineOffset + tobeLines[i].length : this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).to;
+
 						tobeBuilder.add(
-							lineStart, lineEnd, // 줄의 실제 시작부터 끝까지
+							lineStart, lineEnd,
 							Decoration.line({ class: "cm-inserted-line-bg" })
 						);
-						currentLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to next line start
 					}
 
-
 					tobeCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
-					// asis 쪽에 인라인 데코레이션 추가
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE:
 					asisBuilder.add(
 						asisCursor, asisCursor + len,
 						Decoration.mark({ class: "cm-deleted-inline" })
 					);
 
-					// asis 쪽에 줄 전체 데코레이션 추가 (삭제된 줄)
+					// Deleted lines background
 					const asisLines = text.split('\n');
 					let currentAsisLineOffset = asisCursor;
 					for(let i = 0; i < asisLines.length; i++) {
-						const lineStart = asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
-						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+						const lineStart = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
+						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+
 						asisBuilder.add(
 							lineStart, lineEnd,
 							Decoration.line({ class: "cm-deleted-line-bg" })
@@ -235022,14 +235000,13 @@ class IdeDiff extends HTMLElement {
 					asisCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL: // Unchanged text
+				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL:
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// 에디터 뷰에 데코레이션 업데이트 요청 디스패치
 		this.#asisEditorView.dispatch({
 			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
 		});
@@ -235044,25 +235021,15 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 언어 변경 (선택 사항, 필요 시 활성화)
 		let langExtension;
 		switch(language) {
 			case 'javascript':
 				langExtension = javascript();
 				break;
-			// case 'html':
-			//     import { html } from "@codemirror/lang-html"; // 상단에 임포트 필요
-			//     langExtension = html();
-			//     break;
-			// case 'css':
-			//     import { css } from "@codemirror/lang-css";   // 상단에 임포트 필요
-			//     langExtension = css();
-			//     break;
 			default:
 				langExtension = javascript();
 		}
 
-		// 언어 확장 업데이트
 		this.#asisEditorView.dispatch({
 			effects: this.#languageCompartment.reconfigure(langExtension)
 		});

package/dist/components/ideDiff.js

@@ -24,12 +24,12 @@ import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 // Diff 로직을 위해 diff-match-patch 사용
 import { diff_match_patch } from 'diff-match-patch';
 
+// --- 여기서부터 수정된 부분 ---
+
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
-	create() { return Decoration.none; }, // 초기 상태
+	create() { return Decoration.none; },
 	update(decorations, tr) {
-		// 트랜잭션에 포함된 Effects를 처리하여 데코레이션을 업데이트
-		// `#applyDiffDecorations` 함수에서 데코레이션 업데이트 요청을 보낼 때 사용
 		return tr.effects.reduce((currentDecos, effect) => {
 			if (effect.is(setAsisDecorationsEffect)) {
 				return effect.value;
@@ -37,7 +37,6 @@ const asisDiffDecorations = StateField.define({
 			return currentDecos;
 		}, decorations);
 	},
-	// 데코레이션을 뷰에 제공
 	provide: f => EditorView.decorations.from(f)
 });
 
@@ -56,9 +55,11 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-const setAsisDecorationsEffect = EditorState.define.effect();
-const setTobeDecorationsEffect = EditorState.define.effect();
+// ⭐️ 이 부분이 수정되었습니다: .define.effect() -> .defineEffect()
+const setAsisDecorationsEffect = EditorState.defineEffect();
+const setTobeDecorationsEffect = EditorState.defineEffect();
 
+// --- 여기까지 수정된 부분 ---
 
 export class IdeDiff extends HTMLElement {
 	#asisEditorView;
@@ -111,8 +112,6 @@ export class IdeDiff extends HTMLElement {
                     text-decoration: line-through;
                     font-weight: bold;
                 }
-                /* 선택적: 동일하지만 이동된 줄 강조 (복잡함) */
-                /* .cm-moved-line-bg {} */
             </style>
 
             <div class="wrapper">
@@ -136,7 +135,6 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// CodeMirror 확장 기본 설정
 		const basicExtensions = [
 			lineNumbers(),
 			highlightSpecialChars(),
@@ -155,37 +153,35 @@ export class IdeDiff extends HTMLElement {
 				...lintKeymap,
 				...completionKeymap,
 				indentWithTab,
-				selectAll // selectAll 추가
+				selectAll
 			]),
 			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
 			autocompletion(),
 		];
 
-		// asis 에디터 생성 (읽기 전용)
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // asis는 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					asisDiffDecorations // asis 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					asisDiffDecorations
 				]
 			}),
 			parent: this.#asisEditorEl
 		});
 
-		// tobe 에디터 생성 (읽기 전용, 필요 시 편집 가능하게 설정)
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // tobe도 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					tobeDiffDecorations // tobe 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					tobeDiffDecorations
 				]
 			}),
 			parent: this.#tobeEditorEl
@@ -217,7 +213,6 @@ export class IdeDiff extends HTMLElement {
 		});
 	};
 
-	// ⭐️⭐️⭐️ Diff 데코레이션 적용 로직 구현 ⭐️⭐️⭐️
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -226,69 +221,52 @@ export class IdeDiff extends HTMLElement {
 		const asisBuilder = new RangeSetBuilder();
 		const tobeBuilder = new RangeSetBuilder();
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
-
-		// 줄 단위 데코레이션을 위해 줄 시작 위치를 추적
-		const asisLineStartMap = new Map();
-		const tobeLineStartMap = new Map();
-
-		// 각 텍스트에 대한 줄 시작 위치 미리 계산
-		let currentPos = 0;
-		for (const line of asisSrc.split('\n')) {
-			asisLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1; // +1은 줄바꿈 문자 포함
-		}
-		currentPos = 0;
-		for (const line of tobeSrc.split('\n')) {
-			tobeLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1;
-		}
+		let asisCursor = 0;
+		let tobeCursor = 0;
 
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT: // Added text
-					// tobe 쪽에 인라인 데코레이션 추가
+				case diff_match_patch.DIFF_INSERT:
 					tobeBuilder.add(
 						tobeCursor, tobeCursor + len,
 						Decoration.mark({ class: "cm-inserted-inline" })
 					);
 
-					// tobe 쪽에 줄 전체 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Inserted lines background
 					const tobeLines = text.split('\n');
-					let currentLineOffset = tobeCursor;
+					let currentTobeLineOffset = tobeCursor;
 					for(let i = 0; i < tobeLines.length; i++) {
-						// 각 줄의 시작 위치를 찾기
-						const lineStart = tobeEditorView.state.doc.lineAt(currentLineOffset).from;
-						// 만약 다음 줄이 있다면 해당 줄의 끝까지, 마지막 줄이라면 텍스트의 끝까지
-						const lineEnd = i === tobeLines.length - 1 ? currentLineOffset + tobeLines[i].length : tobeEditorView.state.doc.lineAt(currentLineOffset).to;
+						// Get line start/end from the *current* editor view's document
+						const lineStart = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).from;
+						// For the last segment of a multi-line insertion, the end is just current offset + segment length
+						// Otherwise, it's the end of the current line in the doc.
+						const lineEnd = i === tobeLines.length - 1 ? currentTobeLineOffset + tobeLines[i].length : this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).to;
+
 						tobeBuilder.add(
-							lineStart, lineEnd, // 줄의 실제 시작부터 끝까지
+							lineStart, lineEnd,
 							Decoration.line({ class: "cm-inserted-line-bg" })
 						);
-						currentLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to next line start
 					}
 
-
 					tobeCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // Deleted text
-					// asis 쪽에 인라인 데코레이션 추가
+				case diff_match_patch.DIFF_DELETE:
 					asisBuilder.add(
 						asisCursor, asisCursor + len,
 						Decoration.mark({ class: "cm-deleted-inline" })
 					);
 
-					// asis 쪽에 줄 전체 데코레이션 추가 (삭제된 줄)
+					// Deleted lines background
 					const asisLines = text.split('\n');
 					let currentAsisLineOffset = asisCursor;
 					for(let i = 0; i < asisLines.length; i++) {
-						const lineStart = asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
-						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+						const lineStart = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
+						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+
 						asisBuilder.add(
 							lineStart, lineEnd,
 							Decoration.line({ class: "cm-deleted-line-bg" })
@@ -299,14 +277,13 @@ export class IdeDiff extends HTMLElement {
 					asisCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_EQUAL: // Unchanged text
+				case diff_match_patch.DIFF_EQUAL:
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// 에디터 뷰에 데코레이션 업데이트 요청 디스패치
 		this.#asisEditorView.dispatch({
 			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
 		});
@@ -321,25 +298,15 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 언어 변경 (선택 사항, 필요 시 활성화)
 		let langExtension;
 		switch(language) {
 			case 'javascript':
 				langExtension = javascript();
 				break;
-			// case 'html':
-			//     import { html } from "@codemirror/lang-html"; // 상단에 임포트 필요
-			//     langExtension = html();
-			//     break;
-			// case 'css':
-			//     import { css } from "@codemirror/lang-css";   // 상단에 임포트 필요
-			//     langExtension = css();
-			//     break;
 			default:
 				langExtension = javascript();
 		}
 
-		// 언어 확장 업데이트
 		this.#asisEditorView.dispatch({
 			effects: this.#languageCompartment.reconfigure(langExtension)
 		});

package/package.json

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

package/src/components/ideDiff.js

@@ -24,12 +24,12 @@ import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 // Diff 로직을 위해 diff-match-patch 사용
 import { diff_match_patch } from 'diff-match-patch';
 
+// --- 여기서부터 수정된 부분 ---
+
 // Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
 const asisDiffDecorations = StateField.define({
-	create() { return Decoration.none; }, // 초기 상태
+	create() { return Decoration.none; },
 	update(decorations, tr) {
-		// 트랜잭션에 포함된 Effects를 처리하여 데코레이션을 업데이트
-		// `#applyDiffDecorations` 함수에서 데코레이션 업데이트 요청을 보낼 때 사용
 		return tr.effects.reduce((currentDecos, effect) => {
 			if (effect.is(setAsisDecorationsEffect)) {
 				return effect.value;
@@ -37,7 +37,6 @@ const asisDiffDecorations = StateField.define({
 			return currentDecos;
 		}, decorations);
 	},
-	// 데코레이션을 뷰에 제공
 	provide: f => EditorView.decorations.from(f)
 });
 
@@ -56,9 +55,11 @@ const tobeDiffDecorations = StateField.define({
 });
 
 // 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
-const setAsisDecorationsEffect = EditorState.define.effect();
-const setTobeDecorationsEffect = EditorState.define.effect();
+// ⭐️ 이 부분이 수정되었습니다: .define.effect() -> .defineEffect()
+const setAsisDecorationsEffect = EditorState.defineEffect();
+const setTobeDecorationsEffect = EditorState.defineEffect();
 
+// --- 여기까지 수정된 부분 ---
 
 export class IdeDiff extends HTMLElement {
 	#asisEditorView;
@@ -111,8 +112,6 @@ export class IdeDiff extends HTMLElement {
                     text-decoration: line-through;
                     font-weight: bold;
                 }
-                /* 선택적: 동일하지만 이동된 줄 강조 (복잡함) */
-                /* .cm-moved-line-bg {} */
             </style>
 
             <div class="wrapper">
@@ -136,7 +135,6 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// CodeMirror 확장 기본 설정
 		const basicExtensions = [
 			lineNumbers(),
 			highlightSpecialChars(),
@@ -155,37 +153,35 @@ export class IdeDiff extends HTMLElement {
 				...lintKeymap,
 				...completionKeymap,
 				indentWithTab,
-				selectAll // selectAll 추가
+				selectAll
 			]),
 			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
 			autocompletion(),
 		];
 
-		// asis 에디터 생성 (읽기 전용)
 		this.#asisEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // asis는 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					asisDiffDecorations // asis 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					asisDiffDecorations
 				]
 			}),
 			parent: this.#asisEditorEl
 		});
 
-		// tobe 에디터 생성 (읽기 전용, 필요 시 편집 가능하게 설정)
 		this.#tobeEditorView = new EditorView({
 			state: EditorState.create({
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(), // JS 언어 모드 (기본)
-					EditorState.readOnly.of(true), // tobe도 읽기 전용
-					this.#languageCompartment.of(javascript()), // 언어 변경 compartment
-					tobeDiffDecorations // tobe 에디터에 Diff 데코레이션 필드 추가
+					javascript(),
+					EditorState.readOnly.of(true),
+					this.#languageCompartment.of(javascript()),
+					tobeDiffDecorations
 				]
 			}),
 			parent: this.#tobeEditorEl
@@ -217,7 +213,6 @@ export class IdeDiff extends HTMLElement {
 		});
 	};
 
-	// ⭐️⭐️⭐️ Diff 데코레이션 적용 로직 구현 ⭐️⭐️⭐️
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -226,69 +221,52 @@ export class IdeDiff extends HTMLElement {
 		const asisBuilder = new RangeSetBuilder();
 		const tobeBuilder = new RangeSetBuilder();
 
-		let asisCursor = 0; // asis 에디터에서의 현재 텍스트 오프셋
-		let tobeCursor = 0; // tobe 에디터에서의 현재 텍스트 오프셋
-
-		// 줄 단위 데코레이션을 위해 줄 시작 위치를 추적
-		const asisLineStartMap = new Map();
-		const tobeLineStartMap = new Map();
-
-		// 각 텍스트에 대한 줄 시작 위치 미리 계산
-		let currentPos = 0;
-		for (const line of asisSrc.split('\n')) {
-			asisLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1; // +1은 줄바꿈 문자 포함
-		}
-		currentPos = 0;
-		for (const line of tobeSrc.split('\n')) {
-			tobeLineStartMap.set(currentPos, true);
-			currentPos += line.length + 1;
-		}
+		let asisCursor = 0;
+		let tobeCursor = 0;
 
 		for (const [op, text] of diffs) {
 			const len = text.length;
 
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT: // Added text
-					// tobe 쪽에 인라인 데코레이션 추가
+				case diff_match_patch.DIFF_INSERT:
 					tobeBuilder.add(
 						tobeCursor, tobeCursor + len,
 						Decoration.mark({ class: "cm-inserted-inline" })
 					);
 
-					// tobe 쪽에 줄 전체 데코레이션 추가 (삽입된 줄)
-					// text가 여러 줄일 수 있으므로 각 줄에 적용
+					// Inserted lines background
 					const tobeLines = text.split('\n');
-					let currentLineOffset = tobeCursor;
+					let currentTobeLineOffset = tobeCursor;
 					for(let i = 0; i < tobeLines.length; i++) {
-						// 각 줄의 시작 위치를 찾기
-						const lineStart = tobeEditorView.state.doc.lineAt(currentLineOffset).from;
-						// 만약 다음 줄이 있다면 해당 줄의 끝까지, 마지막 줄이라면 텍스트의 끝까지
-						const lineEnd = i === tobeLines.length - 1 ? currentLineOffset + tobeLines[i].length : tobeEditorView.state.doc.lineAt(currentLineOffset).to;
+						// Get line start/end from the *current* editor view's document
+						const lineStart = this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).from;
+						// For the last segment of a multi-line insertion, the end is just current offset + segment length
+						// Otherwise, it's the end of the current line in the doc.
+						const lineEnd = i === tobeLines.length - 1 ? currentTobeLineOffset + tobeLines[i].length : this.#tobeEditorView.state.doc.lineAt(currentTobeLineOffset).to;
+
 						tobeBuilder.add(
-							lineStart, lineEnd, // 줄의 실제 시작부터 끝까지
+							lineStart, lineEnd,
 							Decoration.line({ class: "cm-inserted-line-bg" })
 						);
-						currentLineOffset += tobeLines[i].length + 1; // 다음 줄 시작 위치로 이동
+						currentTobeLineOffset += tobeLines[i].length + 1; // Move to next line start
 					}
 
-
 					tobeCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // Deleted text
-					// asis 쪽에 인라인 데코레이션 추가
+				case diff_match_patch.DIFF_DELETE:
 					asisBuilder.add(
 						asisCursor, asisCursor + len,
 						Decoration.mark({ class: "cm-deleted-inline" })
 					);
 
-					// asis 쪽에 줄 전체 데코레이션 추가 (삭제된 줄)
+					// Deleted lines background
 					const asisLines = text.split('\n');
 					let currentAsisLineOffset = asisCursor;
 					for(let i = 0; i < asisLines.length; i++) {
-						const lineStart = asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
-						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+						const lineStart = this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).from;
+						const lineEnd = i === asisLines.length - 1 ? currentAsisLineOffset + asisLines[i].length : this.#asisEditorView.state.doc.lineAt(currentAsisLineOffset).to;
+
 						asisBuilder.add(
 							lineStart, lineEnd,
 							Decoration.line({ class: "cm-deleted-line-bg" })
@@ -299,14 +277,13 @@ export class IdeDiff extends HTMLElement {
 					asisCursor += len;
 					break;
 
-				case diff_match_patch.DIFF_EQUAL: // Unchanged text
+				case diff_match_patch.DIFF_EQUAL:
 					asisCursor += len;
 					tobeCursor += len;
 					break;
 			}
 		}
 
-		// 에디터 뷰에 데코레이션 업데이트 요청 디스패치
 		this.#asisEditorView.dispatch({
 			effects: setAsisDecorationsEffect.of(asisBuilder.finish())
 		});
@@ -321,25 +298,15 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 언어 변경 (선택 사항, 필요 시 활성화)
 		let langExtension;
 		switch(language) {
 			case 'javascript':
 				langExtension = javascript();
 				break;
-			// case 'html':
-			//     import { html } from "@codemirror/lang-html"; // 상단에 임포트 필요
-			//     langExtension = html();
-			//     break;
-			// case 'css':
-			//     import { css } from "@codemirror/lang-css";   // 상단에 임포트 필요
-			//     langExtension = css();
-			//     break;
 			default:
 				langExtension = javascript();
 		}
 
-		// 언어 확장 업데이트
 		this.#asisEditorView.dispatch({
 			effects: this.#languageCompartment.reconfigure(langExtension)
 		});