added context menu for lsp modal field; cleaned up context menu css locations

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

@@ -10,24 +10,3 @@
     border-width: thin;
     border-color: rgba(124, 124, 124, 1);
 }
-
-
-.contextMenu {
-    display: inline-table;
-    z-index: 500;
-    position: absolute;
-    min-width: 2em;
-    padding: 0.2em;
-    top: 0em;
-    right: 0em;
-    background-color: gray;
-}
-
-.contextMenu li:hover {
-    background-color: rgba(0, 124, 0, 0.64);
-    cursor: pointer;
-}
-
-.contextMenu li {
-    padding: 0em 0.2em;
-}

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

@@ -4,7 +4,7 @@
 <ul #contextMenu
     class="contextMenu"
     [hidden]="!showContextMenu"
-    (blur)="hideContextMenu"
+    (blur)="hideContextMenu()"
     (click)="contextMenuClicked($event)"
 >
     <li command="cutText">Cut</li>

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

@@ -3,7 +3,9 @@
     <div class="row mt-2 mb-3">
 
         <div class="col clear-right-padding">
-            <div class="input-group-sm">
+            <div class="input-group-sm"
+                (mouseup)="handleActionMouseUp($event)"
+            >
                 <label class="form-control" [innerText]="lspManagerService.workspaceFolder || 'Project Path...'">
                 </label>
             </div>
@@ -63,4 +65,13 @@
 
     </div>
 
-</div>
+</div>
+
+<ul #contextMenu
+    class="contextMenu"
+    [hidden]="!showContextMenu"
+    (blur)="hideContextMenu"
+    (click)="contextMenuClicked($event)"
+>
+    <li command="pasteText">Paste</li>
+</ul>

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

@@ -14,6 +14,8 @@ import { CodeViewComponent } from '../code-view/view.component';
 
 import { ServiceMessage } from '../../common/types/service-message.type';
 
+import { ButtonMap } from '../../common/constants/button.map';
+
 
 
 @Component({
@@ -43,6 +45,9 @@ export class LspManagerComponent {
     editor: any;
     activeFile: any;
 
+    @ViewChild('contextMenu') contextMenu!: ElementRef;
+    public showContextMenu: boolean = false;
+
 
     constructor() {
         this.loadSubscribers();
@@ -83,6 +88,47 @@ export class LspManagerComponent {
         });
     }
 
+    protected handleActionMouseUp(event: any): void {
+        if (ButtonMap.LEFT === event.button) return;
+
+        let target = event.target;
+
+        let menuElm = this.contextMenu.nativeElement;
+        let pageX = event.clientX;
+        let pageY = event.clientY;
+
+        const origin = {
+            left: pageX + 5,
+            top: pageY - 5
+        };
+
+        menuElm.style.left   = `${origin.left}px`;
+        menuElm.style.top    = `${origin.top}px`;
+        this.showContextMenu = true;
+    }
+
+    public hideContextMenu() {
+        this.showContextMenu = false;
+    }
+
+    public contextMenuClicked(event: any) {
+        this.showContextMenu = false;
+
+        const command = event.target.getAttribute("command");
+        const args    = event.target.getAttribute("args");
+
+        if (!command) return;
+
+        this[command]( (args) ? args : null );
+    }
+
+    public pasteText() {
+        navigator.clipboard.readText().then((pasteText) => {
+            if (pasteText.includes("\n") || !pasteText.startsWith("/")) return;
+            this.lspManagerService.workspaceFolder = pasteText;
+        });
+    }
+
     public clearWorkspaceFolder() {
         this.lspManagerService.workspaceFolder = "";
     }

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

@@ -45,26 +45,6 @@
     align-self: center;
 }
 
-.contextMenu {
-    display: inline-table;
-    z-index: 500;
-    position: absolute;
-    min-width: 2em;
-    padding: 0.2em;
-    top: 0em;
-    right: 0em;
-    background-color: gray;
-}
-
-.contextMenu li:hover {
-    background-color: rgba(0, 124, 0, 0.64);
-    cursor: pointer;
-}
-
-.contextMenu li {
-    padding: 0em 0.2em;
-}
-
 .close-button {
     background: rgba(116, 0, 0, 0.64);
     border-style: solid;

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

@@ -25,7 +25,7 @@
 <ul #contextMenu
     class="contextMenu"
     [hidden]="!showContextMenu"
-    (blur)="hideContextMenu"
+    (blur)="hideContextMenu()"
     (click)="contextMenuClicked($event)"
 >
     <li command="close">Close</li>

src/assets/css/styles.css

@@ -72,6 +72,28 @@
 
 
 
+.contextMenu {
+    z-index: 999;
+    overflow: auto;
+    position: absolute;
+    min-width: 2em;
+    max-width: 8em;
+    padding: 0.2em;
+    top: 0em;
+    right: 0em;
+    background-color: gray;
+}
+
+.contextMenu li:hover {
+    background-color: rgba(0, 124, 0, 0.64);
+    cursor: pointer;
+}
+
+.contextMenu li {
+    padding: 0em 0.2em;
+}
+
+
 .zero-margin-padding {
     margin: 0px;
     padding: 0px;