Files
webmail/lib/email-full-bleed.ts

27 lines
1.1 KiB
TypeScript

/**
* Whether a mail paints a full-bleed background canvas: a table, div or body
* that is 100% wide and carries a background colour. The reader drops its
* own gutter around such mail, since the gutter would show as a frame around
* the mail's background.
*
* Each start tag is looked at on its own and each condition tested on its
* attribute text separately. The former single regex ran two unbounded
* `[^>]*` scans over one tag and backtracked between them, which made a tag
* with many `width:100%` declarations and no background cost quadratic time:
* a 1 MB style attribute held the UI thread for well over a minute, on
* every open of the message.
*/
const START_TAG = /<(?:table|div|body)\b([^<>]{0,8192})/gi;
const FULL_WIDTH = /\bwidth\s*=\s*["']?\s*100%|width\s*:\s*100%/i;
const BACKGROUND = /\bbgcolor\s*=|background(?:-color)?\s*:/i;
export function hasFullBleedCanvas(html: string): boolean {
START_TAG.lastIndex = 0;
for (const match of html.matchAll(START_TAG)) {
const attributes = match[1];
if (FULL_WIDTH.test(attributes) && BACKGROUND.test(attributes)) return true;
}
return false;
}