fix: Preview picture not visible on Markdown file (#5781)

Extend API MarkupOptions to contain branch path.

The `api.MarkupOptions{}`  to have `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.

And `repo-editor.js` will contain a new form data which is `branch-path`
which will then be utilized by `edit.tmpl` as `data-branch-path`.

Closes: #4510

## Checklist

The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).

### Tests

- I added test coverage for Go changes...
  - [ ] in their respective `*_test.go` for unit tests.
  - [ ] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I added test coverage for JavaScript changes...
  - [ ] in `web_src/js/*.test.js` if it can be unit tested.
  - [x] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [ ] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [ ] I do not want this change to show in the release notes.
- [x] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/5781
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Co-authored-by: Nirmal Kumar R <tildezero@gmail.com>
Co-committed-by: Nirmal Kumar R <tildezero@gmail.com>

modules/structs/miscellaneous.go

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

routers/api/v1/misc/markup.go

@@ -41,7 +41,16 @@ 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,
+		IsWiki:     form.Wiki,
+	}
+
+	re.RenderMarkup(ctx.Base, ctx.Repo)
 }
 
 // Markdown render markdown document to HTML
@@ -76,7 +85,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 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,30 @@ func RenderMarkup(ctx *context.Base, repo *context.Repository, mode, text, urlPr
 	case "file":
 		// File as document based on file extension
 		markupType = ""
-		relativePath = filePath
+		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 +86,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,15 @@ 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,
+		IsWiki:     form.Wiki,
+	}
+
+	re.RenderMarkup(ctx.Base, ctx.Repo)
 }

routers/web/repo/editor.go

@@ -211,6 +211,7 @@ func editFile(ctx *context.Context, isNewFile bool) {
 	ctx.Data["TreeNames"] = treeNames
 	ctx.Data["TreePaths"] = treePaths
 	ctx.Data["BranchLink"] = ctx.Repo.RepoLink + "/src/" + ctx.Repo.BranchNameSubURL()
+	ctx.Data["BranchPath"] = ctx.Repo.BranchNameSubURL()
 	ctx.Data["commit_summary"] = ""
 	ctx.Data["commit_message"] = ""
 	if canCommit {

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}}/src/{{.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}}" data-branch-path="{{.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}}

templates/swagger/v1_json.tmpl

@@ -24322,6 +24322,10 @@
       "description": "MarkupOption markup options",
       "type": "object",
       "properties": {
+        "BranchPath": {
+          "description": "The current branch path where the form gets posted\n\nin: body",
+          "type": "string"
+        },
         "Context": {
           "description": "Context to render\n\nin: body",
           "type": "string"

tests/e2e/markdown-editor.test.e2e.ts

@@ -11,6 +11,37 @@ test.beforeAll(async ({browser}, workerInfo) => {
   await login_user(browser, workerInfo, 'user2');
 });
 
+test('Markdown image preview behaviour', async ({browser}, workerInfo) => {
+  test.skip(workerInfo.project.name === 'Mobile Safari', 'Flaky behaviour on mobile safari;');
+
+  const context = await load_logged_in_context(browser, workerInfo, 'user2');
+
+  // Editing the root README.md file for image preview
+  const editPath = '/user2/repo1/src/branch/master/README.md';
+
+  const page = await context.newPage();
+  const response = await page.goto(editPath, {waitUntil: 'domcontentloaded'});
+  expect(response?.status()).toBe(200);
+
+  // Click 'Edit file' tab
+  await page.locator('[data-tooltip-content="Edit file"]').click();
+
+  // This yields the monaco editor
+  const editor = page.getByRole('presentation').nth(0);
+  await editor.click();
+  // Clear all the content
+  await page.keyboard.press('ControlOrMeta+KeyA');
+  // Add the image
+  await page.keyboard.type('![Logo of Forgejo](./assets/logo.svg "Logo of Forgejo")');
+
+  // Click 'Preview' tab
+  await page.locator('a[data-tab="preview"]').click();
+
+  // Check for the image preview via the expected attribute
+  const preview = page.locator('div[data-tab="preview"] p[dir="auto"] a');
+  await expect(preview).toHaveAttribute('href', 'http://localhost:3003/user2/repo1/media/branch/master/assets/logo.svg');
+});
+
 test('markdown indentation', async ({browser}, workerInfo) => {
   const context = await load_logged_in_context(browser, workerInfo, 'user2');
 

web_src/js/features/repo-editor.js

@@ -26,6 +26,7 @@ function initEditPreviewTab($form) {
       const formData = new FormData();
       formData.append('mode', mode);
       formData.append('context', context);
+      formData.append('branch_path', $this.data('branch-path'));
       formData.append(
         'text',
         $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(),