Fix embedded preview styles leaking into the note tree#9633
Fix embedded preview styles leaking into the note tree#9633AllanZyne wants to merge 2 commits intoTriliumNext:mainfrom
Conversation
dosubot
Bot
added
the
size:XS
![gemini-code-assist[bot]](https://avatars.gh.lumenfield.work/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces logic to strip embedded <style> tags from rendered content when the trim option is enabled, preventing unintended styling in preview modes. A new test case was added to verify this behavior. The reviewer suggested moving this logic into the postProcessRichContent function to ensure it applies to all rich content types, such as Markdown notes, and to simplify the implementation using jQuery's .remove() method.
| if (blob && !isHtmlEmpty(blob.content)) { | ||
| $renderedContent.append($('<div class="ck-content">').html(blob.content)); | ||
| await postProcessRichContent(note, $renderedContent, options); | ||
| removeEmbeddedStylesFromTrimmedPreview($renderedContent[0], options); |
There was a problem hiding this comment.
The logic to remove embedded styles is currently only applied to text notes. However, Markdown notes (which also use postProcessRichContent in content_renderer.ts) likely suffer from the same issue when rendered in grid views.
Consider moving this logic into postProcessRichContent so it's automatically applied to all rich content types when options.trim is enabled. If moved there, you can use the more concise $renderedContent.find('style').remove(); to achieve the same result.
There was a problem hiding this comment.
Implemented in follow-up commit ac1e890. The style stripping now runs inside postProcessRichContent for trimmed rich-content previews, and the test coverage includes both imported text previews and markdown previews.
AllanZyne
changed the title
|
Hi @adoriandoran @eliandoran, can you please review this PR? Thank you! |
1 participant
Summary
<style>tags when rendering trimmed note previews.listyles.Root Cause
Grid view renders child note previews with
trim: true. Some imported notes can contain embedded<style>tags, for exampleli { margin-bottom: 8pt; }. Because those preview nodes are inserted into the main document, the embedded CSS applies globally and changes the left-pane FancyTree item spacing.Test Plan
npx vitest run apps/client/src/services/content_renderer_text.spec.ts --config apps/client/vite.config.mts#left-pane limargin-bottomfrom0px.Notes
This only strips embedded styles from trimmed previews. Full note rendering is left unchanged.