feat: Implement dynamic style preview buttons

- Add JavaScript-based style copying from original elements to toolbar buttons
- Use getComputedStyle() to dynamically apply color, font-weight, text-decoration, text-transform
- Preserve button clickability with protected backgrounds and hover states
- Support any CSS framework/custom styles without hardcoded mappings
- Add comprehensive documentation to TODO.md for future enhancements

Examples:
- 'Emphasis' button now shows red bold text (from .emph class)
- 'Highlight' button displays with style preview while remaining clickable
- 'Brand' button demonstrates text-transform and color changes

This provides intuitive visual feedback so users immediately understand
what each formatting button will do to their content.

lib/src/ui/style-aware-editor.js

@@ -246,6 +246,42 @@ export class StyleAwareEditor {
         button.title = `Apply ${styleInfo.name} style`;
         button.dataset.styleId = styleId;
         
+        // Apply preview styling by copying computed styles from the original element
+        if (styleInfo.element && styleInfo.classes && styleInfo.classes.length > 0) {
+            // Add the detected classes first
+            styleInfo.classes.forEach(className => {
+                button.classList.add(className);
+            });
+            
+            // Add special button class
+            button.classList.add('insertr-style-preview');
+            
+            // Copy specific style properties from the original element to ensure they show
+            const computedStyle = window.getComputedStyle(styleInfo.element);
+            
+            // Copy color (most important for visual preview)
+            if (computedStyle.color && computedStyle.color !== 'rgb(0, 0, 0)') {
+                button.style.setProperty('color', computedStyle.color, 'important');
+            }
+            
+            // Copy font-weight
+            if (computedStyle.fontWeight && computedStyle.fontWeight !== '400') {
+                button.style.setProperty('font-weight', computedStyle.fontWeight, 'important');
+            }
+            
+            // Copy text-decoration (for underlines, etc.)
+            if (computedStyle.textDecoration && computedStyle.textDecoration !== 'none') {
+                button.style.setProperty('text-decoration', computedStyle.textDecoration, 'important');
+            }
+            
+            // Copy text-transform (for uppercase, etc.)  
+            if (computedStyle.textTransform && computedStyle.textTransform !== 'none') {
+                button.style.setProperty('text-transform', computedStyle.textTransform, 'important');
+            }
+            
+            // Don't copy background-color to keep button appearance
+        }
+        
         // Add click handler for style application
         button.addEventListener('click', (e) => {
             e.preventDefault();