Add live Markdown preview#62
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a feature-flagged Markdown preview with sanitized rendering, debounced updates, resizable split panes, external link handling, persistence support, and application/component tests. ChangesMarkdown Preview Feature
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant MarkdownPreview
participant markdownRenderer
participant Editor
User->>App: Open Markdown file and enable preview
App->>MarkdownPreview: Pass editor content and visibility
MarkdownPreview->>Editor: Render editor children
MarkdownPreview->>markdownRenderer: Parse and sanitize Markdown
markdownRenderer-->>MarkdownPreview: Return sanitized HTML
MarkdownPreview-->>User: Display preview and resize controls
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a live, split-pane Markdown preview feature gated behind a new markdownPreview feature flag, adding dompurify and marked as dependencies. Feedback on the implementation highlights critical lifecycle and state management issues in MarkdownPreview.tsx, specifically a scroll position leak when switching files, a stale preview flash, and redundant parsing. Additionally, it is recommended to wrap the Markdown parsing logic in a try-catch block to prevent potential rendering crashes from malformed input.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/App.tsx`:
- Line 208: Update the MarkdownPreview lazy-loading flow so the stateful
EditorPane is not used as or recreated across the Suspense fallback boundary.
Keep the editor wrapper synchronously imported, or lazy-load only the rendered
preview pane, ensuring the same editor instance preserves focus, selection,
history, and local state.
- Around line 6080-6083: Add a React key based on activeFile.path to the
MarkdownPreview component so it remounts when navigating directly between
Markdown files, resetting its rendered HTML and scroll state immediately.
Preserve the existing preview props and visibility behavior.
In `@src/MarkdownPreview.css`:
- Around line 7-8: Insert a blank line after the --markdown-editor-width custom
property and before the display declaration in the stylesheet.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 0749e5c9-4b92-4b6f-8239-defb9d954217
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (9)
package.jsonsrc-tauri/src/lib.rssrc/App.test.tsxsrc/App.tsxsrc/MarkdownPreview.csssrc/MarkdownPreview.test.tsxsrc/MarkdownPreview.tsxsrc/featureFlags.test.tssrc/featureFlags.ts
There was a problem hiding this comment.
Pull request overview
Adds an opt-in live Markdown preview pane (gated behind a new markdownPreview preview feature flag) that renders sanitized Markdown alongside the existing editor while keeping the editor mounted and debouncing preview updates.
Changes:
- Introduces a new
MarkdownPreviewsplit-pane component with sanitization, scroll preservation, and link interception. - Adds the
markdownPreviewpreview feature flag end-to-end (frontend registry/tests + Rust KNOWN_FEATURE_FLAGS + state sanitization tests). - Wires the preview toggle and conditional rendering into
App, with new UI-level tests and new npm dependencies (marked,dompurify).
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/MarkdownPreview.tsx | New split-pane renderer: debounced Markdown → HTML → DOMPurify sanitize, link click containment, resize handle, scroll handling. |
| src/MarkdownPreview.test.tsx | Component tests for debouncing, scroll preservation, sanitization, link handling, and resize keyboard support. |
| src/MarkdownPreview.css | New styling for the preview split pane and rendered Markdown surface. |
| src/featureFlags.ts | Adds markdownPreview to the feature flag registry as a preview flag. |
| src/featureFlags.test.ts | Updates feature flag resolution/listing tests for the new flag. |
| src/App.tsx | Adds toggle button + conditional Markdown-only preview wrapper around the editor pane. |
| src/App.test.tsx | Adds app-level tests covering flag gating and Markdown-only preview behavior across edits/reloads/files. |
| src-tauri/src/lib.rs | Adds markdownPreview to KNOWN_FEATURE_FLAGS and updates sanitization/load tests. |
| package.json | Adds dompurify and marked dependencies. |
| package-lock.json | Locks new dependencies and transitive additions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fc853ce040
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/MarkdownPreview.tsx (1)
51-67: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winRestore scroll position when visibility changes.
The layout effect only depends on
html. Whenvisiblechanges fromfalsetotruewith unchanged contents, React can skip the identicalsetHtmlupdate, so the newly mounted preview does not restorepreviewScrollTop.current.Proposed fix
- }, [html]); + }, [html, visible]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/MarkdownPreview.tsx` around lines 51 - 67, The scroll-restoration effect in MarkdownPreview must also run when visibility changes. Update the useLayoutEffect dependency list to include visible alongside html, preserving the existing preview.current and previewScrollTop.current behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/MarkdownPreview.tsx`:
- Around line 51-63: Update the lazy renderer loading in the useEffect hook to
add a rejection path after import("./markdownRenderer").catch failures, logging
the error and setting a graceful preview error state. Preserve the cancelled
guard so failed or late loads do not update state after cleanup, and include any
required error state rendering alongside the existing setHtml flow.
---
Outside diff comments:
In `@src/MarkdownPreview.tsx`:
- Around line 51-67: The scroll-restoration effect in MarkdownPreview must also
run when visibility changes. Update the useLayoutEffect dependency list to
include visible alongside html, preserving the existing preview.current and
previewScrollTop.current behavior.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 8bb5feb4-105b-47dd-9ecf-1946161714eb
📒 Files selected for processing (7)
src/App.test.tsxsrc/App.tsxsrc/MarkdownPreview.csssrc/MarkdownPreview.test.tsxsrc/MarkdownPreview.tsxsrc/markdownRenderer.tssrc/styles.css
💤 Files with no reviewable changes (1)
- src/MarkdownPreview.css
🚧 Files skipped from review as they are similar to previous changes (3)
- src/MarkdownPreview.test.tsx
- src/App.tsx
- src/App.test.tsx
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ded3edaf1d
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 852e77668a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0d66abb839
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| overflow: hidden; | ||
| background: var(--bg); | ||
| color-scheme: inherit; | ||
| user-select: none; | ||
| zoom: var(--app-zoom, 1); | ||
| } | ||
|
|
||
| input, | ||
| textarea, | ||
| .cm-content, | ||
| [contenteditable="true"] { | ||
| user-select: text; | ||
| } |
| : "minmax(0, 1fr)", | ||
| minHeight: 0, | ||
| overflow: "hidden", | ||
| } as CSSProperties} | ||
| > | ||
| <div | ||
| className="markdown-preview-split__editor" | ||
| style={{ minWidth: 0, minHeight: 0, overflow: "hidden" }} | ||
| > | ||
| {children} | ||
| </div> | ||
| {visible ? ( |
Add live Markdown preview
Summary
.mdand.markdownfiles.Why
Markdown files currently have no rendered view inside ide. This adds a safe split preview while preserving the existing editing experience and editor state.
User impact
Users can enable Markdown preview under Preview Features, then show a live rendered pane beside supported Markdown files. The feature is default-off while it remains in preview.
App HTML no longer behaves like selectable webpage text; CodeMirror, rename fields, search boxes, and other editable controls remain selectable.
Validation
./run-tests.shazure-architecture.md