ide-assi 0.444.0 → 0.446.0

package/src/components/ideDiff.js.bak2

@@ -1,725 +0,0 @@
-import ninegrid from "ninegrid2";
-
-// CodeMirror 6 핵심 및 확장 임포트 (변동 없음)
-import {
-	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
-	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
-	Decoration
-} from "@codemirror/view";
-import {
-	EditorState, Compartment, StateField,
-	RangeSetBuilder,
-	StateEffect,
-	Text
-} from "@codemirror/state";
-import { history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { defaultKeymap, selectAll } from "@codemirror/commands";
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-import { bracketMatching } from "@codemirror/language";
-import { javascript } from "@codemirror/lang-javascript";
-import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
-import { lintKeymap } from "@codemirror/lint";
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-
-// Diff 로직을 위해 diff-match-patch 사용 (변동 없음)
-import { diff_match_patch } from 'diff-match-patch';
-
-// Diff 데코레이션을 위한 StateField 정의 (변동 없음)
-const asisDiffDecorations = StateField.define({
-	create() { return Decoration.none; },
-	update(decorations, tr) {
-		return tr.effects.reduce((currentDecos, effect) => {
-			if (effect.is(setAsisDecorationsEffect)) {
-				return effect.value;
-			}
-			return currentDecos;
-		}, decorations);
-	},
-	provide: f => EditorView.decorations.from(f)
-});
-
-const tobeDiffDecorations = StateField.define({
-	create() { return Decoration.none; },
-	update(decorations, tr) {
-		return tr.effects.reduce((currentDecos, effect) => {
-			if (effect.is(setTobeDecorationsEffect)) {
-				return effect.value;
-			}
-			return currentDecos;
-		}, decorations);
-	},
-	provide: f => EditorView.decorations.from(f)
-});
-
-const setAsisDecorationsEffect = StateEffect.define();
-const setTobeDecorationsEffect = StateEffect.define();
-
-export class IdeDiff extends HTMLElement {
-
-	#asisEditorView;
-	#tobeEditorView;
-	#asisEditorEl;
-	#tobeEditorEl;
-
-	#languageCompartment = new Compartment();
-
-	#isScrollSyncActive = false;
-	_asisScrollHandler = null;
-	_tobeScrollHandler = null;
-
-
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
-	connectedCallback() {
-		this.shadowRoot.innerHTML = `
-            <style>
-                /* ninegrid CSS 및 필요한 기본 스타일 (변동 없음) */
-                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-                ${ninegrid.getCustomPath(this, "ideDiff.css")}
-            </style>
-
-            <div class="wrapper">
-                <div class="panel asis"></div>
-                <nx-splitter></nx-splitter>
-                <div class="panel tobe"></div>
-            </div>
-        `;
-
-		requestAnimationFrame(() => {
-			this.#initCodeMirror();
-			const src1 = `
-import React, { useRef, useEffect } from "react" adfa;
-import { api, ai } from "ide-assi";
-import ninegrid from "ninegrid2";
-
-const DocManager = () => {
-  const tabRef = useRef(null);
-  const gridRef = useRef(null);
-
-  const selectList = async (params) => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-    api.post(\`/api/tmpl-a/doc-manager/selectList\`, params).then((res) => {
-      gridRef.current.data.source = res.list;
-    });
-  };
-
-  const handleNaturalLanguageSearch = async () => {
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchText = searchTextElement ? searchTextElement.value : "";
-
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    let params = {};
-    if (searchText) {
-      params = {
-        _whereClause: await ai.generateWhereCause(
-          "tmpla/DocManagerMapper.xml",
-          "selectList",
-          searchText,
-          import.meta.env.VITE_GEMINI_API_KEY
-        ),
-      };
-    }
-    selectList(params);
-  };
-
-  const handleClassicSearch = () => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    const form2Element = ninegrid.querySelector(".form2", tabRef.current);
-    const params = form2Element ? form2Element.getData() : {};
-    selectList(params);
-  };
-
-  useEffect(() => {
-    selectList({});
-
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchButton = ninegrid.querySelector(".search", tabRef.current);
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter" && !e.isComposing) {
-        handleNaturalLanguageSearch();
-      }
-    };
-
-    const handleClick = () => {
-      handleClassicSearch();
-    };
-
-    if (searchTextElement) {
-      searchTextElement.addEventListener("keydown", handleKeyDown);
-    }
-    if (searchButton) {
-      searchButton.addEventListener("click", handleClick);
-    }
-
-    return () => {
-      if (searchTextElement) {
-        searchTextElement.removeEventListener("keydown", handleKeyDown);
-      }
-      if (searchButton) {
-        searchButton.removeEventListener("click", handleClick);
-      }
-    };
-  }, []);
-
-  return (
-    <div className="wrapper">
-      <nx-collapse target="nx-tab" className="search-collapse"></nx-collapse>
-      <div className="list-wrapper">
-        <nx-tab theme="theme-3" ref={tabRef}>
-          <nx-tab-page caption="자연어 검색">
-            <nx-form className="form1">
-              <input
-                type="text"
-                id="searchText"
-                name="searchText"
-                placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"
-              />
-            </nx-form>
-          </nx-tab-page>
-          <nx-tab-page caption="클래식 검색">
-            <nx-form className="form2">
-              <label>문서명: <input type="text" name="docNm" /></label>
-              <label>매출액:
-                <input type="number" name="minAmt" placeholder="최소" /> ~
-                <input type="number" name="maxAmt" placeholder="최대" />
-              </label>
-            </nx-form>
-            <button className="search">검색</button>
-          </nx-tab-page>
-        </nx-tab>
-
-        <div className="grid-wrapper">
-          <nine-grid
-            ref={gridRef}
-            caption="문서관리"
-            select-type="row"
-            show-title-bar="true"
-            show-menu-icon="true"
-            show-status-bar="true"
-            enable-fixed-col="true"
-            row-resizable="false"
-            col-movable="true"
-          >
-            <table>
-              <colgroup>
-                <col width="50" fixed="left" background-color="gray" />
-                <col width="100" />
-                <col width="100" />
-                <col width="200" />
-                <col width="120" />
-                <col width="100" />
-                <col width="150" />
-                <col width="150" />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th>No.</th>
-                  <th>최종수정자</th>
-                  <th>문서ID</th>
-                  <th>문서명</th>
-                  <th>매출액</th>
-                  <th>최초등록자</th>
-                  <th>최초등록일</th>
-                  <th>최종수정일</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th><ng-row-indicator /></th>
-                  <td data-bind="updateUser" text-align="center"></td>
-                  <td data-bind="docId" text-align="center"></td>
-                  <td data-bind="docNm" text-align="left"></td>
-                  <td
-                    data-bind="amt"
-                    data-expr="data.amt.toLocaleString()"
-                    text-align="right"
-                    show-icon="true"
-                    icon-type="sphere"
-                    icon-color="data.amt >= 2000 ? 'red' : 'gray'"
-                  ></td>
-                  <td data-bind="insertUser" text-align="center"></td>
-                  <td data-bind="insertDt" text-align="center"></td>
-                  <td data-bind="updateDt" text-align="center"></td>
-                </tr>
-              </tbody>
-            </table>
-          </nine-grid>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DocManager;
-		`;
-
-			const src2 = `
-import React, { useRef, useEffect } from "react";
-import { api, ai } from "ide-assi";
-import ninegrid from "ninegrid2";
-
-const DocManager = () => {
-  const tabRef = useRef(null);
-  const gridRef = useRef(null);
-
-  const selectList = async (params) => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-    api.post(\`/api/tmpl-a/doc-manager/selectList\`, params).then((res) => {
-      gridRef.current.data.source = res.list;
-    });
-  };
-
-  const handleNaturalLanguageSearch = async () => {
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchText = searchTextElement ? searchTextElement.value : "";
-
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    let params = {};
-    if (searchText) {
-      params = {
-        _whereClause: await ai.generateWhereCause(
-          "tmpla/DocManagerMapper.xml",
-          "selectList",
-          searchText,
-          import.meta.env.VITE_GEMINI_API_KEY
-        ),
-      };
-    }
-    selectList(params);
-  };
-
-  const handleClassicSearch = () => {
-    if (!gridRef.current) return;
-    gridRef.current.classList.add("loading");
-
-    const form2Element = ninegrid.querySelector(".form2", tabRef.current);
-    const params = form2Element ? form2Element.getData() : {};
-    selectList(params);
-  };
-
-  useEffect(() => {
-    selectList({});
-
-    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
-    const searchButton = ninegrid.querySelector(".search", tabRef.current);
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Enter" && !e.isComposing) {
-        handleNaturalLanguageSearch();
-      }
-    };
-
-    const handleClick = () => {
-      handleClassicSearch();
-    };
-
-    if (searchTextElement) {
-      searchTextElement.addEventListener("keydown", handleKeyDown);
-    }
-    if (searchButton) {
-      searchButton.addEventListener("click", handleClick);
-    }
-
-    return () => {
-      if (searchTextElement) {
-        searchTextElement.removeEventListener("keydown", handleKeyDown);
-      }
-      if (searchButton) {
-        searchButton.removeEventListener("click", handleClick);
-      }
-    };
-  }, []);
-
-  return (
-    <div className="wrapper">
-      <nx-collapse target="nx-tab" className="search-collapse"></nx-collapse>
-      <div className="list-wrapper">
-        <nx-tab theme="theme-3" ref={tabRef}>
-          <nx-tab-page caption="자연어 검색">
-            <nx-form className="form1">
-              <input
-                type="text"
-                id="searchText"
-                name="searchText"
-                placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"
-              />
-            </nx-form>
-          </nx-tab-page>
-          <nx-tab-page caption="클래식 검색">
-            <nx-form className="form2">
-              <label>문서명: <input type="text" name="docNm" /></label>
-              <label>매출액:
-                <input type="number" name="minAmt" placeholder="최소" /> ~
-                <input type="number" name="maxAmt" placeholder="최대" />
-              </label>
-            </nx-form>
-            <button className="search">검색</button>
-          </nx-tab-page>
-        </nx-tab>
-
-        <div className="grid-wrapper">
-          <nine-grid
-            ref={gridRef}
-            caption="매출 문서 관리"
-            select-type="row"
-            show-title-bar="true"
-            show-menu-icon="true"
-            show-status-bar="true"
-            enable-fixed-col="true"
-            row-resizable="false"
-            col-movable="true"
-          >
-            <table>
-              <colgroup>
-                <col width="50" fixed="left" background-color="gray" />
-                <col width="100" />
-                <col width="120" />
-                <col width="100" />
-                <col width="200" />
-                <col width="100" />
-                <col width="150" />
-                <col width="150" />
-              </colgroup>
-              <thead>
-                <tr>
-                  <th>No.</th>
-                  <th>문서ID</th>
-                  <th>매출액</th>
-                  <th>최종수정자</th>
-                  <th>문서명</th>
-                  <th>최초등록자</th>
-                  <th>최초등록일</th>
-                  <th>최종수정일</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th><ng-row-indicator /></th>
-                  <td data-bind="docId" text-align="center"></td>
-                  <td
-                    data-bind="amt"
-                    data-expr="data.amt.toLocaleString()"
-                    text-align="right"
-                    show-icon="true"
-                    icon-type="sphere"
-                    icon-color="data.amt >= 2000 ? 'red' : 'gray'"
-                  ></td>
-                  <td data-bind="updateUser" text-align="center"></td>
-                  <td data-bind="docNm" text-align="left"></td>
-                  <td data-bind="insertUser" text-align="center"></td>
-                  <td data-bind="insertDt" text-align="center"></td>
-                  <td data-bind="updateDt" text-align="center"></td>
-                </tr>
-              </tbody>
-            </table>
-          </nine-grid>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DocManager;
-		`;
-			this.initialize(src1, src2, 'javascript');
-		});
-	}
-
-	#initCodeMirror = () => {
-		this.#asisEditorEl = this.shadowRoot.querySelector('.panel.asis');
-		this.#tobeEditorEl = this.shadowRoot.querySelector('.panel.tobe');
-
-		if (!this.#asisEditorEl || !this.#tobeEditorEl) {
-			console.error('CodeMirror panel containers not found!');
-			return;
-		}
-
-		const basicExtensions = [
-			lineNumbers(),
-			highlightSpecialChars(),
-			history(),
-			drawSelection(),
-			dropCursor(),
-			EditorState.allowMultipleSelections.of(true),
-			indentOnInput(),
-			bracketMatching(),
-			highlightActiveLine(),
-			highlightSelectionMatches(),
-			keymap.of([
-				...defaultKeymap,
-				...searchKeymap,
-				...historyKeymap,
-				...lintKeymap,
-				...completionKeymap,
-				indentWithTab,
-				selectAll
-			]),
-			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-			autocompletion(),
-		];
-
-		// ASIS 에디터 뷰 초기화
-		this.#asisEditorView = new EditorView({
-			state: EditorState.create({
-				doc: '',
-				extensions: [
-					basicExtensions,
-					javascript(),
-					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					asisDiffDecorations,
-					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
-					EditorView.updateListener.of((update) => {
-						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
-							update.view._initialAsisContentLoaded = true;
-							console.log("CodeMirror ASIS view is ready for initial content.");
-						}
-					})
-				]
-			}),
-			parent: this.#asisEditorEl
-		});
-
-		// TOBE 에디터 뷰 초기화
-		this.#tobeEditorView = new EditorView({
-			state: EditorState.create({
-				doc: '',
-				extensions: [
-					basicExtensions,
-					javascript(),
-					EditorState.readOnly.of(true),
-					this.#languageCompartment.of(javascript()),
-					tobeDiffDecorations,
-					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
-					EditorView.updateListener.of((update) => {
-						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
-							update.view._initialTobeContentLoaded = true;
-							console.log("CodeMirror TOBE view is ready for initial content.");
-						}
-					})
-				]
-			}),
-			parent: this.#tobeEditorEl
-		});
-
-		this.#setupScrollSync();
-	};
-
-	#setupScrollSync = () => {
-		if (this._asisScrollHandler) {
-			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
-			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
-		}
-
-		let scrollingA = false;
-		let scrollingB = false;
-
-		this._asisScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return;
-
-			if (!scrollingB) {
-				scrollingA = true;
-				this.#tobeEditorView.scrollDOM.scrollTop = this.#asisEditorView.scrollDOM.scrollTop;
-				this.#tobeEditorView.scrollDOM.scrollLeft = this.#asisEditorView.scrollDOM.scrollLeft;
-			}
-			scrollingB = false;
-		};
-
-		this._tobeScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return;
-
-			if (!scrollingA) {
-				scrollingB = true;
-				this.#asisEditorView.scrollDOM.scrollTop = this.#tobeEditorView.scrollDOM.scrollTop;
-				this.#asisEditorView.scrollDOM.scrollLeft = this.#tobeEditorView.scrollDOM.scrollLeft;
-			}
-			scrollingA = false;
-		};
-
-		this.#asisEditorView.scrollDOM.addEventListener('scroll', this._asisScrollHandler);
-		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
-	};
-
-	// IdeDiff 클래스 내부
-	#applyDiffDecorations = (asisSrc, tobeSrc) => {
-		const dmp = new diff_match_patch();
-		const diffs = dmp.diff_main(asisSrc, tobeSrc);
-		dmp.diff_cleanupSemantic(diffs);
-
-		const asisLineDecos = [];
-		const tobeLineDecos = [];
-
-		let asisCursor = 0;
-		let tobeCursor = 0;
-
-		// 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
-		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
-		const asisDoc = Text.of(asisSrc.split('\n'));
-		const tobeDoc = Text.of(tobeSrc.split('\n'));
-
-		for (const [op, text] of diffs) {
-			const len = text.length;
-
-			switch (op) {
-				case 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) {
-							break;
-						}
-					}
-					tobeCursor += len;
-					break;
-
-				case 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) {
-							break;
-						}
-					}
-					asisCursor += len;
-					break;
-
-				case diff_match_patch.DIFF_EQUAL: // Unchanged text
-					asisCursor += len;
-					tobeCursor += len;
-					break;
-			}
-		}
-
-		// 데코레이션 중복 및 겹침 방지를 위해 정렬
-		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)
-		};
-	};
-
-	initialize = (src1, src2, language = 'javascript') => {
-		if (!this.#asisEditorView || !this.#tobeEditorView) {
-			console.warn('CodeMirror Editors not initialized yet.');
-			return;
-		}
-
-		this.#isScrollSyncActive = false; // 스크롤 동기화 일시 중지
-
-		let langExtension;
-		switch(language) {
-			case 'javascript':
-				langExtension = javascript();
-				break;
-			default:
-				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: [
-				this.#languageCompartment.reconfigure(langExtension)
-			]
-		});
-
-		this.#tobeEditorView.dispatch({
-			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
-			effects: [
-				this.#languageCompartment.reconfigure(langExtension)
-			]
-		});
-
-		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
-		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
-		requestAnimationFrame(() => {
-			this.#asisEditorView.dispatch({
-				effects: [asisEffect]
-			});
-			this.#tobeEditorView.dispatch({
-				effects: [tobeEffect]
-			});
-
-			// ⭐️ 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
-			// 그 다음 프레임에서 스크롤 동기화를 활성화합니다.
-			requestAnimationFrame(() => {
-				this.#isScrollSyncActive = true;
-				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.
-				// this.#asisEditorView.scrollDOM.scrollTop = 0;
-				// this.#tobeEditorView.scrollDOM.scrollTop = 0;
-			});
-		});
-	};
-
-	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);