Drag and drop editor for table of contents

[jxxcarlson]

TOC-Editor

This project demonstrates a drag-and-drop editor for a hierarchical table of contents (TOC). Items can be dragged vertically and the buttons < and > permit the user to change the indentation level. Numbering is automatic.

Feedback

I’ve written this for use in another project, but am thinking it might be of some use to others. Thus I might make the module TaggedItems which manages the TOC into a library, with the app as an example of how it is used. Consequently comments on the code, API, bugs, etc. would be most welcome.

(The Github Repo)

Example

By way of example, one might have a TOC that looks like this:

1 Mount Yadaax-Vor
2 The Kraken Roars
3 The Magic Stone
4 A Quiet Pool
5 Lost on the River
6 Crossing the Desert
7 A Strange Beast

The user can rearrange it be dragging items and using the buttons (not shown) to make it look like this.

1 A Quiet Pool
2 Mount Yadaax-Vor
  2.1 The Magic Stone
  2.2 A Strange Beast
      2.2.1 The Kraken Roars
3 Lost on the River
4 Crossing the Desert

The demo app uses the drag-and-drop library annaghi/dnd-list and the module TaggedItems in the repo. The latter makes use of rose trees to number items in the list, specifically Ilias Van Peer’s zwilias/elm-rosetree and jxxcarlson/htree

Screenshots

[FranzSkuffka]

I realize now that you can not control the depth using the drag&drop interaction.

Did you try achieving this and got stuck or opted for the click-to-indent solution right away?

[jxxcarlson]

I did click-to-indent right away. It seemed to be the most natural for me in the context of a table of contents. Also, I wanted the horizontal movement to be quantized and the drag-and-drop motion to be constrained to the vertical.

[jxxcarlson]

I’ve published a package for this.

Here is an Ellie which demonstrates the drag-and-drop-feature

Quite a few changes in the API.