Smarter handling of embedded images

Use case or problem

I am annotating YouTube videos and trying to import my notes. These sometimes include embedded images - screen grabs. These display in the markdown as something like…

![Zozc!3.x_ZS of(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAUDBBAODg0ODQ0OEA0ODQ0ODQ4NEA8NDQ8NDw0NDR...

These display properly BUT they make editing the markdown IMPOSSIBLE because the markdown is completely overwhelmed by thousands of bytes of this stuff. The entire visible page is a continuous stream of bytes. This is what it looks like to me…

https://1drv.ms/u/s!AjaZ-t3uLVN_0N1316E8WdE--pdEXQ?e=i3Trng

Proposed solution

Few ideas:

  • Plug-in to export these embedded images into an “images” folder and replace embedded data with local link.
  • Format the markdown of these images (or any really long link) so they are collapsed by default. Don’t like the markdown files being huge though.
  • Preferred option is a built-in converter, not a plug-in, that notices these situations upon paste and offers to move the embedded images into another folder. Also when an image is embedded and you are previewing it, show a menu button near the image for “export this image” and “export all images in file”.

Current workaround (optional)

Delete the images

Related feature requests (optional)

2 Likes

+1 for this.

It would be awesome if links were shown as the title only, but when the cursor is inside the link, expand to show the full URL. Bear does this in a similar way and it keeps the markup looking very clean.

How do you even capture and embed them as base64? I mean not how to use the data object instead of a link, but what is your workflow to easily capture screengrabs from a video as a base64-encoded string?