Skip to content

fix(codemirror): keep block controls above the first code line - #988

Open
huyanxius wants to merge 1 commit into
mdx-editor:mainfrom
huyanxius:fix/748-codeblock-toolbar-flow
Open

huyanxius wants to merge 1 commit into
mdx-editor:mainfrom
huyanxius:fix/748-codeblock-toolbar-flow

Conversation

@huyanxius

Copy link
Copy Markdown

Problem

The code-block language selector and delete button sit over the first code line. Long lines can therefore be hidden even while editing or in read-only mode, as reported in #748.

The toolbar uses the shared absolutely positioned nested-editor toolbar mixin, while the CodeMirror content reserves no space for it.

Changes

  • Put only the CodeMirror toolbar in normal document flow and keep its controls right-aligned at the existing top/right edges.
  • Let the controls' intrinsic height reserve their own row, avoiding fixed-height assumptions and keeping them available to keyboard and touch users.
  • Add a small long-line example with a read-only toggle and browser coverage for desktop/narrow layouts, focus/hover, read-only controls, keyboard language selection/deletion, and touch language selection.

The shared mixin and other nested editors are unchanged. No public API or focus/event-handler changes are involved.

Layout trade-off

Code blocks become taller by one toolbar row. This deliberately keeps both the first line and the controls visible while editing. The earlier issue discussion suggested a hover option; this proposes a CSS-only default layout fix instead, since showing an overlay on hover/focus would still obscure the code during use.

Verification

  • Real three-browser red/green run on a standard GitHub-hosted Ubuntu runner: validation run.
    • With the original stylesheet from 122347cff8af5e9e1291b52789d22ed3ba0dc2ba, Chromium, Firefox, and WebKit each failed specifically at the first-line/toolbar geometry assertion. The validation also rejects setup errors or other failure causes.
    • Restoring the candidate stylesheet passed 12/12 layout and interaction cases across the three engines, with no skipped or flaky cases.
    • Keyboard coverage waits for the selected option to receive focus before pressing Enter: Radix defers focus movement after navigation keys with setTimeout.
  • npm run lint, npm run typecheck, and npm run build: passed.
  • Full unit suite: 122 passed, 1 skipped, 1 todo.
  • Browser spec TypeScript check, Prettier, and git diff --check: passed.

The three files here are byte-for-byte identical to those validated on the fork. The fork-only CI harness is excluded from this PR.

Fixes #748

@huyanxius
huyanxius marked this pull request as ready for review October 3, 2026 07:14

This branch has not been deployed

No deployments
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.

[BUG] CodeBlock Language Selector overlaps long first line

1 participant