tao.chen/notebook-ai-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: move Copy/Insert/Replace toolbar INSIDE each code block

Browse Source 
The previous commit put the toolbar at the top of every assistant
message. The intent was actually to put the buttons inside the
fenced code blocks (the parts wrapped in ```python etc.), not above
the whole result section.

Changes:
  - opencode_inline_prompt.ts: removed the message-level toolbar on
    .opencode-msg-assistant. Instead, after marked.parse the assistant
    markdown, for every rendered <pre> we wrap it in
    .opencode-code-block and prepend a small toolbar with the same
    three buttons. Each button acts on the code text of THAT specific
    block (snapshot of <code>.textContent taken before DOM mutation,
    so the toolbar label text never leaks into the copied/inserted/
    replaced value). Messages with no code fences get no toolbar.
  - style/base.css: replaced .opencode-msg-toolbar / .opencode-msg-btn
    with .opencode-code-block / .opencode-code-toolbar /
    .opencode-code-btn. The wrapped <pre> connects visually to the
    toolbar (no top border/radius, no top margin) so each fenced
    block reads as one unit (GitHub-style).
  - Tests: updated the marked mock to produce real <pre><code> for
    fenced code (so the per-block post-processing can find them)
    and <h1>/<p> for headings. The 4 button tests now look for the
    toolbar inside .opencode-code-block and assert the button acts
    on the code block text ('print(1)'), not the whole markdown.
    Added a test that an assistant message with no code fences has
    no toolbar.

Verification: pytest 37/37, jest 34/34, build OK.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
tao.chen
2026-07-23 19:19:29 +08:00
co-authored by Claude Fable 5
parent cb3576c83a
commit b5642ec5cd
3 changed files with 178 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/base.css
+29 -7
View File
@@ -111,16 +111,30 @@
color: var(--jp-ui-font-color0, #000);
}
.opencode-inline-prompt .opencode-msg-toolbar {
display: flex;
gap: 4px;
margin-bottom: 4px;
/* Per-code-block toolbar: wraps every rendered <pre> so the Copy /
Insert / Replace buttons live INSIDE the fenced section (not as a
message-level header). */
.opencode-inline-prompt .opencode-code-block {
margin: 6px 0;
}
.opencode-inline-prompt .opencode-msg-btn {
.opencode-inline-prompt .opencode-code-toolbar {
display: flex;
gap: 4px;
padding: 2px 6px;
background: var(--jp-layout-color2, #f0f0f0);
border: 1px solid var(--jp-border-color2, #ccc);
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-size: var(--jp-ui-font-size0, 11px);
align-items: center;
}
.opencode-inline-prompt .opencode-code-btn {
border: 1px solid var(--jp-border-color2, #ccc);
background: var(--jp-layout-color1, #fff);
padding: 1px 6px;
padding: 0 6px;
border-radius: 3px;
cursor: pointer;
font-size: var(--jp-ui-font-size0, 11px);
@@ -128,11 +142,19 @@
color: var(--jp-ui-font-color1, #333);
}
.opencode-inline-prompt .opencode-msg-btn:hover {
.opencode-inline-prompt .opencode-code-btn:hover {
background: var(--jp-layout-color2, #f7f7f7);
border-color: var(--jp-border-color1, #999);
}
/* The wrapped <pre> connects visually to the toolbar above (no top
border/radius, no top margin) so the block reads as one unit. */
.opencode-inline-prompt .opencode-code-block > pre {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.opencode-inline-prompt .opencode-inline-history pre {
background: var(--jp-layout-color1, #fff);
padding: 6px 8px;