Merge pull request #182 from Moonlight-Panel/ImproveFileEditor

Added STRG+S support for editor and better saving

Moonlight/App/Services/Sessions/KeyListenerService.cs

@@ -0,0 +1,38 @@
+using Microsoft.JSInterop;
+
+namespace Moonlight.App.Services.Sessions;
+
+public class KeyListenerService
+{
+    private readonly IJSRuntime _jsRuntime;
+    private DotNetObjectReference<KeyListenerService> _objRef;
+
+    public event EventHandler<string> KeyPressed;
+
+    public KeyListenerService(IJSRuntime jsRuntime)
+    {
+        _jsRuntime = jsRuntime;
+    }
+
+    public async Task Initialize()
+    {
+        _objRef = DotNetObjectReference.Create(this);
+        await _jsRuntime.InvokeVoidAsync("moonlight.keyListener.register", _objRef);
+    }
+
+    [JSInvokable]
+    public void OnKeyPress(string key)
+    {
+        KeyPressed?.Invoke(this, key);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        try
+        {
+            await _jsRuntime.InvokeVoidAsync("moonlight.keyListener.unregister", _objRef);
+            _objRef.Dispose();
+        }
+        catch (Exception) { /* ignored */}
+    }
+}

Moonlight/Program.cs

@@ -134,6 +134,7 @@ namespace Moonlight
             builder.Services.AddSingleton<OAuth2Service>();
             builder.Services.AddScoped<DynamicBackgroundService>();
             builder.Services.AddScoped<ServerAddonPluginService>();
+            builder.Services.AddScoped<KeyListenerService>();
 
             builder.Services.AddScoped<SubscriptionService>();
             builder.Services.AddScoped<SubscriptionAdminService>();

Moonlight/Shared/Components/FileManagerPartials/FileEditor.razor

@@ -1,10 +1,15 @@
 @using BlazorMonaco
 @using Moonlight.App.Services
+@using Moonlight.App.Services.Interop
+@using Moonlight.App.Services.Sessions
 @using Moonlight.Shared.Components.Partials
 
 @inject SmartTranslateService TranslationService
+@inject KeyListenerService KeyListenerService
 @inject IJSRuntime JsRuntime
 
+@implements IDisposable
+
 <div class="card bg-black rounded">
     <div class="card-body">
         <MonacoEditor CssClass="h-100" @ref="Editor" Id="vseditor" ConstructionOptions="(x) => EditorOptions"/>
@@ -65,6 +70,16 @@
             },
             AutoIndent = true
         };
+        
+        KeyListenerService.KeyPressed += KeyPressed;
+    }
+
+    private async void KeyPressed(object? sender, string e)
+    {
+        if (e == "saveShortcut")
+        {
+            await Submit();
+        }
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -111,4 +126,10 @@
     {
         return await Editor.GetValue();
     }
+
+    public void Dispose()
+    {
+        Editor.Dispose();
+        KeyListenerService.KeyPressed -= KeyPressed;
+    }
 }

Moonlight/Shared/Components/FileManagerPartials/FileManager.razor

@@ -17,7 +17,7 @@
                 InitialData="@EditorInitialData"
                 Language="@EditorLanguage"
                 OnCancel="() => Cancel()"
-                OnSubmit="(_) => Cancel(true)"
+                OnSubmit="(_) => Save()"
                 HideControls="false">
     </FileEditor>
 }
@@ -255,6 +255,13 @@ else
         return false;
     }
     
+    private async void Save()
+    {
+        var data = await Editor.GetData();
+        await Access.Write(EditingFile, data);
+        await ToastService.Success(SmartTranslateService.Translate("Successfully saved file"));
+    }
+
     private async void Cancel(bool save = false)
     {
         if (save)

Moonlight/Shared/Layouts/MainLayout.razor

@@ -21,6 +21,7 @@
 @inject SmartTranslateService SmartTranslateService
 @inject IpBanService IpBanService
 @inject DynamicBackgroundService DynamicBackgroundService
+@inject KeyListenerService KeyListenerService
 
 @{
     var uri = new Uri(NavigationManager.Uri);
@@ -207,10 +208,14 @@
                 UserProcessed = true;
                 await InvokeAsync(StateHasChanged);
 
+                try
+                {
                     await JsRuntime.InvokeVoidAsync("document.body.removeAttribute", "data-kt-app-reset-transition");
                     await JsRuntime.InvokeVoidAsync("document.body.removeAttribute", "data-kt-app-page-loading");
                     await JsRuntime.InvokeVoidAsync("KTMenu.createInstances");
                     await JsRuntime.InvokeVoidAsync("KTDrawer.createInstances");
+                }
+                catch (Exception){ /* ignore errors to make sure that the session call is executed */ }
 
                 await SessionService.Register();
 
@@ -236,6 +241,8 @@
                         });
                 }
 
+                await KeyListenerService.Initialize();
+
                 RunDelayedMenu(0);
                 RunDelayedMenu(1);
                 RunDelayedMenu(3);
@@ -252,6 +259,8 @@
     {
         SessionService.Close();
 
+        await KeyListenerService.DisposeAsync();
+
         if (User != null)
         {
             await Event.Off($"supportChat.{User.Id}.message", this);

Moonlight/wwwroot/assets/js/moonlight.js

@@ -347,5 +347,28 @@
                 anchorElement.remove();
                 URL.revokeObjectURL(url);
             }
+        },
+        keyListener: {
+            register: function (dotNetObjRef)
+            {
+                moonlight.keyListener.listener = (event) => 
+                {
+                    // filter here what key events should be sent to moonlight
+                    
+                    console.log(event);
+
+                    if(event.code === "KeyS" && event.ctrlKey)
+                    {
+                        event.preventDefault();
+                        dotNetObjRef.invokeMethodAsync('OnKeyPress', "saveShortcut");
+                    }
+                };
+                
+                window.addEventListener('keydown', moonlight.keyListener.listener);
+            },
+            unregister: function (dotNetObjRef)
+            {
+                window.removeEventListener('keydown', moonlight.keyListener.listener);
+            }
         }
     };