Skip to content

Drag and Drop to create Markdown images in MDX files #322

@karlhorky

Description

@karlhorky

Initial checklist

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions