feat(angular): highlight Angular templates with control-flow blocks (#284)

HTML files in Angular projects were highlighted as plain HTML. Languages can now declare framework UI modes with root markers (angular.json, node_modules/@angular/core); files under such a root get the framework's editor mode, re-detected when a marker appears or disappears, and the root-marker lookup is shared with language server roots. The Angular Template mode (vendored @codemirror/lang-angular, MIT) adds @if/@for/@switch/@defer/@let blocks, key and animation binding names, and colours {{ }} delimiters.

Lazily loaded editor modes are now loaded before a document's first editor opens, so a file never renders as plain text first (this also left Angular templates uncoloured).

Co-authored-by: nntndfrk <[email protected]>

src/editor/core/cm/angularLoading.test.ts

@@ -0,0 +1,31 @@
+import { expect, it } from "vitest";
+import { highlightTree, tags as t } from "@lezer/highlight";
+import { findLanguageDescription, loadSupport } from "./languages";
+import { openideaHighlightStyle } from "./highlight";
+
+it("lazily loads Angular templates with the editor's HTML and expression colours", async () => {
+  const desc = findLanguageDescription("Angular Template", "/angular/src/app/app.component.html");
+  expect(desc?.name).toBe("Angular Template");
+  const support = await loadSupport(desc!);
+  expect(support?.language.name).toBe("angular");
+  const doc = '<button [disabled]="busy">{{ name }}</button> @if (ready) { <p>Ready</p> }';
+  const tokens: { text: string; cls: string }[] = [];
+  highlightTree(support!.language.parser.parse(doc), openideaHighlightStyle, (from, to, cls) => {
+    tokens.push({ text: doc.slice(from, to), cls });
+  });
+  for (const [text, tag] of [
+    ["button", t.tagName],
+    ["disabled", t.attributeName],
+    ["busy", t.variableName],
+    ["{{", t.special(t.brace)],
+    ["name", t.variableName],
+    ["}}", t.special(t.brace)],
+    ["@if", t.controlKeyword],
+  ] as const) {
+    const cls = openideaHighlightStyle.style([tag]);
+    expect(cls).toBeTruthy();
+    expect(tokens).toContainEqual({ text, cls });
+  }
+  expect(findLanguageDescription("HTML", "/plain/index.html")?.name).toBe("HTML");
+  expect(findLanguageDescription("Batch", "/plain/build.bat")?.name).toBe("Batch");
+});