Studio (@monaco-editor/react via the AMD loader) and GraphiQL (@graphiql/react,
bundled ESM) ran as two separate Monaco instances on one page. Each injects
Monaco's global CSS (.monaco-editor layout rules and .mtk* theme classes), which
collide: after visiting GraphiQL the SQL editor's wrapper was reflowed to a ~5px
slit and its syntax colors swapped to GraphiQL's theme.
- Import monaco-editor once and hand it to loader.config({ monaco }) so the bundler
dedupes GraphiQL's copy with ours -> one instance, one CSS, one theme.
- Set up Monaco workers for the bundled instance (lib/monaco-setup).
- GraphiQL imports graphiql.css (UI only) instead of style.css (which bundles a
second Monaco CSS copy), and uses the primary 'supabase' theme.
- Neutralize Monaco's runtime-injected '.monaco-editor{position:absolute!important}'
rule which otherwise collapses the @monaco-editor/react wrapper.
Alaister Young
1f0abede5d