How to use themes with codemirror 6?

[simPod]

Hello, how do I use themes with codemirror 6?

I tried this but it does not change visual

import GraphiQLComponent from 'graphiql';
import React from 'react';

const graphQLFetcher = ...

export const GraphiQL: React.FC = () => (
  <GraphiQLComponent
    fetcher={graphQLFetcher}
    editorTheme="material"
  />
);

[acao]

GraphiQL still ships with codemirror 5 - so perhaps try codemirror 5 themes for now?

[simPod]

Ah so there's no support for v6 and I have to stay on v5, right?

[acao]

For the time being, yes. codemirror-graphql ships with support for both, but graphiql sets a hard dependency on CM 5 for now.

CC @thomasheyenbrock @imolorhe @yoshiakis I think this would be a good candidate for the 2.x graphiql, and then for 3.x we support either just monaco or both

[imolorhe]

Yes I agree. graphiql 2.x should use either monaco or CM 6. Considering monaco is more built out, I'll lean towards monaco, especially since CM5 and CM6 APIs are not compatible.

[acao]

I think I’ll start on a PR tonight, now that Thomas has moved everything to context & hooks, I will really enjoy working on GraphiQL again!

[ysulyma]

I'd be interested in implementing CM6 support—is help still needed with this? If so, if there already partial work towards it, or any gotchas to be aware of?

[acao]

@ysulyma great question! TLDR; it would be welcome! Here's a little backstory:

Earlier this year, @imolorhe added support using the legacy API in CM6 for codemirror-graphql. As I understand, that could be made to work in a more modern and compatible way with codemirror 6. My focus has been on monaco-graphql for graphiql@2, but it's been decided that graphiql@2 will probably be released with CM5 just because there is so much in play, and the redesign seemed most sought by the community. The community decision to move to monaco-graphql happened long ago but we figured it could wait until a 3.0.0 at the end of the year or so

Meanwhile, the progress of codemirror 6 this year has been fantastic, the accessibility looks almost on par now with what monaco-editor offers, so if you wanted to open a PR for codemirror 6 support in graphiql against graphiql-v2 branch, I would be all about it, and I imagine @thomasheyenbrock and @jonathanawesome would be happy with such a PR as well. You can just replace the codemirror 5 implementation outright in this PR.

Later when we add monaco editor for 3.0.0, we can see about creating a compatibility layer or at least having react hooks/providers/components/etc available for both editors