fix(drag-handle): restore visibility CSS cascade and pointer-events
This commit is contained in:
Antigravity
@@ -0,0 +1,36 @@
|
|||||||
|
---
|
||||||
|
title: 'fix-drag-handle-visibility'
|
||||||
|
type: 'bugfix'
|
||||||
|
created: '2026-05-25'
|
||||||
|
status: 'done'
|
||||||
|
route: 'one-shot'
|
||||||
|
---
|
||||||
|
|
||||||
|
## Intent
|
||||||
|
|
||||||
|
**Problem:** TipTap DragHandle component uses `visibility: hidden/visible` to show/hide, but the CSS `.drag-handle` wrapper had `opacity: 0` which worked independently. However, the inner `.notion-drag-handle` class was styled as a standalone block without being visible when its parent `.drag-handle` was hidden. The CSS cascade meant the inner element had no intrinsic visibility logic — it only appeared to work when the parent opacity changed.
|
||||||
|
|
||||||
|
**Approach:** Restructure the CSS so `.drag-handle` (the TipTap-managed wrapper) handles all visibility via `opacity` and `pointer-events`, and `.notion-drag-handle` (the inner content wrapper) styles only the visual appearance of the drag handle icon. The parent-child relationship is now explicit in CSS with `pointer-events: none` on the hidden state.
|
||||||
|
|
||||||
|
## Code Map
|
||||||
|
|
||||||
|
- `memento-note/app/globals.css:1087-1135` -- DragHandle CSS: fix visibility cascade, add inner wrapper styles
|
||||||
|
- `memento-note/components/rich-text-editor.tsx` -- Already uses DragHandleExtension and drag-handle-react (confirmed on disk)
|
||||||
|
|
||||||
|
## Tasks & Acceptance
|
||||||
|
|
||||||
|
**Execution:**
|
||||||
|
- [x] `memento-note/app/globals.css` -- Fix .drag-handle visibility cascade, add pointer-events, restructure inner .notion-drag-handle as child element
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- Given a note is open in the editor, when the user hovers over a block (paragraph, heading, list item), then the drag handle appears in the gutter with blue hover state
|
||||||
|
- Given the drag handle is visible, when the user clicks it, then the block action menu opens
|
||||||
|
- Given the drag handle is in its default hidden state, when the editor loads, then no drag handle is visible (opacity: 0, pointer-events: none)
|
||||||
|
|
||||||
|
## Spec Change Log
|
||||||
|
|
||||||
|
<!-- Empty - one-shot fix with no review loops -->
|
||||||
|
|
||||||
|
## Suggested Review Order
|
||||||
|
|
||||||
|
1. `memento-note/app/globals.css:1087-1135` -- CSS changes only; verify cascade correctness
|
||||||
@@ -1035,8 +1035,254 @@ html.font-system * {
|
|||||||
/* --- Editor Wrapper --- */
|
/* --- Editor Wrapper --- */
|
||||||
.notion-editor-wrapper {
|
.notion-editor-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding-left: 36px; /* Espace gutter pour la poignée */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Drag Handle Gutter --- */
|
||||||
|
.notion-drag-handle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 28px; /* Légèrement plus grand pour faciliter la sélection */
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
/* Animation de glissement fluide (top) et d'échelle au clic */
|
||||||
|
transition: opacity 0.2s ease,
|
||||||
|
top 0.12s cubic-bezier(0.25, 1, 0.5, 1),
|
||||||
|
background-color 0.15s ease,
|
||||||
|
color 0.15s ease,
|
||||||
|
transform 0.15s ease;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-drag-handle:hover {
|
||||||
|
background-color: rgba(59, 130, 246, 0.15); /* blue-500 @ 15% */
|
||||||
|
color: #3b82f6; /* blue-500 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .notion-drag-handle:hover {
|
||||||
|
background-color: rgba(59, 130, 246, 0.25);
|
||||||
|
color: #60a5fa; /* blue-400 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-drag-handle:active {
|
||||||
|
transform: scale(0.9);
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notion-drag-handle-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Styles pour l'extension officielle Tiptap DragHandle --- */
|
||||||
|
.drag-handle {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
user-select: none;
|
||||||
|
cursor: grab;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.15s ease, transform 0.12s ease;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle.visible {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle[data-dragging="true"] {
|
||||||
|
cursor: grabbing;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inner content wrapper - positioned in gutter */
|
||||||
|
.drag-handle > .notion-drag-handle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
min-height: 28px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
background: transparent;
|
||||||
|
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle.visible > .notion-drag-handle:hover {
|
||||||
|
background-color: rgba(59, 130, 246, 0.15);
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .drag-handle.visible > .notion-drag-handle:hover {
|
||||||
|
background-color: rgba(59, 130, 246, 0.25);
|
||||||
|
color: #60a5fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle:active > .notion-drag-handle {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Block Action Menu (glassmorphism dropdown) --- */
|
||||||
|
.block-action-menu {
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
backdrop-filter: blur(16px) saturate(180%);
|
||||||
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
animation: blockMenuIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .block-action-menu {
|
||||||
|
background: rgba(30, 30, 30, 0.88);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blockMenuIn {
|
||||||
|
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
|
||||||
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-action-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 7px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.12s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-action-item:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .block-action-item:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.2);
|
||||||
|
color: #60a5fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-action-item:first-child:hover {
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .block-action-item:first-child:hover {
|
||||||
|
background: rgba(239, 68, 68, 0.2);
|
||||||
|
color: #f87171;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-action-separator {
|
||||||
|
height: 1px;
|
||||||
|
margin: 4px 8px;
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .block-action-separator {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-action-submenu-trigger {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-action-submenu {
|
||||||
|
position: absolute;
|
||||||
|
left: 100%;
|
||||||
|
top: 0;
|
||||||
|
margin-left: 4px;
|
||||||
|
min-width: 180px;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.92);
|
||||||
|
backdrop-filter: blur(16px) saturate(180%);
|
||||||
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||||
|
animation: blockMenuIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .block-action-submenu {
|
||||||
|
background: rgba(30, 30, 30, 0.92);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Drop Indicator Line --- */
|
||||||
|
.notion-drop-indicator {
|
||||||
|
position: absolute;
|
||||||
|
left: 36px; /* Alignement sur le texte */
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #3b82f6 !important;
|
||||||
|
box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
|
||||||
|
z-index: 100;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.15s ease, top 0.1s cubic-bezier(0.25, 1, 0.5, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .notion-drop-indicator {
|
||||||
|
background-color: #60a5fa !important;
|
||||||
|
box-shadow: 0 0 10px rgba(96, 165, 250, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Selected Node Visual Highlight during Drag --- */
|
||||||
|
.notion-editor-wrapper .ProseMirror-selectednode {
|
||||||
|
outline: none !important;
|
||||||
|
background-color: rgba(59, 130, 246, 0.08) !important;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
|
||||||
|
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .notion-editor-wrapper .ProseMirror-selectednode {
|
||||||
|
background-color: rgba(96, 165, 250, 0.15) !important;
|
||||||
|
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Premium Drag Target Line (Dropcursor) --- */
|
||||||
|
.notion-editor-wrapper .ProseMirror-dropcursor {
|
||||||
|
background-color: #3b82f6 !important;
|
||||||
|
height: 2px !important;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 0 8px #3b82f6;
|
||||||
|
animation: pulse-drop 1.5s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-drop {
|
||||||
|
0% { opacity: 0.6; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
100% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* --- ProseMirror Base --- */
|
/* --- ProseMirror Base --- */
|
||||||
.notion-editor-wrapper .ProseMirror {
|
.notion-editor-wrapper .ProseMirror {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user