Feature: proposal for Lexical Devtools

[Aemulatio]

Hi. First of all thank for your framework, its great! I'm working with lexical and when creating some intricate logic I want to see current state of the lexical (e.g. json format) for that I create a temporary button which help me to get it.. Sooo, it would be amazing to see devtools browser extension in the future.

As I think the most hard part is get all instances on the page. Maybe somehow get all namespaces (if they are unique) and getting data for each of them.

[StyleT]

Hello! I think it's on the roadmap, and personally I wanted to work on it if no one takes it on first.

[StyleT]

This one is in progress: #5747 #5830

[StyleT]

Development plan (v1, MVP):

• [x] Scaffold a new cross-browser web extension which works with Firefox, Chrome, Edge, and Safari.

  5747

• [x] Port the existing inline ASCI Lexical state tree representation to the extension.

  5830

• [x] @StyleT Build interactive selection of the editor from the DevTools panel

  5926

• [x] @StyleT "Prettify" UI so it's MVP worthy

  5929

• [x] @StyleT Register (& share access with Core Team) developer accounts in:
  • [x] Chrome Web Store ($5 one time fee)
  • [x] Apple Developer Program ($100/mo)
  • [x] Firefox AMO (free) https://addons.mozilla.org/en-US/firefox/addon/lexical-developer-tools/
  • [x] Edge Store In review
• [x] @StyleT Build a CI pipeline within our Github Actions which handles publishing new extension versions to their respective web extension stores and publish v1 to the respective stores

  5924

• [ ] [Up for grabs] Write extension tests and TreeView tests

Development plan (v2):

• [x] [Up for grabs] Support nested editors. Ex: caption within image node
• [ ] @Sahejkm Create centralized logging/error handling service within extension so errors are handled universally from user standpoint as well as collected to the central place
• [ ] [Up for grabs] Create a more interactive representation of the Lexical state tree, akin to the Component view within React Developer Tools.
  • [ ] Respective tree nodes should be collapsible or expandable.
  • [ ] Respective tree nodes should highlight the relevant DOMNode on hover of the Lexical Node.
  • [ ] Add slide out panel with all properties on the node.
  • [ ] Add a view for the current selection.
  • [ ] Add the ability to time-travel between different editor states.
  • [ ] Add a log of all Lexical commands and their respective payloads.
  • [ ] View should be performant even for larger Lexical state trees.
  • [ ] View should have a suite of unit and E2E tests which test for basic Lexical states.
  • [ ] Add details of editor config.
• [ ] [Up for grabs] Add the extension to each of our test browser environments, so we can better debug failing E2E tests.

See also 1st attempt on extension creation here:

• Issue: #2127
• Deprecation PR: #4023

[lacroixdavid1]

I'm glad to be one of the first users to install this. Great work, don't give up guys.