mdx-editor / mdx-editor/editor
[BUG] CodeBlock Language Selector overlaps long first line
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 307
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 5
Description
- 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
I don't know if I am missing something obvious, as I think other would have this problem too, but I didn't find any issues related to it.
When using the CodeBlock plugin, on long code pieces in the first line, the language selector & delete icon overlap the code, and there is not really a possibility to scroll etc to see the hidden code.
Reproduction
Start from https://codesandbox.io/p/sandbox/mdx-editor-base-q8s7zr?file=/src/App.tsx to reproduce the problem so that I can observe the issue on my side and make sure that the fix reliably addresses it.
Reproduction: https://codesandbox.io/p/sandbox/mdx-editor-base-forked-w2ch2d
To Reproduce
Steps to reproduce the behavior:
- Go to basic mdx editor example (or my reproduction and just type in a long line of code)
- Add code blocks to plugins
- write some long code in the first line
- Language select & delete icon are overlapping code, no way to see it
Expected behavior
Maybe some option to hide/style the language selector box, or hide it per default in read only mode / only show on hover etc.
Screenshots
Desktop (please complete the following information):
- OS: Linux (Ubuntu)
- Browser: Firefox
Contributor guide
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 with the CodeBlock plugin and the basic MDX editor example, then reproduce the issue using the linked CodeSandbox with a long first line. Inspect how the language selector and delete icon are positioned over the code, and consider the issue done when long first lines remain visible or accessible without the controls obscuring them.
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
- 42/100