` portant directement ce fragment SVG nettoyé par
@@ -180,6 +192,47 @@ regroupement à chaque appel.
emplacement réservé, formulaire de contenu dédié hors périmètre de
cette passe.
+## `box_style.py` — attributs de "boîte" partagés entre plusieurs kinds
+
+Audit du 26/09/2026 (réglages manquants, à couvrir élément par élément) :
+padding/margin/couleur de fond/arrondi/bordure par côté/position du bloc
+sont des besoins IDENTIQUES pour la plupart des kinds de contenu — un
+seul jeu d'attributs et une seule fonction de rendu ici, jamais réécrits
+à chaque kind (voir `_render_text` pour le premier usage réel).
+
+### `BORDER_SIDES: tuple[str, ...]`
+`("top", "right", "bottom", "left")`.
+
+### `default_border() -> dict[str, dict[str, str]]`
+Un dict à 4 clés (`BORDER_SIDES`), chacune `{"style": "none", "width":
+"1px", "color": "var(--doc-border)"}`.
+- **Retour** : un NOUVEAU dict à chaque appel (jamais un littéral partagé
+ muté par référence entre deux éléments — même précaution que
+ `DEFAULT_QUIZ_CONFIG` côté `labels/`).
+- **Exceptions** : aucune.
+
+### `BOX_DEFAULTS: dict[str, Any]`
+`{"padding": "", "margin": "", "background_color": "", "border_radius":
+"", "align_self": "stretch", "height": "", "min_height": "",
+"max_height": "", "min_width": "", "box_shadow": "", "opacity": ""}` —
+`border` n'y figure PAS (voir `default_border()`, à ajouter séparément
+par chaque appelant pour éviter le partage par référence).
+
+### `render_box_style(a: dict[str, Any]) -> str`
+Construit les déclarations CSS inline pour `padding`/`margin`/
+`background_color`/`border_radius`/`height`/`min_height`/`max_height`/
+`min_width`/`box_shadow`/`opacity`/`border`/`align_self` de `a` — un
+attribut absent ou à sa valeur par défaut ne produit AUCUNE déclaration
+(comportement historique inchangé). `border` est un dict à 4 clés
+(`BORDER_SIDES`), chacune `{"style", "width", "color"}` — un côté à
+`style="none"` (ou absent) ne produit rien pour ce côté, jamais un
+`border-top:none` explicite. `align-self` n'est ajouté que si différent
+de `"stretch"` (déjà le comportement par défaut d'un enfant flex en
+colonne).
+- **Retour** : les déclarations CSS (`"propriete:valeur; ..."`), chaîne
+ vide si rien à ajouter.
+- **Exceptions** : aucune.
+
## `sanitize_svg_markup.py` — nettoyage du contenu SVG inline d'une image
### `sanitize_svg_markup(markup: str) -> str`
diff --git a/static/document/document-editor.css b/static/document/document-editor.css
index 0c1f20ea..171b2af1 100644
--- a/static/document/document-editor.css
+++ b/static/document/document-editor.css
@@ -2436,3 +2436,130 @@ img.docImage {
border-bottom: 1px solid var(--doc-border);
}
}
+
+/* ---- Éditeur de bordure par côté (panneau Propriétés — voir
+ static/document/js/document-editor.js, forgeDocRenderBoxFieldsHtml) :
+ une ligne par côté (style/épaisseur/couleur), réutilisée par tous les
+ kinds au fil de l'audit du 26/09/2026. ---- */
+.docBorderEditor {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.docBorderSideRow {
+ display: grid;
+ grid-template-columns: 48px 1fr 56px 1fr;
+ gap: 6px;
+ align-items: center;
+}
+
+.docBorderSideLabel {
+ font-size: 12px;
+ color: var(--doc-muted);
+}
+
+.docBorderStyleSelect {
+ width: 100%;
+ min-width: 0;
+ font-size: 12px;
+ padding: 5px 6px;
+ border: 1px solid var(--doc-border);
+ border-radius: 6px;
+ background: var(--doc-bg-2);
+ color: var(--doc-text);
+}
+
+.docBorderWidthRange {
+ width: 100%;
+ min-width: 0;
+}
+
+.docBorderColorInput {
+ width: 100%;
+ min-width: 0;
+ height: 28px;
+ padding: 2px;
+ border: 1px solid var(--doc-border);
+ border-radius: 6px;
+ background: var(--doc-bg-2);
+ cursor: pointer;
+}
+
+/* ---- Curseurs génériques à case "activer" (voir static/document/js/
+ document-editor.js, forgeDocRenderToggleSliderHtml) — retour
+ utilisateur du 26/09/2026 : plus aucune valeur CSS saisie à la main,
+ uniquement des curseurs/cases/listes/sélecteurs de couleur. ---- */
+.docSliderField {
+ margin-bottom: 10px;
+}
+
+.docSliderRow {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+/* `.docField input` (règle générique plus haut) pose padding/bordure/
+ fond/width:100% pensés pour un champ texte — remis à plat ici pour
+ une case à cocher/un curseur natifs, sinon ils héritent cette
+ apparence de champ texte (bug réel constaté le 26/09/2026, capture à
+ l'appui : case à cocher démesurée et centrée, curseur poussé hors
+ panneau). */
+.docSliderRow input[type='checkbox'] {
+ flex-shrink: 0;
+ width: auto;
+ padding: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+}
+
+.docSliderRow input[type='range'] {
+ flex: 1;
+ min-width: 0;
+ width: auto;
+ padding: 0;
+ border: none;
+ background: none;
+}
+
+.docSliderRow input[type='range']:disabled {
+ opacity: 0.4;
+}
+
+.docSliderValue {
+ flex-shrink: 0;
+ min-width: 3em;
+ text-align: right;
+ font-size: 11.5px;
+ font-weight: 600;
+ color: var(--doc-muted);
+ font-variant-numeric: tabular-nums;
+}
+
+.docColorFieldRow {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.docColorFieldRow input[type='color'] {
+ width: 40px;
+ height: 28px;
+ padding: 2px;
+ border: 1px solid var(--doc-border);
+ border-radius: 6px;
+ background: var(--doc-bg-2);
+ cursor: pointer;
+}
+
+#docPropsPanel input[type='color'] {
+ width: 40px;
+ height: 28px;
+ padding: 2px;
+ border: 1px solid var(--doc-border);
+ border-radius: 6px;
+ background: var(--doc-bg-2);
+ cursor: pointer;
+}
diff --git a/static/document/js/document-editor.js b/static/document/js/document-editor.js
index 5b9dab19..8325feb5 100644
--- a/static/document/js/document-editor.js
+++ b/static/document/js/document-editor.js
@@ -282,6 +282,17 @@ function forgeDocUpdateAttributes(id, newAttributes) {
forgeDocBindCanvasInteractions();
forgeDocApplySelectionClass();
}
+ // Bug réel constaté le 26/09/2026 : les boutons (gras/alignement/
+ // segmentés...) ne reflétaient jamais leur nouvel état tant que la
+ // page n'était pas rechargée — leur classe "is-active" était figée
+ // au moment du rendu initial du panneau, jamais réévaluée après un
+ // clic. Point d'entrée UNIQUE de toute mise à jour d'attributs :
+ // reconstruire le panneau ICI, une fois, couvre TOUS les panneaux
+ // (texte, image, bouton, mini-jeux...) sans dupliquer cet appel dans
+ // chacun de leurs boutons.
+ if (window.forgeDocState.selectedId === id) {
+ forgeDocRenderProps(el);
+ }
});
}
@@ -1687,6 +1698,208 @@ function forgeDocRefreshRightPanelDefault() {
else forgeDocRenderProps(null);
}
+/* ---------------------------------------------------------------------
+ * Champs de "boîte" PARTAGÉS par plusieurs kinds (padding/margin/couleur
+ * de fond/arrondi/bordure par côté/position du bloc) — voir
+ * document_engine/rendering/box_style.py, même jeu d'attributs côté
+ * serveur. Un seul HTML + un seul binding réutilisés par chaque panneau
+ * de propriétés plutôt que dupliqués (retour utilisateur du 26/09/2026 :
+ * audit complet des réglages manquants, à couvrir élément par élément).
+ * ------------------------------------------------------------------- */
+
+const FORGE_DOC_BORDER_SIDES = [
+ ['top', 'Haut'], ['right', 'Droite'], ['bottom', 'Bas'], ['left', 'Gauche'],
+];
+const FORGE_DOC_BORDER_STYLES = [
+ ['none', 'Aucune'], ['solid', 'Solide'], ['dashed', 'Tirets'], ['dotted', 'Pointillés'], ['double', 'Double'],
+];
+const FORGE_DOC_ALIGN_SELF_OPTIONS = [
+ ['stretch', 'Pleine largeur'], ['flex-start', 'Gauche'], ['center', 'Centré'], ['flex-end', 'Droite'],
+];
+const FORGE_DOC_SHADOW_PRESETS = [
+ ['', 'Aucune'], ['0 2px 6px rgba(0,0,0,.15)', 'Légère'], ['0 8px 24px rgba(0,0,0,.25)', 'Marquée'],
+];
+const FORGE_DOC_TEXT_SHADOW_PRESETS = [
+ ['', 'Aucune'], ['1px 1px 2px rgba(0,0,0,.35)', 'Légère'], ['2px 2px 6px rgba(0,0,0,.5)', 'Marquée'],
+];
+const FORGE_DOC_FONT_FAMILY_OPTIONS = [
+ ['', 'Police du thème'],
+ ['system-ui, -apple-system, sans-serif', 'Système (sans-serif)'],
+ ['Georgia, serif', 'Georgia (serif)'],
+ ['"Times New Roman", serif', 'Times New Roman (serif)'],
+ ['Arial, Helvetica, sans-serif', 'Arial'],
+ ['Verdana, sans-serif', 'Verdana'],
+ ['Tahoma, sans-serif', 'Tahoma'],
+ ['"Trebuchet MS", sans-serif', 'Trebuchet MS'],
+ ['"Courier New", monospace', 'Courier New (machine à écrire)'],
+];
+
+/* ---------------------------------------------------------------------
+ * Contrôles génériques réutilisables — retour utilisateur du 26/09/2026 :
+ * "jamais l'utilisateur ne doit rentrer une valeur brute à la main" —
+ * un curseur (avec une case "activer" puisqu'un ne
+ * peut pas représenter "aucune valeur") remplace tout champ de texte
+ * libre pour une valeur numérique optionnelle.
+ * ------------------------------------------------------------------- */
+
+function forgeDocRenderToggleSliderHtml(idPrefix, label, rawValue, opts) {
+ const hasValue = rawValue !== undefined && rawValue !== null && rawValue !== '';
+ const numeric = hasValue ? Number.parseFloat(rawValue) : opts.fallback;
+ const displayUnit = opts.displayUnit !== undefined ? opts.displayUnit : opts.unit;
+ return `
+
+ ${label}
+
+ `;
+}
+
+function forgeDocBindToggleSlider(idPrefix, opts, onChange) {
+ const toggle = document.getElementById(`${idPrefix}Toggle`);
+ const range = document.getElementById(`${idPrefix}Range`);
+ const valueLabel = document.getElementById(`${idPrefix}Value`);
+ const displayUnit = opts.displayUnit !== undefined ? opts.displayUnit : opts.unit;
+ const toAttr = opts.toAttr || ((n) => `${n}${opts.unit}`);
+
+ range.addEventListener('input', () => {
+ valueLabel.textContent = range.value + displayUnit;
+ });
+ range.addEventListener('change', () => {
+ if (toggle.checked) onChange(toAttr(Number.parseFloat(range.value)));
+ });
+ toggle.addEventListener('change', () => {
+ range.disabled = !toggle.checked;
+ if (toggle.checked) {
+ valueLabel.textContent = range.value + displayUnit;
+ onChange(toAttr(Number.parseFloat(range.value)));
+ } else {
+ valueLabel.textContent = '—';
+ onChange('');
+ }
+ });
+}
+
+function forgeDocToHexColor(value, fallback) {
+ return /^#[0-9a-f]{6}$/i.test(value || '') ? value : fallback;
+}
+
+function forgeDocRenderBoxFieldsHtml(a, idPrefix) {
+ const border = a.border || {};
+ const alignSelf = a.align_self || 'stretch';
+ const opacityPercent = a.opacity !== '' && a.opacity !== undefined ? Math.round(Number.parseFloat(a.opacity) * 100) : '';
+ return `
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}Padding`, 'Espacement intérieur (padding)', a.padding, {
+ min: 0, max: 80, step: 2, unit: 'px', fallback: 16,
+ })}
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}Margin`, 'Espacement extérieur (margin)', a.margin, {
+ min: 0, max: 80, step: 2, unit: 'px', fallback: 16,
+ })}
+
+
+
+ ${hasValue ? numeric + displayUnit : '—'}
+
+
+
+
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}Radius`, 'Arrondi des bords', a.border_radius, {
+ min: 0, max: 100, step: 2, unit: 'px', fallback: 8,
+ })}
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}Height`, 'Hauteur fixe', a.height, {
+ min: 0, max: 800, step: 10, unit: 'px', fallback: 200,
+ })}
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}MinHeight`, 'Hauteur minimale', a.min_height, {
+ min: 0, max: 800, step: 10, unit: 'px', fallback: 200,
+ })}
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}MaxHeight`, 'Hauteur maximale', a.max_height, {
+ min: 0, max: 800, step: 10, unit: 'px', fallback: 200,
+ })}
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}MinWidth`, 'Largeur minimale', a.min_width, {
+ min: 0, max: 800, step: 10, unit: 'px', fallback: 200,
+ })}
+
+
+
+
+
+ Ombre portée du bloc
+
+ ${forgeDocRenderToggleSliderHtml(`${idPrefix}Opacity`, 'Opacité', opacityPercent, {
+ min: 0, max: 100, step: 5, unit: '%', fallback: 100,
+ })}
+
+ ${FORGE_DOC_SHADOW_PRESETS.map(([v, l]) => ``).join('')}
+
+
+ Position du bloc
+
+
+ ${FORGE_DOC_ALIGN_SELF_OPTIONS.map(([v, l]) => ``).join('')}
+
+
+ Bordure (par côté)
+
+ `;
+}
+
+function forgeDocBindBoxFields(panel, el, idPrefix, patch) {
+ forgeDocBindToggleSlider(`${idPrefix}Padding`, { unit: 'px' }, (v) => patch({ padding: v }));
+ forgeDocBindToggleSlider(`${idPrefix}Margin`, { unit: 'px' }, (v) => patch({ margin: v }));
+ forgeDocBindToggleSlider(`${idPrefix}Radius`, { unit: 'px' }, (v) => patch({ border_radius: v }));
+ forgeDocBindToggleSlider(`${idPrefix}Height`, { unit: 'px' }, (v) => patch({ height: v }));
+ forgeDocBindToggleSlider(`${idPrefix}MinHeight`, { unit: 'px' }, (v) => patch({ min_height: v }));
+ forgeDocBindToggleSlider(`${idPrefix}MaxHeight`, { unit: 'px' }, (v) => patch({ max_height: v }));
+ forgeDocBindToggleSlider(`${idPrefix}MinWidth`, { unit: 'px' }, (v) => patch({ min_width: v }));
+ // Toujours une vraie valeur numérique quand la case est cochée (jamais
+ // "" pour 100%, même si ça revient visuellement au même) : sinon l'état
+ // "activé" de la case ne survivrait pas à un rechargement du panneau
+ // (hasValue redeviendrait faux, la case semblerait décochée à tort).
+ forgeDocBindToggleSlider(`${idPrefix}Opacity`, { unit: '%', toAttr: (n) => String(n / 100) }, (v) => patch({ opacity: v }));
+
+ document.getElementById(`${idPrefix}Bg`).addEventListener('change', (e) => patch({ background_color: e.target.value }));
+ document.getElementById(`${idPrefix}BgNone`).addEventListener('click', () => patch({ background_color: '' }));
+
+ panel.querySelectorAll(`#${idPrefix}ShadowSeg .docSegBtn`).forEach((btn) => {
+ btn.addEventListener('click', () => patch({ box_shadow: btn.dataset.shadow }));
+ });
+ panel.querySelectorAll(`#${idPrefix}AlignSelfSeg .docSegBtn`).forEach((btn) => {
+ btn.addEventListener('click', () => patch({ align_self: btn.dataset.alignSelf }));
+ });
+
+ function patchBorderSide(side, partial) {
+ // Toujours relu depuis el.attributes AU MOMENT de l'appel (jamais un
+ // instantané capturé au moment du binding) : el.attributes est
+ // réassigné en place par forgeDocUpdateAttributes après chaque
+ // modification — un instantané figé ferait perdre le changement
+ // précédent dès qu'on modifie un 2e côté/champ.
+ const currentBorder = { ...el.attributes.border };
+ const nextSide = { ...currentBorder[side], ...partial };
+ patch({ border: { ...currentBorder, [side]: nextSide } });
+ }
+ panel.querySelectorAll(`#${idPrefix}BorderEditor .docBorderStyleSelect`).forEach((sel) => {
+ sel.addEventListener('change', (e) => patchBorderSide(sel.dataset.side, { style: e.target.value }));
+ });
+ panel.querySelectorAll(`#${idPrefix}BorderEditor .docBorderWidthRange`).forEach((range) => {
+ range.addEventListener('change', (e) => patchBorderSide(range.dataset.side, { width: `${e.target.value}px` }));
+ });
+ panel.querySelectorAll(`#${idPrefix}BorderEditor .docBorderColorInput`).forEach((inp) => {
+ inp.addEventListener('change', (e) => patchBorderSide(inp.dataset.side, { color: e.target.value }));
+ });
+}
+
function forgeDocRenderTextProps(panel, el) {
const a = el.attributes;
panel.innerHTML = `
@@ -1704,42 +1917,81 @@ function forgeDocRenderTextProps(panel, el) {
+
+ ${FORGE_DOC_BORDER_SIDES.map(([side, label]) => {
+ const sideBorder = border[side] || {};
+ return `
+
+
+ ${label}
+
+
+
+
`;
+ }).join('')}
+