diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index bcc2c05..39b7a0a 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -186,7 +186,9 @@ Le bloc notes utilise une edition directe en `contentEditable`, sans mode previe Regles UI : - toolbar compacte en haut de l'outil ; -- boutons courts pour gras, italique, souligne, paragraphes, titres et listes ; +- boutons courts pour gras, italique, souligne, barre, titre et listes ; +- le paragraphe est le style par defaut et n'a pas de bouton dedie ; +- les types de listes sont regroupes dans un dropdown compact ; - couleurs texte et surlignage regroupees dans un dropdown unique avec icone arc-en-ciel et libelles de categories ; - date de derniere modification affichee en pied d'outil, sans prendre le dessus sur le contenu ; - switch de stockage des dessins en pied d'outil, avec icone sauvegarde et etat actif ; diff --git a/tests/helpers/data-validation.mjs b/tests/helpers/data-validation.mjs index 9b37e35..8e350f8 100644 --- a/tests/helpers/data-validation.mjs +++ b/tests/helpers/data-validation.mjs @@ -92,8 +92,9 @@ export function validateSiteContent(site) { "toolboxes.modules.notepad.boldTitle", "toolboxes.modules.notepad.italicTitle", "toolboxes.modules.notepad.underlineTitle", - "toolboxes.modules.notepad.paragraphTitle", + "toolboxes.modules.notepad.strikeTitle", "toolboxes.modules.notepad.headingTitle", + "toolboxes.modules.notepad.listGroupLabel", "toolboxes.modules.notepad.bulletListTitle", "toolboxes.modules.notepad.numberListTitle", "toolboxes.modules.notepad.colorGroupLabel", diff --git a/website/public/data/site.json b/website/public/data/site.json index 101715b..3730639 100644 --- a/website/public/data/site.json +++ b/website/public/data/site.json @@ -210,8 +210,9 @@ "boldTitle": "Gras", "italicTitle": "Italique", "underlineTitle": "Souligné", - "paragraphTitle": "Paragraphe", + "strikeTitle": "Barré", "headingTitle": "Titre", + "listGroupLabel": "Listes", "bulletListTitle": "Liste à puces", "numberListTitle": "Liste numérotée", "colorGroupLabel": "Couleurs", diff --git a/website/src/features/toolboxes/modules/NotepadModule.jsx b/website/src/features/toolboxes/modules/NotepadModule.jsx index 5309946..2d06377 100644 --- a/website/src/features/toolboxes/modules/NotepadModule.jsx +++ b/website/src/features/toolboxes/modules/NotepadModule.jsx @@ -1,5 +1,6 @@ // Rôle : fournit l'outil bloc-notes riche avec annotations dessinées. import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { CompactDropdown } from "../../../components/CompactDropdown.jsx"; import { DrawingControls, FormattingColorDropdown } from "./DrawingControls.jsx"; import { DrawingOverlay } from "./DrawingOverlay.jsx"; @@ -56,6 +57,56 @@ function ToolbarButton({ active, title, children, onClick }) { ); } +function ListTypeDropdown({ textContent, activeFormats, onCommand }) { + return ( + ( + + )} + > + {({ close }) => ( + <> + + + + )} + + ); +} + export function NotepadModule({ toolboxId, moduleId, context }) { const storedData = context.getModuleData(toolboxId, moduleId, { text: "" }); const normalizedData = useMemo(() => context.normalizeNotepadData(storedData), [context, storedData]); @@ -76,7 +127,7 @@ export function NotepadModule({ toolboxId, moduleId, context }) { bold: false, italic: false, underline: false, - paragraph: false, + strikeThrough: false, heading: false, bulletList: false, numberList: false @@ -104,7 +155,7 @@ export function NotepadModule({ toolboxId, moduleId, context }) { const selection = document.getSelection(); if (!editor || !selection?.rangeCount || !editor.contains(selection.anchorNode)) { setActiveFormats((current) => Object.values(current).some(Boolean) - ? { bold: false, italic: false, underline: false, paragraph: false, heading: false, bulletList: false, numberList: false } + ? { bold: false, italic: false, underline: false, strikeThrough: false, heading: false, bulletList: false, numberList: false } : current); return; } @@ -113,7 +164,7 @@ export function NotepadModule({ toolboxId, moduleId, context }) { bold: queryCommandState("bold"), italic: queryCommandState("italic"), underline: queryCommandState("underline"), - paragraph: block === "p" || block === "div", + strikeThrough: queryCommandState("strikeThrough"), heading: block === "h3" || block === "heading 3", bulletList: queryCommandState("insertUnorderedList"), numberList: queryCommandState("insertOrderedList") @@ -206,6 +257,10 @@ export function NotepadModule({ toolboxId, moduleId, context }) { runCommand("formatBlock", tag); } + function toggleHeading() { + applyBlock(activeFormats.heading ? "p" : "h3"); + } + function applyTextColor(color) { setTextColor(color); runCommand("foreColor", color); @@ -253,12 +308,11 @@ export function NotepadModule({ toolboxId, moduleId, context }) { runCommand("bold")}>B runCommand("italic")}>I runCommand("underline")}>U - applyBlock("p")}>P - applyBlock("h3")}>H - runCommand("insertUnorderedList")}>• - runCommand("insertOrderedList")}>1. + runCommand("strikeThrough")}>S + T
+