Skip to content

Commit 5128c0e

Browse files
acaoacao
committed
.js file imports and schema loading as statefield
1 parent 56c88cd commit 5128c0e

28 files changed

+387
-150
lines changed

‎dev/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,19 @@
8888
</head>
8989
<body class="replit-ui-theme-root dark">
9090
<h1><code>codemirror-json-schema</code> demo</h1>
91+
<div>
92+
<select id="schema-selection">
93+
<option value="package.json">package.json</option>
94+
<option value="tsconfig.json">tsconfig.json</option>
95+
<option
96+
value="compose-spec/compose-spec/master/schema/compose-spec.json"
97+
>
98+
docker-compose.yml
99+
</option>
100+
<option value="github-action.json">github action</option>
101+
<option value="eslintrc.json">eslintrc.json</option>
102+
</select>
103+
</div>
91104
<div class="grid-row">
92105
<div>
93106
<h2><code>package.json</code> demo</h2>

‎dev/index.ts

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,39 @@
1-
import { EditorState } from "@codemirror/state";
2-
import { gutter, EditorView, lineNumbers } from "@codemirror/view";
3-
import { basicSetup } from "codemirror";
4-
import { history } from "@codemirror/commands";
5-
import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
1+
import { EditorState, StateEffect, StateField } from "@codemirror/state";
2+
import {
3+
gutter,
4+
EditorView,
5+
lineNumbers,
6+
drawSelection,
7+
keymap,
8+
highlightActiveLineGutter,
9+
} from "@codemirror/view";
10+
// import { basicSetup } from "@codemirror/basic-setup";
611
import { lintGutter } from "@codemirror/lint";
7-
import { bracketMatching, syntaxHighlighting } from "@codemirror/language";
12+
import { lintKeymap } from "@codemirror/lint";
13+
import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
14+
import {
15+
syntaxHighlighting,
16+
indentOnInput,
17+
bracketMatching,
18+
foldGutter,
19+
foldKeymap,
20+
} from "@codemirror/language";
821
import { oneDarkHighlightStyle, oneDark } from "@codemirror/theme-one-dark";
22+
import {
23+
autocompletion,
24+
completionKeymap,
25+
closeBrackets,
26+
closeBracketsKeymap,
27+
} from "@codemirror/autocomplete";
28+
929
import { JSONSchema7 } from "json-schema";
1030

1131
// sample data
1232
import { jsonText, json5Text } from "./sample-text";
1333
import packageJsonSchema from "./package.schema.json";
1434

1535
// json4
16-
import { jsonSchema } from "../src";
36+
import { jsonSchema, updateSchema } from "../src/index";
1737

1838
// json5
1939
import { json5Schema } from "../src/json5";
@@ -27,12 +47,25 @@ const schema = packageJsonSchema as JSONSchema7;
2747
const commonExtensions = [
2848
gutter({ class: "CodeMirror-lint-markers" }),
2949
bracketMatching(),
30-
basicSetup,
50+
highlightActiveLineGutter(),
51+
// basicSetup,
3152
closeBrackets(),
3253
history(),
3354
autocompletion(),
3455
lineNumbers(),
3556
lintGutter(),
57+
indentOnInput(),
58+
drawSelection(),
59+
foldGutter(),
60+
keymap.of([
61+
...closeBracketsKeymap,
62+
...defaultKeymap,
63+
...historyKeymap,
64+
...foldKeymap,
65+
...completionKeymap,
66+
...lintKeymap,
67+
]),
68+
3669
oneDark,
3770
EditorView.lineWrapping,
3871
EditorState.tabSize.of(2),
@@ -48,7 +81,7 @@ const state = EditorState.create({
4881
extensions: [commonExtensions, jsonSchema(schema)],
4982
});
5083

51-
new EditorView({
84+
const editor1 = new EditorView({
5285
state,
5386
parent: document.querySelector("#editor")!,
5487
});
@@ -61,12 +94,31 @@ const json5State = EditorState.create({
6194
extensions: [commonExtensions, json5Schema(schema)],
6295
});
6396

64-
new EditorView({
97+
const editor2 = new EditorView({
6598
state: json5State,
6699
parent: document.querySelector("#editor-json5")!,
67100
});
101+
const handleSchema = (newSchema: JSONSchema7) => {
102+
updateSchema(editor1, newSchema);
103+
updateSchema(editor2, newSchema);
104+
};
68105

106+
handleSchema(schema);
107+
// new EditorState.fi(editor1, editor2);
69108
// Hot Module Replacement
70109
// if (module.hot) {
71110
// module.hot.accept();
72111
// }
112+
113+
const schemaSelect = document.getElementById("schema-selection");
114+
115+
schemaSelect!.onchange = async (e) => {
116+
const val = e.target!.value!;
117+
if (!val) {
118+
return;
119+
}
120+
const data = await (
121+
await fetch(`https://json.schemastore.org/${val}`)
122+
).json();
123+
handleSchema(data);
124+
};

‎package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@
7878
"@evilmartians/lefthook": "^1.4.6",
7979
"@vitest/coverage-v8": "^0.34.6",
8080
"codemirror": "^6.0.1",
81+
"@codemirror/language": "^6.8.0",
82+
"@codemirror/lint": "^6.4.0",
83+
"@codemirror/state": "^6.2.1",
84+
"@codemirror/view": "^6.14.1",
85+
"@codemirror/basic-setup": "^0.20.0",
86+
"@lezer/common": "^1.0.3",
8187
"codemirror-json5": "^1.0.3",
8288
"happy-dom": "^10.3.2",
8389
"json5": "^2.2.3",

‎pnpm-lock.yaml

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

‎src/__tests__/__helpers__/completion.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { describe, it, expect, vitest, Mock } from "vitest";
1+
import { expect, vitest } from "vitest";
22

33
import { json, jsonLanguage } from "@codemirror/lang-json";
44
import { json5, json5Language } from "codemirror-json5";
@@ -10,10 +10,11 @@ import {
1010
CompletionResult,
1111
CompletionSource,
1212
} from "@codemirror/autocomplete";
13-
import { jsonCompletion } from "../../json-completion";
13+
import { jsonCompletion } from "../../json-completion.js";
1414
import { JSONSchema7 } from "json-schema";
15-
import { testSchema2 } from "../__fixtures__/schemas";
15+
import { testSchema2 } from "../__fixtures__/schemas.js";
1616
import { EditorView } from "@codemirror/view";
17+
import { stateExtensions } from "../../state.js";
1718

1819
vitest.mock("@codemirror/autocomplete", async () => {
1920
const mod = await vitest.importActual<
@@ -58,8 +59,9 @@ export async function expectCompletion(
5859
selection: { anchor: cur },
5960
extensions: [
6061
jsonMode(),
62+
stateExtensions(currentSchema),
6163
jsonLang.data.of({
62-
autocomplete: jsonCompletion(currentSchema, { mode: conf.mode }),
64+
autocomplete: jsonCompletion({ mode: conf.mode }),
6365
}),
6466
],
6567
});

0 commit comments

Comments
 (0)