Mostly working except yaml codeblocks

packages/web/commands.ts

@@ -1,5 +1,5 @@
 import { EditorSelection, StateCommand, Transaction } from "@codemirror/state";
-import { Text } from "@codemirror/text";
+import { Text } from "@codemirror/state";
 
 export function insertMarker(marker: string): StateCommand {
   return ({ state, dispatch }) => {

packages/web/editor.tsx

@@ -3,10 +3,14 @@ import {
   completionKeymap,
   CompletionResult,
 } from "@codemirror/autocomplete";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { indentWithTab, standardKeymap } from "@codemirror/commands";
-import { history, historyKeymap } from "@codemirror/history";
-import { bracketMatching } from "@codemirror/matchbrackets";
+import { history, historyKeymap } from "@codemirror/commands";
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  syntaxHighlighting,
+} from "@codemirror/language";
 import { searchKeymap } from "@codemirror/search";
 import { EditorSelection, EditorState } from "@codemirror/state";
 import {
@@ -315,7 +319,8 @@ export class Editor {
         history(),
         drawSelection(),
         dropCursor(),
-        customMarkdownStyle(this.mdExtensions),
+        syntaxHighlighting(customMarkdownStyle(this.mdExtensions)),
+        // syntaxHighlighting(defaultHighlightStyle),
         bracketMatching(),
         closeBrackets(),
         autocompletion({

packages/web/line_wrapper.ts

@@ -1,7 +1,13 @@
 import { syntaxTree } from "@codemirror/language";
-import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+} from "@codemirror/view";
 
-import { Range } from "@codemirror/rangeset";
+import { Range } from "@codemirror/state";
 
 interface WrapElement {
   selector: string;
@@ -17,7 +23,7 @@ function wrapLines(view: EditorView, wrapElements: WrapElement[]) {
     syntaxTree(view.state).iterate({
       from,
       to,
-      enter: (type, from, to) => {
+      enter: ({ type, from, to }) => {
         const bodyText = doc.sliceString(from, to);
         for (let wrapElement of wrapElements) {
           if (type.name == wrapElement.selector) {
@@ -41,7 +47,7 @@ function wrapLines(view: EditorView, wrapElements: WrapElement[]) {
           }
         }
       },
-      leave(type, from: number, to: number) {
+      leave({ type }) {
         for (let wrapElement of wrapElements) {
           if (type.name == wrapElement.selector && wrapElement.nesting) {
             elementStack.pop();

packages/web/package.json

@@ -26,27 +26,21 @@
     "dist"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^0.19.1",
-    "@codemirror/closebrackets": "^0.19.1",
-    "@codemirror/commands": "^0.19.8",
-    "@codemirror/highlight": "^0.19.0",
-    "@codemirror/history": "^0.19.2",
-    "@codemirror/lang-html": "^0.19.4",
-    "@codemirror/lang-javascript": "^0.19.7",
-    "@codemirror/lang-markdown": "^0.19.6",
-    "@codemirror/language": "^0.19.0",
-    "@codemirror/legacy-modes": "^0.19.1",
-    "@codemirror/matchbrackets": "^0.19.4",
-    "@codemirror/search": "^0.19.9",
-    "@codemirror/state": "^0.19.7",
-    "@codemirror/stream-parser": "^0.19.9",
-    "@codemirror/text": "^0.19.6",
-    "@codemirror/view": "^0.19.42",
+    "@codemirror/autocomplete": "6.0.1",
+    "@codemirror/commands": "6.0.0",
+    "@codemirror/lang-javascript": "6.0.0",
+    "@codemirror/lang-markdown": "6.0.0",
+    "@codemirror/language": "6.0.0",
+    "@codemirror/legacy-modes": "6.0.0",
+    "@codemirror/search": "6.0.0",
+    "@codemirror/state": "6.0.0",
+    "@codemirror/view": "6.0.0",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-solid-svg-icons": "6.0.0",
     "@fortawesome/react-fontawesome": "0.1.17",
     "@jest/globals": "^27.5.1",
-    "@lezer/markdown": "^0.15.0",
+    "@lezer/highlight": "1.0.0",
+    "@lezer/markdown": "1.0.0",
     "fake-indexeddb": "^3.1.7",
     "fuzzysort": "^1.9.0",
     "jest": "^27.5.1",

packages/web/style.ts

@@ -1,9 +1,10 @@
-import { HighlightStyle, tags as t } from "@codemirror/highlight";
+import { HighlightStyle } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
 import * as ct from "@silverbulletmd/common/customtags";
 import { MDExt } from "@silverbulletmd/common/markdown_ext";
 
 export default function highlightStyles(mdExtension: MDExt[]) {
-  return HighlightStyle.define([
+  const hls = HighlightStyle.define([
     { tag: t.heading1, class: "h1" },
     { tag: t.heading2, class: "h2" },
     { tag: t.heading3, class: "h3" },
@@ -29,7 +30,7 @@ export default function highlightStyles(mdExtension: MDExt[]) {
     { tag: t.literal, class: "literal" },
     { tag: t.keyword, class: "keyword" },
     { tag: t.list, class: "list" },
-    { tag: t.definition, class: "li" },
+    // { tag: t.def, class: "li" },
     { tag: t.string, class: "string" },
     { tag: t.number, class: "number" },
     { tag: [t.regexp, t.escape, t.special(t.string)], class: "string2" },
@@ -44,4 +45,12 @@ export default function highlightStyles(mdExtension: MDExt[]) {
       return { tag: mdExt.tag, ...mdExt.styles };
     }),
   ]);
+  const fn0 = hls.style;
+  // Hack: https://discuss.codemirror.net/t/highlighting-that-seems-ignored-in-cm6/4320/16
+  // @ts-ignore
+  hls.style = (tags) => {
+    return fn0(tags || []);
+  };
+
+  return hls;
 }