progressive disclosure for nested content

I'm looking for a useful editing UX for large, tree-structured content like this:

Project 1
  - Step 1
    - Explanation 1
    - Explanation 2: could be long paragraphs, too.
      - E2.1: Lots of nesting
        - with subtask
        - yet more nesting
        - [an image]
      - E2.2 nesting
  - Step 2
    - more details

My idea is to allow "local editing" that shows some depth up and down the edited area only.

E.g., while editing "Explanation 2..", I see:

  • A left vertical menu showing "Step 1, Step 2" (Step 2 being highlighted)
  • A main window where the editable list is truncated at some level with "Show more" links.
  • Clicking it might put the two "Explanation" sections onto the left pane

Example:

< [up]    |
          |
 Step 1   | Explanation 2: could be long paragraphs, too.
=Step 2=  |   E2.1: Lots of nesting
          |   > s̲h̲o̲w̲ ̲m̲o̲r̲e̲
          |   E2.2 nesting

This looks a bit similar to "progressive disclosure", but it's more like pointing a magnifier at a specific place on a large map.

Is there an existing UI pattern like this that I could research? Or is there generally a better approach for editing such a tree, especially when many individual items are larger than a few words each?

Tags: , , , , , ,