Skip to content

Dedicated markdown-fence grammar support for angular-ts and angular-html#67357

Open
kbrilla wants to merge 3 commits intoangular:mainfrom
kbrilla:fix/issue-66641-vscode-only
Open

Dedicated markdown-fence grammar support for angular-ts and angular-html#67357
kbrilla wants to merge 3 commits intoangular:mainfrom
kbrilla:fix/issue-66641-vscode-only

Conversation

@kbrilla
Copy link
Contributor

@kbrilla kbrilla commented Feb 27, 2026

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

In markdown fenced Angular snippets (angular-ts / angular-html), Angular template syntax is not consistently tokenized as Angular-aware scopes.

This shows up as binding attributes/values and related expressions being treated like generic HTML attribute strings instead of Angular expression scopes.

Also, fixing this naively can cause a second issue: Angular binding highlighting bleeding outside fenced blocks into plain markdown HTML.

Fixes: #66641

What is the new behavior?

What is the behavior in this PR?

  • Adds dedicated markdown-fence grammar handling for angular-ts and angular-html.
  • Ensures Angular-aware tokenization inside fenced Angular blocks (bindings, expressions, interpolation, control flow).
  • Prevents Angular binding-token bleed into plain markdown HTML outside fenced Angular blocks.
  • Includes deterministic e2e coverage for fenced-scope behavior and non-bleed behavior.
image image

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

  • This branch targets main and is scoped to VS Code extension grammar behavior for markdown-fenced Angular snippets.
  • Validation runs:
    • pnpm bazel test //vscode-ng-language-service/integration/e2e:test --test_output=errors --test_env=PATH=/opt/X11/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin --nocache_test_results (pass)
    • pnpm --dir vscode-ng-language-service run test (pass)
  • E2E coverage verifies both:
    • positive behavior: Angular-aware tokenization inside fenced angular-ts / angular-html blocks,
    • negative behavior: no Angular binding-token bleed into plain markdown HTML outside fences.
  • Token assertions were tightened for key fenced cases using exact token text and exact tokenInfo.type checks to reduce false positives.
  • Grammar fixtures and assertions are deterministic to keep the suite stable and reduce environment-dependent flakiness.
  • No additional syntax snapshot fixtures were added under vscode-ng-language-service/syntaxes/test/data because the risk addressed here is integration-level (fenced markdown + grammar injections + non-bleed boundaries), and this is covered by deterministic e2e assertions in this PR.

@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: vscode-extension Issues related to the Angular Language Service VsCode extension labels Feb 27, 2026
@ngbot ngbot bot added this to the Backlog milestone Feb 27, 2026
@angular-robot angular-robot bot added the area: docs Related to the documentation label Feb 27, 2026
@kbrilla kbrilla force-pushed the fix/issue-66641-vscode-only branch from 74da7a0 to e20881d Compare February 27, 2026 15:11
@kbrilla kbrilla force-pushed the fix/issue-66641-vscode-only branch 9 times, most recently from b19a982 to ce218eb Compare March 1, 2026 18:51
@kbrilla kbrilla marked this pull request as ready for review March 1, 2026 19:25
@kbrilla kbrilla requested a review from JeanMeche March 1, 2026 19:25
cb: (error: any, exitCode?: number) => void,
): Promise<void> {
const jasmine = new Jasmine({projectBaseDir: __dirname});
(globalThis.jasmine as {DEFAULT_TIMEOUT_INTERVAL: number}).DEFAULT_TIMEOUT_INTERVAL = 60_000;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you hit some some timouts on the tests ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but they were caused by macOS Keychain. Will remove that change here as it is mitigated.

@JeanMeche JeanMeche requested a review from atscott March 1, 2026 20:15
Comment on lines +47 to +48
'--password-store=basic',
'--use-mock-keychain',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added to stop timeouts caused by macOS keychain

@pullapprove pullapprove bot requested a review from devversion March 1, 2026 21:29
@kbrilla kbrilla force-pushed the fix/issue-66641-vscode-only branch 2 times, most recently from d9f4d67 to cd05b42 Compare March 2, 2026 21:03
kbrilla added 3 commits March 3, 2026 15:06
Stabilizes e2e activation/waits, runner launch args/timeouts, and test constants for markdown fixture targeting.
Adds angular-ts/angular-html markdown fence grammars and injection wiring for inline template/styles and host bindings in fenced contexts.
Include the fenced inline-template scope fix and checklist cleanup in the e2e coverage update so branch history stays at three commits.
@kbrilla kbrilla force-pushed the fix/issue-66641-vscode-only branch from caea029 to 7e27f89 Compare March 3, 2026 14:08
export const FOO_TEMPLATE_URI = pathToFileURL(FOO_TEMPLATE).href;
export const FOO_COMPONENT = join(PROJECT_PATH, 'app', 'foo.component.ts');
export const FOO_COMPONENT_URI = pathToFileURL(FOO_COMPONENT).href;
export const MARKDOWN_FENCES = join(PROJECT_PATH, 'app', 'markdown-fences.md');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file doesn't exist in this commit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was part of the next commit. Moved this change to the test commit too

@kbrilla kbrilla requested a review from JeanMeche March 4, 2026 01:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs Related to the documentation area: vscode-extension Issues related to the Angular Language Service VsCode extension detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add support for highlighting angular-ts and angular-html blocks in markdown files

2 participants