carbon-app / carbon

:black_heart: Create and share beautiful images of your source code
https://carbon.now.sh
MIT License
34.29k stars 1.9k forks source link

Formatting issue #1494

Closed vvscode closed 9 months ago

vvscode commented 10 months ago

Describe the bug Incorrect formatting in exported image

To Reproduce Steps to reproduce the behavior:

  1. Use next code
    
    const button = element.querySelector('.actionButton')
    const textWrapper = element.querySelector('.textElemenet')

button.addEventListener('click', () => { textWrapper.innerHTML = button is <strong>clicked</strong> })



2. Export as image (via copy image to clipboard or via export)

**Screenshots**
Expected:
![image](https://github.com/carbon-app/carbon/assets/6904368/4e2885c1-91df-46f4-9d64-657a55087915)

Recieved:
![carbon](https://github.com/carbon-app/carbon/assets/6904368/d3afdc3d-8f13-46a7-a11e-18e1ca17284d)
![image](https://github.com/carbon-app/carbon/assets/6904368/eae4ee28-f76b-40b0-832f-cdffbfbaacdc)

If applicable, add screenshots to help explain your problem.

- OS [e.g. macOS, Linux, Windows, iOS]: MacOS
- Browser [e.g. Chrome, Safari, Firefox]: Chrome
- Carbon URL [e.g. carbon.now.sh?bg=pink]: https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=application%2Ftypescript&width=680&ds=false&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=0px&ph=0px&ln=true&fl=1&fm=Hack&fs=17.5px&lh=196%25&si=false&es=4x&wm=false&code=const%2520button%2520%253D%2520element.querySelector%28%27.actionButton%27%29%250Aconst%2520textWrapper%2520%253D%2520element.querySelector%28%27.textElemenet%27%29%250A%250Abutton.addEventListener%28%27click%27%252C%2520%28%29%2520%253D%253E%2520%257B%250A%2520%2520textWrapper.innerHTML%2520%253D%2520%2560button%2520is%2520%253Cstrong%253Eclicked%253C%252Fstrong%253E%2560%250A%257D%29%250A

<details>
  <summary>Code snippet</summary>
  <pre>
const button = element.querySelector('.actionButton')
const textWrapper = element.querySelector('.textElemenet')

button.addEventListener('click', () => {
  textWrapper.innerHTML = `button is <strong>clicked</strong>`
})
  </pre>
</details>
abhinav941 commented 9 months ago

Exporting same snippet, I'm getting correct image carbon (2)

vvscode commented 9 months ago
YOUR WEB BROWSER'S TECHNICAL DETAILS:
Here is a more detailed read out of some technical information about your system.

Software Type - Web Browser
Hardware Type - Computer
Browser version (full)- 116.0.5845.179
Operating System version (full) - 13.4.1
Layout Engine - Blink
Configured Languages - English
Device Pixel Ratio - 2
Browser GMT Offset +03:00
[Navigator Platform](https://www.whatismybrowser.com/detect/navigator-platform) - [Intel based Mac](https://www.whatismybrowser.com/detect/navigator-platform)
Vendor - Google Inc.
No. of logical CPU cores - 10
RAM - 8 GB
Maximum Touch Points - 0
WebGL Vendor - Google Inc. (Apple)
WebGL Renderer - ANGLE (Apple, Apple M1 Pro, OpenGL 4.1)
vvscode commented 9 months ago

can confirm, that on another laptop with more fresh version of chrome everything works fine