Oleg Isonen
db3b11970f
## Summary Markdown Embed now renders image tags with the same optimized attributes and canvas behavior as the SDK Image component. The implementation shares the complete attribute-resolution path without rendering React inside the Markdown pipeline: - `@webstudio-is/image` exposes one framework-independent `getImageAttributes` function for optimization, placeholder fallback, loading, decoding, dimensions, alternative text, and responsive sources. - React-only element props such as `className`, `style`, handlers, context, and refs stay in React callers. - The SDK Image component and Markdown renderer both use `getSdkImageProps` for canvas-specific loading, decoding, asset identity, and incomplete-upload handling. - Markdown retains only the necessary HTML attribute-name conversion, sanitization, and Safari-safe `sizes` / `srcset` / `src` ordering. - The redundant low-level React Image primitive was removed. Its callers now render native `img` elements, and the image package no longer has React runtime or peer dependencies. ## Compatibility and tradeoffs - The SDK Image component remains the public React component because it owns React context and ref forwarding. - The removed low-level `@webstudio-is/image` Image export is replaced by the pure attribute function for internal callers. - No data migration or schema change is required. - Loader output is sanitized after transformation, while unsafe input URLs are sanitized before reaching the loader. ## Todo - [x] Share image attribute resolution between native, SDK, and Markdown images. - [x] Preserve SDK canvas behavior for Markdown images. - [x] Preserve safe URL sanitization and Safari-safe responsive attribute ordering. - [x] Remove the redundant low-level React image primitive and migrate its callers. - [x] Remove the overlapping `getImageProps` abstraction. - [x] Add regression coverage comparing Markdown, SDK Image, and native attribute output. - [x] Review documentation impact and update the Markdown Embed documentation. - [x] Run targeted tests, typechecks, builds, lint, formatting, package-boundary checks, and fixture generation. ## Verification - `pnpm --filter @webstudio-is/image test` - `pnpm --filter @webstudio-is/image typecheck` - `pnpm --filter @webstudio-is/image build` - `pnpm --filter @webstudio-is/image dts` - `pnpm --filter @webstudio-is/sdk-components-react test` - `pnpm --filter @webstudio-is/sdk-components-react typecheck` - `pnpm --filter @webstudio-is/sdk-components-react build` - `pnpm --filter @webstudio-is/sdk-components-react dts` - `pnpm --filter @webstudio-is/builder typecheck` - `pnpm --filter @webstudio-is/design-system typecheck` - Targeted Oxlint and Oxfmt checks - `pnpm check:package-boundaries` - `pnpm fixtures` (no fixture diff) Ref #6014
description
| description |
|---|
| New to Webstudio? |
👋 Welcome
Our getting started guide will help you navigate through building your first Webstudio website. It covers the essentials of creating web designs and integrating third-party tools. You'll learn how to utilize Webstudio's unique features like Design tokens and Components, and how to contribute to the project.
{% content-ref url="basics/building-your-first-site.md" %} building-your-first-site.md {% endcontent-ref %}
{% content-ref url="university/foundations/" %} foundations {% endcontent-ref %}
{% content-ref url="university/core-components/" %} core-components {% endcontent-ref %}
{% content-ref url="university/cli.md" %} cli.md {% endcontent-ref %}
{% content-ref url="university/inception.md" %} inception.md {% endcontent-ref %}
{% content-ref url="university/radix/" %} radix {% endcontent-ref %}
{% content-ref url="university/marketplace.md" %} marketplace.md {% endcontent-ref %}
{% content-ref url="university/self-hosting/" %} self-hosting {% endcontent-ref %}
{% content-ref url="university/how-tos/" %} how-tos {% endcontent-ref %}
{% content-ref url="university/integrations/" %} integrations {% endcontent-ref %}
{% content-ref url="university/craft.md" %} craft.md {% endcontent-ref %}
{% content-ref url="basics/FAQ.md" %} FAQ.md {% endcontent-ref %}
Looking to contribute to Webstudio?
{% content-ref url="contributing/contributing-for-designers.md" %} contributing-for-designers.md {% endcontent-ref %}
{% content-ref url="contributing/contributing-for-developers.md" %} contributing-for-developers.md {% endcontent-ref %}
{% content-ref url="contributing/marketplace.md" %} marketplace.md {% endcontent-ref %}