Skip to content

feat: Add GitHub-style Alert component - #6279

Open
kof wants to merge 4 commits into
mainfrom
feat/markdown-alerts-6278
Open

feat: Add GitHub-style Alert component#6279
kof wants to merge 4 commits into
mainfrom
feat/markdown-alerts-6278

Conversation

@kof

@kof kof commented Aug 31, 2026

Copy link
Copy Markdown
Member

Summary

  • Add one official Alert component with a content-editable variant property for note, tip, important, warning, and caution.
  • Register Alert in the component catalog with a generated title descendant and Storybook story.
  • Render GitHub-style alerts in Markdown Embed using the same DOM, class, role, and variant contract.
  • Materialize connected Content Block MDX alerts as actual Alert instances and serialize content or variant edits back to > [!TYPE].
  • Document the component and both Markdown workflows.

Implementation

Alert labels and variants live in Content Engine and are shared across the component, Markdown renderer, and MDX adapters.

  1. The Alert React component owns the wrapper, generated title, stable classes, role="note", and data-variant.
  2. Markdown Embed transforms candidate micromark HTML before the existing sanitizer and emits the same markup contract. It remains sanitized HTML rather than a Builder instance tree.
  3. Content Engine retains alert metadata on parsed Markdown blockquotes. Project Build maps those nodes to Alert instances, reconciles their authored children, and restores canonical GitHub syntax during MDX serialization.
  4. The component registry exports one Alert insertion template with a styleable title descendant.

Unsupported, lowercase, misplaced, and malformed markers remain ordinary blockquotes. There are no schema, migration, persisted-data, or sanitizer-policy changes.

Checklist

  • Add Alert as an official component with one Variant property.
  • Support all five GitHub alert types.
  • Share alert metadata and marker recognition.
  • Preserve nested Markdown and ordinary blockquote behavior.
  • Keep URL and HTML sanitization in the existing security boundary.
  • Add shared, title, and type-specific Markdown Embed descendants.
  • Materialize Content Block alerts as Alert instances.
  • Preserve alert content and variant changes through MDX serialization.
  • Regenerate component props and Storybook artifacts from source.
  • Review documentation impact and update Alert, Markdown Embed, Content Block, and navigation docs.
  • Verify fixture impact; no fixture inputs or generated fixture outputs are changed.

Verification

  • New tests demonstrated failure before implementation and pass afterward.
  • pnpm --filter @webstudio-is/content-engine test — 417 passed.
  • pnpm --filter @webstudio-is/project-build test — 2,282 passed.
  • pnpm --filter @webstudio-is/sdk-components-react test — 144 passed, 1 skipped.
  • SDK component registry tests.
  • Relevant package typechecks, declaration builds, and production builds.
  • Root lint, formatting, package-boundary, generated-doc, and diff checks.
  • GitHub Actions main, E2E, lint, submodule, deployment, and approved visual-regression checks.

Known limitations

Alert identifiers must be uppercase and appear at the start of the blockquote's first paragraph, matching the documented syntax. Markdown Embed emits the component's markup contract but cannot create Builder instances inside sanitized HTML.

Closes #6278

@kof
kof force-pushed the feat/markdown-alerts-6278 branch from 671c948 to 588e6a4 Compare August 31, 2026 15:25
@kof kof added the visual-change-approved Approve reviewed visual-only changes for the current revision label Aug 31, 2026 — with ChatGPT Codex Connector
@kof kof added visual-change-approved Approve reviewed visual-only changes for the current revision and removed visual-change-approved Approve reviewed visual-only changes for the current revision labels Aug 31, 2026
@kof kof changed the title feat: Support GitHub alerts in Markdown Embed feat: Support GitHub alerts in Markdown and MDX Aug 31, 2026
@github-actions github-actions Bot removed the visual-change-approved Approve reviewed visual-only changes for the current revision label Aug 31, 2026
@kof kof added the visual-change-approved Approve reviewed visual-only changes for the current revision label Aug 31, 2026 — with ChatGPT Codex Connector
@kof
kof force-pushed the feat/markdown-alerts-6278 branch from 0fd1739 to 385e3fc Compare August 31, 2026 18:01
@github-actions github-actions Bot removed the visual-change-approved Approve reviewed visual-only changes for the current revision label Aug 31, 2026
@kof kof changed the title feat: Support GitHub alerts in Markdown and MDX feat: Add GitHub-style Alert component Aug 31, 2026
@kof kof added the visual-change-approved Approve reviewed visual-only changes for the current revision label Aug 31, 2026 — with ChatGPT Codex Connector
@github-actions github-actions Bot removed the visual-change-approved Approve reviewed visual-only changes for the current revision label Aug 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add an Alert component with GitHub-style Markdown syntax

1 participant