Rich editor fails to load manually added embedded images

[krisgesling]

Using the rich text editor on the Notes web interface displays "Failed to load" for (seemingly) any embedded image links that aren't created by the rich text editor.

I have been migrating users from Evernote to Nextcloud Notes. The migration tool by default stores media in a _resources/{note-title}.resources/ directory and uses the relative path for the image source in the markdown. At first I thought that something was breaking in the rich display when any media url starts with an underscore, however after further testing I can't get any embedded image link to work unless it's created by the rich text editor itself. Is something being written to the database to enable the display?

To verify I don't just have a syntax error, I've been validating that it works using a local markdown viewer.

Steps to reproduce

1. Create note with an embedded image eg:

   ![image_file](_resources/note-title.resources/image_file.png)

2. The rich editor will display a generic image icon and message: "Failed to load _resources/note-title.resources/image_file.png"
3. I even tried changing an existing embedded image that was saved to the standard .attachments.xxxxxx directory. Renaming the directory to replace the first period with an underscore, and doing the same in the note markdown, results in the same issue of the image not displaying.
4. Also tried prepending the uri with ./ to see if it was only the start of the string that caused the issue. But same result.
5. I then tried making them fit the subdirectory naming that is generated when you use the rich editor to embed an image: .attachments.xxxxxx but again same result.
6. I then tried a completely innocuous directory name note-title
7. and finally no subdirectory

Expected behaviour

Relative image paths used in embedded image markdown should render in the rich text editor

Actual behaviour

None of these embedded image markdown links seem to work:

![image_file](_resources/note-title.resources/image_file.png)

or with the underscore char escaped:
![image_file](\_resources/note-title.resources/image_file.png)

or creating a notes "standard" subdirectory:
![image_file](.attachments.xxxxxx/note-title.resources/image_file.png)

no sub-directory at all:
![image_file](image_file.png)

Server

Please complete the following information.

• Notes app version: 4.8.1
• Nextcloud version: 27.1.3.2

Thanks

[juliushaertl]

@mejo- Since you recently worked on this, are relative urls like that now also covered by the text editor API in edit mode with a file id?

[mejo-]

@mejo- Since you recently worked on this, are relative urls like that now also covered by the text editor API in edit mode with a file id?

Yes, should be. I guess that Notes uses the MarkdownContentEditor and passes the markdown content in, right? Then we'd need to pass a fileId along with useSession: false. See here.

[juliushaertl]

No it uses the editor based on the file id as well with sessions.

Just verified it works fine in text but not notes. We seem to be missing to pass in the currentDirectory context

https://github.com/nextcloud/text/blob/60255e934e6781d4458f0fac21213216a0b148f1/src/services/AttachmentResolver.js#L105-L140

[Saijin-Naib]

Same behavior with OneNote files dumped to disk as MarkDown, which store all media in a media folder at the same level as the MarkDown notes.

Work perfectly locally, do not work in NextCloud Notes web, Android, no Iotas on Linux.

[keithvassallomt]

Sorry to bring this up again. I’m currently working on a tool to migrate Apple Notes to NextCloud Notes, and have this exact issue. Has any progress been made on this please?

I have also reproduced by manually creating a Markdown file with a link, same behaviour as OP.

And yes, Apple don’t make it easy 😂 but I’m getting there!