|
6 | 6 | import { theme } from '$lib/stores/themeStore'; |
7 | 7 | import { processCrossRefs, lookupRef } from '$lib/utils/crossref'; |
8 | 8 | import { searchTarget } from '$lib/stores/searchNavigation'; |
9 | | - import { COPY_FEEDBACK_DURATION } from '$lib/config/timing'; |
| 9 | + import { createCopyButton } from '$lib/utils/copyButton'; |
10 | 10 |
|
11 | 11 | interface Props { |
12 | 12 | html: string; |
|
212 | 212 | return 'python'; |
213 | 213 | } |
214 | 214 |
|
215 | | - // Create copy button with icon |
216 | | - function createCopyButton(code: string): HTMLButtonElement { |
217 | | - const button = document.createElement('button'); |
218 | | - button.className = 'code-copy-btn'; |
219 | | - button.title = 'Copy to clipboard'; |
220 | | - button.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`; |
221 | | -
|
222 | | - button.addEventListener('click', async () => { |
223 | | - try { |
224 | | - await navigator.clipboard.writeText(code); |
225 | | - button.classList.add('copied'); |
226 | | - button.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`; |
227 | | - setTimeout(() => { |
228 | | - button.classList.remove('copied'); |
229 | | - button.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`; |
230 | | - }, COPY_FEEDBACK_DURATION); |
231 | | - } catch (e) { |
232 | | - console.warn('Failed to copy:', e); |
233 | | - } |
234 | | - }); |
235 | | -
|
236 | | - return button; |
237 | | - } |
238 | | -
|
239 | 215 | // Render code blocks with CodeMirror |
240 | 216 | async function renderCodeBlocks() { |
241 | 217 | if (!container) return; |
|
434 | 410 | margin-bottom: 0; |
435 | 411 | } |
436 | 412 |
|
437 | | - /* Code block wrapper */ |
438 | | - .docstring-content :global(.code-block-wrapper) { |
439 | | - margin: var(--space-md) 0; |
440 | | - border: 1px solid var(--border); |
441 | | - border-radius: var(--radius-lg); |
442 | | - overflow: hidden; |
443 | | - } |
444 | | -
|
445 | | - /* Code block header - styled like panel-header */ |
446 | | - .docstring-content :global(.code-block-header) { |
447 | | - display: flex; |
448 | | - align-items: center; |
449 | | - justify-content: space-between; |
450 | | - padding: var(--space-xs) var(--space-md); |
451 | | - background: var(--surface-raised); |
452 | | - border-bottom: 1px solid var(--border); |
453 | | - } |
454 | | -
|
455 | | - |
456 | | - .docstring-content :global(.code-copy-btn) { |
457 | | - display: flex; |
458 | | - align-items: center; |
459 | | - justify-content: center; |
460 | | - padding: var(--space-xs); |
461 | | - background: transparent; |
462 | | - border: none; |
463 | | - border-radius: var(--radius-sm); |
464 | | - color: var(--text-muted); |
465 | | - cursor: pointer; |
466 | | - transition: color var(--transition-fast), background var(--transition-fast); |
467 | | - } |
468 | | -
|
469 | | - .docstring-content :global(.code-copy-btn:hover) { |
470 | | - color: var(--text); |
471 | | - background: var(--surface-hover); |
472 | | - } |
473 | | -
|
474 | | - .docstring-content :global(.code-copy-btn.copied) { |
475 | | - color: var(--success, #22c55e); |
476 | | - } |
477 | | -
|
478 | | - .docstring-content :global(.cm-container) { |
479 | | - background: var(--surface); |
480 | | - } |
481 | | -
|
482 | | - .docstring-content :global(.cm-editor) { |
483 | | - font-size: var(--font-base); |
484 | | - max-height: 300px; |
485 | | - } |
| 413 | + /* Code block styles are in app.css */ |
486 | 414 |
|
487 | 415 | /* Parameter/Attribute tables - panel style */ |
488 | 416 | .docstring-content :global(.param-table-wrapper) { |
|
0 commit comments