alice.pds.demo.boltless.dev
This repository has no description
1{{ define "fragments/markdownEditor" }}
2 {{ $name := .Name }}
3 {{ $value := .Value }}
4 {{ $blobName := .BlobName }}
5 {{ $blobValues := .BlobValues }}
6 {{ $rows := (or .Rows 5) }}
7 {{ $required := .Required }}
8 {{ $autofocus := .AutoFocus }}
9 {{ $placeholder := .Placeholder }}
10 <div
11 class="flex flex-col gap-2"
12 data-md-editor
13 hx-disinherit="*"
14 hx-include="this"
15 >
16 <div class="btn-group self-start text-gray-600 dark:text-gray-300">
17 <button type="button" data-md-mode="write"
18 class="btn-group-item active group">
19 {{ i "pencil" "w-3.5 h-3.5" }}
20 Write
21 </button>
22 <button type="button" data-md-mode="preview"
23 hx-post="/markup/preview"
24 hx-target="next [data-md-preview]"
25 hx-swap="innerHTML"
26 hx-indicator="this"
27 hx-disabled-elt="this"
28 class="btn-group-item group">
29 {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
30 {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }}
31 Preview
32 </button>
33 </div>
34 <div data-md-panel="write">
35 <textarea
36 name="{{ $name }}"
37 rows="{{ $rows }}"
38 class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
39 {{if $required}}required{{end}}
40 {{if $autofocus}}autofocus{{end}}
41 placeholder="{{ $placeholder }}"
42 >{{with $value}}{{.}}{{end}}</textarea>
43 </div>
44 <div data-md-panel="preview" class="hidden">
45 <div data-md-preview class="min-h-[6rem] p-3 border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900/30">
46 <span class="text-gray-400 dark:text-gray-500 italic">Loading preview...</span>
47 </div>
48 </div>
49 </div>
50 <script>
51 (() => {
52 if (window.__mdEditorWired) return;
53 window.__mdEditorWired = true;
54 document.body.addEventListener('click', (e) => {
55 const btn = e.target.closest('[data-md-mode]');
56 if (!btn) return;
57 const editor = btn.closest('[data-md-editor]');
58 if (!editor) return;
59 const mode = btn.dataset.mdMode;
60 editor.querySelectorAll('[data-md-panel]').forEach(p => {
61 p.classList.toggle('hidden', p.dataset.mdPanel !== mode);
62 });
63 editor.querySelectorAll('[data-md-mode]').forEach(b => {
64 b.classList.toggle('active', b === btn);
65 });
66 });
67 })();
68 </script>
69{{ end }}