2.0 KiB
title, type, created, status, route
| title | type | created | status | route |
|---|---|---|---|---|
| fix-drag-handle-visibility | bugfix | 2026-05-25 | done | 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 stylesmemento-note/components/rich-text-editor.tsx-- Already uses DragHandleExtension and drag-handle-react (confirmed on disk)
Tasks & Acceptance
Execution:
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
Suggested Review Order
memento-note/app/globals.css:1087-1135-- CSS changes only; verify cascade correctness