Skip to content

Images now paste under the cursor#3861

Draft
advait87 wants to merge 2 commits intoGraphiteEditor:masterfrom
advait87:paste_image
Draft

Images now paste under the cursor#3861
advait87 wants to merge 2 commits intoGraphiteEditor:masterfrom
advait87:paste_image

Conversation

@advait87
Copy link

@advait87 advait87 commented Mar 5, 2026

Before:

Screen.Recording.2026-03-06.at.00.17.51.mov

After:

Screen.Recording.2026-03-06.at.00.18.06.mov

Tested with normal images as well as svgs.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience by ensuring that pasted images are no longer placed at a default or arbitrary location, but instead appear precisely where the user's mouse cursor is positioned. This change provides a more natural and efficient workflow for content placement within the editor.

Highlights

  • Image Pasting Location: Images pasted into the editor will now appear directly under the user's mouse cursor, improving the intuitive placement of content.
  • Mouse Position Tracking: A new state variable, lastMousePosition, was introduced to continuously track and store the most recent mouse coordinates.
  • Paste Functionality Update: The pasteFile function was updated to accept the lastMousePosition as an argument, ensuring images are placed at the tracked cursor location.
Changelog
  • frontend/src/io-managers/input.ts
    • Added lastMousePosition state variable to store the current mouse coordinates.
    • Updated onPointerMove event handler to continuously record the clientX and clientY of the pointer.
    • Modified the onPaste function to pass the lastMousePosition to the pasteFile utility when handling file pastes.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request updates the paste functionality to place images under the cursor. The implementation correctly tracks the mouse position and passes it to the paste handler. However, I've identified a potential race condition in the onPaste event handler due to the use of forEach with an async callback. I've suggested a refactoring to use a for...of loop for sequential processing, which also improves the logic for handling different data transfer item types.

Comment on lines 324 to 327
Array.from(dataTransfer.items).forEach(async (item) => {
if (item.type === "text/plain") item.getAsString((text) => editor.handle.pasteText(text));
await pasteFile(item, editor);
await pasteFile(item, editor, lastMousePosition);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Using forEach with an async callback is an anti-pattern because forEach does not wait for the promises to resolve. This can lead to race conditions if multiple files are pasted, as they will be processed in parallel. It's safer to process them sequentially using a for...of loop.

Additionally, the logic can be made more robust by checking item.kind to distinguish between file and string items, and by awaiting the result of getAsString to ensure sequential processing of all pasted items. This avoids race conditions between pasting text and files.

Note that the onPaste function will also need to be marked as async for await to work.

for (const item of dataTransfer.items) {
	if (item.kind === "file") {
		await pasteFile(item, editor, lastMousePosition);
	} else if (item.kind === "string" && item.type === "text/plain") {
		const text = await new Promise<string>((resolve) => item.getAsString(resolve));
		editor.handle.pasteText(text);
	}
}

Copy link

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 1 file

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/io-managers/input.ts">

<violation number="1" location="frontend/src/io-managers/input.ts:39">
P2: Initializing `lastMousePosition` to `[0, 0]` means pasting before the mouse has moved will place the image at the top-left corner (0, 0) instead of letting the backend use its default placement. Consider using `undefined` as the initial value so the backend's fallback positioning is used when no mouse movement has occurred.</violation>
</file>

Since this is your first cubic review, here's how it works:

  • cubic automatically reviews your code and comments on bugs and improvements
  • Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
  • Add one-off context when rerunning by tagging @cubic-dev-ai with guidance or docs links (including llms.txt)
  • Ask questions if you need clarification on any suggestion

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

@advait87
Copy link
Author

advait87 commented Mar 5, 2026

btw this is just for web

@timon-schelling
Copy link
Member

Implementation in editor code would be better and would also work for desktop.

@Keavon Keavon marked this pull request as draft March 5, 2026 20:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants