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:
@@ -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-track"><span class="lt-toggle-thumb"></span></span>
|
||||||
<span class="lt-toggle-label lt-text-xs">Preview</span>
|
<span class="lt-toggle-label lt-text-xs">Preview</span>
|
||||||
</label>
|
</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>
|
</div>
|
||||||
<button type="button" id="addCommentBtn" class="lt-btn lt-btn-primary lt-btn-sm">POST COMMENT</button>
|
<button type="button" id="addCommentBtn" class="lt-btn lt-btn-primary lt-btn-sm">POST COMMENT</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -1317,4 +1319,78 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
});
|
});
|
||||||
</script>
|
</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">✕</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></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>> 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> 👍 <code>:bug:</code> 🐛 <code>:rocket:</code> 🚀 <code>:warning:</code> ⚠️ <code>:fire:</code> 🔥 <code>:heart:</code> ❤️ <code>:check:</code> ✅ <code>:x:</code> ❌ <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'; ?>
|
<?php include __DIR__ . '/layout_footer.php'; ?>
|
||||||
|
|||||||
Reference in New Issue
Block a user