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>
This commit is contained in:
2026-04-07 00:31:46 -04:00
parent 3a516c5424
commit e9a033d4ef
+76
View File
@@ -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'; ?>