36 lines
2.0 KiB
Markdown
36 lines
2.0 KiB
Markdown
---
|
|
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 |