Screenshot formatting is broken for hanging indent code

[aidansunbury]

Describe the bug When writing code with hanging indents (first line is at the margin, subsequent lines are indented), the screenshot exports are not formatted in the same way as they appear in the carbon editor.

This may also just be an issue with the editor frame not wrapping code when it should. Making the editor frame slightly wider normally fixes the issue.

To Reproduce Write any code in the editor using hanging indents and export it. I tested that both the copy to clipboard and the download image exports were broken.

Screenshots

View in Editor

Exported image

• OS [e.g. macOS]: macOS
• Browser [e.g. Chrome]: Chrome
• Carbon URL [e.g. carbon.now.sh?bg=pink]: https://carbon.now.sh/7sZ1Ptl7aSU6F3jciLjV (example code that will not export properly

[zach28attack]

I would like to work on this. If possible please assign me.

[mxschmitt]

I can repro, e.g.:

import { expect, test } from '@nuxt/test-utils/playwright'

test.use({
  nuxt: {
    rootDir: fileURLToPath(new URL('..', import.meta.url))
  }
})

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  await expect(page.getByRole('heading')).toHaveText('Welcome to Playwright!')
})

produces: