feat(extension): rendu Markdown dans la prévisualisation + zone agrandie v0.4.3
Avant : renderConfirm() échappait le résumé et l'extrait avec escapeHtml(), donc les **gras**, *italique*, [liens](), listes, titres du Markdown produit par l'IA s'affichaient en texte brut (littéral « **gras** »). Maintenant : renderMarkdownSafe() parse le Markdown en HTML limité et sûr (escapeHtml d'abord, puis regex sur le texte échappé — pas de HTML brut autorisé). + Refonte du panneau de prévisualisation : - .preview-block avec header sticky (label Résumé / Extrait) - .excerpt-block : min-height 180px, max-height 360px, scroll si long - .summary-block : fond bleuté léger, bordure gauche sky - markdown-h3/h4/h5 stylés (serif pour titres), strong/em/code/ul/a - Polices 14px, line-height 1.7, word-break pour texte long + Nouvelle clé i18n summaryLabel dans les 15 locales. + Version 0.4.2 → 0.4.3.
This commit is contained in:
@@ -483,8 +483,96 @@ input[type="text"]:focus,
|
||||
.confirm-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
}
|
||||
.preview-block {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-block-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: linear-gradient(180deg, #fdfcfa 0%, #faf9f5 100%);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.preview-block-head .dot {
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
.preview-block-head .dot-summary { background: #0284c7; }
|
||||
.preview-block-head .dot-excerpt { background: #a47148; }
|
||||
.preview-block-body {
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: rgba(28, 28, 28, 0.92);
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.excerpt-block .preview-block-body {
|
||||
min-height: 180px;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
background: #fcfbf9;
|
||||
}
|
||||
.summary-block .preview-block-body {
|
||||
font-style: normal;
|
||||
color: rgba(28, 28, 28, 0.78);
|
||||
background: rgba(2, 132, 199, 0.04);
|
||||
border-left: 3px solid #0ea5e9;
|
||||
padding-inline-start: 18px;
|
||||
}
|
||||
|
||||
/* Markdown rendu dans le side panel */
|
||||
.md { font-size: 14px; line-height: 1.7; }
|
||||
.md p { margin: 0 0 10px; }
|
||||
.md p:last-child { margin-bottom: 0; }
|
||||
.md-h3 {
|
||||
font-size: 16px; font-weight: 700;
|
||||
margin: 14px 0 8px; color: var(--ink);
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
}
|
||||
.md-h4 {
|
||||
font-size: 14px; font-weight: 700;
|
||||
margin: 12px 0 6px; color: var(--ink);
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
}
|
||||
.md-h5 {
|
||||
font-size: 13px; font-weight: 700;
|
||||
margin: 10px 0 4px; color: var(--muted);
|
||||
}
|
||||
.md strong { font-weight: 700; color: var(--ink); }
|
||||
.md em { font-style: italic; }
|
||||
.md a {
|
||||
color: #0284c7;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.md a:hover { color: #0369a1; }
|
||||
.md-code {
|
||||
background: rgba(28, 28, 28, 0.06);
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
font-size: 12.5px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.md-ul {
|
||||
margin: 8px 0;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
.md-ul li { margin: 3px 0; }
|
||||
|
||||
.summary-preview {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
|
||||
Reference in New Issue
Block a user