-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
editors.ts
110 lines (95 loc) · 2.37 KB
/
editors.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { editor, Uri } from 'monaco-graphql/esm/monaco-editor';
const GRAPHQL_LANGUAGE_ID = 'graphql';
const operationString =
localStorage.getItem('operations') ??
`
# right click to view context menu
# F1 for command palette
# enjoy prettier formatting, autocompletion,
# validation, hinting and more for GraphQL SDL and operations!
query Example(
$owner: String!
$name: String!
$reviewEvent: PullRequestReviewEvent!
$user: FollowUserInput!
) {
repository(owner: $owner, name: $name) {
stargazerCount
}
}
`;
const variablesString =
localStorage.getItem('variables') ??
`{
"reviewEvent": "graphql",
"name": true
}`;
const resultsString = '{}';
const schemaSdlString = localStorage.getItem('schema-sdl') ?? '';
const THEME = 'vs-dark';
export function createEditors() {
const variablesModel = editor.createModel(
variablesString,
'json',
Uri.file('/1/variables.json'),
);
const variablesEditor = editor.create(document.getElementById('variables'), {
model: variablesModel,
language: 'json',
formatOnPaste: true,
formatOnType: true,
theme: THEME,
comments: {
insertSpace: true,
ignoreEmptyLines: true,
},
});
const operationModel = editor.createModel(
operationString,
GRAPHQL_LANGUAGE_ID,
Uri.file('/1/operation.graphql'),
);
const operationEditor = editor.create(document.getElementById('operation'), {
model: operationModel,
formatOnPaste: true,
formatOnType: true,
folding: true,
theme: THEME,
language: GRAPHQL_LANGUAGE_ID,
});
const schemaModel = editor.createModel(
schemaSdlString,
GRAPHQL_LANGUAGE_ID,
Uri.file('/1/schema.graphqls'),
);
const schemaEditor = editor.create(document.getElementById('schema-sdl'), {
model: schemaModel,
formatOnPaste: true,
formatOnType: true,
folding: true,
theme: THEME,
language: GRAPHQL_LANGUAGE_ID,
});
const resultsModel = editor.createModel(
resultsString,
'json',
Uri.file('/1/results.json'),
);
const resultsEditor = editor.create(document.getElementById('results'), {
model: resultsModel,
language: 'json',
theme: THEME,
wordWrap: 'on',
readOnly: true,
showFoldingControls: 'always',
});
return {
operationEditor,
variablesEditor,
resultsEditor,
schemaEditor,
operationModel,
variablesModel,
schemaModel,
};
}