Fix image drop from main editor #7910

RomneyDa · 2025-09-22T23:46:49Z

Description

#7908
Reopening this with requested changes:

remove extraneous build script changes

…-image-drop-from-main-editor

cubic-dev-ai

10 issues found across 9 files

Prompt for AI agents (all 10 issues)


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


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

<violation number="1" location="extensions/vscode/src/extension/VsCodeMessenger.ts:295">
Non-PNG images are all forced to image/jpeg; gif/webp/svg (and others) will be mislabeled, causing incorrect data URLs.</violation>

<violation number="2" location="extensions/vscode/src/extension/VsCodeMessenger.ts:295">
Extension comparison is case-sensitive; uppercase extensions (e.g., .PNG) are misclassified, producing the wrong MIME type.</violation>
</file>

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

<violation number="1" location="gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx:226">
Unconditional hide overrides delayed/conditional logic in onDragLeave, making the delay and Shift-key behavior ineffective.</violation>

<violation number="2" location="gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx:241">
onDrop does not prevent default, which can cause the browser to navigate/open the dropped file when dropping outside the editor area. Add event.preventDefault() to avoid data loss risk.</violation>
</file>

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

<violation number="1" location="gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts:151">
Drop handler prevents default and returns true even when nothing is handled, likely blocking normal text/URL drops. Consider only preventing default/returning true when an image is actually processed, otherwise fall through.</violation>

<violation number="2" location="gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts:189">
Image from HTML drop is inserted at position 0 instead of the intended drop/caret position.</violation>
</file>

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

<violation number="1" location="gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts:44">
Avoid logging absolute local file paths to prevent leaking sensitive user information.</violation>

<violation number="2" location="gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts:66">
Avoid logging the full response object; it may contain large base64 data and sensitive content. Log only metadata (e.g., type or status) instead.</violation>

<violation number="3" location="gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts:146">
Logging the entire HTML content can expose sensitive data and add overhead. Prefer logging a short, non-sensitive summary.</violation>

<violation number="4" location="gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts:154">
Do not log full resource URLs that may include local file paths; log a generic message instead.</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 · 2025-09-22T23:55:12Z

extensions/vscode/src/extension/VsCodeMessenger.ts

+      const fileUri = vscode.Uri.file(filepath);
+      const fileContents = await vscode.workspace.fs.readFile(fileUri);
+      const fileType =
+        filepath.split(".").pop() === "png" ? "image/png" : "image/jpeg";


Non-PNG images are all forced to image/jpeg; gif/webp/svg (and others) will be mislabeled, causing incorrect data URLs.

Prompt for AI agents

Address the following comment on extensions/vscode/src/extension/VsCodeMessenger.ts at line 295: <comment>Non-PNG images are all forced to image/jpeg; gif/webp/svg (and others) will be mislabeled, causing incorrect data URLs.</comment> <file context> @@ -287,6 +287,18 @@ export class VsCodeMessenger { + const fileUri = vscode.Uri.file(filepath); + const fileContents = await vscode.workspace.fs.readFile(fileUri); + const fileType = + filepath.split(".").pop() === "png" ? "image/png" : "image/jpeg"; + const dataUrl = `data:${fileType};base64,${Buffer.from( + fileContents, </file context>

cubic-dev-ai · 2025-09-22T23:55:12Z

extensions/vscode/src/extension/VsCodeMessenger.ts

+      const fileUri = vscode.Uri.file(filepath);
+      const fileContents = await vscode.workspace.fs.readFile(fileUri);
+      const fileType =
+        filepath.split(".").pop() === "png" ? "image/png" : "image/jpeg";


Extension comparison is case-sensitive; uppercase extensions (e.g., .PNG) are misclassified, producing the wrong MIME type.

Prompt for AI agents

Address the following comment on extensions/vscode/src/extension/VsCodeMessenger.ts at line 295: <comment>Extension comparison is case-sensitive; uppercase extensions (e.g., .PNG) are misclassified, producing the wrong MIME type.</comment> <file context> @@ -287,6 +287,18 @@ export class VsCodeMessenger { + const fileUri = vscode.Uri.file(filepath); + const fileContents = await vscode.workspace.fs.readFile(fileUri); + const fileType = + filepath.split(".").pop() === "png" ? "image/png" : "image/jpeg"; + 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 · 2025-09-22T23:55:12Z

gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx

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


onDrop does not prevent default, which can cause the browser to navigate/open the dropped file when dropping outside the editor area. Add event.preventDefault() to avoid data loss risk.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx at line 241: <comment>onDrop does not prevent default, which can cause the browser to navigate/open the dropped file when dropping outside the editor area. Add event.preventDefault() to avoid data loss risk.</comment> <file context> @@ -221,40 +222,23 @@ function TipTapEditorInner(props: TipTapEditorProps) { - } - }); - event.preventDefault(); + // Let the event bubble to ProseMirror by not preventing default }} > </file context>

Suggested change

// Let the event bubble to ProseMirror by not preventing default

event.preventDefault();

cubic-dev-ai · 2025-09-22T23:55:12Z

gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx

          } else {
-            setTimeout(() => setShowDragOverMsg(false), 2000);
+            setTimeout(() => {
+              setShowDragOverMsg(false);


Unconditional hide overrides delayed/conditional logic in onDragLeave, making the delay and Shift-key behavior ineffective.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx at line 226: <comment>Unconditional hide overrides delayed/conditional logic in onDragLeave, making the delay and Shift-key behavior ineffective.</comment> <file context> @@ -221,40 +222,23 @@ function TipTapEditorInner(props: TipTapEditorProps) { } else { - setTimeout(() => setShowDragOverMsg(false), 2000); + setTimeout(() => { + setShowDragOverMsg(false); + }, 2000); } </file context>

cubic-dev-ai · 2025-09-22T23:55:12Z

gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts

          const plugin = new Plugin({
            props: {
              handleDOMEvents: {
+                drop(view, event) {


Drop handler prevents default and returns true even when nothing is handled, likely blocking normal text/URL drops. Consider only preventing default/returning true when an image is actually processed, otherwise fall through.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts at line 151: <comment>Drop handler prevents default and returns true even when nothing is handled, likely blocking normal text/URL drops. Consider only preventing default/returning true when an image is actually processed, otherwise fall through.</comment> <file context> @@ -147,6 +148,80 @@ export function createEditorConfig(options: { const plugin = new Plugin({ props: { handleDOMEvents: { + drop(view, event) { + // Hide drag overlay immediately when drop is handled + setShowDragOverMsg(false); </file context>

cubic-dev-ai · 2025-09-22T23:55:13Z

gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts

+                        const node = schema.nodes.image.create({
+                          src: dataUrl,
+                        });
+                        const tr = view.state.tr.insert(0, node);


Image from HTML drop is inserted at position 0 instead of the intended drop/caret position.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts at line 189: <comment>Image from HTML drop is inserted at position 0 instead of the intended drop/caret position.</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>

cubic-dev-ai · 2025-09-22T23:55:13Z

gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts

+    return undefined;
+  }
+
+  console.log("Extracted filepath:", filepath);


Avoid logging absolute local file paths to prevent leaking sensitive user information.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts at line 44: <comment>Avoid logging absolute local file paths to prevent leaking sensitive user information.</comment> <file context> @@ -2,6 +2,159 @@ import { IIdeMessenger } from "../../../../context/IdeMessenger"; + return undefined; + } + + console.log("Extracted filepath:", filepath); + + try { </file context>

Suggested change

console.log("Extracted filepath:", filepath);

console.log("Extracted filepath");

cubic-dev-ai · 2025-09-22T23:55:13Z

gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts

+    return undefined;
+  }
+
+  console.log("Found VS Code resource URL:", vscodeResourceUrl);


Do not log full resource URLs that may include local file paths; log a generic message instead.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts at line 154: <comment>Do not log full resource URLs that may include local file paths; log a generic message instead.</comment> <file context> @@ -2,6 +2,159 @@ import { IIdeMessenger } from "../../../../context/IdeMessenger"; + return undefined; + } + + console.log("Found VS Code resource URL:", vscodeResourceUrl); + return await handleVSCodeResourceUrl(ideMessenger, vscodeResourceUrl); +} </file context>

Suggested change

console.log("Found VS Code resource URL:", vscodeResourceUrl);

console.log("Found VS Code resource URL");

cubic-dev-ai · 2025-09-22T23:55:13Z

gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts

+  ideMessenger: IIdeMessenger,
+  html: string,
+): Promise<string | undefined> {
+  console.log("Processing HTML for VS Code resource URL:", html);


Logging the entire HTML content can expose sensitive data and add overhead. Prefer logging a short, non-sensitive summary.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts at line 146: <comment>Logging the entire HTML content can expose sensitive data and add overhead. Prefer logging a short, non-sensitive summary.</comment> <file context> @@ -2,6 +2,159 @@ import { IIdeMessenger } from "../../../../context/IdeMessenger"; + ideMessenger: IIdeMessenger, + html: string, +): Promise<string | undefined> { + console.log("Processing HTML for VS Code resource URL:", html); + + const vscodeResourceUrl = extractVSCodeResourceUrlFromHtml(html); </file context>

Suggested change

console.log("Processing HTML for VS Code resource URL:", html);

console.log("Processing HTML for VS Code resource URL");

cubic-dev-ai · 2025-09-22T23:55:13Z

gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts

+
+    const response = await Promise.race([requestPromise, timeoutPromise]);
+
+    console.log("Got response from ideMessenger.request:", response);


Avoid logging the full response object; it may contain large base64 data and sensitive content. Log only metadata (e.g., type or status) instead.

Prompt for AI agents

Address the following comment on gui/src/components/mainInput/TipTapEditor/utils/imageUtils.ts at line 66: <comment>Avoid logging the full response object; it may contain large base64 data and sensitive content. Log only metadata (e.g., type or status) instead.</comment> <file context> @@ -2,6 +2,159 @@ import { IIdeMessenger } from "../../../../context/IdeMessenger"; + + const response = await Promise.race([requestPromise, timeoutPromise]); + + console.log("Got response from ideMessenger.request:", response); + console.log("Response type:", typeof response); + </file context>

Suggested change

console.log("Got response from ideMessenger.request:", response);

console.log("Got response from ideMessenger.request");

sestinj · 2025-09-23T03:02:52Z

@aadarshkt it doesn't appear that I have access to push to this PR, could you either change this or run the following and add a commit?

git checkout main -- .vscode/launch.json
git checkout main -- .vscode/tasks.json

aadarshkt and others added 9 commits August 17, 2025 23:58

Add image to tiptapeditor from Main editor

aae1974

Merge branch 'main' of https://github.com/aadarshkt/continue into fix…

2f5757f

…-image-drop-from-main-editor

Solved Javascript heap out of memory

b238659

solved bug for multiple image support from main editor

3675d3b

remove default handling of image

68e9e6e

remove handle image logic to editor rather div

f9079ea

Merge branch 'main' of https://github.com/aadarshkt/continue into fix…

4bdca1a

…-image-drop-from-main-editor

remove image

2a04f4e

Merge branch 'main' into fix-image-drop-from-main-editor

4a86b55

RomneyDa requested a review from a team as a code owner September 22, 2025 23:46

RomneyDa requested review from tingwai and removed request for a team September 22, 2025 23:46

github-project-automation bot added this to Issues and PRs Sep 22, 2025

github-project-automation bot moved this to Todo in Issues and PRs Sep 22, 2025

dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Sep 22, 2025

RomneyDa requested a review from sestinj September 22, 2025 23:47

This was referenced Sep 22, 2025

Revert "Fix image drop from main editor" #7908

Merged

Fix image drop from main editor #7205

Merged

cubic-dev-ai bot reviewed Sep 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix image drop from main editor #7910

Fix image drop from main editor #7910

Uh oh!

RomneyDa commented Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

Uh oh!

sestinj commented Sep 23, 2025

Uh oh!

Uh oh!

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

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

	console.log("Extracted filepath:", filepath);
	console.log("Extracted filepath");

	console.log("Found VS Code resource URL:", vscodeResourceUrl);
	console.log("Found VS Code resource URL");

	console.log("Processing HTML for VS Code resource URL:", html);
	console.log("Processing HTML for VS Code resource URL");


		const response = await Promise.race([requestPromise, timeoutPromise]);

		console.log("Got response from ideMessenger.request:", response);

Fix image drop from main editor #7910

Are you sure you want to change the base?

Fix image drop from main editor #7910

Uh oh!

Conversation

RomneyDa commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sestinj commented Sep 23, 2025

Uh oh!

Uh oh!

RomneyDa commented Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading

cubic-dev-ai bot Sep 22, 2025 •

edited

Loading