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 -->
|
<!-- Top Bar -->
|
||||||
<div class="top-bar">
|
<div class="top-bar">
|
||||||
<div class="top-bar-left">
|
<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" : "")"
|
<button class="btn-toggle @(showPreview ? "active" : "")"
|
||||||
@onclick="TogglePreview">
|
@onclick="TogglePreview">
|
||||||
👁️ @(showPreview ? "Hide Preview" : "Show Preview")
|
👁️ @(showPreview ? "Hide Preview" : "Show Preview")
|
||||||
@@ -233,6 +236,11 @@
|
|||||||
{
|
{
|
||||||
await ManualSave();
|
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()
|
private async Task ManualSave()
|
||||||
@@ -240,6 +248,38 @@
|
|||||||
await SaveContent();
|
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()
|
private async Task ToggleShareDropdown()
|
||||||
{
|
{
|
||||||
if (!showShareDropdown)
|
if (!showShareDropdown)
|
||||||
|
|||||||
@@ -36,6 +36,7 @@
|
|||||||
.btn-toggle,
|
.btn-toggle,
|
||||||
.btn-share,
|
.btn-share,
|
||||||
.btn-save,
|
.btn-save,
|
||||||
|
.btn-new,
|
||||||
.btn-copy,
|
.btn-copy,
|
||||||
.btn-close {
|
.btn-close {
|
||||||
background: none;
|
background: none;
|
||||||
@@ -76,6 +77,18 @@
|
|||||||
transform: none;
|
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-toggle:hover,
|
||||||
.btn-share:hover,
|
.btn-share:hover,
|
||||||
.btn-copy:hover {
|
.btn-copy:hover {
|
||||||
@@ -462,7 +475,8 @@
|
|||||||
|
|
||||||
.btn-toggle,
|
.btn-toggle,
|
||||||
.btn-share,
|
.btn-share,
|
||||||
.btn-save {
|
.btn-save,
|
||||||
|
.btn-new {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
padding: 0.375rem 0.75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user