@difizen/libro-code-editor 0.1.1 → 0.1.2

package/src/{code-editor.ts → code-editor-protocol.ts}

@@ -1,50 +1,19 @@
 import type { JSONObject } from '@difizen/libro-common';
-import type { Disposable, Event } from '@difizen/mana-app';
-import type {
-  DidChangeConfigurationParams,
-  ServerCapabilities,
-} from 'vscode-languageserver-protocol';
+import type { Disposable, Event, ThemeType } from '@difizen/mana-app';
 
-import type { IModel } from './model.js';
+import type { IModel } from './code-editor-model.js';
 
 /**
- * Code editor accessor.
- */
-export interface ILSPEditor {
-  /**
-   * CodeEditor getter.
-   *
-   * It will return `null` if the editor is not yet instantiated;
-   * e.g. to support windowed notebook.
-   */
-  getEditor(): IEditor | null;
-
-  /**
-   * Promise getter that resolved when the editor is instantiated.
-   */
-  ready(): Promise<IEditor>;
-
-  /**
-   * Reveal the code editor in viewport.
-   *
-   * ### Notes
-   * The promise will resolve when the editor is instantiated and in
-   * the viewport.
-   */
-  reveal(): Promise<IEditor>;
-}
-
-/**
- * A zero-based position in the editor.
+ * A one-based position in the editor.
  */
 export interface IPosition extends JSONObject {
   /**
-   * The cursor line number.
+   * The cursor line number. one-based.
    */
   readonly line: number;
 
   /**
-   * The cursor column number.
+   * The cursor column number. one-based.
    */
   readonly column: number;
 }
@@ -148,6 +117,11 @@ export interface ISelectionOwner {
    */
   uuid: string;
 
+  /**
+   * Return selection value, if no range, return primary position value
+   */
+  getSelectionValue: (range?: IRange) => string | undefined;
+
   /**
    * Returns the primary position of the cursor, never `null`.
    */
@@ -194,6 +168,23 @@ export interface ISelectionOwner {
    * document.
    */
   setSelections: (selections: IRange[]) => void;
+
+  /**
+   * Replaces selection with the given text.
+   */
+  replaceSelection: (text: string, range: IRange) => void;
+
+  /**
+   * Replaces selection with the given text.
+   */
+  replaceSelections: (edits: { text: string; range: IRange }[]) => void;
+
+  /**
+   * highlight search matches
+   * @param matches
+   * @param currentIndex
+   */
+  highlightMatches: (matches: SearchMatch[], currentIndex: number | undefined) => void;
 }
 
 /**
@@ -274,13 +265,13 @@ export interface IEditor extends ISelectionOwner, Disposable {
    * @returns The value of the line.
    *
    * #### Notes
-   * Lines are 0-based, and accessing a line out of range returns
+   * Lines are 1-based, and accessing a line out of range returns
    * `undefined`.
    */
   getLine: (line: number) => string | undefined;
 
   /**
-   * Find an offset for the given position.
+   * Find an zero-based offset for the given position.
    *
    * @param position - The position of interest.
    *
@@ -289,15 +280,15 @@ export interface IEditor extends ISelectionOwner, Disposable {
    */
   getOffsetAt: (position: IPosition) => number;
 
-  // /**
-  //  * Find a position for the given offset.
-  //  *
-  //  * @param offset - The offset of interest.
-  //  *
-  //  * @returns The position at the offset, clamped to the extent of the
-  //  * editor contents.
-  //  */
-  // getPositionAt: (offset: number) => IPosition | undefined;
+  /**
+   * Find a position for the given offset.
+   *
+   * @param offset - The offset of interest.
+   *
+   * @returns The position at the offset, clamped to the extent of the
+   * editor contents.
+   */
+  getPositionAt: (offset: number) => IPosition | undefined;
 
   /**
    * Undo one edit (if any undo events are stored).
@@ -334,6 +325,38 @@ export interface IEditor extends ISelectionOwner, Disposable {
    */
   resizeToFit: () => void;
 
+  // /**
+  //  * Add a keydown handler to the editor.
+  //  *
+  //  * @param handler - A keydown handler.
+  //  *
+  //  * @returns A disposable that can be used to remove the handler.
+  //  */
+  // addKeydownHandler: (handler: KeydownHandler) => Disposable;
+
+  // /**
+  //  * Reveals the given position in the editor.
+  //  *
+  //  * @param position - The desired position to reveal.
+  //  */
+  // revealPosition: (position: IPosition) => void;
+
+  /**
+   * Reveals the given selection in the editor.
+   *
+   * @param position - The desired selection to reveal.
+   */
+  revealSelection: (selection: IRange) => void;
+
+  // /**
+  //  * Get the window coordinates given a cursor position.
+  //  *
+  //  * @param position - The desired position.
+  //  *
+  //  * @returns The coordinates of the position.
+  //  */
+  // getCoordinateForPosition: (position: IPosition) => ICoordinate;
+
   /**
    * Get the cursor position given window coordinates.
    *
@@ -344,18 +367,38 @@ export interface IEditor extends ISelectionOwner, Disposable {
    */
   getPositionForCoordinate: (coordinate: ICoordinate) => IPosition | null;
 
+  // /**
+  //  * Get a list of tokens for the current editor text content.
+  //  */
+  // getTokens: () => IToken[];
+
+  // /**
+  //  * Get the token at a given editor position.
+  //  */
+  // getTokenAt: (offset: number) => IToken;
+
+  // /**
+  //  * Get the token a the cursor position.
+  //  */
+  // getTokenAtCursor: () => IToken;
+
+  // /**
+  //  * Inserts a new line at the cursor position and indents it.
+  //  */
+  // newIndentedLine: () => void;
+
   onModalChange: Event<boolean>;
+
+  dispose: () => void;
 }
 
-/**
- * A factory used to create a code editor.
- */
-export type CodeEditorFactory = (options: IEditorOptions) => IEditor;
+export type EditorTheme = Record<ThemeType, string>;
 
 /**
  * The configuration options for an editor.
  */
 export interface IEditorConfig {
+  theme: EditorTheme;
   /**
    * Half-period in milliseconds used for cursor blinking.
    * By setting this to zero, blinking can be disabled.
@@ -454,22 +497,35 @@ export interface IEditorConfig {
   highlightActiveLineGutter?: boolean;
 
   placeholder?: HTMLElement | string;
+
+  lspEnabled: boolean;
+
+  paddingTop: number;
+
+  paddingBottom: number;
+
+  scrollBarHeight: number;
 }
 
 /**
  * The default configuration options for an editor.
  */
-export const defaultConfig: IEditorConfig = {
+export const defaultConfig: Required<IEditorConfig> = {
+  theme: {
+    light: 'light',
+    dark: 'dark',
+    hc: 'hc-mana',
+  },
   // Order matters as gutters will be sorted by the configuration order
   autoClosingBrackets: true,
   cursorBlinkRate: 530,
   fontFamily: null,
-  fontSize: null,
+  fontSize: 13,
   handlePaste: true,
   insertSpaces: true,
   lineHeight: null,
   lineNumbers: true,
-  lineWrap: 'on',
+  lineWrap: 'off',
   matchBrackets: true,
   readOnly: false,
   editable: true,
@@ -477,10 +533,15 @@ export const defaultConfig: IEditorConfig = {
   rulers: [],
   showTrailingSpace: false,
   wordWrapColumn: 80,
-  codeFolding: false,
+  codeFolding: true,
   foldGutter: true,
   styleActiveLine: false,
   highlightActiveLineGutter: false,
+  lspEnabled: true,
+  paddingTop: 12,
+  paddingBottom: 18,
+  scrollBarHeight: 0,
+  placeholder: '',
 };
 
 export type TooltipProviderOption = { cursorPosition: number };
@@ -498,134 +559,6 @@ export type CompletionProvider = (
   option: CompletionProviderOption,
 ) => Promise<CompletionReply>;
 
-export type LSPProviderResult = {
-  virtualDocument: IVirtualDocument;
-  lspConnection: ILspConnection;
-  editor: ILSPEditor;
-};
-
-export type LSPProvider = () => Promise<LSPProviderResult>;
-
-export interface Position {
-  /**
-   * Line number
-   */
-  line: number;
-
-  /**
-   * Position of character in line
-   */
-  ch: number;
-}
-
-/**
- * is_* attributes are there only to enforce strict interface type checking
- */
-export interface ISourcePosition extends Position {
-  isSource: true;
-}
-
-export interface IEditorPosition extends Position {
-  isEditor: true;
-}
-
-export interface IVirtualPosition extends Position {
-  isVirtual: true;
-}
-
-export interface IRootPosition extends ISourcePosition {
-  isRoot: true;
-}
-export interface IVirtualDocument {
-  uri: string;
-
-  /**
-   * Get the corresponding editor of the virtual line.
-   */
-  getEditorAtVirtualLine: (pos: IVirtualPosition) => ILSPEditor;
-  transformEditorToVirtual: (
-    editor: ILSPEditor,
-    position: IEditorPosition,
-  ) => IVirtualPosition | null;
-  ttransformVirtualToEditor: (
-    virtualPosition: IVirtualPosition,
-  ) => IEditorPosition | null;
-}
-
-export interface IDocumentInfo {
-  /**
-   * URI of the virtual document.
-   */
-  uri: string;
-
-  /**
-   * Version of the virtual document.
-   */
-  version: number;
-
-  /**
-   * Text content of the document.
-   */
-  text: string;
-
-  /**
-   * Language id of the document.
-   */
-  languageId: string;
-}
-export interface ILspConnection {
-  /**
-   * Is the language server is connected?
-   */
-  isConnected: boolean;
-  /**
-   * Is the language server is initialized?
-   */
-  isInitialized: boolean;
-
-  /**
-   * Is the language server is connected and initialized?
-   */
-  isReady: boolean;
-
-  /**
-   * Initialize a connection over a web socket that speaks the LSP protocol
-   */
-  connect(socket: WebSocket): void;
-
-  /**
-   * Close the connection
-   */
-  close(): void;
-
-  // This should support every method from https://microsoft.github.io/language-server-protocol/specification
-  /**
-   * The initialize request tells the server which options the client supports
-   */
-  sendInitialize(): void;
-  /**
-   * Inform the server that the document was opened
-   */
-  sendOpen(documentInfo: IDocumentInfo): void;
-
-  /**
-   * Sends the full text of the document to the server
-   */
-  sendChange(documentInfo: IDocumentInfo): void;
-
-  /**
-   * Send save notification to the server.
-   */
-  sendSaved(documentInfo: IDocumentInfo): void;
-
-  /**
-   * Send configuration change to the server.
-   */
-  sendConfigurationChange(settings: DidChangeConfigurationParams): void;
-
-  provides(provider: keyof ServerCapabilities): boolean;
-}
-
 /**
  * The options used to initialize an editor.
  */
@@ -643,17 +576,17 @@ export interface IEditorOptions {
   /**
    * The desired uuid for the editor.
    */
-  uuid?: string | undefined;
+  uuid?: string;
 
   /**
    * The default selection style for the editor.
    */
-  selectionStyle?: Partial<IEditorSelectionStyle> | undefined;
+  selectionStyle?: Partial<IEditorSelectionStyle>;
 
   /**
    * The configuration options for the editor.
    */
-  config?: Partial<IEditorConfig> | undefined;
+  config?: Partial<IEditorConfig>;
 
   // /**
   //  * The configuration options for the editor.
@@ -661,7 +594,21 @@ export interface IEditorOptions {
   // translator?: ITranslator;
 
   //
-  tooltipProvider?: TooltipProvider | undefined;
-  completionProvider?: CompletionProvider | undefined;
-  lspProvider?: LSPProvider | undefined;
+  tooltipProvider?: TooltipProvider;
+  completionProvider?: CompletionProvider;
+}
+
+/**
+ * Base search match interface
+ */
+export interface SearchMatch {
+  /**
+   * Text of the exact match itself
+   */
+  readonly text: string;
+
+  /**
+   * Start location of the match (in a text, this is the column)
+   */
+  position: number;
 }

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提示、格式化、代码跳转、重命名等等(需要使用带有lsp服务的容器， 详情请咨询 @沧浪)',
+  ),
+  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;
+  }
+}