Added YAML support (#85)

Closes #84 

- Added YAML support
- Also updated the DOM rendering bits to use markdown instead of setting
the HTML directly, which is a safer approach
- Also slightly improved the demo UI (it didn't look good with black
text on black background)
- Also added a bunch of tests

To support YAML (and potentially other formats), I updated the logic to
"resolve" tokens before using them. This is important since the [YAML
grammar/tokens](https://github.com/lezer-parser/yaml/blob/main/src/yaml.grammar)
is different from the [JSON
grammar/tokens](https://github.com/lezer-parser/json/blob/main/src/json.grammar)
(which is very similar to the [JSON5
grammar](https://github.com/dimfeld/lezer-json5/blob/master/src/json5.grammar)).
So we map the tokens from the different grammars to the equivalent token
in the "base" grammar (currently this is the JSON grammar tokens but I
think we can/should map to some other arbitrary token set which will
force us to properly implement the mappings, otherwise additional
changes made may work in JSON mode but without proper testing, may not
work in YAML mode, if the mappings were not added).

Author: imolorhe

.changeset/silly-oranges-worry.md

@@ -0,0 +1,5 @@
+---
+"codemirror-json-schema": minor
+---
+
+Added YAML support, switched back to markdown for messages, provide markdown rendering, and fix some autocompletion issues

dev/index.html

@@ -29,6 +29,7 @@
     <style>
       :root {
         --bg-color: #282c34;
+        --fbc-light-gray: #f0f0f4;
       }
       h1,
       h2,
@@ -66,10 +67,15 @@
       }
       .cm6-json-schema-hover,
       .cm-editor .cm-diagnostic-error {
+        font-size: 12px;
         padding: 0.5rem;
       }
       .cm6-json-schema-hover--description {
         margin-bottom: 0.5rem;
+        max-width: 600px;
+      }
+      .cm6-json-schema-hover--code-wrapper {
+        border-top: 1px solid #888;
       }
       .grid-row {
         display: grid;
@@ -110,6 +116,10 @@ <h2><code>package.json</code> demo</h2>
         <h2><code>package.json5</code> demo</h2>
         <div id="editor-json5"></div>
       </div>
+      <div>
+        <h2><code>package.yaml</code> demo</h2>
+        <div id="editor-yaml"></div>
+      </div>
     </div>
     <script type="module" src="./index.ts"></script>
   </body>

dev/index.ts

@@ -29,7 +29,7 @@ import {
 import { JSONSchema7 } from "json-schema";
 
 // sample data
-import { jsonText, json5Text } from "./sample-text";
+import { jsonText, json5Text, yamlText } from "./sample-text";
 import packageJsonSchema from "./package.schema.json";
 
 // json4
@@ -38,6 +38,8 @@ import { jsonSchema, updateSchema } from "../src/index";
 // json5
 import { json5Schema } from "../src/json5";
 
+import { yamlSchema } from "../src/yaml";
+
 const schema = packageJsonSchema as JSONSchema7;
 
 /**
@@ -99,9 +101,23 @@ const editor2 = new EditorView({
   parent: document.querySelector("#editor-json5")!,
 });
 
+/**
+ * yaml!
+ */
+const yamlState = EditorState.create({
+  doc: yamlText,
+  extensions: [commonExtensions, yamlSchema(schema)],
+});
+
+const editor3 = new EditorView({
+  state: yamlState,
+  parent: document.querySelector("#editor-yaml")!,
+});
+
 const handleSchemaChange = (newSchema: JSONSchema7) => {
   updateSchema(editor1, newSchema);
   updateSchema(editor2, newSchema);
+  updateSchema(editor3, newSchema);
 };
 
 // new EditorState.fi(editor1, editor2);

dev/sample-text.ts

@@ -19,3 +19,12 @@ export const json5Text = `{
   }],
   'type': '',
 }`;
+
+export const yamlText = `name: lexunicon
+version: 0.0.0
+description: A lexicon for the unicon programming language
+contributors:
+  - email: email
+    url: h
+type: ''
+`;

package.json

@@ -42,21 +42,30 @@
       "default": "./cjs/index.js"
     },
     "./json5": {
-      "import": "./dist/json5.js",
-      "types": "./dist/json5.d.ts",
-      "require": "./cjs/json5.js",
-      "default": "./cjs/json5.js"
+      "import": "./dist/json5/index.js",
+      "types": "./dist/json5/index.d.ts",
+      "require": "./cjs/json5/index.js",
+      "default": "./cjs/json5/index.js"
+    },
+    "./yaml": {
+      "import": "./dist/yaml/index.js",
+      "types": "./dist/yaml/index.d.ts",
+      "require": "./cjs/yaml/index.js",
+      "default": "./cjs/yaml/index.js"
     }
   },
   "repository": "github:acao/codemirror-json-schema",
   "homepage": "https://codemirror-json-schema.netlify.app/",
   "dependencies": {
     "@changesets/changelog-github": "^0.4.8",
+    "@codemirror/lang-yaml": "^6.0.0",
     "@sagold/json-pointer": "^5.1.1",
     "@types/json-schema": "^7.0.12",
     "@types/node": "^20.4.2",
     "json-schema": "^0.4.0",
-    "json-schema-library": "^9.1.2"
+    "json-schema-library": "^9.1.2",
+    "markdown-it": "^14.0.0",
+    "yaml": "^2.3.4"
   },
   "optionalDependencies": {
     "@codemirror/lang-json": "^6.0.1",
@@ -82,6 +91,7 @@
     "@codemirror/view": "^6.14.1",
     "@evilmartians/lefthook": "^1.4.6",
     "@lezer/common": "^1.0.3",
+    "@types/markdown-it": "^13.0.7",
     "@vitest/coverage-v8": "^0.34.6",
     "codemirror": "^6.0.1",
     "codemirror-json5": "^1.0.3",