Capture and display info about headings associated with annotated text in HTML documents

[robertknight]

For PDFs and ebooks we now capture page number selectors and use this to display a page number on the card. This is useful to see at a glance where an annotation is in a document:

It would be nice to have something similar for HTML documents. In that context we don't have page numbers, but we could instead capture the hierarchy of headings, and then translate that into breadcrumbs. Something like:

{
  "type": "HeadingSelector",
  "headings": ["Section A", "Main heading", "Sub-heading"]
}

In this example each entry in headings is just text, but could be expanded to (type, text) tuples. eg. [["section", "Section A"], ["h2", "Main Heading"], ["h3", "Sub-heading"]].

This could then be displayed on annotation cards like:

Section A -> Main heading -> Sub-heading

With some kind of eliding or compression to make it fit the available width.

The problem of detecting the heading structure in an HTML document is hard in the general case, as documents may many different ways to indicate headings and may not use semantic elements. I suggest we limit the scope here to just a few common / recommended patterns of using semantic elements.