Skip to content

Commit 482ad82

Browse files
committed
feat: enhance InteractiveCodeElement with copy functionality and improved event handling
- Added a copy button to the code block, allowing users to copy code to the clipboard with visual feedback. - Introduced new methods for handling input changes, including consolidated handlers for number, string, and color inputs. - Implemented mutation observer cleanup and improved attribute change handling. - Enhanced rendering logic to support line numbers and conditional content display. - Updated styles for the copy button and line numbers for better visibility and accessibility.
1 parent 5f2c4e7 commit 482ad82

5 files changed

Lines changed: 1019 additions & 269 deletions

File tree

RELEASE_NOTES.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,31 @@
22

33
## 1.0.7
44

5+
### Bug Fixes
6+
7+
- **Conditional content not updated for inline controls**: When a select (3+ options), number, string, or color binding was modified via inline controls, the `_internalChange` flag prevented `updateCode()` from being called, so conditional textareas were not re-evaluated. Now checks for condition dependencies after inline changes.
8+
- **Memory leak - empty `disconnectedCallback()`**: MutationObserver, setTimeout, and event listeners were never cleaned up when the element was removed from the DOM. All resources are now properly disposed in `disconnectedCallback()`.
9+
- **XSS risk in binding rendering**: String, number, color, and select values were inserted into HTML attributes without escaping. All dynamic values are now escaped with `escapeHtml()`.
10+
- **Fragile `_internalChange` flag**: If `binding.value = newValue` threw an error, the flag remained stuck at `true`. Now wrapped in `try/finally` blocks.
11+
12+
### Features
13+
14+
- **Copy to clipboard button**: New `show-copy` attribute displays a copy button (top-right corner) with SVG clipboard/check icons and visual feedback (green check for 2 seconds after copy). Hidden by default.
15+
- **Line numbers**: New `show-line-numbers` attribute displays line numbers in the gutter. Numbers are excluded from copy/paste via `user-select: none`. Section separators have no line number.
16+
- **Hyphenated binding keys**: Binding keys now support hyphens (e.g., `${show-line-numbers}`) for use with the `attribute` binding type on HTML attributes.
17+
- **Accessibility**: Interactive controls now have `role`, `aria-label`, and `tabindex` attributes. Keyboard navigation supports Enter/Space for toggle actions, ArrowUp/Down for number increment/decrement. Focus-visible outline on all interactive elements.
18+
19+
### Improvements
20+
21+
- **Consolidated input listeners**: Three separate `input` event listeners merged into a single `_handleShadowInput()` with extracted helper methods (`_handleInlineNumberInput`, `_handleInlineStringInput`, `_handleInlineColorInput`)
22+
- **Refactored `renderTemplate()`**: Decomposed into smaller methods: `findBlockCommentKeys()`, `renderLine()`, `processMarkers()`, `buildLineHtml()`
23+
- **Named event handlers**: All anonymous event handlers converted to bound named methods for proper cleanup in `disconnectedCallback()`
24+
- **`CommentStyle` interface**: Extracted return type of `getCommentStyle()` into a named interface
25+
26+
### Tests
27+
28+
- Added 26 new tests: cleanup (3), XSS (3), conditional inline (1), copy button (8), line numbers (5), accessibility (6) — 136 tests total
29+
530
---
631

732
## 1.0.6

0 commit comments

Comments
 (0)