From b782d7f0887612085ae285c041cecb243823848d Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 8 Jun 2025 12:39:26 +0200 Subject: [PATCH 1/3] upd --- .changeset/many-ducks-visit.md | 7 +++++++ docs/migration/graphiql-5.0.0.md | 4 ++++ packages/graphiql-react/src/components/header-editor.tsx | 3 +-- packages/graphiql-react/src/components/query-editor.tsx | 3 +-- .../graphiql-react/src/components/response-editor.tsx | 2 +- .../graphiql-react/src/components/variable-editor.tsx | 3 +-- packages/graphiql-react/src/types.ts | 8 +------- packages/graphiql/src/GraphiQL.tsx | 9 +-------- 8 files changed, 17 insertions(+), 22 deletions(-) create mode 100644 .changeset/many-ducks-visit.md diff --git a/.changeset/many-ducks-visit.md b/.changeset/many-ducks-visit.md new file mode 100644 index 0000000000..eb5807ec8a --- /dev/null +++ b/.changeset/many-ducks-visit.md @@ -0,0 +1,7 @@ +--- +'@graphiql/react': minor +'graphiql': major +--- + +remove `readOnly` prop +document `keyMap` prop was removed in migration guide diff --git a/docs/migration/graphiql-5.0.0.md b/docs/migration/graphiql-5.0.0.md index 985cd2b3bd..c2150183f6 100644 --- a/docs/migration/graphiql-5.0.0.md +++ b/docs/migration/graphiql-5.0.0.md @@ -13,3 +13,7 @@ - Added new examples: [**GraphiQL x Vite**](https://github.com/graphql/graphiql/tree/graphiql-5/examples/graphiql-vite) and [**GraphiQL x Next.js**](https://github.com/graphql/graphiql/tree/graphiql-5/examples/graphiql-nextjs) - Removed examples: **GraphiQL x Parcel** and **GraphiQL x Create React App** +- UMD build is removed. Use the ESM-based CDN instead. +- Removed props + - `keyMap`. To use Vim or Emacs keybindings in Monaco, you can use community plugins. Monaco Vim: https://github.com/brijeshb42/monaco-vim. Monaco Emacs: https://github.com/aioutecism/monaco-emacs + - `readOnly` diff --git a/packages/graphiql-react/src/components/header-editor.tsx b/packages/graphiql-react/src/components/header-editor.tsx index c65ec1c279..615ef1f9f9 100644 --- a/packages/graphiql-react/src/components/header-editor.tsx +++ b/packages/graphiql-react/src/components/header-editor.tsx @@ -22,7 +22,6 @@ interface HeaderEditorProps extends EditorProps { export const HeaderEditor: FC = ({ onEdit, - readOnly = false, ...props }) => { const { @@ -51,7 +50,7 @@ export const HeaderEditor: FC = ({ useEffect(() => { const model = getOrCreateModel({ uri: HEADER_URI, value: initialHeaders }); // Build the editor - const editor = createEditor(ref, { model, readOnly }); + const editor = createEditor(ref, { model }); setEditor({ headerEditor: editor }); const disposables = [ editor.addAction({ ...KEY_BINDINGS.runQuery, run }), diff --git a/packages/graphiql-react/src/components/query-editor.tsx b/packages/graphiql-react/src/components/query-editor.tsx index 2bf263550c..d5ddf33fc6 100644 --- a/packages/graphiql-react/src/components/query-editor.tsx +++ b/packages/graphiql-react/src/components/query-editor.tsx @@ -43,7 +43,6 @@ interface QueryEditorProps extends EditorProps { export const QueryEditor: FC = ({ onClickReference, onEdit, - readOnly = false, ...props }) => { const { @@ -209,7 +208,7 @@ export const QueryEditor: FC = ({ useEffect(() => { globalThis.__MONACO = monaco; const model = getOrCreateModel({ uri: QUERY_URI, value: initialQuery }); - const editor = createEditor(ref, { model, readOnly }); + const editor = createEditor(ref, { model }); setEditor({ queryEditor: editor }); // We don't use the generic `useChangeHandler` hook here because we want to diff --git a/packages/graphiql-react/src/components/response-editor.tsx b/packages/graphiql-react/src/components/response-editor.tsx index 23d9601290..17152bd9f1 100644 --- a/packages/graphiql-react/src/components/response-editor.tsx +++ b/packages/graphiql-react/src/components/response-editor.tsx @@ -27,7 +27,7 @@ type ResponseTooltipType = ComponentType<{ word: monacoEditor.IWordAtPosition; }>; -interface ResponseEditorProps extends Omit { +interface ResponseEditorProps extends EditorProps { /** * Customize the tooltip when hovering over properties in the response editor. */ diff --git a/packages/graphiql-react/src/components/variable-editor.tsx b/packages/graphiql-react/src/components/variable-editor.tsx index 93a81df69d..a1e346e13d 100644 --- a/packages/graphiql-react/src/components/variable-editor.tsx +++ b/packages/graphiql-react/src/components/variable-editor.tsx @@ -22,7 +22,6 @@ interface VariableEditorProps extends EditorProps { export const VariableEditor: FC = ({ onEdit, - readOnly = false, ...props }) => { const { initialVariables, setEditor, run, prettifyEditors, mergeQuery } = @@ -42,7 +41,7 @@ export const VariableEditor: FC = ({ uri: VARIABLE_URI, value: initialVariables, }); - const editor = createEditor(ref, { model, readOnly }); + const editor = createEditor(ref, { model }); setEditor({ variableEditor: editor }); const disposables = [ editor.addAction({ ...KEY_BINDINGS.runQuery, run }), diff --git a/packages/graphiql-react/src/types.ts b/packages/graphiql-react/src/types.ts index bc960b0834..6162a5515b 100644 --- a/packages/graphiql-react/src/types.ts +++ b/packages/graphiql-react/src/types.ts @@ -8,13 +8,7 @@ import { SchemaSlice, } from './stores'; -export interface EditorProps extends ComponentPropsWithoutRef<'div'> { - /** - * Makes the editor read-only. - * @default false - */ - readOnly?: boolean; -} +export type EditorProps = ComponentPropsWithoutRef<'div'> export interface SchemaReference { kind: string; diff --git a/packages/graphiql/src/GraphiQL.tsx b/packages/graphiql/src/GraphiQL.tsx index 26a1d5f0f7..22d32260cb 100644 --- a/packages/graphiql/src/GraphiQL.tsx +++ b/packages/graphiql/src/GraphiQL.tsx @@ -212,7 +212,6 @@ const GraphiQLInterface: FC = ({ confirmCloseTab, className, onEditQuery, - readOnly, onEditVariables, onEditHeaders, responseTooltip, @@ -639,11 +638,7 @@ const GraphiQLInterface: FC = ({ aria-label="Query Editor" ref={editorToolsResize.firstRef} > - +
= ({ {isHeadersEditorEnabled && ( )} From e035742af4e5f2630d6cd5f4cb195594f6bd3032 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 8 Jun 2025 12:41:24 +0200 Subject: [PATCH 2/3] upd --- examples/monaco-graphql-nextjs/src/editor.tsx | 1 - packages/graphiql/src/GraphiQL.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/monaco-graphql-nextjs/src/editor.tsx b/examples/monaco-graphql-nextjs/src/editor.tsx index 75498f65f4..d626a5936d 100644 --- a/examples/monaco-graphql-nextjs/src/editor.tsx +++ b/examples/monaco-graphql-nextjs/src/editor.tsx @@ -104,7 +104,6 @@ export default function Editor(): ReactElement { model: MODEL.ts, ...DEFAULT_EDITOR_OPTIONS, smoothScrolling: true, - readOnly: false, 'semanticHighlighting.enabled': true, language: 'typescript', }), diff --git a/packages/graphiql/src/GraphiQL.tsx b/packages/graphiql/src/GraphiQL.tsx index 22d32260cb..90b963432c 100644 --- a/packages/graphiql/src/GraphiQL.tsx +++ b/packages/graphiql/src/GraphiQL.tsx @@ -70,7 +70,6 @@ const GraphiQL_: FC = ({ maxHistoryLength, plugins = [HISTORY_PLUGIN], referencePlugin = DOC_EXPLORER_PLUGIN, - readOnly, onEditQuery, onEditVariables, onEditHeaders, @@ -103,11 +102,14 @@ const GraphiQL_: FC = ({ '`keyMap` was removed. To use Vim or Emacs keybindings in Monaco, you can use community plugins. Monaco Vim: https://github.com/brijeshb42/monaco-vim. Monaco Emacs: https://github.com/aioutecism/monaco-emacs', ); } + // @ts-expect-error -- Prop is removed + if (props.readOnly) { + throw new TypeError('`readOnly` was removed.'); + } const interfaceProps: GraphiQLInterfaceProps = { // TODO check if `showPersistHeadersSettings` prop is needed, or we can just use `shouldPersistHeaders` instead showPersistHeadersSettings: showPersistHeadersSettings ?? props.shouldPersistHeaders !== false, - readOnly, onEditQuery, onEditVariables, onEditHeaders, From cb50c60af060c2ae3386d9d9c3c435ff93343452 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sun, 8 Jun 2025 12:41:37 +0200 Subject: [PATCH 3/3] upd --- packages/graphiql-react/src/components/header-editor.tsx | 5 +---- packages/graphiql-react/src/types.ts | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/graphiql-react/src/components/header-editor.tsx b/packages/graphiql-react/src/components/header-editor.tsx index 615ef1f9f9..942b0f9f99 100644 --- a/packages/graphiql-react/src/components/header-editor.tsx +++ b/packages/graphiql-react/src/components/header-editor.tsx @@ -20,10 +20,7 @@ interface HeaderEditorProps extends EditorProps { onEdit?(value: string): void; } -export const HeaderEditor: FC = ({ - onEdit, - ...props -}) => { +export const HeaderEditor: FC = ({ onEdit, ...props }) => { const { initialHeaders, shouldPersistHeaders, diff --git a/packages/graphiql-react/src/types.ts b/packages/graphiql-react/src/types.ts index 6162a5515b..c2f9e96364 100644 --- a/packages/graphiql-react/src/types.ts +++ b/packages/graphiql-react/src/types.ts @@ -8,7 +8,7 @@ import { SchemaSlice, } from './stores'; -export type EditorProps = ComponentPropsWithoutRef<'div'> +export type EditorProps = ComponentPropsWithoutRef<'div'>; export interface SchemaReference { kind: string;