mirror of
https://github.com/chatwoot/chatwoot.git
synced 2026-06-04 21:02:35 +08:00
# Pull Request Template
## Description
This PR fixes an issue where signature images (with
`?cw_image_height=...`) render at their original large size in the email
bubble.
### Cause
Renderer output:
```html
<img src="..." height="24px" width="auto" />
```
Email UI and clients (Gmail, Outlook) apply CSS like:
`img { max-width: 100%; height: auto; }`
This overrides `height="24px"`.
Other channels work because they use inline styles (`style="height:
24px;"`).
### Solution
Use inline style instead:
```html
<img src="..." style="height: 24px;" />
```
### Why backend fix
* Fixes root cause and aligns Ruby + JS renderers
* Works in both Chatwoot UI and recipient inboxes
* Covers all email-rendered content
* Minimal change
Fixes
https://linear.app/chatwoot/issue/CW-6948/email-signature-image-renders-oversized-in-chatwoot-ui
## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
## How Has This Been Tested?
#### Screenshots
**Before**
<img width="1637" height="377" alt="image"
src="https://github.com/user-attachments/assets/0477f6fb-3b95-4fc3-9ea8-f59b71e27f47"
/>
**After**
<img width="1637" height="289" alt="image"
src="https://github.com/user-attachments/assets/de5ea4c1-8452-4c5f-aeb1-e1e11e0fe7d5"
/>
## Checklist:
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
44 lines
1.2 KiB
Ruby
44 lines
1.2 KiB
Ruby
class BaseMarkdownRenderer < CommonMarker::HtmlRenderer
|
|
def image(node)
|
|
src, title = extract_img_attributes(node)
|
|
height = extract_image_height(src)
|
|
|
|
render_img_tag(src, title, height)
|
|
end
|
|
|
|
private
|
|
|
|
def extract_img_attributes(node)
|
|
[
|
|
escape_href(node.url),
|
|
escape_html(node.title)
|
|
]
|
|
end
|
|
|
|
def extract_image_height(src)
|
|
query_params = parse_query_params(src)
|
|
query_params['cw_image_height']&.first
|
|
end
|
|
|
|
def parse_query_params(url)
|
|
parsed_url = URI.parse(url)
|
|
CGI.parse(parsed_url.query || '')
|
|
rescue URI::InvalidURIError
|
|
{}
|
|
end
|
|
|
|
def render_img_tag(src, title, height = nil)
|
|
title_attribute = title.present? ? " title=\"#{title}\"" : ''
|
|
# Use inline style instead of the HTML height attribute: email clients and
|
|
# the in-app Letter view both run images through CSS (e.g. prose /
|
|
# lettersanitizer's `img { height: auto }`) which overrides presentational
|
|
# attributes. Inline style has higher specificity and survives.
|
|
style_attribute = height ? " style=\"height: #{height};\"" : ''
|
|
|
|
plain do
|
|
# plain ensures that the content is not wrapped in a paragraph tag
|
|
out("<img src=\"#{src}\"#{title_attribute}#{style_attribute} />")
|
|
end
|
|
end
|
|
end
|