Support to drag and drop images and text into MDX

When dropping an image, the image is downloaded next to the file, and a
markdown link is generated. When text is dropped, the text is inserted
as-is. This only works in VS Code.

This uses a naive text-based approach. This is very similar to the
implementation for markdown files that’s builtin to VS Code.

Closes #322

.changeset/lucky-books-tan.md

@@ -0,0 +1,5 @@
+---
+'vscode-mdx': minor
+---
+
+Support drag and dropping text and images into the editor.

fixtures/node16/mixed.mdx

@@ -3,7 +3,6 @@ import { a } from './a.mdx'
 {/*
   * Block comments are foldable.
   */}
-
 # Mixed content
 
 Paragraph

packages/vscode-mdx/src/document-drop-edit-provider.js

@@ -0,0 +1,52 @@
+/**
+ * @typedef {import('vscode').DocumentDropEditProvider} DocumentDropEditProvider
+ * @typedef {import('vscode').DataTransferItem} DataTransferItem
+ */
+
+import {Uri, WorkspaceEdit} from 'vscode'
+
+/**
+ * @type {DocumentDropEditProvider}
+ */
+export const documentDropEditProvider = {
+  async provideDocumentDropEdits(document, position, dataTransfer) {
+    /** @type {DataTransferItem | undefined} */
+    let textItem
+
+    for (const [mime, item] of dataTransfer) {
+      if (mime === 'text/plain') {
+        textItem = item
+        continue
+      }
+
+      if (!mime.startsWith('image/')) {
+        continue
+      }
+
+      const file = item.asFile()
+      if (!file) {
+        continue
+      }
+
+      const additionalEdit = new WorkspaceEdit()
+      additionalEdit.createFile(Uri.joinPath(document.uri, '..', file.name), {
+        contents: file,
+        ignoreIfExists: true
+      })
+
+      return {
+        insertText: '![](' + file.name + ')',
+        additionalEdit
+      }
+    }
+
+    if (textItem) {
+      const string = await textItem.asString()
+      return {insertText: string}
+    }
+
+    return {
+      insertText: ''
+    }
+  }
+}

packages/vscode-mdx/src/extension.js

@@ -6,8 +6,9 @@ import * as path from 'node:path'
 import {DiagnosticModel} from '@volar/language-server'
 import * as languageServerProtocol from '@volar/language-server/protocol.js'
 import {activateAutoInsertion, supportLabsVersion} from '@volar/vscode'
-import {env, workspace} from 'vscode'
+import {env, languages, workspace} from 'vscode'
 import {LanguageClient} from 'vscode-languageclient/node.js'
+import {documentDropEditProvider} from './document-drop-edit-provider.js'
 
 /**
  * @type {LanguageClient}
@@ -43,6 +44,13 @@ export async function activate(context) {
 
   activateAutoInsertion([client], (document) => document.languageId === 'mdx')
 
+  context.subscriptions.push(
+    languages.registerDocumentDropEditProvider(
+      {language: 'mdx'},
+      documentDropEditProvider
+    )
+  )
+
   return {
     volarLabs: {
       version: supportLabsVersion,