"data:" URLs handled wrong for images

[alx-tuilmenau]

Describe the bug
If Markdown-Files (especially Readme.md) contain data: URLs, a http(s) request for the preview (including data) is executed, trying to get the the image preview.
https://example.com/core/preview.png?file=%2Fdata%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D&x=1024&y=1024&a=true
This triggers (sometimes, if data is long enough) a "OCP\Files\InvalidPathException: Path length(7565) exceeds max path length(4000)" in the log.
Because there is no such image on the http(s) server, there is a 404 result and it will replaced with a placeholder, linked to the correct original data: - url. Clicking the placeholder opens the image in new tab.

To Reproduce
Steps to reproduce the behavior:

1. Create a Readme.md file with the content ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=)
2. Close and Reopen the file in text

Expected behavior
The image is displayed correctly (or at least not requested via http(s)).

Client details:

• OS: Win 10
• Browser: Firefox
• Version: 91
• Device: PC

Server details

Text app version: 3.1.0

Operating system: Debian 10

Web server: Apache

Database: MariaDB

PHP version: 7.3

Nextcloud version: 20.0.11

Logs

Nextcloud log (data/nextcloud.log)

if data is long enough, a OCP\Files\InvalidPathException: Path length(7565) exceeds max path length(4000) - Exception (but this is correct)

Browser log

The javascript console log:

GET https://example.com/core/preview.png?file=/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=&x=1024&y=1024&a=true
[HTTP/1.1 404 Not Found 413ms]

[DerpgonCz]

Also encountered the issue.

This boils down to this method:

text/src/nodes/ImageView.vue

Line 148 in c97ff9a

imageUrl() {

An easy fix would be handling data: URLs as-is, that is adding

isDataUrl() {
    return this.src.startsWith('data:');
}

or

isDataUrl() {
    return this.src.startsWith('data:')
        && imageMimes.indexOf(this.src.split(';')[0].split(':')[1]) !== -1;
}

And subsequently

		imageUrl() {
			if (this.src.startsWith('text://')) {
				const documentId = this.currentSession?.documentId
				const sessionId = this.currentSession?.id
				const sessionToken = this.currentSession?.token
				const imageFileName = getQueryVariable(this.src, 'imageFileName')
				if (getCurrentUser() || !this.token) {
					return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}',
						{
							documentId,
							sessionId,
							sessionToken,
							imageFileName,
						})
				} else {
					return generateUrl('/apps/text/image?documentId={documentId}&sessionId={sessionId}&sessionToken={sessionToken}&imageFileName={imageFileName}&shareToken={shareToken}',
						{
							documentId,
							sessionId,
							sessionToken,
							imageFileName,
							shareToken: this.token,
						})
				}
			}
			if (this.isRemoteUrl || this.isPreviewUrl || this.isDataUrl) {
				return this.src
			}
			if (this.hasPreview && this.mime !== 'image/gif') {
				return this.previewUrl
			}
			return this.davUrl
		},

Although I would submit a PR, I am not sure how to test this locally.

Also, of course, updating the test (should be enough to cover this bugfix with a test without the need of local testing).
https://github.com/nextcloud/text/blob/f33e0e5bad1dd7a668fe367759062f88b2f233fc/src/tests/nodes/ImageView.spec.js

Also handle malformed data URLs, if needed.

On a different note, would also be nice to fix a race condition in beforeMount:
Assigning Image.src before Image.onload does not fire the event if load event on the Image object happens before assigning the event handler function.

Demonstrated by this (ran on a machine that does not take absurd amount of time to process a simple BASE64 decode on a data URL):

Most of the time shows LOAD in console.

const img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=";
img.onload = () => console.log('LOAD');
img.onerror = () => console.error('ERROR');

Most likely does not show anything in console.

const img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=";
setTimeout(() => {
    img.onload = () => console.log('LOAD');
    img.onerror = () => console.error('ERROR');
}, 1000);