graphiql 5: remove readOnly prop, document keyMap prop was removed in migration guide (#4003)

* upd

* upd

* upd

Author: dimaMachina

.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

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`

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',
       }),

packages/graphiql-react/src/components/header-editor.tsx

@@ -20,11 +20,7 @@ interface HeaderEditorProps extends EditorProps {
   onEdit?(value: string): void;
 }
 
-export const HeaderEditor: FC<HeaderEditorProps> = ({
-  onEdit,
-  readOnly = false,
-  ...props
-}) => {
+export const HeaderEditor: FC<HeaderEditorProps> = ({ onEdit, ...props }) => {
   const {
     initialHeaders,
     shouldPersistHeaders,
@@ -51,7 +47,7 @@ export const HeaderEditor: FC<HeaderEditorProps> = ({
   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 }),

packages/graphiql-react/src/components/query-editor.tsx

@@ -43,7 +43,6 @@ interface QueryEditorProps extends EditorProps {
 export const QueryEditor: FC<QueryEditorProps> = ({
   onClickReference,
   onEdit,
-  readOnly = false,
   ...props
 }) => {
   const {
@@ -209,7 +208,7 @@ export const QueryEditor: FC<QueryEditorProps> = ({
   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

packages/graphiql-react/src/components/response-editor.tsx

@@ -27,7 +27,7 @@ type ResponseTooltipType = ComponentType<{
   word: monacoEditor.IWordAtPosition;
 }>;
 
-interface ResponseEditorProps extends Omit<EditorProps, 'readOnly'> {
+interface ResponseEditorProps extends EditorProps {
   /**
    * Customize the tooltip when hovering over properties in the response editor.
    */

packages/graphiql-react/src/components/variable-editor.tsx

@@ -22,7 +22,6 @@ interface VariableEditorProps extends EditorProps {
 
 export const VariableEditor: FC<VariableEditorProps> = ({
   onEdit,
-  readOnly = false,
   ...props
 }) => {
   const { initialVariables, setEditor, run, prettifyEditors, mergeQuery } =
@@ -42,7 +41,7 @@ export const VariableEditor: FC<VariableEditorProps> = ({
       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 }),

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;

packages/graphiql/src/GraphiQL.tsx

@@ -70,7 +70,6 @@ const GraphiQL_: FC<GraphiQLProps> = ({
   maxHistoryLength,
   plugins = [HISTORY_PLUGIN],
   referencePlugin = DOC_EXPLORER_PLUGIN,
-  readOnly,
   onEditQuery,
   onEditVariables,
   onEditHeaders,
@@ -103,11 +102,14 @@ const GraphiQL_: FC<GraphiQLProps> = ({
       '`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,
@@ -212,7 +214,6 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
   confirmCloseTab,
   className,
   onEditQuery,
-  readOnly,
   onEditVariables,
   onEditHeaders,
   responseTooltip,
@@ -639,11 +640,7 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
         aria-label="Query Editor"
         ref={editorToolsResize.firstRef}
       >
-        <QueryEditor
-          onClickReference={onClickReference}
-          onEdit={onEditQuery}
-          readOnly={readOnly}
-        />
+        <QueryEditor onClickReference={onClickReference} onEdit={onEditQuery} />
         <div
           className="graphiql-toolbar"
           role="toolbar"
@@ -707,13 +704,11 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
         <VariableEditor
           className={activeSecondaryEditor === 'variables' ? '' : 'hidden'}
           onEdit={onEditVariables}
-          readOnly={readOnly}
         />
         {isHeadersEditorEnabled && (
           <HeaderEditor
             className={activeSecondaryEditor === 'headers' ? '' : 'hidden'}
             onEdit={onEditHeaders}
-            readOnly={readOnly}
           />
         )}
       </section>