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:
@@ -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)
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user