feat: render actual elements in markdown cheatsheet instead of labels

Replace text labels (h1, bold, italic) with rendered HTML in the Rendu column:
headings, strong, em, del, code, links, blockquote, lists, hr, sup, small
This commit is contained in:
Pontoporeia
2026-06-09 19:57:56 +02:00
parent 4a2b000fca
commit 38ef550397
16 changed files with 577 additions and 103 deletions

View File

@@ -6,7 +6,11 @@
* $groups array Existing groups data
*/
?>
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="apropos-form-<?= $aproposKey ?>" data-autosave>
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="apropos-form-<?= $aproposKey ?>"
hx-post="/admin/actions/apropos.php"
hx-trigger="change delay:1500ms, input delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
<input type="hidden" name="apropos_key" value="<?= htmlspecialchars($aproposKey) ?>">

View File

@@ -5,11 +5,22 @@
<!-- ── Markdown content ──────────────────────────────────────────────── -->
<h2>Contenu de la page</h2>
<form action="/admin/actions/page.php" method="post" class="admin-form" data-autosave>
<form action="/admin/actions/page.php" method="post" class="admin-form"
hx-post="/admin/actions/page.php"
hx-trigger="overtype:change delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
<input type="hidden" name="slug" value="about">
<label for="editor">Contenu (Markdown) :</label>
<button type="button" class="btn btn--sm"
hx-get="/admin/markdown-cheatsheet-fragment.php"
hx-target="#md-cheatsheet-container"
hx-swap="innerHTML"
hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
Aide Markdown
</button>
<input type="hidden" id="content" name="content"
value="<?= htmlspecialchars($initialContent) ?>">
<div id="editor"></div>
@@ -26,7 +37,11 @@
<!-- ── Sidebar links ─────────────────────────────────────────────────── -->
<h2 style="margin-top:3rem;">Liens de la barre latérale</h2>
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="sidebar-links-form" data-autosave>
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="sidebar-links-form"
hx-post="/admin/actions/apropos.php"
hx-trigger="change delay:1500ms, input delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
<input type="hidden" name="apropos_key" value="sidebar_links">
@@ -122,11 +137,22 @@
</script>
<?php elseif ($editType === 'page' && $pageSlug !== 'about'): ?>
<form action="/admin/actions/page.php" method="post" class="admin-form" data-autosave>
<form action="/admin/actions/page.php" method="post" class="admin-form"
hx-post="/admin/actions/page.php"
hx-trigger="overtype:change delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
<input type="hidden" name="slug" value="<?= htmlspecialchars($pageSlug) ?>">
<label for="editor">Contenu (Markdown) :</label>
<button type="button" class="btn btn--sm"
hx-get="/admin/markdown-cheatsheet-fragment.php"
hx-target="#md-cheatsheet-container"
hx-swap="innerHTML"
hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
Aide Markdown
</button>
<input type="hidden" id="content" name="content"
value="<?= htmlspecialchars($initialContent) ?>">
<div id="editor"></div>
@@ -135,11 +161,22 @@
<?php elseif ($editType === 'form_help'): ?>
<p class="param-note">Ce texte est affiché dans le formulaire de soumission des étudiant·es (lien de partage). Supporte le Markdown.</p>
<form action="/admin/actions/form-help.php" method="post" class="admin-form" data-autosave>
<form action="/admin/actions/form-help.php" method="post" class="admin-form"
hx-post="/admin/actions/form-help.php"
hx-trigger="overtype:change delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
<input type="hidden" name="form_help_key" value="<?= htmlspecialchars($formHelpKey) ?>">
<label for="editor">Contenu (Markdown) :</label>
<button type="button" class="btn btn--sm"
hx-get="/admin/markdown-cheatsheet-fragment.php"
hx-target="#md-cheatsheet-container"
hx-swap="innerHTML"
hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
Aide Markdown
</button>
<input type="hidden" id="content" name="content"
value="<?= htmlspecialchars($initialContent) ?>">
<div id="editor"></div>

View File

@@ -649,5 +649,9 @@ document.addEventListener('htmx:afterSwap', function(evt) {
var otScript = document.createElement('script');
otScript.src = '<?= App::assetV('/assets/js/vendor/overtype.min.js') ?>';
document.head.appendChild(otScript);
var handlerScript = document.createElement('script');
handlerScript.src = '<?= App::assetV('/assets/js/app/autosave-handler.js') ?>';
document.head.appendChild(handlerScript);
})();
</script>

View File

@@ -7,6 +7,9 @@
hx-target="#toast-region">
</aside>
<!-- Markdown cheatsheet container (filled by HTMX on demand) -->
<div id="md-cheatsheet-container"></div>
<?php foreach ($extraJs ?? [] as $js): ?>
<script src="<?= App::assetV($js) ?>"></script>
<?php endforeach; ?>
@@ -30,6 +33,19 @@ document.body.addEventListener('htmx:afterSettle', function (e) {
if (warn) { warn.setAttribute('tabindex', '-1'); warn.focus(); }
}
});
// Markdown cheatsheet: close on backdrop click, remove stale dialogs before new one arrives
document.body.addEventListener('htmx:beforeRequest', function(e) {
if (e.detail.requestConfig && e.detail.requestConfig.path === '/admin/markdown-cheatsheet-fragment.php') {
var old = document.getElementById('md-cheatsheet-dialog');
if (old) old.remove();
}
});
document.body.addEventListener('click', function(e) {
if (e.target.tagName === 'DIALOG' && e.target.id === 'md-cheatsheet-dialog') {
e.target.close();
}
});
</script>
</body>
</html>