YAML, TS and JS highlighting

dep_common.ts

@@ -2,11 +2,8 @@ export {
   autocompletion,
   CompletionContext,
   completionKeymap,
-} from "https://esm.sh/@codemirror/autocomplete@6.3.0?external=@codemirror/state,@lezer/common";
+} from "@codemirror/autocomplete";
-export type {
+export type { Completion, CompletionResult } from "@codemirror/autocomplete";
-  Completion,
-  CompletionResult,
-} from "https://esm.sh/@codemirror/autocomplete@6.3.0?external=@codemirror/state,@lezer/common,@codemirror/view";
 
 export * as YAML from "https://deno.land/std@0.158.0/encoding/yaml.ts";
 export * as path from "https://deno.land/std@0.158.0/path/mod.ts";
@@ -85,11 +82,19 @@ export {
   foldNodeProp,
   HighlightStyle,
   indentNodeProp,
+  indentOnInput,
   Language,
   languageDataProp,
   LanguageDescription,
   LanguageSupport,
   ParseContext,
+  StreamLanguage,
   syntaxHighlighting,
   syntaxTree,
 } from "@codemirror/language";
+
+export { yaml as yamlLanguage } from "https://esm.sh/@codemirror/legacy-modes@6.1.0/mode/yaml?external=@codemirror/language";
+export {
+  javascriptLanguage,
+  typescriptLanguage,
+} from "https://esm.sh/@codemirror/lang-javascript@6.1.0?external=@codemirror/language,@codemirror/autocomplete,@codemirror/view,@codemirror/state,@codemirror/lint,@lezer/common,@lezer/lr,@lezer/javascript,@codemirror/commands";

import_map.json

@@ -3,10 +3,13 @@
     "@codemirror/state": "https://esm.sh/@codemirror/state@6.1.2",
     "@lezer/common": "https://esm.sh/@lezer/common@1.0.1",
     "@lezer/markdown": "https://esm.sh/@lezer/markdown@1.0.2?external=@lezer/common,@codemirror/language,@lezer/highlight",
+    "@lezer/javascript": "https://esm.sh/@lezer/javascript@1.0.2?external=@lezer/common,@codemirror/language,@lezer/highlight",
     "@codemirror/language": "https://esm.sh/@codemirror/language@6.2.1?external=@codemirror/state,@lezer/common,@lezer/lr,@codemirror/view,@lezer/highlight",
     "@codemirror/commands": "https://esm.sh/@codemirror/commands@6.1.1?external=@codemirror/state,@codemirror/view",
     "@codemirror/view": "https://esm.sh/@codemirror/view@6.3.0?external=@codemirror/state,@lezer/common",
     "@lezer/highlight": "https://esm.sh/@lezer/highlight@1.1.1?external=@lezer/common",
+    "@codemirror/autocomplete": "https://esm.sh/@codemirror/autocomplete@6.3.0?external=@codemirror/state,@lezer/common",
+    "@codemirror/lint": "https://esm.sh/@codemirror/lint@6.0.0?external=@codemirror/state,@lezer/common",
     "$sb/": "./packages/",
     "handlebars": "https://esm.sh/handlebars",
     "@lezer/lr": "https://esm.sh/@lezer/lr",

packages/common/parser.ts

@@ -1,10 +1,13 @@
 import {
   BlockContext,
   Language,
+  LanguageDescription,
+  LanguageSupport,
   LeafBlock,
   LeafBlockParser,
   markdown,
   MarkdownConfig,
+  parseCode,
   styleTags,
   Table,
   tags as t,
@@ -17,7 +20,6 @@ import {
   mdExtensionSyntaxConfig,
 } from "./markdown_ext.ts";
 
-// import { markdown } from "./markdown/index.ts";
 export const pageLinkRegex = /^\[\[([^\]]+)\]\]/;
 
 const WikiLink: MarkdownConfig = {

packages/web/editor.tsx

@@ -7,7 +7,6 @@ import {
   closeBracketsKeymap,
   completionKeymap,
   CompletionResult,
-  defaultHighlightStyle,
   drawSelection,
   dropCursor,
   EditorSelection,
@@ -16,16 +15,23 @@ import {
   highlightSpecialChars,
   history,
   historyKeymap,
+  indentOnInput,
   indentWithTab,
+  javascriptLanguage,
   KeyBinding,
   keymap,
+  LanguageDescription,
+  LanguageSupport,
   runScopeHandlers,
   searchKeymap,
   standardKeymap,
+  StreamLanguage,
   syntaxHighlighting,
   syntaxTree,
+  typescriptLanguage,
   ViewPlugin,
   ViewUpdate,
+  yamlLanguage,
 } from "../../dep_common.ts";
 import { SilverBulletHooks } from "../common/manifest.ts";
 // import { markdown } from "../common/_markdown/index.ts";
@@ -413,6 +419,23 @@ export class Editor {
       extensions: [
         markdown({
           base: buildMarkdown(this.mdExtensions),
+          codeLanguages: [
+            LanguageDescription.of({
+              name: "yaml",
+              alias: ["meta", "data"],
+              support: new LanguageSupport(StreamLanguage.define(yamlLanguage)),
+            }),
+            LanguageDescription.of({
+              name: "javascript",
+              alias: ["js"],
+              support: new LanguageSupport(javascriptLanguage),
+            }),
+            LanguageDescription.of({
+              name: "typescript",
+              alias: ["ts"],
+              support: new LanguageSupport(typescriptLanguage),
+            }),
+          ],
           addKeymap: true,
         }),
         syntaxHighlighting(customMarkdownStyle(this.mdExtensions)),
@@ -429,6 +452,7 @@ export class Editor {
         history(),
         drawSelection(),
         dropCursor(),
+        indentOnInput(),
         EditorView.lineWrapping,
         lineWrapper([
           { selector: "ATXHeading1", class: "sb-line-h1" },