monaco-editor/monaco-graphql x GraphiQL #3234
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: f02956a The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest changes of this PR are not available as canary, since there are no linked |
| // eslint-disable-next-line react-hooks/exhaustive-deps -- only on mount | ||
| }, []); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
this should run on load, just once and ideally right after you have the editor created. currently, results in this:
There was a problem hiding this comment.
we should expose a hook that allows adding commands without lifecycle issues, and use that in graphiql react for default commands. this can be the replacement for extraKeys prop which should be removed
4 tasks
|
another thing I'll be cleaning up is a lot of no longer needed - for example, most of |
commit graphiql remove unused and add editor theme add monaco-editor-webpack-plugin remove
|
rebased! I will start a pre-release process for this branch. any changes we merge to this branch will be merged as a pre-release |
✅ Deploy Preview for graphiql-test ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@dimaMachina I am going to revive this, and manually re-create these changes on a new branch. I will try to keep tooling changes minimal for now |
TallTed
suggested changes
Nov 2, 2023
Comment on lines
+20
to
+22
| // you can also use ts-loader of course | ||
| // i prefer to use babel-loader & @babel/plugin-typescript | ||
| // so we can experiment with how changing browserslistrc targets impacts |
There was a problem hiding this comment.
Suggested change
| // you can also use ts-loader of course | |
| // i prefer to use babel-loader & @babel/plugin-typescript | |
| // so we can experiment with how changing browserslistrc targets impacts | |
| // I prefer to use babel-loader & @babel/plugin-typescript | |
| // Of course, you can also use ts-loader | |
| // We can experiment to see how changing browserslistrc targets impacts |
Comment on lines
+49
to
+51
| // in order to prevent async modules for CDN builds | ||
| // until we can guarantee it will work with the CDN properly | ||
| // and so that graphiql.min.js can retain parity |
There was a problem hiding this comment.
Suggested change
| // in order to prevent async modules for CDN builds | |
| // until we can guarantee it will work with the CDN properly | |
| // and so that graphiql.min.js can retain parity | |
| // This is to prevent async modules for CDN builds | |
| // until we can guarantee it will work properly with the CDN | |
| // and that graphiql.min.js can retain parity |
| @@ -1,3 +1,4 @@ | |||
| // @ts-nocheck -- codemirror editor complain about type errors | |||
There was a problem hiding this comment.
Suggested change
| // @ts-nocheck -- codemirror editor complain about type errors | |
| // @ts-nocheck -- codemirror editor complains about type errors |
| @@ -1,3 +1,4 @@ | |||
| // @ts-nocheck -- codemirror editor complain about type errors | |||
There was a problem hiding this comment.
Suggested change
| // @ts-nocheck -- codemirror editor complain about type errors | |
| // @ts-nocheck -- codemirror editor complains about type errors |
| @@ -79,39 +80,39 @@ export type EditorContextType = TabsState & { | |||
| ): void; | |||
|
|
|||
| /** | |||
| * The CodeMirror editor instance for the headers editor. | |||
| * The CodeMirror editor instance for the headers' editor. | |||
There was a problem hiding this comment.
Suggested change
| * The CodeMirror editor instance for the headers' editor. | |
| * The CodeMirror editor instance for the header editor. |
| base: 'vs-dark', | ||
| inherit: true, | ||
| colors: { | ||
| 'editor.foreground': editorColors.dark.delimiters, // Editor default foreground color. |
There was a problem hiding this comment.
Suggested change
| 'editor.foreground': editorColors.dark.delimiters, // Editor default foreground color. | |
| 'editor.foreground': editorColors.dark.delimiters, // Default foreground color of the editor. |
Comment on lines
+107
to
+108
| 'editorLineNumber.foreground': editorColors.dark.delimiters, // Color of editor line numbers. | ||
| 'editorLineNumber.activeForeground': editorColors.dark.delimitersActive, // Color of editor active line number. |
There was a problem hiding this comment.
Suggested change
| 'editorLineNumber.foreground': editorColors.dark.delimiters, // Color of editor line numbers. | |
| 'editorLineNumber.activeForeground': editorColors.dark.delimitersActive, // Color of editor active line number. | |
| 'editorLineNumber.foreground': editorColors.dark.delimiters, // Color of line numbers in the editor. | |
| 'editorLineNumber.activeForeground': editorColors.dark.delimitersActive, // Color of active line number in the editor. |
| 'editorWarning.foreground': editorColors.dark.orange_default, // Foreground color of warning squigglies in the editor. | ||
| 'editor.lineHighlightBorder': '#ffffff00', // Background color for the border around the line at the cursor position. | ||
| 'editorBracketMatch.background': '#ffffff00', // Background color behind matching brackets | ||
| 'editorBracketMatch.border': editorColors.dark.selections, // Color for matching brackets boxes |
There was a problem hiding this comment.
Suggested change
| 'editorBracketMatch.border': editorColors.dark.selections, // Color for matching brackets boxes | |
| 'editorBracketMatch.border': editorColors.dark.selections, // Color of matching bracket boxes |
Comment on lines
+114
to
+118
| 'editorIndentGuide.background': editorColors.dark.indentGuides, // Color of the editor indentation guides. | ||
| 'scrollbar.shadow': '#ffffff00', // Scrollbar shadow to indicate that the view is scrolled. | ||
| 'editorOverviewRuler.border': '#ffffff00', // Color of the overview ruler border. | ||
| // 'editorMarkerNavigationError.background': '#FFFFFF00', // Editor marker navigation widget error color. | ||
| 'editorMarkerNavigationWarning.background': '#ffffff00', // Editor marker navigation widget warning color. |
There was a problem hiding this comment.
Suggested change
| 'editorIndentGuide.background': editorColors.dark.indentGuides, // Color of the editor indentation guides. | |
| 'scrollbar.shadow': '#ffffff00', // Scrollbar shadow to indicate that the view is scrolled. | |
| 'editorOverviewRuler.border': '#ffffff00', // Color of the overview ruler border. | |
| // 'editorMarkerNavigationError.background': '#FFFFFF00', // Editor marker navigation widget error color. | |
| 'editorMarkerNavigationWarning.background': '#ffffff00', // Editor marker navigation widget warning color. | |
| 'editorIndentGuide.background': editorColors.dark.indentGuides, // Color of indentation guides in the editor. | |
| 'scrollbar.shadow': '#ffffff00', // Scrollbar shadow to indicate that the view is scrolled. | |
| 'editorOverviewRuler.border': '#ffffff00', // Color of the overview ruler border in the editor. | |
| // 'editorMarkerNavigationError.background': '#FFFFFF00', // Marker navigation widget error color in the editor. | |
| 'editorMarkerNavigationWarning.background': '#ffffff00', // Marker navigation widget warning color in the editor. |
Comment on lines
+222
to
+237
| 'editor.foreground': editorColors.light.delimiters, // Editor default foreground color. | ||
| 'editorCursor.foreground': editorColors.light.yellow_default, // Color of the editor cursor. | ||
| 'editor.selectionBackground': editorColors.light.selections, // Color of the editor selection. | ||
| 'editor.background': '#ffffff00', // white with a 00 alpha value | ||
| 'editorLineNumber.foreground': editorColors.light.delimiters, // Color of editor line numbers. | ||
| 'editorLineNumber.activeForeground': editorColors.light.delimitersActive, // Color of editor active line number. | ||
| 'editorError.foreground': editorColors.light.orange_default, // Foreground color of error squigglies in the editor. | ||
| 'editorWarning.foreground': editorColors.light.orange_default, // Foreground color of warning squigglies in the editor. | ||
| 'editor.lineHighlightBorder': '#ffffff00', // Background color for the border around the line at the cursor position. | ||
| 'editorBracketMatch.background': '#ffffff00', // Background color behind matching brackets | ||
| 'editorBracketMatch.border': editorColors.light.selections, // Color for matching brackets boxes | ||
| 'editorIndentGuide.background': editorColors.light.indentGuides, // Color of the editor indentation guides. | ||
| 'scrollbar.shadow': '#ffffff00', // Scrollbar shadow to indicate that the view is scrolled. | ||
| 'editorOverviewRuler.border': '#ffffff00', // Color of the overview ruler border. | ||
| // 'editorMarkerNavigationError.background': '#FFFFFF00', // Editor marker navigation widget error color. | ||
| 'editorMarkerNavigationWarning.background': '#ffffff00', // Editor marker navigation widget warning color. |
There was a problem hiding this comment.
Suggested change
| 'editor.foreground': editorColors.light.delimiters, // Editor default foreground color. | |
| 'editorCursor.foreground': editorColors.light.yellow_default, // Color of the editor cursor. | |
| 'editor.selectionBackground': editorColors.light.selections, // Color of the editor selection. | |
| 'editor.background': '#ffffff00', // white with a 00 alpha value | |
| 'editorLineNumber.foreground': editorColors.light.delimiters, // Color of editor line numbers. | |
| 'editorLineNumber.activeForeground': editorColors.light.delimitersActive, // Color of editor active line number. | |
| 'editorError.foreground': editorColors.light.orange_default, // Foreground color of error squigglies in the editor. | |
| 'editorWarning.foreground': editorColors.light.orange_default, // Foreground color of warning squigglies in the editor. | |
| 'editor.lineHighlightBorder': '#ffffff00', // Background color for the border around the line at the cursor position. | |
| 'editorBracketMatch.background': '#ffffff00', // Background color behind matching brackets | |
| 'editorBracketMatch.border': editorColors.light.selections, // Color for matching brackets boxes | |
| 'editorIndentGuide.background': editorColors.light.indentGuides, // Color of the editor indentation guides. | |
| 'scrollbar.shadow': '#ffffff00', // Scrollbar shadow to indicate that the view is scrolled. | |
| 'editorOverviewRuler.border': '#ffffff00', // Color of the overview ruler border. | |
| // 'editorMarkerNavigationError.background': '#FFFFFF00', // Editor marker navigation widget error color. | |
| 'editorMarkerNavigationWarning.background': '#ffffff00', // Editor marker navigation widget warning color. | |
| 'editor.foreground': editorColors.light.delimiters, // Default foreground color in the editor. | |
| 'editorCursor.foreground': editorColors.light.yellow_default, // Color of the cursor in the editor. | |
| 'editor.selectionBackground': editorColors.light.selections, // Color of the selection in the editor. | |
| 'editor.background': '#ffffff00', // white with a 00 alpha value | |
| 'editorLineNumber.foreground': editorColors.light.delimiters, // Color of line numbers in the editor. | |
| 'editorLineNumber.activeForeground': editorColors.light.delimitersActive, // Color of active line number in the editor. | |
| 'editorError.foreground': editorColors.light.orange_default, // Foreground color of error squigglies in the editor. | |
| 'editorWarning.foreground': editorColors.light.orange_default, // Foreground color of warning squigglies in the editor. | |
| 'editor.lineHighlightBorder': '#ffffff00', // Background color for the border around the line at the cursor position. | |
| 'editorBracketMatch.background': '#ffffff00', // Background color behind matching brackets in the editor | |
| 'editorBracketMatch.border': editorColors.light.selections, // Color for matching bracket boxes in the editor. | |
| 'editorIndentGuide.background': editorColors.light.indentGuides, // Color of the indentation guides in the editor. | |
| 'scrollbar.shadow': '#ffffff00', // Scrollbar shadow to indicate that the view is scrolled. | |
| 'editorOverviewRuler.border': '#ffffff00', // Color of the overview ruler border. | |
| // 'editorMarkerNavigationError.background': '#FFFFFF00', // Marker navigation widget error color in the editor. | |
| 'editorMarkerNavigationWarning.background': '#ffffff00', // Marker navigation widget warning color in the editor. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
related #2326 PREVIEW
I didn't tested a lot, so some actual feature could be missing
TODO:
Migrate
codemirroreditorsmonaco-editorSupport
monaco-graphqlResize works
Configure save operations/variables/headers values to
storagesave
operationNameto storagecolor theme should be adjusted to actual codemirror color theme on dark/light mode (currently hard copied from
graphiqlprototype)validation errors don't appear on the initial loading