fix: make Keybinding work after reloading Molecule (#686)

Author: kiwiwong

src/common/__tests__/dom.test.ts

@@ -1,4 +1,8 @@
-import { findParentByClassName, getPositionByPlacement } from '../dom';
+import {
+    findParentByClassName,
+    getPositionByPlacement,
+    getElementClientCenter,
+} from '../dom';
 
 describe('Test functions in dom.ts', () => {
     test('The getPositionByPlacement function', () => {
@@ -47,4 +51,23 @@ describe('Test functions in dom.ts', () => {
             findParentByClassName(1, 'test');
         }).toThrowError();
     });
+
+    test('The getElementClientCenter function', () => {
+        const elem = document.createElement('div');
+        const domRect = {
+            x: 10,
+            y: 10,
+            width: 10,
+            height: 10,
+            top: 10,
+            right: 10,
+            bottom: 10,
+            left: 10,
+        } as DOMRect;
+        elem.getBoundingClientRect = jest.fn(() => domRect);
+
+        const center = getElementClientCenter(elem);
+        expect(center.x).toEqual(15);
+        expect(center.y).toEqual(15);
+    });
 });

src/common/__tests__/utils.test.ts

@@ -1,4 +1,8 @@
-import { normalizeFlattedObject, colorLightOrDark } from '../utils';
+import {
+    normalizeFlattedObject,
+    colorLightOrDark,
+    cloneInstance,
+} from '../utils';
 
 describe('Test Utils', () => {
     test('The normalizeFlattedObject function', () => {
@@ -40,4 +44,10 @@ describe('Test Utils', () => {
         expect(colorLightOrDark('#000')).toBe('dark');
         expect(colorLightOrDark('rgb(255,255,255)')).toBe('light');
     });
+
+    test('The cloneInstance function', () => {
+        const obj1 = { name: 'test' };
+        const obj2 = cloneInstance(obj1);
+        expect(obj1.name).toEqual(obj2.name);
+    });
 });

src/provider/molecule.tsx

@@ -48,6 +48,10 @@ export class MoleculeProvider extends Component<IMoleculeProps> {
     }
 
     componentDidMount() {
+        // The monacoService needs to be initialized each time the MoleculeProvider is loaded to
+        // ensure that Keybinding events can be bound to the latest dom.
+        this.monacoService.initWorkspace(this.layoutService.container!);
+
         if (!this.extensionService.isLoaded()) {
             this.initialize();
         }
@@ -59,9 +63,6 @@ export class MoleculeProvider extends Component<IMoleculeProps> {
         const [languages, restExts] =
             this.extensionService.splitLanguagesExts(extensions);
 
-        // First to init the monacoService
-        this.monacoService.initWorkspace(this.layoutService.container!);
-
         // Molecule should load the language extensions first to
         // ensure that the custom language extensions is registered in localeService
         this.initLocaleExts(languages);

src/services/workbench/layoutService.ts

@@ -88,9 +88,8 @@ export class LayoutService
     }
 
     public get container() {
-        if (!this._container) {
-            this._container = document.getElementById(ID_APP) || document.body;
-        }
+        // Make sure to get the latest dom element.
+        this._container = document.getElementById(ID_APP) || document.body;
         return this._container;
     }