mdx-editor / mdx-editor/editor

[BUG] CodeBlock Language Selector overlaps long first line

Open
#748 2 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

  • 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:

  1. Go to basic mdx editor example (or my reproduction and just type in a long line of code)
  2. Add code blocks to plugins
  3. write some long code in the first line
  4. 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

Image

Desktop (please complete the following information):

  • OS: Linux (Ubuntu)
  • Browser: Firefox

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.