Cursor changes from text to default in lower part of editor input area
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.9k
- Forks
- 201
- Avg merge
- 12m
- Merged PRs (30d)
- 1
Description
https://github.com/user-attachments/assets/ed2793f9-2d29-4e2b-ab0b-55312fad44f3
Description
I’m experiencing an inconsistent cursor behavior inside the editor input area.
In the upper part of the editor, the cursor is a text cursor (I-beam),
but in the lower part it switches to the default arrow cursor,
even though both areas appear to be part of the same editable region.
I don’t have any cursor-related styles or logic applied on my side.
Analysis
After inspecting the DOM and CSS, this seems to be related to how the editor
input is structured with multiple layers.
- The actual input
textarea(.w-md-editor-text-input) is positioned
absolutely inside.w-md-editor-text. - The scroll/layout container (
.w-md-editor-area.w-md-editor-input)
can be taller than.w-md-editor-text. - When
.w-md-editor-textdoes not fill the full height of the input area,
a blank area remains at the bottom. - In that bottom area, the mouse is no longer over the
textareabut over
a normaldiv, so the browser shows the default cursor instead of the
text cursor.
So the cursor changes depending on which DOM element is under the mouse:
- Upper area: textarea → text cursor
- Lower area: div → default cursor
Temporary workaround (what I did)
Wrapping the editor with a parent element that sets cursor: text fixes the issue:
<div style={{ cursor: "text" }}>
<MDEditor
data-color-mode="light"
height={408}
value={commentValue}
onChange={(v) => setCommentValue(v)}
preview="edit"
/>
</div>
Request
Could this be fixed on the library side?
The textarea (or .w-md-editor-text) covering the full input area
would likely prevent this issue.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the .w-md-editor-area.w-md-editor-input, .w-md-editor-text, and .w-md-editor-text-input styles and how their heights and positioning interact. Reproduce the editor with a shorter content area and confirm that the lower part of the input region keeps the text cursor without requiring a wrapper workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100