Drag and Drop to create Markdown images in MDX files

[karlhorky]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

Quickly authoring MDX documents by dragging and dropping images is a nice DX

There is a drag and drop feature introduced in VS Code 1.70 (thanks @mjbvz) that allowed for handling dropped files (either from the VS Code explorer, editor tabs, the OS, or other applications) (extension sample) - activate this feature by holding shift while dragging a file.

With Markdown files (*.md), VS Code allows for creating a Markdown image:

Changing.how.an.image.is.dropped.using.the.drop.selector.widget.mp4

It would be amazing if creating Markdown images with drag and drop was also supported in an MDX file. Currently, as of VS Code 1.78, it just inserts the path:

vscode-1.78-april-2023-drag-drop-mdx.mp4

Solution

Apparently in VS Code 1.78 (April 2023) - or maybe earlier - there is an option for extensions to contribute their own options to this list:

VS Code includes a few built-in ways to drop common content formats. Extensions can also add their own drop options using the DocumentDropEditProvider API.

Source: https://code.visualstudio.com/updates/v1_78#_drop-selector

Maybe this would be the way to contribute this action of "Insert Markdown Image"

Alternatives

Installing the Drag And Drop Import Relative Path extension by @ElecTreeFrying

[wooorm]

How far should this be taken? What should we generate?

• What about other markdown, or MDX, files? Are there more formats? CSS? JS/JSX/TS/TSX?
• Should we generate markdown images? Or an <img>, <Image>? I think markdown.
• <video>, <Video>? What attributes?
• For videos, what about other source formats? User might drop an .mp4, and have an .webm next to it, should we figure that out and inject that too? Or, should someone drop multiple video files to get it turned? Or, can a user first drop one file, which turns into a video, and then drop another somewhere inside it, in which case a <source> is added?
• What URLs should be used? Presumably, MDX is compiled and runs from somewhere else (some bundle), so we’d need to be aware of where assets will be hosted, perhaps they aren’t, or somewhere else entirely?

[karlhorky]

I would suggest just copying the relatively simple VS Code implementation for a start - only handle single files, and insert (using relative paths):

• Markdown for images
• HTML element for videos

And only allow drag + drop to *.mdx files.

I think that's probably the 80% or even 90% use case.

[remcohaszing]

I like the idea of starting with inserting images using markdown syntax to get started. The inserted image node should contain a path relative to the MDX file. I think we should consider supporting other file types (Video files? URLs?) afterwards.

We also need to figure out is this is going to be part of the VSCode extension, or if the language server can somehow support this.

[karlhorky]

Wonder if this Copy external media files into workspace on drop or paste for Markdown from VS Code 1.79 (May 2023) is going to also just work out of the box, when this feature is implemented 😍

Coping.a.file.into.the.workspace.by.drag.and.dropping.it.mp4

[karlhorky]

Thanks for the PR and review at #345 @remcohaszing @wooorm 🙌

One question regarding this note from #345:

When dropping an image, the image is downloaded next to the file, and a markdown link is generated

When dragging and dropping an existing image from the VS Code tree (eg. an image which is either a sibling or in a different directory), I am guessing that it doesn't download the image again, right?

[remcohaszing]

It doesn’t handle images dragged from the file tree apparently, only from the web. But it definitely makes sense to do so. I’ll fix that right away.

[karlhorky]

Thanks @remcohaszing , awesome 🚀

I judge from the semver/minor label and the current version of 1.4.0 on the Releases page and the extension page that this will be released in a future 1.5.0 version?

I will be one of your first testers and will be happy to also do my bit to push the feature on social media too 🙌

[remcohaszing]

Yes. I really want to implement #349 in this release. That’s currently the only blocker (but not a hard one). Expect a release very soon.

I love the enthousiasm and would love your feedback and any promotion on social media ❤️

[remcohaszing]

Released in [email protected], @mdx-js/[email protected], @mdx-js/[email protected] 🎉

Re promotion: feel free to retweet https://twitter.com/remcohaszing/status/1722621607620059512 😄

[karlhorky]

Finally got some time to look at this.

Just trying to make a video of this feature for X/Twitter and I'm having trouble activating the feature. Am I doing something wrong?

I would expect that dragging a .png file into an .mdx file while holding Shift would cause an image tag to be created in that MDX (either Markdown image syntax or <img> tag)

Kapture.2023-11-26.at.15.53.17.mp4

[remcohaszing]

I’ve confirmed and found the problem.

You can drop images from external sources, but not reference local files. I’m working on it right now.

[karlhorky]

@remcohaszing I was making a video to test this just now, and it almost works!

The path seems to be 1 level incorrect though (the ../ prefix to the inserted path ../ci-cd-pipeline.png should be ./ or just an empty string)

Kapture.2023-12-17.at.13.54.20.mp4

Paths:

• slide-decks/partials/ciCd/index.mdx
• slide-decks/partials/ciCd/ci-cd-pipeline.png

[remcohaszing]

Fixed in 31f1912.

[karlhorky]

Great, just tested this in 1.6.1 of the VS Code and it works, thanks! 🚀 did some posts about it:

• https://twitter.com/karlhorky/status/1737656079092498773
• https://bsky.app/profile/karlhorky.bsky.social/post/3kgzkt5b3bc2c
• https://www.threads.net/@karlhorky/post/C1GWSICLesZ

[karlhorky]

I edited this issue to be image-only and moved the video parts to a new issue:

• Drag and Drop to create Markdown videos in MDX files #378