feat: Add esquery selector textfield & highlighting of matched code

[pkerschbaum]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request?

MVP for esquery selector playground (#79): textfield to enter selectors, matching code get's highlighted:

Future ideas:

• add matches count, tooltips for matches, or syntax highlighting of the selector itself like https://regexr.com/

What changes did you make? (Give an overview)

• add reusable component TextField, styled similar to Button
• add textfield for esquery selector in first (left) panel
• add switch to nav bar to toggle the esquery selector textfield
  • is by default off --> people need to opt-into displaying the esquery selector textfield
• add Codemirror extension + CSS to highlight text ranges via its "Decoration" feature
• if the esquery toggle is enabled, and the esquery selector matches nodes
  • highlight text ranges in the editor
  • highlight nodes in the AST tree tool

Related Issues

Fixes #79

Is there anything you'd like reviewers to focus on?

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: pkerschbaum / name: Patrick Kerschbaum (64ba4af, 9483a16, dadf787, a8952bb, 1c1cc9e, f59a1a3, ce53a3f, 63d4844, 9cb29bd, 9b99e3f, 4d10844, 167e653, 857cc38, 3460511, 3611c38, a614ef4, 4ec619d, c1edbd0, a3548e6, 4cd9966)

[netlify]

✅ Deploy Preview for eslint-code-explorer ready!

Name	Link
🔨 Latest commit	4cd9966
🔍 Latest deploy log	https://app.netlify.com/sites/eslint-code-explorer/deploys/67b785359ea6cf00085e6022
😎 Deploy Preview	https://deploy-preview-80--eslint-code-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nzakas]

Thanks for putting this together. Some notes on the UI:

1. I don't think having a textbox span the entire width of the app is the right way to go. I was thinking it should be inside one of the panes.
2. If we include ESQuery, it should work for all languages, not just JavaScript, so I don't think toggling in the language dropdown is the right location. Instead, what about adding a button that is next to the theme button in the toolbar?
3. Highlighting the text in the editor is great. I think we also need to highlight the nodes in the tree from the start.

For some perspective, check out the typescript-eslint playground that has an ESQuery filter:
https://typescript-eslint.io/play/

[amareshsm]

How about placing the ESQuery search option on the left pane, as shown in the image below?

[pkerschbaum]

sounds good, will do!

[pkerschbaum]

I implemented all suggestions:

• textbox is now in the left panel
• esquery selector applies to all languages (didn't know that is possible, had to read through https://eslint.org/blog/2024/07/whats-coming-next-for-eslint/ etc ^^)
• the nodes in the tree view (accordions) are also highlighted now (border: width increase + primary color)

In order to have 1 place to apply the match nodes via the esquery selector, I added a useAST hook where the JS/CSS/Markdown/JSON code-to-AST parsing happens now.

The esquery matched nodes need to be prop-drilled everywhere, and the accordion highlighting is duplicated. That's not ideal but I think in the future we could refactor the code anyways to get the accordion code generalized at a central place.

[pkerschbaum]

@nzakas @amareshsm plz re-review :)

[nzakas]

@pkerschbaum This is looking really nice! A few notes from playing around with it:

• I think the "Show ESQuery Selector" toggle is unnecessary. Let's just leave the textbox there.
• The focus color for the textbox should be one of the purple shades in light mode (right now it's black, which looks very stark).
• It seems like it would be helpful to shade the textbox background reddish (check the available colors in our theme stylesheet) when there are no matches. Otherwise, it's not clear that nothing matches.
• When I type "Program" in the JS view, the node is not highlighted on the right. (I checked all of the other languages and the root node is correctly highlighted, so not sure why JS is special.)
• When I first opened the app and hit "Show ESQuery Selector", it crashed. I believe this is the same issue as Bug: New languages don't work #76, where something new is added to the state and a user who has already visited the app and has state stored in localStorage gets a crash. I think be removing the toggle we'll avoid this problem because we won't be changing what's stored in the state.

[amareshsm]

Looks great! In addition to Nzaka's feedback, I’ve listed a couple of minor points below.

1. When I type a program in the ESQuery Selector, the code gets highlighted, but the program node isn't highlighted in the AST preview.

2. Let's add a placeholder text to the ESQuery Selector text field.

[pkerschbaum]

thx for review!

1. I removed the toggle.
2. I fixed the issue that the root node of JS AST tree view would not get highlighted (forgot 1 place to put the logic - we really need to unify some logic ^^)
3. That dark focus outline is currently aligned with how the focus looks like for all other buttons - to be consistent. Still, do you want me to change it to purple shade?
   
4. I added the red background if the selector does not match anything; as destructive of the available tailwind colors was too harsh, see screenshot...
   ...so I added one of the codemirror-themes.css as nonmatchingEsquerySelector tailwind color:
   
5. I could not reproduce the crash - but I made the access onto the new state property more safe, hope that avoids it.

[pkerschbaum]

Also added the placeholder

@nzakas @amareshsm plz re-review :)

[amareshsm]

That dark focus outline is currently aligned with how the focus looks like for all other buttons - to be consistent. Still, do you want me to change it to purple shade?

+1 with updating the color to one of the purple shades to align with the design we use across other ESLint sites. We’re using the color shade --color-primary-800 in other parts of the site.

we can this change in separate PR also.

[nzakas]

@pkerschbaum no need to ask for reviews, we get the notifications. 😄 We just have a lot to get through every day so your patience is appreciated.

Ah, I hadn't even noticed that the focus outline was the same in other form controls. We can leave it as-is for now. No need to bundle unrelated changes in this PR.

Let's be sure to stick to the colors that are already in this file:
https://github.com/eslint/code-explorer/blob/main/src/codemirror-themes.css

These are all of our theme colors and we don't want to stray outside of that. I think one of the color-rose values would work for the textbox (though we may need a different color for dark mode).

Overall this is looking really good.

[pkerschbaum]

I implemented the rose-red highlighting when the esquery selector has no matches.
I kept the black focus outline - I suggest to change that in a followup PR for all inputs together 👍
So, should be ready for re-review

[amareshsm]

In JSON language, when I enter "STRING" in the ESQuery selector, it causes the UI to break.

[pkerschbaum]

In JSON language, when I enter "STRING" in the ESQuery selector, it causes the UI to break.

damn, didn't see that... fixed with 4cd9966

[nzakas]

This is looking so good!

There's one strange behavior I found: When the ESQuery selector has no matches, the background turns reddish but only if the cursor isn't over the textbox. If the cursor is over the textbox, the background turns a lighter color and the reddish color is lost.

I think the reddish color should stay regardless of mouse position. What do you think?