Support for IntelliJ themes

[scordio]

Would you consider adding support for the IntelliJ themes?

I'm particularly interested in the dark one, although there are also the light, high-contrast, and Darcula variants (see also #597 (comment)).

If yes, I'd be happy to submit a PR!

[vikashkrdeveloper]

Hey @scordio

I'd love to work on this! I’ll start by adding support for the IntelliJ Dark theme, aiming to maintain consistency with the original look and feel. Once that's solid, I can also explore other variants, such as Darcula, Light, and High Contrast.

Please let me know if you have any preferences or existing work I should be aware of before I begin. Excited to contribute!

Would you consider adding support for the IntelliJ themes?

I'm particularly interested in the dark one, although there are also the light, high-contrast, and Darcula variants (see also #597 (comment)).

If yes, I'd be happy to submit a PR!

[scordio]

Sure, go for it, @vikashkrdeveloper!

Reading #1545, I just don't know if a PR would gain the right traction.

[vikashkrdeveloper]

Thanks, @scordio! I totally understand - I’ll keep the scope focused and make sure the PR is clean and well-documented so it's easy to review. Even if it doesn’t gain traction right away, I hope it can be useful for the project or others in the future. Appreciate the heads-up!

Sure, go for it, @vikashkrdeveloper!

Reading #1545, I just don't know if a PR would gain the right traction.

[vikashkrdeveloper]

Hey @scordio

While setting up the project locally with Next.js 12, I encountered the following error when running yarn dev:

ReferenceError: document is not defined

This issue is caused by CodeMirror being used in a way that doesn't support server-side rendering (SSR). Since document is only available in the browser, this breaks during the initial SSR phase.

I’d love to help fix this. One common solution in Next.js 12 is to use a dynamic import with ssr: false, like so:

import dynamic from 'next/dynamic';

const CodeEditor = dynamic(() => import('./EditorComponent'), { ssr: false });

Alternatively, wrapping CodeMirror-related logic inside a useEffect ensures it runs only on the client:

useEffect(() => {
  // safe to use document here
}, []);

Do you have a preferred approach for handling client-only components in this project? I’d be happy to submit a PR based on your recommendation.

Looking forward to contributing!

[scordio]

I haven't set up the project locally yet, so it's probably best to direct the question to the core committers of this project, rather than me.

[vikashkrdeveloper]

Thanks for the quick reply - totally understandable!

Since you've not set up the project locally, I’ll direct the question to the core maintainers instead.

@scordio, would you happen to be one of the maintainers or know who would be best to contact regarding SSR compatibility with CodeMirror in this project? I’d love to help fix the document is not defined issue with either dynamic imports or a client-side-only wrapper - just want to follow your team’s preferred approach before submitting a PR.

Looking forward to contributing!

I haven't set up the project locally yet, so it's probably best to direct the question to the core committers of this project, rather than me.