initial push

src/app/app.component.html

@@ -0,0 +1,4 @@
+<div class="col">
+    <tabs></tabs>
+    <editors></editors>
+</div>

src/app/app.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { TabsComponent } from './editor/tabs/tabs.component';
+import { EditorsComponent } from './editor/editors.component';
+
+
+
+declare global {
+    interface Window {
+        electron: {
+            node: () => Promise<string>,
+            chrome: () => Promise<string>,
+            electron: () => Promise<string>,
+        },
+        fs: {
+            getLspConfigData: () => Promise<string>,
+            getFileContents: (arg0: any) => Promise<string>,
+            getPathForFile: any,
+        }
+    }
+}
+
+
+
+@Component({
+    selector: 'app-root',
+    imports: [
+        TabsComponent,
+        EditorsComponent
+    ],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.css',
+    host: {
+        'class': 'row'
+    }
+})
+export class AppComponent {
+    title = 'Newton';
+
+    constructor() {}
+
+}

src/app/app.config.server.ts

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(),
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts

@@ -0,0 +1,9 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())]
+};

src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

src/app/common/configs/editor.config.ts

@@ -0,0 +1,28 @@
+import { Keybindings } from './keybindings.config';
+
+export const EditorSettings: any = {
+    // BASE_PATH: 'https:cdnjs.cloudflare.com/ajax/libs/ace/1.40.1/',
+    BASE_PATH: 'ace',
+    KEYBINDINGS: Keybindings,
+    CONFIG: {
+        behavioursEnabled: true,
+        fontSize: "12px",
+        theme: "ace/theme/one_dark",
+        printMarginColumn: 80,
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        enableSnippets: true,
+        highlightActiveLine: true,
+        enableMultiselect: true,
+        tabSize: 4,
+        useSoftTabs: true,
+        tooltipFollowsMouse: true,
+        wrapBehavioursEnabled: false,
+        scrollPastEnd: 0.5,
+        mergeUndoDeltas: false,
+        showGutter: true,
+        customScrollbar: true,
+        navigateWithinSoftTabs: true,
+        scrollSpeed: 5
+    }
+};

src/app/common/configs/keybinding-newton.js

@@ -0,0 +1,142 @@
+const editorCommands = [
+    {
+        name: "showSettingsMenu",
+        bindKey: {win: "Ctrl-Shift-m", mac: "Ctrl-Shift-m"},
+        exec: function(editor) {
+            ace.config.loadModule("ace/ext/settings_menu", function(module) {
+                module.init(editor);
+                editor.showSettingsMenu();
+            })
+        }
+    }, {
+        name: "showKeyboardShortcuts",
+        bindKey: {win: "ctrl-shift-h", mac: "command-shift-h"},
+        exec: function(editor) {
+            ace.config.loadModule("ace/ext/keybinding_menu", function(module) {
+                module.init(editor);
+                editor.showKeyboardShortcuts();
+            })
+        }
+    }, {
+        name: "openCommandPalette2",
+        bindKey: {linux: "Command-Shift-/|F1", win: "Ctrl-Shift-/|F1"},
+        exec: function(editor) {
+            editor.execCommand("openCommandPalette");
+        }
+    }, {
+        name: "showLSPManager",
+        bindKey: {win: "ctrl-m", mac: "command-m"},
+        exec: function(editor) {
+            $('#lsp-modal').modal("toggle");
+        }
+    }, {
+        name: "search",
+        bindKey: {win: "ctrl-f", mac: "ctrl-f"},
+        exec: function(editor) {
+            blockHigherNewtonEvePropigation = true;
+            searchReplace.toggleShow();
+        },
+        readOnly: true
+    }, {
+        name: "openFile",
+        bindKey: {win: "ctrl-o", mac: "ctrl-o"},
+        exec: function(editor) {
+            fpath = aceSessions[currentSession]["fpath"]
+            sendMessage("open_file", "", "", fpath, "");
+        },
+        readOnly: true
+    }, {
+        name: "saveSession",
+        bindKey: {win: "ctrl-s", mac: "ctrl-s"},
+        exec: function(editor) {
+            saveSession(currentSession);
+        },
+        readOnly: true
+    }, {
+        name: "newSession",
+        bindKey: {win: "ctrl-t", mac: "ctrl-t"},
+        exec: function(editor) {
+            newSession();
+        },
+        readOnly: true
+    }, {
+        name: "closeSession",
+        bindKey: {win: "ctrl-w", mac: "ctrl-w"},
+        exec: function(editor) {
+            closeSession(currentSession);
+        },
+        readOnly: true
+    }, {
+        name: "toggleLineHighlight",
+        bindKey: {win: "ctrl-h", mac: "ctrl-h"},
+        exec: function(editor) {
+            toggleLineHighlight();
+        },
+        readOnly: true
+    }, {
+        name: "gotoDefinition",
+        bindKey: {win: "ctrl-g", mac: "ctrl-g"},
+        exec: function(editor) {
+            console.log("Goto stub...");
+            // lspProvider.$messageController.postMessage(Message(), callback);
+        },
+        readOnly: true
+    }, {
+        name: "movelinesUp",
+        bindKey: {win: "ctrl-up", mac: "ctrl-up"},
+        exec: function(editor) {
+            editor.execCommand("movelinesup");
+        },
+        readOnly: true
+    }, {
+        name: "movelinesDown",
+        bindKey: {win: "ctrl-down", mac: "ctrl-down"},
+        exec: function(editor) {
+            editor.execCommand("movelinesdown");
+        },
+        readOnly: true
+    }, {
+        name: "tgglTopMainMenubar",
+        bindKey: {win: "ctrl-0", mac: "ctrl-0"},
+        exec: function(editor) {
+            sendMessage("tggl_top_main_menubar", "", "", "", "");
+        },
+        readOnly: true
+    }, {
+        name: "zoomIn",
+        bindKey: {win: "ctrl-=", mac: "ctrl-="},
+        exec: function(editor) {
+            zoomIn();
+        },
+        readOnly: true
+    }, {
+        name: "zoomOut",
+        bindKey: {win: "ctrl--", mac: "ctrl--"},
+        exec: function(editor) {
+            zoomOut();
+        },
+        readOnly: true
+    }, {
+        name: "scrollUp",
+        bindKey: {win: "alt-up", mac: "alt-up"},
+        exec: function(editor) {
+            editor.execCommand("scrollup");
+        },
+        readOnly: true
+    }, {
+        name: "scrollDown",
+        bindKey: {win: "alt-down", mac: "alt-down"},
+        exec: function(editor) {
+            editor.execCommand("scrolldown");
+        },
+        readOnly: true
+    }, {
+        name: "launhLSP",
+        bindKey: {win: "ctrl-l", mac: "ctrl-l"},
+        exec: function(editor) {
+            loadLSPManager();
+        },
+        readOnly: true
+    }
+
+];

src/app/common/configs/keybindings.config.ts

@@ -0,0 +1,146 @@
+export const Keybindings: Array<any> = [
+// export const Keybindings: any = [
+    // {
+    //     name: "showSettingsMenu",
+    //     bindKey: {win: "Ctrl-Shift-m", mac: "Ctrl-Shift-m"},
+    //     exec: () => {
+    //         ace.config.loadModule("ace/ext/settings_menu", function(module) {
+    //             module.init(editor);
+    //             editor.showSettingsMenu();
+    //         })
+    //     }
+    // }, {
+    //     name: "showKeyboardShortcuts",
+    //     bindKey: {win: "ctrl-shift-h", mac: "command-shift-h"},
+    //     exec: () => {
+    //         ace.config.loadModule("ace/ext/keybinding_menu", function(module) {
+    //             module.init(editor);
+    //             editor.showKeyboardShortcuts();
+    //         })
+    //     }
+    // }, {
+    //     name: "openCommandPalette2",
+    //     bindKey: {linux: "Command-Shift-/|F1", win: "Ctrl-Shift-/|F1"},
+    //     exec: () => {
+    //         editor.execCommand("openCommandPalette");
+    //     }
+    // }, {
+    //     name: "showLSPManager",
+    //     bindKey: {win: "ctrl-m", mac: "command-m"},
+    //     exec: () => {
+    //         $('//lsp-modal').modal("toggle");
+    //     }
+    // }, {
+     {
+         name: "search",
+         bindKey: {win: "ctrl-f", mac: "ctrl-f"},
+         exec: () => {
+             // blockHigherNewtonEvePropigation = true;
+             // searchReplace.toggleShow();
+            console.log("Search");
+         },
+         readOnly: true
+     }
+    // }, {
+    //     name: "openFile",
+    //     bindKey: {win: "ctrl-o", mac: "ctrl-o"},
+    //     exec: () => {
+    //         fpath = aceSessions[currentSession]["fpath"]
+    //         sendMessage("open_file", "", "", fpath, "");
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "saveSession",
+    //     bindKey: {win: "ctrl-s", mac: "ctrl-s"},
+    //     exec: () => {
+    //         saveSession(currentSession);
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "newSession",
+    //     bindKey: {win: "ctrl-t", mac: "ctrl-t"},
+    //     exec: () => {
+    //         newSession();
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "closeSession",
+    //     bindKey: {win: "ctrl-w", mac: "ctrl-w"},
+    //     exec: () => {
+    //         closeSession(currentSession);
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "toggleLineHighlight",
+    //     bindKey: {win: "ctrl-h", mac: "ctrl-h"},
+    //     exec: () => {
+    //         toggleLineHighlight();
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "gotoDefinition",
+    //     bindKey: {win: "ctrl-g", mac: "ctrl-g"},
+    //     exec: () => {
+    //         console.log("Goto stub...");
+    //          lspProvider.$messageController.postMessage(Message(), callback);
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "movelinesUp",
+    //     bindKey: {win: "ctrl-up", mac: "ctrl-up"},
+    //     exec: () => {
+    //         editor.execCommand("movelinesup");
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "movelinesDown",
+    //     bindKey: {win: "ctrl-down", mac: "ctrl-down"},
+    //     exec: () => {
+    //         editor.execCommand("movelinesdown");
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "tgglTopMainMenubar",
+    //     bindKey: {win: "ctrl-0", mac: "ctrl-0"},
+    //     exec: () => {
+    //         sendMessage("tggl_top_main_menubar", "", "", "", "");
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "zoomIn",
+    //     bindKey: {win: "ctrl-=", mac: "ctrl-="},
+    //     exec: () => {
+    //         zoomIn();
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "zoomOut",
+    //     bindKey: {win: "ctrl--", mac: "ctrl--"},
+    //     exec: () => {
+    //         zoomOut();
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "scrollUp",
+    //     bindKey: {win: "alt-up", mac: "alt-up"},
+    //     exec: () => {
+    //         editor.execCommand("scrollup");
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "scrollDown",
+    //     bindKey: {win: "alt-down", mac: "alt-down"},
+    //     exec: () => {
+    //         editor.execCommand("scrolldown");
+    //     },
+    //     readOnly: true
+    // }, {
+    //     name: "launhLSP",
+    //     bindKey: {win: "ctrl-l", mac: "ctrl-l"},
+    //     exec: () => {
+    //         loadLSPManager();
+    //     },
+    //     readOnly: true
+    // }
+
+];

src/app/common/directives/dnd.directive.ts

@@ -0,0 +1,46 @@
+import {
+    Directive,
+    Output,
+    Input,
+    EventEmitter,
+    HostBinding,
+    HostListener
+} from '@angular/core';
+
+import { NewtonFile } from '../types/file.type';
+
+
+@Directive({
+    selector: '[dropzone]'
+})
+export class DndDirective {
+    @HostBinding('class.fileover') fileOver!: boolean;
+    @Output() fileDropped = new EventEmitter<any>();
+
+    @HostListener('dragover', ['$event']) onDragOver(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        this.fileOver = true;
+    }
+
+    @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        this.fileOver = false;
+    }
+
+    @HostListener('drop', ['$event']) public ondrop(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        this.fileOver                = false;
+        let files: Array<NewtonFile> = evt.dataTransfer.files;
+
+        if (files.length == 0) return;
+
+        this.fileDropped.emit(files);
+    }
+
+}

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

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, ReplaySubject, Observable } from 'rxjs';
+
+import { ServiceMessage } from '../../types/service-message.type';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class EditorsService {
+    private dataSubject: ReplaySubject<ServiceMessage> = new ReplaySubject<ServiceMessage>(1);
+
+    constructor() {}
+
+    setData(data: ServiceMessage): void {
+        this.dataSubject.next(data);
+    }
+
+    getData$(): Observable<ServiceMessage> {
+        return this.dataSubject.asObservable();
+    }
+}

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

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, ReplaySubject, Observable } from 'rxjs';
+
+import { ServiceMessage } from '../../../types/service-message.type';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TabsService {
+    private dataSubject: ReplaySubject<ServiceMessage> = new ReplaySubject<ServiceMessage>(1);
+
+    constructor() {}
+
+    setData(data: ServiceMessage): void {
+        this.dataSubject.next(data);
+    }
+
+    getData$(): Observable<ServiceMessage> {
+        return this.dataSubject.asObservable();
+    }
+}

src/app/common/types/file.type.ts

@@ -0,0 +1,9 @@
+import { EditSession } from 'ace-builds';
+
+
+export interface NewtonFile extends File {
+    fname: string,
+    path: string,
+    hash: string,
+    session: EditSession
+}

src/app/common/types/service-message.type.ts

@@ -0,0 +1,5 @@
+export class ServiceMessage {
+    action: string  = "none";
+    message: string = "";
+    uuid!: string;
+} 

src/app/editor/ace/ace-editor.component.css

@@ -0,0 +1,23 @@
+/*
+.editor { 
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.editor { 
+    height: 100vh;
+    width: auto;
+}
+*/
+
+
+.editor { 
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+

src/app/editor/ace/ace-editor.component.html

@@ -0,0 +1,2 @@
+<div class="editor" #editor >
+</div>

src/app/editor/ace/ace-editor.component.ts

@@ -0,0 +1,108 @@
+import { Component, ElementRef, ViewChild, Input } from '@angular/core';
+
+import { AceLanguageClient, LanguageClientConfig } from 'ace-linters/build/ace-language-client';
+
+// Import Ace and its modes/themes so that `ace` global is defined
+import * as ace from 'ace-builds/src-noconflict/ace';
+import 'ace-builds/src-noconflict/theme-one_dark';
+import { LanguageProvider } from "ace-linters";
+
+import { EditorSettings } from "../../common/configs/editor.config";
+
+import { EditorsService } from '../../common/services/editor/editors.service';
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'ace-editor',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './ace-editor.component.html',
+    styleUrl: './ace-editor.component.css',
+    host: {
+        'class': 'col',
+        '(click)': 'onClick($event)'
+    }
+})
+export class AceEditorComponent {
+
+    @Input() editorSettings!: typeof EditorSettings;
+    @ViewChild('editor') editorElm!: ElementRef;
+    editor!: any;
+    uuid!: string;
+    lspConfigData!: {};
+
+
+    constructor(private editorsService: EditorsService) {
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.loadAce();
+        this.loadLanguageProviders();
+    }
+
+    public loadAce(): void {
+        ace.config.set('basePath', this.editorSettings.BASE_PATH);
+
+        this.editor = ace.edit( this.editorElm.nativeElement );
+        this.editor.setOptions( this.editorSettings.CONFIG );
+//        this.editor.commands.addCommands( this.editorSettings.KEYBINDINGS );
+    }
+
+    protected onClick(event: any) {
+        let message        = new ServiceMessage();
+        message.action     = "set-editor";
+        message.message    = this.uuid;
+        message.uuid       = this.uuid;
+
+        this.editorsService.setData(message);
+    }
+
+    public loadLanguageProviders(): void {
+        let languageProvider = this.getLanguageProviderWithClientServers();
+//        let languageProvider = this.getLanguageProviderWithWebWorker();
+        languageProvider.registerEditor(this.editor);
+
+    }
+
+
+
+    public getLanguageProviderWithClientServers() {
+        let _initializationOptions = {};
+
+        if (Object.keys(this.lspConfigData).length !== 0) {
+//            _initializationOptions = this.lspConfigData[ this.editor.session.getMode() ]["initialization-options"];
+            _initializationOptions = this.lspConfigData[ "python" ]["initialization-options"];
+//            _initializationOptions = this.lspConfigData[ "java" ]["initialization-options"];
+//            _initializationOptions = this.lspConfigData[ "cpp" ]["initialization-options"];
+            console.log(_initializationOptions.toString());
+        }
+
+        let servers: LanguageClientConfig[] = [
+            {
+                module: () => import("ace-linters/build/language-client"),
+                modes: "python",
+//                modes: "java",
+//                modes: "cpp",
+                type: "socket",
+                socket: new WebSocket("ws://127.0.0.1:9999/python"),
+//                socket: new WebSocket("ws://127.0.0.1:9999/?name=clangd"),
+//                socket: new WebSocket("ws://127.0.0.1:9999/?name=jdtls"),
+//                socket: new WebSocket("ws://127.0.0.1:9999/?name=pylsp"),
+//                initializationOptions: _initializationOptions
+            }
+        ];
+
+        return AceLanguageClient.for(servers);
+    }
+ 
+ 
+    public getLanguageProviderWithWebWorker() {
+        let worker = new Worker(new URL('./webworker.js', import.meta.url));
+        return LanguageProvider.create(worker);
+    }
+
+}

src/app/editor/ace/webworker.ts

@@ -0,0 +1,165 @@
+import { ServiceManager } from "ace-linters/build/service-manager";
+
+let manager = new ServiceManager(self);
+
+manager.registerService("html", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/html-service"),
+    className: "HtmlService",
+    modes: "html"
+});
+
+manager.registerService("css", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/css-service"),
+    className: "CssService",
+    modes: "css"
+});
+
+manager.registerService("less", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/css-service"),
+    className: "CssService",
+    modes: "less"
+});
+
+manager.registerService("scss", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/css-service"),
+    className: "CssService",
+    modes: "scss"
+});
+
+manager.registerService("json", {
+    features: {signatureHelp: false, documentHighlight: false},
+    module: () => import("ace-linters/build/json-service"),
+    className: "JsonService",
+    modes: "json",
+});
+
+manager.registerService("json5", {
+    features: {signatureHelp: false, documentHighlight: false},
+    module: () => import("ace-linters/build/json-service"),
+    className: "JsonService",
+    modes: "json5",
+});
+
+manager.registerService("typescript", {
+    module: () => import("ace-linters/build/typescript-service"),
+    className: "TypescriptService",
+    modes: "typescript|tsx|javascript|jsx",
+});
+
+manager.registerService("yaml", {
+    features: {signatureHelp: false, documentHighlight: false},
+    module: () => import("ace-linters/build/yaml-service"),
+    className: "YamlService",
+    modes: "yaml",
+});
+
+manager.registerService("xml", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: false, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-linters/build/xml-service"),
+    className: "XmlService",
+    modes: "xml",
+});
+
+manager.registerService("php", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: false, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-linters/build/php-service"),
+    className: "PhpService",
+    modes: "php"
+});
+
+manager.registerService("javascript", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: false, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-linters/build/javascript-service"),
+    className: "JavascriptService",
+    modes: "javascript",
+});
+
+
+manager.registerServer("pythonls", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "python",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:9999/?name=pylsp")
+});
+
+
+
+/*
+
+
+manager.registerService("clang", {
+    module: () => import("ace-clang-linter/build/ace-clang-linter"),
+    className: "AceClangLinter",
+    modes: "c_cpp",
+});
+
+manager.registerService("lua", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: true, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-lua-linter/build/ace-lua-linter"),
+    className: "AceLuaLinter",
+    modes: "lua",
+});
+
+manager.registerService("mysql", {
+    module: () => import("ace-sql-linter/build/mysql-service"),
+    className: "MySQLService",
+    modes: "mysql",
+});
+
+manager.registerService("zig", {
+    module: () => import("ace-zig-linter/build/ace-zig-linter"),
+    className: "AceZigLinter",
+    modes: "zig",
+});
+
+manager.registerService("python", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: true, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-python-ruff-linter/build/python-service"),
+    className: "PythonService",
+    modes: "python",
+});
+
+manager.registerServer("svelte", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "html",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:3030/svelte")
+});
+
+manager.registerServer("astro", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "astro",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:3030/astro"),
+    initializationOptions: {
+        typescript: {
+            tsdk: "node_modules/typescript/lib", //path to typescript server
+        }
+    }
+});
+
+manager.registerServer("go", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "golang",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:3030/go")
+});
+
+manager.registerService("dart", {
+    module: () => import("ace-dart-linter/build/ace-dart-linter"),
+    className: "AceDartLinter",
+    modes: "dart",
+});
+
+manager.registerService("golang", {
+    module: () => import("ace-go-linter/build/ace-go-linter"),
+    className: "AceGoLinter",
+    modes: "go",
+});
+
+
+*/

src/app/editor/editors.component.css

@@ -0,0 +1,3 @@
+.dropzone {
+    height: 80vh;
+}

src/app/editor/editors.component.html

@@ -0,0 +1,6 @@
+<div class="col">
+    <div class="row dropzone" #dropzone dropzone (fileDropped)="onFileDropped($event)">
+        <ng-container #containerRef>
+        </ng-container>
+    </div>
+<div>

src/app/editor/editors.component.ts

@@ -0,0 +1,150 @@
+import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import * as uuid from 'uuid';
+
+import { EditSession } from 'ace-builds';
+import { getModeForPath } from 'ace-builds/src-noconflict/ext-modelist';
+
+import { AceEditorComponent } from "./ace/ace-editor.component";
+import { EditorsService } from '../common/services/editor/editors.service';
+import { TabsService } from '../common/services/editor/tabs/tabs.service';
+
+import { DndDirective } from '../common/directives/dnd.directive';
+import { NewtonFile } from '../common/types/file.type';
+import { ServiceMessage } from '../common/types/service-message.type';
+import { EditorSettings } from "../common/configs/editor.config";
+
+
+
+@Component({
+    selector: 'editors',
+    standalone: true,
+    imports: [
+        DndDirective
+    ],
+    templateUrl: './editors.component.html',
+    styleUrl: './editors.component.css',
+    host: {
+        'class': 'row'
+    }
+})
+export class EditorsComponent {
+    private unsubscribe = new Subject<void>();
+
+    @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
+    editors: Map<string, ComponentRef<AceEditorComponent>>;
+    editorSettings: typeof EditorSettings;
+    files: Map<string, NewtonFile>;
+    activeEditor!: string;
+    lspConfigData!: any;
+
+
+    constructor(
+        private editorsService: EditorsService,
+        private tabsService: TabsService
+    ) {
+        this.editorSettings = EditorSettings;
+        this.editors = new Map<string, ComponentRef<AceEditorComponent>>();
+        this.files   = new Map<string, NewtonFile>();
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.editorsService.getData$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((data: ServiceMessage) => {
+            if (data.action === "set-editor")
+                this.activeEditor = data.uuid;
+        });
+
+        this.getLspConfigData().then((lspConfigData: string) => {
+            this.lspConfigData = JSON.parse(lspConfigData);
+
+            if (this.lspConfigData["message"]) {
+                console.log(
+                    "Warning: LSP this.lspConfigData is a 'message'",
+                    this.lspConfigData
+                );
+                this.lspConfigData = {};
+            }
+
+            let editor = this.createEditor();
+            this.activeEditor = editor.instance.uuid;
+            this.createEditor();
+        })
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+
+    private getLspConfigData(): Promise<string> {
+        return window.fs.getLspConfigData();
+    }
+
+    private createEditor() {
+        const component = this.containerRef.createComponent(AceEditorComponent);
+        component.instance.editorSettings = this.editorSettings;
+        component.instance.uuid = uuid.v4();
+        component.instance.lspConfigData = this.lspConfigData;
+        this.editors.set(component.instance.uuid, component)
+
+        return component;
+    }
+
+    protected onFileDropped(event: any) {
+        this.loadFilesList(event).then((session: EditSession | undefined | null) => {
+	        if ( !session ) return;
+
+	        let editor = this.editors.get(this.activeEditor)?.instance.editor;
+	        editor?.setSession(session);
+        });
+    }
+
+    private async loadFilesList(files: Array<NewtonFile>): Promise<EditSession | undefined | null> {
+	    for (let i = 0; i < files.length; i++) {
+		    const file = files[i];
+		    const path = window.fs.getPathForFile(file);
+
+		    if (!file || !path) continue;
+		    if ( this.files.get(path) ) continue;
+		    
+		    await this.addFile(path, file);
+		    this.addTab(file);
+	    }
+
+	    return files[ files.length - 1 ].session;
+    }
+
+    private async addFile(path: string, file: NewtonFile) {
+	    try {
+	        let pathParts = path.split("/");
+	        file.fname    = pathParts[ pathParts.length - 1 ];
+	        file.path     = path;
+	        file.hash     = btoa(file.path);
+	        let data      = await window.fs.getFileContents(file.path);
+            file.session  = new EditSession(data);
+
+            file.session.setMode(
+                getModeForPath( file.path ).mode
+            );
+
+            this.files.set(file.path, file);
+	    } catch (error) {
+		    console.log(
+		        `----  Error  ----\nPath: ${path}\nMessage: ${error}`
+		    );
+	    }
+    }
+
+    private async addTab(file: NewtonFile) {
+        let message     = new ServiceMessage();
+        message.action  = "create-tab";
+        message.message = file.fname;
+        message.uuid    = file.hash;
+
+        this.tabsService.setData(message);
+    }
+
+}

src/app/editor/tabs/tab/tab.component.css

@@ -0,0 +1,32 @@
+.tab,
+.title,
+.close-button {
+    color: rgba(255, 255, 255, 0.64);
+}
+
+
+/*
+.tab {
+    float: left;
+    clear: left;
+    display: flow;
+}
+*/
+
+
+.title {
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+.close-button {
+    background: rgba(116, 0, 0, 0.64);
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.64);
+    border-width: 1px;
+    border-radius: 0em 1em 0em 0em;
+}
+
+.close-button:hover {
+    background: rgba(256, 0, 0, 0.64);
+}

src/app/editor/tabs/tab/tab.component.html

@@ -0,0 +1,4 @@
+<span class="tab">
+    <span class="title">{{title}}</span>
+    <button class="close-button">X</button>
+</span>

src/app/editor/tabs/tab/tab.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+
+
+@Component({
+    selector: 'tab',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './tab.component.html',
+    styleUrl: './tab.component.css',
+    host: {
+        'class': 'col'
+//        'class': 'col tab'
+    }
+})
+export class TabComponent {
+
+    title: string;
+
+
+    constructor() {
+        this.title = "[NO TITLE]";
+    }
+
+    ngOnDestroy() {
+    }
+
+
+}

src/app/editor/tabs/tabs.component.html

@@ -0,0 +1,2 @@
+<ng-container #containerRef>
+</ng-container>

src/app/editor/tabs/tabs.component.ts

@@ -0,0 +1,57 @@
+import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+
+import { TabComponent } from './tab/tab.component';
+import { TabsService } from '../../common/services/editor/tabs/tabs.service';
+
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'tabs',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './tabs.component.html',
+    styleUrl: './tabs.component.css',
+    host: {
+        'class': 'tabs scroller'
+    }
+})
+export class TabsComponent {
+    private unsubscribe = new Subject<void>();
+
+    @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
+    tabs: Map<string, ComponentRef<TabComponent>>;
+    activeTab!: string;
+
+
+    constructor(private tabsService: TabsService) {
+        this.tabs = new Map<string, ComponentRef<TabComponent>>();
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.tabsService.getData$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((data: ServiceMessage) => {
+            if (data.action === "create-tab")
+                this.createTab(data.message, data.uuid);
+        });
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+
+    private createTab(title: string, uuid: string) {
+        const component = this.containerRef.createComponent(TabComponent);
+        component.instance.title = title;
+        this.tabs.set(uuid, component)
+
+        return component;
+    }
+
+}

src/assets/css/ace-overrides.css

@@ -0,0 +1,14 @@
+/* TAGS */
+
+
+/* IDs */
+
+
+/* CLASSES */
+.ace_editor, .ace_gutter {
+     background-color: rgba(0, 0, 0, 0.0) !important;
+}
+
+.ace_autocomplete {
+    background-color: #25282c !important;
+}

src/assets/css/styles.css

@@ -0,0 +1,116 @@
+/* TAGS */
+
+html {
+/*
+    background-color: rgba(64, 64, 64, 0.64);
+    background-color: rgb(40, 44, 52);
+*/
+    background-color: rgba(40, 44, 52, 0.64);
+    color: rgba(255, 255, 255, 0.64);
+}
+
+body {
+    background-color: rgba(64, 64, 64, 0.0)
+}
+
+
+/* IDs */
+
+
+/* CLASSES */
+
+.tabs {
+    display: flex;
+    overflow: auto;
+    margin-bottom: 0.5em;
+    padding-bottom: 0.4em;
+    padding-top: 0.4em;
+}
+
+
+/*
+.tab {
+    float: left;
+    clear: left;
+    display: contents;
+}
+*/
+
+.tab {
+    display: flex;
+    overflow: auto;
+    float: left;
+    margin-right: 0.5em;
+
+    border-radius: 1em 1em 0em 0em;
+
+    border-top-style: solid;
+    border-top-color: #ffffff64;
+    border-top-width: 2px;
+
+    border-left-style: solid;
+    border-left-color: #ffffff64;
+    border-left-width: 2px;
+
+    border-right-style: solid;
+    border-right-color: #ffffff64;
+    border-right-width: 2px;
+
+}
+
+
+
+
+
+.scroller {
+/*
+    -webkit-scrollbar-color: #00000084 #ffffff64;
+	scrollbar-color: #00000084 #ffffff64;
+*/
+    -webkit-scrollbar-color: #00000084 #ffffff06;
+	-webkit-scrollbar-width: thin;
+	scrollbar-color: #00000084 #ffffff06;
+	scrollbar-width: thin;
+}
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+.page-alert-zone-container {
+    position: sticky;
+    top: 0em;
+    z-index: 2;
+}
+
+
+
+.searching,
+.search-success,
+.search-fail {
+    border-style: solid;
+    color: rgba(125, 125, 125, 1) !important;
+}
+
+.searching      {
+    border-color: rgba(0, 225, 225, 0.64) !important;
+}
+.search-success {
+    background: rgba(136, 204, 39, 0.12) !important;
+    border-color: rgba(136, 204, 39, 1) !important;
+}
+.search-fail    {
+    background: rgba(170, 18, 18, 0.12) !important;
+    border-color: rgba(200, 18, 18, 1) !important;
+}
+
+/* Other message text colors */
+.error   { color: rgb(170, 18, 18); }
+.warning { color: rgb(255, 168, 0); }
+.success { color: rgb(136, 204, 39); }

src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Newton</title>
+    <base href="./">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="resources/newton.png">
+</head>
+<body>
+
+    <div class="container-fluid">
+        <app-root></app-root>
+    </div>
+
+</body>
+</html>

src/main.ts

@@ -0,0 +1,9 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+
+import { AppComponent } from './app/app.component';
+
+
+bootstrapApplication(AppComponent, appConfig).catch(
+    (err) => console.error(err)
+);

src/polyfills.ts

@@ -0,0 +1,11 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+// If you need other polyfills, add them here.

src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */