feat(editor): richer JS/TS highlighting for JSDoc and methods

package.json

@@ -160,7 +160,7 @@
     "@deadlyjack/ajax": "^1.2.6",
     "@emmetio/codemirror6-plugin": "^0.4.1",
     "@lezer/common": "^1.5.2",
-    "@lezer/highlight": "^1.2.3",
+    "@lezer/highlight": "^1.2.5",
     "@lezer/lr": "^1.4.10",
     "@ungap/custom-elements": "^1.3.0",
     "@xterm/addon-attach": "^0.12.0",

src/cm/highlightTags.ts

@@ -0,0 +1,10 @@
+import { Tag, tags as t } from "@lezer/highlight";
+
+/**
+ * Property names in JavaScript/TypeScript: `obj.foo`, object keys and class
+ * fields. It is a sub-tag of `propertyName`, so themes that don't style it
+ * keep their `propertyName` colour, and themes that do can colour JS
+ * properties apart from methods without changing CSS properties, JSON/YAML
+ * keys or other languages that share `propertyName`.
+ */
+export const memberProperty = Tag.define("memberProperty", t.propertyName);

src/cm/modes/javascript/index.ts

@@ -0,0 +1,32 @@
+import { javascript } from "@codemirror/lang-javascript";
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { styleTags, tags as t } from "@lezer/highlight";
+import { memberProperty } from "../../highlightTags";
+import { jsdocWrap } from "../jsdoc";
+
+const highlightTags = styleTags({
+	// Lezer tags class and interface method names like property definitions;
+	// tag them as functions so themes can colour methods like other editors.
+	"MethodDeclaration/PropertyDefinition MethodDeclaration/PrivatePropertyDefinition MethodType/PropertyDefinition":
+		t.function(t.definition(t.propertyName)),
+	// Method calls keep their more specific `function(propertyName)` rule.
+	PropertyName: memberProperty,
+	PropertyDefinition: t.definition(memberProperty),
+});
+
+/**
+ * JavaScript/TypeScript support with JSDoc highlighting inside `/** *\/`
+ * comments, method names tagged as functions and property names tagged as
+ * {@link memberProperty}.
+ */
+export function javascriptSupport(
+	config: { jsx?: boolean; typescript?: boolean } = {},
+): LanguageSupport {
+	const support = javascript(config);
+	const language = support.language;
+	if (!(language instanceof LRLanguage)) return support;
+	return new LanguageSupport(
+		language.configure({ props: [highlightTags], wrap: jsdocWrap }),
+		support.support,
+	);
+}