Desktop: Fix images fail to render in the preview pane for HTML notes (#10806)

packages/renderer/HtmlToHtml.ts

@@ -92,7 +92,7 @@ export default class HtmlToHtml implements MarkupRenderer {
 			...options,
 		};
 
-		const cacheKey = md5(escape(JSON.stringify({ markup, options })));
+		const cacheKey = md5(escape(JSON.stringify({ markup, options, baseUrl: this.resourceBaseUrl_ })));
 		let html = this.cache_.value(cacheKey);
 
 		if (!html) {
@@ -100,11 +100,10 @@ export default class HtmlToHtml implements MarkupRenderer {
 				allowedFilePrefixes: options.allowedFilePrefixes,
 			});
 
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-			html = htmlUtils.processImageTags(html, (data: any) => {
+			html = htmlUtils.processImageTags(html, (data) => {
 				if (!data.src) return null;
 
-				const r = utils.imageReplacement(this.ResourceModel_, data.src, options.resources, this.resourceBaseUrl_, options.itemIdToUrl);
+				const r = utils.imageReplacement(this.ResourceModel_, data, options.resources, this.resourceBaseUrl_, options.itemIdToUrl);
 				if (!r) return null;
 
 				if (typeof r === 'string') {

packages/renderer/htmlUtils.ts

@@ -56,14 +56,31 @@ export const isSelfClosingTag = (tagName: string) => {
 	return selfClosingElements.includes(tagName.toLowerCase());
 };
 
+type ProcessImageResult = {
+	type: 'replaceElement';
+	html: string;
+}|{
+	type: 'replaceSource';
+	src: string;
+}|{
+	type: 'setAttributes';
+	attrs: Record<string, string>;
+};
+interface ProcessImageEvent {
+	src: string;
+	before: string;
+	after: string;
+}
+type ProcessImageCallback = (data: ProcessImageEvent)=> ProcessImageResult;
+
 class HtmlUtils {
 
 	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
-	public processImageTags(html: string, callback: Function) {
+	public processImageTags(html: string, callback: ProcessImageCallback) {
 		if (!html) return '';
 
 		return html.replace(imageRegex, (_v, before, src, after) => {
-			const action = callback({ src: src });
+			const action = callback({ src, before, after });
 
 			if (!action) return `<img${before}src="${src}"${after}>`;
 
@@ -80,7 +97,7 @@ class HtmlUtils {
 				return `<img${before}${attrHtml}${after}>`;
 			}
 
-			throw new Error(`Invalid action: ${action.type}`);
+			throw new Error(`Invalid action: ${(action as Record<string, string>).type}`);
 		});
 	}