Add shared document editor and preview components
Introduced SharedEditor.razor and SharedPreview.razor for editing and viewing shared documents via tokenized links. Includes auto-save, markdown preview, permission checks, and dedicated responsive styles for both editable and view-only modes. Enables secure sharing of documents with user-friendly interfaces.
This commit is contained in:
Michal Vrba
@@ -0,0 +1,233 @@
|
||||
@page "/e/{token}"
|
||||
@rendermode InteractiveServer
|
||||
@using Notemark.Services
|
||||
@inject IShareService ShareService
|
||||
@inject ISessionService SessionService
|
||||
@inject IMarkdownService MarkdownService
|
||||
@inject NavigationManager Navigation
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<PageTitle>Notemark - Edit Shared Document</PageTitle>
|
||||
|
||||
@if (isLoading)
|
||||
{
|
||||
<div class="share-loading">
|
||||
<div class="loading-content">
|
||||
<h2>Loading shared document...</h2>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (errorMessage != null)
|
||||
{
|
||||
<div class="share-error">
|
||||
<div class="error-content">
|
||||
<h2>⚠️ Unable to Load Document</h2>
|
||||
<p>@errorMessage</p>
|
||||
<button class="btn-home" @onclick="GoHome">Create New Document</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="editor-container">
|
||||
<!-- Top Bar -->
|
||||
<div class="top-bar">
|
||||
<div class="top-bar-left">
|
||||
<h2 class="shared-title">Notemark</h2>
|
||||
<span class="share-badge editable">Shared - Editable</span>
|
||||
<button class="btn-toggle @(showPreview ? "active" : "")"
|
||||
@onclick="TogglePreview">
|
||||
@(showPreview ? "Hide Preview" : "Show Preview")
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="top-bar-center">
|
||||
<span class="save-status @saveStatus.ToLower()">@saveStatus</span>
|
||||
</div>
|
||||
|
||||
<div class="top-bar-right">
|
||||
<button class="btn-view" @onclick="GoToPreview">👁️ View</button>
|
||||
<button class="btn-home" @onclick="GoHome">New Doc</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Editor Layout -->
|
||||
<div class="editor-layout @(showPreview ? "split-view" : "full-view")">
|
||||
<!-- Editor Pane -->
|
||||
<div class="editor-pane">
|
||||
<textarea class="markdown-editor"
|
||||
@bind="markdownContent"
|
||||
@oninput="OnContentChanged"
|
||||
@onkeydown="OnKeyDown"
|
||||
placeholder="Start editing this shared document..."
|
||||
spellcheck="true">
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Preview Pane -->
|
||||
@if (showPreview)
|
||||
{
|
||||
<div class="preview-pane">
|
||||
<div class="preview-content">
|
||||
@((MarkupString)renderedHtml)
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
[Parameter] public string Token { get; set; } = "";
|
||||
|
||||
private bool isLoading = true;
|
||||
private string? errorMessage = null;
|
||||
private ShareToken? shareToken = null;
|
||||
private string markdownContent = "";
|
||||
private string renderedHtml = "";
|
||||
private bool showPreview = false;
|
||||
private string saveStatus = "Saved";
|
||||
|
||||
// Auto-save timer
|
||||
private Timer? autoSaveTimer;
|
||||
private bool hasUnsavedChanges = false;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await LoadSharedDocument();
|
||||
}
|
||||
|
||||
private async Task LoadSharedDocument()
|
||||
{
|
||||
try
|
||||
{
|
||||
isLoading = true;
|
||||
|
||||
// Validate token
|
||||
if (string.IsNullOrEmpty(Token))
|
||||
{
|
||||
errorMessage = "Invalid share link.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Get share token info
|
||||
shareToken = await ShareService.GetShareTokenAsync(Token);
|
||||
if (shareToken == null)
|
||||
{
|
||||
errorMessage = "Share link not found or has expired.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if token is editable and valid
|
||||
if (shareToken.Mode != "editable")
|
||||
{
|
||||
errorMessage = "This share link is view-only. You cannot edit this document.";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!await ShareService.IsValidTokenAsync(Token))
|
||||
{
|
||||
errorMessage = "This share link has been revoked or has expired.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Load the document content
|
||||
markdownContent = await SessionService.LoadSessionContentAsync(shareToken.SessionId);
|
||||
|
||||
// Render initial preview if needed
|
||||
if (showPreview)
|
||||
{
|
||||
renderedHtml = MarkdownService.RenderToHtml(markdownContent);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
errorMessage = "An error occurred while loading the document.";
|
||||
}
|
||||
finally
|
||||
{
|
||||
isLoading = false;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task OnContentChanged(ChangeEventArgs e)
|
||||
{
|
||||
markdownContent = e.Value?.ToString() ?? "";
|
||||
hasUnsavedChanges = true;
|
||||
saveStatus = "Saving...";
|
||||
|
||||
// Update preview if visible
|
||||
if (showPreview)
|
||||
{
|
||||
renderedHtml = MarkdownService.RenderToHtml(markdownContent);
|
||||
}
|
||||
|
||||
// Debounce auto-save
|
||||
autoSaveTimer?.Dispose();
|
||||
autoSaveTimer = new Timer(async _ => await AutoSave(), null, 1000, Timeout.Infinite);
|
||||
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
private async Task OnKeyDown(KeyboardEventArgs e)
|
||||
{
|
||||
// Ctrl+S or Cmd+S for manual save
|
||||
if ((e.CtrlKey || e.MetaKey) && e.Key == "s")
|
||||
{
|
||||
await SaveContent();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task AutoSave()
|
||||
{
|
||||
if (hasUnsavedChanges && shareToken != null)
|
||||
{
|
||||
await SaveContent();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task SaveContent()
|
||||
{
|
||||
if (shareToken == null)
|
||||
return;
|
||||
|
||||
try
|
||||
{
|
||||
await SessionService.SaveSessionContentAsync(shareToken.SessionId, markdownContent);
|
||||
hasUnsavedChanges = false;
|
||||
saveStatus = "Saved";
|
||||
}
|
||||
catch
|
||||
{
|
||||
saveStatus = "Error";
|
||||
}
|
||||
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
private void TogglePreview()
|
||||
{
|
||||
showPreview = !showPreview;
|
||||
|
||||
if (showPreview)
|
||||
{
|
||||
renderedHtml = MarkdownService.RenderToHtml(markdownContent);
|
||||
}
|
||||
}
|
||||
|
||||
private void GoToPreview()
|
||||
{
|
||||
Navigation.NavigateTo($"/s/{Token}");
|
||||
}
|
||||
|
||||
private void GoHome()
|
||||
{
|
||||
Navigation.NavigateTo("/");
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
autoSaveTimer?.Dispose();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/* Shared Editor Styles - Extends main editor styles */
|
||||
|
||||
.shared-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.top-bar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.share-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.share-badge.editable {
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--primary-text);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Mobile adjustments for shared editor */
|
||||
@media (max-width: 768px) {
|
||||
.top-bar-left {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.shared-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.share-badge {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.btn-toggle,
|
||||
.btn-view,
|
||||
.btn-home {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
@page "/s/{token}"
|
||||
@rendermode InteractiveServer
|
||||
@using Notemark.Services
|
||||
@inject IShareService ShareService
|
||||
@inject ISessionService SessionService
|
||||
@inject IMarkdownService MarkdownService
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<PageTitle>Notemark - Shared Document</PageTitle>
|
||||
|
||||
@if (isLoading)
|
||||
{
|
||||
<div class="share-loading">
|
||||
<div class="loading-content">
|
||||
<h2>Loading shared document...</h2>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (errorMessage != null)
|
||||
{
|
||||
<div class="share-error">
|
||||
<div class="error-content">
|
||||
<h2>⚠️ Unable to Load Document</h2>
|
||||
<p>@errorMessage</p>
|
||||
<button class="btn-home" @onclick="GoHome">Create New Document</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="shared-container">
|
||||
<!-- Header Bar -->
|
||||
<div class="shared-header">
|
||||
<div class="header-left">
|
||||
<h1>Notemark</h1>
|
||||
<span class="share-badge readonly">View Only</span>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
@if (shareToken?.Mode == "editable")
|
||||
{
|
||||
<button class="btn-edit" @onclick="GoToEditor">✏️ Edit</button>
|
||||
}
|
||||
<button class="btn-home" @onclick="GoHome">Create New</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="shared-content">
|
||||
@if (string.IsNullOrEmpty(markdownContent))
|
||||
{
|
||||
<div class="empty-content">
|
||||
<h3>Empty Document</h3>
|
||||
<p>This document doesn't have any content yet.</p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="preview-content">
|
||||
@((MarkupString)renderedHtml)
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
[Parameter] public string Token { get; set; } = "";
|
||||
|
||||
private bool isLoading = true;
|
||||
private string? errorMessage = null;
|
||||
private ShareToken? shareToken = null;
|
||||
private string markdownContent = "";
|
||||
private string renderedHtml = "";
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await LoadSharedDocument();
|
||||
}
|
||||
|
||||
private async Task LoadSharedDocument()
|
||||
{
|
||||
try
|
||||
{
|
||||
isLoading = true;
|
||||
|
||||
// Validate token
|
||||
if (string.IsNullOrEmpty(Token))
|
||||
{
|
||||
errorMessage = "Invalid share link.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Get share token info
|
||||
shareToken = await ShareService.GetShareTokenAsync(Token);
|
||||
if (shareToken == null)
|
||||
{
|
||||
errorMessage = "Share link not found or has expired.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if token is still valid
|
||||
if (!await ShareService.IsValidTokenAsync(Token))
|
||||
{
|
||||
errorMessage = "This share link has been revoked or has expired.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Load the document content
|
||||
markdownContent = await SessionService.LoadSessionContentAsync(shareToken.SessionId);
|
||||
|
||||
// Render to HTML
|
||||
renderedHtml = MarkdownService.RenderToHtml(markdownContent);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
errorMessage = "An error occurred while loading the document.";
|
||||
}
|
||||
finally
|
||||
{
|
||||
isLoading = false;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
|
||||
private void GoToEditor()
|
||||
{
|
||||
if (shareToken?.Mode == "editable")
|
||||
{
|
||||
Navigation.NavigateTo($"/e/{Token}");
|
||||
}
|
||||
}
|
||||
|
||||
private void GoHome()
|
||||
{
|
||||
Navigation.NavigateTo("/");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
/* Shared Document Styles */
|
||||
|
||||
.share-loading,
|
||||
.share-error {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.loading-content,
|
||||
.error-content {
|
||||
text-align: center;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.loading-content h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--secondary-text);
|
||||
}
|
||||
|
||||
.error-content h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.error-content p {
|
||||
margin: 0 0 2rem 0;
|
||||
color: var(--secondary-text);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.shared-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.shared-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--surface);
|
||||
border-bottom: 2px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-left h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.share-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.share-badge.readonly {
|
||||
background-color: var(--secondary-text);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.share-badge.editable {
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-edit,
|
||||
.btn-home {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background-color: var(--surface);
|
||||
color: var(--primary-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: var(--accent-hover);
|
||||
border-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-home:hover {
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.shared-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
padding: 4rem 2rem;
|
||||
text-align: center;
|
||||
color: var(--secondary-text);
|
||||
}
|
||||
|
||||
.empty-content h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-content p {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Markdown Preview Styles (same as editor) */
|
||||
.preview-content h1,
|
||||
.preview-content h2,
|
||||
.preview-content h3,
|
||||
.preview-content h4,
|
||||
.preview-content h5,
|
||||
.preview-content h6 {
|
||||
color: var(--primary-text);
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-content h1 { font-size: 2.5em; margin-top: 0; }
|
||||
.preview-content h2 { font-size: 2em; }
|
||||
.preview-content h3 { font-size: 1.5em; }
|
||||
|
||||
.preview-content p {
|
||||
margin-bottom: 1.5em;
|
||||
color: var(--primary-text);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.preview-content code {
|
||||
background-color: var(--bg);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
|
||||
font-size: 0.9em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.preview-content pre {
|
||||
background-color: var(--bg);
|
||||
padding: 1.5em;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5em;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.preview-content pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.preview-content blockquote {
|
||||
border-left: 4px solid var(--accent);
|
||||
padding-left: 1.5em;
|
||||
margin-left: 0;
|
||||
margin-bottom: 1.5em;
|
||||
color: var(--secondary-text);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.preview-content ul,
|
||||
.preview-content ol {
|
||||
margin-bottom: 1.5em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.preview-content li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.preview-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.preview-content th,
|
||||
.preview-content td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.75em 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.preview-content th {
|
||||
background-color: var(--bg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.preview-content hr {
|
||||
border: none;
|
||||
border-top: 2px solid var(--border);
|
||||
margin: 3em 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.shared-header {
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.btn-edit,
|
||||
.btn-home {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user