From 4c6587d6a084d45cdbb5bd900f99573d0259d984 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Tue, 22 Oct 2024 19:58:44 +0200
Subject: [PATCH] feat: use combo markdown editor for milestone description

- Use the combo markdown editor for the milestone description. The
milestone description is rendered in markdown, so it makes sense to use
a 'markdown-aware' editor. This also includes the option to use
monospace font.
- Resolves #5649
---
 templates/repo/issue/milestone_new.tmpl | 11 +++++++++--
 tests/integration/easymde_test.go       |  2 ++
 web_src/js/features/repo-milestone.js   |  9 +++++++++
 web_src/js/index.js                     |  2 ++
 4 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 web_src/js/features/repo-milestone.js

diff --git a/templates/repo/issue/milestone_new.tmpl b/templates/repo/issue/milestone_new.tmpl
index 9f32df00e3..4a5f0a15ba 100644
--- a/templates/repo/issue/milestone_new.tmpl
+++ b/templates/repo/issue/milestone_new.tmpl
@@ -35,8 +35,15 @@
 					<input type="date" id="deadline" name="deadline" value="{{.deadline}}" placeholder="{{ctx.Locale.Tr "repo.issues.due_date_form"}}">
 				</div>
 				<div class="field">
-					<label>{{ctx.Locale.Tr "repo.milestones.desc"}}</label>
-					<textarea name="content">{{.content}}</textarea>
+					{{template "shared/combomarkdowneditor" (dict
+						"MarkdownPreviewUrl" (print .Repository.Link "/markup")
+						"MarkdownPreviewContext" .RepoLink
+						"TextareaName" "content"
+						"TextareaPlaceholder" (ctx.Locale.Tr "repo.milestones.desc")
+						"TextareaAriaLabel" (ctx.Locale.Tr "repo.milestones.desc")
+						"TextareaContent" .content
+						"EasyMDE" true
+					)}}
 				</div>
 				<div class="divider"></div>
 				<div class="tw-text-right">
diff --git a/tests/integration/easymde_test.go b/tests/integration/easymde_test.go
index c8203d36be..97f61c8449 100644
--- a/tests/integration/easymde_test.go
+++ b/tests/integration/easymde_test.go
@@ -14,6 +14,8 @@ func TestEasyMDESwitch(t *testing.T) {
 	testEasyMDESwitch(t, session, "user2/glob/issues/new", false)
 	testEasyMDESwitch(t, session, "user2/glob/wiki?action=_new", true)
 	testEasyMDESwitch(t, session, "user2/glob/releases/new", true)
+	testEasyMDESwitch(t, session, "user2/glob/milestones/new", true)
+	testEasyMDESwitch(t, session, "user2/repo1/milestones/1/edit", true)
 }
 
 func testEasyMDESwitch(t *testing.T, session *TestSession, url string, expected bool) {
diff --git a/web_src/js/features/repo-milestone.js b/web_src/js/features/repo-milestone.js
new file mode 100644
index 0000000000..6a1cff5cc6
--- /dev/null
+++ b/web_src/js/features/repo-milestone.js
@@ -0,0 +1,9 @@
+import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
+
+export function initRepoMilestoneEditor() {
+  const editor = document.querySelector('.page-content.repository.milestone .combo-markdown-editor');
+  if (!editor) {
+    return;
+  }
+  initComboMarkdownEditor(editor);
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 77014a74c0..80aff9e59e 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -86,6 +86,7 @@ import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'
 import {initDirAuto} from './modules/dirauto.js';
 import {initRepositorySearch} from './features/repo-search.js';
 import {initColorPickers} from './features/colorpicker.js';
+import {initRepoMilestoneEditor} from './features/repo-milestone.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
@@ -175,6 +176,7 @@ onDomReady(() => {
   initRepoContributors();
   initRepoCodeFrequency();
   initRepoRecentCommits();
+  initRepoMilestoneEditor();
 
   initCommitStatuses();
   initCaptcha();