No React, just HTML + CSS + JavaScript - build a tool where I can paste in HTML in a textarea and a URL to that page in a single line input
It then parses that HTML and finds all HTML headers within it. Any that do not yet have an ID attribute have a unique one assigned to them based on the text of that heading (lowercase, spaces converted to hyphens, other characters removed)
The tool outputs two things in two new textareas: the new updated HTML with the extra ID attributes, and then a separate textarea with the following HTML - one list item for each heading:
<ul>
<li><a href="that-URL-the-user-provided#heading-id">Heading text</a></li>
...