vercel / satori

Enlightened library to convert HTML and CSS to SVG

Home Page:https://og-playground.vercel.app

Repository from Github https://github.comvercel/satoriRepository from Github https://github.comvercel/satori

Some code will cause satori to loop indefinitely immediately

Zxilly opened this issue · comments

commented

Bug report

When satori tries to render the following code it immediately falls into a dead loop, both in the browser and in node

Description / Observed Behavior

Just try to render the following template

Expected Behavior

Got a rendered svg.

Reproduction

I can't create a share link because the whole page gets stuck as soon as I enter this code

<div
  style={{
    width: '100%',
    height: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    padding: '40px',
    fontFamily: 'HarmonyOS_Sans, JetBrains Mono, sans-serif',
  }}
>
  <div
    style={{
      width: '100%',
      maxWidth: '800px',
      backgroundColor: 'white',
      borderRadius: '16px',
      padding: '24px',
      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    }}
  >
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
      <div style={{ flex: 1, marginRight: '20px' }}>
        <h2 style={{ margin: '0 0 8px 0', fontSize: '18px' }}>仓颉 Playground</h2>
        <p style={{ margin: 0, fontSize: '14px', wordBreak: 'break-all' }}>
          "A link string"
        </p>
      </div>
    </div>
  </div>
</div>

Additional Context

Edge 128.0.2739.54 and Node.js v22.3.0

commented

remove wordBreak: 'break-all' can resolve this

Can confirm that for some widths word break breaks code instead of words