fix(admin): render markdown preview from server-sanitized HTML
- MarkdownField posts the source to POST /markdown/preview when Preview opens and again 300 ms after a change while open; stale answers dropped - the pane binds only data.html of a 2xx answer; a refusal is a text notice - mlmarkdown previews the active locale and follows a locale switch - .summer-markdown style kit restores headings, lists, code and tables - vitest coverage, forms.md and rebuilt modules/boardwalk/dist
This commit is contained in:
@@ -236,6 +236,116 @@
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Markdown preview: the server-rendered HTML of a markdown field. Preflight
|
||||
strips heading, list and margin styles, so the pane restores them. */
|
||||
.summer-markdown {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: var(--c-text);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.summer-markdown :where(h1, h2, h3, h4) {
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.summer-markdown :where(h1) {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(h2) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(h3) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(h4) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(p, ul, ol, blockquote, pre, table) {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(h1, h2, h3, h4, p, ul, ol, blockquote, pre, table):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.summer-markdown :where(ul) {
|
||||
list-style: disc;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(ol) {
|
||||
list-style: decimal;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(code) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
background: var(--c-subtle);
|
||||
border-radius: 4px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(pre) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
background: var(--c-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.summer-markdown :where(pre code) {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.summer-markdown :where(blockquote) {
|
||||
border-left: 3px solid var(--c-border-strong);
|
||||
padding-left: 12px;
|
||||
color: var(--c-muted);
|
||||
}
|
||||
|
||||
.summer-markdown :where(a) {
|
||||
color: var(--c-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.summer-markdown :where(a):focus-visible {
|
||||
outline: 3px solid var(--c-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.summer-markdown :where(hr) {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--c-border);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.summer-markdown :where(table) {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.summer-markdown :where(th, td) {
|
||||
border: 1px solid var(--c-border);
|
||||
padding: 4px 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.summer-markdown :where(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.summer-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user