mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
4fa106e53c
GraphiQL (`@graphiql/react`) runs a second Monaco instance that injects
two global, page-wide styles which corrupt Studio's other editors once a
GraphiQL chunk has loaded (it persists across client-side navigation, so
a full reload hides it). After visiting GraphiQL and returning to e.g.
the SQL editor, the editor collapses to a ~5px sliver and its syntax
colors swap to GraphiQL's theme.
**Changed:**
- `monaco.css` — a higher-specificity counter-rule
(`.monaco-editor.monaco-editor { position: relative !important }`) beats
GraphiQL's runtime-injected `.monaco-editor { position: absolute
!important }`, which otherwise pulls Studio's `@monaco-editor/react`
wrapper out of flow and collapses it to ~5px.
- GraphiQL now uses the primary `supabase` Monaco theme instead of a
separate `supabase-graphql-*` theme, so the global `.mtk*` token palette
stays identical and syntax colors no longer bleed into other editors.
**Added:**
- E2E test (`monaco-graphiql-coexistence.spec.ts`) reproducing both bugs
via client-side SQL editor → GraphiQL → SQL editor navigation (a full
reload unloads the chunk and hides the bug).
- Component test (`CodeEditor.test.tsx`) guarding the height-class
precedence regression from #47339/#47350 — a caller height (e.g. the
email template editor's `h-96`) must win over the default `h-full`.
Covered as a component test since the email source editor isn't
reachable on self-hosted.
## To test
- Open the SQL editor → **Integrations → GraphiQL** → back to the SQL
editor (in-app navigation, not a reload). It should stay full height and
keep its own syntax colors.
- Confirm autocomplete still works in the SQL editor.
- `pnpm --prefix e2e/studio run e2e --
features/monaco-graphiql-coexistence.spec.ts`
- `pnpm --prefix apps/studio test -- CodeEditor.test`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved Monaco editor styling so GraphiQL no longer affects the SQL
editor’s theme or layout when navigating between them.
* Fixed editor sizing so a custom height now takes precedence over the
default full-height setting.
* Polished GraphiQL panel styling for more consistent spacing and
appearance across themes.
* **New Features**
* GraphiQL now uses the shared editor theme for better visual
consistency with Studio.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import type { editor } from 'monaco-editor'
|
|
|
|
/**
|
|
* Base Monaco editor options shared across Studio's editors so font size, indentation and
|
|
* chrome stay consistent everywhere a Monaco editor is rendered. CodeEditor layers per-instance
|
|
* options (read-only, line numbers) on top; GraphiQL (which runs its own Monaco instance) layers
|
|
* its own padding/glyphMargin on top via `editor.updateOptions`.
|
|
*
|
|
* Keep this as the single source of truth — don't redeclare these values at call sites.
|
|
*/
|
|
export const BASE_MONACO_EDITOR_OPTIONS: editor.IStandaloneEditorConstructionOptions = {
|
|
tabSize: 2,
|
|
fontSize: 13,
|
|
minimap: { enabled: false },
|
|
wordWrap: 'on',
|
|
fixedOverflowWidgets: true,
|
|
contextmenu: true,
|
|
scrollBeyondLastLine: false,
|
|
}
|
|
|
|
export const alignEditor = (editor: editor.IStandaloneCodeEditor) => {
|
|
// Add margin above first line
|
|
editor.changeViewZones((accessor) => {
|
|
accessor.addZone({
|
|
afterLineNumber: 0,
|
|
heightInPx: 4,
|
|
domNode: document.createElement('div'),
|
|
})
|
|
})
|
|
}
|