@opensumi/ide-notebook 3.7.1 → 3.7.2-next-1739848467.0

package/src/browser/libro/diff-view/libro-diff-view.tsx

@@ -0,0 +1,351 @@
+import { ColumnHeightOutlined } from '@ant-design/icons';
+import { LibroContentService } from '@difizen/libro-core';
+import {
+  BaseView,
+  ViewInstance,
+  ViewOption,
+  getOrigin,
+  inject,
+  prop,
+  transient,
+  useInject,
+  view,
+} from '@difizen/mana-app';
+import { Spin } from 'antd';
+import { diffArrays } from 'diff';
+import React, { forwardRef, useEffect } from 'react';
+
+import './index.less';
+import { ContentLoaderType } from '../../mana';
+
+import { ContentSameIcon } from './components/libro-diff-all-cells-same-components';
+import { LibroDiffChangedCellComponent } from './components/libro-diff-changed-cell-components';
+import { LibroDiffSideCellComponent } from './components/libro-diff-side-cell-components';
+import { DiffCellItem, DiffCellUnchangedItems, DiffOption, libroDiffViewFactoryId } from './libro-diff-protocol';
+
+import type { DiffArrayItem, DiffCellItemResult, DiffView, IDiffNotebookContent } from './libro-diff-protocol';
+import type { ICell, MultilineString } from '@difizen/libro-common';
+import type { ViewComponent } from '@difizen/mana-app';
+
+function comparator(compareLeft: ICell, compareRight: ICell) {
+  return compareLeft.id === compareRight.id;
+}
+
+function multilineStringEqual(a: MultilineString, b: MultilineString) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+export const LibroDiffRender = forwardRef(() => {
+  const libroDiffView = useInject<LibroDiffView>(ViewInstance);
+  useEffect(() => {}, [
+    libroDiffView.diffUnchangedCellsRenderStatus,
+    libroDiffView.diffCellsResult,
+    libroDiffView.isDiffSame,
+  ]);
+  if (!libroDiffView.diffCellsResult) {
+    return (
+      <div className='libro-diff-content-loading-container'>
+        <Spin size='large' />
+      </div>
+    );
+  }
+
+  if (libroDiffView.isDiffSame) {
+    return (
+      <div className='libro-diff-content-same-container'>
+        <ContentSameIcon />
+        <span className='libro-diff-content-same-text'>内容一致</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className='libro-diff-content-container'>
+      {libroDiffView.diffCellsResult &&
+        libroDiffView.diffCellsResult.map((item) => {
+          if (DiffCellItem.is(item) && item.diffType === 'added') {
+            return (
+              <LibroDiffSideCellComponent
+                diffCellResultItem={item}
+                key={libroDiffView.id + item.origin.id?.toString()}
+              />
+            );
+          } else if (DiffCellItem.is(item) && item.diffType === 'removed') {
+            return (
+              <LibroDiffSideCellComponent
+                diffCellResultItem={item}
+                key={libroDiffView.id + item.origin.id?.toString()}
+              />
+            );
+          } else if (DiffCellItem.is(item) && item.diffType === 'changed') {
+            return (
+              <LibroDiffChangedCellComponent
+                diffCellResultItem={item}
+                key={libroDiffView.id + item.origin.id?.toString()}
+              />
+            );
+          } else {
+            if (!DiffCellUnchangedItems.is(item) || item.unchangedResultItems.length === 0) {
+              return null;
+            }
+            if (item.isShown) {
+              return item.unchangedResultItems.map((unchangedItem) => (
+                <LibroDiffChangedCellComponent
+                  diffCellResultItem={unchangedItem}
+                  key={libroDiffView.id + unchangedItem.origin.id?.toString()}
+                />
+              ));
+            } else {
+              return (
+                <div
+                  className='libro-diff-fold-container'
+                  key={libroDiffView.id + item.unchangedResultItems[0].origin.id}
+                >
+                  <div
+                    className='libro-diff-fold'
+                    onClick={() => {
+                      item.isShown = true;
+                      libroDiffView.diffUnchangedCellsRenderStatus = libroDiffView.getUnchangedDiffCellsRenderStatus();
+                    }}
+                  >
+                    <ColumnHeightOutlined />
+                    <span className='libro-diff-fold-text'>展开{item.unchangedResultItems.length}个未更改的 Cell</span>
+                  </div>
+                </div>
+              );
+            }
+          }
+        })}
+    </div>
+  );
+});
+
+@transient()
+@view(libroDiffViewFactoryId)
+export class LibroDiffView extends BaseView implements DiffView {
+  view: ViewComponent = LibroDiffRender;
+  libroContentService: LibroContentService;
+  @prop()
+  diffUnchangedCellsRenderStatus: 'all' | 'part' | 'none' = 'none';
+  @prop()
+  diffCellsResult: DiffCellItemResult[];
+  @prop()
+  isDiffSame: boolean = true;
+  @prop()
+  hasUnchangedCells: boolean = false;
+  options: Record<string, any>;
+  originContent: IDiffNotebookContent;
+  targetContent: IDiffNotebookContent;
+  targetFilePath: string;
+  originFilePath: string;
+  constructor(
+    @inject(ViewOption) options: DiffOption,
+    @inject(LibroContentService) libroContentService: LibroContentService,
+  ) {
+    super();
+    this.libroContentService = libroContentService;
+    this.options = options;
+    this.targetFilePath = options.target.path.toString();
+    this.originFilePath = options.origin.path.toString();
+    this.loadDiffContent(options).then(() => {
+      this.diffCellsResult = this.getDiffCellsResult(
+        this.originContent.content.cells,
+        this.targetContent.content.cells,
+      );
+    });
+  }
+
+  loadDiffContent = async (options: DiffOption) => {
+    const originContent = await this.libroContentService.loadLibroContent(
+      { loadType: ContentLoaderType, resource: options.origin },
+      this,
+    );
+    this.originContent = {
+      // FIXME: 干啥的？
+      diffTag: options.origin.toString(),
+      content: originContent,
+    };
+    const targetContent = await this.libroContentService.loadLibroContent(
+      { loadType: ContentLoaderType, resource: options.target },
+      this,
+    );
+    this.targetContent = {
+      diffTag: options.target.toString(),
+      content: targetContent,
+    };
+  };
+
+  foldAllUnchangedDiffCells = () => {
+    this.diffCellsResult.map((item) => {
+      if (DiffCellUnchangedItems.is(item)) {
+        item.isShown = false;
+      }
+    });
+  };
+
+  expandAllUnchangedDiffCells = () => {
+    this.diffCellsResult.map((item) => {
+      if (DiffCellUnchangedItems.is(item)) {
+        item.isShown = true;
+      }
+    });
+  };
+
+  getUnchangedDiffCellsRenderStatus = () => {
+    let unchanedDiffCellsGroups = 0;
+    let unchanedDiffCellsfolded = 0;
+    let unchanedDiffCellsExpanded = 0;
+    for (const item of this.diffCellsResult) {
+      if (DiffCellUnchangedItems.is(item)) {
+        unchanedDiffCellsGroups = unchanedDiffCellsGroups + 1;
+        if (item.isShown) {
+          unchanedDiffCellsExpanded = unchanedDiffCellsExpanded + 1;
+        } else {
+          unchanedDiffCellsfolded = unchanedDiffCellsfolded + 1;
+        }
+      }
+    }
+    if (unchanedDiffCellsfolded > 0) {
+      return unchanedDiffCellsExpanded > 0 ? 'part' : 'none';
+    } else {
+      return 'all';
+    }
+  };
+
+  getAddedCellResult = (valueItem: ICell) => {
+    const originDiffCellItem = JSON.parse(JSON.stringify(valueItem)) as ICell;
+    originDiffCellItem.source = '';
+    const addedCellResult: DiffCellItem = {
+      diffType: 'added',
+      origin: originDiffCellItem,
+      target: valueItem,
+    };
+    return Object.assign(addedCellResult, {
+      originFilePath: this.originFilePath,
+      targetFilePath: this.targetFilePath,
+    });
+  };
+
+  getRemovedCellResult = (valueItem: ICell) => {
+    const targetDiffCellItem = JSON.parse(JSON.stringify(valueItem)) as ICell;
+    targetDiffCellItem.source = '';
+    const removedCellResult: DiffCellItem = {
+      diffType: 'removed',
+      origin: valueItem,
+      target: targetDiffCellItem,
+    };
+    return Object.assign(removedCellResult, {
+      originFilePath: this.originFilePath,
+      targetFilePath: this.targetFilePath,
+    });
+  };
+
+  getUnchangedCellResult = (originItem: ICell, targetItem: ICell) => {
+    const unchangedCellResult: DiffCellItem = {
+      diffType: 'unchanged',
+      origin: originItem,
+      target: targetItem,
+    };
+    return Object.assign(unchangedCellResult, {
+      originFilePath: this.originFilePath,
+      targetFilePath: this.targetFilePath,
+    });
+  };
+
+  getChangedCellResult = (originItem: ICell, targetItem: ICell) => {
+    const changedCellResult: DiffCellItem = {
+      diffType: 'changed',
+      origin: originItem,
+      target: targetItem,
+    };
+    return Object.assign(changedCellResult, {
+      originFilePath: this.originFilePath,
+      targetFilePath: this.targetFilePath,
+    });
+  };
+
+  getDiffCellsResult = (origin: ICell[], target: ICell[]) => {
+    const diffCellsResult: (DiffCellItemResult & { originFilePath?: string; targetFilePath?: string })[] = [];
+    let diffCellUnchangedItems: (DiffCellItem & { originFilePath: string; targetFilePath: string })[] = [];
+    let lastDiffItemTypeIsUnchanged: boolean = false;
+
+    const diffArray = diffArrays(getOrigin(origin), getOrigin(target), {
+      comparator,
+    }) as DiffArrayItem[];
+    diffArray.map((item, index) => {
+      if (item.added) {
+        if (this.isDiffSame) {
+          this.isDiffSame = false;
+        }
+        if (lastDiffItemTypeIsUnchanged === true) {
+          lastDiffItemTypeIsUnchanged = false;
+          diffCellsResult.push({
+            isShown: false,
+            unchangedResultItems: diffCellUnchangedItems,
+          });
+          diffCellUnchangedItems = [];
+        }
+        item.value.map((valueItem) => {
+          diffCellsResult.push(this.getAddedCellResult(valueItem));
+        });
+      } else if (item.removed) {
+        if (this.isDiffSame) {
+          this.isDiffSame = false;
+        }
+        if (lastDiffItemTypeIsUnchanged === true) {
+          lastDiffItemTypeIsUnchanged = false;
+          diffCellsResult.push({
+            isShown: false,
+            unchangedResultItems: diffCellUnchangedItems,
+          });
+          diffCellUnchangedItems = [];
+        }
+        item.value.map((valueItem) => {
+          diffCellsResult.push(this.getRemovedCellResult(valueItem));
+        });
+      } else {
+        item.value.map((valueItem) => {
+          const originCell = this.originContent.content.cells.find((cell) => cell.id === valueItem.id);
+          const targetCell = this.targetContent.content.cells.find((cell) => cell.id === valueItem.id);
+          if (!originCell || !targetCell) {
+            return;
+          }
+          if (multilineStringEqual(originCell.source, targetCell.source)) {
+            if (this.hasUnchangedCells === false) {
+              this.hasUnchangedCells = true;
+            }
+            lastDiffItemTypeIsUnchanged = true;
+            diffCellUnchangedItems.push(this.getUnchangedCellResult(originCell, targetCell));
+          } else {
+            if (this.isDiffSame) {
+              this.isDiffSame = false;
+            }
+            if (lastDiffItemTypeIsUnchanged === true) {
+              lastDiffItemTypeIsUnchanged = false;
+              diffCellsResult.push({
+                isShown: false,
+                unchangedResultItems: diffCellUnchangedItems,
+              });
+              diffCellUnchangedItems = [];
+            }
+            diffCellsResult.push(this.getChangedCellResult(originCell, targetCell));
+          }
+        });
+        if (index === diffArray.length - 1) {
+          diffCellsResult.push({
+            isShown: false,
+            unchangedResultItems: diffCellUnchangedItems,
+          });
+        }
+      }
+    });
+    return diffCellsResult;
+  };
+}

package/src/browser/libro/diff-view/libro-version-manager.ts

@@ -0,0 +1,136 @@
+import { LibroService } from '@difizen/libro-core';
+import { ViewManager, getOrigin, inject, singleton } from '@difizen/mana-app';
+
+import { Injector } from '@opensumi/di';
+import { Event, MonacoService } from '@opensumi/ide-core-browser';
+import { uuid } from '@opensumi/ide-utils';
+import { IModelService } from '@opensumi/monaco-editor-core/esm/vs/editor/common/services/model';
+import { StandaloneServices } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+
+import { OpensumiInjector } from '../../mana';
+
+import { DiffType } from './libro-diff-protocol';
+import { LibroDiffView } from './libro-diff-view';
+import { AIStudioLibroVersionView } from './libro-version-view';
+
+import type { NotebookOption } from '@difizen/libro-core';
+
+@singleton()
+export class LibroVersionManager {
+  protected readonly libroService: LibroService;
+  protected readonly viewManager: ViewManager;
+  protected readonly opensumiInjector: Injector;
+  constructor(
+    @inject(LibroService) libroService: LibroService,
+    @inject(ViewManager) viewManager: ViewManager,
+    @inject(OpensumiInjector) opensumiInjector: Injector,
+  ) {
+    this.libroService = libroService;
+    this.viewManager = viewManager;
+    this.opensumiInjector = opensumiInjector;
+  }
+
+  async getOrCreateView(options: NotebookOption): Promise<AIStudioLibroVersionView> {
+    const aistudioLibroVersionView = await this.viewManager.getOrCreateView<AIStudioLibroVersionView>(
+      AIStudioLibroVersionView,
+      {
+        ...(options || {}),
+      },
+    );
+    // 如果存在原始和目标uri，则创建diff视图，默认为预览视图（git uri）
+    if (options.originalUri && options.targetUri) {
+      this.viewManager
+        .getOrCreateView(LibroDiffView, {
+          id: uuid(),
+          origin: options.originalUri,
+          target: options.targetUri,
+        })
+        .then((diffView) => {
+          aistudioLibroVersionView.libroDiffView = diffView;
+          aistudioLibroVersionView.isDiff = true;
+        });
+      return aistudioLibroVersionView;
+    }
+    const libroView = await this.libroService.getOrCreateView({
+      ...(options || {}),
+    });
+    // 版本预览视图只读
+    libroView.model.inputEditable = false;
+    libroView.model.cellsEditable = false;
+    libroView.headerRender = () => null;
+    aistudioLibroVersionView.libro = libroView;
+    return aistudioLibroVersionView;
+  }
+
+  createPreviewEditor(content: string, language: string, dom: HTMLElement, diffType: DiffType) {
+    const monacoService: MonacoService = this.opensumiInjector.get(MonacoService);
+    const editor = getOrigin(monacoService).createCodeEditor(dom, {
+      language,
+      minimap: {
+        enabled: false,
+      },
+      value: content,
+      automaticLayout: false,
+      folding: true,
+      wordWrap: 'off',
+      lineDecorationsWidth: 0,
+      lineNumbersMinChars: 3,
+      scrollbar: {
+        vertical: 'hidden',
+        alwaysConsumeMouseWheel: false,
+        verticalScrollbarSize: 0,
+        horizontal: 'visible',
+        horizontalScrollbarSize: 0,
+      },
+      glyphMargin: true,
+      scrollBeyondLastLine: false,
+      renderFinalNewline: 'off',
+      renderLineHighlight: 'none',
+      readOnly: true,
+      // scrollBeyondLastColumn: 2,
+      extraEditorClassName: `libro-diff-editor-${diffType}`,
+    });
+    return editor;
+  }
+
+  createDiffEditor(original: string, modified: string, language: string, dom: HTMLElement) {
+    const monacoService: MonacoService = this.opensumiInjector.get(MonacoService);
+    const editor = getOrigin(monacoService).createDiffEditor(dom, {
+      minimap: {
+        enabled: false,
+      },
+      automaticLayout: false,
+      renderSideBySide: true,
+      useInlineViewWhenSpaceIsLimited: false,
+      fontSize: 13,
+      folding: true,
+      wordWrap: 'off',
+      renderIndicators: false,
+      lineNumbersMinChars: 3,
+      scrollbar: {
+        vertical: 'hidden',
+        alwaysConsumeMouseWheel: false,
+        verticalScrollbarSize: 0,
+        horizontal: 'visible',
+        horizontalScrollbarSize: 0,
+      },
+      glyphMargin: true,
+      scrollBeyondLastLine: false,
+      scrollBeyondLastColumn: 1,
+      renderFinalNewline: 'off',
+      renderOverviewRuler: false,
+      renderLineHighlight: 'none',
+      enableSplitViewResizing: false,
+      lineDecorationsWidth: '16px',
+      diffWordWrap: 'off',
+      readOnly: true,
+      extraEditorClassName: 'libro-diff-editor-changed',
+    });
+    const modelService = StandaloneServices.get(IModelService);
+    editor.setModel({
+      original: modelService.createModel(original, { languageId: language, onDidChange: Event.None }),
+      modified: modelService.createModel(modified, { languageId: language, onDidChange: Event.None }),
+    });
+    return editor;
+  }
+}

package/src/browser/libro/diff-view/libro-version-view.tsx

@@ -0,0 +1,41 @@
+import { LibroView } from '@difizen/libro-core';
+import {
+  BaseView,
+  ViewInstance,
+  ViewOption,
+  ViewRender,
+  inject,
+  prop,
+  transient,
+  useInject,
+  view,
+} from '@difizen/mana-app';
+import React, { forwardRef } from 'react';
+
+import type { LibroDiffView } from './';
+const LibroVersionRender = forwardRef<HTMLDivElement>((_props, ref) => {
+  const aistudioLibroVersionView = useInject<AIStudioLibroVersionView>(ViewInstance);
+  return (
+    <div className='libro-version-content' ref={ref}>
+      {aistudioLibroVersionView.isDiff
+        ? aistudioLibroVersionView.libroDiffView && <ViewRender view={aistudioLibroVersionView.libroDiffView} />
+        : aistudioLibroVersionView.libro && <ViewRender view={aistudioLibroVersionView.libro} />}
+    </div>
+  );
+});
+
+@transient()
+@view('libro-version-view')
+export class AIStudioLibroVersionView extends BaseView {
+  view = LibroVersionRender;
+  @inject(ViewOption) options: any;
+  @prop()
+  isDiff: boolean = false;
+  // for git preview
+  @prop()
+  libro: LibroView;
+  // for git diff
+  @prop()
+  libroDiffView: LibroDiffView;
+  onViewMount() {}
+}

package/src/browser/libro/diff-view/module.ts

@@ -0,0 +1,11 @@
+import { LibroJupyterNoEditorModule } from '@difizen/libro-jupyter/noeditor';
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroDiffColorRegistry } from './libro-diff-color-registry';
+import { LibroDiffView } from './libro-diff-view';
+import { LibroVersionManager } from './libro-version-manager';
+import { AIStudioLibroVersionView } from './libro-version-view';
+
+export const LibroDiffModule = ManaModule.create()
+  .register(AIStudioLibroVersionView, LibroVersionManager, LibroDiffView, LibroDiffColorRegistry)
+  .dependOn(LibroJupyterNoEditorModule);

package/src/browser/libro/libro-opensumi-content-contribution.ts

@@ -14,7 +14,7 @@ export class LibroOpensumiContentContribution implements ContentContribution {
   @inject(OpensumiInjector) injector: Injector;
 
   canHandle = (options) => (options.loadType === ContentLoaderType ? 100 : 1);
-  async loadContent(options: NotebookOption, model: LibroJupyterModel) {
+  async loadContent(options: NotebookOption, model: LibroJupyterModel): Promise<INotebookContent> {
     const fileServiceClient: IFileServiceClient = this.injector.get(IFileServiceClient);
     const messageService = this.injector.get(IMessageService);
     let notebookContent: INotebookContent;

package/src/browser/libro-preview.view.tsx

@@ -0,0 +1,33 @@
+import { Container, URI, ViewRender } from '@difizen/mana-app';
+import React, { useEffect, useState } from 'react';
+
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser/types';
+
+import { LibroVersionManager } from './libro/diff-view/libro-version-manager';
+import { AIStudioLibroVersionView } from './libro/diff-view/libro-version-view';
+import { ContentLoaderType, ManaContainer } from './mana';
+
+export const LibroVersionPreview: ReactEditorComponent = ({ resource }) => {
+  const uri = resource.uri;
+  const originalUri = uri.scheme === 'diff' ? new URI(decodeURIComponent(uri.getParsedQuery().original)) : undefined;
+  const targetUri = uri.scheme === 'diff' ? new URI(decodeURIComponent(uri.getParsedQuery().modified)) : undefined;
+  const manaContainer = useInjectable<Container>(ManaContainer);
+  const libroVersionManager = manaContainer.get(LibroVersionManager);
+  const [versionView, setVersionView] = useState<AIStudioLibroVersionView>();
+
+  useEffect(() => {
+    libroVersionManager
+      .getOrCreateView({
+        resource: uri.toString(),
+        loadType: ContentLoaderType,
+        originalUri,
+        targetUri,
+      })
+      .then((view) => {
+        setVersionView(view);
+      });
+  }, [uri]);
+
+  return <div className='libro-version'>{versionView && <ViewRender view={versionView}></ViewRender>}</div>;
+};

package/src/browser/libro.contribution.tsx

@@ -41,9 +41,11 @@ import { IThemeService, IconType } from '@opensumi/ide-theme/lib/common';
 
 import { KERNEL_PANEL_ID, KernelPanel, initKernelPanelColorToken } from './kernel-panel';
 import { LibroOpensumiModule } from './libro';
+import { LibroDiffModule } from './libro/diff-view';
 import { LibroOpener } from './libro-opener';
+import { LibroVersionPreview } from './libro-preview.view';
 import { initLibroColorToken } from './libro.color.tokens';
-import { LIBRO_COMPONENTS_ID, LIBRO_COMPONENTS_SCHEME_ID } from './libro.protocol';
+import { LIBRO_COMPONENTS_SCHEME_ID, LIBRO_COMPONENT_ID, LIBRO_PREVIEW_COMPONENT_ID } from './libro.protocol';
 import { OpensumiLibroView } from './libro.view';
 import { ManaContainer, initLibroOpensumi, manaContainer } from './mana/index';
 import { NotebookDocumentContentProvider } from './notebook-document-content-provider';
@@ -62,7 +64,14 @@ const LayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <ManaComponents.Application
       context={{ container: manaContainer }}
-      modules={[ManaAppPreset, LibroJupyterNoEditorModule, LibroTOCModule, LibroOpensumiModule, LibroVariableModule]}
+      modules={[
+        ManaAppPreset,
+        LibroJupyterNoEditorModule,
+        LibroDiffModule,
+        LibroTOCModule,
+        LibroOpensumiModule,
+        LibroVariableModule,
+      ]}
       renderChildren
       onReady={() => setIsReady(true)}
     >
@@ -182,11 +191,17 @@ export class LibroContribution
 
   registerEditorComponent(registry: EditorComponentRegistry) {
     registry.registerEditorComponent({
-      uid: LIBRO_COMPONENTS_ID,
+      uid: LIBRO_COMPONENT_ID,
       scheme: LIBRO_COMPONENTS_SCHEME_ID,
       component: OpensumiLibroView,
     });
 
+    registry.registerEditorComponent({
+      uid: LIBRO_PREVIEW_COMPONENT_ID,
+      scheme: LIBRO_COMPONENTS_SCHEME_ID,
+      component: LibroVersionPreview,
+    });
+
     registry.registerEditorComponentResolver(Schemes.file, (resource, results) => {
       if (resource.uri.path.ext === `.${LIBRO_COMPONENTS_SCHEME_ID}`) {
         // 首次打开 notebook 文件时初始化 jupyter 服务连接
@@ -197,7 +212,31 @@ export class LibroContribution
         }
         results.push({
           type: 'component',
-          componentId: LIBRO_COMPONENTS_ID,
+          componentId: LIBRO_COMPONENT_ID,
+        });
+      }
+    });
+
+    // git schema 的 notebook 资源，在 ide 中打开
+    registry.registerEditorComponentResolver('git', (resource, results) => {
+      if (resource.uri.path.ext === '.ipynb') {
+        results.push({
+          type: 'component',
+          componentId: LIBRO_PREVIEW_COMPONENT_ID,
+        });
+      }
+    });
+
+    registry.registerEditorComponentResolver('diff', (resource, results) => {
+      const { original, modified } = resource.uri.getParsedQuery();
+      if (
+        new URI(decodeURIComponent(modified)).path.ext === '.ipynb' ||
+        new URI(decodeURIComponent(original)).path.ext === '.ipynb'
+      ) {
+        // TODO: 需要等 git 插件 ready，否则 git uri 无法解析
+        results.push({
+          type: 'component',
+          componentId: LIBRO_PREVIEW_COMPONENT_ID,
         });
       }
     });

package/src/browser/libro.protocol.ts

@@ -1,2 +1,4 @@
-export const LIBRO_COMPONENTS_ID = 'opensumi:libro';
+export const LIBRO_COMPONENT_ID = 'opensumi:libro';
+export const LIBRO_PREVIEW_COMPONENT_ID = 'opensumi:libro-preview';
+export const LIBRO_DIFF_COMPONENT_ID = 'opensumi:libro-diff';
 export const LIBRO_COMPONENTS_SCHEME_ID = 'ipynb';