[Playground] Editor UX improvement

Hello, when I am playing in Playgound, I am happy to know the api definition just hovering the mouse pointer:

And when I want to know the definition of the return type “BABYLON.TransformNode”, I couldn’t quickly go to the definition just by one click on “TransformNode”.

I believe it should be a good feature to improve developer’s speed and bring smooth developing experience.

Is there anyone who knows where the code generates the hover document?

1 Like

Hi and a warm welcome to the forum,
I have to say I very much like your post :heart_eyes: which I believe is totally in the spirit of BJS (my opinion only).

You know, one reason why I chose to go with BJS 3Y ago is this seamless approach, with a strong doc, the PG, the snippets and the immutable and unquestionnable support of both the team and this awesome community.

Yes, I also believe there are improvements that could be done in the pages of the doc and API and functionnalities in the PG (SEO, searches, better visibility on methods in the API, etc…). The only thing I’m just wondering here is how we can best link and maintain this altogether (without turning it into a factory :wink:. It doesn’t seem like an ez task. :thinking:

As for me (and I hope for the team too) any contribution and strategy to further improve what I believe to be ‘a pillar’ of the BJS framework should certainly be welcomed.

Again, welcome to our extended family and have a great day :sunglasses:

1 Like

Hey @changchunjunhao,
It’s generated from the API

I’ll bring in @RaananW to the loop, this is an interesting suggestion :slight_smile:

Under the hood we use Monaco, which is the code editor behind vscode (among other projects :-))

Anything Monaco offers we can offer. With a small caveat - we are using a relatively old version of monaco and require a bit of work to upgrade to a later one. There is a slight different here as well, as we inject the typings and not including it in your project. this is why if you press Alt+F12 (the vscode shortcut to display the definition), you will see this:

image

However, when you hover over it:

image

This is more of a “documentation display” and less “show me the other project files”.

1 Like