Graphiql: proposal: Improved hover formatting for monaco and vscode

Created on 23 Apr 2020  路  9Comments  路  Source: graphql/graphiql

getHoverInformation in graphql-language-service-interface could give us more than it does now, which is two very nicely generated strings. ours generates a static text string, but most implementations add special markdown to provide a nicer look and feel for both vscode extensions and our monaco mode's hover items.

both vscode hover provider and monaco hover provider expect arrays of markdown strings. we are in great luck!

the necessary markdown is actually quite limited, because it's just a matter of adding block formatting to the top line and a few other tricks. here's how typescript does it: https://github.com/microsoft/monaco-typescript/blob/master/src/languageFeatures.ts#L425

if you introduce this capability to the getHoverInformation function, you'll be able to test it in both the monaco example, by testing with the vscode-graphql extension, etc.

this is a good "getting started" issue if you are looking to learn how to work with the monaco mode, vscode extensions, and/or the monaco branch for GraphiQL itself.

good first issue ide extensions monaco proposal

Most helpful comment

@harshithpabbati when you hover over code in your editor, our output is very plain, whereas hover dialogs for other languages using monaco or vscode are much nicer.

as it turns out, thats just a matter of adding some markdown to strings that are currently dynamically generated in plaintext. so, to accomplish this goal, the only changes you would make would be to getHoverInformation

Ok, cool. I get it now. I will start working on it :)

All 9 comments

@acao I didn't get this. Can you explain to me a bit more?

@harshithpabbati when you hover over code in your editor, our output is very plain, whereas hover dialogs for other languages using monaco or vscode are much nicer.

as it turns out, thats just a matter of adding some markdown to strings that are currently dynamically generated in plaintext. so, to accomplish this goal, the only changes you would make would be to getHoverInformation

@harshithpabbati when you hover over code in your editor, our output is very plain, whereas hover dialogs for other languages using monaco or vscode are much nicer.

as it turns out, thats just a matter of adding some markdown to strings that are currently dynamically generated in plaintext. so, to accomplish this goal, the only changes you would make would be to getHoverInformation

Ok, cool. I get it now. I will start working on it :)

@acao, I am really confused. Can you give me some suggestions like what could be added?

we just need to add similar markdown to the generated string. getHoverInformation is a function that generates a string, and currently its in plaintext, and now we need to use markdown. See the linked example for more information

@secmohammed this would be a great task for you to work on!

@acao Can i work on this issue ?

@sakshamb2113 of course, always feel free to open a PR. i'm looking into it now

@acao Can I take up this issue?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

acao picture acao  路  3Comments

sgrove picture sgrove  路  4Comments

Ahkari picture Ahkari  路  4Comments

lielran picture lielran  路  3Comments