mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08: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>
39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import { CodeEditor } from './CodeEditor'
|
|
import { render } from '@/tests/helpers'
|
|
|
|
/**
|
|
* CodeEditor applies a default `h-full` so editors with no explicit height fill their container
|
|
* (GraphiQL, etc.). Callers that DO set a height (e.g. the email template editor's `h-96`) must
|
|
* win — otherwise the editor collapses to a single line.
|
|
*
|
|
* This regressed once already: #47339 appended the default as `cn(className, 'monaco-editor',
|
|
* 'h-full')`, and tailwind-merge keeps the *last* conflicting height utility, so the trailing
|
|
* `h-full` clobbered caller heights. #47350 fixed it by passing `className` last. These tests
|
|
* lock that ordering in.
|
|
*
|
|
* The `<div className={...}>` that receives the class is rendered by @monaco-editor/react before
|
|
* Monaco loads, so it's present in jsdom without a working editor.
|
|
*/
|
|
describe('CodeEditor height class precedence', () => {
|
|
const getEditorEl = (container: HTMLElement) => container.querySelector('.monaco-editor')
|
|
|
|
it('lets a caller-supplied height win over the default h-full (regression #47350)', () => {
|
|
const { container } = render(<CodeEditor language="pgsql" className="h-96" />)
|
|
|
|
const editor = getEditorEl(container)
|
|
expect(editor, 'editor wrapper should render').toBeTruthy()
|
|
expect(editor).toHaveClass('h-96')
|
|
expect(editor, 'default h-full must not override the caller height').not.toHaveClass('h-full')
|
|
})
|
|
|
|
it('falls back to the default h-full when the caller sets no height', () => {
|
|
const { container } = render(<CodeEditor language="pgsql" />)
|
|
|
|
const editor = getEditorEl(container)
|
|
expect(editor, 'editor wrapper should render').toBeTruthy()
|
|
expect(editor).toHaveClass('h-full')
|
|
})
|
|
})
|