Fix html export not including images (#9260)

* Fix html export not including images

* Respect showPlaceholder

* Add tests

Author: t3chguy

src/components/views/messages/MImageBody.tsx

@@ -391,7 +391,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             // By doing this, the image "pops" into the timeline, but is still restricted
             // by the same width and height logic below.
             if (!this.state.loadedImageDimensions) {
-                let imageElement;
+                let imageElement: JSX.Element;
                 if (!this.state.showImage) {
                     imageElement = <HiddenImagePlaceholder />;
                 } else {
@@ -425,7 +425,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         let gifLabel: JSX.Element;
 
         if (!this.props.forExport && !this.state.imgLoaded) {
-            placeholder = this.getPlaceholder(maxWidth, maxHeight);
+            const classes = classNames('mx_MImageBody_placeholder', {
+                'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
+            });
+
+            placeholder = <div className={classes}>
+                { this.getPlaceholder(maxWidth, maxHeight) }
+            </div>;
         }
 
         let showPlaceholder = Boolean(placeholder);
@@ -463,29 +469,26 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             banner = this.getBanner(content);
         }
 
-        const classes = classNames({
-            'mx_MImageBody_placeholder': true,
-            'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
-        });
-
         // many SVGs don't have an intrinsic size if used in <img> elements.
         // due to this we have to set our desired width directly.
         // this way if the image is forced to shrink, the height adapts appropriately.
         const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };
 
+        if (!this.props.forExport) {
+            placeholder = <SwitchTransition mode="out-in">
+                <CSSTransition
+                    classNames="mx_rtg--fade"
+                    key={`img-${showPlaceholder}`}
+                    timeout={300}
+                >
+                    { showPlaceholder ? placeholder : <></> /* Transition always expects a child */ }
+                </CSSTransition>
+            </SwitchTransition>;
+        }
+
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
-                <SwitchTransition mode="out-in">
-                    <CSSTransition
-                        classNames="mx_rtg--fade"
-                        key={`img-${showPlaceholder}`}
-                        timeout={300}
-                    >
-                        { showPlaceholder ? <div className={classes}>
-                            { placeholder }
-                        </div> : <></> /* Transition always expects a child */ }
-                    </CSSTransition>
-                </SwitchTransition>
+                { placeholder }
 
                 <div style={sizing}>
                     { img }
@@ -494,7 +497,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                 </div>
 
                 { /* HACK: This div fills out space while the image loads, to prevent scroll jumps */ }
-                { !this.state.imgLoaded && <div style={{ height: maxHeight, width: maxWidth }} /> }
+                { !this.props.forExport && !this.state.imgLoaded && (
+                    <div style={{ height: maxHeight, width: maxWidth }} />
+                ) }
 
                 { this.state.hover && this.getTooltip() }
             </div>
@@ -559,9 +564,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             );
         }
 
-        const contentUrl = this.state.contentUrl;
+        let contentUrl = this.state.contentUrl;
         let thumbUrl: string;
-        if (this.props.forExport || (this.state.isAnimated && SettingsStore.getValue("autoplayGifs"))) {
+        if (this.props.forExport) {
+            contentUrl = this.props.mxEvent.getContent().url ?? this.props.mxEvent.getContent().file?.url;
+            thumbUrl = contentUrl;
+        } else if (this.state.isAnimated && SettingsStore.getValue("autoplayGifs")) {
             thumbUrl = contentUrl;
         } else {
             thumbUrl = this.state.thumbUrl ?? this.state.contentUrl;

src/utils/exportUtils/HtmlExport.tsx

@@ -316,7 +316,7 @@ export default class HTMLExporter extends Exporter {
         }
 
         if (filePath) {
-            const mxc = mxEv.getContent().url || mxEv.getContent().file?.url;
+            const mxc = mxEv.getContent().url ?? mxEv.getContent().file?.url;
             eventTileMarkup = eventTileMarkup.split(mxc).join(filePath);
         }
         eventTileMarkup = eventTileMarkup.replace(/<span class="mx_MFileBody_info_icon".*?>.*?<\/span>/, '');
@@ -382,7 +382,9 @@ export default class HTMLExporter extends Exporter {
                         joined,
                     );
                 }
-            } else eventTile = await this.getEventTileMarkup(mxEv, joined);
+            } else {
+                eventTile = await this.getEventTileMarkup(mxEv, joined);
+            }
         } catch (e) {
             // TODO: Handle callEvent errors
             logger.error(e);

test/utils/export-test.tsx

@@ -115,6 +115,29 @@ describe('export', function() {
         });
     }
 
+    function mkImageEvent() {
+        return new MatrixEvent({
+            "content": {
+                "body": "image.png",
+                "info": {
+                    "mimetype": "image/png",
+                    "size": 31613,
+                },
+                "msgtype": "m.image",
+                "url": "mxc://test.org",
+            },
+            "origin_server_ts": 1628872988364,
+            "sender": MY_USER_ID,
+            "type": "m.room.message",
+            "unsigned": {
+                "age": 266,
+                "transaction_id": "m99999999.2",
+            },
+            "event_id": "$99999999999999999999",
+            "room_id": mockRoom.roomId,
+        });
+    }
+
     function mkEvents() {
         const matrixEvents = [];
         let i: number;
@@ -204,6 +227,18 @@ describe('export', function() {
         ).toBeTruthy();
     });
 
+    it("should export images if attachments are enabled", () => {
+        const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, {
+            numberOfMessages: 5,
+            maxSize: 100 * 1024 * 1024,
+            attachmentsIncluded: true,
+        }, null);
+        const imageRegex = /<img.+ src="mxc:\/\/test.org" alt="image.png"\/>/;
+        expect(imageRegex.test(
+            renderToString(exporter.getEventTile(mkImageEvent(), true))),
+        ).toBeTruthy();
+    });
+
     const invalidExportOptions: [string, IExportOptions][] = [
         ['numberOfMessages exceeds max', {
             numberOfMessages: 10 ** 9,