added github flavoured markdown preview for issues and pull requests#8731
Open
Nareshix wants to merge 2 commits intomicrosoft:mainfrom
Open
added github flavoured markdown preview for issues and pull requests#8731Nareshix wants to merge 2 commits intomicrosoft:mainfrom
Nareshix wants to merge 2 commits intomicrosoft:mainfrom
Conversation
Author
|
@microsoft-github-policy-service agree |
Author
|
One thing that i suggest is that we place the upload file icon below the textarea so that it can prevent the icon mixing with the text as shown below |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a GitHub-flavored Markdown “Write/Preview” experience to the extension’s webview editors (PR creation description and PR/issue comment boxes) by introducing a shared MarkdownEditor component and a new pr.render-markdown webview message that renders Markdown via GitHub’s Markdown API.
Changes:
- Introduces a reusable
MarkdownEditorwebview component with Write/Preview tabs. - Adds a
pr.render-markdownwebview message flow and aGitHubRepository.renderMarkdown()helper that calls GitHub’s Markdown render API (GFM + repo context). - Replaces existing
<textarea>usages for PR description and comment inputs withMarkdownEditor, plus styling in common CSS.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| webviews/createPullRequestViewNew/app.tsx | Swaps PR description textarea for MarkdownEditor and wires renderMarkdown. |
| webviews/components/markdownEditor.tsx | New Write/Preview editor component that renders returned HTML. |
| webviews/components/comment.tsx | Replaces comment textareas with MarkdownEditor and passes renderMarkdown from context. |
| webviews/common/createContextNew.ts | Adds renderMarkdown() that posts pr.render-markdown to the host. |
| webviews/common/context.tsx | Adds renderMarkdown() for the PR/issue overview webview context. |
| webviews/common/common.css | Adds styling for the new markdown editor and preview container. |
| src/github/issueOverview.ts | Handles pr.render-markdown messages for issue/PR overview panels. |
| src/github/githubRepository.ts | Adds renderMarkdown() that calls GitHub’s Markdown API. |
| src/github/createPRViewProvider.ts | Handles pr.render-markdown messages in the Create PR webview. |
| src/github/activityBarViewProvider.ts | Handles pr.render-markdown messages in the Active PR view. |
Comment on lines
+21
to
+32
| const setRefs = useCallback( | ||
| (node: HTMLTextAreaElement) => { | ||
| (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = | ||
| node; | ||
| if (typeof forwardedRef === 'function') { | ||
| forwardedRef(node); | ||
| } else if (forwardedRef) { | ||
| ( | ||
| forwardedRef as React.MutableRefObject<HTMLTextAreaElement | null> | ||
| ).current = node; | ||
| } | ||
| }, |
Comment on lines
+99
to
+103
| {mode === 'preview' && ( | ||
| <div className='markdown-editor-preview comment-body'> | ||
| {!isLoading && html && <div dangerouslySetInnerHTML={{ __html: html }} />} | ||
| {!isLoading && !html && <em>Nothing to preview</em>} | ||
| {isLoading && <em>Loading preview...</em>} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hi, I added this feature which closes #5382
This feature makes changes to the ui as shown below. I'm open to the discussion on how the ui should be displayed
Some images on how it looks like