From e9a033d4efa47b172ce858dbe707a679fdd846a7 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Tue, 7 Apr 2026 00:31:46 -0400
Subject: [PATCH] Add markdown cheat sheet modal to ticket comment editor

A '?' button next to the MD/Preview toggles opens a reference modal
covering all supported syntax: inline formatting, headings, lists,
task lists, tables, code blocks, footnotes, emoji shortcodes, and
ticket references.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 views/TicketView.php | 76 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/views/TicketView.php b/views/TicketView.php
index e00bb10..a8cd9d3 100644
--- a/views/TicketView.php
+++ b/views/TicketView.php
@@ -526,6 +526,8 @@ $progressClass  = $slaBreached ? 'lt-progress--red' : ($slaPct >= 75 ? 'lt-progr
             <span class="lt-toggle-track"><span class="lt-toggle-thumb"></span></span>
             <span class="lt-toggle-label lt-text-xs">Preview</span>
           </label>
+          <button type="button" class="lt-btn lt-btn-ghost lt-btn-xs" data-modal-open="md-cheatsheet"
+                  title="Markdown cheat sheet" aria-label="Markdown cheat sheet">?</button>
         </div>
         <button type="button" id="addCommentBtn" class="lt-btn lt-btn-primary lt-btn-sm">POST COMMENT</button>
       </div>
@@ -1317,4 +1319,78 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 </script>
 
+<!-- ── Markdown Cheat Sheet Modal ──────────────────────────────────────── -->
+<div id="md-cheatsheet" class="lt-modal-overlay" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="md-cs-title">
+  <div class="lt-modal" style="max-width:680px">
+    <div class="lt-modal-header">
+      <span class="lt-modal-title" id="md-cs-title">[ MD ] Markdown Reference</span>
+      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+    </div>
+    <div class="lt-modal-body" style="max-height:70vh;overflow-y:auto">
+      <div class="lt-markdown">
+
+      <h2>Basic</h2>
+      <table>
+        <thead><tr><th>Element</th><th>Syntax</th><th>Result</th></tr></thead>
+        <tbody>
+          <tr><td>Bold</td><td><code>**bold**</code></td><td><strong>bold</strong></td></tr>
+          <tr><td>Italic</td><td><code>*italic*</code></td><td><em>italic</em></td></tr>
+          <tr><td>Strikethrough</td><td><code>~~text~~</code></td><td><del>text</del></td></tr>
+          <tr><td>Highlight</td><td><code>==text==</code></td><td><mark>text</mark></td></tr>
+          <tr><td>Subscript</td><td><code>H~2~O</code></td><td>H<sub>2</sub>O</td></tr>
+          <tr><td>Superscript</td><td><code>X^2^</code></td><td>X<sup>2</sup></td></tr>
+          <tr><td>Inline code</td><td><code>`code`</code></td><td><code>code</code></td></tr>
+          <tr><td>Link</td><td><code>[title](https://url)</code></td><td><a href="#">title</a></td></tr>
+          <tr><td>Image</td><td><code>![alt](https://url)</code></td><td><em>renders image</em></td></tr>
+        </tbody>
+      </table>
+
+      <h2>Headings</h2>
+<pre><code># H1
+## H2
+### H3  (supports {#anchor-id})</code></pre>
+
+      <h2>Lists</h2>
+<pre><code>- Unordered item
+- Another item
+
+1. Ordered item
+2. Another item
+
+- [x] Done task
+- [ ] Todo task</code></pre>
+
+      <h2>Blocks</h2>
+<pre><code>&gt; Blockquote text
+
+---   (horizontal rule)
+
+```
+code block
+```</code></pre>
+
+      <h2>Table</h2>
+<pre><code>| Header | Header |
+|--------|--------|
+| Cell   | Cell   |</code></pre>
+
+      <h2>Footnotes</h2>
+<pre><code>Sentence with a note.[^1]
+
+[^1]: Footnote text here.</code></pre>
+
+      <h2>Emoji</h2>
+      <p>Use <code>:name:</code> — e.g. <code>:thumbsup:</code> 👍 &nbsp; <code>:bug:</code> 🐛 &nbsp; <code>:rocket:</code> 🚀 &nbsp; <code>:warning:</code> ⚠️ &nbsp; <code>:fire:</code> 🔥 &nbsp; <code>:heart:</code> ❤️ &nbsp; <code>:check:</code> ✅ &nbsp; <code>:x:</code> ❌ &nbsp; <code>:eyes:</code> 👀</p>
+
+      <h2>Ticket References</h2>
+      <p><code>#123456789</code> — links directly to a ticket by ID.</p>
+
+      </div>
+    </div>
+    <div class="lt-modal-footer">
+      <button type="button" class="lt-btn" data-modal-close>Close</button>
+    </div>
+  </div>
+</div>
+
 <?php include __DIR__ . '/layout_footer.php'; ?>