[lexical-devtools] The new collapsible node tree

[MaxPlav]

This diff is inspired by the react dev tools extension and suggests a lexical node tree for the dev tools extension mentioned in https://github.com/facebook/lexical/issues/5675. The nodes tree is built on top of https://github.com/dgreene1/react-accessible-treeview. Currently, the tree can expand and collapse on a user click and hightlight the appropriate node in the lexical editor. The selected lexical node details and lexical selection details are displayed on the right panel. The availability of the new tree is controlled by the env variable VITE_COLLAPSIBLE_TREE=1 in lexical-devtools package.

Testing on the dev environment:

1. Go to lexical-devtools package.
2. Set VITE_COLLAPSIBLE_TREE=1 in .env.development or .env.development.local.
3. Run npm run dev.

https://github.com/user-attachments/assets/3699139c-0151-482d-bb93-531a99577378

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 9:24pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 9:24pm

[github-actions[bot]]

size-limit report 📦

Path	Size
lexical - cjs	29.05 KB (0%)
lexical - esm	28.86 KB (0%)
@lexical/rich-text - cjs	37.39 KB (0%)
@lexical/rich-text - esm	28.33 KB (0%)
@lexical/plain-text - cjs	36.02 KB (0%)
@lexical/plain-text - esm	25.6 KB (0%)
@lexical/react - cjs	39.29 KB (0%)
@lexical/react - esm	29.77 KB (0%)

[etrepum]

@MaxPlav Is there a reason this is still in draft? What's left to do? It seems a bit odd to make it an environment toggle instead of either using it by default or having a setting in the UI somewhere to turn it on or off, but otherwise at a glance it looks like this might be usable in its current state.