feat: support file sync & support format code

weavefox · Jan 24, 2024 · 6662cb6 · 6662cb6
1 parent 4f5a238
commit 6662cb6
Show file tree

Hide file tree

Showing 28 changed files with 445 additions and 189 deletions.
diff --git a/packages/libro-code-cell/src/code-cell-model.ts b/packages/libro-code-cell/src/code-cell-model.ts
@@ -1,5 +1,5 @@
-import type { ExecutionCount } from '@difizen/libro-common';
-import type { ICodeCell } from '@difizen/libro-common';
+import { MIME } from '@difizen/libro-common';
+import type { ICodeCell, ExecutionCount } from '@difizen/libro-common';
 import type { ExecutableCellModel } from '@difizen/libro-core';
 import { CellOptions, LibroCellModel } from '@difizen/libro-core';
 import type { Event as ManaEvent } from '@difizen/mana-app';
@@ -39,7 +39,7 @@ export class LibroCodeCellModel extends LibroCellModel implements ExecutableCell
     this.executing = false;
     this.msgChangeEmitter = new Emitter<any>();
     this.executeCount = (options.cell as ICodeCell).execution_count || null;
-    this.mimeType = 'text/x-python';
+    this.mimeType = MIME.python;
     this.hasOutputHidden = false;
     this.hasOutputsScrolled = false;
     this.viewManager = viewManager;

diff --git a/packages/libro-code-cell/src/code-cell-view.tsx b/packages/libro-code-cell/src/code-cell-view.tsx
@@ -19,6 +19,8 @@ import {
   LirboContextKey,
 } from '@difizen/libro-core';
 import type { ViewSize } from '@difizen/mana-app';
+import { Disposable } from '@difizen/mana-app';
+import { DisposableCollection } from '@difizen/mana-app';
 import {
   getOrigin,
   inject,
@@ -100,6 +102,7 @@ const CodeEditorViewComponent = forwardRef<HTMLDivElement>(
 @transient()
 @view('code-editor-cell-view')
 export class LibroCodeCellView extends LibroExecutableCellView {
+  protected toDisposeOnEditor = new DisposableCollection();
   @inject(LirboContextKey) protected readonly lirboContextKey: LirboContextKey;
   override view = CodeEditorViewComponent;
 
@@ -256,19 +259,30 @@ export class LibroCodeCellView extends LibroExecutableCellView {
       if (e.status === 'ready') {
         this.editor = this.editorView!.editor;
         this.afterEditorReady();
+      } else if (e.status === 'disposed') {
+        this.toDisposeOnEditor.dispose();
       }
     });
   }
 
   protected async afterEditorReady() {
-    watch(this.parent.model, 'readOnly', () => {
-      this.editorView?.editor?.setOption(
-        'readOnly',
-        getOrigin(this.parent.model.readOnly),
-      );
-    });
-    this.editorView?.onModalChange((val) => (this.hasModal = val));
     this.focusEditor();
+    this.toDisposeOnEditor.push(
+      watch(this.parent.model, 'readOnly', () => {
+        this.editorView?.editor?.setOption(
+          'readOnly',
+          getOrigin(this.parent.model.readOnly),
+        );
+      }),
+    );
+    this.toDisposeOnEditor.push(
+      this.editorView?.onModalChange((val) => (this.hasModal = val)) ?? Disposable.NONE,
+    );
+    this.toDisposeOnEditor.push(
+      this.editor?.onModelContentChanged?.((e) => {
+        this.parent.model.onCellContentChange({ cell: this, changes: e });
+      }) ?? Disposable.NONE,
+    );
   }
 
   protected focusEditor() {

diff --git a/packages/libro-code-editor/src/code-editor-protocol.ts b/packages/libro-code-editor/src/code-editor-protocol.ts
@@ -394,6 +394,10 @@ export interface IEditor<S = any> extends ISelectionOwner, Disposable {
   dispose: () => void;
 
   getState: () => EditorState<S>;
+
+  format: () => void;
+
+  onModelContentChanged?: Event<IModelContentChange[]>;
 }
 
 export type EditorTheme = Record<ThemeType, string>;
@@ -656,3 +660,22 @@ export interface CodeEditorContribution<T = any> {
   stateFactory?: EditorStateFactory<T>;
   defaultConfig: IEditorConfig;
 }
+
+export interface IModelContentChange {
+  /**
+   * The range that got replaced.
+   */
+  readonly range: IRange;
+  /**
+   * The offset of the range that got replaced.
+   */
+  readonly rangeOffset: number;
+  /**
+   * The length of the range that got replaced.
+   */
+  readonly rangeLength: number;
+  /**
+   * The new text for the range.
+   */
+  readonly text: string;
+}
diff --git a/packages/libro-codemirror/src/editor.ts b/packages/libro-codemirror/src/editor.ts
@@ -33,7 +33,11 @@ import type {
   KeydownHandler,
   SearchMatch,
 } from '@difizen/libro-code-editor';
-import { findFirstArrayIndex, removeAllWhereFromArray } from '@difizen/libro-common';
+import {
+  findFirstArrayIndex,
+  MIME,
+  removeAllWhereFromArray,
+} from '@difizen/libro-common';
 import type { LSPProvider } from '@difizen/libro-lsp';
 import { Deferred, Disposable, Emitter } from '@difizen/mana-app';
 import { getOrigin, watch } from '@difizen/mana-app';
@@ -93,7 +97,7 @@ const DOWN_ARROW = 40;
 export const codeMirrorDefaultConfig: Required<CodeMirrorConfig> = {
   ...defaultConfig,
   mode: 'null',
-  mimetype: 'text/x-python',
+  mimetype: MIME.python,
   theme: { light: 'jupyter', dark: 'jupyter', hc: 'jupyter' },
   smartIndent: true,
   electricChars: true,
@@ -875,6 +879,8 @@ export class CodeMirrorEditor implements IEditor {
     command(this.editor);
   }
 
+  format: () => void;
+
   /**
    * Handle keydown events from the editor.
    */

diff --git a/packages/libro-cofine-editor/src/editor-contribution.ts b/packages/libro-cofine-editor/src/editor-contribution.ts
@@ -1,5 +1,6 @@
 import type { CodeEditorFactory, EditorStateFactory } from '@difizen/libro-code-editor';
 import { CodeEditorContribution } from '@difizen/libro-code-editor';
+import { MIME } from '@difizen/libro-common';
 import { inject, singleton } from '@difizen/mana-app';
 
 import { LanguageSpecRegistry } from './language-specs.js';
@@ -32,11 +33,7 @@ export class LibroE2EditorContribution implements CodeEditorContribution {
   };
 
   canHandle(mime: string): number {
-    const mimes = [
-      'application/vnd.libro.sql+json',
-      'text/x-python',
-      'application/vnd.libro.prompt+json',
-    ];
+    const mimes = [MIME.odpssql, MIME.python, MIME.prompt];
     if (mimes.includes(mime)) {
       return 50 + 1;
     }

diff --git a/packages/libro-cofine-editor/src/libro-e2-editor.ts b/packages/libro-cofine-editor/src/libro-e2-editor.ts
@@ -8,6 +8,7 @@ import type {
   IEditorConfig,
   IEditorOptions,
   IModel,
+  IModelContentChange,
   IPosition,
   IRange,
   SearchMatch,
@@ -16,6 +17,7 @@ import type {
 import { defaultConfig } from '@difizen/libro-code-editor';
 import type { E2Editor } from '@difizen/libro-cofine-editor-core';
 import { EditorProvider, MonacoEnvironment } from '@difizen/libro-cofine-editor-core';
+import { MIME } from '@difizen/libro-common';
 import { NotebookCommands } from '@difizen/libro-core';
 import type { LSPProvider } from '@difizen/libro-lsp';
 import {
@@ -28,7 +30,7 @@ import {
   watch,
 } from '@difizen/mana-app';
 import { Disposable, DisposableCollection, Emitter } from '@difizen/mana-app';
-import { editor, Selection } from '@difizen/monaco-editor-core';
+import { editor, KeyCode, Selection } from '@difizen/monaco-editor-core';
 import 'resize-observer-polyfill';
 import { v4 } from 'uuid';
 
@@ -228,7 +230,7 @@ export const libroE2DefaultConfig: Required<LibroE2EditorConfig> = {
   },
   scrollBarHeight: 12,
   mode: 'null',
-  mimetype: 'text/x-python',
+  mimetype: MIME.python,
   smartIndent: true,
   electricChars: true,
   keyMap: 'default',
@@ -371,6 +373,9 @@ export class LibroE2Editor implements IEditor {
     return this.monacoEditor?.getModel()?.getLineCount() || 0;
   }
 
+  protected onModelContentChangedEmitter = new Emitter<IModelContentChange[]>();
+  onModelContentChanged = this.onModelContentChangedEmitter.event;
+
   lspProvider?: LSPProvider;
 
   completionProvider?: CompletionProvider;
@@ -458,7 +463,7 @@ export class LibroE2Editor implements IEditor {
        *
        */
       // overflowWidgetsDomNode: document.getElementById('monaco-editor-overflow-widgets-root')!,
-      // fixedOverflowWidgets: true,
+      fixedOverflowWidgets: true,
       suggest: { snippetsPreventQuickSuggestions: false },
       autoClosingQuotes: editorConfig.autoClosingBrackets ? 'always' : 'never',
       autoDetectHighContrast: false,
@@ -519,15 +524,24 @@ export class LibroE2Editor implements IEditor {
        */
       language: this.languageSpec.language,
       theme: this.theme,
-      model,
+      model: getOrigin(model),
     };
 
     this._editor = editorPorvider.create(host, options);
     this.toDispose.push(
-      this.monacoEditor?.onDidChangeModelContent(() => {
+      this.monacoEditor?.onDidChangeModelContent((e) => {
         const value = this.monacoEditor?.getValue();
         this.model.value = value ?? '';
-        // this.updateEditorSize();
+        this.onModelContentChangedEmitter.fire(
+          e.changes.map((item) => {
+            return {
+              range: this.toEditorRange(item.range),
+              rangeLength: item.rangeLength,
+              rangeOffset: item.rangeOffset,
+              text: item.text,
+            };
+          }),
+        );
       }) ?? Disposable.NONE,
     );
     this.toDispose.push(
@@ -556,11 +570,6 @@ export class LibroE2Editor implements IEditor {
     //   this.monacoEditor._themeService,
     //   this.monacoEditor._themeService.getColorTheme(),
     // );
-
-    // setTimeout(() => {
-    //   this.monacoEditor?.trigger('editor', 'editor.action.formatDocument');
-    //   console.log('trigger format');
-    // }, 5000);
   }
 
   protected inspectResize() {
@@ -607,22 +616,23 @@ export class LibroE2Editor implements IEditor {
    */
   protected handleCommand(commandRegistry: CommandRegistry) {
     // need monaco 0.34
-    // editor.addKeybindingRules([
-    //   {
-    //     // disable show command center
-    //     keybinding: KeyCode.F1,
-    //     command: null,
-    //   },
-    //   {
-    //     // disable show error command
-    //     keybinding: KeyCode.F8,
-    //     command: null,
-    //   },
-    //   {
-    //     // disable toggle debugger breakpoint
-    //     keybinding: KeyCode.F9,
-    //     command: null,
-    //   },
+    editor.addKeybindingRules([
+      {
+        // disable show command center
+        keybinding: KeyCode.F1,
+        command: null,
+      },
+      {
+        // disable show error command
+        keybinding: KeyCode.F8,
+        command: null,
+      },
+      {
+        // disable toggle debugger breakpoint
+        keybinding: KeyCode.F9,
+        command: null,
+      },
+    ]);
     this.monacoEditor?.addCommand(
       9,
       () => {
@@ -812,6 +822,19 @@ export class LibroE2Editor implements IEditor {
     return monacoSelection;
   }
 
+  protected toEditorRange(range: monaco.IRange): IRange {
+    return {
+      start: {
+        line: range.startLineNumber - 1,
+        column: range.startColumn - 1,
+      },
+      end: {
+        line: range.endLineNumber - 1,
+        column: range.endColumn - 1,
+      },
+    };
+  }
+
   getSelectionValue = (range?: IRange | undefined) => {
     const selection = range ?? this.getSelection();
     return this.monacoEditor
@@ -955,6 +978,10 @@ export class LibroE2Editor implements IEditor {
     }
   };
 
+  format = () => {
+    this.monacoEditor?.trigger('libro-format', 'editor.action.formatDocument', '');
+  };
+
   protected _isDisposed = false;
   /**
    * Tests whether the editor is disposed.

diff --git a/packages/libro-common/src/index.ts b/packages/libro-common/src/index.ts
@@ -9,3 +9,4 @@ export * from './polling/index.js';
 export * from './display-wrapper.js';
 export * from './protocol/index.js';
 export * from './dom.js';
+export * from './mime.js';
diff --git a/packages/libro-common/src/mime.ts b/packages/libro-common/src/mime.ts
@@ -0,0 +1,12 @@
+export const MIME = {
+  text: 'text/plain',
+  binary: 'application/octet-stream',
+  unknown: 'application/unknown',
+  markdown: 'text/markdown',
+  latex: 'text/latex',
+  uriList: 'text/uri-list',
+  json: 'application/json',
+  python: 'text/x-python',
+  prompt: 'application/vnd.libro.prompt+json',
+  odpssql: 'application/vnd.libro.sql+json',
+} as const;
diff --git a/packages/libro-core/src/cell/libro-cell-view.tsx b/packages/libro-core/src/cell/libro-cell-view.tsx
@@ -71,13 +71,13 @@ export class LibroCellView extends BaseView implements CellView {
     this.toDispose.push(
       watch(this.model, 'value', () => {
         this.parent.model.onChange?.();
-        this.parent.model.onSourceChange?.();
+        this.parent.model.onSourceChange?.([this]);
       }),
     );
     this.toDispose.push(
       watch(this.model, 'type', () => {
         this.parent.model.onChange?.();
-        this.parent.model.onSourceChange?.();
+        this.parent.model.onSourceChange?.([this]);
       }),
     );
     if (ExecutableCellModel.is(this.model)) {

diff --git a/packages/libro-core/src/command/document-commands.ts b/packages/libro-core/src/command/document-commands.ts
@@ -1,4 +1,8 @@
-import { SaveOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  FormatPainterOutlined,
+  SaveOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import type { Command } from '@difizen/mana-app';
 
 export const DocumentCommands: Record<string, Command & { keybind?: string }> = {
@@ -13,4 +17,9 @@ export const DocumentCommands: Record<string, Command & { keybind?: string }> =
     icon: SettingOutlined,
     label: 'Setting',
   },
+  FormatCell: {
+    id: 'document.notebook.format_cell',
+    icon: FormatPainterOutlined,
+    label: 'format cell code',
+  },
 };