basecamp / basecamp/trix

Unable to drag image below code block when code block is the last text in the editor and suggestion to use mouse position instead of text cursor position for image drop location

Open
#869 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
20k
Forks
1.1k
Avg merge
3d 12h
Merged PRs (30d)
13

Description

I've recorded a video to demonstrate the issue:

https://user-images.githubusercontent.com/813219/102691989-710aa400-41de-11eb-9958-3455fa2a9265.mp4

**First up, there's the potential bug** which involves not being able to drag an image below a code block when the code block is the last text in the editor. I believe this might be the case because the image seems to be inserted at the text cursor position and when a code block is present, the text cursor is inside of the code block.

**Secondly, I wonder if this bug could be fixed if** there were changes on handling image positioning in general.

I'm not sure if this was done on purpose but right now it's very easy to insert an image in the middle of a sentence but in practice I find that 99.99% of the time I want to insert an image above or below a line, not in between characters of a word or where my text cursor is exactly.

In the video I demonstrated dragging the image in the middle of the sentence first. I did that on purpose but it was only on purpose after discovering that the text cursor is what's used to position the image.

I wonder if an option could be added to keep things how they are by default but this new option would change the behavior so that the mouse position is used instead of the text cursor position for where the image gets positioned to.

This would allow you to drag an image above a line of text to have it inserted above that line and below a line of text to have it inserted below the line. It also gives you the option to position an image in the middle of the word if you want that behavior. This would fix the bug and IMO make things a bit more intuitive on positioning images in general.

##### Details

* Trix version: 1.3.1 or whatever version is running on the official demo site at the time of making this issue
* Browser name and version: Chrome 87
* Operating system: Windows 10 Pro

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the image drag-and-drop behavior described in the video, particularly when a code block is the editor's last text. Investigate how the editor chooses the insertion location from the text cursor, then determine whether the intended fix is limited to this edge case or requires a user-facing positioning option. Done means an image can be placed below the final code block without breaking existing positioning behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.