-
Notifications
You must be signed in to change notification settings - Fork 32
Implement anchor directive component for wrapping content with custom IDs #1910
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Co-authored-by: reakaleek <[email protected]>
Co-authored-by: reakaleek <[email protected]>
anchor compontent|
Label error. Requires exactly 1 of: automation, breaking, bug, changelog:skip, chore, ci, dependencies, documentation, enhancement, feature, fix, redesign. Found: |
dotnet-install.sh
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@copilot remove this file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed the accidentally added dotnet-install.sh file. This was a development artifact that shouldn't have been committed. Fixed in df5236c.
Co-authored-by: reakaleek <[email protected]>
Co-authored-by: reakaleek <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Implemented Anchor Directive Component
Successfully implemented the anchor directive component that allows wrapping content with a div containing a custom ID for linking purposes.
Implementation Progress:
AnchorBlock.csclass inheriting fromDirectiveBlockDirectiveBlockParser.csDirectiveHtmlRenderer.csAnchorView.cshtml) for HTML renderingAnchorViewModel.cs) for the componentKey Features Implemented:
✅ Syntax Support:
::::{anchor} custom-id✅ Content Wrapping: Wraps any inner content with a div containing
id="custom-id"✅ Argument Validation: Emits proper error if ID argument is missing
✅ ID Slugification: Automatically converts spaces to hyphens (e.g., "Custom ID" → "custom-id")
✅ Cross-Reference Support: Sets
CrossReferenceNamefor linking capabilities✅ HTML Generation: Renders as
<div id="custom-id">...content...</div>✅ Error Handling: Provides clear diagnostics for invalid usage
✅ Non-nullable Design: AnchorId is always set to a valid string value
Example Usage:
::::{anchor} custom-id :::{dropdown} Dropdown Title Dropdown content ::: :::: Link to [custom anchor](#custom-id).Generated HTML:
All tests pass and the component integrates seamlessly with existing directive infrastructure.
Fixes #1909.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.