@difizen/libro-code-editor 0.0.0-snapshot-20241017072317

package/src/code-editor-settings.ts

@@ -0,0 +1,214 @@
+import {
+  inject,
+  singleton,
+  ApplicationContribution,
+  DisposableCollection,
+  Emitter,
+  ConfigurationContribution,
+  ConfigurationService,
+} from '@difizen/mana-app';
+import type {
+  Disposable,
+  ConfigurationNode,
+  ConfigurationStorage,
+} from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import type { IEditorConfig } from './code-editor-protocol.js';
+import { defaultConfig } from './code-editor-protocol.js';
+
+declare global {
+  interface ObjectConstructor {
+    typedKeys<T>(obj: T): (keyof T)[];
+  }
+}
+Object.typedKeys = Object.keys as any;
+
+const LibroUserSettingStorage: ConfigurationStorage = {
+  id: '__libro.user.storage__',
+  priority: 100,
+};
+
+const FontSize: ConfigurationNode<number> = {
+  id: 'libro.user.codeeditor.fontsize',
+  description: l10n.t('代码编辑区域字体大小'),
+  title: l10n.t('代码字号'),
+  type: 'inputnumber',
+  defaultValue: defaultConfig.fontSize ?? 13,
+  schema: {
+    type: 'number',
+  },
+  storage: LibroUserSettingStorage,
+};
+
+const LineHeight: ConfigurationNode<number> = {
+  id: 'libro.user.codeeditor.lineheight',
+  description: l10n.t('代码编辑区域字体行高'),
+  title: l10n.t('代码行高'),
+  type: 'inputnumber',
+  defaultValue: defaultConfig.lineHeight ?? 20,
+  schema: {
+    type: 'number',
+  },
+  storage: LibroUserSettingStorage,
+};
+
+const TabSize: ConfigurationNode<number> = {
+  id: 'libro.user.codeeditor.tabsize',
+  description: l10n.t('tab转换为几个空格大小'),
+  title: l10n.t('tab大小'),
+  type: 'inputnumber',
+  defaultValue: defaultConfig.tabSize ?? 4,
+  schema: {
+    type: 'number',
+  },
+  storage: LibroUserSettingStorage,
+};
+
+const InsertSpaces: ConfigurationNode<boolean> = {
+  id: 'libro.user.codeeditor.insertspaces',
+  description: l10n.t('输入tab是否转换为空格'),
+  title: l10n.t('tab转空格'),
+  type: 'checkbox',
+  defaultValue: defaultConfig.insertSpaces,
+  schema: {
+    type: 'boolean',
+  },
+  storage: LibroUserSettingStorage,
+};
+
+const LineWarp: ConfigurationNode<'wordWrapColumn' | 'off' | 'on' | 'bounded'> = {
+  id: 'libro.user.codeeditor.linewarp',
+  description: l10n.t(`自动换行策略:
+  - "off", lines will never wrap.
+  - "on", lines will wrap at the viewport border.
+  - "wordWrapColumn", lines will wrap at 'wordWrapColumn'.
+  - "bounded", lines will wrap at minimum between viewport width and wordWrapColumn.`),
+  title: l10n.t('自动换行'),
+  type: 'select',
+  defaultValue: defaultConfig.lineWrap,
+  schema: {
+    type: 'string',
+    enum: ['off', 'on', 'wordWrapColumn', 'bounded'],
+  },
+  storage: LibroUserSettingStorage,
+};
+
+const WordWrapColumn: ConfigurationNode<number> = {
+  id: 'libro.user.codeeditor.wordWrapColumn',
+  description: l10n.t('开启自动换行后，自动换行的列数'),
+  title: l10n.t('自动换行列数'),
+  type: 'inputnumber',
+  defaultValue: defaultConfig.wordWrapColumn,
+  schema: {
+    type: 'number',
+  },
+  storage: LibroUserSettingStorage,
+};
+
+const LSPEnabled: ConfigurationNode<boolean> = {
+  id: 'libro.user.codeeditor.lspenabled',
+  description: l10n.t(
+    '开启语言服务后，编辑器能提供更多辅助编码能力，包括：自动提示、代码诊断、hover提示、格式化、代码跳转、重命名等等',
+  ),
+  title: l10n.t('开启语言服务'),
+  type: 'checkbox',
+  defaultValue: defaultConfig.lspEnabled,
+  schema: {
+    type: 'boolean',
+  },
+  storage: LibroUserSettingStorage,
+};
+
+export const CodeEditorSetting: {
+  [key in keyof IEditorConfig]?: ConfigurationNode<any>;
+} = {
+  fontSize: FontSize,
+  tabSize: TabSize,
+  insertSpaces: InsertSpaces,
+  lineHeight: LineHeight,
+  lineWrap: LineWarp,
+  wordWrapColumn: WordWrapColumn,
+  lspEnabled: LSPEnabled,
+};
+
+@singleton({ contrib: [ConfigurationContribution, ApplicationContribution] })
+export class CodeEditorSettings
+  implements ConfigurationContribution, ApplicationContribution, Disposable
+{
+  protected readonly configurationService: ConfigurationService;
+
+  protected codeEditorSettingsChangeEmitter = new Emitter<{
+    key: keyof IEditorConfig;
+    value: any;
+  }>();
+
+  onCodeEditorSettingsChange = this.codeEditorSettingsChangeEmitter.event;
+
+  protected toDispose = new DisposableCollection();
+
+  protected useSettings: Partial<IEditorConfig> | undefined;
+
+  constructor(
+    @inject(ConfigurationService)
+    configurationService: ConfigurationService,
+  ) {
+    this.configurationService = configurationService;
+  }
+  registerConfigurations() {
+    return [
+      FontSize,
+      TabSize,
+      InsertSpaces,
+      LineHeight,
+      LineWarp,
+      WordWrapColumn,
+      LSPEnabled,
+    ];
+  }
+
+  async onStart() {
+    this.useSettings = await this.fetchUserEditorSettings();
+    this.handleEditorSettingsChange();
+  }
+  getUserEditorSettings(): Partial<IEditorConfig> | undefined {
+    return this.useSettings;
+  }
+
+  protected async fetchUserEditorSettings(): Promise<Partial<IEditorConfig>> {
+    const result: Partial<IEditorConfig> = {};
+    Object.typedKeys(CodeEditorSetting).forEach(async (key) => {
+      result[key] = await this.configurationService.get(CodeEditorSetting[key]!);
+    });
+    return result;
+  }
+
+  protected handleEditorSettingsChange() {
+    this.toDispose.push(
+      this.configurationService.onConfigurationValueChange((e) => {
+        // const ids = Object.values(CodeEditorSetting).map(item => item.id);
+        const match = Object.entries(CodeEditorSetting).find(
+          (item) => item[1].id === e.key,
+        );
+        if (match) {
+          this.codeEditorSettingsChangeEmitter.fire({
+            key: match[0] as any,
+            value: e.value,
+          });
+        }
+      }),
+    );
+  }
+
+  protected isDisposed = false;
+  get disposed() {
+    return this.isDisposed;
+  }
+  dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.toDispose.dispose();
+    this.isDisposed = true;
+  }
+}

package/src/code-editor-state-manager.ts

@@ -0,0 +1,54 @@
+import type { Contribution } from '@difizen/mana-app';
+import { Priority } from '@difizen/mana-app';
+import { contrib } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+import type { IModel } from './code-editor-model.js';
+import type { EditorState, IEditorStateOptions } from './code-editor-protocol.js';
+import { CodeEditorContribution } from './code-editor-protocol.js';
+
+@singleton()
+export class CodeEditorStateManager {
+  protected readonly codeEditorProvider: Contribution.Provider<CodeEditorContribution>;
+  protected stateCache: Map<string, EditorState> = new Map();
+
+  constructor(
+    @contrib(CodeEditorContribution)
+    codeEditorProvider: Contribution.Provider<CodeEditorContribution>,
+  ) {
+    this.codeEditorProvider = codeEditorProvider;
+  }
+
+  protected findCodeEditorProvider(model: IModel) {
+    const prioritized = Priority.sortSync(
+      this.codeEditorProvider.getContributions(),
+      (contribution) => contribution.canHandle(model.mimeType),
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0];
+  }
+
+  async getOrCreateEditorState(option: IEditorStateOptions): Promise<EditorState> {
+    if (this.stateCache.has(option.uuid)) {
+      const state = this.stateCache.get(option.uuid)!;
+      return state;
+    }
+    const factory = this.findCodeEditorProvider(option.model)?.stateFactory;
+    if (!factory) {
+      throw new Error(
+        `no code editor state factory registered for mimetype: ${option.model.mimeType}`,
+      );
+    }
+    const state = factory(option);
+    this.stateCache.set(option.uuid, state);
+    return state;
+  }
+
+  updateEditorState(id: string, state: EditorState) {
+    this.stateCache.set(id, state);
+  }
+
+  removeEditorState(id: string) {
+    this.stateCache.delete(id);
+  }
+}

package/src/code-editor-view.tsx

@@ -0,0 +1,434 @@
+import {
+  inject,
+  transient,
+  Emitter,
+  BaseView,
+  ThemeService,
+  view,
+  ViewOption,
+} from '@difizen/mana-app';
+import { forwardRef, memo } from 'react';
+
+import { CodeEditorInfoManager } from './code-editor-info-manager.js';
+import type { IModel } from './code-editor-model.js';
+import type {
+  CompletionProvider,
+  ICoordinate,
+  IEditorConfig,
+  IEditor,
+  IEditorSelectionStyle,
+  TooltipProvider,
+  CodeEditorFactory,
+} from './code-editor-protocol.js';
+import { CodeEditorSettings } from './code-editor-settings.js';
+import { CodeEditorStateManager } from './code-editor-state-manager.js';
+
+export const CodeEditorRender = memo(
+  forwardRef<HTMLDivElement>((props, ref) => {
+    return <div tabIndex={0} ref={ref} />;
+  }),
+);
+
+/**
+ * The class name added to an editor widget that has a primary selection.
+ */
+const HAS_SELECTION_CLASS = 'jp-mod-has-primary-selection';
+
+/**
+ * The class name added to an editor widget that has a cursor/selection
+ * within the whitespace at the beginning of a line
+ */
+const HAS_IN_LEADING_WHITESPACE_CLASS = 'jp-mod-in-leading-whitespace';
+
+/**
+ * A class used to indicate a drop target.
+ */
+const DROP_TARGET_CLASS = 'jp-mod-dropTarget';
+
+/**
+ * RegExp to test for leading whitespace
+ */
+const leadingWhitespaceRe = /^\s+$/;
+
+export type CodeEditorViewStatus = 'init' | 'ready' | 'disposed';
+
+/**
+ * A widget which hosts a code editor.
+ */
+@transient()
+@view('code-editor-view')
+export class CodeEditorView extends BaseView {
+  @inject(ThemeService) protected readonly themeService: ThemeService;
+  @inject(CodeEditorSettings) protected readonly codeEditorSettings: CodeEditorSettings;
+  @inject(CodeEditorStateManager)
+  protected readonly codeEditorStateManager: CodeEditorStateManager;
+
+  codeEditorInfoManager: CodeEditorInfoManager;
+
+  override view = CodeEditorRender;
+
+  protected classlist: string[] = [];
+
+  protected options: CodeEditorViewOptions;
+
+  protected modalChangeEmitter = new Emitter();
+
+  protected editorHostRef: React.RefObject<HTMLDivElement> | null | undefined;
+
+  get onModalChange() {
+    return this.modalChangeEmitter.event;
+  }
+
+  /**
+   * Get the editor wrapped by the widget.
+   */
+  editor: IEditor;
+
+  editorStatus: CodeEditorViewStatus = 'init';
+
+  protected editorStatusChangeEmitter = new Emitter<{
+    status: CodeEditorViewStatus;
+    prevState: CodeEditorViewStatus;
+  }>();
+  onEditorStatusChange = this.editorStatusChangeEmitter.event;
+
+  /**
+   * Construct a new code editor widget.
+   */
+  constructor(
+    @inject(ViewOption) options: CodeEditorViewOptions,
+    @inject(CodeEditorInfoManager) codeEditorInfoManager: CodeEditorInfoManager,
+  ) {
+    super();
+    this.options = options;
+    this.codeEditorInfoManager = codeEditorInfoManager;
+  }
+
+  protected getEditorHost() {
+    const editorHostId = this.options.editorHostId;
+    const editorHostRef = editorHostId
+      ? this.codeEditorInfoManager.getEditorHostRef(editorHostId)
+      : undefined;
+
+    return editorHostRef && editorHostRef.current ? editorHostRef : this.container;
+  }
+
+  override async onViewMount() {
+    const state = await this.codeEditorStateManager.getOrCreateEditorState({
+      uuid: this.options.uuid,
+      model: this.options.model,
+    });
+
+    const settings = this.codeEditorSettings.getUserEditorSettings();
+
+    this.editorHostRef = this.getEditorHost();
+
+    if (this.editorHostRef?.current && this.options.factory) {
+      this.editor = this.options.factory(
+        {
+          ...this.options,
+          host: this.editorHostRef.current,
+          model: this.options.model,
+          uuid: this.options.uuid,
+          config: { ...settings, ...this.options.config },
+          selectionStyle: this.options.selectionStyle,
+          tooltipProvider: this.options.tooltipProvider,
+          completionProvider: this.options.completionProvider,
+        },
+        state,
+      );
+
+      await this.editor.editorReady;
+
+      const { cursorPosition, selections } = state;
+
+      const prevState = this.editorStatus;
+      this.editorStatus = 'ready';
+      this.editorStatusChangeEmitter.fire({ status: 'ready', prevState: prevState });
+
+      if (cursorPosition) {
+        this.editor.setCursorPosition(cursorPosition);
+      }
+      if (selections) {
+        this.editor.setSelections(selections);
+      }
+
+      this.editor.onModalChange((val) => this.modalChangeEmitter.fire(val));
+      // this.editor.model.selections.changed(this._onSelectionsChanged);
+
+      if (this.options.autoFocus) {
+        this.editor.focus();
+      }
+
+      if (!this.editorHostRef.current) {
+        return;
+      }
+
+      this.editorHostRef.current.addEventListener('focus', this.onViewActive);
+      this.editorHostRef.current.addEventListener('dragenter', this._evtDragEnter);
+      this.editorHostRef.current.addEventListener('dragleave', this._evtDragLeave);
+      this.editorHostRef.current.addEventListener('dragover', this._evtDragOver);
+      this.editorHostRef.current.addEventListener('drop', this._evtDrop);
+
+      this.toDispose.push(
+        this.codeEditorSettings.onCodeEditorSettingsChange((e) => {
+          this.editor.setOption(e.key, e.value);
+        }),
+      );
+    }
+  }
+
+  removeChildNodes = (parent: any) => {
+    while (parent.firstChild) {
+      parent.removeChild(parent.firstChild);
+    }
+  };
+
+  override onViewUnmount = () => {
+    if (this.editor.hasFocus()) {
+      // 保存编辑器状态
+      const editorState = this.editor.getState();
+      this.codeEditorStateManager.updateEditorState(this.options.uuid, editorState);
+      // focus 到 host 避免进入命令模式
+      this.editorHostRef = this.getEditorHost();
+      this.editorHostRef?.current?.focus();
+    }
+    this.editor.dispose();
+
+    const prevState = this.editorStatus;
+    this.editorStatus = 'disposed';
+    this.editorStatusChangeEmitter.fire({ status: 'disposed', prevState: prevState });
+
+    const node = this.editorHostRef?.current;
+    if (node) {
+      node.removeEventListener('focus', this.onViewActive);
+      node.removeEventListener('dragenter', this._evtDragEnter);
+      node.removeEventListener('dragleave', this._evtDragLeave);
+      node.removeEventListener('dragover', this._evtDragOver);
+      node.removeEventListener('drop', this._evtDrop);
+
+      this.removeChildNodes(node);
+    }
+  };
+
+  override onViewResize() {
+    this.editor?.resizeToFit();
+  }
+
+  /**
+   * Get the model used by the widget.
+   */
+  get model(): IModel {
+    return this.editor.model;
+  }
+
+  /**
+   * Dispose of the resources held by the widget.
+   */
+  override dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    super.dispose();
+    this.editor.dispose();
+  }
+
+  protected onViewActive = (): void => {
+    this.editor.focus();
+  };
+
+  /**
+   * A message handler invoked on a `'resize'` message.
+   */
+  protected onResize(): void {
+    if (this.isVisible) {
+      this.editor.resizeToFit();
+    }
+  }
+
+  addClass(classname: string) {
+    this.classlist.push(classname);
+  }
+
+  removeClass(classname: string) {
+    const index = this.classlist.indexOf(classname);
+    if (index >= 0) {
+      this.classlist.splice(index, 1);
+    }
+  }
+
+  /**
+   * Handle a change in model selections.
+   */
+  protected _onSelectionsChanged(): void {
+    const { start, end } = this.editor.getSelection();
+
+    if (start.column !== end.column || start.line !== end.line) {
+      // a selection was made
+      this.addClass(HAS_SELECTION_CLASS);
+      this.removeClass(HAS_IN_LEADING_WHITESPACE_CLASS);
+    } else {
+      // the cursor was placed
+      this.removeClass(HAS_SELECTION_CLASS);
+
+      if (
+        this.editor.getLine(end.line)!.slice(0, end.column).match(leadingWhitespaceRe)
+      ) {
+        this.addClass(HAS_IN_LEADING_WHITESPACE_CLASS);
+      } else {
+        this.removeClass(HAS_IN_LEADING_WHITESPACE_CLASS);
+      }
+    }
+  }
+
+  /**
+   * Handle the `'lm-dragenter'` event for the widget.
+   */
+  protected _evtDragEnter = (event: DragEvent): void => {
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
+    const data = findTextData(event);
+    if (data === undefined) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.addClass('jp-mod-dropTarget');
+  };
+
+  /**
+   * Handle the `'lm-dragleave'` event for the widget.
+   */
+  protected _evtDragLeave = (event: DragEvent): void => {
+    this.removeClass(DROP_TARGET_CLASS);
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
+    const data = findTextData(event);
+    if (data === undefined) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  /**
+   * Handle the `'lm-dragover'` event for the widget.
+   */
+  protected _evtDragOver = (event: DragEvent): void => {
+    this.removeClass(DROP_TARGET_CLASS);
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
+    const data = findTextData(event);
+    if (data === undefined) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer!.dropEffect = 'copy';
+    this.addClass(DROP_TARGET_CLASS);
+  };
+
+  /**
+   * Handle the `'lm-drop'` event for the widget.
+   */
+  protected _evtDrop = (event: DragEvent): void => {
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
+    const data = findTextData(event);
+    if (data === undefined) {
+      return;
+    }
+    const coordinate = {
+      top: event.y,
+      bottom: event.y,
+      left: event.x,
+      right: event.x,
+      x: event.x,
+      y: event.y,
+      width: 0,
+      height: 0,
+    } as ICoordinate;
+    const position = this.editor.getPositionForCoordinate(coordinate);
+    if (position === null) {
+      return;
+    }
+    this.removeClass(DROP_TARGET_CLASS);
+    event.preventDefault();
+    event.stopPropagation();
+    // if (event.proposedAction === 'none') {
+    //   event.dropAction = 'none';
+    //   return;
+    // }
+    // const offset = this.editor.getOffsetAt(position);
+    // this.model.value.insert(offset, data);
+  };
+}
+
+/**
+ * The namespace for the `CodeEditorWrapper` statics.
+ */
+/**
+ * The options used to initialize a code editor widget.
+ */
+export interface CodeEditorViewOptions<Config extends IEditorConfig = IEditorConfig> {
+  /**
+   * A code editor factory.
+   *
+   * #### Notes
+   * The widget needs a factory and a model instead of a `CodeEditor.IEditor`
+   * object because it needs to provide its own node as the host.
+   */
+  factory?: CodeEditorFactory;
+
+  /**
+   * where to mount the editor
+   */
+  editorHostId?: string;
+
+  /**
+   * The model used to initialize the code editor.
+   */
+  model: IModel;
+
+  /**
+   * The desired uuid for the editor.
+   * editor share id with cell.
+   */
+  uuid: string;
+
+  /**
+   * The configuration options for the editor.
+   */
+  config?: Partial<Config>;
+
+  /**
+   * The default selection style for the editor.
+   */
+  selectionStyle?: IEditorSelectionStyle;
+
+  tooltipProvider?: TooltipProvider;
+  completionProvider?: CompletionProvider;
+
+  autoFocus?: boolean;
+
+  [key: string]: any;
+}
+
+/**
+ * Given a MimeData instance, extract the first text data, if any.
+ */
+function findTextData(event: DragEvent): string | undefined {
+  const items = event.dataTransfer?.items;
+  if (!items) {
+    return;
+  }
+  const textTypeItem = Array.from(items).find((t) => t.type.indexOf('text') === 0);
+  if (textTypeItem === undefined) {
+    return undefined;
+  }
+  return event.dataTransfer.getData(textTypeItem.type);
+}

package/src/index.spec.ts

@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+import assert from 'assert';
+
+import { CodeEditorView } from './index.js';
+
+describe('libro-code-editor', () => {
+  it('#import', () => {
+    assert(CodeEditorView);
+  });
+});