.js file imports and schema loading as statefield

jsonnext · Oct 21, 2023 · 6bf71be · 6bf71be
1 parent ca1bed7
commit 6bf71be
Show file tree

Hide file tree

Showing 28 changed files with 386 additions and 172 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -88,6 +88,19 @@
   </head>
   <body class="replit-ui-theme-root dark">
     <h1><code>codemirror-json-schema</code> demo</h1>
+    <div>
+      <select id="schema-selection">
+        <option value="package.json">package.json</option>
+        <option value="tsconfig.json">tsconfig.json</option>
+        <option
+          value="compose-spec/compose-spec/master/schema/compose-spec.json"
+        >
+          docker-compose.yml
+        </option>
+        <option value="github-action.json">github action</option>
+        <option value="eslintrc.json">eslintrc.json</option>
+      </select>
+    </div>
     <div class="grid-row">
       <div>
         <h2><code>package.json</code> demo</h2>

diff --git a/dev/index.ts b/dev/index.ts
@@ -1,19 +1,39 @@
-import { EditorState } from "@codemirror/state";
-import { gutter, EditorView, lineNumbers } from "@codemirror/view";
-import { basicSetup } from "codemirror";
-import { history } from "@codemirror/commands";
-import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
+import { EditorState, StateEffect, StateField } from "@codemirror/state";
+import {
+  gutter,
+  EditorView,
+  lineNumbers,
+  drawSelection,
+  keymap,
+  highlightActiveLineGutter,
+} from "@codemirror/view";
+// import { basicSetup } from "@codemirror/basic-setup";
 import { lintGutter } from "@codemirror/lint";
-import { bracketMatching, syntaxHighlighting } from "@codemirror/language";
+import { lintKeymap } from "@codemirror/lint";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import {
+  syntaxHighlighting,
+  indentOnInput,
+  bracketMatching,
+  foldGutter,
+  foldKeymap,
+} from "@codemirror/language";
 import { oneDarkHighlightStyle, oneDark } from "@codemirror/theme-one-dark";
+import {
+  autocompletion,
+  completionKeymap,
+  closeBrackets,
+  closeBracketsKeymap,
+} from "@codemirror/autocomplete";
+
 import { JSONSchema7 } from "json-schema";
 
 // sample data
 import { jsonText, json5Text } from "./sample-text";
 import packageJsonSchema from "./package.schema.json";
 
 // json4
-import { jsonSchema } from "../src";
+import { jsonSchema, updateSchema } from "../src/index";
 
 // json5
 import { json5Schema } from "../src/json5";
@@ -27,12 +47,25 @@ const schema = packageJsonSchema as JSONSchema7;
 const commonExtensions = [
   gutter({ class: "CodeMirror-lint-markers" }),
   bracketMatching(),
-  basicSetup,
+  highlightActiveLineGutter(),
+  // basicSetup,
   closeBrackets(),
   history(),
   autocompletion(),
   lineNumbers(),
   lintGutter(),
+  indentOnInput(),
+  drawSelection(),
+  foldGutter(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+
   oneDark,
   EditorView.lineWrapping,
   EditorState.tabSize.of(2),
@@ -48,7 +81,7 @@ const state = EditorState.create({
   extensions: [commonExtensions, jsonSchema(schema)],
 });
 
-new EditorView({
+const editor1 = new EditorView({
   state,
   parent: document.querySelector("#editor")!,
 });
@@ -61,12 +94,31 @@ const json5State = EditorState.create({
   extensions: [commonExtensions, json5Schema(schema)],
 });
 
-new EditorView({
+const editor2 = new EditorView({
   state: json5State,
   parent: document.querySelector("#editor-json5")!,
 });
+const handleSchema = (newSchema: JSONSchema7) => {
+  updateSchema(editor1, newSchema);
+  updateSchema(editor2, newSchema);
+};
 
+handleSchema(schema);
+// new EditorState.fi(editor1, editor2);
 // Hot Module Replacement
 // if (module.hot) {
 //   module.hot.accept();
 // }
+
+const schemaSelect = document.getElementById("schema-selection");
+
+schemaSelect!.onchange = async (e) => {
+  const val = e.target!.value!;
+  if (!val) {
+    return;
+  }
+  const data = await (
+    await fetch(`https://json.schemastore.org/${val}`)
+  ).json();
+  handleSchema(data);
+};
diff --git a/package.json b/package.json
@@ -77,7 +77,12 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@evilmartians/lefthook": "^1.4.6",
     "@vitest/coverage-v8": "^0.33.0",
-    "codemirror": "^6.0.1",
+    "@codemirror/language": "^6.8.0",
+    "@codemirror/lint": "^6.4.0",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.14.1",
+    "@codemirror/basic-setup": "^0.20.0",
+    "@lezer/common": "^1.0.3",
     "codemirror-json5": "^1.0.3",
     "happy-dom": "^10.3.2",
     "json5": "^2.2.3",