Add EasyMDE support for release content editor (#14744)

* Add easyMDE(simpleMDE) support for release content editor

Signed-off-by: a1012112796 <[email protected]>

Author: a1012112796

routers/repo/release.go

@@ -210,6 +210,8 @@ func LatestRelease(ctx *context.Context) {
 func NewRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
+	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireTribute"] = true
 	ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch
 	if tagName := ctx.Query("tag"); len(tagName) > 0 {
 		rel, err := models.GetRelease(ctx.Repo.Repository.ID, tagName)
@@ -235,6 +237,8 @@ func NewReleasePost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*auth.NewReleaseForm)
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
+	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireTribute"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(200, tplReleaseNew)
@@ -313,6 +317,8 @@ func EditRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
+	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireTribute"] = true
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "release")
 
@@ -343,6 +349,8 @@ func EditReleasePost(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
+	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireTribute"] = true
 
 	tagName := ctx.Params("*")
 	rel, err := models.GetRelease(ctx.Repo.Repository.ID, tagName)

templates/repo/release/new.tmpl

@@ -44,9 +44,18 @@
 					<label>{{.i18n.Tr "repo.release.title"}}</label>
 					<input name="title" placeholder="{{.i18n.Tr "repo.release.title"}}" value="{{.title}}" autofocus required maxlength="255">
 				</div>
-				<div class="field">
+				<div class="field content-editor">
 					<label>{{.i18n.Tr "repo.release.content"}}</label>
-					<textarea name="content">{{.content}}</textarea>
+					<div class="ui top tabular menu" data-write="write" data-preview="preview">
+						<a class="active write item" data-tab="write">{{$.i18n.Tr "write"}}</a>
+						<a class="preview item" data-tab="preview" data-url="{{$.Repository.APIURL}}/markdown" data-context="{{$.RepoLink}}">{{$.i18n.Tr "preview"}}</a>
+					</div>
+					<div class="ui bottom active tab" data-tab="write">
+						<textarea name="content">{{.content}}</textarea>
+					</div>
+					<div class="ui bottom tab markdown" data-tab="preview">
+						{{$.i18n.Tr "loading"}}
+					</div>
 				</div>
 				{{if .IsAttachmentEnabled}}
 					<div class="field">

web_src/js/index.js

@@ -1734,6 +1734,20 @@ async function initEditor() {
   });
 }
 
+function initReleaseEditor() {
+  const $editor = $('.repository.new.release .content-editor');
+  if ($editor.length === 0) {
+    return false;
+  }
+
+  const $textarea = $editor.find('textarea');
+  attachTribute($textarea.get(), {mentions: false, emoji: true});
+  const $files = $editor.parent().find('.files');
+  const $simplemde = setCommentSimpleMDE($textarea);
+  initCommentPreviewTab($editor);
+  initSimpleMDEImagePaste($simplemde, $files);
+}
+
 function initOrganization() {
   if ($('.organization').length === 0) {
     return;
@@ -2653,6 +2667,7 @@ $(document).ready(async () => {
   initTableSort();
   initNotificationsTable();
   initPullRequestMergeInstruction();
+  initReleaseEditor();
 
   const routes = {
     'div.user.settings': initUserSettings,