uiwjs / uiwjs/react-md-editor

Cursor changes from text to default in lower part of editor input area

Open
#700 0 comments 0 reactions 0 assignees View on GitHub

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-text does 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 textarea but over
    a normal div, 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.