alice.pds.demo.boltless.dev
This repository has no description
1{{ define "fragments/markdownEditor" }}
2 {{ $name := .Name }}
3 {{ $value := .Value }}
4 {{ $blobName := (or .BlobName "blobs") }}
5 {{ $blobValues := .BlobValues }}
6 {{ $rows := (or .Rows 5) }}
7 {{ $required := .Required }}
8 {{ $autofocus := .AutoFocus }}
9 {{ $placeholder := .Placeholder }}
10 <markdown-editor
11 class="w-full flex flex-col gap-2"
12 blob-name="{{ $blobName }}"
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 {{ range $blobValues }}
35 <input type="hidden" name="{{ $blobName }}" value="{{ . }}" />
36 {{ end }}
37 <div data-md-panel="write">
38 <textarea
39 name="{{ $name }}"
40 rows="{{ $rows }}"
41 autocomplete="off"
42 class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
43 {{if $required}}required{{end}}
44 {{if $autofocus}}autofocus{{end}}
45 placeholder="{{ $placeholder }}"
46 >{{with $value}}{{.}}{{end}}</textarea>
47 </div>
48 <div data-md-panel="preview" class="hidden">
49 <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">
50 <span class="text-gray-400 dark:text-gray-500 italic">Loading preview...</span>
51 </div>
52 </div>
53 </markdown-editor>
54{{ end }}