init
This commit is contained in:
nahakubuilde
190
web/templates/edit.html
Normal file
190
web/templates/edit.html
Normal file
@@ -0,0 +1,190 @@
|
||||
{{template "base.html" .}}
|
||||
|
||||
{{define "content"}}
|
||||
<div class="max-w-4xl mx-auto p-6">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h1 class="text-3xl font-bold text-white">Edit: {{.title}}</h1>
|
||||
<div class="flex items-center space-x-3">
|
||||
<a href="/note/{{.note_path}}" class="btn-secondary">
|
||||
<i class="fas fa-eye mr-2"></i>Preview
|
||||
</a>
|
||||
<button type="submit" form="edit-form" class="btn-primary">
|
||||
<i class="fas fa-save mr-2"></i>Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .folder_path}}
|
||||
<p class="text-gray-400">
|
||||
<i class="fas fa-folder mr-2"></i>
|
||||
<a href="/folder/{{.folder_path}}" class="text-blue-400 hover:text-blue-300">{{.folder_path}}</a>
|
||||
</p>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<form id="edit-form" class="space-y-6">
|
||||
<div class="bg-gray-800 rounded-lg p-6">
|
||||
<!-- Content Editor -->
|
||||
<div class="mb-6">
|
||||
<label for="content" class="block text-sm font-medium text-gray-300 mb-2">
|
||||
Content
|
||||
</label>
|
||||
<textarea id="content" name="content" rows="25"
|
||||
class="editor-textarea">{{.content}}</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Editor Toolbar -->
|
||||
<div class="flex items-center justify-between border-t border-gray-700 pt-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('**', '**')" title="Bold">
|
||||
<i class="fas fa-bold"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('*', '*')" title="Italic">
|
||||
<i class="fas fa-italic"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('`', '`')" title="Code">
|
||||
<i class="fas fa-code"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('[', '](url)')" title="Link">
|
||||
<i class="fas fa-link"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('')" title="Image">
|
||||
<i class="fas fa-image"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertHeading()" title="Heading">
|
||||
<i class="fas fa-heading"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertList()" title="List">
|
||||
<i class="fas fa-list"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500">
|
||||
Press Ctrl+S to save
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "scripts"}}
|
||||
<script>
|
||||
const editForm = document.getElementById('edit-form');
|
||||
const contentTextarea = document.getElementById('content');
|
||||
|
||||
editForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const content = contentTextarea.value;
|
||||
const notePath = '{{.note_path}}';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('content', content);
|
||||
|
||||
fetch('/edit/' + notePath, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showNotification('Note saved successfully', 'success');
|
||||
if (data.redirect) {
|
||||
setTimeout(() => {
|
||||
window.location.href = data.redirect;
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to save note');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showNotification('Error: ' + error.message, 'error');
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-resize textarea
|
||||
function autoResize() {
|
||||
contentTextarea.style.height = 'auto';
|
||||
contentTextarea.style.height = (contentTextarea.scrollHeight) + 'px';
|
||||
}
|
||||
|
||||
contentTextarea.addEventListener('input', autoResize);
|
||||
|
||||
// Initial resize
|
||||
autoResize();
|
||||
|
||||
// Keyboard shortcuts
|
||||
contentTextarea.addEventListener('keydown', function(e) {
|
||||
// Ctrl+S or Cmd+S to save
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
editForm.dispatchEvent(new Event('submit'));
|
||||
}
|
||||
|
||||
// Tab for indentation
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
const start = this.selectionStart;
|
||||
const end = this.selectionEnd;
|
||||
const value = this.value;
|
||||
|
||||
this.value = value.substring(0, start) + '\t' + value.substring(end);
|
||||
this.selectionStart = this.selectionEnd = start + 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Markdown insertion functions
|
||||
function insertMarkdown(before, after) {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const end = contentTextarea.selectionEnd;
|
||||
const text = contentTextarea.value;
|
||||
const selectedText = text.substring(start, end);
|
||||
|
||||
const newText = text.substring(0, start) + before + selectedText + after + text.substring(end);
|
||||
contentTextarea.value = newText;
|
||||
|
||||
// Position cursor
|
||||
const newPos = start + before.length + selectedText.length;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(newPos, newPos);
|
||||
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertHeading() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const lineStart = text.lastIndexOf('\n', start - 1) + 1;
|
||||
const lineText = text.substring(lineStart, start);
|
||||
|
||||
if (lineText.startsWith('# ')) {
|
||||
return; // Already a heading
|
||||
}
|
||||
|
||||
const newText = text.substring(0, lineStart) + '# ' + text.substring(lineStart);
|
||||
contentTextarea.value = newText;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(start + 2, start + 2);
|
||||
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertList() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const lineStart = text.lastIndexOf('\n', start - 1) + 1;
|
||||
|
||||
const newText = text.substring(0, lineStart) + '- ' + text.substring(lineStart);
|
||||
contentTextarea.value = newText;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(start + 2, start + 2);
|
||||
|
||||
autoResize();
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user