From 86843d61f63ac1c41c32ca37474084893cbf6b56 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 9 Mar 2025 16:55:47 +0200
Subject: [PATCH] web/preferences: add option to disable inline images

---
 pkg/hicli/html.go                            | 34 +++++++++++++++-----
 pkg/hicli/sync.go                            |  2 +-
 web/src/api/types/preferences/preferences.ts |  6 ++++
 web/src/ui/StylePreferences.tsx              |  9 ++++++
 4 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/pkg/hicli/html.go b/pkg/hicli/html.go
index 31425b5..a2134ee 100644
--- a/pkg/hicli/html.go
+++ b/pkg/hicli/html.go
@@ -414,24 +414,42 @@ var HTMLSanitizerImgSrcTemplate = "mxc://%s/%s"
 
 func writeImg(w *strings.Builder, attr []html.Attribute) id.ContentURI {
 	src, alt, title, isCustomEmoji, width, height := parseImgAttributes(attr)
+	mxc := id.ContentURIString(src).ParseOrIgnore()
+	if !mxc.IsValid() {
+		w.WriteString("<span")
+		writeAttribute(w, "class", "hicli-inline-img-fallback hicli-invalid-inline-img")
+		w.WriteString(">")
+		writeEscapedString(w, alt)
+		w.WriteString("</span>")
+		return id.ContentURI{}
+	}
+	url := fmt.Sprintf(HTMLSanitizerImgSrcTemplate, mxc.Homeserver, mxc.FileID)
+
+	w.WriteString("<a")
+	writeAttribute(w, "class", "hicli-inline-img-fallback hicli-mxc-url")
+	writeAttribute(w, "title", title)
+	writeAttribute(w, "style", "display: none;")
+	writeAttribute(w, "target", "_blank")
+	writeAttribute(w, "data-mxc", mxc.String())
+	writeAttribute(w, "href", url)
+	w.WriteString(">")
+	writeEscapedString(w, alt)
+	w.WriteString("</a>")
+
 	w.WriteString("<img")
 	writeAttribute(w, "alt", alt)
 	if title != "" {
 		writeAttribute(w, "title", title)
 	}
-	mxc := id.ContentURIString(src).ParseOrIgnore()
-	if !mxc.IsValid() {
-		return id.ContentURI{}
-	}
-	writeAttribute(w, "src", fmt.Sprintf(HTMLSanitizerImgSrcTemplate, mxc.Homeserver, mxc.FileID))
+	writeAttribute(w, "src", url)
 	writeAttribute(w, "loading", "lazy")
 	if isCustomEmoji {
-		writeAttribute(w, "class", "hicli-custom-emoji")
+		writeAttribute(w, "class", "hicli-inline-img hicli-custom-emoji")
 	} else if cWidth, cHeight, sizeOK := calculateMediaSize(width, height); sizeOK {
-		writeAttribute(w, "class", "hicli-sized-inline-img")
+		writeAttribute(w, "class", "hicli-inline-img hicli-sized-inline-img")
 		writeAttribute(w, "style", fmt.Sprintf("width: %.2fpx; height: %.2fpx;", cWidth, cHeight))
 	} else {
-		writeAttribute(w, "class", "hicli-sizeless-inline-img")
+		writeAttribute(w, "class", "hicli-inline-img hicli-sizeless-inline-img")
 	}
 	return mxc
 }
diff --git a/pkg/hicli/sync.go b/pkg/hicli/sync.go
index 6ff1fa6..2ebb28f 100644
--- a/pkg/hicli/sync.go
+++ b/pkg/hicli/sync.go
@@ -598,7 +598,7 @@ func (h *HiClient) calculateLocalContent(ctx context.Context, dbEvt *database.Ev
 	return nil, nil
 }
 
-const CurrentHTMLSanitizerVersion = 8
+const CurrentHTMLSanitizerVersion = 10
 
 func (h *HiClient) ReprocessExistingEvent(ctx context.Context, evt *database.Event) {
 	if (evt.Type != event.EventMessage.Type && evt.DecryptedType != event.EventMessage.Type) ||
diff --git a/web/src/api/types/preferences/preferences.ts b/web/src/api/types/preferences/preferences.ts
index 696083a..05b4c1f 100644
--- a/web/src/api/types/preferences/preferences.ts
+++ b/web/src/api/types/preferences/preferences.ts
@@ -59,6 +59,12 @@ export const preferences = {
 		allowedContexts: anyContext,
 		defaultValue: true,
 	}),
+	show_inline_images: new Preference<boolean>({
+		displayName: "Show inline images",
+		description: "If disabled, custom emojis and other inline images will not be rendered and the alt attribute will be shown instead.",
+		allowedContexts: anyContext,
+		defaultValue: true,
+	}),
 	code_block_line_wrap: new Preference<boolean>({
 		displayName: "Code block line wrap",
 		description: "Whether to wrap long lines in code blocks instead of scrolling horizontally.",
diff --git a/web/src/ui/StylePreferences.tsx b/web/src/ui/StylePreferences.tsx
index 8c2da2b..d474259 100644
--- a/web/src/ui/StylePreferences.tsx
+++ b/web/src/ui/StylePreferences.tsx
@@ -117,6 +117,15 @@ const StylePreferences = ({ client, activeRoom }: StylePreferencesProps) => {
 			--timeline-status-size: 2rem;
 		}
 	`, [preferences.display_read_receipts])
+	useStyle(() => !preferences.show_inline_images && css`
+		a.hicli-inline-img-fallback {
+			display: inline !important;
+		}
+
+		img.hicli-inline-img {
+			display: none;
+		}
+	`, [preferences.show_inline_images])
 	useAsyncStyle(() => preferences.code_block_theme === "auto" ? `
 		@import url("_gomuks/codeblock/github.css") (prefers-color-scheme: light);
 		@import url("_gomuks/codeblock/github-dark.css") (prefers-color-scheme: dark);