600 lines
18 KiB
HTML
600 lines
18 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="timetrack-container note-editor-container">
|
|
<div class="editor-header">
|
|
<h2>{% if note %}Edit Note{% else %}Create Note{% endif %}</h2>
|
|
<div class="editor-actions">
|
|
<a href="{{ url_for('notes_list') }}" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST" id="note-form">
|
|
<div class="editor-layout">
|
|
<!-- Editor Panel -->
|
|
<div class="editor-panel">
|
|
<div class="form-group">
|
|
<label for="title">Title</label>
|
|
<input type="text" id="title" name="title" class="form-control"
|
|
value="{{ note.title if note else '' }}" required autofocus>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="visibility">Visibility</label>
|
|
<select id="visibility" name="visibility" class="form-control" required>
|
|
<option value="Private" {% if not note or note.visibility.value == 'Private' %}selected{% endif %}>
|
|
🔒 Private - Only you can see this
|
|
</option>
|
|
<option value="Team" {% if note and note.visibility.value == 'Team' %}selected{% endif %}>
|
|
👥 Team - Your team members can see this
|
|
</option>
|
|
<option value="Company" {% if note and note.visibility.value == 'Company' %}selected{% endif %}>
|
|
🏢 Company - Everyone in your company can see this
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="project_id">Project (Optional)</label>
|
|
<select id="project_id" name="project_id" class="form-control">
|
|
<option value="">No project</option>
|
|
{% for project in projects %}
|
|
<option value="{{ project.id }}" {% if note and note.project_id == project.id %}selected{% endif %}>
|
|
{{ project.code }} - {{ project.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="task_id">Task (Optional)</label>
|
|
<select id="task_id" name="task_id" class="form-control">
|
|
<option value="">No task</option>
|
|
{% for task in tasks %}
|
|
<option value="{{ task.id }}" {% if note and note.task_id == task.id %}selected{% endif %}>
|
|
#{{ task.id }} - {{ task.title }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="tags">Tags (comma-separated)</label>
|
|
<input type="text" id="tags" name="tags" class="form-control"
|
|
placeholder="documentation, meeting-notes, technical"
|
|
value="{{ ', '.join(note.tags) if note and note.tags else '' }}">
|
|
</div>
|
|
|
|
<div class="form-group editor-group">
|
|
<label for="content">Content (Markdown)</label>
|
|
<div class="editor-toolbar">
|
|
<button type="button" class="toolbar-btn toolbar-bold" onclick="insertMarkdown('**', '**')" title="Bold">
|
|
<b>B</b>
|
|
</button>
|
|
<button type="button" class="toolbar-btn toolbar-italic" onclick="insertMarkdown('*', '*')" title="Italic">
|
|
<i>I</i>
|
|
</button>
|
|
<button type="button" class="toolbar-btn toolbar-code" onclick="insertMarkdown('`', '`')" title="Inline Code">
|
|
</>
|
|
</button>
|
|
<button type="button" class="toolbar-btn toolbar-code-block" onclick="insertMarkdown('```\\n', '\\n```')" title="Code Block">
|
|
[ ]
|
|
</button>
|
|
<span class="toolbar-separator"></span>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('# ', '')" title="Heading 1">
|
|
H1
|
|
</button>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('## ', '')" title="Heading 2">
|
|
H2
|
|
</button>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('### ', '')" title="Heading 3">
|
|
H3
|
|
</button>
|
|
<span class="toolbar-separator"></span>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('- ', '')" title="Bullet List">
|
|
≡
|
|
</button>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('1. ', '')" title="Numbered List">
|
|
≣
|
|
</button>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('> ', '')" title="Quote">
|
|
❞
|
|
</button>
|
|
<span class="toolbar-separator"></span>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('[', '](url)')" title="Link">
|
|
🔗
|
|
</button>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('')" title="Image">
|
|
🖼
|
|
</button>
|
|
<button type="button" class="toolbar-btn" onclick="insertMarkdown('---\\n', '')" title="Horizontal Rule">
|
|
—
|
|
</button>
|
|
</div>
|
|
<div id="ace-editor" class="ace-editor-container">{{ note.content if note else '' }}</div>
|
|
<textarea id="content" name="content" class="form-control markdown-editor"
|
|
style="display: none;" required>{{ note.content if note else '' }}</textarea>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">
|
|
{% if note %}Update Note{% else %}Create Note{% endif %}
|
|
</button>
|
|
<a href="{{ url_for('notes_list') }}" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Panel -->
|
|
<div class="preview-panel">
|
|
<h3>Preview</h3>
|
|
<div id="preview-content" class="markdown-content">
|
|
<p class="preview-placeholder">Start typing to see the preview...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{% if note and note.linked_notes %}
|
|
<div class="linked-notes-section">
|
|
<h3>Linked Notes</h3>
|
|
<div class="linked-notes-list">
|
|
{% for link in note.linked_notes %}
|
|
<div class="linked-note-item">
|
|
<a href="{{ url_for('view_note', slug=link.target_note.slug) }}">
|
|
{{ link.target_note.title }}
|
|
</a>
|
|
<span class="link-type">{{ link.link_type }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
/* Note editor specific styles */
|
|
.note-editor-container {
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
padding: 1rem !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.editor-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.editor-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
min-height: 600px;
|
|
}
|
|
|
|
.editor-panel, .preview-panel {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.preview-panel {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.preview-panel h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
color: #666;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 6px;
|
|
font-size: 1rem;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: #4CAF50;
|
|
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
|
}
|
|
|
|
.editor-toolbar {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem;
|
|
background: #f8f9fa;
|
|
border: 2px solid #e9ecef;
|
|
border-bottom: none;
|
|
border-radius: 6px 6px 0 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
padding: 0.5rem 0.75rem;
|
|
min-width: 40px;
|
|
border: 1px solid #dee2e6;
|
|
background: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toolbar-btn:hover {
|
|
background: #e9ecef;
|
|
border-color: #adb5bd;
|
|
color: #000;
|
|
}
|
|
|
|
.toolbar-btn:active {
|
|
background: #dee2e6;
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Special styling for specific buttons */
|
|
.toolbar-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.toolbar-italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.toolbar-code, .toolbar-code-block {
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Ensure button content is visible */
|
|
.toolbar-btn b, .toolbar-btn i {
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.toolbar-separator {
|
|
width: 1px;
|
|
background: #dee2e6;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.markdown-editor {
|
|
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
border-radius: 0 0 6px 6px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.ace-editor-container {
|
|
width: 100%;
|
|
height: 500px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 0 0 6px 6px;
|
|
border-top: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.markdown-content {
|
|
padding: 1rem;
|
|
min-height: 400px;
|
|
max-height: 700px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.markdown-content h1, .markdown-content h2, .markdown-content h3,
|
|
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-content h1 { font-size: 2rem; }
|
|
.markdown-content h2 { font-size: 1.5rem; }
|
|
.markdown-content h3 { font-size: 1.25rem; }
|
|
|
|
.markdown-content p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-content code {
|
|
background: #e9ecef;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.markdown-content pre {
|
|
background: #f8f9fa;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid #dee2e6;
|
|
padding-left: 1rem;
|
|
margin: 1rem 0;
|
|
color: #666;
|
|
}
|
|
|
|
.markdown-content ul, .markdown-content ol {
|
|
margin-bottom: 1rem;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.markdown-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-content th, .markdown-content td {
|
|
border: 1px solid #dee2e6;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.markdown-content th {
|
|
background: #f8f9fa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.preview-placeholder {
|
|
color: #999;
|
|
font-style: italic;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.linked-notes-section {
|
|
margin-top: 2rem;
|
|
padding: 1.5rem;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.linked-notes-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.linked-note-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.link-type {
|
|
font-size: 0.85rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 1024px) {
|
|
.editor-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.preview-panel {
|
|
order: -1;
|
|
min-height: 300px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Load Ace Editor -->
|
|
<script src="{{ url_for('static', filename='js/ace/ace.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/ace/mode-markdown.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/ace/theme-github.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/ace/theme-monokai.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/ace/ext-language_tools.js') }}"></script>
|
|
|
|
<script>
|
|
// Global Ace Editor instance
|
|
let aceEditor;
|
|
|
|
// Markdown toolbar functions for Ace Editor
|
|
function insertMarkdown(before, after) {
|
|
if (!aceEditor) return;
|
|
|
|
const session = aceEditor.getSession();
|
|
const selection = aceEditor.getSelection();
|
|
const range = selection.getRange();
|
|
const selectedText = session.getTextRange(range);
|
|
|
|
if (selectedText) {
|
|
// Replace selected text
|
|
session.replace(range, before + selectedText + after);
|
|
|
|
// Select the text between the markdown markers
|
|
const newRange = selection.getRange();
|
|
newRange.setStart(newRange.start.row, newRange.start.column + before.length);
|
|
newRange.setEnd(newRange.start.row, newRange.start.column + selectedText.length);
|
|
selection.setRange(newRange);
|
|
} else {
|
|
// Insert at cursor position
|
|
const position = aceEditor.getCursorPosition();
|
|
session.insert(position, before + after);
|
|
|
|
// Move cursor between the markers
|
|
aceEditor.moveCursorTo(position.row, position.column + before.length);
|
|
}
|
|
|
|
aceEditor.focus();
|
|
syncContentAndUpdatePreview();
|
|
}
|
|
|
|
// Sync Ace Editor content with hidden textarea and update preview
|
|
function syncContentAndUpdatePreview() {
|
|
if (!aceEditor) return;
|
|
|
|
const content = aceEditor.getValue();
|
|
document.getElementById('content').value = content;
|
|
updatePreview();
|
|
}
|
|
|
|
// Live preview update
|
|
let previewTimer;
|
|
function updatePreview() {
|
|
clearTimeout(previewTimer);
|
|
previewTimer = setTimeout(() => {
|
|
const content = document.getElementById('content').value;
|
|
const preview = document.getElementById('preview-content');
|
|
|
|
if (content.trim() === '') {
|
|
preview.innerHTML = '<p class="preview-placeholder">Start typing to see the preview...</p>';
|
|
return;
|
|
}
|
|
|
|
// Send content to server for markdown rendering
|
|
fetch('/api/render-markdown', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ content: content })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.html) {
|
|
preview.innerHTML = data.html;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error rendering markdown:', error);
|
|
});
|
|
}, 300);
|
|
}
|
|
|
|
// Initialize Ace Editor
|
|
function initializeAceEditor() {
|
|
// Create Ace Editor instance
|
|
aceEditor = ace.edit("ace-editor");
|
|
|
|
// Set theme (use github theme for light mode)
|
|
aceEditor.setTheme("ace/theme/github");
|
|
|
|
// Set markdown mode
|
|
aceEditor.session.setMode("ace/mode/markdown");
|
|
|
|
// Configure editor options
|
|
aceEditor.setOptions({
|
|
fontSize: "14px",
|
|
showPrintMargin: false,
|
|
showGutter: true,
|
|
highlightActiveLine: true,
|
|
enableBasicAutocompletion: true,
|
|
enableLiveAutocompletion: true,
|
|
enableSnippets: true,
|
|
tabSize: 2,
|
|
useSoftTabs: true,
|
|
wrap: true,
|
|
showInvisibles: false,
|
|
scrollPastEnd: 0.5
|
|
});
|
|
|
|
// Set initial content from hidden textarea
|
|
const initialContent = document.getElementById('content').value;
|
|
aceEditor.setValue(initialContent, -1); // -1 moves cursor to start
|
|
|
|
// Listen for changes in Ace Editor
|
|
aceEditor.on('change', function() {
|
|
syncContentAndUpdatePreview();
|
|
});
|
|
|
|
// Handle form submission - ensure content is synced
|
|
document.getElementById('note-form').addEventListener('submit', function(e) {
|
|
syncContentAndUpdatePreview();
|
|
const submitBtn = this.querySelector('button[type="submit"]');
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Saving...';
|
|
});
|
|
|
|
// Set focus to title field initially
|
|
document.getElementById('title').focus();
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Ace Editor
|
|
initializeAceEditor();
|
|
|
|
// Initial preview
|
|
updatePreview();
|
|
|
|
// Add keyboard shortcuts
|
|
if (aceEditor) {
|
|
aceEditor.commands.addCommand({
|
|
name: 'bold',
|
|
bindKey: {win: 'Ctrl-B', mac: 'Command-B'},
|
|
exec: function() { insertMarkdown('**', '**'); }
|
|
});
|
|
|
|
aceEditor.commands.addCommand({
|
|
name: 'italic',
|
|
bindKey: {win: 'Ctrl-I', mac: 'Command-I'},
|
|
exec: function() { insertMarkdown('*', '*'); }
|
|
});
|
|
|
|
aceEditor.commands.addCommand({
|
|
name: 'link',
|
|
bindKey: {win: 'Ctrl-K', mac: 'Command-K'},
|
|
exec: function() { insertMarkdown('[', '](url)'); }
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |