Skip to content

fix(file-viewer): draw a markdown file's HTML blocks instead of their tags - #847

Merged
devswha merged 3 commits into
mainfrom
fix/file-viewer-markdown-html
Oct 11, 2026
Merged

devswha merged 3 commits into
mainfrom
fix/file-viewer-markdown-html

Conversation

@devswha

@devswha devswha commented Oct 11, 2026

Copy link
Copy Markdown
Owner

Problem

Found during 0.4.7 mobile testing: opening README.md in the file viewer (#616) showed its header as literal tags — <p align="center">, <img src=…>, <a href=…> — because the app's markdown parser has no HTML support.

Change

  • New src/lib/markdownHtml.ts: a CommonMark-style HTML block (a line starting with a known tag or <!--, ending at a blank line) is tokenized and read into existing MarkdownBlock/InlineNodes. Nothing is ever injected as markup.
    • p/div/center/details/summary/h1–h6/… start blocks; align="center" (or <center>) centers the paragraph or heading.
    • a → link (through safeMarkdownHref/webLikeHref) or file node (markdownFileTarget); unsafe hrefs keep only their text.
    • img → image node with alt fallback and width; strong/b, em/i, br, hr; entities decoded.
    • Other tags are dropped with their text kept; comments, <script> and <style> are dropped entirely.
  • parseMarkdown(source, depth, html) and <Markdown html>: only FileViewer turns it on. Chat and release notes keep HTML as text (an agent's <Component> at a line start must not vanish).
  • .markdown-center style; MarkdownImage passes width.
  • External images (shields.io badges) still fall back to their alt text: the CSP only allows same-origin images, unchanged.

Tests

  • src/lib/markdownHtml.test.ts: the repo's own README header (centered logo with width 100, language links as file nodes, website link), comments/headings/breaks/emphasis/entities/unknown tags/script, unsafe hrefs, and chat parsing unchanged.
  • file-viewer-regression: the markdown fixture now starts with a README-style HTML header; asserts no tag text, the centered logo's width, text-align: center, and the link (390 and 1440, dark and light, inline and new tab).
  • bun run check fast passes.

🤖 Generated with Claude Code

… tags

README.md opens with <p align="center">, <img> and <a> blocks, which the
file viewer showed as literal tag text. A markdown file's HTML blocks are
now read into the blocks the view already draws (centered paragraphs and
headings, links, images with their width, emphasis, line breaks); other
tags keep only their text, and comments, scripts and styles are dropped.
No markup reaches the page. Chat keeps HTML as text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 2 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository: devswha/herdr-web-ui/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: e4a58252-ad26-4b59-979c-08101a227f55

📥 Commits

Reviewing files that changed from the base of the PR and between 1675499 and dcfc416.


📒 Files selected for processing (8)
  • CHANGELOG.md
  • scripts/file-viewer-regression.ts
  • src/components/ChatView.css
  • src/components/FileViewer.tsx
  • src/components/Markdown.tsx
  • src/lib/markdown.ts
  • src/lib/markdownHtml.test.ts
  • src/lib/markdownHtml.ts

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

devswha and others added 2 commits October 12, 2026 07:43
…lace, keep breaks and centering

Review findings (Codex, pre-merge):
- a numeric reference outside Unicode (&#1114112;) made String.fromCodePoint
  throw while rendering, which unmounted the app; it is U+FFFD now
- a comment block ran on past its closing line, so the heading or the
  fenced code right after it was read as HTML text; it ends with its line
- a <br> inside a link or an emphasis folded both lines into one, and a
  space between two emphasised words in a link was dropped
- a block inside <center> or <div align=center> lost the centering

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@devswha
devswha merged commit 1ed46bb into main Oct 11, 2026
9 checks passed
@devswha
devswha deleted the fix/file-viewer-markdown-html branch October 11, 2026 22:51
devswha added a commit that referenced this pull request Oct 12, 2026
## Change

Release 0.4.8, from main at ca6db6e (20 PRs since v0.4.7: the 0.4.7
mobile walk-through fixes, two contributor PRs and the revived #793).

- `package.json` and `herdr-plugin.toml`: 0.4.8.
- CHANGELOG: `[Unreleased]` becomes `[0.4.8] - 2026-10-12`, with the
compare links. Twelve entries that had no PR link get theirs (#835 #837
#838 #840 #842 #843 #844+#848 #845 #847 #849 #851 #852). A Maintenance
line says the remote-PC runtime is now version 27.
- `release-summaries.json`: 0.4.8 in en/ko/ja/zh/tr (3 new, 6 improved,
8 fixed). The Turkish lines are not checked by a native speaker.
- `REMOTE_BUNDLE_VERSION` 26 -> 27: #836 adds the `pending-hold` server
feature and #787 serves precompressed assets, so `remote-v27` is
published before the app release.

Every PR merged since v0.4.7 is linked in the section: #787 #788 #793
#835 #836 #837 #838 #839 #840 #841 #842 #843 #844 #845 #846 #847 #848
#849 #851 #852.

## Validation

- `bun scripts/release-notes.ts 0.4.8` renders the summaries and the
full changelog (116 lines).
- `bun run check fast`: generated types, typecheck, build and 2800+ unit
tests pass.

## Release

After this merges and its CI on `main` passes: push `remote-v27`, wait
for its release, then run the Release workflow with `0.4.8`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
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.

1 participant