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

@@ -49,6 +49,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// save
$content = $_POST['content'] ?? '';
$name = trim($_POST['name'] ?? '');
$isAutosave = ($_GET['autosave'] ?? '') === '1';
try {
$db->setFormHelpBlock($key, $content);
if ($name !== '') {
@@ -64,6 +66,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
if ($isAutosave) {
header('Content-Type: application/json');
echo json_encode(['success' => true, 'csrf_token' => $_SESSION['csrf_token']]);
exit;
}
renderCollapsed($db, $key);
exit;
}
@@ -142,9 +151,10 @@ function renderEditor(Database $db, string $key): void
$content = $b['content'] ?? '';
?>
<div class="fhb-inline fhb-inline--editing" data-key="<?= htmlspecialchars($key) ?>">
<form hx-post="/admin/form-help-inline-fragment.php?key=<?= urlencode($key) ?>"
hx-swap="outerHTML"
hx-target="closest .fhb-inline"
<form hx-post="/admin/form-help-inline-fragment.php?key=<?= urlencode($key) ?>&autosave=1"
hx-trigger="overtype:change delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)"
class="fhb-inline-form">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
@@ -157,17 +167,24 @@ function renderEditor(Database $db, string $key): void
</div>
<label for="fhb-ed-<?= htmlspecialchars($key) ?>" class="fhb-edit-label">Contenu (Markdown) :</label>
<label for="fhb-ed-<?= htmlspecialchars($key) ?>" class="fhb-edit-label"><a href="https://herman.bearblog.dev/markdown-cheatsheet/" target="_blank">Syntax Markdown</a></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="fhb-content-<?= htmlspecialchars($key) ?>" name="content"
value="<?= htmlspecialchars($content) ?>">
<div id="fhb-editor-<?= htmlspecialchars($key) ?>" class="fhb-overtype-editor" style="height: 40vh !important; border: 1px dashed grey"></div>
<div class="fhb-autosave-status" data-autosave-status></div>
<div class="fhb-edit-buttons">
<button type="submit" class="btn btn--primary btn--sm">Enregistrer</button>
<button type="button" class="btn btn--secondary btn--sm"
hx-get="/admin/form-help-inline-fragment.php?key=<?= urlencode($key) ?>"
hx-target="closest .fhb-inline"
hx-swap="outerHTML">Annuler</button>
hx-swap="outerHTML">Fermer</button>
</div>
</form>
<script>
@@ -180,7 +197,11 @@ function renderEditor(Database $db, string $key): void
value: hidden.value,
minHeight: '400px',
spellcheck: false,
onChange: function(v) { hidden.value = v; }
toolbar: true,
onChange: function(v) {
hidden.value = v;
hidden.dispatchEvent(new CustomEvent('overtype:change', { bubbles: true }));
}
});
} else {
ed.innerHTML = '<textarea name="content" style="width:100%;min-height:400px;font-family:monospace">'