Skip to content

Commit 54bc272

Browse files
ensorrowensorrow
authored
feat: support diff & git uri preview of notebook file (#4323)
* feat: 支持 notebook git uri 预览 * feat: 完成diff新增cell能力开发 * feat: 支持cell diff * feat: support delete & unchanged cell diff * fix: fix notebook git uri * fix: dispose editors * fix: update dependency on editorTargetRef current value * fix: lint problem * fix: missing deps * chore: update lock
1 parent 92e7bca commit 54bc272

20 files changed

+1580
-7
lines changed

‎packages/notebook/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
"@opensumi/ide-outline": "workspace:*",
3535
"@opensumi/ide-overlay": "workspace:*",
3636
"@opensumi/ide-theme": "workspace:*",
37-
"antd": "^5.21.4"
37+
"@opensumi/ide-utils": "workspace:*",
38+
"antd": "^5.21.4",
39+
"diff": "^4.0.1",
40+
"resize-observer-polyfill": "1.5.1"
3841
}
3942
}

‎packages/notebook/src/browser/libro-preview.view.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Container, URI, ViewRender } from '@difizen/mana-app';
2+
import React, { useEffect, useState } from 'react';
3+
4+
import { useInjectable } from '@opensumi/ide-core-browser';
5+
import { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser/types';
6+
7+
import { LibroVersionManager } from './libro/diff-view/libro-version-manager';
8+
import { AIStudioLibroVersionView } from './libro/diff-view/libro-version-view';
9+
import { ContentLoaderType, ManaContainer } from './mana';
10+
11+
export const LibroVersionPreview: ReactEditorComponent = ({ resource }) => {
12+
const uri = resource.uri;
13+
const originalUri = uri.scheme === 'diff' ? new URI(decodeURIComponent(uri.getParsedQuery().original)) : undefined;
14+
const targetUri = uri.scheme === 'diff' ? new URI(decodeURIComponent(uri.getParsedQuery().modified)) : undefined;
15+
const manaContainer = useInjectable<Container>(ManaContainer);
16+
const libroVersionManager = manaContainer.get(LibroVersionManager);
17+
const [versionView, setVersionView] = useState<AIStudioLibroVersionView>();
18+
19+
useEffect(() => {
20+
libroVersionManager
21+
.getOrCreateView({
22+
resource: uri.toString(),
23+
loadType: ContentLoaderType,
24+
originalUri,
25+
targetUri,
26+
})
27+
.then((view) => {
28+
setVersionView(view);
29+
});
30+
}, [uri]);
31+
32+
return <div className='libro-version'>{versionView && <ViewRender view={versionView}></ViewRender>}</div>;
33+
};

‎packages/notebook/src/browser/libro.contribution.tsx‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,11 @@ import { IThemeService, IconType } from '@opensumi/ide-theme/lib/common';
4141

4242
import { KERNEL_PANEL_ID, KernelPanel, initKernelPanelColorToken } from './kernel-panel';
4343
import { LibroOpensumiModule } from './libro';
44+
import { LibroDiffModule } from './libro/diff-view';
4445
import { LibroOpener } from './libro-opener';
46+
import { LibroVersionPreview } from './libro-preview.view';
4547
import { initLibroColorToken } from './libro.color.tokens';
46-
import { LIBRO_COMPONENTS_ID, LIBRO_COMPONENTS_SCHEME_ID } from './libro.protocol';
48+
import { LIBRO_COMPONENTS_SCHEME_ID, LIBRO_COMPONENT_ID, LIBRO_PREVIEW_COMPONENT_ID } from './libro.protocol';
4749
import { OpensumiLibroView } from './libro.view';
4850
import { ManaContainer, initLibroOpensumi, manaContainer } from './mana/index';
4951
import { NotebookDocumentContentProvider } from './notebook-document-content-provider';
@@ -62,7 +64,14 @@ const LayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
6264
return (
6365
<ManaComponents.Application
6466
context={{ container: manaContainer }}
65-
modules={[ManaAppPreset, LibroJupyterNoEditorModule, LibroTOCModule, LibroOpensumiModule, LibroVariableModule]}
67+
modules={[
68+
ManaAppPreset,
69+
LibroJupyterNoEditorModule,
70+
LibroDiffModule,
71+
LibroTOCModule,
72+
LibroOpensumiModule,
73+
LibroVariableModule,
74+
]}
6675
renderChildren
6776
onReady={() => setIsReady(true)}
6877
>
@@ -182,11 +191,17 @@ export class LibroContribution
182191

183192
registerEditorComponent(registry: EditorComponentRegistry) {
184193
registry.registerEditorComponent({
185-
uid: LIBRO_COMPONENTS_ID,
194+
uid: LIBRO_COMPONENT_ID,
186195
scheme: LIBRO_COMPONENTS_SCHEME_ID,
187196
component: OpensumiLibroView,
188197
});
189198

199+
registry.registerEditorComponent({
200+
uid: LIBRO_PREVIEW_COMPONENT_ID,
201+
scheme: LIBRO_COMPONENTS_SCHEME_ID,
202+
component: LibroVersionPreview,
203+
});
204+
190205
registry.registerEditorComponentResolver(Schemes.file, (resource, results) => {
191206
if (resource.uri.path.ext === `.${LIBRO_COMPONENTS_SCHEME_ID}`) {
192207
// 首次打开 notebook 文件时初始化 jupyter 服务连接
@@ -197,7 +212,31 @@ export class LibroContribution
197212
}
198213
results.push({
199214
type: 'component',
200-
componentId: LIBRO_COMPONENTS_ID,
215+
componentId: LIBRO_COMPONENT_ID,
216+
});
217+
}
218+
});
219+
220+
// git schema 的 notebook 资源，在 ide 中打开
221+
registry.registerEditorComponentResolver('git', (resource, results) => {
222+
if (resource.uri.path.ext === '.ipynb') {
223+
results.push({
224+
type: 'component',
225+
componentId: LIBRO_PREVIEW_COMPONENT_ID,
226+
});
227+
}
228+
});
229+
230+
registry.registerEditorComponentResolver('diff', (resource, results) => {
231+
const { original, modified } = resource.uri.getParsedQuery();
232+
if (
233+
new URI(decodeURIComponent(modified)).path.ext === '.ipynb' ||
234+
new URI(decodeURIComponent(original)).path.ext === '.ipynb'
235+
) {
236+
// TODO: 需要等 git 插件 ready，否则 git uri 无法解析
237+
results.push({
238+
type: 'component',
239+
componentId: LIBRO_PREVIEW_COMPONENT_ID,
201240
});
202241
}
203242
});

‎packages/notebook/src/browser/libro.protocol.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
export const LIBRO_COMPONENTS_ID = 'opensumi:libro';
1+
export const LIBRO_COMPONENT_ID = 'opensumi:libro';
2+
export const LIBRO_PREVIEW_COMPONENT_ID = 'opensumi:libro-preview';
3+
export const LIBRO_DIFF_COMPONENT_ID = 'opensumi:libro-diff';
24
export const LIBRO_COMPONENTS_SCHEME_ID = 'ipynb';

‎packages/notebook/src/browser/libro/diff-view/components/hooks.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
2+
import ResizeObserver from 'resize-observer-polyfill';
3+
4+
import { ICodeEditor, IDiffEditor } from '@opensumi/ide-monaco';
5+
6+
export interface Size {
7+
width?: number;
8+
height?: number;
9+
}
10+
11+
function useLatest<T>(value: T) {
12+
const ref = useRef(value);
13+
ref.current = value;
14+
15+
return ref;
16+
}
17+
18+
export default useLatest;
19+
export function useSize(fn: () => void, ref: React.ForwardedRef<HTMLDivElement>): void {
20+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
21+
const callback = useLatest((size: Size) => {
22+
fn();
23+
});
24+
useLayoutEffect(() => {
25+
if (typeof ref !== 'object') {
26+
return () => {};
27+
}
28+
const el = ref?.current;
29+
if (!el || !fn) {
30+
return () => {};
31+
}
32+
const resizeObserver = new ResizeObserver((entries) => {
33+
entries.forEach((entry) => {
34+
callback.current({
35+
width: entry.target.clientWidth,
36+
height: entry.target.clientHeight,
37+
});
38+
});
39+
});
40+
41+
resizeObserver.observe(el as HTMLElement);
42+
return () => {
43+
resizeObserver.disconnect();
44+
};
45+
}, [callback, ref, fn]);
46+
}
47+
48+
const setEditorHeight = (
49+
editor: ICodeEditor | undefined,
50+
editorTarget: HTMLDivElement,
51+
editorContainer: HTMLDivElement,
52+
) => {
53+
if (!editor) {
54+
return;
55+
}
56+
const curLenght = editor.getModel()?.getLineCount() || 1;
57+
const diffItemHeight = `${curLenght * 20 + 16 + 12 + 22}px`;
58+
const _height = `${curLenght * 20}px`;
59+
if (editorTarget.style.height !== _height) {
60+
editorTarget.style.height = _height;
61+
editorContainer.style.height = diffItemHeight;
62+
editor.layout();
63+
}
64+
};
65+
66+
const setDiffEditorHeight = (
67+
editor: IDiffEditor | undefined,
68+
editorTarget: HTMLDivElement,
69+
editorContainer: HTMLDivElement,
70+
) => {
71+
const originalLineCount = editor?.getModel()?.original.getLineCount() || 0;
72+
73+
editor?.onDidUpdateDiff(() => {
74+
let finalLineCount = originalLineCount;
75+
for (const change of editor?.getLineChanges() || []) {
76+
if (!change.originalEndLineNumber) {
77+
finalLineCount += change.modifiedEndLineNumber - change.modifiedStartLineNumber + 1;
78+
} else if (
79+
change.originalStartLineNumber === change.modifiedStartLineNumber &&
80+
change.modifiedEndLineNumber > change.originalEndLineNumber
81+
) {
82+
finalLineCount += change.modifiedEndLineNumber - change.originalEndLineNumber;
83+
}
84+
}
85+
editorTarget.style.height = `${finalLineCount * 20 + 12}px`;
86+
editorContainer.style.height = `${finalLineCount * 20 + 16 + 12 + 22}px`;
87+
editor.layout();
88+
});
89+
};
90+
91+
export function useEditorLayout(
92+
editor: ICodeEditor | IDiffEditor | undefined,
93+
editorTargetRef: React.RefObject<HTMLDivElement>,
94+
editorContainerRef: React.RefObject<HTMLDivElement>,
95+
) {
96+
const editorTarget = editorTargetRef.current;
97+
const editorContainer = editorContainerRef.current;
98+
99+
const editorLaylout = useCallback(() => {
100+
if (editor) {
101+
editor.layout();
102+
}
103+
}, [editor]);
104+
105+
useEffect(() => {
106+
if (editor) {
107+
if (!editorTarget || !editorContainer) {
108+
return;
109+
}
110+
if ((editor as IDiffEditor).renderSideBySide !== undefined) {
111+
setDiffEditorHeight(editor as IDiffEditor, editorTarget, editorContainer);
112+
} else {
113+
setEditorHeight(editor as ICodeEditor, editorTarget, editorContainer);
114+
}
115+
}
116+
window.addEventListener('resize', editorLaylout);
117+
return () => {
118+
window.removeEventListener('resize', editorLaylout);
119+
};
120+
}, [editor, editorLaylout]);
121+
122+
useSize(editorLaylout, editorContainerRef);
123+
}

0 commit comments

Comments
 (0)