Skip to content

fix: fill the editor input area with the textarea - #713

Merged
jaywcjlove merged 1 commit into
uiwjs:masterfrom
snowyukitty:fix/editor-input-hit-area
Oct 20, 2026
Merged

jaywcjlove merged 1 commit into
uiwjs:masterfrom
snowyukitty:fix/editor-input-hit-area

Conversation

@snowyukitty

Copy link
Copy Markdown
Contributor

Fixes #700.

With short content and a fixed editor height, the inline minHeight leaves the text layer shorter than the input pane. For example, height={408} gives a 379px input pane but only a 100px textarea. Clicking the blank lower area does not focus the editor, and the cursor changes to an arrow.

Make the input pane a column flex container and let the text layer grow without shrinking. This fills the editable area while preserving natural content height, scrolling, and the minimum height used by auto-height editors (#589).

The existing LESS variable declaration is also formatted to satisfy Prettier; its compiled CSS is unchanged.

Validation:

  • CI=true npm test -- --runInBand - 56 tests passed.
  • npm run build --workspace @uiw/react-md-editor - passed.
  • npx --no-install prettier --check core/src/components/TextArea/index.less - passed.
  • Playwright: 144 cases passed across Chromium, Firefox, and WebKit, comparing the same source with the original and patched stylesheet. Covers all three entrypoints, edit/live mode, auto height, long-content scrolling and typing, toolbar variants, fullscreen, custom textareas, and read-only/disabled inputs.

To reproduce, render <MDEditor height={408} preview="edit" value="Hello" />, then click near the bottom of the input pane and type. The patched version focuses the textarea and inserts the character; the original hits the surrounding div.

@vercel

vercel Bot commented Oct 20, 2026

Copy link
Copy Markdown

@snowyukitty is attempting to deploy a commit to the kenny wong's projects Team on Vercel.

A member of the Team first needs to authorize it.

@jaywcjlove
jaywcjlove merged commit 6c22730 into uiwjs:master Oct 20, 2026
1 check failed
github-actions Bot added a commit that referenced this pull request Oct 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants