feat(editor): highlight tags inside doc comments (#2200)

Tags inside doc comments looked like the rest of the comment text. They now get their own colours in Java, Kotlin, JavaScript, TypeScript, JSX, TSX and PHP: block and inline tags, tag values such as a `@param` name, KDoc links, and HTML markup from a fixed element list. Plain comments, strings and an `@` inside text get nothing. Colours come from new theme tokens, with entries under Settings > Editor > Color Scheme, in every built-in theme, and through .icls and IntelliJ theme import.

Only comment nodes in the visible ranges are scanned. The Kotlin tokenizer records doc comment state in its parser state, so long comments stay fast and correct.

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

src/features/plugins/intellijTheme.ts

@@ -135,6 +135,12 @@ export const ICLS_ATTRIBUTES: Record<string, Array<[Part, string]>> = {
   DEFAULT_NUMBER: [["FOREGROUND", "--syn-number"]],
   DEFAULT_LINE_COMMENT: [["FOREGROUND", "--syn-comment"]],
   DEFAULT_DOC_COMMENT: [["FOREGROUND", "--syn-doc-comment"]],
+  DEFAULT_DOC_COMMENT_TAG: [["FOREGROUND", "--syn-doc-comment-tag"]],
+  DEFAULT_DOC_COMMENT_TAG_VALUE: [["FOREGROUND", "--syn-doc-comment-tag-value"]],
+  DEFAULT_DOC_MARKUP: [
+    ["FOREGROUND", "--syn-doc-markup"],
+    ["BACKGROUND", "--syn-doc-markup-bg"],
+  ],
   DEFAULT_FUNCTION_DECLARATION: [["FOREGROUND", "--syn-function"]],
   DEFAULT_FUNCTION_CALL: [["FOREGROUND", "--syn-function-call"]],
   DEFAULT_CLASS_NAME: [["FOREGROUND", "--syn-type"]],

src/features/settings/__tests__/colorScheme.test.tsx

@@ -121,6 +121,42 @@ describe("scheme actions", () => {
   });
 });
 
+describe("doc comment scheme attributes", () => {
+  it.each([
+    ["en", "Doc comment", "Tag", "Tag value", "Markup"],
+    ["zh", "文档注释", "标签", "标签值", "标记"],
+  ])("groups, previews, edits and resets doc attributes in %s", async (locale, group, tag, valueName, markup) => {
+    await act(async () => {
+      await setLocale(locale);
+    });
+    try {
+      act(() => stage("editor.colorScheme", "global", "editor.colorScheme", "dark"));
+      schemePage("editor.colorScheme.language-defaults");
+      const preview = screen.getByLabelText(locale === "en" ? "Color scheme preview" : "配色方案预览");
+      for (const [sample, label, id] of [
+        ["@param", tag, "docCommentTag"],
+        ["id", valueName, "docCommentTagValue"],
+        ["<b>", markup, "docCommentMarkup"],
+      ]) {
+        act(() => fireEvent.click(within(preview).getByText(sample!)));
+        expect(screen.getAllByRole("treeitem", { name: group })).toHaveLength(1);
+        expect(screen.getByRole("treeitem", { name: label, selected: true })).toBeInTheDocument();
+        act(() => fireEvent.click(screen.getByRole("checkbox", { name: locale === "en" ? "Bold" : "粗体" })));
+        act(() => fireEvent.click(screen.getByRole("checkbox", { name: locale === "en" ? "Italic" : "斜体" })));
+        expect(value("colorOverrides")).toMatchObject({ dark: { [id!]: { bold: true, italic: true } } });
+      }
+      act(() =>
+        fireEvent.click(screen.getByRole("button", { name: locale === "en" ? "Restore Defaults" : "恢复默认值" })),
+      );
+      expect(value("colorOverrides")).toEqual({});
+    } finally {
+      await act(async () => {
+        await setLocale("en");
+      });
+    }
+  });
+});
+
 describe("Go scheme attributes", () => {
   it("translates the attribute tree and preview selection in Chinese", async () => {
     await act(async () => {

src/features/settings/pages/editor/colorScheme.tsx

@@ -249,9 +249,12 @@ const SAMPLES: Record<string, CodeSample> = {
       ],
       [
         ["  /**", "docComment"],
-        [" doc comment ", "docComment"],
-        ["@param", "docComment"],
-        [" id", "docComment"],
+        [" <b>", "docCommentMarkup"],
+        ["doc comment", "docComment"],
+        ["</b> ", "docCommentMarkup"],
+        ["@param", "docCommentTag"],
+        [" ", "docComment"],
+        ["id", "docCommentTagValue"],
         [" */", "docComment"],
       ],
       [