fix(core): allow data: URIs in markdown images + e2e test (#2505) by ckeller42 · Pull Request #2881 · likec4/likec4

ckeller42 · 2026-04-11T17:27:44Z

Summary

Two changes for #2505 (images don't display in markdown):

1. Fix: Allow data: URIs in markdown image src

The rehype-sanitize default schema only allows http and https protocols for img.src. Data URIs (data:image/...) were stripped, leaving <img> tags without a src attribute.

Added data to protocols.src in the sanitizer config so inline images work.

File: packages/core/src/utils/markdown/to-html.ts

2. E2E test: Markdown image rendering

Playwright test that opens element details for the cloud element (which has a triple-quoted description with ![LikeC4 Logo](https://likec4.dev/favicon.svg)) and verifies the image loads (naturalWidth > 0).

Files: e2e/src/likec4/model.c4, e2e/tests/markdown-image.spec.ts, e2e/.gitignore

Note on #2505

The main issue reported in #2505 is likely a documentation gap — users need to use triple quotes ('''...''') for markdown descriptions, as documented in apps/docs/src/content/docs/dsl/model.mdx. Single-quoted descriptions are plain text by design.

Relates to #2505

🤖 Generated with Claude Code

ckeller42 · 2026-04-11T17:27:45Z

@coderabbitai review

changeset-bot · 2026-04-11T17:27:51Z

🦋 Changeset detected

Latest commit: 97a0bd8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages

Name	Type
@likec4/core	Patch
@likec4/playground	Patch
@likec4/config	Patch
@likec4/diagram	Patch
@likec4/generators	Patch
@likec4/language-server	Patch
@likec4/language-services	Patch
@likec4/layouts	Patch
@likec4/leanix-bridge	Patch
likec4	Patch
@likec4/mcp	Patch
@likec4/react	Patch
@likec4/vite-plugin	Patch
@likec4/vscode-preview	Patch
likec4-vscode	Patch
@likec4/docs-astro	Patch
@likec4/lsp	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/log	Patch
@likec4/tsconfig	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-04-11T17:27:51Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-04-11T17:31:52Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 24f9e4c4-c248-4200-9cea-76fdd57921e4

📥 Commits

Reviewing files that changed from the base of the PR and between fde56d7 and 97a0bd8.

📒 Files selected for processing (1)

e2e/.gitignore

📝 Walkthrough

Walkthrough

Adds a Playwright E2E test that verifies a markdown-embedded image in an element's description renders and loads; updates the test model to include the embedded image; updates sanitization to allow data: image URIs; and ensures the new test file is not ignored.

Changes

Cohort / File(s)	Summary
E2E Gitignore `e2e/.gitignore`	Added negate rule `!tests/markdown-image.spec.ts` so the new test file is tracked.
E2E model `e2e/src/likec4/model.c4`	Extended the `cloud` system description to include an embedded image reference (`![LikeC4 Logo](https://likec4.dev/favicon.svg)`).
E2E test `e2e/tests/markdown-image.spec.ts`	Added Playwright test `markdown image in description renders in element details (`#2505`)` that opens the element details for `data-id="cloud"`, asserts `img[alt="LikeC4 Logo"]` is present with expected `src`, and uses `expect.poll` to verify `naturalWidth > 0`.
Sanitization change `packages/core/src/utils/markdown/to-html.ts`	Allow `data` protocol in `rehypeSanitize` `protocols` configuration so image `src` values can include `data:` URIs.
Release note `.changeset/fix-markdown-data-uri-images.md`	Added changeset declaring a `patch` release for `@likec4/core` documenting the `data:` URI handling change.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: fixing data: URI support in markdown images and adding an E2E test for `#2505`.
Description check	✅ Passed	The PR description covers all required checklist items and provides clear explanations of the two main changes (sanitizer fix and E2E test), though the author did not explicitly check off the provided template.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/markdown-images-e2e

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@e2e/src/likec4/model.c4`:
- Line 19: The model.c4 E2E fixture includes an external image link ("![LikeC4
Logo](https://likec4.dev/favicon.svg)") which creates an external network
dependency; replace this URL with a repo-local static test asset (e.g., add a
file under e2e/assets or e2e/fixtures likec4-favicon.svg and update the image
reference in model.c4 to point to that local path), ensure the static asset is
committed to the repo, and verify any test harness that reads model.c4 can
resolve local relative paths so CI no longer depends on external network
availability.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1aaafb3c-57e4-482f-ab73-fadb2f90fcd7

📥 Commits

Reviewing files that changed from the base of the PR and between e98d9f4 and 566ac90.

📒 Files selected for processing (3)

e2e/.gitignore
e2e/src/likec4/model.c4
e2e/tests/markdown-image.spec.ts

ckeller42 · 2026-04-11T18:35:43Z

@coderabbitai review

coderabbitai · 2026-04-11T18:35:50Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Adds a remote image URL to the cloud element's triple-quoted description and a Playwright test that opens element details and verifies the <img> tag both exists in the DOM and actually loads (naturalWidth > 0). Confirms markdown images work correctly with triple-quoted descriptions. Issue #2505 is a documentation gap, not a code bug. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ckeller42 · 2026-04-11T18:47:36Z

@coderabbitai review

coderabbitai · 2026-04-11T18:47:43Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Signed-off-by: Denis Davydkov <denis@davydkov.com>

coderabbitai Bot reviewed Apr 11, 2026

View reviewed changes

Comment thread e2e/src/likec4/model.c4

ckeller42 force-pushed the test/markdown-images-e2e branch from 566ac90 to efcb1e3 Compare April 11, 2026 18:35

ckeller42 force-pushed the test/markdown-images-e2e branch from efcb1e3 to fde56d7 Compare April 11, 2026 18:47

ckeller42 changed the title ~~test(e2e): add markdown image rendering test for #2505~~ fix(core): allow data: URIs in markdown images + e2e test (#2505) Apr 11, 2026

ckeller42 requested a review from davydkov April 11, 2026 18:52

Merge branch 'main' into test/markdown-images-e2e

97a0bd8

Signed-off-by: Denis Davydkov <denis@davydkov.com>

davydkov approved these changes Apr 13, 2026

View reviewed changes

davydkov merged commit 9834ebb into main Apr 13, 2026
8 of 9 checks passed

davydkov deleted the test/markdown-images-e2e branch April 13, 2026 07:42

likec4-ci Bot mentioned this pull request Apr 13, 2026

release: v1.55.0 #2859

Merged

Uh oh!

Conversation

ckeller42 commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

1. Fix: Allow data: URIs in markdown image src

2. E2E test: Markdown image rendering

Note on #2505

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

changeset-bot Bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ckeller42 commented Apr 11, 2026 •

edited

Loading

changeset-bot Bot commented Apr 11, 2026 •

edited

Loading

coderabbitai Bot commented Apr 11, 2026 •

edited

Loading