Highlight non-breaking spaces in curly-emdash.html

[simonw]

I want curly-emdash.html to also highlight uses of non breaking space U+00A0 characters

https://claude.ai/code/session_01JPpSovSHcve7n8NqJ6HuNW

[claude]

Claude finished @simonw's task —— View job

---

Code Review for PR #287

Todo List:

• Read repository setup instructions (CLAUDE.md) - No CLAUDE.md found
• Read and analyze the modified curly-emdash.html file
• Review code quality and best practices
• Check for potential bugs or issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage implications
• Provide comprehensive feedback

Review Summary

This PR successfully adds non-breaking space detection to an existing text highlighting tool. The implementation is clean and follows the established patterns in the codebase.

✅ Positive Aspects

Code Quality & Best Practices:

• Consistent styling: The new .mark.nbsp and .swatch.nbsp CSS classes follow the existing color scheme and naming conventions
• Accessible design: Uses appropriate color contrast (blue background #d8e4ff with dark text #1c3d7a)
• Clean JavaScript integration: Non-breaking space detection seamlessly integrates into the existing characterTypes Map and processing logic

User Experience:

• Smart visualization: Non-breaking spaces are displayed as a visible middle dot (·) since they're inherently invisible - excellent UX decision
• Helpful tooltip: The title attribute provides Unicode information (U+00A0) for educational purposes
• Consistent UI: New summary badge follows the existing design pattern

🔍 Technical Implementation

Lines 113-116, 155-157: CSS styling is well-structured and consistent
Line 263: Unicode mapping ['\u00a0', 'nbsp'] correctly identifies non-breaking spaces
Lines 309-315: Smart handling of invisible characters with visual feedback and tooltip

🛡️ Security Assessment

No security concerns identified:

• No external dependencies added
• No user input validation changes
• Pure client-side text processing
• No XSS vectors introduced

⚡ Performance Considerations

Efficient implementation:

• Reuses existing character iteration loop
• No additional DOM queries
• Minimal performance impact from one additional Map lookup per character

🧪 Test Coverage

Current state: This appears to be a simple HTML tool without a formal test suite. For a tool of this scope, manual testing is likely sufficient.

Recommendation: Consider adding basic test cases if this tool becomes more complex, particularly:

• Verification that non-breaking spaces are correctly identified and counted
• Proper rendering of the middle dot character

📝 Minor Suggestions

1. curly-emdash.html:312 - Consider making the tooltip more user-friendly:

   mark.title = 'Non-breaking space (invisible character)';

2. Future enhancement: The middle dot character could potentially be configurable, though the current choice is sensible.

Final Assessment

This is a well-implemented feature addition that:

• ✅ Follows existing code patterns and conventions
• ✅ Provides clear user value
• ✅ Has no security or performance concerns
• ✅ Maintains code quality standards

Recommendation: Approve - This PR is ready to merge.

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	1ef5038
Status:	✅  Deploy successful!
Preview URL:	https://31fb60af.tools-b1q.pages.dev
Branch Preview URL:	https://claude-curly-emdash-nbsp-hig.tools-b1q.pages.dev

View logs

[simonw]

It's a plague! From https://github.com/simonw/datasette/releases/edit/1.0a33