feat(@lexical/devtools): Added TreeView rendering instead of a simple textarea #5830
Conversation
facebook-github-bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
size-limit report 📦
|
StyleT
force-pushed
the
feature/devtools-core
branch
from
265eb4a
to
9916b80
Compare
StyleT
force-pushed
the
feature/devtools-core
branch
from
9916b80
to
f20069d
Compare
StyleT
force-pushed
the
feature/devtools-core
branch
from
f20069d
to
10e09b1
Compare
StyleT
requested review from
zurfyx,
fantactuka,
acywatson,
Fetz and
ivailop7
as code owners
|
|
||
| return false; | ||
| }, | ||
| COMMAND_PRIORITY_HIGH, |
There was a problem hiding this comment.
You probably want this to be the highest priority (CRITICAL) to have higher confidence it'll be executed. On a related note, there're some changes commands won't be logged if any plugin is added dynamically and extension (extension is initialized before plugin is enabled). Although I'd argue it should be very rare scenario
There was a problem hiding this comment.
I think we shall add your 2nd concern to the refresh procedure (I'll create issue)
Regarding criticality - I just moved this code from existing TreeView, but your point sounds right, will update it
| const newState = [...state]; | ||
| newState.push({ | ||
| payload, | ||
| type: command.type ? command.type : 'UNKNOWN', |
There was a problem hiding this comment.
nit: command.type ?? 'UNKNOWN'
There was a problem hiding this comment.
This change causes error in WWW build, so leaving as is:
node scripts/build.js --www --prod
/home/runner/work/lexical/lexical/node_modules/@ampproject/rollup-plugin-closure-compiler/dist/index.js:1571
[33](https://github.com/facebook/lexical/actions/runs/8604009341/job/23577172760?pr=5830#step:9:34)
reject(new Error(`Google Closure Compiler exit ${exitCode}: ${stdErr}`));
ERROR - [JSC_LANGUAGE_FEATURE] This language feature is only supported for ECMASCRIPT_***0***0 mode or better: Nullish coalescing.
| onMessage('generateTreeViewContent', (message) => { | ||
| const editor = queryLexicalEditorByKey(message.data.key); | ||
| if (editor == null) { | ||
| throw new Error(`Can't find editor with key: ${message.data.key}`); |
There was a problem hiding this comment.
Q: what happens when extension throws?
There was a problem hiding this comment.
Error will be passed to the caller side (devtools tab) and there we show message to the used at the top of the page now.
It's lame, so better error/log system shall be in place, but not in this PR :P I'll create issue for this
There was a problem hiding this comment.
Added to the plan here: #5675 (comment)
StyleT
force-pushed
the
feature/devtools-core
branch
from
10e09b1
to
7cbbc71
Compare
StyleT
force-pushed
the
feature/devtools-core
branch
from
7cbbc71
to
f9017fd
Compare
List of changes:
@lexical/devtools-corethat will contain all UIs for Lexical debugging. As we may want to use them outside of the extension (like nowTreeViewis a part of the@lexical/react)EditorSetOptionstype fromlexicalpackageFeature demo in Chrome:
Screen.Recording.2024-04-04.at.6.38.48.PM.mov
Feature demo in Firefox:
Screen.Recording.2024-04-04.at.6.46.13.PM.mov