fix(web-components): fix markdown truncation and HTML attachment modal issues#697
Conversation
…l issues - MarkdownPreview: use dedicated CSS class without flex height constraints so the dynamically-measured iframe height attribute is respected (#679) - MarkdownPreview: drop height="100%" fallback before content loads; browser default height is more sensible in a block container - Modal: change overflow: hidden → overflow-y: auto on modal-data-component so tall markdown content can be scrolled within the modal (#679) - Modal: wire .attachmentViewStack/.attachmentViewPane into the flex height chain so HtmlPreview fills the fullscreen modal instead of collapsing to the browser default ~150px (#692) - HtmlPreview: set blob MIME to text/html; charset=utf-8 to prevent the iframe from guessing encoding from stale meta tags (#692) - TrAttachment: pass current preview state when opening the modal so HTML attachments open in preview mode, not source-code mode (#692)
Allure perf metricsGenerated at:
Artifacts: allure-perf-metrics |
|
Delighted to see this - thank you for implementing! 🙌 Had been having a quick look on the same myself to understand the desired outcome (https://github.com/kieran-ryan/allure3/tree/fix/preview-render-height) and popping some additional aspects that should complete the preview functionality - having built from your branch - hope helpful! Expand should open in preview mode by default 
Should support markdown syntax highlighting - looks like may have been a regression within a release 
Markdown preview is scrollable beyond the end of the content of the document in expand mode 
Vertical padding missing on inline preview 
|
- Always open modal in preview mode for previewable attachments (HTML/md),
regardless of current inline toggle state
- Fix markdown syntax highlighting: prism-markup must be imported before
prism-markdown since the latter calls Prism.languages.extend('markup')
- Add vertical padding to markdown-attachment-preview (was 0 top/bottom)
- Fix modal layout chain: make attachmentViewPane a flex column so
html-attachment-preview fills the fullscreen modal correctly
- Reset html/body margin in markdown iframe so scrollHeight is accurate
and preview does not scroll past visible content
|
Retested and adding below observations. Using macOS with Safari in case relevant - though might retry again to ensure local build is clean. Now observe the vertical padding on the inline preview - nice! 
Syntax highlighting is visible on the code blocks with this theme, though remains absent from the headers - which was available in earlier releases. Perhaps is a stylistic or thematic choice? Mentioning in case. 
Expanded preview mode continues to open as raw source code by default; and the scroll height when changing to preview mode continues to extend and allow scrolling beyond the content. One additional enhancement (which perhaps could be a separate issue if requires some work) would to be provide syntax highlighting on code blocks in preview mode. 
|
- Fix expand button opening in source code: the actual expand icon lives in TrAttachmentInfo, not TrAttachment — pass preview: isPreviewable and previewable: isPreviewable there (and in the item-change effect) - Fix markdown preview scrolling past content: vertical padding on the container div caused the iframe (sized to content height) to overflow the container, making the last 16px scrollable past actual content. Move vertical padding inside the iframe body so getIframeContentHeight includes it in the measurement and container overflow is eliminated.
There was a problem hiding this comment.
Awesome! Can confirm working well from local build.
- Vertical padding on inline preview
- Expand opens in preview mode by default
- Syntax highlighting on markdown
- Scroll in expand mode matches content height
Syntax highlighting of code blocks within rendered markdown desirable, though can be a standalone issue if to be addressed separately.
Also closes #431.
Looking forward to the fix release - thank you! 🚀
3 participants
Summary
Fixes two bugs related to attachment preview rendering:
#679 — Markdown render truncated
MarkdownPreviewwas reusing.html-attachment-previewCSS which appliesflex: 1; min-height: 0to the iframe — this caused the CSS flex layout to override the dynamically-measuredheightattribute, capping the iframe at the flex container's height instead of the full content height.markdown-attachment-previewclass (no flex constraints) so the measured height is respectedheight="100%"fallback (before content loads) to no attribute — browser default (~150 px) is more sensible in a block container than100%of an undefined parentoverflow: hidden→overflow-y: autoon.modal-data-componentso tall markdown content scrolls within the modal#692 — HTML attachment rendering issues in fullscreen
.attachmentViewStack/.attachmentViewPaneinto the modal's flex height chain soHtmlPreview'sheight: 100%iframe fills the fullscreen modal instead of collapsing to the browser default ~150 pxTrAttachment: passed currentshowPreviewstate when opening the modal so HTML/markdown attachments open in the same mode (preview vs source code) the user was already viewing, instead of always defaulting to source codeHtmlPreview: changed blob MIME type fromtext/htmltotext/html; charset=utf-8— sinceresponse.text()always decodes as UTF-8 and DOMPurify strips all<meta charset>tags, the blob bytes are already UTF-8; the explicit charset prevents the iframe from guessing a wrong encoding if any charset hint survives sanitizationCloses #679
Related to #692