ide-assi 0.402.0 → 0.403.0

package/dist/bundle.cjs.js

@@ -217623,6 +217623,31 @@ function maxLineNumber(lines) {
         last = last * 10 + 9;
     return last;
 }
+const activeLineGutterMarker = /*@__PURE__*/new class extends GutterMarker {
+    constructor() {
+        super(...arguments);
+        this.elementClass = "cm-activeLineGutter";
+    }
+};
+const activeLineGutterHighlighter = /*@__PURE__*/gutterLineClass.compute(["selection"], state => {
+    let marks = [], last = -1;
+    for (let range of state.selection.ranges) {
+        let linePos = state.doc.lineAt(range.head).from;
+        if (linePos > last) {
+            last = linePos;
+            marks.push(activeLineGutterMarker.range(linePos));
+        }
+    }
+    return RangeSet.of(marks);
+});
+/**
+Returns an extension that adds a `cm-activeLineGutter` class to
+all gutter elements on the [active
+line](https://codemirror.net/6/docs/ref/#view.highlightActiveLine).
+*/
+function highlightActiveLineGutter() {
+    return activeLineGutterHighlighter;
+}
 
 /**
 The default maximum length of a `TreeBuffer` node.
@@ -221387,50 +221412,6 @@ function continuedIndent({ except, units = 1 } = {}) {
         return context.baseIndent + (matchExcept ? 0 : units * context.unit);
     };
 }
-const DontIndentBeyond = 200;
-/**
-Enables reindentation on input. When a language defines an
-`indentOnInput` field in its [language
-data](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt), which must hold a regular
-expression, the line at the cursor will be reindented whenever new
-text is typed and the input from the start of the line up to the
-cursor matches that regexp.
-
-To avoid unneccesary reindents, it is recommended to start the
-regexp with `^` (usually followed by `\s*`), and end it with `$`.
-For example, `/^\s*\}$/` will reindent when a closing brace is
-added at the start of a line.
-*/
-function indentOnInput() {
-    return EditorState.transactionFilter.of(tr => {
-        if (!tr.docChanged || !tr.isUserEvent("input.type") && !tr.isUserEvent("input.complete"))
-            return tr;
-        let rules = tr.startState.languageDataAt("indentOnInput", tr.startState.selection.main.head);
-        if (!rules.length)
-            return tr;
-        let doc = tr.newDoc, { head } = tr.newSelection.main, line = doc.lineAt(head);
-        if (head > line.from + DontIndentBeyond)
-            return tr;
-        let lineStart = doc.sliceString(line.from, head);
-        if (!rules.some(r => r.test(lineStart)))
-            return tr;
-        let { state } = tr, last = -1, changes = [];
-        for (let { head } of state.selection.ranges) {
-            let line = state.doc.lineAt(head);
-            if (line.from == last)
-                continue;
-            last = line.from;
-            let indent = getIndentation(state, line.from);
-            if (indent == null)
-                continue;
-            let cur = /^\s*/.exec(line.text)[0];
-            let norm = indentString(state, indent);
-            if (cur != norm)
-                changes.push({ from: line.from, to: line.from + cur.length, insert: norm });
-        }
-        return changes.length ? [tr, { changes, sequential: true }] : tr;
-    });
-}
 /**
 This node prop is used to associate folding information with
 syntax node types. Given a syntax node, it should check whether
@@ -221519,9 +221500,7 @@ function syntaxHighlighting(highlighter, options) {
             ext.push(EditorView.styleModule.of(highlighter.module));
         themeType = highlighter.themeType;
     }
-    if (options === null || options === void 0 ? void 0 : options.fallback)
-        ext.push(fallbackHighlighter.of(highlighter));
-    else if (themeType)
+    if (themeType)
         ext.push(highlighterFacet.computeN([EditorView.darkTheme], state => {
             return state.facet(EditorView.darkTheme) == (themeType == "dark") ? [highlighter] : [];
         }));
@@ -234776,35 +234755,45 @@ function requireDiffMatchPatch () {
 
 var diffMatchPatchExports = requireDiffMatchPatch();
 
-// Diff 데코레이션을 위한 StateField 정의 (변동 없음)
+// --- Diff 데코레이션을 위한 StateEffect 정의 (수정: DecorationSet 타입 명시) ---
+const setAsisDecorationsEffect = StateEffect.define();
+const setTobeDecorationsEffect = StateEffect.define();
+
+// --- Diff 데코레이션을 위한 StateField 정의 ---
 const asisDiffDecorations = StateField.define({
-	create() { return Decoration.none; },
+	create() {
+		return Decoration.none; // 초기 상태: 데코레이션 없음
+	},
 	update(decorations, tr) {
-		return tr.effects.reduce((currentDecos, effect) => {
+		// 트랜잭션의 변화를 데코레이션에 매핑하여 위치가 변경되어도 데코레이션이 유지되도록 함
+		decorations = decorations.map(tr.changes);
+		// setAsisDecorationsEffect가 있다면 해당 효과의 값을 적용
+		for (let effect of tr.effects) {
 			if (effect.is(setAsisDecorationsEffect)) {
-				return effect.value;
+				return effect.value; // 새로운 DecorationSet으로 교체
 			}
-			return currentDecos;
-		}, decorations);
+		}
+		return decorations; // 효과가 없으면 기존 데코레이션 반환
 	},
-	provide: f => EditorView.decorations.from(f)
+	provide: f => EditorView.decorations.from(f) // 이 필드가 제공하는 데코레이션을 EditorView.decorations 확장으로 등록
 });
 
 const tobeDiffDecorations = StateField.define({
-	create() { return Decoration.none; },
+	create() {
+		return Decoration.none; // 초기 상태: 데코레이션 없음
+	},
 	update(decorations, tr) {
-		return tr.effects.reduce((currentDecos, effect) => {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
 			if (effect.is(setTobeDecorationsEffect)) {
-				return effect.value;
+				return effect.value; // 새로운 DecorationSet으로 교체
 			}
-			return currentDecos;
-		}, decorations);
+		}
+		return decorations;
 	},
 	provide: f => EditorView.decorations.from(f)
 });
 
-const setAsisDecorationsEffect = StateEffect.define();
-const setTobeDecorationsEffect = StateEffect.define();
 
 class IdeDiff extends HTMLElement {
 
@@ -234828,9 +234817,13 @@ class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
-                /* ninegrid CSS 및 필요한 기본 스타일 (변동 없음) */
+                /* ninegrid CSS 및 필요한 기본 스타일 */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
+                
+                /* Diff 데코레이션 CSS 직접 추가 (없으면 ideDiff.css에 추가) */
+                .cm-inserted-line-bg { background-color: #e6ffed; border-left: 3px solid #66bb6a; }
+                .cm-deleted-line-bg { background-color: #ffebe9; border-left: 3px solid #ef5350; }
             </style>
 
             <div class="wrapper">
@@ -234845,6 +234838,22 @@ class IdeDiff extends HTMLElement {
 		});
 	}
 
+	disconnectedCallback() {
+		// 컴포넌트 해제 시 스크롤 리스너 제거
+		if (this._asisScrollHandler) {
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+			this._asisScrollHandler = null;
+			this._tobeScrollHandler = null;
+		}
+		if (this.#asisEditorView) {
+			this.#asisEditorView.destroy();
+		}
+		if (this.#tobeEditorView) {
+			this.#tobeEditorView.destroy();
+		}
+	}
+
 	#initCodeMirror = () => {
 		this.#asisEditorEl = this.shadowRoot.querySelector('.panel.asis');
 		this.#tobeEditorEl = this.shadowRoot.querySelector('.panel.tobe');
@@ -234861,9 +234870,10 @@ class IdeDiff extends HTMLElement {
 			drawSelection(),
 			dropCursor(),
 			EditorState.allowMultipleSelections.of(true),
-			indentOnInput(),
+			indentOnInput(), // 함수 호출
 			bracketMatching(),
 			highlightActiveLine(),
+			highlightActiveLineGutter(),
 			highlightSelectionMatches(),
 			keymap.of([
 				...defaultKeymap,
@@ -234871,11 +234881,11 @@ class IdeDiff extends HTMLElement {
 				...historyKeymap,
 				...lintKeymap,
 				...completionKeymap,
-				indentWithTab,
-				selectAll
+				indentWithTab(), // 함수 호출
+				selectAll() // 함수 호출
 			]),
-			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-			autocompletion(),
+			syntaxHighlighting(defaultHighlightStyle), // { fallback: true } 제거
+			autocompletion(), // 함수 호출
 		];
 
 		// ASIS 에디터 뷰 초기화
@@ -234884,11 +234894,9 @@ class IdeDiff extends HTMLElement {
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(),
+					this.#languageCompartment.of(javascript()), // 초기 언어 설정
 					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations,
-					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
+					asisDiffDecorations, // ASIS Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -234906,11 +234914,9 @@ class IdeDiff extends HTMLElement {
 				doc: '',
 				extensions: [
 					basicExtensions,
-					javascript(),
+					this.#languageCompartment.of(javascript()), // 초기 언어 설정
 					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations,
-					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
+					tobeDiffDecorations, // TOBE Diff 데코레이션 필드
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -234960,71 +234966,49 @@ class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// IdeDiff 클래스 내부
+	// Diff 데코레이션 계산 및 반환 함수
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
 		dmp.diff_cleanupSemantic(diffs);
 
-		const asisLineDecos = [];
-		const tobeLineDecos = [];
+		const asisLineBuilder = new RangeSetBuilder();
+		const tobeLineBuilder = new RangeSetBuilder();
 
-		let asisCursor = 0;
-		let tobeCursor = 0;
+		let asisCursor = 0; // ASIS 텍스트에서의 현재 커서 위치 (문자 오프셋)
+		let tobeCursor = 0; // TOBE 텍스트에서의 현재 커서 위치 (문자 오프셋)
 
-		// 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
-		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
-		const asisDoc = Text.of(asisSrc.split('\n'));
-		const tobeDoc = Text.of(tobeSrc.split('\n'));
+		// Decoration 인스턴스 미리 생성
+		const insertedLineDeco = Decoration.line({ class: "cm-inserted-line-bg" });
+		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
 
 		for (const [op, text] of diffs) {
-			const len = text.length;
+			const len = text.length; // 현재 Diff 청크의 텍스트 길이
+			const linesInChunk = text.split('\n');
 
 			switch (op) {
-				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // Added text
-					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({
-								from: line.from,
-								to: line.to,
-								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) {
+				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // Added text (TOBE에만 존재)
+					for (let i = 0; i < linesInChunk.length; i++) {
+						// 마지막 줄이 비어있고 해당 청크가 개행으로 끝나지 않으면 스킵
+						if (i === linesInChunk.length - 1 && linesInChunk[i] === '' && !text.endsWith('\n')) {
+							tobeCursor += len; // tobeCursor만 해당 청크 길이만큼 증가
 							break;
 						}
+						// Decoration.line은 줄의 시작 위치에만 추가하면 CodeMirror가 해당 줄 전체에 적용합니다.
+						tobeLineBuilder.add(tobeCursor, tobeCursor, insertedLineDeco);
+						tobeCursor += linesInChunk[i].length + (i < linesInChunk.length - 1 ? 1 : 0);
 					}
-					tobeCursor += len;
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text
-					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({
-								from: line.from,
-								to: line.to,
-								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) {
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // Deleted text (ASIS에만 존재)
+					for (let i = 0; i < linesInChunk.length; i++) {
+						if (i === linesInChunk.length - 1 && linesInChunk[i] === '' && !text.endsWith('\n')) {
+							asisCursor += len;
 							break;
 						}
+						asisLineBuilder.add(asisCursor, asisCursor, deletedLineDeco);
+						asisCursor += linesInChunk[i].length + (i < linesInChunk.length - 1 ? 1 : 0);
 					}
-					asisCursor += len;
 					break;
 
 				case diffMatchPatchExports.diff_match_patch.DIFF_EQUAL: // Unchanged text
@@ -235034,26 +235018,9 @@ class IdeDiff extends HTMLElement {
 			}
 		}
 
-		// 데코레이션 중복 및 겹침 방지를 위해 정렬
-		asisLineDecos.sort((a, b) => a.from - b.from);
-		tobeLineDecos.sort((a, b) => a.from - b.from);
-
-		// 라인 데코레이션 빌더 생성
-		const asisLineBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of asisLineDecos) {
-			asisLineBuilder.add(from, to, deco);
-		}
-		const finalAsisDecorations = asisLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
-
-		const tobeLineBuilder = new RangeSetBuilder();
-		for (const { from, to, deco } of tobeLineDecos) {
-			tobeLineBuilder.add(from, to, deco);
-		}
-		const finalTobeDecorations = tobeLineBuilder.finish(); // ⭐️ .update({ add: ... }) 부분 제거
-
 		return {
-			asisEffect: setAsisDecorationsEffect.of(finalAsisDecorations),
-			tobeEffect: setTobeDecorationsEffect.of(finalTobeDecorations)
+			asisDecorations: asisLineBuilder.finish(),
+			tobeDecorations: tobeLineBuilder.finish()
 		};
 	};
 
@@ -235070,16 +235037,17 @@ class IdeDiff extends HTMLElement {
 			case 'javascript':
 				langExtension = javascript();
 				break;
+			// case 'java':
+			//    langExtension = java();
+			//    break;
+			// case 'xml':
+			//    langExtension = xml();
+			//    break;
 			default:
-				langExtension = javascript();
+				langExtension = javascript(); // 기본값
 		}
 
-		// 데코레이션 효과는 미리 계산해 둡니다.
-		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
-
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
-		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
-
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
@@ -235094,27 +235062,19 @@ class IdeDiff extends HTMLElement {
 			]
 		});
 
-		console.log(asisEffect, tobeEffect);
-
-		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
+		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
+			const { asisDecorations, tobeDecorations } = this.#applyDiffDecorations(src1, src2);
+
 			this.#asisEditorView.dispatch({
-				effects: [
-					StateEffect.reconfigure.of(
-						EditorView.decorations.of(
-							Decoration.set(
-								Decoration.line({ attributes: { style: "font-weight: bold" } }).range(0)
-							)
-						)
-					)
-				]
+				effects: [setAsisDecorationsEffect.of(asisDecorations)] // StateField가 처리할 효과
 			});
 			this.#tobeEditorView.dispatch({
-				//effects: [tobeEffect]
+				effects: [setTobeDecorationsEffect.of(tobeDecorations)] // StateField가 처리할 효과
 			});
 
-			// ⭐️ 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
+			// 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
 			// 그 다음 프레임에서 스크롤 동기화를 활성화합니다.
 			requestAnimationFrame(() => {
 				this.#isScrollSyncActive = true;
@@ -235124,23 +235084,8 @@ class IdeDiff extends HTMLElement {
 			});
 		});
 	};
-
-	disconnectedCallback() {
-		// 컴포넌트 해제 시 스크롤 리스너 제거
-		if (this._asisScrollHandler) {
-			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
-			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
-			this._asisScrollHandler = null;
-			this._tobeScrollHandler = null;
-		}
-		if (this.#asisEditorView) {
-			this.#asisEditorView.destroy();
-		}
-		if (this.#tobeEditorView) {
-			this.#tobeEditorView.destroy();
-		}
-	}
 }
+
 customElements.define("ide-diff", IdeDiff);
 
 //import "./components/ideAssi.js";