@opensumi/ide-notebook 3.4.5-next-1730119322.0

package/src/browser/libro.service.ts

@@ -0,0 +1,85 @@
+import { CellUri, CellView, LanguageSpecRegistry, LibroService, LibroView } from '@difizen/libro-jupyter/noeditor';
+import { Container, URI as ManaURI, getOrigin } from '@difizen/mana-app';
+import { makeObservable } from 'mobx';
+
+import { Autowired, Injectable } from '@opensumi/di';
+import { URI, WithEventBus, path } from '@opensumi/ide-core-browser';
+import { ResourceDecorationNeedChangeEvent, WorkbenchEditorService } from '@opensumi/ide-editor';
+
+import { LibroTracker } from './libro.view.tracker';
+import { ContentLoaderType, ManaContainer } from './mana';
+
+export const ILibroOpensumiService = Symbol('ILibroOpensumiService');
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export interface ILibroOpensumiService {
+  // manaContainer: Container;
+  libroTrackerMap: Map<string, LibroTracker>;
+  // editorService: WorkbenchEditorService;
+  getOrCreatLibroView: (uri: URI) => Promise<LibroView>;
+  updateDirtyStatus: (uri: URI, dirty: boolean) => void;
+  getCellViewByUri: (uri: URI) => Promise<CellView | undefined>;
+  getCellLangauge: (cell: CellView) => string | undefined;
+}
+
+@Injectable()
+export class LibroOpensumiService extends WithEventBus implements ILibroOpensumiService {
+  @Autowired(ManaContainer)
+  private readonly manaContainer: Container;
+
+  @Autowired(WorkbenchEditorService)
+  protected readonly editorService: WorkbenchEditorService;
+
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
+  get libroService() {
+    const libroService = this.manaContainer.get(LibroService);
+    return libroService;
+  }
+
+  getOrCreatLibroView = async (uri: URI) => {
+    const libroOption = {
+      modelId: uri.toString(),
+      resource: uri.toString(),
+      loadType: ContentLoaderType,
+    };
+    return await this.libroService.getOrCreateView(libroOption);
+  };
+
+  getCellViewByUri = async (uri: URI) => {
+    const parsed = CellUri.parse(new ManaURI(uri.toString(), { simpleMode: false }));
+    if (!parsed) {
+      return;
+    }
+    const { notebookId, cellId } = parsed;
+    // const notebookUri = URI.file(notebookId);
+    /**
+     * 这里需要兼容各种不同的 content contribution 加载数据的方式，采取匹配model id的方式来找到libroview， 因为model id是会被编码进uri的
+     */
+    const libroView = Array.from(this.libroService.getViewCache().values()).find(
+      (item) => path.join('/', String(item.model.id)) === notebookId,
+    );
+    return libroView?.model.cells.find((cell) => cell.model.id === cellId);
+  };
+
+  getCellLangauge = (cell: CellView) => {
+    const languageSpecRegistry = this.manaContainer.get(LanguageSpecRegistry);
+    return getOrigin(languageSpecRegistry.languageSpecs).find((item) => item.mime === cell.model.mimeType)?.language;
+  };
+
+  updateDirtyStatus(uri: URI, dirty: boolean) {
+    this.eventBus.fire(
+      new ResourceDecorationNeedChangeEvent({
+        uri,
+        decoration: {
+          dirty,
+        },
+      }),
+    );
+  }
+
+  libroTrackerMap: Map<string, LibroTracker> = new Map();
+}

package/src/browser/libro.view.tracker.ts

@@ -0,0 +1,18 @@
+import { action, makeObservable, observable } from 'mobx';
+
+import { Injectable } from '@opensumi/di';
+
+@Injectable({ multiple: true })
+export class LibroTracker {
+  constructor() {
+    makeObservable(this);
+  }
+
+  @observable
+  refreshTimer: number | undefined = undefined;
+
+  @action
+  refresh(refreshTimer: number | undefined) {
+    this.refreshTimer = refreshTimer;
+  }
+}

package/src/browser/libro.view.tsx

@@ -0,0 +1,62 @@
+
+import { DocumentCommands, LibroView } from '@difizen/libro-jupyter/noeditor';
+import { CommandRegistry, Container, ViewRender } from '@difizen/mana-app';
+import * as React from 'react';
+
+import { INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import { URI, useInjectable } from '@opensumi/ide-core-browser';
+import { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser/types';
+
+import styles from './libro.module.less';
+import { ILibroOpensumiService } from './libro.service';
+import { LibroTracker } from './libro.view.tracker';
+import { ManaContainer } from './mana';
+
+export const OpensumiLibroView: ReactEditorComponent = (...params) => {
+  const libroOpensumiService = useInjectable<ILibroOpensumiService>(ILibroOpensumiService);
+  const manaContainer = useInjectable<Container>(ManaContainer);
+  const commandRegistry = manaContainer.get(CommandRegistry);
+  const injector: Injector = useInjectable(INJECTOR_TOKEN);
+
+  const [libroTracker, setLibroTracker] = React.useState<LibroTracker>();
+
+  const [libroView, setLibroView] = React.useState<LibroView | undefined>(undefined);
+
+  React.useEffect(() => {
+    if (libroTracker?.refreshTimer) {
+      libroView?.dispose();
+    }
+    let autoSaveHandle: undefined | number;
+    libroOpensumiService.getOrCreatLibroView(params[0].resource.uri).then((libro) => {
+      setLibroView(libro);
+      if (!libroOpensumiService.libroTrackerMap.has((params[0].resource.uri as URI).toString())) {
+        const tracker = injector.get(LibroTracker);
+        setLibroTracker(tracker);
+        libroOpensumiService.libroTrackerMap.set((params[0].resource.uri as URI).toString(), tracker);
+      }
+      libro.model.onChanged(() => {
+        libroOpensumiService.updateDirtyStatus(params[0].resource.uri, true);
+        if (autoSaveHandle) {
+          window.clearTimeout(autoSaveHandle);
+        }
+        autoSaveHandle = window.setTimeout(() => {
+          commandRegistry
+            .executeCommand(DocumentCommands.Save.id, undefined, libro, undefined, { reason: 'autoSave' })
+            .then(() => {
+              if (libro) {
+                libro.model.dirty = false;
+              }
+            });
+        }, 1000);
+      });
+      libro.onSave(() => {
+        libroOpensumiService.updateDirtyStatus(params[0].resource.uri, false);
+      });
+    });
+    return () => {
+      window.clearTimeout(autoSaveHandle);
+    };
+  }, [libroTracker?.refreshTimer]);
+
+  return <div className={styles.libroView}>{libroView && <ViewRender view={libroView}></ViewRender>}</div>;
+};

package/src/browser/mana/index.ts

@@ -0,0 +1,20 @@
+import { GlobalContainer, Syringe } from '@difizen/mana-app';
+
+import { Injector } from '@opensumi/di';
+
+export const OpensumiInjector = Syringe.defineToken('OpensumiInjector');
+export const ManaContainer = Symbol('ManaContainer');
+
+export const initLibroOpensumi = (injector: Injector, container?: Syringe.Container) => {
+  const initInjector = injector;
+  const initContainer = container || GlobalContainer;
+  initInjector.addProviders({
+    token: ManaContainer,
+    useValue: initContainer,
+  });
+  initContainer?.register({ token: OpensumiInjector, useValue: initInjector });
+};
+
+export const manaContainer = GlobalContainer.createChild();
+
+export const ContentLoaderType = 'libro-opensumi-loader';

package/src/browser/notebook-document-content-provider.ts

@@ -0,0 +1,100 @@
+import { LibroCellURIScheme } from '@difizen/libro-common';
+
+import { Autowired, Injectable } from '@opensumi/di';
+import { PreferenceService, getLanguageIdFromMonaco } from '@opensumi/ide-core-browser';
+import {
+  Emitter,
+  Event,
+  IApplicationService,
+  IEditorDocumentChange,
+  IEditorDocumentModelSaveResult,
+  MaybePromise,
+  SaveTaskResponseState,
+  URI,
+} from '@opensumi/ide-core-common';
+import { IEditorDocumentModelContentProvider } from '@opensumi/ide-editor/lib/browser/doc-model/types';
+import { EOL } from '@opensumi/ide-monaco';
+
+import { ILibroOpensumiService } from './libro.service';
+
+@Injectable()
+export class NotebookDocumentContentProvider implements IEditorDocumentModelContentProvider {
+  @Autowired(IApplicationService)
+  protected readonly applicationService: IApplicationService;
+
+  @Autowired(PreferenceService)
+  protected readonly preferenceService: PreferenceService;
+
+  @Autowired(ILibroOpensumiService)
+  protected readonly libroOpensumiService: ILibroOpensumiService;
+
+  private _onDidChangeContent: Emitter<URI> = new Emitter();
+
+  public onDidChangeContent: Event<URI> = this._onDidChangeContent.event;
+
+  handlesScheme?(scheme: string): MaybePromise<boolean> {
+    return scheme === LibroCellURIScheme;
+  }
+  // handlesUri?(uri: URI): MaybePromise<number> {
+  //   throw new Error("Method not implemented.");
+  // }
+
+  async provideEditorDocumentModelContent(uri: URI, encoding?: string | undefined): Promise<string> {
+    const cell = await this.libroOpensumiService.getCellViewByUri(uri);
+    return cell?.model.value ?? '';
+  }
+  isReadonly(uri: URI): MaybePromise<boolean> {
+    return false;
+  }
+  saveDocumentModel?(
+    uri: URI,
+    content: string,
+    baseContent: string,
+    changes: IEditorDocumentChange[],
+    encoding?: string | undefined,
+    ignoreDiff?: boolean | undefined,
+    eol?: EOL | undefined,
+  ): MaybePromise<IEditorDocumentModelSaveResult> {
+    return {
+      state: SaveTaskResponseState.SUCCESS,
+    };
+  }
+  async preferLanguageForUri?(uri: URI): Promise<string | undefined> {
+    const cell = await this.libroOpensumiService.getCellViewByUri(uri);
+    if (!cell) {
+      return;
+    }
+    return this.libroOpensumiService.getCellLangauge(cell);
+  }
+  // async provideEOL?(uri: URI): Promise<EOL> {
+  //   return '\n'
+  // }
+  provideEncoding?(uri: URI): MaybePromise<string> {
+    const encoding = this.preferenceService.get<string>(
+      'files.encoding',
+      undefined,
+      uri.toString(),
+      getLanguageIdFromMonaco(uri)!,
+    );
+    return encoding || 'utf8';
+  }
+
+  // provideEditorDocumentModelContentMd5?(uri: URI, encoding?: string | undefined): MaybePromise<string | undefined> {
+  //   throw new Error("Method not implemented.");
+  // }
+  // onDidDisposeModel?(uri: URI): void {
+  //   throw new Error("Method not implemented.");
+  // }
+  isAlwaysDirty?(uri: URI): MaybePromise<boolean> {
+    return false;
+  }
+  closeAutoSave?(uri: URI): MaybePromise<boolean> {
+    return true;
+  }
+  // guessEncoding?(uri: URI): Promise<string | undefined> {
+  //   throw new Error("Method not implemented.");
+  // }
+  disposeEvenDirty?(uri: URI): MaybePromise<boolean> {
+    return false;
+  }
+}

package/src/browser/notebook.service.ts

@@ -0,0 +1,195 @@
+import { CellUri, CellView, LibroJupyterView, LibroService, LibroView, MIME } from '@difizen/libro-jupyter/noeditor';
+import { Container, getOrigin } from '@difizen/mana-app';
+
+import { Autowired, Injectable } from '@opensumi/di';
+import { ClientAppContribution, URI } from '@opensumi/ide-core-browser';
+import { Domain, MaybePromise, Uri } from '@opensumi/ide-core-common';
+import {
+  CellKind,
+  INotebookModelAddedData,
+  NotebookCellDto,
+  NotebookCellsChangeType,
+  NotebookRawContentEventDto,
+  WorkbenchEditorService,
+} from '@opensumi/ide-editor';
+import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser/doc-model/types';
+import { NotebookService } from '@opensumi/ide-editor/lib/browser/notebook.service';
+
+import { LIBRO_COMPONENTS_SCHEME_ID } from './libro.protocol';
+import { ILibroOpensumiService } from './libro.service';
+import { ManaContainer } from './mana';
+
+@Injectable()
+@Domain(ClientAppContribution)
+export class NotebookServiceOverride extends NotebookService implements ClientAppContribution {
+  @Autowired(ManaContainer)
+  private readonly manaContainer: Container;
+  @Autowired(IEditorDocumentModelService)
+  private readonly editorModelService: IEditorDocumentModelService;
+  @Autowired(WorkbenchEditorService)
+  private readonly workbenchEditorService: WorkbenchEditorService;
+  @Autowired(ILibroOpensumiService)
+  private readonly libroOpensumiService: ILibroOpensumiService;
+
+  onDidStart(): MaybePromise<void> {
+    this.listenLibro();
+    this.listenEditor();
+  }
+
+  listenEditor() {
+    this.workbenchEditorService.onActiveResourceChange((e) => {
+      if (e?.uri?.path.ext === `.${LIBRO_COMPONENTS_SCHEME_ID}`) {
+        this.libroOpensumiService.getOrCreatLibroView(e.uri).then((libroView) => {
+          this.handleOpenNotebook(libroView);
+        });
+      }
+    });
+  }
+
+  protected notebookVersions = new Map<string, number>();
+
+  protected getNotebookVersion(libroView: LibroView) {
+    const uri = this.getNotebookUri(libroView as LibroJupyterView).toString();
+    return this.notebookVersions.get(uri) ?? 1;
+  }
+
+  protected deleteNotebookVersion(libroView: LibroView) {
+    const uri = this.getNotebookUri(libroView as LibroJupyterView).toString();
+    return this.notebookVersions.delete(uri);
+  }
+
+  protected updateNotebookVersion(libroView: LibroView) {
+    const uri = this.getNotebookUri(libroView as LibroJupyterView).toString();
+    const versionId = this.notebookVersions.get(uri) ?? 1;
+    this.notebookVersions.set(uri, versionId + 1);
+  }
+
+  protected isValidNotebook(view: LibroView): boolean {
+    if (view instanceof LibroJupyterView) {
+      return true;
+    }
+    return false;
+  }
+
+  isCodeCell(mime: string) {
+    return ([MIME.odpssql, MIME.python] as string[]).includes(mime);
+  }
+
+  getCellURI(cell: CellView) {
+    return CellUri.from(cell.parent.model.id, cell.model.id);
+  }
+
+  getCellModelRef(cell: CellView) {
+    return this.editorModelService.getModelReference(URI.parse(this.getCellURI(cell).toString()));
+  }
+
+  asNotebookCell(cell: CellView): NotebookCellDto {
+    return {
+      cellKind: this.isCodeCell(cell.model.mimeType) ? CellKind.Code : CellKind.Markup,
+      eol: '\n',
+      handle: 1,
+      language: this.libroOpensumiService.getCellLangauge(cell) ?? 'plaintext',
+      mime: cell.model.mimeType,
+      outputs: [],
+      source: cell.model.value.split('\n'),
+      uri: Uri.parse(this.getCellURI(cell).toString()),
+    };
+  }
+
+  getNotebookUri(notebook: LibroJupyterView) {
+    return Uri.parse(notebook.model.filePath);
+  }
+
+  asNotebook(notebook: LibroJupyterView): INotebookModelAddedData {
+    return {
+      uri: this.getNotebookUri(notebook),
+      viewType: 'jupyter-notebook',
+      versionId: this.getNotebookVersion(notebook),
+      cells: notebook.model.cells.map((item) => this.asNotebookCell(item)),
+    };
+  }
+
+  listenLibro() {
+    const libroService = this.manaContainer.get(LibroService);
+    libroService.onNotebookViewCreated(this.handleOpenNotebook);
+    libroService.onNotebookViewClosed((libroView) => {
+      if (!this.isValidNotebook(libroView)) {
+        return;
+      }
+      this.deleteNotebookVersion(libroView);
+      this._onDidCloseNotebookDocument.fire(this.getNotebookUri(libroView as LibroJupyterView));
+    });
+    libroService.onNotebookViewSaved((libroView) => {
+      if (!this.isValidNotebook(libroView)) {
+        return;
+      }
+      this.updateNotebookVersion(libroView);
+      this._onDidSaveNotebookDocument.fire(this.getNotebookUri(libroView as LibroJupyterView));
+    });
+    libroService.onNotebookViewChanged((event) => {
+      if (!this.isValidNotebook(event.libroView)) {
+        return;
+      }
+
+      if (!event.libroView.model.isInitialized) {
+        return;
+      }
+
+      const events: NotebookRawContentEventDto[] = [];
+
+      if (event.contentChanges) {
+        event.contentChanges.forEach((item) => {
+          if (item.addedCells.length > 0) {
+            events.push({
+              kind: NotebookCellsChangeType.ModelChange,
+              changes: [[item.range.start, 0, item.addedCells.map((cell) => this.asNotebookCell(cell))]],
+            });
+          }
+          if (item.removedCells.length > 0) {
+            events.push({
+              kind: NotebookCellsChangeType.ModelChange,
+              changes: [[item.range.start, item.range.end - item.range.start, []]],
+            });
+          }
+        });
+      }
+
+      this.updateNotebookVersion(event.libroView);
+      this._onDidChangeNotebookDocument.fire({
+        uri: this.getNotebookUri(event.libroView as LibroJupyterView),
+        event: {
+          rawEvents: events,
+          versionId: 1,
+        },
+        isDirty: getOrigin(event.libroView.model.dirty),
+      });
+    });
+
+    libroService.onNotebookCellChanged((event) => {
+      const events: NotebookRawContentEventDto[] = [];
+      const index = event.cell.parent.findCellIndex(event.cell);
+      const modelRef = this.getCellModelRef(event.cell);
+      events.push({
+        kind: NotebookCellsChangeType.ChangeCellContent,
+        index,
+      });
+      this._onDidChangeNotebookDocument.fire({
+        uri: this.getNotebookUri(event.cell.parent as LibroJupyterView),
+        event: {
+          rawEvents: events,
+          versionId: modelRef?.instance.getMonacoModel().getVersionId() ?? 1,
+        },
+        isDirty: getOrigin(event.cell.parent.model.dirty),
+      });
+    });
+  }
+
+  protected handleOpenNotebook = async (libroView: LibroView) => {
+    if (!this.isValidNotebook(libroView)) {
+      return;
+    }
+    await libroView.initialized;
+    this.updateNotebookVersion(libroView);
+    this._onDidOpenNotebookDocument.fire(this.asNotebook(libroView as LibroJupyterView));
+  };
+}

package/src/browser/toc/index.ts

@@ -0,0 +1,3 @@
+export * from './toc.contribution';
+export * from './toc.panel';
+export * from './toc.panel.color.tokens';

package/src/browser/toc/toc.contribution.ts

@@ -0,0 +1,24 @@
+import { Autowired } from '@opensumi/di';
+import { Domain, localize } from '@opensumi/ide-core-browser';
+import { EXPLORER_CONTAINER_ID } from '@opensumi/ide-explorer/lib/browser/explorer-contribution';
+import { IMainLayoutService, MainLayoutContribution } from '@opensumi/ide-main-layout';
+
+import { TocPanel } from './toc.panel';
+
+@Domain(MainLayoutContribution)
+export class TocContribution implements MainLayoutContribution {
+  @Autowired(IMainLayoutService)
+  private mainLayoutService: IMainLayoutService;
+
+  onDidRender() {
+    this.mainLayoutService.collectViewComponent(
+      {
+        component: TocPanel,
+        collapsed: true,
+        id: 'outline-view',
+        name: localize('outline.title'),
+      },
+      EXPLORER_CONTAINER_ID,
+    );
+  }
+}

package/src/browser/toc/toc.module.less

@@ -0,0 +1,23 @@
+.toc {
+  :global {
+    .libro-toc-collapsed {
+      svg {
+        vertical-align: sub;
+      }
+    }
+
+    .markdown-toc-container {
+      width: 100%;
+
+      .markdown-toc-container-anchor {
+        color: var(--toc-panel-text-color);
+        font-size: 12px;
+        line-height: 20px;
+      }
+
+      .markdown-toc-container-title {
+        display: none;
+      }
+    }
+  }
+}

package/src/browser/toc/toc.panel.color.tokens.ts

@@ -0,0 +1,11 @@
+import { localize } from '@opensumi/ide-core-browser';
+import { registerColor } from '@opensumi/ide-theme/lib/common';
+
+export const initTocPanelColorToken = () => {
+  registerColor(
+    'toc.panel.text.color',
+    { dark: '#A6AAAD', light: '#363C42', hcDark: null, hcLight: null },
+    localize('toc.panel.text.color', 'the text color of toc panel'),
+    true,
+  );
+};

package/src/browser/toc/toc.panel.tsx

@@ -0,0 +1,66 @@
+import { TOCView } from '@difizen/libro-toc';
+import { Container, ViewManager, ViewRender } from '@difizen/mana-app';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+
+import { URI, ViewState, useInjectable } from '@opensumi/ide-core-browser';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
+import { OutlinePanel } from '@opensumi/ide-outline/lib/browser/outline';
+
+import { LIBRO_COMPONENTS_SCHEME_ID } from '../libro.protocol';
+import { ILibroOpensumiService } from '../libro.service';
+import { ManaContainer } from '../mana';
+
+import styles from './toc.module.less';
+
+export const TocPanel = ({ viewState }: PropsWithChildren<{ viewState: ViewState }>) => {
+  const editorService = useInjectable<WorkbenchEditorServiceImpl>(WorkbenchEditorService);
+  const libroOpensumiService = useInjectable<ILibroOpensumiService>(ILibroOpensumiService);
+  const manaContainer = useInjectable<Container>(ManaContainer);
+
+  const [libroTocView, setLibroTocView] = useState<TOCView | undefined>();
+
+  useEffect(() => {
+    if (editorService.currentResource?.uri.path.ext === `.${LIBRO_COMPONENTS_SCHEME_ID}`) {
+      libroOpensumiService.getOrCreatLibroView(editorService.currentResource.uri).then((libro) => {
+        const viewManager = manaContainer.get(ViewManager);
+        viewManager
+          .getOrCreateView<TOCView>(TOCView, {
+            id: (editorService.currentResource?.uri as URI).toString(),
+          })
+          .then((libroTocView) => {
+            libroTocView.parent = libro;
+            setLibroTocView(libroTocView);
+            return;
+          });
+      });
+    }
+    editorService.onActiveResourceChange((e) => {
+      if (e?.uri.path.ext === `.${LIBRO_COMPONENTS_SCHEME_ID}`) {
+        libroOpensumiService.getOrCreatLibroView(e.uri).then((libro) => {
+          const viewManager = manaContainer.get(ViewManager);
+          viewManager
+            .getOrCreateView<TOCView>(TOCView, {
+              id: (e.uri as URI).toString(),
+            })
+            .then((libroTocView) => {
+              libroTocView.parent = libro;
+              setLibroTocView(libroTocView);
+              return;
+            });
+        });
+      } else {
+        setLibroTocView(undefined);
+      }
+    });
+  });
+  if (libroTocView) {
+    return (
+      <div className={styles.toc}>
+        <ViewRender view={libroTocView}></ViewRender>
+      </div>
+    );
+  } else {
+    return <OutlinePanel viewState={viewState}></OutlinePanel>;
+  }
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './browser';