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

* feat(editor): highlight JSDoc inside JS/TS block comments

* feat(editor): colour JS/TS methods as functions and refine JSDoc highlighting

- Tag class and interface method names as function definitions and give
  method calls, method definitions and function declaration names the
  function colour in all built-in themes.
- Bump @lezer/highlight to 1.2.5, which fixes the precedence of
  context-specific highlight rules added through parser props.
- Leave JSDoc braces and punctuation as comment text, handle escaped
  quotes in types and quoted brackets in optional defaults, and skip
  /*** comments like TypeScript does.
- Add unit tests for JSDoc and method highlighting.

* fix(themes): colour properties differently from methods

Themes that reused the function colour for properties made this.foo look
like a method call. Give properties the palette's property colour where it
has one (Tokyo Night, Catppuccin) and the foreground otherwise, and stop
colouring Noctis Lilac property definitions as functions.

* fix(themes): colour JS properties apart from methods without affecting other languages

propertyName is shared by CSS properties, JSON/YAML keys, Go/C++ fields and
(through attributeName) HTML attributes, so giving it its own colour moved
those away from how VS Code colours them. Restore the themes' propertyName
colour and tag JS/TS property names with memberProperty, a sub-tag of
propertyName that falls back to it in themes that don't style it. Built-in
themes colour it like their VS Code counterparts.

Author: bajrangCoder

bun.lock

@@ -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",

package-lock.json

@@ -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);

package.json

@@ -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,
+	);
+}