Drag handles don't appear until editor is clicked on some notes

[reddpy]

Description

On some notes (e.g. a freshly created "tester" note), the draggable block grip icons don't appear when hovering over blocks until the user clicks into the editor. On other notes with more content (e.g. "Product Roadmap"), they appear immediately on load.

Root Cause

In plugins.tsx, the DraggableBlockPlugin receives editorContainerRef.current as a prop:

const editorContainerRef = useRef<HTMLDivElement>(null)
// ...
<DraggableBlockPlugin anchorElem={editorContainerRef.current} />

On first render, useRef returns { current: null }. The ref isn't populated until React attaches it to the DOM after the render completes. Since editorContainerRef.current is read during render (not inside an effect), the plugin receives null and returns early:

if (!anchorElem) {
  return null
}

Notes that trigger additional re-renders on load (e.g. via content migration or complex state updates) cause the plugin to re-render with the now-populated ref, masking the bug.

Fix

Convert editorContainerRef from useRef to a callback ref with useState, so setting the DOM element triggers a re-render:

const [editorContainer, setEditorContainer] = useState<HTMLDivElement | null>(null)
// ...
<div ref={setEditorContainer} className="relative">
// ...
<DraggableBlockPlugin anchorElem={editorContainer} />

Files

• src/components/editor/plugins.tsx