Skip to content

Plaintext Editor Drag and Drop upload doesn't respect cursor position #5834

@profiteroles1

Description

@profiteroles1

Describe the Bug

In the markdown editor, dragging a file into the editor window turns the mouse pointer into a cursor, and the user can drag the file where they would like the resulting tag to end up post-upload. The file is uploaded and then the tag is inserted wherever the user left the cursor. If the user drags the file quickly without repositioning the cursor, typically the file tag will end up wherever the cursor was left before the window lost focus.

In the plaintext editor, the drag and drop file tag insertion becomes unreliable. The "live cursor" showing where the file will be input never appears. Our use case is to open a tag, such as <div class='images'> then close the tag </div> and drag files into the space in-between the tags, so the file tags end up inside the div. With the plaintext editor, the files now end up in completely random spots, including in-between things like <di and v>, breaking tags, and necessitating extra editing. The only reliable approach is to add something like twenty lines of empty space in-between the tags, and drag the file roughly there, so that it ends up on one of those twenty lines.

I can't provide a video because I would need to spin up a new instance to obscure URLs, but I've been able to reproduce this easily lots of times.

Any help GREATLY appreciated!

Originally posted by @ssddanbrown in #5705

Steps to Reproduce

  1. Create a page with a lot of content
  2. Leave the cursor in a position where you would like an image to be inserted
  3. Drag the file to the editor window

Expected Behaviour

File is inserted at extant cursor position

Screenshots or Additional Context

No response

Browser Details

Safari 26.0.1

Exact BookStack Version

25.07.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions