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):

• Scaffold a new cross-browser web extension which works with Firefox, Chrome, Edge, and Safari.
  feat(@lexical/devtools): Added basic extension scaffolding #5747
• Port the existing inline ASCI Lexical state tree representation to the extension.
  feat(@lexical/devtools): Added TreeView rendering instead of a simple textarea #5830
• @StyleT Build interactive selection of the editor from the DevTools panel
  feat(@lexical/devtools): Added interactive editor picker #5926
• @StyleT "Prettify" UI so it's MVP worthy
  feat(@lexical/devtools): Added styling to devtools panel (#5925) #5929
• @StyleT Register (& share access with Core Team) developer accounts in:
  • Chrome Web Store ($5 one time fee)
  • Apple Developer Program ($100/mo)
  • Firefox AMO (free)
    https://addons.mozilla.org/en-US/firefox/addon/lexical-developer-tools/
  • Edge Store
    In review
• @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
  feat(@lexical/devtools): Publish pipeline added #5924
• [Up for grabs] Write extension tests and TreeView tests

Development plan (v2):

• [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: Feature: Developer Tools Web Extension #2127
• Deprecation PR: Deprecate experimental DevTools browser extension #4023