Extend API MarkupOptions to contain branch and relative path

The api.MarkupOptions{} struct will have a RelativePath which depicts
the relative path to the repository root + BranchPath which contains the
current branch. The RenderMarkup function utilizes a struct since there
are too many variables passed as arguments and that is not a good sign
for readability.

modules/structs/miscellaneous.go

@@ -37,6 +37,14 @@ type MarkupOption struct {
 	//
 	// in: body
 	FilePath string
+	// The current branch path where the form gets posted
+	//
+	// in: body
+	BranchPath string
+	// Relative path to the repository
+	//
+	// in: body
+	RelativePath string
 }
 
 // MarkupRender is a rendered markup document

routers/api/v1/misc/markup.go

@@ -41,7 +41,17 @@ func Markup(ctx *context.APIContext) {
 		return
 	}
 
-	common.RenderMarkup(ctx.Base, ctx.Repo, form.Mode, form.Text, form.Context, form.FilePath, form.Wiki)
+	re := common.Renderer{
+		Mode:         form.Mode,
+		Text:         form.Text,
+		UrlPrefix:    form.Context,
+		FilePath:     form.FilePath,
+		BranchPath:   form.BranchPath,
+		RelativePath: form.RelativePath,
+		IsWiki:       form.Wiki,
+	}
+
+	re.RenderMarkup(ctx.Base, ctx.Repo)
 }
 
 // Markdown render markdown document to HTML
@@ -76,7 +86,14 @@ func Markdown(ctx *context.APIContext) {
 		mode = form.Mode
 	}
 
-	common.RenderMarkup(ctx.Base, ctx.Repo, mode, form.Text, form.Context, "", form.Wiki)
+	re := common.Renderer{
+		Mode:      mode,
+		Text:      form.Text,
+		UrlPrefix: form.Context,
+		IsWiki:    form.Wiki,
+	}
+
+	re.RenderMarkup(ctx.Base, ctx.Repo)
 }
 
 // MarkdownRaw render raw markdown HTML

routers/common/markup.go

@@ -18,26 +18,31 @@ import (
 	"mvdan.cc/xurls/v2"
 )
 
+type Renderer struct {
+	Mode, Text, UrlPrefix, FilePath, BranchPath, RelativePath string
+	IsWiki                                                    bool
+}
+
 // RenderMarkup renders markup text for the /markup and /markdown endpoints
-func RenderMarkup(ctx *context.Base, repo *context.Repository, mode, text, urlPrefix, filePath string, wiki bool) {
+func (re *Renderer) RenderMarkup(ctx *context.Base, repo *context.Repository) {
 	var markupType string
 	relativePath := ""
 
-	if len(text) == 0 {
+	if len(re.Text) == 0 {
 		_, _ = ctx.Write([]byte(""))
 		return
 	}
 
-	switch mode {
+	switch re.Mode {
 	case "markdown":
 		// Raw markdown
 		if err := markdown.RenderRaw(&markup.RenderContext{
 			Ctx: ctx,
 			Links: markup.Links{
 				AbsolutePrefix: true,
-				Base:           urlPrefix,
+				Base:           re.UrlPrefix,
 			},
-		}, strings.NewReader(text), ctx.Resp); err != nil {
+		}, strings.NewReader(re.Text), ctx.Resp); err != nil {
 			ctx.Error(http.StatusInternalServerError, err.Error())
 		}
 		return
@@ -50,30 +55,31 @@ func RenderMarkup(ctx *context.Base, repo *context.Repository, mode, text, urlPr
 	case "file":
 		// File as document based on file extension
 		markupType = ""
-		relativePath = filePath
+		re.UrlPrefix = re.RelativePath
+		relativePath = re.FilePath
 	default:
-		ctx.Error(http.StatusUnprocessableEntity, fmt.Sprintf("Unknown mode: %s", mode))
+		ctx.Error(http.StatusUnprocessableEntity, fmt.Sprintf("Unknown mode: %s", re.Mode))
 		return
 	}
 
-	if !strings.HasPrefix(setting.AppSubURL+"/", urlPrefix) {
+	if !strings.HasPrefix(setting.AppSubURL+"/", re.UrlPrefix) {
 		// check if urlPrefix is already set to a URL
 		linkRegex, _ := xurls.StrictMatchingScheme("https?://")
-		m := linkRegex.FindStringIndex(urlPrefix)
+		m := linkRegex.FindStringIndex(re.UrlPrefix)
 		if m == nil {
-			urlPrefix = util.URLJoin(setting.AppURL, urlPrefix)
+			re.UrlPrefix = util.URLJoin(setting.AppURL, re.UrlPrefix)
 		}
 	}
 
 	meta := map[string]string{}
 	if repo != nil && repo.Repository != nil {
-		if mode == "comment" {
+		if re.Mode == "comment" {
 			meta = repo.Repository.ComposeMetas(ctx)
 		} else {
 			meta = repo.Repository.ComposeDocumentMetas(ctx)
 		}
 	}
-	if mode != "comment" {
+	if re.Mode != "comment" {
 		meta["mode"] = "document"
 	}
 
@@ -81,13 +87,14 @@ func RenderMarkup(ctx *context.Base, repo *context.Repository, mode, text, urlPr
 		Ctx: ctx,
 		Links: markup.Links{
 			AbsolutePrefix: true,
-			Base:           urlPrefix,
+			Base:           re.UrlPrefix,
+			BranchPath:     re.BranchPath,
 		},
 		Metas:        meta,
-		IsWiki:       wiki,
+		IsWiki:       re.IsWiki,
 		Type:         markupType,
 		RelativePath: relativePath,
-	}, strings.NewReader(text), ctx.Resp); err != nil {
+	}, strings.NewReader(re.Text), ctx.Resp); err != nil {
 		if markup.IsErrUnsupportedRenderExtension(err) {
 			ctx.Error(http.StatusUnprocessableEntity, err.Error())
 		} else {

routers/web/misc/markup.go

@@ -14,5 +14,16 @@ import (
 // Markup render markup document to HTML
 func Markup(ctx *context.Context) {
 	form := web.GetForm(ctx).(*api.MarkupOption)
-	common.RenderMarkup(ctx.Base, ctx.Repo, form.Mode, form.Text, form.Context, form.FilePath, form.Wiki)
+
+	re := common.Renderer{
+		Mode:         form.Mode,
+		Text:         form.Text,
+		UrlPrefix:    form.Context,
+		FilePath:     form.FilePath,
+		BranchPath:   form.BranchPath,
+		RelativePath: form.RelativePath,
+		IsWiki:       form.Wiki,
+	}
+
+	re.RenderMarkup(ctx.Base, ctx.Repo)
 }

templates/repo/editor/edit.tmpl

@@ -28,7 +28,7 @@
 			<div class="field">
 				<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
 					<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
-					<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/raw/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
+					<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
 					{{if not .IsNewFile}}
 					<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
 					{{end}}

web_src/js/features/repo-editor.js

@@ -23,9 +23,20 @@ function initEditPreviewTab($form) {
       }
       context = context.substring(0, context.lastIndexOf('/'));
 
+      // fetch branch path, Eg: `/branch/main`
+      const pathSegments = context.split("/").filter(segment => segment !== "");
+      const last2Seg = pathSegments.slice(-2);
+      const branchPath = "/" + last2Seg.join("/")
+      
+      // fetch relative path to the current repository as `/<username>/<repository>`
+      // Eg: `/jon-doe/repo1`
+      const relativePath = context.split("/src"+branchPath)[0]
+      
       const formData = new FormData();
       formData.append('mode', mode);
       formData.append('context', context);
+      formData.append('branch_path', branchPath)
+      formData.append('relative_path', relativePath)
       formData.append(
         'text',
         $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(),