From b5c26fa825e08122843ad6d27191d399a9af1c37 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Fri, 12 May 2023 19:53:41 +0900
Subject: [PATCH] Add markdown preview to Submit Review Textarea (#24672)

Before:

![image](https://github.com/go-gitea/gitea/assets/18380374/2909352c-b2ab-4d77-b410-9f08c2f5a154)

After:

![image](https://github.com/go-gitea/gitea/assets/18380374/9448fa75-e29b-4f95-a30f-03c73c083a83)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
---
 templates/repo/diff/new_review.tmpl | 8 +++++---
 web_src/css/code/linebutton.css     | 1 +
 web_src/css/modules/tippy.css       | 4 ----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index bb9730303..afb82a8d3 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -9,13 +9,15 @@
 			<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
 				{{.CsrfTokenHtml}}
 				<input type="hidden" name="commit_id" value="{{.AfterCommitID}}">
-				<div class="header gt-df gt-ac gt-pb-3">
+				<div class="field gt-df gt-ac">
 					<div class="gt-f1">{{$.locale.Tr "repo.diff.review.header"}}</div>
-					<a class="muted close gt-px-3">{{svg "octicon-x" 16}}</a>
+					<a class="muted close">{{svg "octicon-x" 16}}</a>
 				</div>
-				<div class="ui field">
+				<div class="field">
 					{{template "shared/combomarkdowneditor" (dict
 						"locale" $.locale
+						"MarkdownPreviewUrl" (print .Repository.Link "/markup")
+						"MarkdownPreviewContext" .RepoLink
 						"TextareaName" "content"
 						"TextareaPlaceholder" ($.locale.Tr "repo.diff.review.placeholder")
 						"DropzoneParentContainer" "form"
diff --git a/web_src/css/code/linebutton.css b/web_src/css/code/linebutton.css
index 1012b38ba..a475138e6 100644
--- a/web_src/css/code/linebutton.css
+++ b/web_src/css/code/linebutton.css
@@ -4,6 +4,7 @@
 
 .code-line-menu {
   width: auto !important;
+  border: none !important; /* the border is provided by tippy, not using the `.ui.menu` border */
 }
 
 .code-line-button {
diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index a026f9c6b..8919abfec 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -29,10 +29,6 @@
   color: var(--color-tooltip-text);
 }
 
-.tippy-box[data-theme="menu"] .ui.menu {
-  border: none;
-}
-
 .tippy-content {
   position: relative;
   padding: 1rem;