diff options
Diffstat (limited to 'internal/admin/templates/form.html')
| -rw-r--r-- | internal/admin/templates/form.html | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/internal/admin/templates/form.html b/internal/admin/templates/form.html new file mode 100644 index 0000000..1b577c9 --- /dev/null +++ b/internal/admin/templates/form.html @@ -0,0 +1,62 @@ +{{define "form-content"}} + <h1>{{.Title}}</h1> + <form method="POST" action="{{.Action}}"> + <label for="title">Title</label> + <input type="text" id="title" name="title" value="{{.Post.Title}}" required autofocus> + + <label for="date">Date</label> + <input type="date" id="date" name="date" value="{{.Post.Date}}"> + + <label for="tags">Tags</label> + <input type="text" id="tags" name="tags" value="{{.Post.Tags}}" placeholder="tag1, tag2, tag3"> + <p class="hint">Comma-separated list of tags.</p> + + <label for="content">Content (Markdown)</label> + <textarea id="content" name="content" style="display: none;">{{.Post.Content}}</textarea> + <div id="editor" style="border: 1px solid #ccc; border-radius: 4px; min-height: 340px;"></div> + + <div class="form-actions"> + <button type="submit" class="btn btn-primary"> + {{if .IsNew}}Create Post{{else}}Save Changes{{end}} + </button> + <a href="/admin/" class="btn btn-secondary">Cancel</a> + </div> + </form> + + <script type="module"> + import { Crepe } from '@milkdown/crepe'; + + const contentField = document.getElementById('content'); + const editorContainer = document.getElementById('editor'); + const form = contentField.closest('form'); + + // Initialize Crepe with the textarea content + const crepe = new Crepe({ + root: editorContainer, + defaultValue: contentField.value, + }); + + // Sync editor content back to textarea before form submission + form.addEventListener('submit', async (e) => { + e.preventDefault(); + + try { + // Get the markdown content from Crepe + const markdown = await crepe.getMarkdown(); + contentField.value = markdown; + } catch (err) { + console.error('Failed to get markdown from editor:', err); + } + + // Submit the form + form.submit(); + }); + </script> + + <noscript> + <style> + #editor { display: none; } + #content { display: block !important; } + </style> + </noscript> +{{end}} |
