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 <markdown-editor
11 class="flex flex-col gap-2"
12 hx-disinherit="*"
13 hx-include="this"
14 >
15 <div class="btn-group self-start text-gray-600 dark:text-gray-300">
16 <button type="button" data-md-mode="write"
17 class="btn-group-item active group">
18 {{ i "pencil" "w-3.5 h-3.5" }}
19 Write
20 </button>
21 <button type="button" data-md-mode="preview"
22 hx-post="/markup/preview"
23 hx-target="next [data-md-preview]"
24 hx-swap="innerHTML"
25 hx-indicator="this"
26 hx-disabled-elt="this"
27 class="btn-group-item group">
28 {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
29 {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }}
30 Preview
31 </button>
32 </div>
33 <div data-md-panel="write">
34 <textarea
35 name="{{ $name }}"
36 rows="{{ $rows }}"
37 class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
38 {{if $required}}required{{end}}
39 {{if $autofocus}}autofocus{{end}}
40 placeholder="{{ $placeholder }}"
41 >{{with $value}}{{.}}{{end}}</textarea>
42 </div>
43 <div data-md-panel="preview" class="hidden">
44 <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">
45 <span class="text-gray-400 dark:text-gray-500 italic">Loading preview...</span>
46 </div>
47 </div>
48 </markdown-editor>
49{{ end }}