Oleg Isonen
e7181fffdc
## 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 - [x] Add Alert as an official component with one Variant property. - [x] Support all five GitHub alert types. - [x] Share alert metadata and marker recognition. - [x] Preserve nested Markdown and ordinary blockquote behavior. - [x] Keep URL and HTML sanitization in the existing security boundary. - [x] Add shared, title, and type-specific Markdown Embed descendants. - [x] Materialize Content Block alerts as Alert instances. - [x] Preserve alert content and variant changes through MDX serialization. - [x] Regenerate component props and Storybook artifacts from source. - [x] Review documentation impact and update Alert, Markdown Embed, Content Block, and navigation docs. - [x] Verify fixture impact; no fixture inputs or generated fixture outputs are changed. ## Verification - [x] New tests demonstrated failure before implementation and pass afterward. - [x] `pnpm --filter @webstudio-is/content-engine test` — 417 passed. - [x] `pnpm --filter @webstudio-is/project-build test` — 2,282 passed. - [x] `pnpm --filter @webstudio-is/sdk-components-react test` — 144 passed, 1 skipped. - [x] SDK component registry tests. - [x] Relevant package typechecks, declaration builds, and production builds. - [x] Root lint, formatting, package-boundary, generated-doc, and diff checks. - [x] 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
2.9 KiB
description
| description |
|---|
| Markdown Embed converts Markdown to HTML and enables styling it. |
🪜 Markdown Embed
Why Markdown Embed is needed
Some APIs (or users) provide rich text in Markdown format, which can't be rendered in the web browser. Markdown Embed converts Markdown to HTML and enables applying styles to the various tags contained within HTML.
How to use Markdown Embed
Markdown Embed is located in Components > Data.
1. Add Markdown
Once added to the canvas, the right panel will show a Code field. You can either add Markdown directly to it or, more commonly, bind Markdown to it from a Resource.
CMS data bound to Markdown Embed Code
2. Style
In the Navigator, Markdown Embed has various HTML tags nested. Expand Markdown Embed, and you’ll see tags such as Heading 1, Link, Image, and much more.
List selected and styled
Styles applied to each of these tags will apply to all occurrences of that tag within the Markdown Embed. For example, if you apply a border on the Image tag, then all images contained within the HTML will have a border.
GitHub-style alerts
Use GitHub-style alerts to call attention to notes, tips, important information, warnings, and cautions:
> [!NOTE]
> Add helpful context here.
> [!WARNING]
> Explain what readers should be careful about.
Write the alert type in uppercase at the start of a blockquote. Markdown Embed supports NOTE, TIP, IMPORTANT, WARNING, and CAUTION. You can use links, lists, code, and other Markdown inside an alert.
Select Alert to style every alert, or a type-specific descendant such as Warning alert to style one alert type. Markdown Embed renders the same data-state values as the standalone Alert component.
Image handling
Webstudio optimizes images contained in Markdown with the same responsive image pipeline as the Image component. It generates the appropriate srcset and sizes attributes and lazy-loads images by default.
Data URL images are served as-is without optimization.
Similar components
{% content-ref url="html-embed.md" %} html-embed.md {% endcontent-ref %}
{% content-ref url="content-embed.md" %} content-embed.md {% endcontent-ref %}
Related
- Content Embed – Render rich text/HTML
- Alert – Add and style standalone callouts
- HTML Embed – Custom HTML code
- Collection – Loop through CMS data