feat: add frontend UI for SimpleNote Web
- Vanilla JS frontend with dark theme - Dashboard with sidebar (libraries tree, tags), document grid, search - Document viewer with markdown rendering and metadata panel - Document editor with split write/preview and formatting toolbar - Login screen with token authentication - All styled according to UI/UX specs (dark theme, accent #00d4aa) - API client for all endpoints - Responsive design
This commit is contained in:
Hiro
259
public/js/views/editor.js
Normal file
259
public/js/views/editor.js
Normal file
@@ -0,0 +1,259 @@
|
||||
// Editor View
|
||||
|
||||
import { api } from '../api.js';
|
||||
|
||||
export async function renderEditor(app) {
|
||||
const { id, libraryId } = app.state.params;
|
||||
let doc = null;
|
||||
let libraries = [];
|
||||
|
||||
if (id) {
|
||||
try {
|
||||
doc = await api.getDocument(id);
|
||||
} catch (e) {
|
||||
app.showToast('Failed to load document', 'error');
|
||||
app.navigate('dashboard');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
libraries = await api.getLibraries();
|
||||
} catch (e) {}
|
||||
|
||||
const isNew = !id;
|
||||
const appEl = document.getElementById('app');
|
||||
|
||||
let formData = {
|
||||
title: doc?.title || '',
|
||||
content: doc?.content || '',
|
||||
tags: doc?.tags?.join(', ') || '',
|
||||
type: doc?.type || 'general',
|
||||
priority: doc?.priority || 'medium',
|
||||
status: doc?.status || 'draft',
|
||||
libraryId: doc?.libraryId || libraryId || ''
|
||||
};
|
||||
|
||||
let showPreview = false;
|
||||
let hasChanges = false;
|
||||
|
||||
function render() {
|
||||
appEl.innerHTML = `
|
||||
<header class="app-header">
|
||||
<button class="btn btn-ghost" onclick="handleCancel()">Cancel</button>
|
||||
<span style="flex:1;margin-left:16px">${isNew ? 'New Document' : 'Editing: ' + escapeHtml(formData.title)}</span>
|
||||
<button class="btn btn-primary" onclick="handleSave()">Save</button>
|
||||
</header>
|
||||
<main class="main-content">
|
||||
<div class="editor-container">
|
||||
<form class="editor-form" id="editor-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="flex:2">
|
||||
<label for="title">Title</label>
|
||||
<input type="text" id="title" value="${escapeHtml(formData.title)}" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="libraryId">Library</label>
|
||||
<select id="libraryId">
|
||||
<option value="">None</option>
|
||||
${libraries.map(l => `<option value="${l.id}" ${formData.libraryId === l.id ? 'selected' : ''}>${escapeHtml(l.name)}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="type">Type</label>
|
||||
<select id="type">
|
||||
<option value="requirement" ${formData.type === 'requirement' ? 'selected' : ''}>Requirement</option>
|
||||
<option value="note" ${formData.type === 'note' ? 'selected' : ''}>Note</option>
|
||||
<option value="spec" ${formData.type === 'spec' ? 'selected' : ''}>Specification</option>
|
||||
<option value="general" ${formData.type === 'general' ? 'selected' : ''}>General</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status">Status</label>
|
||||
<select id="status">
|
||||
<option value="draft" ${formData.status === 'draft' ? 'selected' : ''}>Draft</option>
|
||||
<option value="approved" ${formData.status === 'approved' ? 'selected' : ''}>Approved</option>
|
||||
<option value="implemented" ${formData.status === 'implemented' ? 'selected' : ''}>Implemented</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="priority">Priority</label>
|
||||
<select id="priority">
|
||||
<option value="high" ${formData.priority === 'high' ? 'selected' : ''}>🔴 High</option>
|
||||
<option value="medium" ${formData.priority === 'medium' ? 'selected' : ''}>🟡 Medium</option>
|
||||
<option value="low" ${formData.priority === 'low' ? 'selected' : ''}>🟢 Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="tags">Tags (comma-separated)</label>
|
||||
<input type="text" id="tags" value="${escapeHtml(formData.tags)}" placeholder="backend, api, auth">
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<div class="editor-toolbar">
|
||||
<button type="button" class="toolbar-btn" onclick="insertFormat('**', '**')" title="Bold">B</button>
|
||||
<button type="button" class="toolbar-btn" onclick="insertFormat('*', '*')" title="Italic"><em>I</em></button>
|
||||
<span class="toolbar-separator"></span>
|
||||
<button type="button" class="toolbar-btn" onclick="insertLine('# ')" title="Heading 1">H1</button>
|
||||
<button type="button" class="toolbar-btn" onclick="insertLine('## ')" title="Heading 2">H2</button>
|
||||
<button type="button" class="toolbar-btn" onclick="insertLine('### ')" title="Heading 3">H3</button>
|
||||
<span class="toolbar-separator"></span>
|
||||
<button type="button" class="toolbar-btn" onclick="insertLine('- ')" title="List">•</button>
|
||||
<button type="button" class="toolbar-btn" onclick="insertLine('1. ')" title="Numbered List">1.</button>
|
||||
<button type="button" class="toolbar-btn" onclick="insertLine('- [ ] ')" title="Task">☐</button>
|
||||
<span class="toolbar-separator"></span>
|
||||
<button type="button" class="toolbar-btn" onclick="insertFormat('\`', '\`')" title="Code"></></button>
|
||||
<div class="toolbar-tabs">
|
||||
<button type="button" class="tab-btn ${!showPreview ? 'active' : ''}" onclick="togglePreview(false)">Write</button>
|
||||
<button type="button" class="tab-btn ${showPreview ? 'active' : ''}" onclick="togglePreview(true)">Preview</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-content ${showPreview ? 'show-preview' : ''}" id="editor-content">
|
||||
<div class="editor-pane">
|
||||
<textarea id="content" placeholder="Write your content in Markdown...">${escapeHtml(formData.content)}</textarea>
|
||||
</div>
|
||||
<div class="preview-pane prose">${renderMarkdown(formData.content)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
`;
|
||||
|
||||
// Event listeners
|
||||
const titleInput = document.getElementById('title');
|
||||
const contentInput = document.getElementById('content');
|
||||
const tagsInput = document.getElementById('tags');
|
||||
const typeInput = document.getElementById('type');
|
||||
const statusInput = document.getElementById('status');
|
||||
const priorityInput = document.getElementById('priority');
|
||||
const libraryInput = document.getElementById('libraryId');
|
||||
|
||||
const inputs = [titleInput, contentInput, tagsInput, typeInput, statusInput, priorityInput, libraryInput];
|
||||
inputs.forEach(input => {
|
||||
if (input) {
|
||||
input.addEventListener('input', () => {
|
||||
hasChanges = true;
|
||||
updateFormData();
|
||||
if (showPreview) {
|
||||
document.querySelector('.preview-pane').innerHTML = renderMarkdown(formData.content);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.insertFormat = (before, after) => {
|
||||
const textarea = document.getElementById('content');
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const text = textarea.value;
|
||||
const selected = text.substring(start, end);
|
||||
textarea.value = text.substring(0, start) + before + selected + after + text.substring(end);
|
||||
textarea.focus();
|
||||
textarea.selectionStart = start + before.length;
|
||||
textarea.selectionEnd = end + before.length;
|
||||
hasChanges = true;
|
||||
};
|
||||
|
||||
window.insertLine = (prefix) => {
|
||||
const textarea = document.getElementById('content');
|
||||
const start = textarea.selectionStart;
|
||||
const text = textarea.value;
|
||||
// Find start of current line
|
||||
let lineStart = start;
|
||||
while (lineStart > 0 && text[lineStart - 1] !== '\n') lineStart--;
|
||||
textarea.value = text.substring(0, lineStart) + prefix + text.substring(lineStart);
|
||||
textarea.focus();
|
||||
textarea.selectionStart = textarea.selectionEnd = lineStart + prefix.length;
|
||||
hasChanges = true;
|
||||
};
|
||||
|
||||
window.togglePreview = (show) => {
|
||||
showPreview = show;
|
||||
const content = document.getElementById('editor-content');
|
||||
if (show) {
|
||||
content.classList.add('show-preview');
|
||||
} else {
|
||||
content.classList.remove('show-preview');
|
||||
}
|
||||
};
|
||||
|
||||
window.handleCancel = async () => {
|
||||
if (hasChanges) {
|
||||
const confirmed = await app.confirmDelete('You have unsaved changes. Discard?');
|
||||
if (!confirmed) return;
|
||||
}
|
||||
app.navigate('dashboard');
|
||||
};
|
||||
|
||||
window.handleSave = async () => {
|
||||
updateFormData();
|
||||
|
||||
const data = {
|
||||
title: formData.title,
|
||||
content: formData.content,
|
||||
tags: formData.tags.split(',').map(t => t.trim()).filter(t => t),
|
||||
type: formData.type,
|
||||
priority: formData.priority,
|
||||
status: formData.status,
|
||||
libraryId: formData.libraryId || null
|
||||
};
|
||||
|
||||
try {
|
||||
if (isNew) {
|
||||
await api.createDocument(data);
|
||||
} else {
|
||||
await api.updateDocument(id, data);
|
||||
}
|
||||
app.showToast('Document saved', 'success');
|
||||
app.navigate('dashboard');
|
||||
} catch (e) {
|
||||
app.showToast('Failed to save: ' + e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
function updateFormData() {
|
||||
formData = {
|
||||
title: titleInput.value,
|
||||
content: contentInput.value,
|
||||
tags: tagsInput.value,
|
||||
type: typeInput.value,
|
||||
priority: priorityInput.value,
|
||||
status: statusInput.value,
|
||||
libraryId: libraryInput.value
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
render();
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function renderMarkdown(content) {
|
||||
if (!content) return '<p style="color:var(--color-text-muted)">Nothing to preview</p>';
|
||||
|
||||
if (typeof marked !== 'undefined') {
|
||||
return marked.parse(content);
|
||||
}
|
||||
|
||||
// Fallback
|
||||
return content
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/^### (.+)$/gm, '<h3>$1</h3>')
|
||||
.replace(/^## (.+)$/gm, '<h2>$1</h2>')
|
||||
.replace(/^# (.+)$/gm, '<h1>$1</h1>')
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||
.replace(/`(.+?)`/g, '<code>$1</code>')
|
||||
.replace(/\n\n/g, '</p><p>');
|
||||
}
|
||||
Reference in New Issue
Block a user