Graphiql: Plugin: allow disabling built-in keybindings

[NiklasBr]

The search toolbar captures CRTL-F and prevents me from using the regular browser search feature. I would like to disable it but can't figure out how to do it.

Why would I like to do this? A few reasons:

• It does not save the searched string so that if I want to refine my search it forces me to start from the beginning
• It does not allow me to look for the next/previous results using CTRL-G/CTRL-SHIFT-G
• It appears in a non-standard location. In Firefox the search bar always appears on the bottom, but these are almost-but -not-really on the top.
• It has no visual indication on whether or not there are any results until I press enter/return (which will clear the search input in GraphiQL forcing me to re-write the entire adjusted search string again if it was not found.

[acao]

thanks, this is all great feedback for the new major version of GraphiQL

[NiklasBr]

So, no way to disable it then?

[acao]

I hate to say it, but currently there is not. It seems the root of your issue is more with the statically defined keyboard shortcuts than anything? I would like to make sure both of these things are extensible in the new version of GraphiQL, but with 0.13.x we probably won't be able to introduce anything for this. (edit: I see the root of your issue is the UX of the search bar)

Your only way to ameliorate this currently would be to fork the project, unfortunately. :(((

There is a sensible way we could fix this in a PR that wouldn't necessitate a new major version. Currently, the CodeMirror extraKeys config for Cmd-F and other key combinations you mention are set statically for each of the core editor components. We could potentially allow users to override these completely using a prop at the GraphiQL component level. I'll confer with other maintainers whether this is sensible for GraphiQL 0.13, since it will be a while til the new GraphiQL will be released, and we are trying to limit new configuration features so we can focus on the new architecture.

This could solve a number of issues in addition to yours, and wouldn't necessitate disabling the search bar, which seems to be the relatively more ideal solution to your problem?

In addition to overriding key shortcuts as a potential sensible temporary solution, you have specified several major UX issues with the search bar that are worth consideration, but are more likely for the new version.

[benjie]

If we could just do a simple extraKeys merge, I'd say go for it. However, it seems that each editor has its own extraKeys so we'd have to surface variablesExtraKeys, editorExtraKeys, resultsViewerExtraKeys and also potentially concern ourselves about how those functions would get access to either the relevant component they're defined in, or the main editor component. I think this complicates the v0.x API too much, alas, so unless someone can come up with a clean and small solution that's useful to a sufficiently large user-base I think it will have to wait for v1.x, and I'll have to regretfully agree that the best approach is to fork the project 😞

[acao]

Ah my bad, I should've been more specific. I'm referring to these static values here:

https://github.com/acao/graphiql/blob/ide-monorepo/packages/graphiql/src/components/QueryEditor.js#L150
https://github.com/acao/graphiql/blob/ide-monorepo/packages/graphiql/src/components/VariableEditor.js#L134
https://github.com/acao/graphiql/blob/ide-monorepo/packages/graphiql/src/components/ResultViewer.js#L90

They are the same across all components. So the idea would be a static props.defaultExtraKeys object that would be merged with the component specific extraKeys.

therefore, you could pass <GraphiQL defaultExtraKeys={{ 'Cmd-F': null }} />

[acao]

As you can see, this is why we are hoping to re-architect GraphiQL, as these kinds of customization needs are increasingly common

[benjie]

Yeah, I evaluated those. For adding text commands it’s viable (but unnecessary?), and for disabling keys viable too, but for passing functions it’s less so IMO; and only letting it override certain keys would feel like an awkward limitation - for example I’d like to replace the key binding for prettier. I don’t think we should add a workaround now that will be replaced by a keybinding hook in the plugin system soon unless there’s very broad support for it.

[acao]

here's a hack, but this should be a prop

ts const editor = GraphiQL.getQueryEditor() editor.setOption(`extraKeys`, { ...(editor.options.extraKeys || {}), "CTRL-F": () => // do something or no-op to disable codemirror handing this key, })