Add table of contents use function without plugin or UI

[zswaff]

Adapted directly from the react version with minimal changes.

In theory we could add more so that there is a builtin UI (like this) but this is all pretty implementation-specific. In our project we will want some of this functionality (scroll on click) but obviously different UI. How do you usually like to handle this sort of thing?

---

Tested in our project. One easy way to test here is just to add it to the playground and do something like

const toc = useTableOfContents(editor)
watch(toc, () => {
  console.log(toc.value)
})

You will see the any update to any heading print the expected changes.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 7:31am
lexical-vue-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 7:31am