Skip to content

fix(desktop): code block lang detection + overlay header + icon-only copy button#1661

Merged
esengine merged 1 commit into
esengine:mainfrom
CVEngineer66:feat/desktop-code-block-visual
May 24, 2026
Merged

fix(desktop): code block lang detection + overlay header + icon-only copy button#1661
esengine merged 1 commit into
esengine:mainfrom
CVEngineer66:feat/desktop-code-block-visual

Conversation

@CVEngineer66

Copy link
Copy Markdown
Contributor

Summary

Three code block visual fixes: lang detection, header overlay, and icon-only copy button.

Changes

  • Markdown.tsx — Fix lang detection: react-markdown v9 wraps the code element in nested children; switch from looking for a <code> element by type to reading className directly from child element props. This fixes code blocks with language tags showing "text" instead of the actual language. Also removes the "Copy"/"Copied" text label from the copy button (icon only).

  • styles.css — Make the code block header (codeblock-head) an absolute-positioned overlay floating at the top of the code block (transparent background, no border), so lang label and copy button feel like part of the code content. Button becomes a 22px icon-only square with hover opacity.

Verification

  • npm run verify passes
  • Code blocks with language tags now show the correct lang label
  • Copy button shows only the icon

@esengine esengine merged commit 7219a20 into esengine:main May 24, 2026
4 checks passed
@CVEngineer66 CVEngineer66 deleted the feat/desktop-code-block-visual branch May 24, 2026 10:35
esengine added a commit that referenced this pull request May 24, 2026
#1661 fixed the lang-detection bug for desktop only. Dashboard's pre
handler has the same `c.type === "code"` check that fails when
react-markdown's component override replaces `code` — the element's
type is the override function, not the string "code". For dashboard
this didn't just mislabel the language; the fallback returned a vanilla
`<pre>` and skipped CodeBlock entirely, so syntax highlighting and the
copy button were missing for every fenced code block.

Extracted the lang lookup into `extractFencedLang` in both files so it
can be unit-tested without rendering CodeView (prism-react-renderer
pulls in each package's own React copy under vitest, which breaks
full-render tests across desktop/dashboard).

Co-authored-by: reasonix <reasonix@deepseek.com>
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.

2 participants