@opensumi/ide-editor 3.3.1-next-1725432779.0 → 3.3.1-next-1725433243.0

package/lib/common/notebook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/common/notebook.ts"],"names":[],"mappings":"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"}

package/lib/common/notebook.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notebookCellScheme = exports.INotebookService = exports.CellKind = exports.NotebookCellsChangeType = void 0;
+var NotebookCellsChangeType;
+(function (NotebookCellsChangeType) {
+    NotebookCellsChangeType[NotebookCellsChangeType["ModelChange"] = 1] = "ModelChange";
+    NotebookCellsChangeType[NotebookCellsChangeType["Move"] = 2] = "Move";
+    NotebookCellsChangeType[NotebookCellsChangeType["ChangeCellLanguage"] = 5] = "ChangeCellLanguage";
+    NotebookCellsChangeType[NotebookCellsChangeType["Initialize"] = 6] = "Initialize";
+    NotebookCellsChangeType[NotebookCellsChangeType["ChangeCellMetadata"] = 7] = "ChangeCellMetadata";
+    NotebookCellsChangeType[NotebookCellsChangeType["Output"] = 8] = "Output";
+    NotebookCellsChangeType[NotebookCellsChangeType["OutputItem"] = 9] = "OutputItem";
+    NotebookCellsChangeType[NotebookCellsChangeType["ChangeCellContent"] = 10] = "ChangeCellContent";
+    NotebookCellsChangeType[NotebookCellsChangeType["ChangeDocumentMetadata"] = 11] = "ChangeDocumentMetadata";
+    NotebookCellsChangeType[NotebookCellsChangeType["ChangeCellInternalMetadata"] = 12] = "ChangeCellInternalMetadata";
+    NotebookCellsChangeType[NotebookCellsChangeType["ChangeCellMime"] = 13] = "ChangeCellMime";
+    NotebookCellsChangeType[NotebookCellsChangeType["Unknown"] = 100] = "Unknown";
+})(NotebookCellsChangeType = exports.NotebookCellsChangeType || (exports.NotebookCellsChangeType = {}));
+var CellKind;
+(function (CellKind) {
+    CellKind[CellKind["Markup"] = 1] = "Markup";
+    CellKind[CellKind["Code"] = 2] = "Code";
+})(CellKind = exports.CellKind || (exports.CellKind = {}));
+exports.INotebookService = Symbol('INotebookService');
+exports.notebookCellScheme = 'vscode-notebook-cell';
+//# sourceMappingURL=notebook.js.map

package/lib/common/notebook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notebook.js","sourceRoot":"","sources":["../../src/common/notebook.ts"],"names":[],"mappings":";;;AAEA,IAAY,uBAaX;AAbD,WAAY,uBAAuB;IACjC,mFAAe,CAAA;IACf,qEAAQ,CAAA;IACR,iGAAsB,CAAA;IACtB,iFAAc,CAAA;IACd,iGAAsB,CAAA;IACtB,yEAAU,CAAA;IACV,iFAAc,CAAA;IACd,gGAAsB,CAAA;IACtB,0GAA2B,CAAA;IAC3B,kHAA+B,CAAA;IAC/B,0FAAmB,CAAA;IACnB,6EAAa,CAAA;AACf,CAAC,EAbW,uBAAuB,GAAvB,+BAAuB,KAAvB,+BAAuB,QAalC;AAmBD,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,2CAAU,CAAA;IACV,uCAAQ,CAAA;AACV,CAAC,EAHW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAGnB;AAiJY,QAAA,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAa9C,QAAA,kBAAkB,GAAG,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-editor",
-  "version": "3.3.1-next-1725432779.0",
+  "version": "3.3.1-next-1725433243.0",
   "files": [
     "lib",
     "src"
@@ -17,21 +17,21 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-core-common": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-core-node": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-file-service": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-monaco": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-utils": "3.3.1-next-1725432779.0",
+    "@opensumi/ide-core-common": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-core-node": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-file-service": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-monaco": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-utils": "3.3.1-next-1725433243.0",
     "vscode-oniguruma": "1.5.1"
   },
   "devDependencies": {
-    "@opensumi/ide-components": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-core-browser": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-dev-tool": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-overlay": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-quick-open": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-theme": "3.3.1-next-1725432779.0",
-    "@opensumi/ide-workspace": "3.3.1-next-1725432779.0"
+    "@opensumi/ide-components": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-core-browser": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-dev-tool": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-overlay": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-quick-open": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-theme": "3.3.1-next-1725433243.0",
+    "@opensumi/ide-workspace": "3.3.1-next-1725433243.0"
   },
-  "gitHead": "09d64abea23087b5bcbcb2a1853143c6c6539b05"
+  "gitHead": "76cbd0614c78862e45f0a908727ca9f9561a6482"
 }

package/src/browser/editor-collection.service.ts

@@ -799,8 +799,8 @@ export class BrowserDiffEditor extends WithEventBus implements IDiffEditor {
     ];
   }
 
-  layout(dimension?: monaco.IDimension, postponeRendering?: boolean) {
-    return this.monacoDiffEditor.layout(dimension, postponeRendering);
+  layout(): void {
+    return this.monacoDiffEditor.layout();
   }
 
   focus(): void {

package/src/browser/editor.module.less

@@ -19,6 +19,7 @@
 }
 
 .kt_editor_components {
+  height: 0;
   flex-grow: 1;
 }
 

package/src/browser/editor.view.tsx

@@ -1,7 +1,8 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom/client';
+import ReactIs from 'react-is';
 
 import { Scrollbars } from '@opensumi/ide-components';
 import {
@@ -281,6 +282,7 @@ export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
 
   return (
     <div
+      ref={groupWrapperRef as any}
       className={styles_kt_editor_group}
       tabIndex={1}
       onFocus={(e) => {
@@ -292,7 +294,7 @@ export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
           <Tabs group={group} />
         </div>
       )}
-      <EditorGroupBody ref={groupWrapperRef as any} group={group} />
+      <EditorGroupBody group={group} />
       {isEmpty && (
         <div
           className={styles.kt_editor_background}
@@ -307,201 +309,190 @@ export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
   );
 });
 
-export const EditorGroupBody = observer(
-  forwardRef(({ group }: { group: EditorGroup }, ref) => {
-    const [context, setContext] = React.useState<IEditorContext>(defaultEditorContext);
-
-    const editorBodyRef = React.useRef<HTMLDivElement | null>(null);
-    const editorService = useInjectable(WorkbenchEditorService) as WorkbenchEditorServiceImpl;
-    const eventBus = useInjectable(IEventBus) as IEventBus;
-    const styles_kt_editor_component = useDesignStyles(styles.kt_editor_component, 'kt_editor_component');
-    const components: React.ReactNode[] = [];
-    const codeEditorRef = React.useRef<HTMLDivElement>(null);
-    const diffEditorRef = React.useRef<HTMLDivElement>(null);
-    const mergeEditorRef = React.useRef<HTMLDivElement>(null);
-    const [, updateState] = React.useState<any>();
-    const forceUpdate = React.useCallback(() => updateState({}), []);
-
-    React.useEffect(() => {
-      const disposables = new DisposableStore();
-
-      disposables.add(
-        group.onDidEditorGroupBodyChanged(() => {
-          forceUpdate();
-        }),
-      );
-
-      if (codeEditorRef.current) {
-        if (cachedEditor[group.name]) {
-          cachedEditor[group.name].remove();
-          codeEditorRef.current.appendChild(cachedEditor[group.name]);
-        } else {
-          const container = document.createElement('div');
-          codeEditorRef.current.appendChild(container);
-          cachedEditor[group.name] = container;
-          group.createEditor(container);
-          const minimapWith = group.codeEditor.monacoEditor.getOption(monaco.editor.EditorOption.layoutInfo).minimap
-            .minimapWidth;
-          setContext({ minimapWidth: minimapWith });
-
-          disposables.add(
-            group.codeEditor.monacoEditor.onDidChangeConfiguration((e) => {
-              if (e.hasChanged(monaco.editor.EditorOption.layoutInfo)) {
-                setContext({
-                  minimapWidth: group.codeEditor.monacoEditor.getOption(monaco.editor.EditorOption.layoutInfo).minimap
-                    .minimapWidth,
-                });
-              }
-            }),
-          );
-        }
-      }
+export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
+  const [context, setContext] = React.useState<IEditorContext>(defaultEditorContext);
 
-      if (diffEditorRef.current) {
-        group.attachDiffEditorDom(diffEditorRef.current);
-      }
-      if (mergeEditorRef.current) {
-        group.attachMergeEditorDom(mergeEditorRef.current);
-      }
-
-      return () => {
-        disposables.dispose();
-      };
-    }, []);
+  const editorBodyRef = React.useRef<HTMLDivElement>(null);
+  const editorService = useInjectable(WorkbenchEditorService) as WorkbenchEditorServiceImpl;
+  const eventBus = useInjectable(IEventBus) as IEventBus;
+  const styles_kt_editor_component = useDesignStyles(styles.kt_editor_component, 'kt_editor_component');
+  const components: React.ReactNode[] = [];
+  const codeEditorRef = React.useRef<HTMLDivElement>(null);
+  const diffEditorRef = React.useRef<HTMLDivElement>(null);
+  const mergeEditorRef = React.useRef<HTMLDivElement>(null);
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
 
-    group.activeComponents.forEach((resources, component) => {
-      const initialProps = group.activateComponentsProps.get(component);
-      components.push(
-        <div
-          key={component.uid}
-          className={cls({
-            [styles.kt_hidden]: !(group.currentOpenType && group.currentOpenType.componentId === component.uid),
-          })}
-        >
-          <ComponentsWrapper
-            key={component.uid}
-            component={component}
-            {...initialProps}
-            resources={resources}
-            current={group.currentResource}
-          ></ComponentsWrapper>
-        </div>,
-      );
-    });
+  React.useEffect(() => {
+    const disposables = new DisposableStore();
 
-    const editorHasNoTab = React.useMemo(
-      () => group.resources.length === 0 || !group.currentResource,
-      [group.resources.length, group.currentResource],
+    disposables.add(
+      group.onDidEditorGroupBodyChanged(() => {
+        forceUpdate();
+      }),
     );
 
-    React.useEffect(() => {
-      if (group.currentOpenType?.type === EditorOpenType.code) {
-        eventBus.fire(
-          new CodeEditorDidVisibleEvent({
-            groupName: group.name,
-            type: EditorOpenType.code,
-            editorId: group.codeEditor.getId(),
-          }),
-        );
-      } else if (group.currentOpenType?.type === EditorOpenType.diff) {
-        eventBus.fire(
-          new CodeEditorDidVisibleEvent({
-            groupName: group.name,
-            type: EditorOpenType.diff,
-            editorId: group.diffEditor.modifiedEditor.getId(),
+    if (codeEditorRef.current) {
+      if (cachedEditor[group.name]) {
+        cachedEditor[group.name].remove();
+        codeEditorRef.current.appendChild(cachedEditor[group.name]);
+      } else {
+        const container = document.createElement('div');
+        codeEditorRef.current.appendChild(container);
+        cachedEditor[group.name] = container;
+        group.createEditor(container);
+        const minimapWith = group.codeEditor.monacoEditor.getOption(monaco.editor.EditorOption.layoutInfo).minimap
+          .minimapWidth;
+        setContext({ minimapWidth: minimapWith });
+
+        disposables.add(
+          group.codeEditor.monacoEditor.onDidChangeConfiguration((e) => {
+            if (e.hasChanged(monaco.editor.EditorOption.layoutInfo)) {
+              setContext({
+                minimapWidth: group.codeEditor.monacoEditor.getOption(monaco.editor.EditorOption.layoutInfo).minimap
+                  .minimapWidth,
+              });
+            }
           }),
         );
       }
-    });
+    }
 
-    return (
-      <EditorContext.Provider value={context}>
-        <div
-          id={VIEW_CONTAINERS.EDITOR}
-          ref={(_ref) => {
-            editorBodyRef.current = _ref;
-            if (ref) {
-              if (typeof ref === 'function') {
-                ref(_ref);
-              } else {
-                ref.current = _ref;
+    if (diffEditorRef.current) {
+      group.attachDiffEditorDom(diffEditorRef.current);
+    }
+    if (mergeEditorRef.current) {
+      group.attachMergeEditorDom(mergeEditorRef.current);
+    }
+
+    return () => {
+      disposables.dispose();
+    };
+  }, []);
+
+  group.activeComponents.forEach((resources, component) => {
+    const initialProps = group.activateComponentsProps.get(component);
+    components.push(
+      <div
+        key={component.uid}
+        className={cls({
+          [styles.kt_hidden]: !(group.currentOpenType && group.currentOpenType.componentId === component.uid),
+        })}
+      >
+        <ComponentsWrapper
+          key={component.uid}
+          component={component}
+          {...initialProps}
+          resources={resources}
+          current={group.currentResource}
+        ></ComponentsWrapper>
+      </div>,
+    );
+  });
+
+  const editorHasNoTab = React.useMemo(
+    () => group.resources.length === 0 || !group.currentResource,
+    [group.resources.length, group.currentResource],
+  );
+
+  React.useEffect(() => {
+    if (group.currentOpenType?.type === EditorOpenType.code) {
+      eventBus.fire(
+        new CodeEditorDidVisibleEvent({
+          groupName: group.name,
+          type: EditorOpenType.code,
+          editorId: group.codeEditor.getId(),
+        }),
+      );
+    } else if (group.currentOpenType?.type === EditorOpenType.diff) {
+      eventBus.fire(
+        new CodeEditorDidVisibleEvent({
+          groupName: group.name,
+          type: EditorOpenType.diff,
+          editorId: group.diffEditor.modifiedEditor.getId(),
+        }),
+      );
+    }
+  });
+
+  return (
+    <EditorContext.Provider value={context}>
+      <div
+        id={VIEW_CONTAINERS.EDITOR}
+        ref={editorBodyRef}
+        className={styles.kt_editor_body}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (editorBodyRef.current) {
+            const position = getDragOverPosition(e.nativeEvent, editorBodyRef.current);
+            decorateDragOverElement(editorBodyRef.current, position);
+          }
+        }}
+        onDragLeave={(e) => {
+          if (editorBodyRef.current) {
+            removeDecorationDragOverElement(editorBodyRef.current);
+          }
+        }}
+        onDrop={(e) => {
+          if (editorBodyRef.current) {
+            removeDecorationDragOverElement(editorBodyRef.current);
+            if (e.dataTransfer.getData('uri')) {
+              const uri = new URI(e.dataTransfer.getData('uri'));
+              let sourceGroup: EditorGroup | undefined;
+              if (e.dataTransfer.getData('uri-source-group')) {
+                sourceGroup = editorService.getEditorGroup(e.dataTransfer.getData('uri-source-group'));
               }
+              group.dropUri(uri, getDragOverPosition(e.nativeEvent, editorBodyRef.current), sourceGroup);
             }
-          }}
-          className={styles.kt_editor_body}
-          onDragOver={(e) => {
-            e.preventDefault();
-            if (editorBodyRef.current) {
-              const position = getDragOverPosition(e.nativeEvent, editorBodyRef.current);
-              decorateDragOverElement(editorBodyRef.current, position);
-            }
-          }}
-          onDragLeave={(e) => {
-            if (editorBodyRef.current) {
-              removeDecorationDragOverElement(editorBodyRef.current);
-            }
-          }}
-          onDrop={(e) => {
-            if (editorBodyRef.current) {
-              removeDecorationDragOverElement(editorBodyRef.current);
-              if (e.dataTransfer.getData('uri')) {
-                const uri = new URI(e.dataTransfer.getData('uri'));
-                let sourceGroup: EditorGroup | undefined;
-                if (e.dataTransfer.getData('uri-source-group')) {
-                  sourceGroup = editorService.getEditorGroup(e.dataTransfer.getData('uri-source-group'));
-                }
-                group.dropUri(uri, getDragOverPosition(e.nativeEvent, editorBodyRef.current), sourceGroup);
-              }
-              if (e.dataTransfer.files.length > 0) {
-                eventBus.fire(
-                  new EditorGroupFileDropEvent({
-                    group,
-                    files: e.dataTransfer.files,
-                    position: getDragOverPosition(e.nativeEvent, editorBodyRef.current),
-                  }),
-                );
-              }
+            if (e.dataTransfer.files.length > 0) {
+              eventBus.fire(
+                new EditorGroupFileDropEvent({
+                  group,
+                  files: e.dataTransfer.files,
+                  position: getDragOverPosition(e.nativeEvent, editorBodyRef.current),
+                }),
+              );
             }
-          }}
-        >
-          {group.currentResource && <EditorSideView side='top' resource={group.currentResource}></EditorSideView>}
-          {!editorHasNoTab && <NavigationBar editorGroup={group} />}
-          <div className={styles.kt_editor_components}>
-            <div
-              className={cls({
-                [styles_kt_editor_component]: true,
-                [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.component,
-              })}
-            >
-              {components}
-            </div>
-            <div
-              className={cls({
-                [styles.kt_editor_code_editor]: true,
-                [styles_kt_editor_component]: true,
-                [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.code,
-              })}
-              ref={codeEditorRef}
-            />
-            <div
-              className={cls(styles.kt_editor_diff_editor, styles_kt_editor_component, {
-                [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.diff,
-              })}
-              ref={diffEditorRef}
-            />
-            <div
-              className={cls(styles.kt_editor_diff_3_editor, styles_kt_editor_component, {
-                [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.mergeEditor,
-              })}
-              ref={mergeEditorRef}
-            />
+          }
+        }}
+      >
+        {group.currentResource && <EditorSideView side={'top'} resource={group.currentResource}></EditorSideView>}
+        {!editorHasNoTab && <NavigationBar editorGroup={group} />}
+        <div className={styles.kt_editor_components}>
+          <div
+            className={cls({
+              [styles_kt_editor_component]: true,
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.component,
+            })}
+          >
+            {components}
           </div>
-          {group.currentResource && <EditorSideView side={'bottom'} resource={group.currentResource}></EditorSideView>}
+          <div
+            className={cls({
+              [styles.kt_editor_code_editor]: true,
+              [styles_kt_editor_component]: true,
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.code,
+            })}
+            ref={codeEditorRef}
+          />
+          <div
+            className={cls(styles.kt_editor_diff_editor, styles_kt_editor_component, {
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.diff,
+            })}
+            ref={diffEditorRef}
+          />
+          <div
+            className={cls(styles.kt_editor_diff_3_editor, styles_kt_editor_component, {
+              [styles.kt_hidden]: !group.currentOpenType || group.currentOpenType.type !== EditorOpenType.mergeEditor,
+            })}
+            ref={mergeEditorRef}
+          />
         </div>
-      </EditorContext.Provider>
-    );
-  }),
-);
+        {group.currentResource && <EditorSideView side={'bottom'} resource={group.currentResource}></EditorSideView>}
+      </div>
+    </EditorContext.Provider>
+  );
+});
 
 export const ComponentsWrapper = ({
   component,

package/src/browser/index.ts

@@ -52,6 +52,7 @@ import {
   MonacoCommandService,
 } from './monaco-contrib/command/command.service';
 import { TextmateService } from './monaco-contrib/tokenizer/textmate.service';
+import { NotebookService } from './notebook.service';
 import { EditorPreferenceContribution } from './preference/contribution';
 import { EditorPreferences, editorPreferenceSchema } from './preference/schema';
 import { ResourceServiceImpl } from './resource.service';
@@ -65,6 +66,7 @@ import {
   IEditorFeatureRegistry,
   IEditorTabService,
   ILanguageStatusService,
+  INotebookService,
 } from './types';
 import { WorkbenchEditorServiceImpl } from './workbench-editor.service';
 export * from './doc-cache';
@@ -169,6 +171,10 @@ export class EditorModule extends BrowserModule {
       token: IEditorTabService,
       useClass: EditorTabService,
     },
+    {
+      token: INotebookService,
+      useClass: NotebookService,
+    },
     EditorPreferenceContribution,
     DefaultDiffEditorContribution,
     MergeEditorContribution,

package/src/browser/notebook.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@opensumi/di';
+import { Emitter, Event, UriComponents, WithEventBus } from '@opensumi/ide-core-browser';
+
+import type { INotebookModelAddedData, INotebookService, NotebookDataDto, NotebookDocumentChangeDto } from './types';
+
+@Injectable()
+export class NotebookService extends WithEventBus implements INotebookService {
+  createNotebook: (data?: NotebookDataDto) => Promise<{ uri: UriComponents }>;
+  openNotebook: (uriComponents: UriComponents) => Promise<{ uri: UriComponents }>;
+  saveNotebook: (uriComponents: UriComponents) => Promise<boolean>;
+  protected _onDidOpenNotebookDocument = new Emitter<INotebookModelAddedData>();
+  onDidOpenNotebookDocument: Event<INotebookModelAddedData> = this._onDidOpenNotebookDocument.event;
+  protected _onDidCloseNotebookDocument = new Emitter<UriComponents>();
+  onDidCloseNotebookDocument: Event<UriComponents> = this._onDidCloseNotebookDocument.event;
+  protected _onDidSaveNotebookDocument = new Emitter<UriComponents>();
+  onDidSaveNotebookDocument: Event<UriComponents> = this._onDidSaveNotebookDocument.event;
+  protected _onDidChangeNotebookDocument = new Emitter<NotebookDocumentChangeDto>();
+  onDidChangeNotebookDocument: Event<NotebookDocumentChangeDto> = this._onDidChangeNotebookDocument.event;
+}