@opensumi/ide-notebook 3.4.5-next-1730693264.0 → 3.5.1-next-1731636910.0

package/src/browser/libro/editor/keybind-handler.ts

@@ -43,40 +43,28 @@ export class Keybindhandler implements ApplicationContribution {
     return this.libroService.active instanceof LibroView;
   }
 
-  registerCommand() {
+  private registerSingleCommand(command: { id: string }) {
     const sumiCommandRegistry: SumiCommandRegistry = this.injector.get(SumiCommandRegistry);
-    sumiCommandRegistry.registerCommand(NotebookCommands['EnterCommandMode'], {
-      execute: () => {
-        this.commandRegistry.executeCommand(NotebookCommands['EnterCommandMode'].id);
-      },
-    });
-    sumiCommandRegistry.registerCommand(NotebookCommands['RunCell'], {
-      execute: () => {
-        this.commandRegistry.executeCommand(NotebookCommands['RunCell'].id);
-      },
-    });
-    sumiCommandRegistry.registerCommand(NotebookCommands['RunCellAndSelectNext'], {
-      execute: () => {
-        this.commandRegistry.executeCommand(NotebookCommands['RunCellAndSelectNext'].id);
-      },
-    });
-    sumiCommandRegistry.registerCommand(NotebookCommands['RunCellAndInsertBelow'], {
+    sumiCommandRegistry.registerCommand(command, {
       execute: () => {
-        this.commandRegistry.executeCommand(NotebookCommands['RunCellAndInsertBelow'].id);
-      },
-    });
-    sumiCommandRegistry.registerCommand(NotebookCommands['SplitCellAntCursor'], {
-      execute: () => {
-        this.commandRegistry.executeCommand(NotebookCommands['SplitCellAntCursor'].id);
-      },
-    });
-    sumiCommandRegistry.registerCommand(LibroSearchToggleCommand.ShowLibroSearch, {
-      execute: () => {
-        this.commandRegistry.executeCommand(LibroSearchToggleCommand.ShowLibroSearch.id);
+        this.commandRegistry.executeCommand(command.id);
       },
     });
   }
 
+  registerCommand() {
+    const commands = [
+      NotebookCommands['EnterCommandMode'],
+      NotebookCommands['RunCell'],
+      NotebookCommands['RunCellAndSelectNext'],
+      NotebookCommands['RunCellAndInsertBelow'],
+      NotebookCommands['SplitCellAntCursor'],
+      LibroSearchToggleCommand.ShowLibroSearch,
+    ];
+
+    commands.forEach((command) => this.registerSingleCommand(command));
+  }
+
   registerKeybind() {
     const keybindingService: KeybindingRegistry = this.injector.get(KeybindingRegistry);
     keybindingService.registerKeybindings(
@@ -99,7 +87,7 @@ export class Keybindhandler implements ApplicationContribution {
         {
           keybinding: 'esc',
           command: NotebookCommands['EnterCommandMode'].id,
-          when: 'libroNotebookFocused && !editorHasSelection && !editorHasSelection && !editorHasMultipleSelections',
+          when: 'libroNotebookFocused && !editorHasSelection && !editorHasMultipleSelections',
         },
         {
           keybinding: 'ctrlcmd+enter',

package/src/browser/libro/editor/opensumi-editor.ts

@@ -1,19 +1,3 @@
-// eslint-disable-next-line import/order
-import type {
-  CodeEditorFactory,
-  CompletionProvider,
-  EditorState,
-  ICoordinate,
-  IEditor,
-  IEditorConfig,
-  IEditorOptions,
-  IModel,
-  IModelContentChange,
-  IPosition,
-  IRange,
-  SearchMatch,
-  TooltipProvider,
-} from '@difizen/libro-code-editor';
 import { defaultConfig } from '@difizen/libro-code-editor';
 import { MIME } from '@difizen/libro-common';
 import { EditorStateFactory, IEditorStateOptions } from '@difizen/libro-jupyter/noeditor';
@@ -41,6 +25,20 @@ import { Range as MonacoRange } from '@opensumi/monaco-editor-core/esm/vs/editor
 
 import { OpensumiInjector } from '../../mana';
 
+import type {
+  CodeEditorFactory,
+  CompletionProvider,
+  EditorState,
+  IEditor,
+  IEditorConfig,
+  IEditorOptions,
+  IModel,
+  IModelContentChange,
+  IPosition,
+  IRange,
+  SearchMatch,
+  TooltipProvider,
+} from '@difizen/libro-code-editor';
 import type { LSPProvider } from '@difizen/libro-lsp';
 import type { IStandaloneEditorConstructionOptions as MonacoEditorOptions } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneCodeEditor';
 import './index.less';
@@ -56,9 +54,6 @@ export interface LibroOpensumiEditorConfig extends IEditorConfig {
    */
   mimetype?: string;
 
-  // FIXME-TRANS: Handle theme localizable names
-  // themeDisplayName?: string
-
   /**
    * Whether to use the context-sensitive indentation that the mode provides
    * (or just indent the same as the line before).
@@ -83,7 +78,6 @@ export interface LibroOpensumiEditorConfig extends IEditorConfig {
    * Can be used to specify extra keybindings for the editor, alongside the
    * ones defined by keyMap. Should be either null, or a valid keymap value.
    */
-  // extraKeys?: KeyBinding[] | null;
 
   /**
    * Can be used to add extra gutters (beyond or instead of the line number
@@ -193,7 +187,6 @@ export const libroOpensumiEditorDefaultConfig: Required<LibroOpensumiEditorConfi
   smartIndent: true,
   electricChars: true,
   keyMap: 'default',
-  // extraKeys: null,
   gutters: [],
   fixedGutter: true,
   showCursorWhenSelecting: false,
@@ -330,11 +323,12 @@ export class LibroOpensumiEditor implements IEditor {
     this._model = options.model;
 
     const config = options.config || {};
-    const fullConfig = (this._config = {
+    const fullConfig = {
       ...libroOpensumiEditorDefaultConfig,
       ...config,
       mimetype: options.model.mimeType,
-    });
+    };
+    this._config = fullConfig;
 
     this.completionProvider = options.completionProvider;
     this.tooltipProvider = options.tooltipProvider;
@@ -350,9 +344,7 @@ export class LibroOpensumiEditor implements IEditor {
     this.onCursorActivity();
 
     this.toDispose.push(watch(this._model, 'mimeType', this.onMimeTypeChanged));
-    // this.toDispose.push(watch(this._model, 'value', this.onValueChange));
     this.toDispose.push(watch(this._model, 'selections', this.onSelectionChange));
-    // this.toDispose.push(this.themeService.onDidColorThemeChange(this.onThemeChange));
   }
 
   get theme(): string {
@@ -366,58 +358,20 @@ export class LibroOpensumiEditor implements IEditor {
         enabled: false,
       },
       lineHeight: editorConfig.lineHeight ?? this.defaultLineHeight,
-      // fontSize: editorConfig.fontSize ?? 13,
       lineNumbers: editorConfig.lineNumbers ? 'on' : 'off',
-      // folding: editorConfig.codeFolding,
       wordWrap: editorConfig.lineWrap,
       renderLineHighlightOnlyWhenFocus: true,
-      // lineDecorationsWidth: 15,
-      // lineNumbersMinChars: 3,
-      // suggestSelection: 'first',
-      // wordBasedSuggestions: 'off',
-      // lineDecorationsWidth: 15,
-      // lineNumbersMinChars: 3,
-      // suggestSelection: 'first',
-      // wordBasedSuggestions: 'off',
       scrollBeyondLastLine: false,
-      // overflowWidgetsDomNode: document.getElementById('monaco-editor-overflow-widgets-root')!,
       fixedOverflowWidgets: true,
-      // suggest: { snippetsPreventQuickSuggestions: false },
-      // autoClosingQuotes: editorConfig.autoClosingBrackets ? 'always' : 'never',
-      // autoDetectHighContrast: false,
-      // suggest: { snippetsPreventQuickSuggestions: false },
-      // autoClosingQuotes: editorConfig.autoClosingBrackets ? 'always' : 'never',
-      // autoDetectHighContrast: false,
       scrollbar: {
         alwaysConsumeMouseWheel: false,
         verticalScrollbarSize: 0,
       },
       glyphMargin: false,
       extraEditorClassName: OpensumiEditorClassname,
-      // renderLineHighlight: 'all',
-      // renderLineHighlightOnlyWhenFocus: true,
-      // renderLineHighlight: 'all',
-      // renderLineHighlightOnlyWhenFocus: true,
       readOnly: editorConfig.readOnly,
-      // cursorWidth: 1,
-      // tabSize: editorConfig.tabSize,
-      // insertSpaces: editorConfig.insertSpaces,
-      // matchBrackets: editorConfig.matchBrackets ? 'always' : 'never',
-      // rulers: editorConfig.rulers,
-      // wordWrapColumn: editorConfig.wordWrapColumn,
-      // 'semanticHighlighting.enabled': true,
-      // cursorWidth: 1,
-      // tabSize: editorConfig.tabSize,
-      // insertSpaces: editorConfig.insertSpaces,
-      // matchBrackets: editorConfig.matchBrackets ? 'always' : 'never',
-      // rulers: editorConfig.rulers,
-      // wordWrapColumn: editorConfig.wordWrapColumn,
-      // 'semanticHighlighting.enabled': true,
       maxTokenizationLineLength: 10000,
       wrappingStrategy: 'advanced',
-      // hover: {
-      //   enabled: true,
-      // },
     };
   }
 
@@ -531,42 +485,23 @@ export class LibroOpensumiEditor implements IEditor {
     }
   }
 
-  protected onValueChange() {
-    // this.editor?.codeEditor.setValue(this.model.value);
-  }
+  protected onValueChange() {}
 
   protected onSelectionChange() {
     this.setSelections(this.model.selections);
   }
 
-  // protected onThemeChange = () => {
-  //   this.monacoEditor?.updateOptions({ theme: this.theme });
-  // };
-
   /**
    * Handles a mime type change.
    * 切换语言
    * cell 切换没走这里
    */
-  protected onMimeTypeChanged(): void {
-    // const model = this.monacoEditor?.getModel();
-    // model?.setLanguage('')
-    // if (this.languageSpec && model) {
-    //   editor.setModelLanguage(model, this.languageSpec.language);
-    // }
-  }
+  protected onMimeTypeChanged(): void {}
 
   /**
    * Handles a cursor activity event.
    */
-  protected onCursorActivity(): void {
-    // Only add selections if the editor has focus. This avoids unwanted
-    // triggering of cursor activity due to collaborator actions.
-    if (this.hasFocus()) {
-      // const selections = this.getSelections();
-      // this.model.selections = selections;
-    }
-  }
+  protected onCursorActivity(): void {}
 
   getOption<K extends keyof LibroOpensumiEditorConfig>(option: K) {
     return this._config[option];
@@ -582,20 +517,6 @@ export class LibroOpensumiEditor implements IEditor {
       return;
     }
 
-    // if (option === 'theme') {
-    //   this._config.theme = value as NonNullable<LibroE2EditorConfig['theme']>;
-    //   this.monacoEditor?.updateOptions({
-    //     theme: this.theme,
-    //   });
-    // }
-
-    // if (option === 'placeholder') {
-    //   this._config.placeholder = value as NonNullable<
-    //     LibroE2EditorConfig['placeholder']
-    //   >;
-    //   this.placeholder.update(value as NonNullable<LibroE2EditorConfig['placeholder']>);
-    // }
-
     const sizeKeys = ['fontFamily', 'fontSize', 'lineHeight', 'wordWrapColumn', 'lineWrap'];
     const monacoOptionkeys = sizeKeys.concat(['readOnly', 'insertSpaces', 'tabSize']);
 
@@ -632,8 +553,7 @@ export class LibroOpensumiEditor implements IEditor {
   resizeToFit = () => {
     this.monacoEditor?.layout();
   };
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  getPositionForCoordinate = (coordinate: ICoordinate) => null;
+  getPositionForCoordinate = () => null;
 
   protected modalChangeEmitter = new Emitter<boolean>();
   get onModalChange() {
@@ -771,7 +691,6 @@ export class LibroOpensumiEditor implements IEditor {
           return {
             range: item,
             options: {
-              className: 'currentFindMatch', // 当前高亮
               description: '',
             },
           };
@@ -779,7 +698,6 @@ export class LibroOpensumiEditor implements IEditor {
         return {
           range: item,
           options: {
-            className: 'findMatch', // 匹配高亮
             description: '',
           },
         };

package/src/browser/libro-keybind-contribution.ts

@@ -16,7 +16,7 @@ import { LIBRO_COMPONENTS_SCHEME_ID } from './libro.protocol';
 import { ManaContainer } from './mana';
 
 @Domain(ClientAppContribution)
-export class LibroKeybindContribition implements ClientAppContribution {
+export class LibroKeybindContribution implements ClientAppContribution {
   @Autowired(IContextKeyService) contextKeyService: IContextKeyService;
   @Autowired(KeybindingRegistry) keybindingRegistry: KeybindingRegistry;
   @Autowired(WorkbenchEditorService)
@@ -113,7 +113,7 @@ export class LibroKeybindContribition implements ClientAppContribution {
         {
           keybinding: 'esc',
           command: NotebookCommands['EnterCommandMode'].id,
-          when: 'libroNotebookFocused && !editorHasSelection && !editorHasSelection && !editorHasMultipleSelections',
+          when: 'libroNotebookFocused && !editorHasSelection && !editorHasMultipleSelections',
         },
         {
           keybinding: 'ctrlcmd+enter',

package/src/browser/libro-opener.ts

@@ -3,7 +3,7 @@ import { CellUri, EditorCellView, ExecutableNotebookModel } from '@difizen/libro
 
 import { Autowired, Injectable } from '@opensumi/di';
 import { IOpener, IPosition, IRange, URI } from '@opensumi/ide-core-browser';
-import { Schemes } from '@opensumi/ide-core-common';
+import { ILogger, Schemes } from '@opensumi/ide-core-common';
 
 import { LibroOpensumiService } from './libro.service';
 
@@ -33,11 +33,9 @@ export const toMonacoPosition = (position: IPosition | undefined): LibroPosition
 
 @Injectable()
 export class LibroOpener implements IOpener {
-  // @Autowired(ResourceService)
-  // resourceService: ResourceService;
+  @Autowired(ILogger)
+  private readonly logger: ILogger;
 
-  // @Autowired(WorkbenchEditorService)
-  // workbenchEditorService: WorkbenchEditorService;
   @Autowired(LibroOpensumiService)
   libroOpensumiService: LibroOpensumiService;
 
@@ -62,7 +60,7 @@ export class LibroOpener implements IOpener {
 
   protected async openCell(uri: URI, range?: IRange) {
     const notebookUri = URI.file(uri.path.toString());
-    const libroView = await this.libroOpensumiService.getOrCreatLibroView(notebookUri);
+    const libroView = await this.libroOpensumiService.getOrCreateLibroView(notebookUri);
 
     if (!libroView) {
       return false;
@@ -81,11 +79,18 @@ export class LibroOpener implements IOpener {
     libroView.selectCell(cell);
     let line = 0;
     if (range) {
-      cell.editor?.focus();
-      cell.editor?.revealSelection(toEditorRange(range));
-      cell.editor?.setCursorPosition(toEditorRange(range).start);
+      const editor = cell.editor;
+      if (!editor) {
+        this.logger.error('Editor not available for cell');
+        return;
+      }
+      editor.focus();
+      editor.revealSelection(toEditorRange(range));
+      editor.setCursorPosition(toEditorRange(range).start);
+
       line = toEditorRange(range).start.line;
     }
+    // TODO: 优化Libro的滚动API
     libroView.model.scrollToView(cell, (line ?? 0) * 20);
   }
 

package/src/browser/libro.command.ts

@@ -3,6 +3,7 @@ import { Container } from '@difizen/mana-app';
 
 import { Autowired } from '@opensumi/di';
 import { CommandContribution, CommandRegistry, Domain, EDITOR_COMMANDS } from '@opensumi/ide-core-browser';
+import { MARKER_CONTAINER_ID } from '@opensumi/ide-core-browser/lib/common/container-id';
 
 import { ManaContainer } from './mana';
 
@@ -43,7 +44,7 @@ export class LibroCommandContribution implements CommandContribution {
         return false;
       },
     });
-    commands.registerHandler('markers', {
+    commands.registerHandler(MARKER_CONTAINER_ID, {
       execute: () => {
         const libroService = this.manaContainer.get(LibroService);
         const libro = libroService.active;

package/src/browser/libro.contribution.tsx

@@ -1,4 +1,9 @@
-import { LibroJupyterNoEditorModule, ServerConnection, ServerManager } from '@difizen/libro-jupyter/noeditor';
+import {
+  ISettings,
+  LibroJupyterNoEditorModule,
+  ServerConnection,
+  ServerManager,
+} from '@difizen/libro-jupyter/noeditor';
 import { LibroTOCModule } from '@difizen/libro-toc';
 import { Container, ManaAppPreset, ManaComponents, ThemeService } from '@difizen/mana-app';
 import React, { useState } from 'react';
@@ -10,6 +15,7 @@ import {
   ClientAppContribution,
   CommandContribution,
   type CommandRegistry,
+  Disposable,
   Domain,
   IClientApp,
   IOpenerService,
@@ -17,9 +23,11 @@ import {
   Schemes,
   URI,
 } from '@opensumi/ide-core-browser';
+import { message } from '@opensumi/ide-core-browser/lib/components';
 import {
   BrowserEditorContribution,
   EditorComponentRegistry,
+  INotebookService,
   IResource,
   ResourceService,
   WorkbenchEditorService,
@@ -36,6 +44,7 @@ import { LIBRO_COMPONENTS_ID, LIBRO_COMPONENTS_SCHEME_ID } from './libro.protoco
 import { OpensumiLibroView } from './libro.view';
 import { ManaContainer, initLibroOpensumi, manaContainer } from './mana/index';
 import { NotebookDocumentContentProvider } from './notebook-document-content-provider';
+import { NotebookServiceOverride } from './notebook.service';
 import { initTocPanelColorToken } from './toc';
 
 const LIBRO_COMPONENTS_VIEW_COMMAND = {
@@ -64,6 +73,7 @@ const LayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
   OpenerContribution,
 )
 export class LibroContribution
+  extends Disposable
   implements
     ClientAppContribution,
     BrowserEditorContribution,
@@ -83,6 +93,9 @@ export class LibroContribution
   @Autowired(IThemeService)
   protected readonly themeService: IThemeService;
 
+  @Autowired(INotebookService)
+  protected readonly notebookService: NotebookServiceOverride;
+
   @Autowired(NotebookDocumentContentProvider)
   protected readonly notebookDocumentContentProvider: NotebookDocumentContentProvider;
 
@@ -136,7 +149,7 @@ export class LibroContribution
         if (!this.serverManagerInited && this.config.notebookServerHost) {
           this.serverManagerInited = true;
           // 目前直接从浏览器连接 jupyter 服务，对服务的cors等配置会有要求
-          this.connectJupyterServer(this.config.notebookServerHost);
+          this.connectJupyterServer(this.config.notebookServerHost).catch((err) => message.error(err.message));
         }
         results.push({
           type: 'component',
@@ -169,17 +182,23 @@ export class LibroContribution
   }
 
   async onDidStart() {
+    this.addDispose(this.notebookService.listenLibro());
+    this.addDispose(this.notebookService.listenEditor());
+
     const manaThemeService = this.manaContainer.get(ThemeService);
     const curTheme = await this.themeService.getCurrentTheme();
     manaThemeService.setCurrentTheme(curTheme.type);
-    this.themeService.onThemeChange((theme) => {
-      manaThemeService.setCurrentTheme(theme.type);
-    });
+    this.addDispose(
+      this.themeService.onThemeChange((theme) => {
+        manaThemeService.setCurrentTheme(theme.type);
+      }),
+    );
   }
 
-  protected connectJupyterServer(serverHost: string) {
+  protected async connectJupyterServer(serverHost: string) {
     const libroServerConnection = this.manaContainer.get(ServerConnection);
-    libroServerConnection.updateSettings(
+    const token = this.config.notebookServerToken;
+    const setting: Partial<ISettings> =
       window.location.protocol === 'https:'
         ? {
             baseUrl: `https://${serverHost}/`,
@@ -188,9 +207,10 @@ export class LibroContribution
         : {
             baseUrl: `http://${serverHost}/`,
             wsUrl: `ws://${serverHost}/`,
-          },
-    );
+          };
+
+    libroServerConnection.updateSettings({ ...setting, token });
     const serverManager = this.manaContainer.get(ServerManager);
-    serverManager.launch();
+    await serverManager.launch();
   }
 }

package/src/browser/libro.module.less

@@ -36,5 +36,8 @@
         background: var(--libro-input-background) !important;
       }
     }
+    .libro-view-top {
+      padding: 0 12px;
+    }
   }
 }

package/src/browser/libro.service.ts

@@ -1,25 +1,20 @@
 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>;
+  getOrCreateLibroView: (uri: URI) => Promise<LibroView>;
   updateDirtyStatus: (uri: URI, dirty: boolean) => void;
   getCellViewByUri: (uri: URI) => Promise<CellView | undefined>;
-  getCellLangauge: (cell: CellView) => string | undefined;
+  getCellLanguage: (cell: CellView) => string | undefined;
 }
 
 @Injectable()
@@ -30,17 +25,12 @@ export class LibroOpensumiService extends WithEventBus implements ILibroOpensumi
   @Autowired(WorkbenchEditorService)
   protected readonly editorService: WorkbenchEditorService;
 
-  constructor() {
-    super();
-    makeObservable(this);
-  }
-
   get libroService() {
     const libroService = this.manaContainer.get(LibroService);
     return libroService;
   }
 
-  getOrCreatLibroView = async (uri: URI) => {
+  getOrCreateLibroView = async (uri: URI) => {
     const libroOption = {
       modelId: uri.toString(),
       resource: uri.toString(),
@@ -65,7 +55,7 @@ export class LibroOpensumiService extends WithEventBus implements ILibroOpensumi
     return libroView?.model.cells.find((cell) => cell.model.id === cellId);
   };
 
-  getCellLangauge = (cell: CellView) => {
+  getCellLanguage = (cell: CellView) => {
     const languageSpecRegistry = this.manaContainer.get(LanguageSpecRegistry);
     return getOrigin(languageSpecRegistry.languageSpecs).find((item) => item.mime === cell.model.mimeType)?.language;
   };
@@ -80,6 +70,4 @@ export class LibroOpensumiService extends WithEventBus implements ILibroOpensumi
       }),
     );
   }
-
-  libroTrackerMap: Map<string, LibroTracker> = new Map();
 }

package/src/browser/libro.view.tsx

@@ -1,40 +1,30 @@
-
 import { DocumentCommands, LibroView } from '@difizen/libro-jupyter/noeditor';
-import { CommandRegistry, Container, ViewRender } from '@difizen/mana-app';
+import { CommandRegistry, Container, Disposable, 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 { message } from '@opensumi/ide-components';
+import { localize, 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';
 
+const AUTO_SAVE_DELAY = 1000; // ms
+
 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) => {
+    let modelChangeDisposer: undefined | Disposable;
+    libroOpensumiService.getOrCreateLibroView(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(() => {
+      modelChangeDisposer = libro.model.onChanged(() => {
         libroOpensumiService.updateDirtyStatus(params[0].resource.uri, true);
         if (autoSaveHandle) {
           window.clearTimeout(autoSaveHandle);
@@ -46,17 +36,21 @@ export const OpensumiLibroView: ReactEditorComponent = (...params) => {
               if (libro) {
                 libro.model.dirty = false;
               }
+            })
+            .catch((error) => {
+              message.error(localize('doc.saveError.failed'), error);
             });
-        }, 1000);
+        }, AUTO_SAVE_DELAY);
       });
       libro.onSave(() => {
         libroOpensumiService.updateDirtyStatus(params[0].resource.uri, false);
       });
     });
     return () => {
+      modelChangeDisposer?.dispose();
       window.clearTimeout(autoSaveHandle);
     };
-  }, [libroTracker?.refreshTimer]);
+  }, []);
 
   return <div className={styles.libroView}>{libroView && <ViewRender view={libroView}></ViewRender>}</div>;
 };