style: Improve markdown editor styling and functionality

- Update dark mode button icon and styling
- Add styling for new collection button
- Apply default iframe styles in preview pane
- Adjust vertical divider height in header buttons
- Improve handling of JSX-like attributes in markdown
- Add support for new collection functionality
- Refine file loading logic in view mode
- Improve dark mode toggle icon and integration
- Update UI for edit/view mode toggle button

static/js/editor.js

@@ -336,6 +336,60 @@ class MarkdownEditor {
         }
     }
 
+    /**
+     * Convert JSX-style attributes to HTML attributes
+     * Handles style={{...}} and boolean attributes like allowFullScreen={true}
+     */
+    convertJSXToHTML(content) {
+        Logger.debug('Converting JSX to HTML...');
+
+        // Convert style={{...}} to style="..."
+        // This regex finds style={{...}} and converts the object notation to CSS string
+        content = content.replace(/style=\{\{([^}]+)\}\}/g, (match, styleContent) => {
+            Logger.debug(`Found JSX style: ${match}`);
+
+            // Parse the object-like syntax and convert to CSS
+            const cssRules = styleContent
+                .split(',')
+                .map(rule => {
+                    const colonIndex = rule.indexOf(':');
+                    if (colonIndex === -1) return '';
+
+                    const key = rule.substring(0, colonIndex).trim();
+                    const value = rule.substring(colonIndex + 1).trim();
+
+                    if (!key || !value) return '';
+
+                    // Convert camelCase to kebab-case (e.g., paddingTop -> padding-top)
+                    const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+                    // Remove quotes from value
+                    let cssValue = value.replace(/^['"]|['"]$/g, '');
+
+                    return `${cssKey}: ${cssValue}`;
+                })
+                .filter(rule => rule)
+                .join('; ');
+
+            Logger.debug(`Converted to CSS: style="${cssRules}"`);
+            return `style="${cssRules}"`;
+        });
+
+        // Convert boolean attributes like allowFullScreen={true} to allowfullscreen
+        content = content.replace(/(\w+)=\{true\}/g, (match, attrName) => {
+            Logger.debug(`Found boolean attribute: ${match}`);
+            // Convert camelCase to lowercase for HTML attributes
+            const htmlAttr = attrName.toLowerCase();
+            Logger.debug(`Converted to: ${htmlAttr}`);
+            return htmlAttr;
+        });
+
+        // Remove attributes set to {false}
+        content = content.replace(/\s+\w+=\{false\}/g, '');
+
+        return content;
+    }
+
     /**
      * Render preview from markdown content
      * Can be called with explicit content (for view mode) or from editor (for edit mode)
@@ -355,11 +409,12 @@ class MarkdownEditor {
         }
 
         try {
-            // Step 1: Process macros
-            let processedContent = markdown;
+            // Step 0: Convert JSX-style syntax to HTML
+            let processedContent = this.convertJSXToHTML(markdown);
 
+            // Step 1: Process macros
             if (this.macroProcessor) {
-                const processingResult = await this.macroProcessor.processMacros(markdown);
+                const processingResult = await this.macroProcessor.processMacros(processedContent);
                 processedContent = processingResult.content;
             }