vvzvlad/gitmost
1
0
Fork 0
Code Issues 11 Pull Requests 6 Packages Projects Releases Activity

feat(editor): overlay code-block controls, hide language selector until hover (closes #275)

Browse Source 
The code-block control panel (language selector + copy) took a full row above
the code. Move both to an absolute overlay in the top-right corner and hide the
language selector until the block is hovered/focused; the copy button stays
always visible. In read-only the language selector isn't rendered at all. The
<pre> (editable contentDOM) stays FIRST in the DOM so click hit-testing (#146)
is not regressed; the panel leaves the flow via position:absolute.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
agent_coder
2026-07-02 01:20:43 +03:00
parent 2524f39a36
commit 5280392fc4
3 changed files with 53 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/styles/code.css
+5 -2
View File
@@ -1,9 +1,12 @@
.ProseMirror {
.codeBlock {
/* #146: flex column so the menu (rendered AFTER <pre> in the DOM, so the
editable contentDOM is first) is lifted back above the code via `order`. */
/* #146: flex column keeps the editable <pre> (first in the DOM so click
hit-testing is correct) laid out above any Mermaid diagram. `position:
relative` anchors the control panel, which is floated into the top-right
corner as an absolute overlay (see `.menuGroup` in code-block.module.css). */
display: flex;
flex-direction: column;
position: relative;
padding: 4px;
border-radius: var(--mantine-radius-default);
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));