fix: prevent drag'n'drop from opening in browser when dropped in empty area of annotation guide editor

[prathamesh-patil-5090]

fix: prevent drag'n'drop files from opening in browser when dropped below editor text

Problem

In the annotation guide editor, drag-and-drop of image/file uploads only worked when the file was dropped directly onto the text content area of the <textarea>. Dropping a file in the empty space below the last line of text — which is visually part of the editing area — caused the browser to open the file in a new tab instead of inserting it into the guide. The cursor correctly showed a + icon throughout the whole editor pane, which made the broken area hard to predict.

Root Cause

The onDrop handler was placed only on the <MDEditor> component, which propagates the event to its inner <textarea>. The <textarea>'s hit area ends at the last character of text. Any drop in the empty space below lands on the wrapper <div>, which had no handler, allowing the browser to process the drag event natively (i.e. navigate to the file URL).

Solution

Added onDrop and onDragOver (with event.preventDefault()) to the cvat-guide-page-editor-wrapper div. This intercepts drop events anywhere inside the editor's visible area and routes them to the existing handleInsertFiles
logic, which appends the files at the current cursor position (or end of text).

Changes

• cvat-ui/src/components/md-guide/annotation-guide-page.tsx
  — added onDragOver and onDrop handlers on the editor wrapper <div>.

Testing steps

1. Open a task or project and navigate to its annotation guide page.
2. Make sure the editor contains only a few lines of text so there is a large
   empty area below the content.
3. Drag an image file from the desktop and drop it in the empty space below
   the text (not on the text itself).
4. The image should be inserted into the guide (placeholders shown, then resolved
   to /api/assets/<uuid> URLs) — the browser must not open the file in a
   new tab.
5. Also verify that dropping on the text area itself still works correctly.
6. Verify paste and the existing toolbar file-upload button still work normally.

Test

Screencast.from.2026-03-09.01-38-26.webm

Related issue

Closes #10305 (extracted from #6536).

[zhiltsov-max]

Hi, thank you for the PR. Please check the comments.

[zhiltsov-max]

I can see the fix allows dropping the file below the last line. But it also allows it in the preview area on the right side. I don't think drag'n'drop should work in the text preview area, only in the editor.

[prathamesh-patil-5090]

Root cause of the drag'n'drop bug : the onDrop/onDragOver handlers were attached to cvat-guide-page-editor-wrapper, which wraps the entire MDEditor component — both the left editor pane and the right preview pane. There was no check to see where the drag event originated, so drops anywhere inside the wrapper (including the preview) were accepted.

Fix: in both the outer wrapper's onDrop/onDragOver and the MDEditor's own onDrop, use (event.target as HTMLElement).closest('.w-md-editor-preview') to detect whether the event originated in the preview pane. If it did, the handler returns early (for onDrop) or skips calling preventDefault() (for onDragOver), so the browser treats it as a regular unhandled drop and the file is not inserted. The guard is applied at both levels because MDEditor's onDrop prop bubbles across both panes.

[zhiltsov-max]

While checking the fix, I also found that there is a similar issue exists with the text editing cursor placement - you can't put a cursor in the text if clicking below the last line. The issue is very similar to the former one, I think it should be fixed in the same PR as well.

annotation_guide_cursor_placement-2026-03-09_19.43.22.mp4

[prathamesh-patil-5090]

Root cause of the cursor placement below the last line: @uiw/react-md-editor auto-sizes its internal textarea to exactly fit the current content. When there are only 2 lines of text, the <textarea> element is only 2 lines tall. The surrounding .w-md-editor-text pane fills the visible editor height, but below the textarea is empty, non-interactive space — clicks there don't reach the <textarea>, so no cursor is placed.

Fix: added .w-md-editor-text { height: 100%; } inside .cvat-guide-page-editor-wrapper in styles.scss. This stretches the text pane to fill the full editor height. Because the textarea's auto-resize works relative to its container, it now expands to cover the full pane, meaning any click in the editor's left half lands on the textarea.