@opensumi/ide-editor 2.21.13 → 2.22.0

package/src/browser/view/editor.react.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { URI, useInjectable } from '@opensumi/ide-core-browser';
+
+import { EditorCollectionService, ICodeEditor } from '../../common';
+import { IEditorDocumentModelService, IEditorDocumentModelRef } from '../doc-model/types';
+
+export interface ICodeEditorProps extends React.HTMLAttributes<HTMLDivElement> {
+  uri?: URI;
+
+  options?: any;
+
+  editorRef?: (editor: ICodeEditor | undefined) => void;
+}
+
+export const CodeEditor = (props: ICodeEditorProps) => {
+  const container = React.useRef<HTMLDivElement>();
+  const editorCollectionService: EditorCollectionService = useInjectable(EditorCollectionService);
+  const documentService: IEditorDocumentModelService = useInjectable(IEditorDocumentModelService);
+  const [editor, setEditor] = React.useState<ICodeEditor | undefined>(undefined);
+  const [documentModelRef, setDocumentModelRef] = React.useState<IEditorDocumentModelRef | undefined>(undefined);
+  const [uri, setUri] = React.useState<string | undefined>(undefined);
+  const [fetchingUri, setFetchingUri] = React.useState<string | undefined>(undefined);
+  let canceled = false;
+
+  React.useEffect(() => {
+    if (container.current) {
+      if (editor) {
+        editor.dispose();
+      }
+      const e = editorCollectionService.createCodeEditor(container.current, {
+        automaticLayout: true,
+        ...props.options,
+      });
+      setEditor(e);
+      if (documentModelRef) {
+        e.open(documentModelRef);
+      }
+    }
+    return () => {
+      canceled = true;
+      if (editor) {
+        editor.dispose();
+      }
+      if (documentModelRef) {
+        documentModelRef.dispose();
+      }
+    };
+  }, [container.current]);
+
+  if (props && editor && props.editorRef) {
+    props.editorRef(editor);
+  }
+
+  if (uri) {
+    if (fetchingUri !== uri) {
+      setFetchingUri(uri);
+      documentService.createModelReference(new URI(uri), 'editor-react-component').then((ref) => {
+        if (documentModelRef) {
+          documentModelRef.dispose();
+        }
+        if (!canceled && ref.instance.uri.toString() === uri) {
+          setDocumentModelRef(ref);
+        } else {
+          ref.dispose();
+        }
+      });
+    }
+  }
+
+  if (documentModelRef) {
+    if (editor && editor.currentDocumentModel !== documentModelRef.instance) {
+      editor.open(documentModelRef);
+    }
+  }
+
+  if (props.uri && props.uri.toString() !== uri) {
+    setUri(props.uri.toString());
+  }
+
+  return <div ref={(el) => el && (container.current = el)} {...props}></div>;
+};

package/src/browser/view/react-hook.tsx

@@ -0,0 +1,7 @@
+import { useUpdateOnEvent } from '@opensumi/ide-core-browser';
+
+import { EditorGroup } from '../workbench-editor.service';
+
+export function useUpdateOnGroupTabChange(editorGroup: EditorGroup) {
+  return useUpdateOnEvent(editorGroup.onDidEditorGroupTabChanged, [editorGroup]);
+}

package/src/browser/view/suggest-widget.ts

@@ -0,0 +1,77 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import { PreferenceService } from '@opensumi/ide-core-browser';
+import { SuggestEvent, DisposableCollection } from '@opensumi/ide-core-browser';
+import { IEventBus } from '@opensumi/ide-core-common';
+import { SuggestController } from '@opensumi/monaco-editor-core/esm/vs/editor/contrib/suggest/browser/suggestController';
+
+import { IEditor } from '../../common';
+import { IEditorFeatureContribution } from '../types';
+
+@Injectable()
+export class EditorSuggestWidgetContribution implements IEditorFeatureContribution {
+  @Autowired(IEventBus)
+  private readonly eventBus: IEventBus;
+
+  @Autowired(PreferenceService)
+  protected readonly preferenceService: PreferenceService;
+
+  contribute(editor: IEditor) {
+    const disposable = new DisposableCollection();
+    const suggestController = editor.monacoEditor.getContribution<SuggestController>(SuggestController.ID);
+    if (suggestController && suggestController.widget && suggestController.widget.value) {
+      const suggestWidget = suggestController.widget.value;
+      // FIXME: 仅通过鼠标选中会走onDidSelect事件，键盘会过acceptSelectedSuggestionOnEnter这个command
+      disposable.push(
+        suggestWidget.onDidSelect((e) => {
+          this.eventBus.fire(
+            new SuggestEvent({
+              eventType: 'onDidSelect',
+              data: e,
+            }),
+          );
+        }),
+      );
+      disposable.push(
+        suggestWidget.onDidHide((e) => {
+          this.eventBus.fire(
+            new SuggestEvent({
+              eventType: 'onDidHide',
+              data: e,
+            }),
+          );
+        }),
+      );
+      disposable.push(
+        suggestWidget.onDidShow((e) => {
+          this.eventBus.fire(
+            new SuggestEvent({
+              eventType: 'onDidShow',
+              data: e,
+            }),
+          );
+        }),
+      );
+      disposable.push(
+        suggestWidget.onDidFocus((e) => {
+          this.eventBus.fire(
+            new SuggestEvent({
+              eventType: 'onDidFocus',
+              data: e,
+            }),
+          );
+        }),
+      );
+
+      /**
+       * 控制 suggestController 的默认行为，如 `suggest details 默认展开`
+       */
+      // @ts-ignore
+      if (suggestWidget && suggestWidget._setDetailsVisible) {
+        // @ts-ignore
+        suggestWidget._setDetailsVisible(this.preferenceService.get('editor.suggest.details.visible', true));
+      }
+    }
+
+    return disposable;
+  }
+}

package/src/browser/view/topPadding.ts

@@ -0,0 +1,18 @@
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import { IEditor } from '../../common';
+import { IEditorFeatureContribution } from '../types';
+
+export class EditorTopPaddingContribution implements IEditorFeatureContribution {
+  contribute(editor: IEditor) {
+    return editor.monacoEditor.onDidChangeModel(() => {
+      editor.monacoEditor.changeViewZones((accessor: monaco.editor.IViewZoneChangeAccessor) => {
+        accessor.addZone({
+          afterLineNumber: 0,
+          domNode: document.createElement('div'),
+          heightInPx: 0,
+        });
+      });
+    });
+  }
+}