feat: menu contextuel au highlight de texte — toolbar 4 lignes façon Notion (v7.62.0)
- Toolbar de sélection sous le surlignage : ligne de style (T + type de bloc dynamique → sous-menu Turn into), A/B/I/U/T barré/Tx, lien/surlignage/ code/équation/…, Comment + Ask AI, section grise Skills (4 actions) et pied « Edit with AI » (Alt+⇧+E) ; positionnée sous la sélection (au-dessus si manque de place), fermée au clic hors sélection - « … » → menu contextuel de bloc existant (recherche « Search actions… », groupe Text, 10 actions + raccourcis, pied auteur/heure/taille) - Info-bulle claire à droite des éléments du menu : data-tooltip-html + classe .tooltip-light dans le tooltip global (app.js) - Persistance du formatage inline : sérialiseur gtMd() (DOM formaté → source markdown) branché sur sync() ; mdEsc() rend __…__ (u), ==…== (mark) et $$…$$ (équation inline KaTeX, data-tex conservé) - Fixes racine : askAI(idx) écrasé par askAI() → askAIBlock(idx) (menu de bloc, Ctrl+J, Alt+⇧+E) ; ed.__x (Alpine v2) inexistant sous v3 → _xed() via _x_dataStack[0] (showFmt/hideCommentBtn/mentions ne s'exécutaient jamais) ; ancre de sélection nœud élément gérée ; checkMd() appelé avec un id au lieu de l'index (exception à chaque barre d'espace) - Tests : tests/test_v762_selection_toolbar.py (roundtrip gtMd/mdEsc sous node) + e2e/v762_selection_toolbar.spec.js (structure, sous-menus, géométrie, persistance bold/highlight après reload) ; suite complète 1368 passed / 0 failed, ruff OK, OpenAPI régénérée 7.62.0 (525 chemins)
This commit is contained in:
+120
-9
@@ -2915,35 +2915,146 @@ button.breadcrumb-current { max-width: 260px; }
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* FORMAT TOOLBAR (FLOATING) */
|
||||
/* FORMAT TOOLBAR (FLOATING) — menu contextuel au highlight (v7.62, façon Notion) */
|
||||
.format-toolbar {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1px;
|
||||
min-width: 216px;
|
||||
max-height: calc(100vh - 16px);
|
||||
overflow-y: auto;
|
||||
background: var(--bg-modal);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
padding: 4px 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.format-toolbar button {
|
||||
width: 30px;
|
||||
.format-toolbar .ft-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.format-toolbar .ft-item {
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
padding: 0 7px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.format-toolbar button:hover {
|
||||
.format-toolbar .ft-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
.format-toolbar .ft-item svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Ligne 1 : style de texte (libellé du type de bloc + sous-menu) */
|
||||
.format-toolbar .ft-style {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.format-toolbar .ft-style-ico {
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.format-toolbar .ft-style-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.format-toolbar .ft-caret {
|
||||
color: var(--text-dim);
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* « A » : couleur du texte (barre colorée sous la lettre) */
|
||||
.format-toolbar .ft-a-letter {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
.format-toolbar .ft-a-letter::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
right: 1px;
|
||||
bottom: -4px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent);
|
||||
}
|
||||
.format-toolbar .ft-tx,
|
||||
.format-toolbar .ft-code-ico {
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
.format-toolbar .ft-hl {
|
||||
border-radius: 2px;
|
||||
padding: 0 3px;
|
||||
background: rgba(255,197,61,.28);
|
||||
}
|
||||
.format-toolbar .ft-more {
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Séparateurs, groupe « Skills », pied de page */
|
||||
.format-toolbar .ft-sep {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 5px 2px;
|
||||
}
|
||||
.format-toolbar .ft-group {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
padding: 3px 7px 2px;
|
||||
cursor: default;
|
||||
}
|
||||
.format-toolbar .ft-skill {
|
||||
height: 26px;
|
||||
justify-content: flex-start;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.format-toolbar .ft-foot {
|
||||
height: 26px;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.format-toolbar .ft-foot kbd {
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Info-bulle des éléments du menu de sélection : bulle claire, à droite */
|
||||
.tooltip.tooltip-light {
|
||||
background: #ffffff;
|
||||
border-color: #e3e3e3;
|
||||
color: #191919;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
|
||||
white-space: normal;
|
||||
max-width: 240px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.tooltip.tooltip-light em {
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
/* EDITOR STATUSBAR */
|
||||
.editor-statusbar {
|
||||
@@ -3643,7 +3754,7 @@ button.breadcrumb-current { max-width: 260px; }
|
||||
.slash-menu { width: 90vw; max-width: 90vw; left: 5vw !important; }
|
||||
|
||||
/* ── Format Toolbar ── */
|
||||
.format-toolbar { left: 8px !important; right: 8px; flex-wrap: wrap; justify-content: center; }
|
||||
.format-toolbar { left: 8px !important; right: 8px; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
|
||||
Reference in New Issue
Block a user