Skip to content

Commit 744a6b1

Browse files
hasparushasparus
committed
wip
1 parent 4c68241 commit 744a6b1

File tree

7 files changed

+299
-347
lines changed

7 files changed

+299
-347
lines changed

‎src/codemirror.less‎

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,40 @@
11
@import "variables.less";
22

3-
/* Code Mirror */
3+
/* Code Mirror 6 & Compatibility */
44

5-
/* BASICS */
5+
/* BASICS - CodeMirror 6 */
6+
.cm-editor {
7+
/* Set height, width, borders, and global font properties here */
8+
height: 300px;
9+
.code-font();
10+
background: var(--cm-background);
11+
color: var(--cm-foreground);
12+
position: relative;
13+
overflow: hidden;
14+
}
15+
16+
.cm-scroller {
17+
overflow: auto;
18+
position: relative;
19+
}
620

21+
.cm-content {
22+
min-height: 1px;
23+
cursor: text;
24+
padding: 4px 0;
25+
}
26+
27+
.cm-line {
28+
padding: 0 4px;
29+
line-height: inherit;
30+
color: inherit;
31+
}
32+
33+
.cm-focused {
34+
outline: none;
35+
}
36+
37+
/* Compatibility aliases for CodeMirror 5 */
738
.CodeMirror {
839
/* Set height, width, borders, and global font properties here */
940
height: 300px;
@@ -808,7 +839,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
808839

809840
/* CM override */
810841

811-
.CodeMirror {
842+
.CodeMirror,
843+
.cm-editor {
812844
.code-font();
813845
}
814846

@@ -846,7 +878,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
846878
}
847879
}
848880

849-
.query-editor .CodeMirror {
881+
.query-editor .CodeMirror,
882+
.query-editor .cm-editor {
850883
height: auto;
851884
min-height: 100px;
852885
margin: 0px 7px 35px;
@@ -864,11 +897,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
864897
width: auto;
865898
}
866899

867-
.query-editor .CodeMirror {
900+
.query-editor .CodeMirror,
901+
.query-editor .cm-editor {
868902
margin-bottom: 21px;
869903
}
870904

871-
.variable-editor .CodeMirror {
905+
.variable-editor .CodeMirror,
906+
.variable-editor .cm-editor {
872907
height: auto;
873908
min-height: 30px;
874909
margin: 0 7px;
@@ -887,7 +922,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
887922
border-radius: 3px;
888923
}
889924

890-
.result-window .CodeMirror {
925+
.result-window .CodeMirror,
926+
.result-window .cm-editor {
891927
background: none;
892928
height: 100%;
893929
padding-bottom: 45px;

‎src/components/index-page/hero/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@ export function Hero() {
2929
</ul>
3030

3131
<div className="flex items-center gap-4">
32-
<Button href="/learn" className="max-sm:w-full">
33-
Learn more<span className="sr-only"> about GraphQL</span>
32+
<Button href="/learn/#try-it-out">Try it out</Button>
33+
<Button href="/learn">
34+
<span className="sr-only">Read the </span> Docs
3435
</Button>
3536
</div>
3637
</div>

‎src/components/marked/mini-graphiQL.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,19 @@
77
*/
88

99
import { Component } from "react"
10-
import { marked } from "marked"
1110

12-
import { graphql, formatError, GraphQLSchema } from "graphql"
11+
import { graphql, GraphQLSchema } from "graphql"
1312

1413
import { QueryEditor } from "./query-editor"
14+
import { VariableEditor } from "./variable-editor"
15+
import { ResultViewer } from "./result-viewer"
16+
import { getVariableToType } from "./get-variable-to-type"
1517

1618
export type MiniGraphiQLProps = {
1719
schema: GraphQLSchema
1820
query: string
1921
variables: string
22+
rootValue?: any
2023
}
2124

2225
interface MiniGraphiQLState {
@@ -73,7 +76,7 @@ export default class MiniGraphiQL extends Component<
7376
) : (
7477
editor
7578
)}
76-
<ResultViewer value={this.state.response} />
79+
<ResultViewer value={this.state.response || undefined} />
7780
</div>
7881
)
7982
}
@@ -102,12 +105,20 @@ export default class MiniGraphiQL extends Component<
102105
rootValue: this.props.rootValue,
103106
})
104107

108+
let resultToSerialize: any = result
105109
if (result.errors) {
106-
result.errors = result.errors.map(formatError)
110+
// Convert errors to serializable format
111+
const serializedErrors = result.errors.map(error => ({
112+
message: error.message,
113+
locations: error.locations,
114+
path: error.path
115+
}))
116+
// Replace errors with serialized version for JSON.stringify
117+
resultToSerialize = { ...result, errors: serializedErrors }
107118
}
108119

109120
if (queryID === this._editorQueryID) {
110-
this.setState({ response: JSON.stringify(result, null, 2) })
121+
this.setState({ response: JSON.stringify(resultToSerialize, null, 2) })
111122
}
112123
} catch (error) {
113124
if (queryID === this._editorQueryID) {
@@ -116,11 +127,11 @@ export default class MiniGraphiQL extends Component<
116127
}
117128
}
118129

119-
_handleEditQuery(value) {
130+
_handleEditQuery(value: string) {
120131
this.setState({ query: value })
121132
}
122133

123-
_handleEditVariables(value) {
134+
_handleEditVariables(value: string) {
124135
this.setState({ variables: value })
125136
}
126137
}

‎src/components/marked/on-has-completion.tsx‎

Lines changed: 6 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,11 @@
11
/**
2-
* Render a custom UI for CodeMirror's hint which includes additional info
3-
* about the type and description for the selected context.
2+
* Note: This file is retained for compatibility but is no longer used with CodeMirror 6.
3+
* CodeMirror 6 and cm6-graphql handle completions differently and don't require this custom UI.
44
*/
5-
export function onHasCompletion(cm, data, onHintInformationRender) {
6-
const CodeMirror = require("codemirror")
7-
let wrapper
8-
let information
95

10-
// When a hint result is selected, we touch the UI.
11-
CodeMirror.on(data, "select", (ctx, el) => {
12-
// Only the first time (usually when the hint UI is first displayed)
13-
// do we create the wrapping node.
14-
if (!wrapper) {
15-
// Wrap the existing hint UI, so we have a place to put information.
16-
const hintsUl = el.parentNode
17-
const container = hintsUl.parentNode
18-
wrapper = document.createElement("div")
19-
container.appendChild(wrapper)
20-
21-
// CodeMirror vertically inverts the hint UI if there is not enough
22-
// space below the cursor. Since this modified UI appends to the bottom
23-
// of CodeMirror's existing UI, it could cover the cursor. This adjusts
24-
// the positioning of the hint UI to accommodate.
25-
let top = hintsUl.style.top
26-
let bottom = ""
27-
const cursorTop = cm.cursorCoords().top
28-
if (parseInt(top, 10) < cursorTop) {
29-
top = ""
30-
bottom = window.innerHeight - cursorTop + 3 + "px"
31-
}
32-
33-
// Style the wrapper, remove positioning from hints. Note that usage
34-
// of this option will need to specify CSS to remove some styles from
35-
// the existing hint UI.
36-
wrapper.className = "CodeMirror-hints-wrapper"
37-
wrapper.style.left = hintsUl.style.left
38-
wrapper.style.top = top
39-
wrapper.style.bottom = bottom
40-
hintsUl.style.left = ""
41-
hintsUl.style.top = ""
42-
43-
// This "information" node will contain the additional info about the
44-
// highlighted typeahead option.
45-
information = document.createElement("div")
46-
information.className = "CodeMirror-hint-information"
47-
if (bottom) {
48-
wrapper.appendChild(information)
49-
wrapper.appendChild(hintsUl)
50-
} else {
51-
wrapper.appendChild(hintsUl)
52-
wrapper.appendChild(information)
53-
}
54-
55-
// When CodeMirror attempts to remove the hint UI, we detect that it was
56-
// removed from our wrapper and in turn remove the wrapper from the
57-
// original container.
58-
let onRemoveFn
59-
const observer = new MutationObserver(mutationsList => {
60-
for (const mutation of mutationsList) {
61-
// Check if the hintsUl element was removed
62-
if (mutation.removedNodes) {
63-
mutation.removedNodes.forEach(node => {
64-
if (node === hintsUl) {
65-
// Cleanup logic
66-
observer.disconnect() // Stop observing
67-
wrapper.parentNode.removeChild(wrapper)
68-
wrapper = null
69-
information = null
70-
onRemoveFn = null
71-
}
72-
})
73-
}
74-
}
75-
})
76-
77-
// Start observing the wrapper for child node removals
78-
observer.observe(wrapper, { childList: true, subtree: false })
79-
}
80-
81-
// Now that the UI has been set up, add info to information.
82-
const description = ctx.description
83-
? marked(ctx.description, { smartypants: true })
84-
: "Self descriptive."
85-
const type = ctx.type
86-
? '<span class="infoType">' + String(ctx.type) + "</span>"
87-
: ""
88-
89-
information.innerHTML =
90-
'<div class="content">' +
91-
(description.slice(0, 3) === "<p>"
92-
? "<p>" + type + description.slice(3)
93-
: type + description) +
94-
"</div>"
95-
96-
// Additional rendering?
97-
if (onHintInformationRender) {
98-
onHintInformationRender(information)
99-
}
100-
})
6+
export function onHasCompletion(cm: any, data: any, onHintInformationRender?: any) {
7+
// This function is no longer used with CodeMirror 6
8+
// Left as a stub for backwards compatibility
9+
return;
10110
}
10211

0 commit comments

Comments
 (0)