feat: media toolbar button group for video/embed insertion

- Added Media toolbar group (▶ Video, 🎬 Embed Grid, ▶ YouTube)
- Rose/pink accent to differentiate from other toolbar groups
- One-click insert of video tags, embed grids, and YouTube embeds
- Registered media templates in coding-blocks.js

Author: ijbo

changelogs/CHANGELOG-media-toolbar.md

@@ -0,0 +1,36 @@
+# Media Toolbar Button — Insert Media Tags
+
+- Added Media toolbar button group (▶ Video, 🎬 Embed Grid, ▶ YouTube)
+- Rose/pink accent (#f472b6) to differentiate from AI (teal), API (orange), Linux (green), Coding (indigo)
+- ▶ Video inserts `![My Video](https://www.w3schools.com/html/mov_bbb.mp4)` example
+- 🎬 Embed Grid inserts a 2-column embed grid template with YouTube, video, and website examples
+- ▶ YouTube inserts `![YouTube Video](https://www.youtube.com/watch?v=...)` example
+- Media actions registered via `M.registerFormattingAction()` in `coding-blocks.js`
+- Group uses shared `fmt-coding-group` base styles with `.fmt-media-group` accent override
+
+---
+
+## Summary
+Adds a "Media" toolbar button group with three insert actions for video playback and embed grids, following the existing toolbar pattern.
+
+---
+
+## 1. Media Toolbar Buttons
+**Files:** `index.html`, `js/coding-blocks.js`
+**What:** Added Media button group with `data-action` attributes (media-video, media-embed-grid, media-youtube). Registered templates via `MEDIA_TEMPLATES` object and `M.registerFormattingAction()`.
+**Impact:** Users can insert video/embed markdown with one click — no need to remember syntax.
+
+## 2. Media Group Styling
+**Files:** `css/ai-docgen.css`
+**What:** Rose accent CSS for `.fmt-media-group` and `.fmt-media-btn` with dark/light mode support.
+**Impact:** Visual consistency with other toolbar groups (AI=teal, API=orange, Linux=green, Coding=indigo, Media=rose).
+
+---
+
+## Files Changed (3 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `index.html` | +15 | Media button group HTML |
+| `js/coding-blocks.js` | +13 | Media template registration |
+| `css/ai-docgen.css` | +42 | Media group rose accent CSS |

css/ai-docgen.css

@@ -1901,6 +1901,48 @@
     background: rgba(99, 102, 241, 0.12);
 }
 
+/* ============================================
+   Media Group — Video / Embed Grid / YouTube
+   Uses rose accent (#f472b6) to differentiate
+   from AI (teal), API (orange), Linux (green),
+   Coding (indigo)
+   ============================================ */
+
+.fmt-media-group {
+    border-color: rgba(244, 114, 182, 0.25) !important;
+    background: rgba(244, 114, 182, 0.05) !important;
+}
+
+.fmt-media-group .fmt-coding-group-label {
+    color: rgba(244, 114, 182, 0.7) !important;
+}
+
+.fmt-media-btn {
+    color: #f472b6 !important;
+    font-weight: 500;
+}
+
+.fmt-media-btn:hover {
+    background: rgba(244, 114, 182, 0.15) !important;
+}
+
+[data-theme="light"] .fmt-media-group {
+    border-color: rgba(219, 39, 119, 0.3) !important;
+    background: rgba(219, 39, 119, 0.04) !important;
+}
+
+[data-theme="light"] .fmt-media-group .fmt-coding-group-label {
+    color: rgba(190, 24, 93, 0.7) !important;
+}
+
+[data-theme="light"] .fmt-media-btn {
+    color: #db2777 !important;
+}
+
+[data-theme="light"] .fmt-media-btn:hover {
+    background: rgba(219, 39, 119, 0.12) !important;
+}
+
 /* ============================================
    Overflow Dropdown — "…" toggle for tag groups
    Shared by AI Tags and Coding groups

index.html

@@ -679,6 +679,21 @@ <h5>Menu</h5>
                 </div>
             </div>
             <span class="fmt-separator"></span>
+            <div class="fmt-coding-group fmt-media-group" title="Media Embedding">
+                <span class="fmt-coding-group-label">Media</span>
+                <button class="fmt-btn fmt-media-btn" data-action="media-video"
+                    title="Insert Video Player">▶ Video</button>
+                <div class="fmt-group-overflow">
+                    <button class="fmt-btn fmt-group-more-btn" title="More media blocks">…</button>
+                    <div class="fmt-group-dropdown">
+                        <button class="fmt-btn fmt-media-btn" data-action="media-embed-grid"
+                            title="Insert Embed Grid">🎬 Embed Grid</button>
+                        <button class="fmt-btn fmt-media-btn" data-action="media-youtube"
+                            title="Insert YouTube Video">▶ YouTube</button>
+                    </div>
+                </div>
+            </div>
+            <span class="fmt-separator"></span>
             <button class="fmt-btn fmt-vars-btn" id="apply-vars-btn"
                 title="Apply Variables — replace all $(varName) placeholders">
                 <i class="bi bi-braces-asterisk"></i> <span>Vars</span>

js/coding-blocks.js

@@ -21,6 +21,19 @@
         });
     });
 
+    // --- Media block templates ---
+    var MEDIA_TEMPLATES = {
+        'media-video': '![My Video](https://www.w3schools.com/html/mov_bbb.mp4)\n',
+        'media-youtube': '![YouTube Video](https://www.youtube.com/watch?v=dQw4w9WgXcQ)\n',
+        'media-embed-grid': '```embed cols=2 height=350\nhttps://www.youtube.com/watch?v=dQw4w9WgXcQ \"YouTube Video\"\nhttps://www.w3schools.com/html/mov_bbb.mp4 \"Sample Video\"\nhttps://wikipedia.org \"Wikipedia\"\nhttps://github.com \"GitHub\"\n```\n'
+    };
+
+    Object.keys(MEDIA_TEMPLATES).forEach(function (action) {
+        M.registerFormattingAction(action, function () {
+            M.insertAtCursor('\n' + MEDIA_TEMPLATES[action]);
+        });
+    });
+
     // --- Overflow "…" toggle for AI Tags / Coding groups ---
     document.querySelectorAll('.fmt-group-more-btn').forEach(function (btn) {
         btn.addEventListener('click', function (e) {