feat: support HTML preview #19162
feat: support HTML preview #19162
Conversation
dosubot
bot
added
size:M
|
|
|
Can you DM me via wechat: crazyphage ? |
There was a problem hiding this comment.
Pull Request Overview
This PR adds an HTML preview feature to the application, enabling users to preview HTML code similar to an existing feature in kimi. Key changes include:
- New helper functions (isCompleteHTML, getPureContent) in utils.ts for processing HTML.
- Integration of an HTML preview button in markdown.tsx that conditionally renders based on the language.
- A new HTML preview component (HTMLPreviewBtn) with a fullscreen modal for rendering HTML content.
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| web/app/components/base/utils.ts | Added helper functions for HTML detection and content cleanup. |
| web/app/components/base/markdown.tsx | Integrated HTML preview button and updated code block handling. |
| web/app/components/base/html-preview-button/index.tsx | Implemented the HTML preview component with modal functionality. |
Files not reviewed (1)
- web/app/components/base/html-preview-button/style.module.css: Language not supported
web/app/components/base/utils.ts
Outdated
| // simple check | ||
| const completeHTMLRegex = /<\s*html\s*[^>]*>[\s\S]*<\/html\s*>/i |
There was a problem hiding this comment.
[nitpick] Consider enhancing the regex pattern in isCompleteHTML to cover potential edge cases (e.g., HTML documents with DOCTYPE declarations) or document that this is a simple check intended for basic use.
| // simple check | |
| const completeHTMLRegex = /<\s*html\s*[^>]*>[\s\S]*<\/html\s*>/i | |
| /** | |
| * A simple check to determine if the input string is a complete HTML document. | |
| * This function supports optional <!DOCTYPE> declarations and comments before the <html> tag. | |
| * Note: This is not a full HTML validator and may not handle all edge cases. | |
| */ | |
| const completeHTMLRegex = /^(?:<!DOCTYPE\s+html\s*[^>]*>\s*)?(?:<!--[\s\S]*?-->\s*)*<\s*html\s*[^>]*>[\s\S]*<\/html\s*>/i |
Copilot uses AI. Check for mistakes.
| > | ||
| <iframe | ||
| srcDoc={content} | ||
| sandbox="allow-scripts" |
There was a problem hiding this comment.
[nitpick] Evaluate if including additional sandbox flags, such as allow-same-origin, may be necessary for proper rendering of relative resources in the preview, while ensuring that security implications remain acceptable.
| sandbox="allow-scripts" | |
| sandbox="allow-scripts allow-same-origin" |
Copilot uses AI. Check for mistakes.
|
this is very good feature that if Dify got it It would be great I hope this pull merge soon thanks to LeeeeeeM |
cannot wait to have this in Dify |
|
@asrguru20 I think you can try this https://marketplace.dify.ai/plugins/svcvit/artifacts as well. |
Thanks crazywoola |
Summary
support HTML preview just like kimi
feat: #19159
Screenshots
Checklist
Important
Please review the checklist below before submitting your pull request.
dev/reformat(backend) andcd web && npx lint-staged(frontend) to appease the lint gods