[Feature request]: migrate to react-codemirror

[bpoulaindev]

Migrate to react-codemirror instead of codemirror
This would provide a react component, better suited for a react app instead of building the component through a function
The current component is 300+ lines long and is getting harder and harder to maintain
Linked issue : #1029

[Its-treason]

Sounds like a good idea, this would also upgrade code-mirror to Version 6.

There are also some weird workarounds for code-mirror and Next.js Server-Side-Rendering:

bruno/packages/bruno-app/src/pages/_app.js

Lines 19 to 31 in 8ddec6b

	function SafeHydrate({ children }) {
	return <div suppressHydrationWarning>{typeof window === 'undefined' ? null : children}</div>;
	}
	function NoSsr({ children }) {
	const SERVER_RENDERED = typeof navigator === 'undefined';
	if (SERVER_RENDERED) {
	return null;
	}
	return <>{children}</>;
	}

bruno/packages/bruno-app/src/pages/Bruno/index.js

Lines 13 to 44 in 8ddec6b

	const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
	if (!SERVER_RENDERED) {
	require('codemirror/mode/javascript/javascript');
	require('codemirror/mode/xml/xml');
	require('codemirror/mode/sparql/sparql');
	require('codemirror/addon/comment/comment');
	require('codemirror/addon/dialog/dialog');
	require('codemirror/addon/edit/closebrackets');
	require('codemirror/addon/edit/matchbrackets');
	require('codemirror/addon/fold/brace-fold');
	require('codemirror/addon/fold/foldgutter');
	require('codemirror/addon/fold/xml-fold');
	require('codemirror/addon/hint/javascript-hint');
	require('codemirror/addon/hint/show-hint');
	require('codemirror/addon/lint/lint');
	require('codemirror/addon/lint/javascript-lint');
	require('codemirror/addon/lint/json-lint');
	require('codemirror/addon/mode/overlay');
	require('codemirror/addon/scroll/simplescrollbars');
	require('codemirror/addon/search/jump-to-line');
	require('codemirror/addon/search/search');
	require('codemirror/addon/search/searchcursor');
	require('codemirror/keymap/sublime');
	require('codemirror-graphql/hint');
	require('codemirror-graphql/info');
	require('codemirror-graphql/jump');
	require('codemirror-graphql/lint');
	require('codemirror-graphql/mode');
	require('utils/codemirror/brunoVarInfo');
	}

Maybe we can also think about moving from Next.js to Vite or something like this, because we are not using any Next.js features.

[bpoulaindev]

You're right @Its-treason , Next JS is better suited for SSR and SEO optimization, Vite would be lighter and faster, hence its name

[bpoulaindev]

I know the Typescript debate isn't settled yet, but i'de like to point out, this component would really benefit from having explicit types :

[bpoulaindev]

Trying out something, the following basic code can already provide the following render :

[bpoulaindev]

Progress has been made :

Could use a bit more styling in the search component, about 20 themes are available, this isn't the definitive one for dark mode. We could also include, in the future, the possibility for users to switch between all of those 20 mods.

[dan1xk]

Is there a possibility for this feature to resolve this? #1347

[bpoulaindev]

@dan1xk Absolutely, i ended up using Monaco Editor, here's the PR : Monaco Editor