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.

Sign up for GitHub

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

Jump to bottom

Updated cm6-graphql package README #3127

Merged
merged 6 commits into from
Apr 7, 2023
Merged

Updated cm6-graphql package README #3127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18d2c9f
Update README.md
imolorhe Apr 2, 2023
7f5d43a
Update README.md
imolorhe Apr 3, 2023
3b1659c
Create .changeset/green-radios-fix.md
imolorhe Apr 3, 2023
60fdfb2
Update packages/cm6-graphql/README.md
imolorhe Apr 3, 2023
867974c
Update packages/cm6-graphql/README.md
imolorhe Apr 3, 2023
585a3c5
Ran yarn pretty
imolorhe Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/green-radios-fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"cm6-graphql": patch
---

Updated cm6-graphql package README
53 changes: 52 additions & 1 deletion packages/cm6-graphql/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,52 @@
# CodeMirror 6 GraphQL Language package
# CodeMirror 6 GraphQL Language extension

[![NPM](https://img.shields.io/npm/v/cm6-graphql.svg?style=flat-square)](https://npmjs.com/cm6-graphql)
![npm downloads](https://img.shields.io/npm/dm/cm6-graphql?label=npm%20downloads)
[![License](https://img.shields.io/npm/l/cm6-graphql.svg?style=flat-square)](LICENSE)
[Discord Channel](https://discord.gg/cffZwk8NJW)

Provides CodeMirror 6 extension with a parser mode for GraphQL along with a
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
Provides CodeMirror 6 extension with a parser mode for GraphQL along with a
Provides CodeMirror 6 extension with a parser mode for GraphQL along with

autocomplete and linting powered by your GraphQL Schema.

### Getting Started

```sh
npm install --save cm6-graphql
```

[CodeMirror 6](https://codemirror.net/) customization is done through
[extensions](https://codemirror.net/docs/guide/#extension). This package an
extension that customizes codemirror 6 for GraphQL.
Comment on lines +18 to +19
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
[extensions](https://codemirror.net/docs/guide/#extension). This package an
extension that customizes codemirror 6 for GraphQL.
[extensions](https://codemirror.net/docs/guide/#extension). This package is
an extension that customizes CodeMirror 6 for GraphQL.


```js
import { basicSetup, EditorView } from 'codemirror';
import { graphql } from 'cm6-graphql';

const view = new EditorView({
doc: `mutation mutationName {
setString(value: "newString")
}`,
extensions: [basicSetup, graphql(myGraphQLSchema)],
parent: document.body,
});
```

Note: You have to provide a theme to CodeMirror 6 for the styling you want. You
can take a look at
[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts)
or see the CodeMirror 6
[documentation examples](https://codemirror.net/examples/styling/) for more
details.
Comment on lines +34 to +39
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
Note: You have to provide a theme to CodeMirror 6 for the styling you want. You
can take a look at
[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts)
or see the CodeMirror 6
[documentation examples](https://codemirror.net/examples/styling/) for more
details.
_**Note:** You have to provide a theme to CodeMirror 6 for the styling you want. You
can take a look at
[this example](https://github.com/graphql/graphiql/blob/main/examples/cm6-graphql-parcel/src/index.ts)
or see the CodeMirror 6
[documentation examples](https://codemirror.net/examples/styling/) for more
details._


### Updating schema

If you need to update the GraphQL schema used in the editor dynamically, you can
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
If you need to update the GraphQL schema used in the editor dynamically, you can
If you need to dynamically update the GraphQL schema used in the editor, you can

call `updateSchema` with the CodeMirror `EditorView` instance and the new schema

```js
import { updateSchema } from 'cm6-graphql';

const onNewSchema = schema => {
updateSchema(view, schema);
};
```
2 changes: 2 additions & 0 deletions packages/codemirror-graphql/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
[![License](https://img.shields.io/npm/l/codemirror-graphql.svg?style=flat-square)](LICENSE)
[Discord Channel](https://discord.gg/cffZwk8NJW)

**NOTE: For CodeMirror 6, use [cm6-graphql](/packages/cm6-graphql/) instead**

Provides CodeMirror with a parser mode for GraphQL along with a live linter and
typeahead hinter powered by your GraphQL Schema.

Expand Down