Improved search-replace component logic by disabing buttons when no query; displaying found/not found status; displaying too long query; adding ctrl-up and down key bindig on query field to god prev-next instance found

angular.json

@@ -43,11 +43,12 @@
                         "styles":[
                             "node_modules/bootstrap/scss/bootstrap.scss",
                             "node_modules/bootstrap-icons/font/bootstrap-icons.css",
-                            "src/assets/css/overrides.css",
                             "src/assets/css/styles.css",
+                            "src/assets/css/overrides.css"
                             "src/assets/css/ace-overrides.css"
                         ],
                         "scripts":[
+                            "src/libs/showdown.min.js"
                         ],
                         "optimization": true
                     },

newton/app.js

@@ -54,20 +54,6 @@ const createWindow = (startType = "build", debug = false, args = []) => {
         window.webContents.send('load-files', args);
     });
 
-    window.webContents.on('did-finish-load', () => {
-        const cssFiles = [
-            path.join(newtonFs.CONFIG_PATH, 'override.css')
-        ];
-
-        const jsFiles = [
-            // path.join(newtonFs.CONFIG_PATH, 'scripts', 'script1.js'),
-            // path.join(newtonFs.CONFIG_PATH, 'scripts', 'script2.js')
-        ];
-
-        cssFiles.forEach(cssFile => newtonFs.readAndInjectCSS(window, cssFile));
-        jsFiles.forEach(jsFile => newtonFs.readAndInjectJS(window, jsFile));
-    });
-
     menu.load(window);
     systemTray.load(menu.menuStruct);
     terminal.load(window);

newton/fs.js

@@ -185,33 +185,10 @@ const closeFile = (fpath) => {
     unwatchFile(fpath);
 }
 
-const readAndInjectCSS = (window, filePath) => {
-    fs.readFile(filePath, 'utf8', (err, data) => {
-        if (err) {
-            console.error(`Error reading CSS file: ${filePath}`, err);
-            return;
-        }
-
-        window.webContents.insertCSS(data);
-    });
-}
-
-const readAndInjectJS = (window, filePath) => {
-    fs.readFile(filePath, 'utf8', (err, data) => {
-        if (err) {
-            console.error(`Error reading JS file: ${filePath}`, err);
-            return;
-        }
-
-        window.webContents.executeJavaScript(data);
-    });
-}
-
 
 
 module.exports = {
     newtonFs: {
-        CONFIG_PATH: CONFIG_PATH,
         setWindow: setWindow,
         chooseFolder: chooseFolder,
         openFiles: openFiles,
@@ -223,8 +200,6 @@ module.exports = {
         getLspConfigData: getLspConfigData,
         getSettingsConfigData: getSettingsConfigData,
         saveSettingsConfigData: saveSettingsConfigData,
-        readAndInjectJS: readAndInjectJS,
-        readAndInjectCSS: readAndInjectCSS,
         loadFilesWatcher: loadFilesWatcher,
         unwatchFile: unwatchFile,
     }

newton/ipc.js

@@ -42,9 +42,6 @@ const loadIPCServer = (fpath) => {
         console.debug("Load File(s) : ", req.body);
 
         window.webContents.send('load-files', req.body);
-        window.show();
-        window.focus();
-
         res.status(200).send('');
     });
 

package.json

@@ -13,14 +13,14 @@
         "electron-start": "electron . --trace-warnings --start-as=build --ipc-port=4588",
         "electron-pack": "ng build --base-href ./ && electron-builder --dir",
         "electron-dist": "ng build --base-href ./ && electron-builder",
-        "electron-dist-zip-linux": "ng build --base-href ./ && electron-builder --linux zip",
-        "electron-dist-deb-linux": "ng build --base-href ./ && electron-builder --linux deb",
         "electron-dist-appimage-linux": "ng build --base-href ./ && electron-builder --linux AppImage",
+        "electron-dist-deb-linux": "ng build --base-href ./ && electron-builder --linux deb",
+        "electron-dist-zip-linux": "ng build --base-href ./ && electron-builder --linux zip",
         "electron-dist-all-linux": "ng build --base-href ./ && electron-builder --linux deb zip AppImage",
         "electron-dist-all": "ng build --base-href ./ && electron-builder -mwl",
         "electron-concurrently": "concurrently 'ng serve' 'electron . --trace-warnings --start-as=ng-serve'",
         "ng-serve": "ng serve",
-        "ng-build": "ng build --base-href ./",
+        "ng-build": "ng build",
         "ng-watch-build": "ng build --watch --configuration development",
         "ng-test": "ng test",
         "test": "echo \"Error: no test specified\" && exit 1"
@@ -30,7 +30,10 @@
         "icon": "./icos/",
         "files": [
             "newton/",
-            "build/"
+            "build/",
+            "!node_modules/ace-builds/",
+            "!node_modules/web-streams-polyfill/",
+            "!node_modules/@angular/"
         ],
         "mac": {
             "category": "public.app-category.developer-tools"
@@ -44,11 +47,15 @@
             "maintainer": "ITDominator"
         }
     },
-    "overrides": {
+    "postinstall": "electron-builder install-app-deps",
-      "glob": "9.0.0",
-      "rimraf": "4.3.1"
-    },
     "dependencies": {
+        "@angular/cdk": "19.2.0",
+        "@angular/common": "19.2.0",
+        "@angular/core": "19.2.0",
+        "@angular/forms": "19.2.0",
+        "@angular/platform-browser": "19.2.0",
+        "@xterm/xterm": "5.5.0",
+        "ace-builds": "1.43.0",
         "ace-diff": "3.0.3",
         "ace-layout": "1.5.0",
         "ace-linters": "1.8.3",
@@ -58,27 +65,24 @@
         "electron-fetch": "1.9.1",
         "express": "4.18.2",
         "marked": "16.4.0",
+        "node-fetch": "3.3.2",
+        "node-pty": "^1.0.0",
+        "rxjs": "7.8.0",
         "socket.io": "4.8.1",
         "uuid": "11.1.0",
         "zone.js": "0.15.0"
     },
     "devDependencies": {
-        "ace-builds": "1.43.0",
         "@angular-devkit/build-angular": "19.2.8",
-        "@angular/cdk": "19.2.0",
-        "@angular/common": "19.2.0",
-        "@angular/core": "19.2.0",
         "@angular/cli": "19.2.8",
         "@angular/compiler-cli": "19.2.0",
-        "@angular/forms": "19.2.0",
-        "@angular/platform-browser": "19.2.0",
         "@types/express": "4.17.17",
         "@types/jasmine": "5.1.0",
         "@types/node": "18.18.0",
         "concurrently": "9.1.2",
         "electron": "36.2.0",
         "@electron/remote": "2.1.2",
-        "electron-builder": "22.7.0",
+        "electron-builder": "26.0.12",
         "jasmine-core": "5.6.0",
         "jimp": "1.6.0",
         "karma": "6.4.0",
@@ -87,7 +91,6 @@
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.1.0",
         "nanoevents": "9.1.0",
-        "rxjs": "7.8.0",
         "tree-sitter": "0.21.1",
         "tree-sitter-bash": "0.23.2",
         "tree-sitter-c": "0.23.1",

src/app/app.component.html

@@ -5,6 +5,7 @@
     <editors></editors>
     <search-replace></search-replace>
     <markdown-preview></markdown-preview>
+    <terminal></terminal>
 
     <lsp-manager></lsp-manager>
 </div>

src/app/app.component.ts

@@ -1,12 +1,11 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
-
-import { WebsocketService } from './common/services/websocket.service';
 
 import { InfoBarComponent } from './editor/info-bar/info-bar.component';
 import { TabsComponent } from './editor/tabs/tabs.component';
 import { EditorsComponent } from './editor/editors.component';
 import { SearchReplaceComponent } from "./editor/search-replace/search-replace.component";
 import { MarkdownPreviewComponent } from "./editor/markdown-preview/markdown-preview.component";
+import { TerminalComponent } from "./editor/terminal/terminal.component";
 import { LspManagerComponent } from "./editor/lsp-manager/lsp-manager.component";
 
 
@@ -19,6 +18,7 @@ import { LspManagerComponent } from "./editor/lsp-manager/lsp-manager.component"
         EditorsComponent,
         SearchReplaceComponent,
         MarkdownPreviewComponent,
+        TerminalComponent,
         LspManagerComponent,
     ],
     templateUrl: './app.component.html',
@@ -30,69 +30,6 @@ import { LspManagerComponent } from "./editor/lsp-manager/lsp-manager.component"
 export class AppComponent {
     title = 'Newton';
 
-    protected ws: WebsocketService = inject(WebsocketService);
+    constructor() {}
-
-
-    constructor() {
-        this.checkIfNotElectronMode();
-    }
-
-
-    ngOnInit() {}
-
-    checkIfNotElectronMode() {
-        if (
-            window.electron ||
-            window.main     ||
-            window.fs
-        ) { return; }
-
-        this.setupWebsocket();
-        this.setupWindowBindings();
-    }
-
-    setupWindowBindings() {
-        window.electron ??= {
-            node: () => { return "" },
-            chrome: () => { return "" },
-            electron: () => { return "" },
-        };
-
-        window.main ??= {
-            onMenuActions: () => {},
-            onTerminalActions: () => {},
-            quit: () => {},
-            toggleFullScreen: () => {},
-        };
-
-        window.fs ??= {
-            getLspConfigData: () => {
-                return new Promise((resolve, reject) => {
-                    resolve("{}");
-                });
-            },
-            getFileContents: () => {},
-            openFiles: () => {},
-            saveFile: () => {},
-            saveFileAs: () => {},
-            chooseFolder: () => {},
-            closeFile: () => {},
-            getPathForFile: () => {},
-            onLoadFiles: () => {},
-            onUpdateFilePath: () => {},
-            onSavedFile: () => {},
-            onChangedFile: () => {},
-            onDeletedFile: () => {},
-        };
-    }
-
-    setupWebsocket() {
-        // TODO: Set with dynamic address and port
-        this.ws.connect('ws://localhost:7272').subscribe(msg => {
-            console.log(msg);
-            console.log(window.fs);
-            // this.ws.send("{ 'text': 'Hello server!' }");
-        });
-    }
 
 }

src/app/common/services/editor/lsp-manager/lsp-manager.service.ts

@@ -42,7 +42,7 @@ export class LspManagerService {
     }
 
     private getLspConfigData(): Promise<string> {
-        return window?.fs.getLspConfigData();
+        return window.fs.getLspConfigData();
     }
 
     private parseAndReturnLSPConfigData(): {} {

src/app/common/services/editor/terminal/terminal.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { ReplaySubject, Observable } from 'rxjs';
+
+import { ServiceMessage } from '../../../types/service-message.type';
+
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TerminalService {
+    private messageSubject: ReplaySubject<ServiceMessage> = new ReplaySubject<ServiceMessage>(1);
+
+
+    public sendMessage(data: ServiceMessage): void {
+        this.messageSubject.next(data);
+    }
+
+    public getMessage$(): Observable<ServiceMessage> {
+        return this.messageSubject.asObservable();
+    }
+
+}

src/app/common/services/files.service.ts

@@ -55,7 +55,7 @@ export class FilesService {
 
     public unset(file: NewtonFile) {
         file.session.destroy();
-        window?.fs.closeFile(file.path);
+        window.fs.closeFile(file.path);
         this.files.delete(file.path);
     }
 
@@ -76,7 +76,7 @@ export class FilesService {
     ): Promise<NewtonFile | undefined | null> {
 	    for (let i = 0; i < files.length; i++) {
 		    const file = files[i];
-		    const path = window?.fs.getPathForFile(file);
+		    const path = window.fs.getPathForFile(file);
 
 		    if (!file || !path) continue;
 		    if ( this.files.get(path) ) continue;
@@ -101,7 +101,7 @@ export class FilesService {
 	        file.hash     = btoa(file.path);
 
 	        if (loadFileContents)
-	            data = await window?.fs.getFileContents(file.path);
+	            data = await window.fs.getFileContents(file.path);
 
             file.session       = new EditSession(data);
             file.session["id"] = path;

src/app/common/services/websocket.service.ts

@@ -1,35 +0,0 @@
-import { Injectable } from '@angular/core';
-import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
-import { Observable } from 'rxjs';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class WebsocketService {
-
-    private socket$!: WebSocketSubject<any>;
-
-    connect(url: string): Observable<any> {
-        if (!this.socket$ || this.socket$.closed) {
-            this.socket$ = webSocket(
-                {
-                    url,
-                    deserializer: msg => msg.data
-                }
-            );
-        }
-        return this.socket$.asObservable();
-    }
-
-    send(message: any) {
-        if (this.socket$) {
-            this.socket$.next(message);
-        }
-    }
-
-    close() {
-        if (this.socket$) {
-            this.socket$.complete();
-        }
-    }
-}

src/app/editor/code-view/view.base.ts

@@ -14,6 +14,7 @@ import { EditorsService } from '../../common/services/editor/editors.service';
 import { FilesService } from '../../common/services/files.service';
 import { SearchReplaceService } from '../../common/services/editor/search-replace/search-replace.service';
 import { MarkdownPreviewService } from '../../common/services/editor/markdown-preview/markdown-preview.service';
+import { TerminalService } from '../../common/services/editor/terminal/terminal.service';
 import { LspManagerService } from '../../common/services/editor/lsp-manager/lsp-manager.service';
 
 import { EditorSettings } from "../../common/configs/editor.config";
@@ -38,6 +39,7 @@ export class CodeViewBase {
     protected filesService: FilesService                     = inject(FilesService);
     protected searchReplaceService: SearchReplaceService     = inject(SearchReplaceService);
     protected markdownPreviewService: MarkdownPreviewService = inject(MarkdownPreviewService);
+    protected terminalService: TerminalService               = inject(TerminalService);
     protected lspManagerService: LspManagerService           = inject(LspManagerService);
 
     @ViewChild('editor') editorElm!: ElementRef;
@@ -132,6 +134,12 @@ export class CodeViewBase {
         // this.editor.execCommand("replace");
     }
 
+    public terminalPopup() {
+        let message        = new ServiceMessage();
+        message.action     = "toggle-terminal";
+        this.terminalService.sendMessage(message);
+    }
+
     public showFilesList() {
         let paths     = this.filesService.getAllPaths();
         let stubPaths = [];
@@ -187,7 +195,7 @@ export class CodeViewBase {
     }
 
     public toggleFullScreen() {
-        window?.main.toggleFullScreen();
+        window.main.toggleFullScreen();
     }
 
     public setAsReadOnly() {
@@ -300,7 +308,7 @@ export class CodeViewBase {
             startDir = pathParts.join( '/' );
         }
 
-        window?.fs.openFiles(startDir);
+        window.fs.openFiles(startDir);
     }
 
     protected saveFile() {
@@ -312,18 +320,18 @@ export class CodeViewBase {
         }
 
         const text = this.activeFile.session.getValue();
-        window?.fs.saveFile(this.activeFile.path, text);
+        window.fs.saveFile(this.activeFile.path, text);
         this.activeFile.session.getUndoManager().markClean();
     }
 
     protected saveFileAs() {
-        window?.fs.saveFileAs().then((path: string) => {
+        window.fs.saveFileAs().then((path: string) => {
             if (!path) return;
 
             let file: NewtonFile = new File([""], path, {});
             const text           = this.editor.session.getValue();
 
-            window?.fs.saveFile(path, text);
+            window.fs.saveFile(path, text);
             this.filesService.addFile(
                 path,
                 file,
@@ -364,6 +372,6 @@ export class CodeViewBase {
     }
 
     private quit() {
-        window?.main.quit();
+        window.main.quit();
     }
 }

src/app/editor/code-view/view.component.ts

@@ -142,7 +142,7 @@ export class CodeViewComponent extends CodeViewBase {
     private loadNewtonEventBindings(): void {
 
         // Note:  https://ajaxorg.github.io/ace-api-docs/interfaces/ace.Ace.EditorEvents.html
-        this.editor.on("focus", (event) => {
+        this.editor.on("focus", (e) => {
             let message        = new ServiceMessage();
             message.action     = "set-active-editor";
             message.editorUUID = this.uuid;
@@ -150,6 +150,7 @@ export class CodeViewComponent extends CodeViewBase {
 
             this.editorsService.sendMessage(message);
             this.searchReplaceService.sendMessage(message);
+            this.terminalService.sendMessage(message);
 
             message            = new ServiceMessage();
             message.action     = "set-active-editor";

src/app/editor/editors.component.ts

@@ -76,7 +76,7 @@ export class EditorsComponent {
     }
 
     private loadMainSubscribers() {
-        window?.main.onMenuActions(async (action: string) => {
+        window.main.onMenuActions(async (action: string) => {
             let editorComponent = this.editorsService.getActiveEditorComponent();
             let editor          = editorComponent.editor;
 
@@ -112,7 +112,7 @@ export class EditorsComponent {
                 case "show-about":
                     break;
                 case "quit":
-                    window?.main.quit();
+                    window.main.quit();
                     break;
                 default:
                     editor.execCommand(action);
@@ -120,7 +120,7 @@ export class EditorsComponent {
             }
         });
 
-        window?.fs.onLoadFiles(async (paths: []) => {
+        window.fs.onLoadFiles(async (paths: []) => {
             for (let i = 0; i < paths.length; i++) {
                 let file = new File([], "") as NewtonFile;
 
@@ -135,7 +135,7 @@ export class EditorsComponent {
             this.editorsService.setSession(file);
         });
 
-        window?.fs.onChangedFile(async (path: string, data: string) => {
+        window.fs.onChangedFile(async (path: string, data: string) => {
             let file = this.filesService.get(path);
             file.session.setValue(data);
 
@@ -147,7 +147,7 @@ export class EditorsComponent {
             this.tabsService.sendMessage(message);
         });
 
-        window?.fs.onDeletedFile(async (path: string) => {
+        window.fs.onDeletedFile(async (path: string) => {
             let message      = new ServiceMessage();
             message.action   = "file-deleted";
             message.filePath = path;
@@ -156,7 +156,7 @@ export class EditorsComponent {
             this.filesService.sendMessage(message);
         });
 
-        window?.fs.onSavedFile(async (path: string) => {
+        window.fs.onSavedFile(async (path: string) => {
             let message      = new ServiceMessage();
             message.action   = "file-saved";
             message.filePath = path;
@@ -164,7 +164,7 @@ export class EditorsComponent {
             this.tabsService.sendMessage(message);
         });
 
-        window?.fs.onUpdateFilePath(async (path: string) => {
+        window.fs.onUpdateFilePath(async (path: string) => {
             console.log("TODO (onUpdateFilePath) :", path);
             // this.tabsService.sendMessage(message);
             // this.filesService.sendMessage(message);

src/app/editor/lsp-manager/lsp-manager.component.ts

@@ -134,7 +134,7 @@ export class LspManagerComponent {
     }
 
     public setWorkspaceFolder() {
-        window?.fs.chooseFolder().then((folder: string) => {
+        window.fs.chooseFolder().then((folder: string) => {
             if (!folder) return;
 
             this.lspManagerService.workspaceFolder = folder;

src/app/editor/search-replace/search-replace.component.html

@@ -8,13 +8,12 @@
             } @else if (isQueryNotFound) {
                 <label id="find-status-lbl">
                     <b class="warning">Query not found...</b>
+                    <p class="warning" style="white-space: pre;">{{query}}</p>
                 </label>
-            } @else if (query && !isQueryLong && !isQueryNotFound) {
+            } @else if (!isQueryLong && !isQueryNotFound) {
-                <label id="find-status-lbl">Found in current file:
+                <label id="find-status-lbl">Find in Current File:
-                    <b class="success">{{totalCount}}</b>
+                    <p class="success">{{query}}</p>
                 </label>
-            } @else {
-                <label id="find-status-lbl">Find in Current File:</label>
             }
         </div>
 

src/app/editor/search-replace/search-replace.component.ts

@@ -40,7 +40,6 @@ export class SearchReplaceComponent {
     @Input() findOptions: string           = "";
     @Input() isQueryLong: boolean          = false;
     @Input() isQueryNotFound: boolean      = false;
-    @Input() totalCount: number            = 0;
 
     private editor!: any;
 
@@ -194,14 +193,14 @@ export class SearchReplaceComponent {
     public findEntryKeyUpHandler(event: KeyboardEvent) {
         if (!event.ctrlKey || !this.query) return;
 
-        if (event.key === "ArrowUp")   this.findPreviousEntry();
+        if (event.key === "ArrowUp") this.findPreviousEntry();
         if (event.key === "ArrowDown") this.findNextEntry();
     }
 
     public findAllEntries() {
         this.query = this.findEntryElm.nativeElement.value;
 
-        this.totalCount = this.editor.findAll(this.query, {
+        let totalCount = this.editor.findAll(this.query, {
             backwards: this.isBackwards,
             wrap: this.isWrap,
             caseSensitive: this.useCaseSensitive,
@@ -210,7 +209,7 @@ export class SearchReplaceComponent {
             range: this.searchOnlyInSelection
         });
 
-        if (this.totalCount === 0) this.isQueryNotFound = true;
+        if (totalCount === 0) this.isQueryNotFound = true;
     }
 
     public replaceEntry(event: KeyboardEvent) {
@@ -221,7 +220,7 @@ export class SearchReplaceComponent {
 
         if (!fromStr) return;
 
-        this.editor.replace(toStr, fromStr, {
+        let totalCount = this.editor.replace(toStr, fromStr, {
             backwards: this.isBackwards,
             wrap: this.isWrap,
             caseSensitive: this.useCaseSensitive,
@@ -242,7 +241,7 @@ export class SearchReplaceComponent {
 
         if (!fromStr) return;
 
-        this.editor.replaceAll(toStr, fromStr, {
+        let totalCount = this.editor.replaceAll(toStr, fromStr, {
             backwards: this.isBackwards,
             wrap: this.isWrap,
             caseSensitive: this.useCaseSensitive,
@@ -270,7 +269,7 @@ export class SearchReplaceComponent {
         if (this.isQueryLong) return;
 
         this.searchTimeoutId = setTimeout(() => {
-            this.totalCount   = this.editor.findAll(this.query, {
+            let totalCount   = this.editor.findAll(this.query, {
                 backwards: this.isBackwards,
                 wrap: this.isWrap,
                 caseSensitive: this.useCaseSensitive,
@@ -279,7 +278,7 @@ export class SearchReplaceComponent {
                 range: this.searchOnlyInSelection
             });
 
-            this.isQueryNotFound = (this.totalCount === 0);
+            this.isQueryNotFound = (totalCount === 0);
         }, this.searchTimeout);
     }
 

src/app/editor/terminal/terminal.component.html

@@ -0,0 +1,6 @@
+<div class="col">
+    <div class="row">
+        <div class="terminal-container" #terminalElm>
+        </div>
+    </div>
+</div>

src/app/editor/terminal/terminal.component.ts

@@ -0,0 +1,137 @@
+import {
+    Component,
+    DestroyRef,
+    ElementRef,
+    HostBinding,
+    ViewChild,
+    inject
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+// import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
+// import { FitAddon } from 'xterm-addon-fit';
+
+import { TerminalService } from '../../common/services/editor/terminal/terminal.service';
+
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'terminal',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './terminal.component.html',
+    styleUrl: './terminal.component.css',
+    host: {
+        'class': 'row terminal',
+        "(keyup)": "globalTerminalKeyHandler($event)"
+    }
+})
+export class TerminalComponent {
+    readonly #destroyRef: DestroyRef               = inject(DestroyRef);
+
+    private terminalService: TerminalService       = inject(TerminalService);
+    private terminal: Terminal                     = new Terminal();
+
+    @HostBinding("class.hidden") isHidden: boolean = true;
+    @ViewChild("terminalElm") terminalElm!: ElementRef;
+
+    private editor!: any;
+
+    constructor() {
+        this.loadSubscribers();
+        this.loadMainSubscribers();
+    }
+
+    private ngAfterViewInit(): void {
+        this.loadTerminal();
+    }
+
+    // Note: https://stackoverflow.com/questions/63390143/how-do-i-connect-xterm-jsin-electron-to-a-real-working-command-prompt
+    private loadTerminal() {
+        // const fitAddon = new FitAddon();
+        // this.terminal.loadAddon(fitAddon);
+
+        this.terminal.open(this.terminalElm.nativeElement);
+        this.terminal.onData(e => {
+            console.log(e);
+            // ipcRenderer.send("terminal-into", e);
+            // window.main.quit();
+        } );
+
+        // ipcRenderer.on('terminal-actions', (event, data) => {
+        //     this.terminal.write(data);
+        // })
+
+        // Make the terminal's size and geometry fit the size of #terminal-container
+        // fitAddon.fit();
+    }
+
+    private loadSubscribers() {
+        this.terminalService.getMessage$().pipe(
+            takeUntilDestroyed(this.#destroyRef)
+        ).subscribe((message: ServiceMessage) => {
+            switch ( message.action ) {
+                case "toggle-terminal":
+                    this.toggleTerminal(message);
+                    break;
+                case "set-active-editor":
+                    this.setActiveEditor(message);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+
+    private loadMainSubscribers() {
+        window.main.onTerminalActions(async (action: string) => {
+            this.terminal.write(action);
+            // switch ( action ) {
+            //     case "terminal-actions":
+            //         break;
+            //     default:
+            //         break;
+            // }
+        });
+    }
+
+
+    private toggleTerminal(message: ServiceMessage) {
+        this.isHidden = !this.isHidden;
+
+        if (this.isHidden) {
+            this.editor.focus();
+            return;
+        }
+
+        // setTimeout(() => {
+        // }, 200);
+    }
+
+
+    private setActiveEditor(message: ServiceMessage) {
+        if (this.editor == message.rawData) return;
+
+        this.editor = message.rawData;
+
+        if (this.isHidden) return;
+    }
+
+    public hideTerminal() {
+        this.isHidden = true;
+        this.editor.focus();
+    }
+
+    public globalTerminalKeyHandler(event: any) {
+        if (event.ctrlKey && event.key === ".") {
+            this.hideTerminal();
+        }
+    }
+
+
+
+}

src/polyfills.ts

@@ -11,35 +11,33 @@
 import 'zone.js';  // Included with Angular CLI.
 
 
-// Note: Is set to 'any' b/c of desire to set 'render'
-// side if running outside of electron mode.
 declare global {
     interface Window {
         electron: {
-            node: any,
+            node: () => Promise<string>,
-            chrome: any,
+            chrome: () => Promise<string>,
-            electron: any,
+            electron: () => Promise<string>,
         },
         main: {
-            onMenuActions: any,
+            onMenuActions: (arg0: any) => Promise<string>,
-            onTerminalActions: any,
+            onTerminalActions: (arg0: any) => Promise<string>,
             quit: any,
             toggleFullScreen: any,
         },
         fs: {
-            getLspConfigData: any,
+            getLspConfigData: () => Promise<string>,
-            getFileContents: any,
+            getFileContents: (arg0: any) => Promise<string>,
-            openFiles: any,
+            openFiles: (arg0) => Promise<string>,
-            saveFile: any,
+            saveFile: (arg0: any, arg1: any) => Promise<string>,
-            saveFileAs: any,
+            saveFileAs: () => Promise<string>,
-            chooseFolder: any,
+            chooseFolder: () => Promise<string>,
-            closeFile: any,
+            closeFile: (arg0: any) => Promise<string>,
             getPathForFile: any,
-            onLoadFiles: any,
+            onLoadFiles: (arg0: any) => Promise<string>,
-            onUpdateFilePath: any,
+            onUpdateFilePath: (arg0: any) => Promise<string>,
-            onSavedFile: any,
+            onSavedFile: (arg0: any) => Promise<string>,
-            onChangedFile: any,
+            onChangedFile: (arg0: any) => Promise<string>,
-            onDeletedFile: any,
+            onDeletedFile: (arg0: any) => Promise<string>,
         }
     }
 }

src/typings.d.ts

@@ -0,0 +1 @@
+// declare var showdown: any;

tsconfig.json

@@ -16,6 +16,50 @@
         "declaration": false,
         "skipLibCheck": true,
         "strict": false,
-        "forceConsistentCasingInFileNames": true
+        "forceConsistentCasingInFileNames": true,
-    }
+    },
+    "includes": [
+        "src/typings.d.ts"
+    ]
 }
+
+
+
+/*
+
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "outDir": "./build/app",
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "sourceMap": true,
+        "declaration": false,
+        "experimentalDecorators": true,
+        "moduleResolution": "bundler",
+        "importHelpers": true,
+        "target": "ES2022",
+        "module": "ES2022",
+        "useDefineForClassFields": false,
+        "lib": [
+            "ES2022",
+            "dom"
+        ]
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "includes": [
+        "src/typings.d.ts"
+    ]
+}
+
+*/