Uploading an image via the comment section breaks task view

[Spiritreader]

Description

When adding a new image via the comment section by clicking on the image icon, after the image has been uploaded, it is no longer possible to navigate the site if you're in the /tasks/xyz view.

When in Kanban mode, trying to close the task popup results in vikunja doing a browser does nothing, and clicking on a blank space causes the browser to back-navigate for each click.

I've attached screenshots and a gif that describes the issue.

Attachments itself work fine, it's just adding an image as comment that causes this.

Vikunja Frontend Version

0.22.0

Vikunja API Version

v0.22.0

Browser and version

Firefox 123.03b / Vivaldi 6.5.3206.57

Can you reproduce the bug on the Vikunja demo site?

Yes

Screenshots

Task after uploading attachment via the image icon

After adding a photo the console shows this

Gif of issue

[kolaente]

Can you reproduce this with the latest release? (0.22.1)

[FunnyPocketBook]

Hey, I'm using the same vikunja instance as @Spiritreader

Can you reproduce this with the latest release? (0.22.1)

Partly. If I upload an image with the image button I still get the issue right after I inserted it.

However, once I completely close the tab and re-open vikunja, the issue is gone.

This doesn't work:

• Create issue
• click on image button in comments
• upload image
• try to close issue (fails here)

This works:

• Create issue
• click on image button in comments
• upload image
• close vikunja tab and re-open or full page reload (f5)
• open issue with issue comment
• close issue with comment

This also occurs on the vikunja demo site.

Here's the error:

[kolaente]

Does this only happen with images uploaded via a comment or with task descriptions as well? (They use the same upload mechanism)

[FunnyPocketBook]

Happens with task descriptions as well, same steps to reproduce. TypeError: ie is null shows up when I click away from the dialog or on the closing X symbol

Console output


[kolaente]

This is definitely a bug. I'll take a look.

[kolaente]

The actual error message seems to be caused by vue trying to insert the image as a child node of a <!-- v-if --> which exists before the actual editor node. Obviously, this won't work because a comment can't have child nodes. What does work is adding something else (text, markup, …) in the editor before adding the image. The bug seems to only happen when the image is the first element in the editor.

The best solution here would probably be to not manipulate the image element in html directly and use vue itself. Not sure if that's possible.

EDIT: Looks like the image manipulation itself is not the problem. This also fails with the default image component. My newest best guess is this is caused by a combination of prosemirror, tiptap and data flow (The updated description is passed up by emit, then set on the variable bound to v-model and flows back down. Then the rendering crashes.