From 23aa5efc2f3461341d144e1cd6fb14487765a9d8 Mon Sep 17 00:00:00 2001
From: Seongmin Lee <git@boltless.me>
Date: Fri, 08 May 2026 20:21:51 +0000
Subject: [PATCH] appview: use markdownEditor fragment for all markdown body inputs

Signed-off-by: Seongmin Lee <git@boltless.me>
---
 appview/pulls/compose.go | 5 -----
 appview/pulls/router.go | 1 -
 appview/state/comment.go | 2 +-
 appview/state/markup.go | 8 ++++++++
 appview/state/router.go | 3 +++
 appview/pages/templates/fragments/line-quote-button.html | 2 +-
 appview/pages/templates/fragments/markdownEditor.html | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 appview/pages/templates/strings/string.html | 12 +++++-------
 appview/pages/templates/fragments/comment/edit.html | 11 ++++++-----
 appview/pages/templates/fragments/comment/reply.html | 12 ++++++------
 appview/pages/templates/repo/issues/fragments/newComment.html | 19 +++++++------------
 appview/pages/templates/repo/pulls/fragments/pullNewComment.html | 13 ++++++-------
 appview/pages/templates/repo/pulls/fragments/pullStepDetails.html | 98 +++++++++++++++-----------------------------------------------------------------------------------
 appview/pages/templates/repo/pulls/fragments/pullStepReview.html | 6 +-----
 14 file(s) changed, 128 insertion(s)(+), 133 deletion(s)(-)

diff --git a/appview/pulls/compose.go b/appview/pulls/compose.go
--- a/appview/pulls/compose.go
+++ b/appview/pulls/compose.go
@@ -155,11 +155,6 @@
 	}
 }
 
-func (s *Pulls) MarkdownPreview(w http.ResponseWriter, r *http.Request) {
-	body := r.FormValue("body")
-	s.pages.MarkdownPreviewFragment(w, body)
-}
-
 func (s *Pulls) RefreshCompose(w http.ResponseWriter, r *http.Request) {
 	l := s.logger.With("handler", "RefreshCompose")
 
diff --git a/appview/pulls/router.go b/appview/pulls/router.go
--- a/appview/pulls/router.go
+++ b/appview/pulls/router.go
@@ -14,7 +14,6 @@
 		r.Get("/", s.NewPull)
 		r.Get("/refresh", s.RefreshCompose)
 		r.Post("/refresh", s.RefreshCompose)
-		r.Post("/preview", s.MarkdownPreview)
 		r.Post("/", s.NewPull)
 	})
 
diff --git a/appview/state/comment.go b/appview/state/comment.go
--- a/appview/state/comment.go
+++ b/appview/state/comment.go
@@ -71,7 +71,7 @@
 		Comment: comment,
 	})
 	if err != nil {
-		l.Error("failed to render")
+		l.Error("failed to render", "err", err)
 	}
 }
 
diff --git a/appview/state/markup.go b/appview/state/markup.go
new file mode 100644
--- /dev/null
+++ b/appview/state/markup.go
@@ -0,0 +1,8 @@
+package state
+
+import "net/http"
+
+func (s *State) MarkdownPreview(w http.ResponseWriter, r *http.Request) {
+	body := r.FormValue("body")
+	s.pages.MarkdownPreviewFragment(w, body)
+}
diff --git a/appview/state/router.go b/appview/state/router.go
--- a/appview/state/router.go
+++ b/appview/state/router.go
@@ -257,6 +257,9 @@
 		r.Delete("/", s.DeleteComment)
 	})
 
+	r.With(middleware.AuthMiddleware(s.oauth)).Route("/markup", func(r chi.Router) {
+		r.Post("/preview", s.MarkdownPreview)
+	})
 	r.Get("/profile/popover", s.ProfilePopover)
 
 	r.Route("/profile", func(r chi.Router) {
diff --git a/appview/pages/templates/fragments/line-quote-button.html b/appview/pages/templates/fragments/line-quote-button.html
--- a/appview/pages/templates/fragments/line-quote-button.html
+++ b/appview/pages/templates/fragments/line-quote-button.html
@@ -18,7 +18,7 @@
     const btnEnd = document.getElementById('line-quote-btn-end');
 
     const textarea = () =>
-      document.getElementById('comment-textarea');
+      document.querySelector('form[hx-post="/comment"] textarea');
 
     const lineOf = (el) =>
       el?.closest?.('span[id*="-O"]')
diff --git a/appview/pages/templates/fragments/markdownEditor.html b/appview/pages/templates/fragments/markdownEditor.html
new file mode 100644
--- /dev/null
+++ b/appview/pages/templates/fragments/markdownEditor.html
@@ -0,0 +1,69 @@
+{{ define "fragments/markdownEditor" }}
+    {{ $name        := .Name        }}
+    {{ $value       := .Value       }}
+    {{ $blobName    := .BlobName    }}
+    {{ $blobValues  := .BlobValues  }}
+    {{ $rows        := (or .Rows 5) }}
+    {{ $required    := .Required    }}
+    {{ $autofocus   := .AutoFocus   }}
+    {{ $placeholder := .Placeholder }}
+    <div
+        class="flex flex-col gap-2"
+        data-md-editor
+        hx-disinherit="*"
+        hx-include="this"
+    >
+        <div class="btn-group self-start text-gray-600 dark:text-gray-300">
+            <button type="button" data-md-mode="write"
+                class="btn-group-item active group">
+                {{ i "pencil" "w-3.5 h-3.5" }}
+                Write
+            </button>
+            <button type="button" data-md-mode="preview"
+                hx-post="/markup/preview"
+                hx-target="next [data-md-preview]"
+                hx-swap="innerHTML"
+                hx-indicator="this"
+                hx-disabled-elt="this"
+                class="btn-group-item group">
+                {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
+                {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }}
+                Preview
+            </button>
+        </div>
+        <div data-md-panel="write">
+            <textarea
+                name="{{ $name }}"
+                rows="{{ $rows }}"
+                class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
+                {{if $required}}required{{end}}
+                {{if $autofocus}}autofocus{{end}}
+                placeholder="{{ $placeholder }}"
+            >{{with $value}}{{.}}{{end}}</textarea>
+        </div>
+        <div data-md-panel="preview" class="hidden">
+            <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">
+                <span class="text-gray-400 dark:text-gray-500 italic">Loading preview...</span>
+            </div>
+        </div>
+    </div>
+    <script>
+    (() => {
+        if (window.__mdEditorWired) return;
+        window.__mdEditorWired = true;
+        document.body.addEventListener('click', (e) => {
+            const btn = e.target.closest('[data-md-mode]');
+            if (!btn) return;
+            const editor = btn.closest('[data-md-editor]');
+            if (!editor) return;
+            const mode = btn.dataset.mdMode;
+            editor.querySelectorAll('[data-md-panel]').forEach(p => {
+                p.classList.toggle('hidden', p.dataset.mdPanel !== mode);
+            });
+            editor.querySelectorAll('[data-md-mode]').forEach(b => {
+                b.classList.toggle('active', b === btn);
+            });
+        });
+    })();
+    </script>
+{{ end }}
diff --git a/appview/pages/templates/strings/string.html b/appview/pages/templates/strings/string.html
--- a/appview/pages/templates/strings/string.html
+++ b/appview/pages/templates/strings/string.html
@@ -125,13 +125,11 @@
         <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
           {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
         </div>
-        <textarea
-          name="body"
-          class="w-full p-2 rounded"
-          placeholder="Add to the discussion. Markdown is supported."
-          rows="5"
-          required
-        ></textarea>
+        {{ template "fragments/markdownEditor"
+          (dict "Name"        "body"
+                "BlobName"    "blob"
+                "Required"    true
+                "Placeholder" "Add to the discussion. Markdown is supported.") }}
         <div id="comment-error" class="error"></div>
       </div>
       <div class="flex gap-2 mt-2">
diff --git a/appview/pages/templates/fragments/comment/edit.html b/appview/pages/templates/fragments/comment/edit.html
--- a/appview/pages/templates/fragments/comment/edit.html
+++ b/appview/pages/templates/fragments/comment/edit.html
@@ -8,11 +8,10 @@
     hx-disabled-elt="find button[type='submit']"
   >
     <input name="aturi" type="hidden" value="{{ .Comment.AtUri }}">
-    <textarea
-      name="body"
-      class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
-      rows="5"
-      autofocus>{{ .Comment.EditableBody }}</textarea>
+    {{ template "fragments/markdownEditor"
+      (dict "Name"         "body"
+            "Value"        .Comment.EditableBody
+            "Placeholder" "Describe this pull request. Markdown is supported.") }}
     <div id="comment-error" class="error"></div>
     {{ template "editActions" $ }}
   </form>
@@ -42,6 +41,8 @@
     hx-get="/comment?aturi={{ .Comment.AtUri }}"
     hx-target="closest form"
     hx-swap="outerHTML"
+    hx-indicator="this"
+    hx-disabled-elt="this"
   >
     {{ i "x" "size-4" }}
     Cancel
diff --git a/appview/pages/templates/fragments/comment/reply.html b/appview/pages/templates/fragments/comment/reply.html
--- a/appview/pages/templates/fragments/comment/reply.html
+++ b/appview/pages/templates/fragments/comment/reply.html
@@ -8,12 +8,12 @@
     hx-disabled-elt="find button[type='submit']"
   >
     {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
-    <textarea
-      name="body"
-      class="w-full p-2"
-      placeholder="Leave a reply..."
-      autofocus
-      rows="3"></textarea>
+    {{ template "fragments/markdownEditor"
+      (dict "Name"        "body"
+            "BlobName"    "blob"
+            "Rows"        3
+            "AutoFocus"   true
+            "Placeholder" "Leave a reply...") }}
     {{ template "replyActions" . }}
   </form>
 {{ end }}
diff --git a/appview/pages/templates/repo/issues/fragments/newComment.html b/appview/pages/templates/repo/issues/fragments/newComment.html
--- a/appview/pages/templates/repo/issues/fragments/newComment.html
+++ b/appview/pages/templates/repo/issues/fragments/newComment.html
@@ -3,26 +3,21 @@
   <form
     hx-post="/comment"
     hx-swap="none"
-    hx-trigger="submit, click from:#close-button, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:#comment-textarea"
+    hx-trigger="submit, click from:#close-button, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:(find textarea)"
     hx-disabled-elt="find button[type='submit']"
     hx-on::before-request="document.getElementById('comment-error').innerHTML = ''"
     hx-swap="none"
     class="group/form "
   >
     <input name="subject-uri" type="hidden" value="{{ .Issue.AtUri }}">
-    <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full border border-gray-200 dark:border-gray-700">
+    <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full border border-gray-200 dark:border-gray-700" hx-on:keyup="updateCommentForm()">
       <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
         {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
       </div>
-      <textarea
-        id="comment-textarea"
-        name="body"
-        class="w-full p-2 rounded"
-        placeholder="Add to the discussion. Markdown is supported."
-        onkeyup="updateCommentForm()"
-        rows="5"
-        required
-      ></textarea>
+      {{ template "fragments/markdownEditor"
+        (dict "Name"        "body"
+              "BlobName"    "blob"
+              "Placeholder" "Add to the discussion. Markdown is supported.") }}
     </div>
 
     <div class="flex gap-2 mt-2 items-center">
@@ -85,7 +80,7 @@
         }
 
         function updateCommentForm() {
-            const textarea = document.getElementById('comment-textarea');
+            const textarea = document.querySelector('form[hx-post="/comment"] textarea');
             const commentButton = document.getElementById('comment-button');
             const closeButtonText = document.getElementById('close-button-text');
 
diff --git a/appview/pages/templates/repo/pulls/fragments/pullNewComment.html b/appview/pages/templates/repo/pulls/fragments/pullNewComment.html
--- a/appview/pages/templates/repo/pulls/fragments/pullNewComment.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullNewComment.html
@@ -12,13 +12,12 @@
   >
     <input name="subject-uri" type="hidden" value="{{ .Pull.AtUri }}">
     <input name="pull-round-idx" type="hidden" value="{{ .RoundNumber }}">
-    <textarea
-      id="comment-textarea"
-      name="body"
-      class="w-full p-2 rounded border"
-      rows=8
-      placeholder="Add to the discussion..."></textarea
-    >
+    {{ template "fragments/markdownEditor"
+      (dict "Name"        "body"
+            "BlobName"    "blob"
+            "Rows"        8
+            "Required"    true
+            "Placeholder" "Add to the discussion...") }}
     {{ template "replyActions" . }}
     <div id="comment-error-{{ .RoundNumber }}" class="error"></div>
   </form>
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
--- a/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepDetails.html
@@ -1,11 +1,10 @@
 {{ define "repo/pulls/fragments/pullStepDetails" }}
     {{ $hasSidePanel := and .LabelDefs .RepoInfo.Roles.IsPushAllowed }}
-    {{ $previewUrl := printf "/%s/pulls/new/preview" .RepoInfo.FullName }}
     {{ $labelCtx := dict "Defs" .LabelDefs "State" .LabelState "RepoInfo" .RepoInfo "Subject" "" "LoggedInUser" .LoggedInUser }}
 
     <section class="flex flex-col md:flex-row gap-6">
         <div class="flex-1 min-w-0 flex flex-col gap-4">
-            {{ template "pullStepDetailsSingle" (dict "Root" . "PreviewUrl" $previewUrl) }}
+            {{ template "pullStepDetailsSingle" . }}
             {{ template "pullSubmitRow" . }}
         </div>
 
@@ -17,82 +16,37 @@
         {{ end }}
     </section>
 
-    {{ template "markdownEditorScript" }}
+    <script>
+      document.querySelectorAll('input[name=body]').forEach(el => {
+        el.addEventListener('oninput', () => {
+          document.querySelector('#bodyDirty').value = 1;
+        });
+      });
+    </script>
 {{ end }}
 
 {{ define "pullStepDetailsSingle" }}
-    {{ $root := .Root }}
-    {{ $previewUrl := .PreviewUrl }}
-    <input type="hidden" name="titleDirty" id="titleDirty" value="{{ if $root.TitleDirty }}1{{ end }}" />
-    <input type="hidden" name="bodyDirty" id="bodyDirty" value="{{ if $root.BodyDirty }}1{{ end }}" />
+    <input type="hidden" name="titleDirty" id="titleDirty" value="{{ if .TitleDirty }}1{{ end }}" />
+    <input type="hidden" name="bodyDirty" id="bodyDirty" value="{{ if .BodyDirty }}1{{ end }}" />
     <div class="flex flex-col gap-1">
         <label for="title" class="text-xs tracking-wide text-gray-800 dark:text-gray-200">Title</label>
         <input
             type="text"
             name="title"
             id="title"
-            value="{{ $root.Title }}"
+            value="{{ .Title }}"
             oninput="document.getElementById('titleDirty').value='1'"
             class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700"
             placeholder="One-line summary of your change."
         />
     </div>
 
-    {{ template "markdownEditor" (dict
-        "Id" "pull-body"
-        "Name" "body"
-        "Value" $root.Body
-        "Rows" 6
+    {{ template "fragments/markdownEditor" (dict
+        "Name"        "body"
+        "Value"       .Body
+        "Rows"        6
         "Placeholder" "Describe your change. Markdown is supported."
-        "PreviewUrl" $previewUrl
-        "DirtyFlag" "bodyDirty"
     ) }}
-{{ end }}
-
-{{ define "markdownEditor" }}
-    {{ $id := .Id }}
-    {{ $name := .Name }}
-    {{ $value := .Value }}
-    {{ $rows := .Rows }}
-    {{ $placeholder := .Placeholder }}
-    {{ $previewUrl := .PreviewUrl }}
-    {{ $dirtyFlag := .DirtyFlag }}
-    <div class="flex flex-col gap-2" data-md-editor="{{ $id }}">
-        <div class="btn-group self-start text-gray-600 dark:text-gray-300">
-            <button type="button" data-md-mode="write"
-                class="btn-group-item active group">
-                {{ i "pencil" "w-3.5 h-3.5" }}
-                Write
-            </button>
-            <button type="button" data-md-mode="preview"
-                hx-post="{{ $previewUrl }}"
-                hx-vals='js:{body: document.querySelector("[data-md-editor=\"{{ $id }}\"] textarea").value}'
-                hx-params="body"
-                hx-target="[data-md-editor='{{ $id }}'] [data-md-preview]"
-                hx-swap="innerHTML"
-                hx-indicator="this"
-                class="btn-group-item group">
-                {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }}
-                {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }}
-                Preview
-            </button>
-        </div>
-        <div data-md-panel="write">
-            <textarea
-                id="{{ $id }}"
-                name="{{ $name }}"
-                rows="{{ $rows }}"
-                class="w-full resize-y dark:bg-gray-800 dark:text-white dark:border-gray-700"
-                placeholder="{{ $placeholder }}"
-                {{ if $dirtyFlag }}oninput="document.getElementById('{{ $dirtyFlag }}').value='1'"{{ end }}
-            >{{ $value }}</textarea>
-        </div>
-        <div data-md-panel="preview" class="hidden">
-            <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">
-                <span class="text-gray-400 dark:text-gray-500 italic">Loading preview...</span>
-            </div>
-        </div>
-    </div>
 {{ end }}
 
 {{ define "pullSubmitRow" }}
@@ -124,26 +78,4 @@
             </span>
         </button>
     </div>
-{{ end }}
-
-{{ define "markdownEditorScript" }}
-    <script>
-    (() => {
-        if (window.__mdEditorWired) return;
-        window.__mdEditorWired = true;
-        document.body.addEventListener('click', (e) => {
-            const btn = e.target.closest('[data-md-mode]');
-            if (!btn) return;
-            const editor = btn.closest('[data-md-editor]');
-            if (!editor) return;
-            const mode = btn.dataset.mdMode;
-            editor.querySelectorAll('[data-md-panel]').forEach(p => {
-                p.classList.toggle('hidden', p.dataset.mdPanel !== mode);
-            });
-            editor.querySelectorAll('[data-md-mode]').forEach(b => {
-                b.classList.toggle('active', b === btn);
-            });
-        });
-    })();
-    </script>
 {{ end }}
diff --git a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
--- a/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullStepReview.html
@@ -98,7 +98,6 @@
 {{ define "pullReviewStackedCommits" }}
     {{ $root := . }}
     {{ $commits := .Comparison.FormatPatch }}
-    {{ $previewUrl := printf "/%s/pulls/new/preview" .RepoInfo.FullName }}
     {{ $hasSidePanel := and $root.LabelDefs $root.RepoInfo.Roles.IsPushAllowed }}
     <ul class="flex flex-col gap-2">
         {{ range $idx, $p := $commits }}
@@ -148,14 +147,11 @@
                                             placeholder="{{ $p.Title }}"
                                         />
                                     </div>
-                                    {{ template "markdownEditor" (dict
-                                        "Id" (printf "stack-body-%s" $cid)
+                                    {{ template "fragments/markdownEditor" (dict
                                         "Name" $bodyName
                                         "Value" $bodyValue
                                         "Rows" 4
                                         "Placeholder" "Describe this pull request. Markdown is supported."
-                                        "LabelText" "description"
-                                        "PreviewUrl" $previewUrl
                                     ) }}
                                 </div>
                                 {{ if $hasSidePanel }}

--
tangled.sh