[srikar-naidu]

What and why

Adds a new /markdown-preview tool for writing Markdown and viewing rendered HTML live.

Features include:

• GitHub-flavored Markdown support
• Tables, task lists, strikethrough, autolinks
• Syntax-highlighted fenced code blocks
• Sanitized HTML preview using DOMPurify
• Bold, italic, code, link, image, heading, table, and task-list toolbar actions
• Copy Markdown
• Copy sanitized HTML
• Download .md
• Light/dark preview toggle
• Word, character, line, and reading-time statistics
• Registry entry, metadata, JSON-LD, sitemap entry, and OG image

Closes #302

How I tested this

• Ran the app with npm run dev
• Opened /markdown-preview
• Verified live Markdown rendering
• Verified GFM tables, task lists, and strikethrough
• Verified syntax highlighting for fenced TypeScript code
• Verified toolbar actions
• Verified light/dark preview toggle
• Verified copy and Markdown download controls
• Tested unsafe HTML such as <script>alert("xss")</script> and confirmed it was sanitized
• Ran TypeScript validation and git diff --check

Screenshots attached showing the editor, preview, GFM rendering, syntax highlighting, and toolbar.

AI assistance

AI was used to implement the Markdown preview tool, integrate the parser and sanitizer, add the UI, debug the SSR DOMPurify issue.
i tested and committed after reviewing myself

Type of change

• Bug fix
• New tool or feature
• Tests
• Refactor or cleanup
• Docs

Checklist

• I was assigned the linked issue
• npm run lint && npm run test && npm run build passes locally
• Logic changes live in lib/ and have a test in lib/__tests__/
• For a bug fix: the new test fails without my change
• No analytics, trackers, or calls that send user data off-device
• Works in both light and dark themes
• Inputs have labels and it works with the keyboard alone
• New tool: registry entry, page.tsx, client component, opengraph-image.tsx, and the bug report dropdown are all done

Notes for reviewers

The preview output is sanitized with DOMPurify before rendering and before HTML export. All processing happens client-side; Markdown content is not uploaded.

The UI was manually tested in the browser with GFM content, fenced code blocks, toolbar actions, theme switching, and unsafe HTML input.

Screenshots demonstrate the main editor/preview layout and GFM rendering.

[anurag629]

Thanks @srikar-naidu, the editor itself works well. Lint, all 1288 tests, the build and the page check pass on top of develop, typing updates the preview, and the sanitizing holds up: <script>, onerror and javascript: links are all stripped.

A few things before I merge:

1. In the built app the preview is empty when the page loads, even though the starter document is in the editor. The server renders "" (there's no window for DOMPurify) and hydration keeps that, so nothing shows until the first edit. Setting a mounted flag in a useEffect and only sanitizing once it's true fixes it, since the first client render then matches the server.
2. The new tool checklist from CONTRIBUTING.md:
   • Add the tool to the "Which tool?" dropdown in .github/ISSUE_TEMPLATE/bug_report.yml.
   • Move the pure logic (the marked setup with the code renderer, the stats, the insert helper) into lib/markdown-preview.ts with tests in lib/__tests__/, plus a client test that the preview strips <script>, onerror and javascript: links. Right now there are no tests for the tool.
   • Step 5 of "Adding a tool": the README gallery and list, .github/assets/og-markdown-preview.png and markdown-preview in the package.json keywords. You can leave the home share card as it is.
   • --cyan is on two tools now (URL encoder and regex tester) and --green only on one, so use --green with accentHex: "#3FDD6B".
   • Put the registry entry at the end of TOOLS, after the regex tester.
3. The fence language goes into the class attribute as is, so a fence like ```"><img src=x> breaks out of it. DOMPurify removes the dangerous part, but the markup ends up broken. Keeping only [\w-] from lang avoids that.
4. metaDescription is 163 characters, so trim it a little to stay around 150 to 160.

[srikar-naidu]

@anurag629 , Addressed all feedback and pushed it to the PR branch.

Changes include:

• Fixed initial empty preview with a mounted hydration flag.
• Extracted Markdown rendering, stats, insertion, and code highlighting into lib/markdown-preview.ts.
• Added pure logic tests and a client sanitization test.
• Added bug-report dropdown option.
• Added README gallery/list entry.
• Added og-markdown-preview.png.
• Added markdown-preview package keyword.
• Changed accent from --cyan to --green.
• Moved Markdown Preview after Regex Tester in TOOLS.
• Sanitized fence language to only [\w-].
• Shortened the meta description.

[anurag629]

Thanks @srikar-naidu, nice round. The preview shows on first load now, the sanitizing still holds (I typed script, onerror, javascript: and fence payloads into the built app), the fence language is cleaned up, and lint, all 1305 tests, the build and the page check pass on top of develop.

Two things left:

1. The preview's background doesn't follow the toggle. .card sets background: var(--bg-card), and that wins over bg-white and bg-[#17191f], so with the site in dark mode the light preview is dark text on a dark card, and with the site in light mode the dark preview is light text on a light card. Putting the background and text classes on an inner element (not the .card itself), or setting the background with an inline style, fixes both.
2. .github/assets/og-markdown-preview.png is the Regex Tester card. Please save the one from the og:image of /markdown-preview.

And one optional thing, since it came from my suggestion: setMounted(true) in an effect adds a react-hooks/set-state-in-effect lint warning (12 now, develop has 11). useSyncExternalStore(() => () => {}, () => true, () => false) gives the same flag without it.

[srikar-naidu]

@anurag629 , I’ve addressed the remaining items:

1. The preview now applies its light/dark background and text colors with inline styles, so .card no longer overrides the preview toggle.
2. Replaced .github/assets/og-markdown-preview.png with the actual image generated by the /markdown-preview og:image route.
3. Replaced the effect-based mounted flag with useSyncExternalStore, removing the additional react-hooks/set-state-in-effect warning.

I also ran targeted ESLint, TypeScript validation, and git diff --check; they all pass.
Thanks for the review!!!! :)

[anurag629]

Thanks @srikar-naidu, this one's ready. Both preview themes read well in both site themes now, the share image matches the built card, lint is back to the 11 warnings develop has, and all 1305 tests, the build and the page check pass on top of develop. Nice work on this one.