Fix image drop from main editor

[RomneyDa]

#7910

---

Summary by cubic

Fixes image drag-and-drop in the main TipTap editor so users can drop local files and images from VS Code and have them insert correctly.

• Bug Fixes
  • Handle drop/dragover inside a ProseMirror plugin and hide the overlay on drop.
  • Support VS Code “vscode-resource” image drops: parse HTML, resolve the file path, request the file as a data URL, and insert it as an image node.
  • Add readFileAsDataUrl protocol and VS Code handler to read files and return data URLs (png/jpeg).
  • Simplify DragOverlay and make it non-interactive to avoid blocking drops.
  • Gate behavior behind modelSupportsImages to avoid unsupported models.

[github-actions]

⚠️ PR Title Format

Your PR title doesn't follow the conventional commit format, but this won't block your PR from being merged. We recommend using this format for better project organization.

Expected Format:

<type>[optional scope]: <description>

Examples:

• feat: add changelog generation support
• fix: resolve login redirect issue
• docs: update README with new instructions
• chore: update dependencies

Valid Types:

feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert

This helps with:

• 📝 Automatic changelog generation
• 🚀 Automated semantic versioning
• 📊 Better project history tracking

This is a non-blocking warning - your PR can still be merged without fixing this.

[github-actions]

✅ Review Complete

Code Review Summary

⚠️ Continue configuration error. Please verify that the assistant exists in Continue Hub.

---

[cubic-dev-ai]

3 issues found across 7 files

Prompt for AI agents (all 3 issues)

Understand the root cause of the following 3 issues and fix them.


<file name="extensions/vscode/src/extension/VsCodeMessenger.ts">

<violation number="1" location="extensions/vscode/src/extension/VsCodeMessenger.ts:306">
Uppercase image extensions (e.g. foo.PNG) hit this branch and get labeled image/jpeg even though the bytes are PNG, producing a mismatched data URL that can fail to render; normalize the extension before comparing.</violation>
</file>

<file name="gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx">

<violation number="1" location="gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx:241">
Dropping a file on InputBoxDiv areas outside the ProseMirror view (like the toolbar) now navigates the browser to that file because this handler no longer calls event.preventDefault(), and the new drop plugin in utils/editorConfig.ts only runs for drops that originate on the editor DOM. Please continue to cancel the default action here to keep the page from navigating away.</violation>
</file>

<file name="gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts">

<violation number="1" location="gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts:189">
The drop handler always inserts the image at document position 0, so every dropped image appears at the top instead of the drop point. Please compute the drop insertion position (e.g., using the drop selection or view.posAtCoords) before inserting.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[cubic-dev-ai]

Uppercase image extensions (e.g. foo.PNG) hit this branch and get labeled image/jpeg even though the bytes are PNG, producing a mismatched data URL that can fail to render; normalize the extension before comparing.

Prompt for AI agents

Address the following comment on extensions/vscode/src/extension/VsCodeMessenger.ts at line 306:

<comment>Uppercase image extensions (e.g. foo.PNG) hit this branch and get labeled image/jpeg even though the bytes are PNG, producing a mismatched data URL that can fail to render; normalize the extension before comparing.</comment>

<file context>
@@ -298,6 +298,18 @@ export class VsCodeMessenger {
+      const fileUri = vscode.Uri.file(filepath);
+      const fileContents = await vscode.workspace.fs.readFile(fileUri);
+      const fileType =
+        filepath.split(&quot;.&quot;).pop() === &quot;png&quot; ? &quot;image/png&quot; : &quot;image/jpeg&quot;;
+      const dataUrl = `data:${fileType};base64,${Buffer.from(
+        fileContents,
</file context>

Suggested change

	filepath.split(".").pop() === "png" ? "image/png" : "image/jpeg";
	filepath.split(".").pop()?.toLowerCase() === "png" ? "image/png" : "image/jpeg";

[cubic-dev-ai]

Dropping a file on InputBoxDiv areas outside the ProseMirror view (like the toolbar) now navigates the browser to that file because this handler no longer calls event.preventDefault(), and the new drop plugin in utils/editorConfig.ts only runs for drops that originate on the editor DOM. Please continue to cancel the default action here to keep the page from navigating away.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx at line 241:

<comment>Dropping a file on InputBoxDiv areas outside the ProseMirror view (like the toolbar) now navigates the browser to that file because this handler no longer calls event.preventDefault(), and the new drop plugin in utils/editorConfig.ts only runs for drops that originate on the editor DOM. Please continue to cancel the default action here to keep the page from navigating away.</comment>

<file context>
@@ -221,40 +222,23 @@ function TipTapEditorInner(props: TipTapEditorProps) {
-          }
-        });
-        event.preventDefault();
+        // Let the event bubble to ProseMirror by not preventing default
       }}
     &gt;
</file context>

Suggested change

	// Let the event bubble to ProseMirror by not preventing default
	event.preventDefault();

[cubic-dev-ai]

The drop handler always inserts the image at document position 0, so every dropped image appears at the top instead of the drop point. Please compute the drop insertion position (e.g., using the drop selection or view.posAtCoords) before inserting.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts at line 189:

<comment>The drop handler always inserts the image at document position 0, so every dropped image appears at the top instead of the drop point. Please compute the drop insertion position (e.g., using the drop selection or view.posAtCoords) before inserting.</comment>

<file context>
@@ -147,6 +148,80 @@ export function createEditorConfig(options: {
+                        const node = schema.nodes.image.create({
+                          src: dataUrl,
+                        });
+                        const tr = view.state.tr.insert(0, node);
+                        view.dispatch(tr);
+                      }
</file context>