@difizen/libro-core 0.0.0-snapshot-20241017072317

package/src/cell/libro-edit-cell-view.tsx

@@ -0,0 +1,205 @@
+import type {
+  CodeEditorView,
+  CodeEditorViewOptions,
+  IEditor,
+} from '@difizen/libro-code-editor';
+import { CodeEditorManager } from '@difizen/libro-code-editor';
+import { CellUri } from '@difizen/libro-common';
+import {
+  Disposable,
+  DisposableCollection,
+  getOrigin,
+  inject,
+  prop,
+  ViewOption,
+  ViewRender,
+  watch,
+} from '@difizen/mana-app';
+import type { ReactNode } from 'react';
+
+import { LibroContextKey } from '../libro-context-key.js';
+import type { CellView, CellViewOptions } from '../libro-protocol.js';
+import { EditorStatus } from '../libro-protocol.js';
+import { isCellView } from '../libro-protocol.js';
+
+import { CellService } from './libro-cell-protocol.js';
+import { LibroCellView } from './libro-cell-view.js';
+
+export interface EditorCellView extends CellView {
+  editor: IEditor | undefined;
+
+  redo: () => void;
+
+  undo: () => void;
+
+  renderEditor: () => ReactNode;
+}
+
+export const EditorCellView = {
+  is: (arg: Record<any, any> | undefined): arg is EditorCellView => {
+    return (
+      !!arg &&
+      isCellView(arg as any) &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'redo' in arg &&
+      typeof (arg as any).redo === 'function' &&
+      'undo' in arg &&
+      typeof (arg as any).undo === 'function'
+    );
+  },
+};
+
+/**
+ * 带有编辑器能力的cell view，例如raw、markdown、python、sql等
+ * 超出编辑器的相关能力放在其他的更高抽象中
+ */
+export abstract class LibroEditorCellView
+  extends LibroCellView
+  implements EditorCellView
+{
+  protected toDisposeOnEditor = new DisposableCollection();
+  @prop()
+  editor: IEditor | undefined;
+
+  @inject(LibroContextKey) protected readonly libroContextKey: LibroContextKey;
+  @inject(CodeEditorManager) codeEditorManager: CodeEditorManager;
+
+  @prop()
+  editorView?: CodeEditorView;
+
+  constructor(
+    @inject(ViewOption) options: CellViewOptions,
+    @inject(CellService) cellService: CellService,
+  ) {
+    super(options, cellService);
+  }
+
+  protected getEditorOption(): CodeEditorViewOptions {
+    const option: CodeEditorViewOptions = {
+      uuid: CellUri.from(this.parent.model.id, this.model.id).toString(),
+      editorHostId: this.parent.id + this.id,
+      model: this.model,
+      config: {
+        readOnly: !this.parent.model.inputEditable,
+        editable: this.parent.model.inputEditable,
+      },
+    };
+    return option;
+  }
+
+  protected async afterEditorReady() {
+    this.focusEditor();
+    this.toDisposeOnEditor.push(
+      watch(this.parent.model, 'inputEditable', () => {
+        this.editorView?.editor?.setOption(
+          'readOnly',
+          getOrigin(!this.parent.model.inputEditable),
+        );
+      }),
+    );
+    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,
+    );
+  }
+
+  async createEditor() {
+    const option = this.getEditorOption();
+
+    this.editorStatus = EditorStatus.LOADING;
+
+    // 防止虚拟滚动中编辑器被频繁创建
+    if (this.editorView) {
+      this.editorStatus = EditorStatus.LOADED;
+      return;
+    }
+
+    const editorView = await this.codeEditorManager.getOrCreateEditorView(option);
+
+    this.editorView = editorView;
+    this.editorStatus = EditorStatus.LOADED;
+
+    editorView.onEditorStatusChange((e) => {
+      if (e.status === 'ready') {
+        this.editor = this.editorView!.editor;
+        this.afterEditorReady();
+      } else if (e.status === 'disposed') {
+        this.toDisposeOnEditor.dispose();
+      }
+    });
+  }
+
+  @prop()
+  editorStatus: EditorStatus = EditorStatus.NOTLOADED;
+
+  renderEditor = () => {
+    if (this.editorView) {
+      return <ViewRender view={this.editorView} />;
+    }
+    return null;
+  };
+
+  override onViewMount() {
+    this.createEditor();
+    //选中cell时才focus
+    if (this.parent.model.active?.id === this.id) {
+      this.focus(!this.parent.model.commandMode);
+    }
+  }
+
+  override shouldEnterEditorMode(e: React.FocusEvent<HTMLElement>) {
+    return getOrigin(this.editorView)?.editor?.host?.contains(
+      e.target as HTMLElement,
+    ) && this.parent.model.commandMode
+      ? true
+      : false;
+  }
+
+  protected focusEditor() {
+    //选中cell、编辑模式、非只读时才focus
+    if (
+      this.editorView?.editor &&
+      this.editorView.editorStatus === 'ready' &&
+      this.parent.model.active?.id === this.id &&
+      !this.parent.model.commandMode &&
+      this.libroContextKey.commandModeEnabled === true && // 排除弹窗等情况
+      this.parent.model.inputEditable
+    ) {
+      this.editorView?.editor.setOption('styleActiveLine', true);
+      this.editorView?.editor.setOption('highlightActiveLineGutter', true);
+      this.editorView?.editor.focus();
+    }
+  }
+
+  override focus = (toEdit: boolean) => {
+    if (toEdit) {
+      this.focusEditor();
+    } else {
+      if (this.container?.current?.parentElement?.contains(document.activeElement)) {
+        return;
+      }
+      this.container?.current?.parentElement?.focus();
+    }
+  };
+
+  override blur = () => {
+    this.editorView?.editor?.setOption('styleActiveLine', false);
+    this.editorView?.editor?.setOption('highlightActiveLineGutter', false);
+  };
+
+  get wrapperCls() {
+    return '';
+  }
+
+  redo(): void {
+    this.editor?.redo();
+  }
+
+  undo(): void {
+    this.editor?.undo();
+  }
+}

package/src/cell/libro-executable-cell-model.ts

@@ -0,0 +1,32 @@
+import type { ExecutionCount } from '@difizen/libro-common';
+import type { Emitter } from '@difizen/mana-app';
+
+export interface ExecutableCellModel {
+  // 执行中
+  executing: boolean;
+
+  // 执行次数
+  executeCount: ExecutionCount;
+
+  hasOutputHidden: boolean;
+
+  hasOutputsScrolled: boolean;
+
+  // Emitter Msg
+  msgChangeEmitter: Emitter<any>;
+
+  clearExecution: () => void;
+}
+
+export const ExecutableCellModel = {
+  is: (arg: Record<any, any> | undefined): arg is ExecutableCellModel => {
+    return (
+      !!arg &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'executing' in arg &&
+      typeof (arg as any).executing === 'boolean' &&
+      'executeCount' in arg &&
+      (typeof (arg as any).executeCount === 'number' || !(arg as any).executeCount)
+    );
+  },
+};

package/src/cell/libro-executable-cell-view.ts

@@ -0,0 +1,86 @@
+import { watch } from '@difizen/mana-app';
+import { ViewOption } from '@difizen/mana-app';
+import { inject } from '@difizen/mana-app';
+
+import type { CellModel } from '../libro-protocol.js';
+import type { CellViewOptions } from '../libro-protocol.js';
+import type { BaseOutputArea } from '../output/index.js';
+
+import { CellService } from './libro-cell-protocol.js';
+import { EditorCellView, LibroEditorCellView } from './libro-edit-cell-view.js';
+import { ExecutableCellModel } from './libro-executable-cell-model.js';
+
+interface ExecutableCellView extends EditorCellView {
+  run: () => Promise<boolean>;
+  clearExecution: () => void;
+
+  outputArea: BaseOutputArea;
+
+  noEditorAreaHeight: number;
+}
+
+export const ExecutableCellView = {
+  is: (arg: Record<any, any> | undefined): arg is ExecutableCellView => {
+    return (
+      !!arg &&
+      EditorCellView.is(arg as any) &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'outputArea' in arg &&
+      typeof (arg as any).outputArea === 'object' &&
+      'clearExecution' in arg &&
+      typeof (arg as any).clearExecution === 'function' &&
+      typeof (arg as any).run === 'function'
+    );
+  },
+};
+
+/**
+ * 带有编辑器、执行、output相关能力的cell view，例如python、sql
+ * model 必须为 ExecutableCellModel
+ */
+export abstract class LibroEditableExecutableCellView
+  extends LibroEditorCellView
+  implements ExecutableCellView
+{
+  declare model: CellModel & ExecutableCellModel;
+
+  outputArea: BaseOutputArea;
+
+  declare noEditorAreaHeight: number;
+
+  constructor(
+    @inject(ViewOption) options: CellViewOptions,
+    @inject(CellService) cellService: CellService,
+  ) {
+    super(options, cellService);
+    this.outputWatch();
+  }
+
+  clearExecution: () => void = () => {
+    //
+  };
+
+  // TODO: 性能！
+  override hasCellHidden() {
+    if (
+      !ExecutableCellModel.is(this.model) ||
+      (this.outputArea && this.outputArea.length < 1)
+    ) {
+      return this.hasInputHidden;
+    }
+    return this.hasInputHidden && this.model.hasOutputHidden;
+  }
+
+  outputWatch() {
+    this.toDispose.push(
+      watch(this.outputArea, 'outputs', () => {
+        this.parent.model.onChange?.();
+      }),
+    );
+  }
+}
+
+/**
+ * @deprecated use LibroEditableExecutableCellView instead.
+ */
+export const LibroExecutableCellView = LibroEditableExecutableCellView;

package/src/cell/libro-markdown-cell-model.ts

@@ -0,0 +1,20 @@
+import type { CellModel } from '../libro-protocol.js';
+
+export interface LibroMarkdownCellModel extends CellModel {
+  isEdit: boolean;
+
+  preview: string;
+}
+
+export const LibroMarkdownCellModel = {
+  is: (arg: Record<any, any> | undefined): arg is LibroMarkdownCellModel => {
+    return (
+      !!arg &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'isEdit' in arg &&
+      typeof (arg as any).isEdit === 'boolean' &&
+      'preview' in arg &&
+      typeof (arg as any).preview === 'string'
+    );
+  },
+};

package/src/collapse-service.ts

@@ -0,0 +1,69 @@
+import { inject, prop, transient } from '@difizen/mana-app';
+
+import type { CellView } from './libro-protocol.js';
+import type { LibroView } from './libro-view.js';
+
+export interface CollapseServiceOption {
+  view: LibroView;
+}
+export const CollapseServiceOption = Symbol('CollapseServiceOption');
+
+export type CollapseServiceFactory = (option: CollapseServiceOption) => CollapseService;
+export const CollapseServiceFactory = Symbol('CollapseServiceFactory');
+
+export interface CellCollapsible {
+  /**
+   * 是否折叠子项
+   */
+  headingCollapsed: boolean;
+  /**
+   * 折叠的子项的数量
+   */
+  collapsibleChildNumber: number;
+}
+
+export const CellCollapsible = {
+  is: (arg: Record<any, any> | undefined): arg is CellCollapsible => {
+    return (
+      !!arg &&
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'headingCollapsed' in arg &&
+      typeof (arg as any).headingCollapsed === 'boolean'
+    );
+  },
+};
+
+export interface CollapseService {
+  collapserVisible: boolean;
+
+  view: LibroView;
+
+  setHeadingCollapse: (cell: CellView, collapsing: boolean) => void;
+
+  getCollapsibleChildNumber: (cell: CellView) => number;
+}
+
+export const CollapseService = Symbol('CollapseService');
+
+@transient({ token: CollapseService })
+export class DefaultCollapseService implements CollapseService {
+  @prop()
+  collapserVisible = false;
+
+  view: LibroView;
+
+  constructor(@inject(CollapseServiceOption) option: CollapseServiceOption) {
+    this.view = option.view;
+  }
+
+  setHeadingCollapse(cell: CellView, collapsing: boolean) {
+    if (CellCollapsible.is(cell)) {
+      cell.headingCollapsed = collapsing;
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getCollapsibleChildNumber(cell: CellView) {
+    return 0;
+  }
+}

package/src/command/document-commands.ts

@@ -0,0 +1,24 @@
+import { SaveOutlined, SettingOutlined } from '@ant-design/icons';
+import type { Command } from '@difizen/mana-app';
+
+import { FormatCellIcon } from '../material-from-designer.js';
+
+export const DocumentCommands: Record<string, Command & { keybind?: string }> = {
+  Save: {
+    id: 'document:save',
+    icon: SaveOutlined,
+    label: 'SAVE',
+    keybind: 'ctrlcmd+s',
+  },
+  OpenSettings: {
+    id: 'document.notebook.open_setting',
+    icon: SettingOutlined,
+    label: 'Setting',
+  },
+  FormatCell: {
+    id: 'document.notebook.format_cell',
+    icon: FormatCellIcon,
+    label: 'format cell code',
+    keybind: 'shift+alt+f',
+  },
+};

package/src/command/index.ts

@@ -0,0 +1,6 @@
+export * from './notebook-commands.js';
+export * from './document-commands.js';
+export * from './kernel-command.js';
+export * from './libro-command-contribution.js';
+export * from './libro-command-register.js';
+export * from './module.js';

package/src/command/kernel-command.ts

@@ -0,0 +1,42 @@
+import type { Command } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+export const KernelCommands: Record<string, Command & { keybind?: string }> = {
+  //#region libro command
+
+  //#endregion
+
+  //#region jupyterlab command
+  ChangeKernel: {
+    id: 'notebook:change-kernel',
+    label: `Change Kernel`,
+  },
+  GetKernel: {
+    id: 'notebook:get-kernel',
+    label: `Get Kernel`,
+  },
+  InterruptKernel: {
+    id: 'notebook:interrupt-kernel',
+    label: `Interrupt Kernel`,
+  },
+  ReconnectToKernel: {
+    id: 'notebook:reconnect-to-kernel',
+    label: `Reconnect to Kernel`,
+  },
+  RestartKernel: {
+    id: 'notebook:restart-kernel',
+    label: l10n.t('Restart Kernel'),
+  },
+  ShutdownKernel: {
+    id: 'notebook:shutdown-kernel',
+    label: `Shutdown Kernel`,
+  },
+  ShowKernelStatus: {
+    id: 'notebook:show-kernel-status',
+  },
+  // TODO: remove this command
+  ShowKernelStatusAndSelector: {
+    id: 'notebook:show-kernel-status-and-selector',
+  },
+  //#endregion
+};