DTStack · wewoor · Apr 3, 2023 · Feb 23, 2023 · Feb 23, 2023 · Feb 23, 2023
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -13,6 +13,10 @@ on:
 jobs:
     setup:
         runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                node-version: [16.x]
+
         steps:
             - name: checkout
               uses: actions/checkout@v2

diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ coverage
 .DS_Store
 storybook-static
 .yarn-error.log
+.yarn
 lib
 docs/api
 

diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,29 @@
+.github
+.history
+.storybook
+.vscode
+.yarn
+coverage
+mock
+node_modules
+scripts
+src
+stories
+test
+website
+
+.eslintrc.js
+.gitignore
+.prettierignore
+.prettierrc.json
+.stylelintrc.json
+.yarnrc
+.yarnrc.yml
+babel.config.json
+CODE_OF_CONDUCT.md
+commitlint.config.js
+CONTRIBUTING.md
+jest.config.js
+MIGRATION.md
+pnpm-lock.yaml
+yarn.lock
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.3.2](https://github.com/DTStack/molecule/compare/v1.2.0...v1.3.2) (2023-04-03)
+
+### Features
+
+-   develop auxiliary bar ([#833](https://github.com/DTStack/molecule/issues/833)) ([cfd7c7c](https://github.com/DTStack/molecule/commit/cfd7c7cebbacbbc2893e69b0934b4724eac5b24c))
+-   develop scrollBar to replace scrollable component ([#826](https://github.com/DTStack/molecule/issues/826)) ([a276038](https://github.com/DTStack/molecule/commit/a27603864143596d4169e670ffe4b387d795de1a))
+-   support to set the direction of editor group ([#822](https://github.com/DTStack/molecule/issues/822)) ([f0ca348](https://github.com/DTStack/molecule/commit/f0ca348ec82b43fc2dfb3556dcd0ea087b251f94))
+
+### Bug Fixes
+
+-   adjust the order of controller ([#831](https://github.com/DTStack/molecule/issues/831)) ([8a63067](https://github.com/DTStack/molecule/commit/8a630677d9a509951109fead67a11f8cb91d90ed))
+-   can't prevent close tab with confirm ([#828](https://github.com/DTStack/molecule/issues/828)) ([9418d40](https://github.com/DTStack/molecule/commit/9418d40d6767ec05d83f150bb5ede371e9dadd75))
+-   fix lost open animation of collapse ([#827](https://github.com/DTStack/molecule/issues/827)) ([d1cdbe1](https://github.com/DTStack/molecule/commit/d1cdbe110ea1f82615945789d23585c39adde11a))
+-   get container after Workbench is mounted ([#848](https://github.com/DTStack/molecule/issues/848)) ([222e536](https://github.com/DTStack/molecule/commit/222e53688cfada84ffe38ef9ecebd3a21cde8655))
+-   improve the style of edit's input ([#838](https://github.com/DTStack/molecule/issues/838)) ([534b050](https://github.com/DTStack/molecule/commit/534b050d756680b320262eaa1473f05ff7e87082))
+-   remove contextView warning in console ([#832](https://github.com/DTStack/molecule/issues/832)) ([2cf87db](https://github.com/DTStack/molecule/commit/2cf87db11b6ec9d310d6fae59f4500f91cb69bad))
+-   update the previewUrl of online-code-formatting ([#844](https://github.com/DTStack/molecule/issues/844)) ([bc31969](https://github.com/DTStack/molecule/commit/bc31969e6100564df349ebf61743583ddb399d68))
+
 ## [1.3.0](https://github.com/DTStack/molecule/compare/v1.2.0...v1.3.0) (2022-12-16)
 
 ### Features

diff --git a/jest.config.js b/jest.config.js
@@ -20,7 +20,7 @@ module.exports = {
         '!src/index.ts',
         '!src/extensions/**',
     ],
-    transformIgnorePatterns: ['node_modules/(?!(monaco-editor|.*dnd.*)/)'],
+    transformIgnorePatterns: ['/node_modules/(?!(.*monaco-editor|.*dnd.*)/)'],
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
     moduleNameMapper: {
         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dtinsight/molecule",
-    "version": "1.3.0",
+    "version": "1.3.2",
     "description": "A Web IDE UI Framework built with React.js, inspired by VSCode.",
     "module": "./esm/index.js",
     "typings": "./esm/index.d.ts",

diff --git a/scripts/release.mjs b/scripts/release.mjs
@@ -80,7 +80,7 @@ const pkg = require(pkgPath);
         process.exit(1);
     }
     // use npm pack --dry-run to check publish pack
-    await $`npm publish`;
+    await $`npm publish -otp=${await question('Input the OTP: ')}`;
     succeeDoneLog();
 
     infoLog(`10. git push`);

diff --git a/src/controller/__tests__/layout.test.ts b/src/controller/__tests__/layout.test.ts
@@ -7,6 +7,14 @@ const layoutController = container.resolve(LayoutController);
 const layoutService = container.resolve(LayoutService);
 
 describe('The layout controller', () => {
+    test('Should support to listen to the Workbench did mount event', () => {
+        const mockFn = jest.fn();
+        layoutService.onWorkbenchDidMount(mockFn);
+        layoutController.onWorkbenchDidMount();
+
+        expect(mockFn).toBeCalled();
+    });
+
     test('Should support to execute onPaneSizeChange', () => {
         const original = layoutService.setPaneSize;
         const mockFn = jest.fn();

diff --git a/src/controller/layout.ts b/src/controller/layout.ts
@@ -2,8 +2,10 @@ import 'reflect-metadata';
 import { container, singleton } from 'tsyringe';
 import { Controller } from 'mo/react/controller';
 import { ILayoutService, LayoutService } from 'mo/services';
+import { LayoutEvents } from 'mo/model/workbench/layout';
 
 export interface ILayoutController extends Partial<Controller> {
+    onWorkbenchDidMount?: () => void;
     onPaneSizeChange?: (splitPanePos: number[]) => void;
     onHorizontalPaneSizeChange?: (horizontalSplitPanePos: number[]) => void;
 }
@@ -26,4 +28,8 @@ export class LayoutController extends Controller implements ILayoutController {
     public  number[]) => {
         this.layoutService.setHorizontalPaneSize(horizontalSplitPanePos);
     };
+
+    public  => {
+        this.layoutService.emit(LayoutEvents.OnWorkbenchDidMount);
+    };
 }
diff --git a/src/model/workbench/layout.ts b/src/model/workbench/layout.ts
@@ -8,6 +8,10 @@ export enum MenuBarMode {
     vertical = 'vertical',
 }
 
+export enum LayoutEvents {
+    >
+}
+
 export interface ViewVisibility {
     hidden: boolean;
 }

diff --git a/src/monaco/quickAccessViewAction.ts b/src/monaco/quickAccessViewAction.ts
@@ -17,7 +17,6 @@ import { IKeybindingService } from 'monaco-editor/esm/vs/platform/keybinding/com
 import { ICommandService } from 'monaco-editor/esm/vs/platform/commands/common/commands';
 import { ITelemetryService } from 'monaco-editor/esm/vs/platform/telemetry/common/telemetry';
 import { INotificationService } from 'monaco-editor/esm/vs/platform/notification/common/notification';
-import { Codicon } from 'monaco-editor/esm/vs/base/common/codicons';
 import { TriggerAction } from 'monaco-editor/esm/vs/platform/quickinput/browser/pickerQuickAccess';
 import {
     MenuId,
@@ -81,7 +80,7 @@ export class CommandQuickAccessProvider extends AbstractEditorCommandsQuickAcces
             ...c,
             buttons: [
                 {
-                    iconClass: Codicon.gear.classNames,
+                    iconClass: 'codicon codicon-gear',
                     tooltip: localize(
                         'configure keybinding',
                         'Configure Keybinding'

diff --git a/src/provider/create.ts b/src/provider/create.ts
@@ -14,7 +14,7 @@ export interface IConfigProps {
     defaultLocale?: string;
 }
 
-namespace stanalone {
+namespace standalone {
     let instance: InstanceService | null = null;
 
     /**
@@ -37,12 +37,12 @@ namespace stanalone {
 }
 
 export default function create(config: IConfigProps) {
-    return stanalone.create(config);
+    return standalone.create(config);
 }
 
 /**
  * Do NOT call it in production, ONLY used for test cases
  */
 export function clearInstance() {
-    stanalone.clearInstance();
+    standalone.clearInstance();
 }
diff --git a/src/services/__tests__/layoutService.test.ts b/src/services/__tests__/layoutService.test.ts
@@ -1,5 +1,5 @@
 import { ID_APP } from 'mo/common/id';
-import { MenuBarMode, Position } from 'mo/model/workbench/layout';
+import { LayoutEvents, MenuBarMode, Position } from 'mo/model/workbench/layout';
 import 'reflect-metadata';
 import { container } from 'tsyringe';
 import { LayoutService } from '../workbench';
@@ -143,5 +143,14 @@ describe('The layout service', () => {
             layoutService.setAuxiliaryBar((pre) => !pre);
             expect(layoutService.getState().auxiliaryBar.hidden).toBe(true);
         });
+
+        test('Should support to listen to the Workbench did mount event', () => {
+            const mockFn = jest.fn();
+            layoutService.onWorkbenchDidMount(mockFn);
+
+            layoutService.emit(LayoutEvents.OnWorkbenchDidMount);
+
+            expect(mockFn).toBeCalled();
+        });
     });
 });
diff --git a/src/services/instanceService.tsx b/src/services/instanceService.tsx
@@ -122,7 +122,11 @@ export default class InstanceService
             this.emit(InstanceHookKind.beforeLoad);
             molecule.extension.load(others);
 
-            molecule.monacoService.initWorkspace(molecule.layout.container!);
+            molecule.layout.onWorkbenchDidMount(() => {
+                molecule.monacoService.initWorkspace(
+                    molecule.layout.container!
+                );
+            });
             this.rendered = true;
         }
 

diff --git a/src/services/workbench/layoutService.ts b/src/services/workbench/layoutService.ts
@@ -6,6 +6,7 @@ import {
     Position,
     LayoutModel,
     MenuBarMode,
+    LayoutEvents,
 } from 'mo/model/workbench/layout';
 import { MenuBarEvent } from 'mo/model/workbench/menuBar';
 
@@ -87,6 +88,11 @@ export interface ILayoutService extends Component<ILayout> {
      * Reset all layout data as default value
      */
     reset(): void;
+    /**
+     * Listen to the workbench did mount event
+     * @param callback callback function
+     */
+    onWorkbenchDidMount(callback: Function): void;
 }
 
 @singleton()
@@ -101,6 +107,10 @@ export class LayoutService
         this.state = container.resolve(LayoutModel);
     }
 
+    public onWorkbenchDidMount(callback: Function): void {
+        this.subscribe(LayoutEvents.OnWorkbenchDidMount, callback);
+    }
+
     public get container() {
         // Make sure to get the latest dom element.
         this._container = document.getElementById(ID_APP) || document.body;

diff --git a/src/workbench/workbench.tsx b/src/workbench/workbench.tsx
@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { container } from 'tsyringe';
 
 import {
@@ -60,6 +60,7 @@ export function WorkbenchView(props: IWorkbench & ILayout & ILayoutController) {
         sidebar,
         statusBar,
         onPaneSizeChange,
+        onWorkbenchDidMount,
         onHorizontalPaneSizeChange,
         splitPanePos,
         horizontalSplitPanePos,
@@ -122,6 +123,11 @@ export function WorkbenchView(props: IWorkbench & ILayout & ILayoutController) {
         hideStatusBar
     );
 
+    useEffect(() => {
+        // call onWorkbenchDidMount after the first render
+        onWorkbenchDidMount?.();
+    }, []);
+
     return (
         <div id={ID_APP} className={appClassName} tabIndex={0}>
             <div className={workbenchFinalClassName}>

diff --git a/stories/workbench/0-Workbench.stories.tsx b/stories/workbench/0-Workbench.stories.tsx
@@ -13,17 +13,35 @@ moInstance.onBeforeInit(() => {
     molecule.builtin.inactiveModule('activityBarData');
 });
 
-export const IDEDemo = () => moInstance.render(<Workbench />);
-
-IDEDemo.story = {
-    name: 'Workbench',
+export default {
+    title: 'Workbench',
 };
 
-if (module.hot) {
-    module.hot.accept();
-}
+export const NormalWorkbench = () => moInstance.render(<Workbench />);
 
-export default {
-    title: 'Workbench',
-    component: IDEDemo,
+export const EmbeddedWorkbench = () => {
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                top: 0,
+                left: 0,
+            }}
+        >
+            <h1 style={{ textAlign: 'center', lineHeight: '40px' }}>
+                Embedded
+            </h1>
+            <div
+                style={{
+                    position: 'relative',
+                    width: '100%',
+                    height: 'calc(100% - 40px)',
+                }}
+            >
+                {moInstance.render(<Workbench />)}
+            </div>
+        </div>
+    );
 };