Skip to content

Commit 4e6d147

Browse files
hasparushasparus
committed
Style codemirrors properly
1 parent c6568d8 commit 4e6d147

File tree

9 files changed

+360
-272
lines changed

9 files changed

+360
-272
lines changed

‎package.json‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,17 @@
2222
"validate:snippets": "node scripts/validate-snippets.js"
2323
},
2424
"dependencies": {
25+
"@codemirror/autocomplete": "^6.18.6",
26+
"@codemirror/commands": "^6.3.3",
27+
"@codemirror/lang-json": "^6.0.1",
28+
"@codemirror/language": "^6.10.0",
29+
"@codemirror/lint": "^6.8.5",
30+
"@codemirror/state": "^6.4.0",
31+
"@codemirror/view": "^6.24.0",
2532
"@graphql-tools/schema": "10.0.25",
2633
"@headlessui/react": "^2.2.4",
2734
"@igorkowalczyk/is-browser": "^5.1.0",
35+
"@lezer/highlight": "^1.2.1",
2836
"@next/bundle-analyzer": "^15.4.5",
2937
"@radix-ui/react-radio-group": "^1.2.2",
3038
"@sparticuz/chromium": "^138.0.2",
@@ -34,8 +42,7 @@
3442
"autoprefixer": "^10.4.20",
3543
"calendar-link": "^2.10.0",
3644
"clsx": "^2.1.1",
37-
"codemirror": "^5.65.19",
38-
"codemirror-graphql": "1.3.2",
45+
"cm6-graphql": "^0.2.1",
3946
"date-fns": "^2.30.0",
4047
"fast-glob": "^3.3.3",
4148
"github-slugger": "2.0.0",
@@ -48,7 +55,7 @@
4855
"markdown-to-jsx": "^7.7.2",
4956
"marked": "5.1.2",
5057
"motion": "^12.11.0",
51-
"next": "^14.2.22",
58+
"next": "^14.2.32",
5259
"next-image-export-optimizer": "^1.18.0",
5360
"next-query-params": "^5.0.1",
5461
"next-sitemap": "^4.2.3",

‎pnpm-lock.yaml‎

Lines changed: 204 additions & 120 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/marked/codemirror-one-dark.tsx‎

Lines changed: 65 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,86 +4,83 @@ import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
44
import { tags as t } from "@lezer/highlight"
55

66
/// The editor theme styles for One Dark using CSS custom properties.
7-
export const oneDarkTheme = EditorView.theme(
8-
{
9-
"&": {
10-
color: "var(--cm-foreground)",
11-
backgroundColor: "var(--cm-background)",
12-
},
7+
export const oneDarkTheme = EditorView.theme({
8+
"&": {
9+
color: "var(--cm-foreground)",
10+
backgroundColor: "var(--cm-background)",
11+
},
1312

14-
".cm-content": {
15-
caretColor: "var(--cm-cursor)",
16-
},
13+
".cm-content": {
14+
caretColor: "var(--cm-cursor)",
15+
},
1716

18-
".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--cm-cursor)" },
19-
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
20-
{ backgroundColor: "var(--cm-selection)" },
17+
".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--cm-cursor)" },
18+
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
19+
{ backgroundColor: "var(--cm-selection)" },
2120

22-
".cm-panels": {
23-
backgroundColor: "var(--cm-background)",
24-
color: "var(--cm-foreground)",
25-
},
26-
".cm-panels.cm-panels-top": {
27-
borderBottom: "2px solid var(--cm-gutter-border)",
28-
},
29-
".cm-panels.cm-panels-bottom": {
30-
borderTop: "2px solid var(--cm-gutter-border)",
31-
},
21+
".cm-panels": {
22+
backgroundColor: "var(--cm-background)",
23+
color: "var(--cm-foreground)",
24+
},
25+
".cm-panels.cm-panels-top": {
26+
borderBottom: "2px solid var(--cm-gutter-border)",
27+
},
28+
".cm-panels.cm-panels-bottom": {
29+
borderTop: "2px solid var(--cm-gutter-border)",
30+
},
3231

33-
".cm-searchMatch": {
34-
backgroundColor: "#72a1ff59",
35-
outline: "1px solid #457dff",
36-
},
37-
".cm-searchMatch.cm-searchMatch-selected": {
38-
backgroundColor: "#6199ff2f",
39-
},
32+
".cm-searchMatch": {
33+
backgroundColor: "#72a1ff59",
34+
outline: "1px solid #457dff",
35+
},
36+
".cm-searchMatch.cm-searchMatch-selected": {
37+
backgroundColor: "#6199ff2f",
38+
},
4039

41-
".cm-activeLine": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
42-
".cm-selectionMatch": { backgroundColor: "#aafe661a" },
40+
".cm-activeLine": { backgroundColor: "rgba(255, 255, 255, 0.05)" },
41+
".cm-selectionMatch": { backgroundColor: "#aafe661a" },
4342

44-
"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
45-
backgroundColor: "#bad0f847",
46-
},
43+
"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
44+
backgroundColor: "#bad0f847",
45+
},
4746

48-
".cm-gutters": {
49-
backgroundColor: "var(--cm-gutter-background)",
50-
color: "var(--cm-line-number)",
51-
border: "none",
52-
borderRight: "1px solid var(--cm-gutter-border)",
53-
},
47+
".cm-gutters": {
48+
backgroundColor: "var(--cm-gutter-background)",
49+
color: "var(--cm-line-number)",
50+
border: "none",
51+
borderRight: "1px solid var(--cm-gutter-border)",
52+
},
5453

55-
".cm-activeLineGutter": {
56-
backgroundColor: "var(--cm-gutter-background)",
57-
},
54+
".cm-activeLineGutter": {
55+
backgroundColor: "var(--cm-gutter-background)",
56+
},
5857

59-
".cm-foldPlaceholder": {
60-
backgroundColor: "transparent",
61-
border: "none",
62-
color: "#ddd",
63-
},
58+
".cm-foldPlaceholder": {
59+
backgroundColor: "transparent",
60+
border: "none",
61+
color: "#ddd",
62+
},
6463

65-
".cm-tooltip": {
66-
border: "none",
67-
backgroundColor: "var(--cm-hints-background)",
68-
color: "var(--cm-hints-foreground)",
69-
},
70-
".cm-tooltip .cm-tooltip-arrow:before": {
71-
borderTopColor: "transparent",
72-
borderBottomColor: "transparent",
73-
},
74-
".cm-tooltip .cm-tooltip-arrow:after": {
75-
borderTopColor: "var(--cm-hints-background)",
76-
borderBottomColor: "var(--cm-hints-background)",
77-
},
78-
".cm-tooltip-autocomplete": {
79-
"& > ul > li[aria-selected]": {
80-
backgroundColor: "var(--cm-hints-active-background)",
81-
color: "var(--cm-hints-active-foreground)",
82-
},
64+
".cm-tooltip": {
65+
border: "none",
66+
backgroundColor: "var(--cm-hints-background)",
67+
color: "var(--cm-hints-foreground)",
68+
},
69+
".cm-tooltip .cm-tooltip-arrow:before": {
70+
borderTopColor: "transparent",
71+
borderBottomColor: "transparent",
72+
},
73+
".cm-tooltip .cm-tooltip-arrow:after": {
74+
borderTopColor: "var(--cm-hints-background)",
75+
borderBottomColor: "var(--cm-hints-background)",
76+
},
77+
".cm-tooltip-autocomplete": {
78+
"& > ul > li[aria-selected]": {
79+
backgroundColor: "var(--cm-hints-active-background)",
80+
color: "var(--cm-hints-active-foreground)",
8381
},
8482
},
85-
{ dark: true },
86-
)
83+
})
8784

8885
/// The highlighting style for code using CSS custom properties.
8986
export const oneDarkHighlightStyle = HighlightStyle.define([

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default class MiniGraphiQL extends Component<
6262
)
6363

6464
return (
65-
<div className="flex text-sm *:w-1/2">
65+
<div className="[&:not(:first-child)]:_mt-6 grid grid-cols-2 border border-neu-200 text-sm dark:border-neu-50">
6666
{Object.keys(this.state.variableToType).length > 0 ? (
6767
<div className="hasVariables">
6868
{editor}

‎src/components/marked/query-editor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export class QueryEditor extends Component<QueryEditorProps> {
140140
render() {
141141
return (
142142
<div
143-
className="query-editor"
143+
className="query-editor flex flex-col [&>:last-child]:basis-full"
144144
ref={e => {
145145
this.domNode = e
146146
}}

‎src/components/marked/result-viewer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component } from "react"
22
import { EditorView } from "@codemirror/view"
33
import { EditorState } from "@codemirror/state"
4+
// todo: perhaps custom grammar to match the shiki highlighting?
45
import { json } from "@codemirror/lang-json"
56
import { oneDark } from "./codemirror-one-dark"
67

‎src/components/marked/syntax-highlighting.css‎

Lines changed: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
--cm-line-number: #999;
2727
--cm-cursor: #000000;
2828
--cm-selection: #d7d4f0;
29-
--cm-hints-background: #ffffff;
30-
--cm-hints-foreground: #333;
31-
--cm-hints-active-background: #08f;
29+
--cm-hints-background: hsl(var(--color-neu-0) / 0.8);
30+
--cm-hints-foreground: #080707;
31+
--cm-hints-active-background: hsl(var(--color-pri-base) / 0.1);
3232
--cm-hints-active-foreground: #ffffff;
3333
}
3434

@@ -50,45 +50,37 @@
5050
--cm-atom: #79b8ff;
5151

5252
/* Editor UI colors - dark theme */
53-
--cm-background: #24292c;
53+
--cm-background: #000;
5454
--cm-foreground: #cfd3c5;
5555
--cm-gutter-background: #1f2425;
5656
--cm-gutter-border: #1b1f20;
5757
--cm-line-number: #6a737d;
5858
--cm-cursor: #c8e1ff;
5959
--cm-selection: #3392ff44;
60-
--cm-hints-background: #24292c;
6160
--cm-hints-foreground: #e1e4e8;
62-
--cm-hints-active-background: #044289;
61+
--cm-hints-active-background: hsl(var(--color-sec-base) / 0.1);
6362
--cm-hints-active-foreground: #ffffff;
6463
}
6564

6665
/* CodeMirror 6 Editor Base Styles */
6766
.cm-editor {
68-
height: 300px;
6967
font-family: inherit;
7068
font-size: inherit;
7169
background: var(--cm-background);
7270
color: var(--cm-foreground);
7371
position: relative;
74-
overflow: hidden;
75-
}
7672

77-
.cm-scroller {
78-
overflow: auto;
79-
position: relative;
80-
}
73+
& .cm-content {
74+
padding: 16px 0;
75+
}
8176

82-
.cm-content {
83-
min-height: 1px;
84-
cursor: text;
85-
padding: 4px 0;
86-
}
77+
& .cm-line {
78+
padding: 0 0 0 16px;
79+
}
8780

88-
.cm-line {
89-
padding: 0 4px;
90-
line-height: inherit;
91-
color: inherit;
81+
& .cm-scroller {
82+
line-height: 1.5;
83+
}
9284
}
9385

9486
.cm-focused {
@@ -189,19 +181,22 @@
189181
}
190182

191183
/* Autocomplete/Hints */
192-
.cm-tooltip {
184+
.cm-editor .cm-tooltip {
185+
@apply shadow-md backdrop-blur-[6.4px] dark:border-neu-50;
186+
187+
border: 1px solid hsl(var(--color-neu-100));
193188
background: var(--cm-hints-background);
194189
color: var(--cm-hints-foreground);
195-
border: none;
196-
border-radius: 2px;
197-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
198190
font-family: inherit;
199191
font-size: inherit;
192+
193+
&.cm-completionInfo-right {
194+
@apply bg-neu-0 shadow-lg;
195+
}
200196
}
201197

202198
.cm-tooltip-autocomplete {
203199
background: var(--cm-hints-background);
204-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
205200
margin-left: -6px;
206201
position: absolute;
207202
z-index: 10;
@@ -211,8 +206,10 @@
211206
color: var(--cm-hints-foreground);
212207
}
213208

214-
.cm-completionDetail {
215-
color: var(--cm-comment);
209+
.cm-editor .cm-completionDetail {
210+
color: var(--cm-def);
211+
font-style: normal;
212+
font-size: 0.8em;
216213
}
217214

218215
.cm-completionMatchedText {
@@ -226,19 +223,15 @@
226223
margin-right: 0.5em;
227224
}
228225

229-
.cm-tooltip-autocomplete li {
230-
border-top: solid 1px #f7f7f7;
226+
.cm-tooltip.cm-tooltip-autocomplete > ul > li {
231227
color: var(--cm-hints-foreground);
232228
cursor: pointer;
233229
margin: 0;
234230
max-width: 300px;
235231
overflow: hidden;
236-
padding: 2px 6px;
237232
white-space: pre;
238-
}
239-
240-
.dark .cm-tooltip-autocomplete li {
241-
border-top-color: #333;
233+
font-size: 14px;
234+
line-height: 1.5 !important;
242235
}
243236

244237
.cm-tooltip-autocomplete li:hover {

0 commit comments

Comments
 (0)