Add "New Document" button and Ctrl+N shortcut

Added a "New Document" button to the editor's top bar with distinct styling. Implemented Ctrl+N/Cmd+N keyboard shortcut to create a new document. Prompt user for confirmation if there are unsaved changes. Updated CSS to style the new button and integrated it into button style rules.
This commit is contained in:
Michal Vrba
2026-01-30 18:38:21 +01:00
parent e21189e2a9
commit e5edc372fe
2 changed files with 55 additions and 1 deletions
+40
View File
@@ -13,6 +13,9 @@
<!-- Top Bar -->
<div class="top-bar">
<div class="top-bar-left">
<button class="btn-new" @onclick="NewDocument" title="Create new document (Ctrl+N)">
📄 New
</button>
<button class="btn-toggle @(showPreview ? "active" : "")"
@onclick="TogglePreview">
👁️ @(showPreview ? "Hide Preview" : "Show Preview")
@@ -233,6 +236,11 @@
{
await ManualSave();
}
// Ctrl+N or Cmd+N for new document
else if ((e.CtrlKey || e.MetaKey) && e.Key == "n")
{
await NewDocument();
}
}
private async Task ManualSave()
@@ -240,6 +248,38 @@
await SaveContent();
}
private async Task NewDocument()
{
// Ask for confirmation if there are unsaved changes
if (hasUnsavedChanges)
{
bool confirmed = await JSRuntime.InvokeAsync<bool>("confirm",
"You have unsaved changes. Are you sure you want to create a new document?");
if (!confirmed)
return;
}
// Simple approach: Clear current session content
markdownContent = "";
renderedHtml = "";
hasUnsavedChanges = false;
saveStatus = "New Document";
// Save empty content to current session
if (!string.IsNullOrEmpty(sessionId))
{
await SessionService.SaveSessionContentAsync(sessionId, "");
}
// Update UI
await InvokeAsync(StateHasChanged);
// Reset save status after a moment
await Task.Delay(1500);
saveStatus = "Saved";
await InvokeAsync(StateHasChanged);
}
private async Task ToggleShareDropdown()
{
if (!showShareDropdown)
+15 -1
View File
@@ -36,6 +36,7 @@
.btn-toggle,
.btn-share,
.btn-save,
.btn-new,
.btn-copy,
.btn-close {
background: none;
@@ -76,6 +77,18 @@
transform: none;
}
.btn-new {
background-color: var(--success);
color: white;
border-color: var(--success);
}
.btn-new:hover {
background-color: var(--accent);
border-color: var(--accent);
transform: translateY(-1px);
}
.btn-toggle:hover,
.btn-share:hover,
.btn-copy:hover {
@@ -462,7 +475,8 @@
.btn-toggle,
.btn-share,
.btn-save {
.btn-save,
.btn-new {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
}