Merge pull request #1362 from getfider/markdown-image-support

mattwoberts · web-flow · commit ad738111e62d · 2025-09-09T20:31:17.000+01:00
Added support for URL based images.
diff --git a/app/handlers/apiv1/invite.go b/app/handlers/apiv1/invite.go
@@ -26,7 +26,7 @@ func SendSampleInvite() web.HandlerFunc {
 			action.Message = strings.Replace(action.Message, app.InvitePlaceholder, "*[the link to join will be here]*", -1)
 			to := dto.NewRecipient(c.User().Name, c.User().Email, dto.Props{
 				"subject": action.Subject,
-				"message": markdown.Full(action.Message),
+				"message": markdown.Full(action.Message, true),
 			})
 
 			bus.Publish(c, &cmd.SendMail{
diff --git a/app/handlers/feed.go b/app/handlers/feed.go
@@ -3,16 +3,17 @@ package handlers
 import (
 	"encoding/xml"
 	"fmt"
-	"github.com/getfider/fider/app/models/entity"
-	"github.com/getfider/fider/app/pkg/env"
-	"github.com/getfider/fider/app/pkg/i18n"
-	"github.com/getfider/fider/app/pkg/markdown"
 	"html"
 	"net/http"
 	"strconv"
 	"strings"
 	"time"
 
+	"github.com/getfider/fider/app/models/entity"
+	"github.com/getfider/fider/app/pkg/env"
+	"github.com/getfider/fider/app/pkg/i18n"
+	"github.com/getfider/fider/app/pkg/markdown"
+
 	"github.com/getfider/fider/app/models/query"
 	"github.com/getfider/fider/app/pkg/bus"
 	"github.com/getfider/fider/app/pkg/web"
@@ -119,7 +120,7 @@ func generatePostContent(c *web.Context, post *entity.Post, options *generatorOp
 		})
 	}
 
-	return string(markdown.Full(title + post.Description + footer))
+	return string(markdown.Full(title+post.Description+footer, true))
 }
 
 func appendTags(c *web.Context, categories []*Category, post *entity.Post) ([]*Category, error) {
@@ -158,7 +159,7 @@ func GlobalFeed() web.HandlerFunc {
 
 		feed := &AtomFeed{
 			Title:    c.Tenant().Name,
-			Subtitle: Content{Body: string(markdown.Full(c.Tenant().WelcomeMessage)), Type: "html"},
+			Subtitle: Content{Body: string(markdown.Full(c.Tenant().WelcomeMessage, true)), Type: "html"},
 			Id:       web.BaseURL(c),
 			Link: []Link{
 				{Href: fmt.Sprintf("%s/feed/global.atom", web.BaseURL(c)), Type: "application/atom+xml", Rel: "self"},
@@ -246,7 +247,7 @@ func CommentFeed() web.HandlerFunc {
 
 		feed := &AtomFeed{
 			Title:    post.Title,
-			Subtitle: Content{Body: string(markdown.Full(post.Description)), Type: "html"},
+			Subtitle: Content{Body: string(markdown.Full(post.Description, true)), Type: "html"},
 			Author:   &Author{Name: post.User.Name},
 			Id:       fmt.Sprintf("%s/posts/%d/#comments", web.BaseURL(c), post.Number),
 			Link: []Link{
@@ -288,7 +289,7 @@ func CommentFeed() web.HandlerFunc {
 				Link: []Link{
 					{Href: fmt.Sprintf("%s/posts/%d", web.BaseURL(c), post.Number), Type: "text/html", Rel: "alternate"},
 				},
-				Content:    &Content{Type: "html", Body: string(markdown.Full(post.Response.Text))},
+				Content:    &Content{Type: "html", Body: string(markdown.Full(post.Response.Text, true))},
 				Categories: []*Category{{Term: i18n.T(c, "enum.poststatus."+post.Status.Name())}},
 			})
 		}
@@ -314,7 +315,7 @@ func CommentFeed() web.HandlerFunc {
 					}
 					return formatTime(*comment.EditedAt)
 				}(),
-				Content: &Content{Type: "html", Body: string(markdown.Full(html.UnescapeString(comment.Content)))},
+				Content: &Content{Type: "html", Body: string(markdown.Full(html.UnescapeString(comment.Content), true))},
 				Id:      fmt.Sprintf("%s/posts/%d/#comment-%d", web.BaseURL(c), post.Number, comment.ID),
 				Link:    []Link{{Href: fmt.Sprintf("%s/posts/%d/#comment-%d", web.BaseURL(c), post.Number, comment.ID), Type: "text/html", Rel: "alternate"}},
 			})
diff --git a/app/pkg/markdown/markdown.go b/app/pkg/markdown/markdown.go
@@ -31,28 +31,38 @@ var htmlFlags = 0 |
 	htmlrenderer.NofollowLinks |
 	htmlrenderer.NoreferrerLinks
 
-var fullRenderer = htmlrenderer.NewRenderer(htmlrenderer.RendererOptions{
-	Flags: htmlFlags,
-	RenderNodeHook: func(w io.Writer, node ast.Node, entering bool) (ast.WalkStatus, bool) {
-		switch node := node.(type) {
-		case *ast.HTMLSpan:
-			htmlrenderer.EscapeHTML(w, node.Literal)
-			return ast.GoToNext, true
-		case *ast.HTMLBlock:
-			_, _ = io.WriteString(w, "\n")
-			htmlrenderer.EscapeHTML(w, node.Literal)
-			_, _ = io.WriteString(w, "\n")
-			return ast.GoToNext, true
-		}
-		return ast.GoToNext, false
-	},
-})
+func createRenderer(handleImages bool) *htmlrenderer.Renderer {
+	return htmlrenderer.NewRenderer(htmlrenderer.RendererOptions{
+		Flags: htmlFlags,
+		RenderNodeHook: func(w io.Writer, node ast.Node, entering bool) (ast.WalkStatus, bool) {
+			switch node := node.(type) {
+			case *ast.HTMLSpan:
+				htmlrenderer.EscapeHTML(w, node.Literal)
+				return ast.GoToNext, true
+			case *ast.HTMLBlock:
+				_, _ = io.WriteString(w, "\n")
+				htmlrenderer.EscapeHTML(w, node.Literal)
+				_, _ = io.WriteString(w, "\n")
+				return ast.GoToNext, true
+			case *ast.Image:
+				if !handleImages {
+					// Skip images entirely when handleImages is false
+					return ast.SkipChildren, true
+				}
+			}
+			return ast.GoToNext, false
+		},
+	})
+}
 
 // Full turns a markdown into HTML using all rules
-func Full(input string) template.HTML {
+func Full(input string, handleImages bool) template.HTML {
 	// Apparently a parser cannot be reused.
 	// https://github.com/gomarkdown/markdown/issues/229
 	parser := mdparser.NewWithExtensions(mdExtns)
-	output := markdown.ToHTML([]byte(input), parser, fullRenderer)
+
+	renderer := createRenderer(handleImages)
+
+	output := markdown.ToHTML([]byte(input), parser, renderer)
 	return template.HTML(strings.TrimSpace(string(output)))
 }
diff --git a/app/pkg/markdown/markdown_test.go b/app/pkg/markdown/markdown_test.go
@@ -45,7 +45,24 @@ This will allow to send and receive SMS and get the IMEI No. in our app.</p>
 
 <p>Thanks!</p>`,
 	} {
-		output := markdown.Full(input)
+		output := markdown.Full(input, true)
+		Expect(output).Equals(template.HTML(expected))
+	}
+}
+
+func TestFullMarkdownWithoutImages(t *testing.T) {
+	RegisterT(t)
+
+	for input, expected := range map[string]string{
+		"# Hello World":                                                            `<h1>Hello World</h1>`,
+		"![](http://example.com/hello.jpg)":                                        `<p></p>`,
+		"![Alt text](http://example.com/hello.jpg)":                                `<p></p>`,
+		"Text before ![image](http://example.com/hello.jpg) text after":            `<p>Text before  text after</p>`,
+		"![Image 1](http://example.com/1.jpg)![Image 2](http://example.com/2.jpg)": `<p></p>`,
+		"Hello **bold** text with ![image](http://example.com/hello.jpg)":          `<p>Hello <strong>bold</strong> text with </p>`,
+		"Go to http://example.com/hello.jpg":                                       `<p>Go to <a href="http://example.com/hello.jpg" rel="nofollow noreferrer">http://example.com/hello.jpg</a></p>`,
+	} {
+		output := markdown.Full(input, false)
 		Expect(output).Equals(template.HTML(expected))
 	}
 }
diff --git a/app/pkg/tpl/funcs.go b/app/pkg/tpl/funcs.go
@@ -36,7 +36,7 @@ var templateFunctions = map[string]any{
 		return "This is overwritten later on..."
 	},
 	"markdown": func(input string) template.HTML {
-		return markdown.Full(input)
+		return markdown.Full(input, true)
 	},
 	"dict": func(values ...any) map[string]any {
 		if len(values)%2 != 0 {
diff --git a/app/tasks/delete_post.go b/app/tasks/delete_post.go
@@ -79,7 +79,7 @@ func NotifyAboutDeletedPost(post *entity.Post, deleteCommentAdded bool) worker.T
 		props := dto.Props{
 			"title":    post.Title,
 			"siteName": tenant.Name,
-			"content":  markdown.Full(post.Response.Text),
+			"content":  markdown.Full(post.Response.Text, true),
 			"change":   linkWithText(i18n.T(c, "email.subscription.change"), baseURL, "/settings"),
 			"logo":     logoURL,
 		}
diff --git a/app/tasks/invites.go b/app/tasks/invites.go
@@ -15,7 +15,7 @@ import (
 	"github.com/getfider/fider/app/pkg/worker"
 )
 
-//SendInvites sends one email to each invited recipient
+// SendInvites sends one email to each invited recipient
 func SendInvites(subject, message string, invitations []*actions.UserInvitation) worker.Task {
 	return describe("Send invites", func(c *worker.Context) error {
 		to := make([]dto.Recipient, len(invitations))
@@ -32,7 +32,7 @@ func SendInvites(subject, message string, invitations []*actions.UserInvitation)
 			url := fmt.Sprintf("%s/invite/verify?k=%s", web.BaseURL(c), invite.VerificationKey)
 			toMessage := strings.Replace(message, app.InvitePlaceholder, url, -1)
 			to[i] = dto.NewRecipient("", invite.Email, dto.Props{
-				"message": markdown.Full(toMessage),
+				"message": markdown.Full(toMessage, true),
 			})
 		}
 
diff --git a/app/tasks/new_comment.go b/app/tasks/new_comment.go
@@ -298,7 +298,7 @@ func sendEmailNotifications(c *worker.Context, post *entity.Post, to []dto.Recip
 		"messageLocaleString": messaleLocaleString,
 		"siteName":            tenant.Name,
 		"userName":            author.Name,
-		"content":             markdown.Full(comment),
+		"content":             markdown.Full(comment, false),
 		"postLink":            linkWithText(fmt.Sprintf("#%d", post.Number), baseURL, "/posts/%d/%s", post.Number, post.Slug),
 		"view":                linkWithText(i18n.T(c, "email.subscription.view"), baseURL, "/posts/%d/%s", post.Number, post.Slug),
 		"unsubscribe":         linkWithText(i18n.T(c, "email.subscription.unsubscribe"), baseURL, "/posts/%d/%s", post.Number, post.Slug),
diff --git a/app/tasks/new_post.go b/app/tasks/new_post.go
@@ -119,7 +119,7 @@ func NotifyAboutNewPost(post *entity.Post) worker.Task {
 			"title":    post.Title,
 			"siteName": tenant.Name,
 			"userName": author.Name,
-			"content":  markdown.Full(contentString.SanitizeMentions()),
+			"content":  markdown.Full(contentString.SanitizeMentions(), false),
 			"postLink": linkWithText(fmt.Sprintf("#%d", post.Number), baseURL, "/posts/%d/%s", post.Number, post.Slug),
 			"view":     linkWithText(i18n.T(c, "email.subscription.view"), baseURL, "/posts/%d/%s", post.Number, post.Slug),
 			"change":   linkWithText(i18n.T(c, "email.subscription.change"), baseURL, "/settings"),
diff --git a/app/tasks/status_change.go b/app/tasks/status_change.go
@@ -15,7 +15,7 @@ import (
 	"github.com/getfider/fider/app/pkg/worker"
 )
 
-//NotifyAboutStatusChange sends a notification (web and email) to subscribers
+// NotifyAboutStatusChange sends a notification (web and email) to subscribers
 func NotifyAboutStatusChange(post *entity.Post, prevStatus enum.PostStatus) worker.Task {
 	return describe("Notify about post status change", func(c *worker.Context) error {
 		//Don't notify if previous status is the same
@@ -72,7 +72,7 @@ func NotifyAboutStatusChange(post *entity.Post, prevStatus enum.PostStatus) work
 			"title":       post.Title,
 			"postLink":    linkWithText(fmt.Sprintf("#%d", post.Number), baseURL, "/posts/%d/%s", post.Number, post.Slug),
 			"siteName":    tenant.Name,
-			"content":     markdown.Full(post.Response.Text),
+			"content":     markdown.Full(post.Response.Text, true),
 			"status":      i18n.T(c, fmt.Sprintf("enum.poststatus.%s", post.Status.Name())),
 			"duplicate":   duplicate,
 			"view":        linkWithText(i18n.T(c, "email.subscription.view"), baseURL, "/posts/%d/%s", post.Number, post.Slug),
diff --git a/public/components/common/form/CustomImage.ts b/public/components/common/form/CustomImage.ts
@@ -1,6 +1,7 @@
 import { ImageUpload } from "@fider/models"
 import Image from "@tiptap/extension-image"
 import * as MarkdownIt from "markdown-it"
+import { defaultMarkdownSerializer } from "prosemirror-markdown"
 
 export interface CustomImageOptions {
   HTMLAttributes?: Record<string, any>
@@ -59,6 +60,11 @@ export const CustomImage = Image.extend<CustomImageOptions>({
       images: {},
       markdown: {
         serialize: (state: any, node: any) => {
+          if (!node.attrs.bkey && !node.attrs.id) {
+            // Call the default image serializer
+            return defaultMarkdownSerializer.nodes.image(state, node, node.parent, node.index)
+          }
+
           // When serializing to markdown, we use a special syntax: ![](fider-image:bkey)
           // Use bkey if available, otherwise fall back to id
           const imageId = node.attrs.bkey || node.attrs.id || ""
diff --git a/public/services/markdown.spec.ts b/public/services/markdown.spec.ts
@@ -10,9 +10,15 @@ const testCases = [
   },
   {
     input: "My Picture ![](http://demo.dev.fider.io:3000/images/100/28)",
-    expectedFull: "<p>My Picture </p>",
+    expectedFull: '<p>My Picture <img alt="" src="http://demo.dev.fider.io:3000/images/100/28"></p>',
     expectedPlainText: "My Picture",
   },
+  {
+    input: "My Fider Picture ![](fider-image:attachments/zy0hBtqrjQki7M56p26AuAXljRoaNUSwZO6MOky5gnYm2nW1rsMmrp3dwhjGk7ok-aden.jpeg)",
+    expectedFull:
+      '<p>My Fider Picture <img data-bkey="attachments/zy0hBtqrjQki7M56p26AuAXljRoaNUSwZO6MOky5gnYm2nW1rsMmrp3dwhjGk7ok-aden.jpeg" class="fider-inline-image" alt="" src="/static/images/attachments/zy0hBtqrjQki7M56p26AuAXljRoaNUSwZO6MOky5gnYm2nW1rsMmrp3dwhjGk7ok-aden.jpeg"></p>',
+    expectedPlainText: "My Fider Picture",
+  },
   {
     input: "# Hello World",
     expectedFull: "<h1>Hello World</h1>",
diff --git a/public/services/markdown.ts b/public/services/markdown.ts
@@ -40,13 +40,14 @@ const link = (href: string, title: string, text: string) => {
 }
 
 const fullRenderer = new marked.Renderer()
+const originalImage = fullRenderer.image.bind(fullRenderer)
 fullRenderer.image = (href, title, alt) => {
   // Check if this is our special fider-image syntax
   if (href && href.startsWith("fider-image:")) {
     const bkey = href.substring("fider-image:".length)
     return `<img src="/static/images/${bkey}" alt="${alt || ""}" class="fider-inline-image" data-bkey="${bkey}" />`
   }
-  return "" // Ignore other images
+  return originalImage(href, title, alt)
 }
 fullRenderer.link = link
 fullRenderer.text = (text: string) => {

Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ func NotifyAboutDeletedPost(post *entity.Post, deleteCommentAdded bool) worker.T`
`79`	`79`	`props := dto.Props{`
`80`	`80`	`"title": post.Title,`
`81`	`81`	`"siteName": tenant.Name,`
`82`		`- "content": markdown.Full(post.Response.Text),`
	`82`	`+ "content": markdown.Full(post.Response.Text, true),`
`83`	`83`	`"change": linkWithText(i18n.T(c, "email.subscription.change"), baseURL, "/settings"),`
`84`	`84`	`"logo": logoURL,`
`85`	`85`	`}`