Skip to content

Document outline + list view #111

Description

@tayebmokni

Summary

Build the document outline / list view: a left-sidebar tree of the entire block document. Each row shows indent, block icon, block title (or first text content), and context actions. Click focuses; drag-drop reorders (#107); right-click opens the same More menu as the block toolbar.

Design reference

  • docs/04-block-editor.md §3.4 (Document outline / List view)
  • docs/04-block-editor.md §15.2 (Screen reader — exposed as role="tree")

Acceptance criteria

  • Renders a flat-virtualized tree for the doc (use @tanstack/react-virtual for ≥500 rows)
  • Row shows icon + title (block title or excerpt of first text)
  • Click focuses the block in the canvas
  • Right-click opens block More menu
  • Keyboard nav: ↑/↓ moves selection, → expands, ← collapses, Enter focuses canvas
  • role="tree" with role="treeitem" and aria-level (§15.2)
  • Toggle via Cmd/Ctrl+Alt+M
  • Updates reactively as blocks are inserted/removed

Dependencies

#79

Complexity

M

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions