Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

monaco-editor/monaco-graphql x GraphiQL #3234

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

monaco-editor/monaco-graphql x GraphiQL #3234

wants to merge 5 commits into from

Conversation

dimaMachina
Copy link
Collaborator

@dimaMachina dimaMachina commented Jun 16, 2023

related #2326 PREVIEW

I didn't tested a lot, so some actual feature could be missing

TODO:

  • Migrate codemirror editors monaco-editor

  • Support monaco-graphql

  • Resize works

  • Configure save operations/variables/headers values to storage

  • save operationName to storage

  • color theme should be adjusted to actual codemirror color theme on dark/light mode (currently hard copied from graphiql prototype)

  • validation errors don't appear on the initial loading

image
  • fix unit/e2e tests

@changeset-bot
Copy link

changeset-bot bot commented Jun 16, 2023

🦋 Changeset detected

Latest commit: f02956a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
graphiql Major
@graphiql/react Major
monaco-graphql Major
@graphiql/plugin-code-exporter Major
@graphiql/plugin-explorer Major

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

@github-actions
Copy link
Contributor

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.

// eslint-disable-next-line react-hooks/exhaustive-deps -- only on mount
}, []);

useEffect(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should run on load, just once and ideally right after you have the editor created. currently, results in this:
Screenshot 2023-06-20 at 6 23 49 PM

Copy link
Member

@acao acao Jul 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@acao
Copy link
Member

acao commented Jul 30, 2023

another thing I'll be cleaning up is a lot of no longer needed - for example, most of onHasCompletion can go, we deleted quite a bit when we added monaco in 2020

dimaMachina and others added 2 commits July 30, 2023 16:48
commit graphiql

remove unused and add editor theme

add monaco-editor-webpack-plugin

remove
@acao
Copy link
Member

acao commented Jul 30, 2023

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

@netlify
Copy link

netlify bot commented Jul 30, 2023

Deploy Preview for graphiql-test ready!

Name Link
🔨 Latest commit f02956a
🔍 Latest deploy log https://app.netlify.com/sites/graphiql-test/deploys/64c7811d10faa600083992b2
😎 Deploy Preview https://deploy-preview-3234--graphiql-test.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@acao
Copy link
Member

acao commented Nov 2, 2023

@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

Copy link
Contributor

@TallTed TallTed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tweaks to human-facing grammar, punctuation, etc., for clarity and consistency

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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants