- Add console.log output to dump parsed emoji array when LOGGING_ENABLED
- No changes to functionality or output, just debug visibility
- Shows exactly how ZWJ sequences and other emojis are being parsed
Replaced [...pattern] iteration with Intl.Segmenter to properly handle ZWJ sequences like the pirate flag emoji 🏴☠️. This ensures that complex emojis are treated as single grapheme clusters rather than being split into component Unicode code points, fixing the issue where pirate flag emojis were getting a rating of 0 instead of the correct value.
This brings the calculateRating function in line with the rest of the codebase which already uses Intl.Segmenter for proper Unicode handling.
- Add getGraphemeClusters.ts utility for proper emoji segmentation
- Update updateSymbolPatternsFromSettings.ts to handle ZWJ sequences correctly
- Enhance Unicode utilities to use grapheme clusters instead of UTF-16 code units
- Support complex emojis like 🏴☠️ (Pirate Flag), 👨🚒 (Man Firefighter), etc.
- Uses Intl.Segmenter when available, with regex fallback for older environments
- Fully backward compatible with existing emoji configurations
- Update documentation and add changelog entry
Fixes bug where ZWJ sequence emojis were split into component parts instead of being treated as single emojis.
Simplify ZWJ sequence fix by inlining Intl.Segmenter
- Remove overengineered getGraphemeClusters.ts utility
- Inline simple Intl.Segmenter usage directly where needed
- Assume Intl.Segmenter is available in all target environments
- Reduced bundle size and simplified codebase
- Update documentation to reflect simplified approach
- Replaced all default visual styling (opacity, filters) with comprehensive theming hook comments
- Updated main symbol state classes with detailed documentation for their purpose and usage
- Updated full-only symbol system styling with sophisticated placeholder comments
- Preserved accessibility styling for high contrast mode only
- Updated CSS-CUSTOMIZATION.md to reflect no default styling approach
- Added prominent warning about no default styling and provided quick start example
- Updated example numbering and added basic visual distinction example
- Enhanced accessibility section to clarify it's the only built-in styling
The plugin now provides pure theming hooks without imposing any visual choices, while maintaining comprehensive accessibility support and detailed documentation for users and developers.
- Updated applySymbolState.ts to support 'half' state for half-filled symbols
- Modified renderRating.ts to apply 'half' state to half symbols (instead of 'rated')
- Updated previewRating.ts to use distinct states during hover preview for consistency
- Added CSS styling for .interactive-rating-symbol--half class with 80% opacity
- Added high contrast accessibility support for half symbols (60% opacity with enhanced contrast)
- Enhanced CSS-CUSTOMIZATION.md with comprehensive examples for half symbols including:
* Basic color styling for filled/half/empty symbols
* Gradient effects for half symbols
* Enhanced hover effects for all three states
* Different styling examples for various symbol types
* Updated default styling documentation
* Enhanced accessibility considerations
* Updated migration guide
This completes the full CSS customization system with distinct classes for:
- .interactive-rating-symbol--rated (filled symbols)
- .interactive-rating-symbol--half (half symbols)
- .interactive-rating-symbol--empty (empty symbols)
- .interactive-rating-symbol--unrated (full-only grayed symbols)
- Updated applySymbolState.ts to support 'empty' state for unselected symbols
- Modified renderRating.ts to apply 'rated' state to filled symbols and 'empty' state to empty symbols
- Added CSS styling for .interactive-rating-symbol--empty class with 50% opacity
- Added high contrast accessibility support for empty symbols
- Created comprehensive CSS-CUSTOMIZATION.md guide with examples
This enables users to customize the appearance of filled vs empty symbols using CSS snippets, addressing the original request for better visual distinction between selected and non-selected symbols.
- Replace hardcoded LOGGING_ENABLED=false with process.env.LOGGING_ENABLED
- Add extensive guarding comments to prevent manual changes
- Ensure runtime logging is controlled via npm scripts (build vs build-debug)
- Maintain zero runtime overhead for production builds via esbuild's define feature
- Removed all inline style assignments from RatingWidget.ts
- Added semantic CSS classes for symbol states (rated, unrated, normal)
- Implemented clean CSS class management with applySymbolState() method
- Updated styles.css with proper semantic class definitions
Fixed formatRatingText to use actual pattern length instead of parsed denominator for percentage calculations. This fixes ◼◼◼▭ showing 3% instead of 75%. The issue was that percentage parsing sets denominator=100, but calculations need actual symbol count (4), so (3/4)*100=75%.
Fixed import issue in editor-extension/index.ts - added missing import for ratingViewPlugin before using it in the export array. All type checks and builds now pass successfully.
Added InteractiveRatingsSettings interface, settings tab, and dynamic symbol pattern updates. Users can now customize supported emojis through plugin settings.
Default: 🎥🏆⭐💎🔥⚡🎯🚀💰🎖️
Fix regex detection bug for low ratings (1-2 stars)
Modified regex to detect 1+ symbols instead of 3+, and updated editor logic to intelligently handle short patterns with rating text or full-only symbols. Fixes issue where reducing ratings to 1-2 stars made them uneditable.
Simplify pattern detection logic - remove complex special cases
Replaced complex logic with simple rule: if no rating text, require 3+ symbols to avoid false positives. If rating text exists, any symbol count is valid. This generic approach handles all cases without special full-only symbol logic.
Remove hardcoded configurable emojis from constants.ts since they're now managed through settings
- Parse HTML comment patterns: <!-- 3/5 -->
- New comment formats: comment-fraction, comment-percent, etc.
- Hide comment text in visual display while preserving functionality
- Full-only symbols work with comments for clean reading experience
- Auto-add HTML comments when clicking full-only symbols without rating text
- Auto-remove HTML comments when numerator equals denominator (perfect ratings)
- Simplified to basic <!-- 3/5 --> format only (no parentheses/percentages)
- HTML comments restricted to full-only symbols only
- Visible rating text takes precedence over HTML comments
Remove HTML comment when both visible and comment rating text present
- Enhanced parseRatingText to detect both visible and HTML comment formats
- Visible rating text takes precedence for calculation
- Mixed format like "💎💎💎 (3/5)<!-- 4/5 -->" becomes "💎💎💎💎 (4/5)" on change
- Clean, predictable precedence behavior with automatic cleanup
- Add red hearts (❤️/🤍)
- Add orange, yellow, green, blue, purple, black, and brown hearts
- All heart patterns use white heart (🤍) as empty symbol
- No half-heart support (half: null) for all heart patterns
Add heart rating examples to README
Fix multibyte emoji handling: replace pattern.length with Unicode-aware length calculation and fix regex generation for emojis
Fix emoji rating text parsing by converting UTF-16 positions to Unicode positions
- Modified previewRating() to show updated denominator during hover
- Modified updateRating() to save the symbol count as the new denominator
- When clicking on ●●●●●●●◐ (7.5/23), it now updates to (7.5/8) instead of keeping 23
- Enhanced logging to track old vs new denominators
