mdx-editor / mdx-editor/editor

[BUG] Admonition editor autofocuses

Open
#314 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
3.7k
Forks
307
Avg merge
14h 22m
Merged PRs (30d)
5

Description

If you have any admonitions/directives on the page (like tip, info, note etc), the admonition editor autofocuses on load of the editor (and will scroll the page if necessary). This is irrespective of the editor's autofocus prop setting.

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • I have read the documentation and cannot find an answer.

Describe the bug
Loading a markdown document with an admonition will jump the browser's focus to the admonition's text area on page load.

Reproduction

## Heading

- We just
- need
- enough
- text 
- to
- scroll 
- off 
- the bottom
- of 
- the page
- when the 
- editor loads

## And another thing

A couple of big images would probably help here

> But it depends on how tall the editor component is really

:::note
This is the text inside the admonition, and when the editor loads it will be autofocused and will scroll the editor down if it was out of the viewport
:::



To Reproduce
Steps to reproduce the behavior:
Try the markdown above

Expected behavior
No focus inside the editor, even if autofocus is set on the parent Editor component

Screenshots

Desktop (please complete the following information):
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:39:52 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_X86_64
Binaries:
Node: 20.10.0
npm: 10.2.3
Relevant Packages:
next: 14.0.4
eslint-config-next: 14.0.4
react: 18.2.0
react-dom: 18.2.0
typescript: 5.3.3

Chrome 119
mdx-editor @ 2.3.4

Contributor guide

Open the contributing guide

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 loading the markdown reproduction in the editor and trace the admonition editor's focus behavior during load. Done means a document containing an admonition does not focus its text area or scroll the page, regardless of the parent Editor component's autofocus setting.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.