@h-k-dev/angular-email-editor 0.0.6 → 0.0.8

package/fesm2022/h-k-dev-angular-email-editor.mjs

@@ -1265,6 +1265,13 @@ function passesDualContrast(hex) {
     return (contrastRatio(hex, DUAL_CONTRAST_LIGHT) >= DUAL_CONTRAST_MIN_RATIO &&
         contrastRatio(hex, DUAL_CONTRAST_DARK) >= DUAL_CONTRAST_MIN_RATIO);
 }
+/**
+ * The dark surfaces the dark variants are held to: Apple Mail's reading pane
+ * and Outlook's (new Outlook for Windows, Outlook.com) — the clients that
+ * read the email's own dark-mode styles (dark-mode.ts). AA (4.5:1) for a
+ * colour on each, and AAA (7:1) for the body's black on each.
+ */
+const DARK_MODE_SURFACES = ['#1e1e1e', '#292929'];
 /** Flip a `#rrggbb` colour the way a forced-inversion client (Gmail/Outlook
     dark mode) roughly does: each channel to its complement. */
 function invert(hex) {
@@ -1311,7 +1318,7 @@ const FILL_TEXT_COLOR_RGB = 'rgb(32, 33, 36)';
 const FILL_TEXT_COLOR_LIGHT = '#ffffff';
 /** A `#rgb`, `#rrggbb` or CSSOM `rgb()` / `rgba()` colour as `#rrggbb`, or
     null for anything else (a keyword, a function this does not read). */
-function toHex(raw) {
+function cssColorToHex(raw) {
     const v = raw.trim().toLowerCase();
     if (/^#[0-9a-f]{6}$/.test(v))
         return v;
@@ -1334,7 +1341,7 @@ function cssomRgb(hex) {
 /** The text a fill is paired with: white on a dark fill, near-black on
     anything else (a colour this cannot read included). */
 function fillTextColor(background) {
-    const hex = toHex(background);
+    const hex = cssColorToHex(background);
     if (!hex)
         return FILL_TEXT_COLOR;
     return contrastRatio(hex, FILL_TEXT_COLOR_LIGHT) > contrastRatio(hex, FILL_TEXT_COLOR)
@@ -1365,54 +1372,68 @@ function passesDualBackground(hex) {
  * passing {@link passesDualBackground} — proven by test. Shared by every
  * background affordance (text highlight, table cells, column panels) so fills
  * read the same everywhere and survive inversion. Black carries white text.
+ *
+ * Each pale fill has a dark variant (dark-mode.ts): the same hue at about
+ * the luminance of a dark client's page, so its paired text's variant reads
+ * on it at AAA and every text colour's variant at AA. Black has none: white
+ * on it already reads on a dark page.
  */
 const emailBackgroundPalette = [
-    { name: 'White', value: '#ffffff' },
-    { name: 'Gray', value: '#f1f3f4' },
+    { name: 'White', value: '#ffffff', dark: '#1e1e1e' },
+    { name: 'Gray', value: '#f1f3f4', dark: '#2f3031' },
     { name: 'Black', value: '#202124' },
-    { name: 'Red', value: '#fce8e6' },
-    { name: 'Orange', value: '#feefe3' },
-    { name: 'Yellow', value: '#fef7e0' },
-    { name: 'Green', value: '#e6f4ea' },
-    { name: 'Teal', value: '#e0f2f1' },
-    { name: 'Blue', value: '#e8f0fe' },
-    { name: 'Purple', value: '#f3e8fd' },
-    { name: 'Pink', value: '#fce7f0' },
+    { name: 'Red', value: '#fce8e6', dark: '#4a2624' },
+    { name: 'Orange', value: '#feefe3', dark: '#462a10' },
+    { name: 'Yellow', value: '#fef7e0', dark: '#3b2f01' },
+    { name: 'Green', value: '#e6f4ea', dark: '#183624' },
+    { name: 'Teal', value: '#e0f2f1', dark: '#083635' },
+    { name: 'Blue', value: '#e8f0fe', dark: '#22304b' },
+    { name: 'Purple', value: '#f3e8fd', dark: '#3e264f' },
+    { name: 'Pink', value: '#fce7f0', dark: '#4a2437' },
 ];
 /**
  * The curated text palette: mid-tone hues that pass {@link passesDualContrast}
  * — proven by test, not by promise. This is what a color picker should offer
  * instead of an arbitrary hex input.
  *
- * Black and white are the two exceptions (no neutral near either end passes:
- * the band runs from #616161 to #949494), offered because a writer needs
- * them — black to take coloured text back to plain, white for text on a dark
- * fill.
+ * Every colour reads at AA (4.5:1) on white and on every pale fill, and so
+ * does its inversion on black (Gmail's dark mode). Its dark variant reads at
+ * AA on {@link DARK_MODE_SURFACES} and on every fill's dark variant — what
+ * Apple Mail and Outlook show, where the email's dark-mode styles are read
+ * (dark-mode.ts). The tones are each hue's lightest that holds on the
+ * palest-but-one fill; the variants are the same hue, lit just enough.
+ *
+ * Black and white are the two exceptions to the mid-tone rule (no neutral
+ * near either end passes: the band runs from #616161 to #949494), offered
+ * because a writer needs them — black to take coloured text back to plain,
+ * white for text on a dark fill. Black is the body's text, so it is held to
+ * AAA (7:1) in both modes.
  */
 const emailTextPalette = [
     {
         name: 'Black',
         value: '#202124',
-        exception: 'Vanishes on a dark client that keeps explicit colours; inverters flip it.',
+        dark: '#e8eaed',
+        exception: 'Vanishes on a dark client that keeps explicit colours and reads no dark-mode styles; inverters flip it, the rest take its dark variant.',
     },
-    { name: 'Gray', value: '#5f6368' },
+    { name: 'Gray', value: '#5f6368', dark: '#969a9f' },
     {
         name: 'White',
         value: '#ffffff',
         exception: 'Invisible on a white page — it is for text on a dark fill.',
     },
-    { name: 'Brown', value: '#8d6e63' },
-    { name: 'Red', value: '#c5221f' },
-    { name: 'Orange', value: '#c2410c' },
-    { name: 'Amber', value: '#a05a00' },
-    { name: 'Olive', value: '#808000' },
-    { name: 'Green', value: '#188038' },
-    { name: 'Teal', value: '#0f766e' },
-    { name: 'Cyan', value: '#0e7490' },
-    { name: 'Blue', value: '#1a73e8' },
-    { name: 'Indigo', value: '#6366f1' },
-    { name: 'Purple', value: '#9333ea' },
-    { name: 'Pink', value: '#c2185b' },
+    { name: 'Brown', value: '#836459', dark: '#b39287' },
+    { name: 'Red', value: '#c5221f', dark: '#ff695b' },
+    { name: 'Orange', value: '#bf3e06', dark: '#f67145' },
+    { name: 'Amber', value: '#9e5a09', dark: '#d38943' },
+    { name: 'Olive', value: '#6e6e06', dark: '#9d9e34' },
+    { name: 'Green', value: '#0f7b33', dark: '#4dac61' },
+    { name: 'Teal', value: '#0f766e', dark: '#50a89f' },
+    { name: 'Cyan', value: '#0e7490', dark: '#4da4c1' },
+    { name: 'Blue', value: '#0366da', dark: '#5299ff' },
+    { name: 'Indigo', value: '#5858e2', dark: '#8590fe' },
+    { name: 'Purple', value: '#9333ea', dark: '#b77efe' },
+    { name: 'Pink', value: '#c2185b', dark: '#fd6490' },
 ];
 
 /** An inline atom with a box of its own — what a range can cover like a
@@ -2057,6 +2078,19 @@ const inlinePadding = (el) => inlineBox(el, 'padding');
 function isZeroSide(side) {
     return /^0(?:px|em|rem|%)?$/i.test(side.trim());
 }
+/** Whether an element says, inline, that it has no space above — its top
+    margin declared (`margin` or `margin-top`, the later winning) and zero.
+    One that says nothing had a client's default space above it. What marks
+    a heading or a list as **layout**: flush, its spacing left to the layout
+    around it. */
+function declaresFlushTop(el) {
+    const top = parseDeclarations$1(el.getAttribute('style') ?? '')
+        .filter(({ name }) => name === 'margin' || name === 'margin-top')
+        .at(-1);
+    if (!top)
+        return false;
+    return isZeroSide(top.name === 'margin' ? top.value.trim().split(/\s+/)[0] : top.value);
+}
 /**
  * Rewrites, under `root`, every `style` attribute whose text an engine
  * might read wrong — see the module note — into the same declarations in
@@ -2577,11 +2611,11 @@ const Table = defineNode({
         // Index-addressed variants for the hover controls (a handle targets a
         // specific row/column, independent of where the cursor sits).
         addRowAt: (index) => editTable((tr, rect) => {
-            addRow(tr, rect, clamp$3(index, 0, rect.map.height));
+            addRow(tr, rect, clamp$4(index, 0, rect.map.height));
             return true;
         }),
         addColumnAt: (index) => editTable((tr, rect) => {
-            addColumn$1(tr, rect, clamp$3(index, 0, rect.map.width));
+            addColumn$1(tr, rect, clamp$4(index, 0, rect.map.width));
             rescaleForNewColumn(tr, rect.tableStart - 1);
             return true;
         }),
@@ -2813,7 +2847,7 @@ function findTableContext(state) {
     }
     return null;
 }
-const clamp$3 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+const clamp$4 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 /** Runs a structural edit against the table holding the selection. The
     transaction is built even while probing (no dispatch) so enablement is
     reported by the edit itself — cheap, and it can't disagree with what the
@@ -6735,7 +6769,7 @@ function holdsCommentChild(element) {
     return false;
 }
 /** No elements and no text but HTML whitespace. */
-function isBare(element) {
+function isBare$1(element) {
     return element.children.length === 0 && /^[ \t\n\f\r]*$/.test(element.textContent ?? '');
 }
 /** Same tag and attributes, element by element. */
@@ -6808,7 +6842,7 @@ function recognize(schema, rule, typeOf) {
         // Nothing inside, where the node's own rendering of nothing puts
         // something: MJML's divider is an empty `<p>` drawing a border, and the
         // `<br>` an empty line is written with would give it a line's height.
-        if (isBare(content) && canonicalPath[canonicalPath.length - 1].hasChildNodes())
+        if (isBare$1(content) && canonicalPath[canonicalPath.length - 1].hasChildNodes())
             return false;
         if (!leaf && !type.inlineContent && !holdsForeignBlocks) {
             let match = type.contentMatch;
@@ -7039,7 +7073,7 @@ function canonicalHead(head) {
         if (node.nodeType === Node.TEXT_NODE) {
             const text = (node.nodeValue ?? '').replace(/\s+/g, ' ').trim();
             if (text)
-                lines.push(escapeText$1(text));
+                lines.push(escapeText$2(text));
             continue;
         }
         if (!(node instanceof Element))
@@ -7056,7 +7090,7 @@ function canonicalHead(head) {
         }
         else {
             const text = (node.textContent ?? '').replace(/\s+/g, ' ').trim();
-            lines.push(`${open}${escapeText$1(text)}</${tag}>`);
+            lines.push(`${open}${escapeText$2(text)}</${tag}>`);
         }
     }
     return lines.join('\n');
@@ -7118,7 +7152,7 @@ const BOOLEAN_ATTRIBUTES = new Set([
     'reversed',
     'selected',
 ]);
-function escapeText$1(text) {
+function escapeText$2(text) {
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 function escapeAttribute$2(value) {
@@ -8493,7 +8527,7 @@ function emailSizeBudget(html) {
 }
 
 /** Escapes text for an HTML text position. */
-function escapeText(text) {
+function escapeText$1(text) {
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 /** Escapes a value for a double-quoted HTML attribute. */
@@ -9593,7 +9627,204 @@ const trimWhitespace = (text) => text.replace(/^ | $/g, '');
 /** Text for the source pane: a Unicode space shows as its reference
     (`&nbsp;`, `&#8202;`) — the raw character is invisible there and reads
     as a plain space, or as nothing. */
-const sourceText = (text) => escapeText(text).replace(/[\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g, (ch) => (ch === '\u00a0' ? '&nbsp;' : `&#${ch.charCodeAt(0)};`));
+const sourceText = (text) => escapeText$1(text).replace(/[\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g, (ch) => (ch === '\u00a0' ? '&nbsp;' : `&#${ch.charCodeAt(0)};`));
+
+/**
+ * Dark mode, written into the email: the palette's own dark variants
+ * ({@link PaletteColor.dark}) for the clients that read an email's dark-mode
+ * styles, so a curated colour reads at AA there too — which no single value
+ * can do on a white page and a dark one at once (dual-contrast.ts).
+ *
+ * - **Apple Mail** (macOS, iOS) and **new Outlook / Outlook.com**: the
+ *   document says it is drawn for both schemes (`color-scheme: light dark`),
+ *   and each palette colour it carries takes its variant — through
+ *   `@media (prefers-color-scheme: dark)` for Apple, `[data-ogsc]` /
+ *   `[data-ogsb]` for Outlook, which marks a message it darkens that way.
+ * - **Gmail** and **classic Outlook for Windows** read neither and invert
+ *   the colours themselves; the light values are chosen to read after that
+ *   inversion, and the rules sit in a `<style>` of their own, so a client
+ *   that throws the block away keeps every other rule.
+ *
+ * Only the palette's colours move, and only where the move reads: a fill
+ * goes dark when nothing in it wears a colour outside the palette (dark text
+ * on it would vanish), and a text colour lights up when no background over
+ * it stays light. A colour typed into the HTML source is the author's own,
+ * as everywhere (principle 9) — it stays, and so does what holds it.
+ *
+ * The canonical HTML never carries any of this: {@link markDarkMode} works
+ * on the email document only (`emailDocument`), and the editor shows the
+ * same rendering through {@link darkModeEditorCss} — one set of selectors,
+ * so the two cannot drift.
+ */
+/** The library's palette, both sides. */
+const emailDarkModePalette = {
+    text: emailTextPalette,
+    background: emailBackgroundPalette,
+};
+/** The class a text colour's element wears in the email: `aee-dt-c5221f`. */
+const DARK_TEXT_CLASS = 'aee-dt-';
+/** The class a fill's element wears in the email: `aee-db-fce8e6`. */
+const DARK_FILL_CLASS = 'aee-db-';
+/** What a document says to be drawn in both schemes: Apple Mail then reads
+    its dark-mode rules (and leaves its own recolouring be). */
+const COLOR_SCHEME_META = '<meta name="color-scheme" content="light dark">' +
+    '<meta name="supported-color-schemes" content="light dark">';
+/** The same, for the stylesheet. */
+const COLOR_SCHEME_RULE = ':root { color-scheme: light dark; supported-color-schemes: light dark; }';
+/** The ways a colour is written in a style: as the editor writes it (`#hex`)
+    and as the CSSOM serialises it (`rgb(r, g, b)`) — an rgb fill (columns)
+    is kept in that form. */
+function spellings(hex) {
+    const n = parseInt(hex.slice(1), 16);
+    return [hex, `rgb(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255})`];
+}
+/** An element whose own text colour is `hex`. */
+function textSelector(hex) {
+    return [
+        ...spellings(hex).flatMap((value) => [
+            `[style^="color: ${value}" i]`,
+            `[style*="; color: ${value}" i]`,
+        ]),
+        `font[color="${hex}" i]`,
+    ].join(', ');
+}
+/** An element filled with `hex` and nothing over it (no picture). */
+function fillSelector(hex) {
+    return [
+        ...spellings(hex).map((value) => `[style*="background-color: ${value}" i]`),
+        `[bgcolor="${hex}" i]`,
+    ]
+        .map((selector) => `${selector}:not([style*="url(" i]):not([background])`)
+        .join(', ');
+}
+/** Any element with a text colour of its own. */
+const ANY_TEXT = '[style^="color" i], [style*="; color" i], [style*=";color" i], font[color]';
+/** Any element with a background of its own. */
+const ANY_FILL = '[style*="background" i], [bgcolor], [background]';
+function variants(colors, selector) {
+    const seen = new Set();
+    const out = [];
+    for (const color of colors) {
+        const hex = color.value.toLowerCase();
+        if (!color.dark || !/^#[0-9a-f]{6}$/.test(hex) || seen.has(hex))
+            continue;
+        seen.add(hex);
+        out.push({ hex, dark: color.dark.toLowerCase(), selector: selector(hex) });
+    }
+    return out;
+}
+function selectors(palette) {
+    const text = variants(palette.text, textSelector);
+    const fill = variants(palette.background, fillSelector);
+    const mappedText = text.map((v) => v.selector).join(', ');
+    return {
+        text,
+        fill,
+        foreign: mappedText ? `:is(${ANY_TEXT}):not(${mappedText})` : `:is(${ANY_TEXT})`,
+        anyFill: ANY_FILL,
+        mappedFill: fill.map((v) => v.selector).join(', '),
+    };
+}
+/**
+ * Marks the palette's colours in an email body for dark mode: a fill that
+ * goes dark wears `aee-db-<hex>`, a text colour that lights up wears
+ * `aee-dt-<hex>`, and `css` holds the rules for exactly those classes.
+ *
+ * A fill goes dark when it is the palette's, nothing in it (itself
+ * included) wears a colour outside the palette, and every background round
+ * it goes dark too. A text colour lights up when it is the palette's and
+ * every background over it (its own included) goes dark — so lit text never
+ * stands on a light fill, nor dark text on a dark one.
+ */
+function markDarkMode(html, palette = emailDarkModePalette) {
+    const sel = selectors(palette);
+    if (!sel.text.length && !sel.fill.length)
+        return { html, css: '' };
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const usedText = new Map();
+    const usedFill = new Map();
+    // Bottom-up: whether a subtree wears only the palette's colours.
+    const clean = new Map();
+    const visitClean = (el) => {
+        let ok = !el.matches(sel.foreign);
+        for (const child of Array.from(el.children))
+            ok = visitClean(child) && ok;
+        clean.set(el, ok);
+        return ok;
+    };
+    // Top-down: classes, under no background that stays light.
+    const visit = (el, underLight) => {
+        let light = underLight;
+        if (el.matches(sel.anyFill)) {
+            const fill = sel.fill.find((v) => el.matches(v.selector));
+            if (fill && clean.get(el) && !underLight) {
+                el.classList.add(DARK_FILL_CLASS + fill.hex.slice(1));
+                usedFill.set(fill.hex, fill.dark);
+            }
+            else {
+                light = true;
+            }
+        }
+        if (!light) {
+            const text = sel.text.find((v) => el.matches(v.selector));
+            if (text) {
+                el.classList.add(DARK_TEXT_CLASS + text.hex.slice(1));
+                usedText.set(text.hex, text.dark);
+            }
+        }
+        for (const child of Array.from(el.children))
+            visit(child, light);
+    };
+    const roots = Array.from(template.content.children);
+    for (const root of roots)
+        visitClean(root);
+    for (const root of roots)
+        visit(root, false);
+    if (!usedText.size && !usedFill.size)
+        return { html, css: '' };
+    const textRules = [...usedText].map(([hex, dark]) => `.${DARK_TEXT_CLASS}${hex.slice(1)} { color: ${dark} !important; }`);
+    const fillRules = [...usedFill].map(([hex, dark]) => `.${DARK_FILL_CLASS}${hex.slice(1)} { background-color: ${dark} !important; }`);
+    const css = [
+        `@media (prefers-color-scheme: dark) { ${[...fillRules, ...textRules].join(' ')} }`,
+        ...fillRules.map((rule) => `[data-ogsb] ${rule}`),
+        ...textRules.map((rule) => `[data-ogsc] ${rule}`),
+    ].join('\n');
+    return { html: template.innerHTML, css };
+}
+/**
+ * The same dark rendering for the editor's own surface: every rule of
+ * {@link markDarkMode}, as a stylesheet over the live text under `scope`
+ * (the editor root while it shows dark) — the editor's markup is never
+ * touched. Each colour hands its variant over in a custom property; two
+ * rules then apply them where the email's classes would go.
+ *
+ *     darkModeEditorCss(palette, '.paper[data-color-scheme="dark"] > .aee-editor')
+ */
+function darkModeEditorCss(scope, palette = emailDarkModePalette) {
+    const sel = selectors(palette);
+    if (!sel.text.length && !sel.fill.length)
+        return '';
+    // A background that stays light: one outside the palette, or one holding a
+    // colour outside it. Everything under it stays as it is.
+    const darkFill = sel.mappedFill
+        ? `:is(${sel.mappedFill}):not(${sel.foreign}):not(:has(${sel.foreign}))`
+        : null;
+    const lightFill = darkFill ? `:is(${sel.anyFill}):not(${darkFill})` : `:is(${sel.anyFill})`;
+    const rules = [];
+    for (const v of sel.fill)
+        rules.push(`${scope} :is(${v.selector}) { --aee-dark-fill: ${v.dark}; }`);
+    for (const v of sel.text)
+        rules.push(`${scope} :is(${v.selector}) { --aee-dark-text: ${v.dark}; }`);
+    if (darkFill) {
+        rules.push(`${scope} ${darkFill}:not(${lightFill} *) { background-color: var(--aee-dark-fill) !important; }`);
+    }
+    const mappedText = sel.text.map((v) => v.selector).join(', ');
+    if (mappedText) {
+        rules.push(`${scope} :is(${mappedText}):not(${lightFill}):not(${lightFill} *) { color: var(--aee-dark-text) !important; }`);
+    }
+    return rules.join('\n');
+}
 
 const RENDERING_CLIENTS = [
     'apple-mail',
@@ -9608,12 +9839,15 @@ const RENDERING_CLIENTS = [
  * put in, and the client's own surface (its default face, size and colours)
  * is laid underneath. The result is a whole document for a sandboxed frame.
  *
- * - **Apple Mail** reads it all: the document as it is, on Apple's surface.
+ * - **Apple Mail** reads it all: the document as it is, on Apple's surface;
+ *   in dark mode its `prefers-color-scheme: dark` rules apply, so a
+ *   fragment's palette colours take their dark variants (dark-mode.ts).
  * - **Gmail** drops the comments, the form controls (a hamburger's
  *   checkbox and label), every `<style>` rule whose selector it cannot
  *   match (pseudo-classes, attribute selectors, sibling combinators), and
  *   the declarations the data marks as ignored there (position, flex and
- *   grid, transforms, animation). Its dark mode inverts the colours.
+ *   grid, transforms, animation). It reads no `prefers-color-scheme`,
+ *   and its dark mode inverts the colours.
  * - **Outlook on Windows** reads what the Word engine reads: the
  *   conditional comments meant for it are opened (`[if mso]`, `[if mso |
  *   IE]`, `[if gte mso 9]`) and the parts kept from it are taken out
@@ -9623,14 +9857,30 @@ const RENDERING_CLIENTS = [
  *   shadows, and the rest), and an `inline-block` block stacks. VML is left
  *   standing — a browser draws none of it, so a picture behind text shows
  *   as the colour beneath, which is what an Outlook without VML shows too.
+ *   Its dark mode (classic Outlook; the new one is Outlook.com's) recolours
+ *   the message itself, as Gmail's does, onto its own dark surface.
  *
  * Takes a fragment (the editor's canonical HTML) or a whole document (an
  * import as it was pasted): a document keeps its head — its `<style>`,
- * subject to the client — with the client's surface laid before it.
+ * subject to the client — with the client's surface laid before it. A
+ * fragment is drawn as `emailDocument` sends it: its dark-mode classes
+ * and rules put in. Outlook.com's markers (`[data-ogsc]`) are set by none
+ * of the three, so their rules never apply here.
  */
 function renderForClient(html, client, options = {}) {
-    const source = client === 'outlook-desktop' ? openOutlookConditionals(html) : html;
+    const palette = options.darkMode ?? emailDarkModePalette;
+    const dark = palette && !hasDocumentEnvelope(html) ? markDarkMode(html, palette) : null;
+    const marked = dark ? dark.html : html;
+    const source = client === 'outlook-desktop' ? openOutlookConditionals(marked) : marked;
     const doc = new DOMParser().parseFromString(source, 'text/html');
+    if (dark) {
+        const sheet = doc.createElement('style');
+        sheet.textContent = [COLOR_SCHEME_RULE, dark.css].filter(Boolean).join(' ');
+        doc.head.appendChild(sheet);
+    }
+    for (const sheet of Array.from(doc.querySelectorAll('style'))) {
+        sheet.textContent = resolveColorScheme(dropRules(sheet.textContent ?? '', OUTLOOK_COM_MARKER), client === 'apple-mail' && !!options.dark);
+    }
     if (client !== 'apple-mail')
         dropComments(doc);
     if (client === 'gmail') {
@@ -9660,30 +9910,40 @@ function renderForClient(html, client, options = {}) {
     return '<!doctype html>' + doc.documentElement.outerHTML;
 }
 /** Each client's surface: its reading pane's default face, size and
-    colours, under whatever the email says for itself. */
+    colours, under whatever the email says for itself. Light whatever the
+    viewer's own scheme is: the frame is the client, not the page round it. */
 const SURFACE = {
     'apple-mail': `
+    :root { color-scheme: light !important; }
     body { margin: 16px; background: #ffffff; color: #000000;
            font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 15px; line-height: 1.35; -webkit-text-size-adjust: 100%; }
   `,
     gmail: `
+    :root { color-scheme: light !important; }
     body { margin: 16px; background: #ffffff; color: #222222;
            font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4;
            word-wrap: break-word; }
   `,
     'outlook-desktop': `
+    :root { color-scheme: light !important; }
     body { margin: 16px; background: #ffffff; color: #000000;
            font-family: Calibri, Arial, sans-serif; font-size: 14.67px; line-height: 1.2; }
     /* The Word engine draws no block side by side: a column stacks. */
     div[style*="inline-block"] { display: block !important; width: auto !important; }
   `,
 };
-/** Each client's dark mode: Gmail (and Outlook's app) invert the message,
-    keeping the hue; Apple Mail and Outlook on Windows turn the surface dark
-    and leave the message's own colours to it. */
+/** Each client's dark mode. Apple Mail turns the surface dark and leaves
+    the message's colours to the message — its own dark-mode rules
+    included. Gmail inverts the message, keeping the hue. Classic Outlook
+    for Windows recolours it too (Litmus' "full invert"; it reads no
+    dark-mode rule), onto its own #292929: `invert(a)` takes white to
+    1 - a, so a = 1 - 41/255 lands the white page on it, and a picture,
+    put through the inversion once more, comes out eased into the page's
+    range. */
 const DARK = {
     'apple-mail': `
+    :root { color-scheme: dark !important; }
     html { background: #1e1e1e; } body { background: #1e1e1e; color: #ffffff; }
   `,
     gmail: `
@@ -9691,9 +9951,24 @@ const DARK = {
     img { filter: invert(1) hue-rotate(180deg); }
   `,
     'outlook-desktop': `
-    html { background: #292929; } body { background: #292929; color: #ffffff; }
+    html { filter: invert(0.8392) hue-rotate(180deg); background: #ffffff; }
+    img { filter: invert(1) hue-rotate(180deg); }
   `,
 };
+/** Outlook.com's markers: set on a message it darkens, by none of the
+    clients drawn here. */
+const OUTLOOK_COM_MARKER = /\[data-ogs[bc]\]/i;
+/** The stylesheet without the rules whose selector `marker` matches. */
+function dropRules(css, marker) {
+    return marker.test(css) ? rewriteRules(css, (selector) => !marker.test(selector)) : css;
+}
+/** `prefers-color-scheme` answered for the frame: `dark` true where the
+    client is drawn dark and reads the query (Apple Mail), false everywhere
+    else — a client that reads no such query never matches it, whatever
+    the viewer's own scheme. */
+function resolveColorScheme(css, dark) {
+    return css.replace(/\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)/gi, (_, scheme) => (scheme.toLowerCase() === 'dark') === dark ? '(min-width: 0px)' : '(max-width: -1px)');
+}
 /** The Word engine reads what the conditional comments keep for it, and
     not what they keep from it. */
 function openOutlookConditionals(html) {
@@ -9815,6 +10090,27 @@ function emailPlainText(html) {
     renderChildren(body, lines, '');
     return lines.join('\n');
 }
+/**
+ * Text as a plain-text message's document — the way back from
+ * {@link emailPlainText}: one email line (`<div>`) per line of text, an
+ * empty line as `<div><br></div>`, every character escaped. What an editor
+ * on `plainTextExtensions` takes when a message turns to plain text:
+ *
+ * ```ts
+ * editor.setContent(plainTextHTML(emailPlainText(html)));
+ * ```
+ *
+ * and `emailPlainText` reads it back as the same lines.
+ */
+function plainTextHTML(text) {
+    return text
+        .split(/\r\n?|\n/)
+        .map((line) => (line ? `<div>${escapeText(line)}</div>` : '<div><br></div>'))
+        .join('');
+}
+function escapeText(text) {
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
 function renderChildren(parent, lines, prefix) {
     for (const child of Array.from(parent.children))
         renderBlock(child, lines, prefix);
@@ -9920,12 +10216,23 @@ function imageText(element) {
  * keeps the cap — narrower, still whole — and loses nothing else, which is
  * the same rule the canonical HTML already keeps.
  *
+ * Dark mode is the other enhancement (dark-mode.ts): the document says it
+ * is drawn for both schemes, and the palette's colours in it wear a class
+ * that their dark variant hangs on, in a `<style>` of its own — a client
+ * that reads none of it (Gmail, classic Outlook) inverts the light colours,
+ * which are chosen to read inverted.
+ *
  * The result is for the transport, not for the editor: parse and
  * `emailPlainText` take the fragment `serializeToHTML` returns (the preview
  * text would otherwise read as body text).
  */
 function emailDocument(html, options = {}) {
-    const { lang, dir = 'auto', title, previewText } = options;
+    const { lang, dir = 'auto', title, previewText, darkMode = emailDarkModePalette } = options;
+    // Columns first: the stacking class goes in by pattern, on the markup as
+    // the editor wrote it; the dark-mode classes join it on the element.
+    const stacked = markStackingColumns(html);
+    const dark = darkMode ? markDarkMode(stacked, darkMode) : null;
+    const darkStyle = dark ? [COLOR_SCHEME_RULE, dark.css].filter(Boolean).join(' ') : '';
     const langAttr = lang ? ` lang="${escapeAttribute$1(lang)}"` : '';
     const dirAttr = ` dir="${dir}"`;
     return ('<!doctype html>' +
@@ -9935,14 +10242,16 @@ function emailDocument(html, options = {}) {
         '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">' +
         '<meta name="viewport" content="width=device-width, initial-scale=1">' +
         '<meta name="x-apple-disable-message-reformatting">' +
-        `<title>${escapeText(title ?? '')}</title>` +
+        (dark ? COLOR_SCHEME_META : '') +
+        `<title>${escapeText$1(title ?? '')}</title>` +
         OUTLOOK_SETTINGS +
         `<style type="text/css">${STACK_RULE}</style>` +
+        (dark ? `<style type="text/css">${darkStyle}</style>` : '') +
         '</head>' +
         `<body style="${BODY_STYLE}">` +
         `<div role="article" aria-roledescription="email"${langAttr}${dirAttr}>` +
         (previewText ? previewBlock(previewText) : '') +
-        markStackingColumns(html) +
+        (dark ? dark.html : stacked) +
         '</div>' +
         '</body>' +
         '</html>');
@@ -9961,7 +10270,7 @@ const PREVIEW_STYLE = 'display: none; max-height: 0; overflow: hidden; mso-hide:
     space per step — none renders, each counts as a character. */
 const PREVIEW_FILLER = '&#847;&zwnj;&nbsp;'.repeat(90);
 function previewBlock(text) {
-    return `<div style="${PREVIEW_STYLE}">${escapeText(text)}${PREVIEW_FILLER}</div>`;
+    return `<div style="${PREVIEW_STYLE}">${escapeText$1(text)}${PREVIEW_FILLER}</div>`;
 }
 
 const word = (label) => (typeof label === 'function' ? label() : label);
@@ -10440,11 +10749,32 @@ const toggleList = (listType, itemType) => (state, dispatch, view) => {
     const depth = findListDepth($from);
     if (depth === null)
         return wrapInList(listType)(state, dispatch);
-    if ($from.node(depth).type === listType)
+    const list = $from.node(depth);
+    if (list.type === listType)
         return liftListItem(itemType)(state, dispatch, view);
-    dispatch?.(state.tr.setNodeMarkup($from.before(depth), listType));
+    // The other flavour, in place: a layout list stays one.
+    dispatch?.(state.tr.setNodeMarkup($from.before(depth), listType, { layout: list.attrs['layout'] }));
     return true;
 };
+/**
+ * The layout list's toggle: wraps the selection in a layout list, makes the
+ * list it is in one (either flavour, kept flush), or lifts out of it when it
+ * is one already.
+ */
+const toggleLayoutList = (listType, itemType) => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const depth = findListDepth($from);
+    if (depth === null)
+        return wrapInList(listType, { layout: true })(state, dispatch);
+    const list = $from.node(depth);
+    if (list.type === listType && list.attrs['layout']) {
+        return liftListItem(itemType)(state, dispatch, view);
+    }
+    dispatch?.(state.tr.setNodeMarkup($from.before(depth), listType, { ...list.attrs, layout: true }));
+    return true;
+};
+/** Whether the selection is in a list of `type`, a layout one or not. */
+const inList = (state, type, layout) => isNodeActive(state, type, { layout });
 /**
  * Tiptap-inspired helper: Intercepts the default splitListItem transaction
  * and ensures marks (bold, italic, etc.) are carried over to the new list item.
@@ -10458,10 +10788,63 @@ const splitListItemKeepMarks = (itemType) => (state, dispatch, view) => {
         dispatch?.(tr);
     }, view);
 };
-/** The ledger's answer to the 40px-per-level default indent that eats a
-    third of a phone screen: a small explicit indent, no margins (lines carry
-    none). Nested lists compound 24px per level, readable at 320px. */
-const LIST_STYLE = 'margin: 0px; padding-left: 24px;';
+/** The space above and below a list: Gmail's own. */
+const LIST_SPACE = 12;
+/**
+ * A list's canonical inline style. The indent is the ledger's answer to the
+ * 40px-per-level default that eats a third of a phone screen: 24px, nested
+ * lists compounding it, readable at 320px. A list keeps 12px above and below
+ * — Gmail's spacing, the margins the schema writes besides a heading's
+ * (positive px margins render in Gmail, Outlook's Word engine and Apple Mail
+ * alike; where one meets a heading's or another list's, Outlook may add the
+ * two, up to 12px past what a browser shows). A **layout** list sits flush,
+ * `margin: 0`, spacing left to the layout around it — and so does every
+ * nested list, which belongs to its item's line (see {@link listRepair}).
+ */
+const listStyle = (layout = false) => `margin: ${layout ? '0px' : `${LIST_SPACE}px 0px`}; padding-left: 24px;`;
+/** Whether a parsed list is a layout list: written flush (the composer's own
+    before lists were spaced, a builder's reset), or nested in another. */
+const parsedLayout = (dom) => declaresFlushTop(dom) || !!dom.parentElement?.closest('li, ul, ol');
+/** Ranges a run of transactions wrote, in the last document's positions. */
+const writtenRanges = (trs) => {
+    let ranges = [];
+    for (const tr of trs) {
+        for (const map of tr.mapping.maps) {
+            ranges = ranges.map(([from, to]) => [map.map(from, -1), map.map(to, 1)]);
+            map.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+                if (newEnd > newStart)
+                    ranges.push([newStart, newEnd]);
+            });
+        }
+    }
+    return ranges;
+};
+/**
+ * Keeps a nested list flush: Tab makes one with the default attrs, and its
+ * margin would push the sub-items off their parent's line. Only what the
+ * transactions wrote is looked at; a nested list is made layout, never back.
+ */
+const listRepair = () => new Plugin({
+    key: new PluginKey('listRepair'),
+    appendTransaction: (transactions, _old, state) => {
+        if (!transactions.some((tr) => tr.docChanged))
+            return undefined;
+        const tr = state.tr;
+        const end = state.doc.content.size;
+        for (const [from, to] of writtenRanges(transactions)) {
+            state.doc.nodesBetween(Math.min(from, end), Math.min(to, end), (node, pos, parent) => {
+                if (node.isTextblock)
+                    return false;
+                const nested = parent?.type.name === 'listItem';
+                if (nested && node.type.spec.group?.includes('list') && !node.attrs['layout']) {
+                    tr.setNodeAttribute(pos, 'layout', true);
+                }
+                return true;
+            });
+        }
+        return tr.docChanged ? tr : undefined;
+    },
+});
 const ListItem = defineNode({
     name: 'listItem',
     spec: {
@@ -10481,11 +10864,16 @@ const ListItem = defineNode({
 const BulletList = defineNode({
     name: 'bulletList',
     spec: {
+        attrs: {
+            /** Flush, without the space around it — see {@link listStyle}. */
+            layout: { default: false },
+        },
         content: 'listItem+',
         group: 'block list',
-        parseDOM: [{ tag: 'ul' }],
-        toDOM: () => ['ul', { style: LIST_STYLE }, 0],
+        parseDOM: [{ tag: 'ul', getAttrs: (dom) => ({ layout: parsedLayout(dom) }) }],
+        toDOM: (node) => ['ul', { style: listStyle(node.attrs['layout']) }, 0],
     },
+    plugins: () => [listRepair()],
     commands: ({ schema }) => ({
         toggleBulletList: () => toggleList(schema.nodes['bulletList'], schema.nodes['listItem']),
     }),
@@ -10504,14 +10892,27 @@ const BulletList = defineNode({
             keywords: ['ul', 'unordered', 'list'],
             icon: 'format_list_bulleted',
             command: toggleList(schema.nodes['bulletList'], schema.nodes['listItem']),
-            isActive: (state) => isNodeActive(state, schema.nodes['bulletList']),
+            isActive: (state) => inList(state, schema.nodes['bulletList'], false),
+        },
+        {
+            id: 'bulleted-list-layout',
+            section: 'blocks',
+            title: 'Bulleted list (layout)',
+            keywords: ['ul', 'unordered', 'list', 'layout', 'flush'],
+            icon: 'format_list_bulleted',
+            command: toggleLayoutList(schema.nodes['bulletList'], schema.nodes['listItem']),
+            isActive: (state) => inList(state, schema.nodes['bulletList'], true),
         },
     ],
 });
 const OrderedList = defineNode({
     name: 'orderedList',
     spec: {
-        attrs: { order: { default: 1 } },
+        attrs: {
+            order: { default: 1 },
+            /** Flush, without the space around it — see {@link listStyle}. */
+            layout: { default: false },
+        },
         content: 'listItem+',
         group: 'block list',
         parseDOM: [
@@ -10519,12 +10920,16 @@ const OrderedList = defineNode({
                 tag: 'ol',
                 getAttrs: (node) => ({
                     order: node.hasAttribute('start') ? +node.getAttribute('start') : 1,
+                    layout: parsedLayout(node),
                 }),
             },
         ],
-        toDOM: (node) => node.attrs['order'] === 1
-            ? ['ol', { style: LIST_STYLE }, 0]
-            : ['ol', { start: node.attrs['order'], style: LIST_STYLE }, 0],
+        toDOM: (node) => {
+            const style = listStyle(node.attrs['layout']);
+            return node.attrs['order'] === 1
+                ? ['ol', { style }, 0]
+                : ['ol', { start: node.attrs['order'], style }, 0];
+        },
     },
     commands: ({ schema }) => ({
         toggleOrderedList: () => toggleList(schema.nodes['orderedList'], schema.nodes['listItem']),
@@ -10544,7 +10949,16 @@ const OrderedList = defineNode({
             keywords: ['ol', 'ordered', 'list'],
             icon: 'format_list_numbered',
             command: toggleList(schema.nodes['orderedList'], schema.nodes['listItem']),
-            isActive: (state) => isNodeActive(state, schema.nodes['orderedList']),
+            isActive: (state) => inList(state, schema.nodes['orderedList'], false),
+        },
+        {
+            id: 'numbered-list-layout',
+            section: 'blocks',
+            title: 'Numbered list (layout)',
+            keywords: ['ol', 'ordered', 'list', 'layout', 'flush'],
+            icon: 'format_list_numbered',
+            command: toggleLayoutList(schema.nodes['orderedList'], schema.nodes['listItem']),
+            isActive: (state) => inList(state, schema.nodes['orderedList'], true),
         },
     ],
 });
@@ -11612,50 +12026,101 @@ const HardBreak = defineNode({
     }),
 });
 
-const LEVELS = [1, 2, 3, 4, 5, 6];
+/** The levels the schema knows. No h5 or h6: an imported one is a plain
+    line, and `##### ` stays the text it is. */
+const HEADING_LEVELS = [1, 2, 3, 4];
 /** The ledger's conservative scale: reads at 320px and on a desktop alike. */
-const HEADING_SIZES = { 1: 24, 2: 20, 3: 18, 4: 16, 5: 16, 6: 16 };
-/** A heading's canonical inline style. No margins — lines carry none
-    (principle 3), spacing is an empty line; no `line-height` — Outlook
-    substitutes its own (the client-support module says so) and our output
-    stays lint-clean. Incoming heading styles never survive: the scale is the
-    schema's, not the author's. */
-const headingStyle = (level) => `margin: 0px; font-size: ${HEADING_SIZES[level] ?? 16}px;`;
+const HEADING_SIZES = { 1: 24, 2: 20, 3: 18, 4: 16 };
+/** The space above a heading, by level: its size less {@link HEADING_SPACE_BELOW}. */
+const HEADING_SPACE_ABOVE = { 1: 20, 2: 16, 3: 14, 4: 12 };
+/** The space below every heading. */
+const HEADING_SPACE_BELOW = 4;
+/**
+ * A heading's canonical inline style. A heading sits nearer the words it
+ * opens than the words before it (proximity): a margin above, a small one
+ * below — an exception to principle 3, with a list's (lists.ts). Positive px
+ * margins render in Gmail, Outlook's Word engine and Apple Mail alike
+ * (caniemail, 2026-09). Body lines carry none, so two margins meet only
+ * between headings and lists, where a browser collapses the pair and Word
+ * may add it: the space below is one constant 4px, and the space above is
+ * the size less it, so heading after heading Outlook's worst case lands on
+ * the size itself (24/20/18/16), never more than 4px off. A
+ * **layout** heading — a band's title, a column's — sits flush: `margin: 0`,
+ * spacing left to the layout around it. No `line-height` — Outlook
+ * substitutes its own (the client-support module says so) and our output
+ * stays lint-clean. Incoming heading styles never survive: the scale is the
+ * schema's, not the author's.
+ */
+const headingStyle = (level, layout = false) => {
+    const size = HEADING_SIZES[level] ?? 16;
+    const above = HEADING_SPACE_ABOVE[level] ?? size - HEADING_SPACE_BELOW;
+    const margin = layout ? '0px' : `${above}px 0px ${HEADING_SPACE_BELOW}px`;
+    return `margin: ${margin}; font-size: ${size}px;`;
+};
+/** Makes the line a heading of `level`; a layout heading when `layout`. */
+const toHeading = (type, level, layout = false) => setBlockType(type, { level, layout });
+/** Makes the line a layout heading, at its level when it is a heading
+    already, else at 1. */
+const toLayoutHeading = (type) => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const level = $from.parent.type === type ? $from.parent.attrs['level'] : 1;
+    return toHeading(type, level, true)(state, dispatch, view);
+};
 const Heading = defineNode({
     name: 'heading',
     spec: {
-        attrs: { level: { default: 1 } },
+        attrs: {
+            level: { default: 1 },
+            /** Flush, without the space above — see {@link headingStyle}. */
+            layout: { default: false },
+        },
         content: 'inline*',
         group: 'block',
         defining: true,
-        parseDOM: LEVELS.map((level) => ({ tag: `h${level}`, attrs: { level } })),
+        parseDOM: HEADING_LEVELS.map((level) => ({
+            tag: `h${level}`,
+            // Written flush — the composer's own before headings were spaced, a
+            // builder's reset title — it stays flush.
+            getAttrs: (dom) => ({ level, layout: declaresFlushTop(dom) }),
+        })),
         toDOM: (node) => [
             `h${node.attrs['level']}`,
-            { style: headingStyle(node.attrs['level']) },
+            { style: headingStyle(node.attrs['level'], node.attrs['layout']) },
             0,
         ],
     },
     commands: ({ schema }) => ({
-        setHeading: (level) => setBlockType(schema.nodes['heading'], { level }),
+        setHeading: (level, layout = false) => toHeading(schema.nodes['heading'], level, layout),
+        setLayoutHeading: () => toLayoutHeading(schema.nodes['heading']),
     }),
-    keymap: ({ schema }) => Object.fromEntries(LEVELS.map((level) => [
+    keymap: ({ schema }) => Object.fromEntries(HEADING_LEVELS.map((level) => [
         `Shift-Ctrl-${level}`,
-        setBlockType(schema.nodes['heading'], { level }),
+        toHeading(schema.nodes['heading'], level),
     ])),
     inputRules: ({ schema }) => [
-        // `## ` at the start of a block becomes an h2, etc.
-        textblockTypeInputRule(/^(#{1,6})\s$/, schema.nodes['heading'], (match) => ({
+        // `## ` at the start of a block becomes an h2, up to `#### `.
+        textblockTypeInputRule(/^(#{1,4})\s$/, schema.nodes['heading'], (match) => ({
             level: match[1].length,
         })),
     ],
-    actions: ({ schema }) => [1, 2, 3].map((level) => ({
-        id: `heading-${level}`,
-        section: 'blocks',
-        title: `Heading ${level}`,
-        keywords: [`h${level}`, 'title', 'heading'],
-        icon: `format_h${level}`,
-        command: setBlockType(schema.nodes['heading'], { level }),
-    })),
+    actions: ({ schema }) => [
+        ...[1, 2, 3].map((level) => ({
+            id: `heading-${level}`,
+            section: 'blocks',
+            title: `Heading ${level}`,
+            keywords: [`h${level}`, 'title', 'heading'],
+            icon: `format_h${level}`,
+            command: toHeading(schema.nodes['heading'], level),
+        })),
+        {
+            id: 'heading-layout',
+            section: 'blocks',
+            title: 'Heading (layout)',
+            keywords: ['title', 'heading', 'layout', 'flush', 'banner'],
+            icon: 'title',
+            command: toLayoutHeading(schema.nodes['heading']),
+        },
+    ],
 });
 
 /** The ledger's answer to reply chains whose margins stack until text is one
@@ -12259,7 +12724,7 @@ function pickAndInsertImages(view, schema) {
 }
 /** Floor for a resized image: below this a pad has nothing left to grab. */
 const MIN_IMAGE_WIDTH = 40;
-const clamp$2 = (value, min, max) => Math.min(Math.max(value, min), max);
+const clamp$3 = (value, min, max) => Math.min(Math.max(value, min), max);
 /** Room an image leaves at the end of its line for the caret (decided
     2026-09-24): the widest an image gets in a line is the line less this,
     so the caret can always stand to its right — on a drop, and at the top
@@ -12307,6 +12772,9 @@ function filledPlaceholderAttrs(placeholder, picked) {
         width: placeholder.width ?? picked.width ?? null,
     };
 }
+/** The words a decoration hands the frame — the placeholder's `image`, in
+    the host's language — or the English default. */
+const frameWords = (decorations) => decorations.find((decoration) => typeof decoration.spec['placeholder'] === 'string')?.spec['placeholder'] ?? 'Choose an image';
 /** A frame standing in for the image: the placeholder awaiting its file, or
     a `cid:` whose part the registry does not hold. The app owns the pixels. */
 function imageFrame(className, label) {
@@ -12346,12 +12814,14 @@ function imageFrame(className, label) {
  * pads: size the frame first, then click it to pick the file that fills it
  * ({@link filledPlaceholderAttrs} keeps the frame's width). The slide-deck
  * model — Keynote's media placeholder — and the image counterpart of the
- * merge tag.
+ * merge tag. Its words are the placeholder's `image` (a node decoration
+ * whose spec carries `placeholder`), "Choose an image" without one.
  */
 class ImageView {
     node;
     view;
     getPos;
+    decorations;
     dom;
     img;
     frame;
@@ -12359,10 +12829,11 @@ class ImageView {
         pad released over the wrapper, and that click must not open the
         picker. */
     resized = false;
-    constructor(node, view, getPos) {
+    constructor(node, view, getPos, decorations = []) {
         this.node = node;
         this.view = view;
         this.getPos = getPos;
+        this.decorations = decorations;
         this.dom = document.createElement('span');
         this.dom.className = 'aee-image';
         this.apply(node);
@@ -12382,7 +12853,7 @@ class ImageView {
     render(node) {
         const src = node.attrs['src'];
         if (!src)
-            return imageFrame('aee-image__placeholder', 'Choose an image');
+            return imageFrame('aee-image__placeholder', frameWords(this.decorations));
         const img = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)).dom;
         const cid = /^\s*cid:(.+)$/i.exec(src)?.[1]?.trim();
         if (cid) {
@@ -12393,10 +12864,11 @@ class ImageView {
         }
         return img;
     }
-    update(node) {
+    update(node, decorations) {
         if (node.type !== this.node.type)
             return false;
         this.node = node;
+        this.decorations = decorations;
         const img = this.render(node);
         this.img.replaceWith(img);
         this.img = img;
@@ -12477,7 +12949,7 @@ class ImageView {
         this.resized = true;
         const preview = (ev) => {
             const delta = ev.clientX - startX;
-            width = clamp$2(Math.round(rect.width + (side === 'right' ? delta : -delta)), MIN_IMAGE_WIDTH, max);
+            width = clamp$3(Math.round(rect.width + (side === 'right' ? delta : -delta)), MIN_IMAGE_WIDTH, max);
             this.frame.style.width = `${width}px`;
             this.frame.style.height = `${Math.round(width * ratio)}px`;
         };
@@ -12734,7 +13206,11 @@ const Image = defineNode({
         }),
         new Plugin({
             key: new PluginKey('imageView'),
-            props: { nodeViews: { image: (node, view, getPos) => new ImageView(node, view, getPos) } },
+            props: {
+                nodeViews: {
+                    image: (node, view, getPos, decorations) => new ImageView(node, view, getPos, decorations),
+                },
+            },
         }),
     ],
 });
@@ -12785,6 +13261,350 @@ const Divider = defineNode({
     ],
 });
 
+/** The class every block of a {@link BlockSelection} wears — the wash the
+    app paints over it, since the selection itself draws nothing. */
+const BLOCK_SELECTED_CLASS = 'aee-block--selected';
+/** The class the blocks of a {@link BlockSelection} just let go of wear, for
+    as long as an animation the app gives it runs — the wash fading out
+    instead of vanishing. Gone once the animation ends, at once with none. */
+const BLOCK_RELEASING_CLASS = 'aee-block--releasing';
+/** One node decoration per block of `selection`, wearing `className`. */
+function blockDecorations(doc, selection, className) {
+    return DecorationSet.create(doc, selection.blocks.map(({ node, pos }) => Decoration.node(pos, pos + node.nodeSize, { class: className })));
+}
+/** A selection of `anchor`..`head` when both are seams between top-level
+    blocks and it holds at least one, else the nearest valid selection at
+    `head` — what a mapped or restored block selection falls back to once
+    its blocks are gone. */
+function blocksOr(doc, anchor, head) {
+    const $anchor = doc.resolve(anchor);
+    const $head = doc.resolve(head);
+    if (anchor !== head && $anchor.depth === 0 && $head.depth === 0) {
+        return new BlockSelection($anchor, $head);
+    }
+    return Selection.near($head);
+}
+/** Where top-level block `index` starts. */
+function blockStart(doc, index) {
+    let pos = 0;
+    for (let i = 0; i < index; i++)
+        pos += doc.child(i).nodeSize;
+    return pos;
+}
+class BlockBookmark {
+    anchor;
+    head;
+    constructor(anchor, head) {
+        this.anchor = anchor;
+        this.head = head;
+    }
+    map(mapping) {
+        const forward = this.head > this.anchor;
+        return new BlockBookmark(mapping.map(this.anchor, forward ? 1 : -1), mapping.map(this.head, forward ? -1 : 1));
+    }
+    resolve(doc) {
+        return blocksOr(doc, this.anchor, this.head);
+    }
+}
+/**
+ * Whole top-level blocks selected as blocks — Notion's block selection: the
+ * marquee's ({@link createBlockMarquee}) and the second `Mod-a`'s.
+ *
+ * Its ends are seams between top-level blocks (depth 0), so it always holds
+ * whole blocks, one or more, in a run: an email is one column of them, and
+ * a box dragged down it covers a run. A columns block or a table is one
+ * block — selected whole, never cell by cell (that is `CellSelection`).
+ *
+ * It copies, cuts, deletes and is pasted over as the blocks (ProseMirror's
+ * own handling, through its range), and draws nothing itself: `visible` is
+ * false, so the browser's highlight is hidden, and every block in it wears
+ * {@link BLOCK_SELECTED_CLASS} for the app to paint (see {@link SelectedBlocks}).
+ */
+class BlockSelection extends Selection {
+    /** The blocks from `anchorBlock` to `headBlock`, both the positions where
+        a top-level block starts; the head is the end Shift-arrows move. */
+    static create(doc, anchorBlock, headBlock = anchorBlock) {
+        const $anchor = doc.resolve(anchorBlock);
+        const $head = doc.resolve(headBlock);
+        const anchorNode = $anchor.nodeAfter;
+        const headNode = $head.nodeAfter;
+        if ($anchor.depth !== 0 || $head.depth !== 0 || !anchorNode || !headNode) {
+            throw new RangeError('BlockSelection.create takes the starts of top-level blocks');
+        }
+        return headBlock >= anchorBlock
+            ? new BlockSelection($anchor, doc.resolve(headBlock + headNode.nodeSize))
+            : new BlockSelection(doc.resolve(anchorBlock + anchorNode.nodeSize), $head);
+    }
+    /** Every block of the document. */
+    static all(doc) {
+        return new BlockSelection(doc.resolve(0), doc.resolve(doc.content.size));
+    }
+    constructor($anchor, $head) {
+        super($anchor, $head);
+    }
+    /** The selected blocks, top to bottom. */
+    get blocks() {
+        const blocks = [];
+        this.$from.doc.nodesBetween(this.from, this.to, (node, pos) => {
+            blocks.push({ node, pos });
+            return false;
+        });
+        return blocks;
+    }
+    /** The first block's index and the last's among the document's blocks. */
+    get indices() {
+        return { first: this.$from.index(0), last: this.$to.index(0) - 1 };
+    }
+    /** The block at the head's end: the one Shift-arrows grow or shrink from. */
+    get headIndex() {
+        const { first, last } = this.indices;
+        return this.head > this.anchor ? last : first;
+    }
+    /** The block at the anchor's end, which stays while Shift-arrows move. */
+    get anchorIndex() {
+        const { first, last } = this.indices;
+        return this.head > this.anchor ? first : last;
+    }
+    // Each end keeps to its blocks: a block inserted at a seam of the
+    // selection lands outside it.
+    map(doc, mapping) {
+        return new BlockBookmark(this.anchor, this.head).map(mapping).resolve(doc);
+    }
+    eq(other) {
+        return (other instanceof BlockSelection && other.anchor === this.anchor && other.head === this.head);
+    }
+    toJSON() {
+        return { type: 'aeeBlocks', anchor: this.anchor, head: this.head };
+    }
+    static fromJSON(doc, json) {
+        if (typeof json.anchor !== 'number' || typeof json.head !== 'number') {
+            throw new RangeError('Invalid input for BlockSelection.fromJSON');
+        }
+        const selection = blocksOr(doc, json.anchor, json.head);
+        if (!(selection instanceof BlockSelection)) {
+            throw new RangeError('BlockSelection.fromJSON: not a run of top-level blocks');
+        }
+        return selection;
+    }
+    getBookmark() {
+        return new BlockBookmark(this.anchor, this.head);
+    }
+}
+// Drawn by the app, never by the browser (`ProseMirror-hideselection`).
+BlockSelection.prototype.visible = false;
+Selection.jsonID('aeeBlocks', BlockSelection);
+/** The one block above or below the head (ArrowUp / ArrowDown), as Notion
+    walks a block selection; at the document's edge it stays. */
+const stepBlocks = (dir) => (state, dispatch) => {
+    const { selection, doc } = state;
+    if (!(selection instanceof BlockSelection))
+        return false;
+    const index = Math.min(Math.max(selection.headIndex + dir, 0), doc.childCount - 1);
+    const next = BlockSelection.create(doc, blockStart(doc, index));
+    if (!next.eq(selection))
+        dispatch?.(state.tr.setSelection(next).scrollIntoView());
+    return true;
+};
+/** The head moved by one block, the anchor kept (Shift-ArrowUp / -Down):
+    grows the run, or shrinks it back toward the anchor. */
+const extendBlocks = (dir) => (state, dispatch) => {
+    const { selection, doc } = state;
+    if (!(selection instanceof BlockSelection))
+        return false;
+    const head = Math.min(Math.max(selection.headIndex + dir, 0), doc.childCount - 1);
+    const next = BlockSelection.create(doc, blockStart(doc, selection.anchorIndex), blockStart(doc, head));
+    if (!next.eq(selection))
+        dispatch?.(state.tr.setSelection(next).scrollIntoView());
+    return true;
+};
+/** The caret a block selection leaves to: at the start of the first block
+    (`'start'`), the end of the last (`'end'`), or the head's end of its block
+    (`'head'` — the block you were last on). */
+function caretOf(selection, to) {
+    const doc = selection.$from.doc;
+    const backward = selection.head < selection.anchor;
+    const atStart = to === 'start' || (to === 'head' && backward);
+    return atStart
+        ? Selection.near(doc.resolve(selection.from), 1)
+        : Selection.near(doc.resolve(selection.to), -1);
+}
+/**
+ * Lets a block selection go — the caret at the head's end of its block, as
+ * Escape leaves it, but not scrolled to: the press that let go is elsewhere.
+ * Whether the view holds one or not, nothing else changes; `true` if it did.
+ */
+function releaseBlockSelection(view) {
+    const { selection } = view.state;
+    if (!(selection instanceof BlockSelection))
+        return false;
+    view.dispatch(view.state.tr.setSelection(caretOf(selection, 'head')));
+    return true;
+}
+/** Back to text (ArrowLeft / ArrowRight, Enter and Escape), scrolled to. */
+const leaveBlocks = (to) => (state, dispatch) => {
+    const { selection } = state;
+    if (!(selection instanceof BlockSelection))
+        return false;
+    dispatch?.(state.tr.setSelection(caretOf(selection, to)).scrollIntoView());
+    return true;
+};
+/** The blocks removed — Backspace and Delete alike. */
+const deleteBlocks = (state, dispatch) => {
+    if (!(state.selection instanceof BlockSelection))
+        return false;
+    dispatch?.(state.tr.deleteSelection().scrollIntoView());
+    return true;
+};
+/** `Mod-a` again: the whole document, already selected as text, selected as
+    blocks. The first `Mod-a` stays the text's own select-all. */
+const selectAllBlocks = (state, dispatch) => {
+    if (!(state.selection instanceof AllSelection))
+        return false;
+    dispatch?.(state.tr.setSelection(BlockSelection.all(state.doc)));
+    return true;
+};
+/** Input that would type into a block selection: typing does nothing to
+    selected blocks (Notion's rule) — a paste or a drop replaces them. */
+const TYPING = /^insert(?!FromPaste|FromDrop)/;
+/**
+ * What a {@link BlockSelection} does once there is one: every block in it
+ * lit ({@link BLOCK_SELECTED_CLASS}), and Notion's keys — ArrowUp / ArrowDown
+ * walk to the block above or below, Shift-ArrowUp / -Down grow or shrink the
+ * run, ArrowLeft / ArrowRight leave to the caret at its start or end, Enter
+ * and Escape to the caret in the head's block, Backspace / Delete remove the
+ * blocks; a second `Mod-a` selects every block. Typing does nothing; a
+ * paste replaces the blocks.
+ *
+ * The next press anywhere lets the blocks go, as Notion's do — in the editor
+ * the press is ProseMirror's (or the marquee's) and replaces the selection
+ * itself; outside it, a press that takes focus from the editor (another
+ * field, a title bar, the page) leaves the caret at the head's block
+ * ({@link releaseBlockSelection}). A control that keeps the editor focused —
+ * a formatting toolbar acting on the selection — keeps the blocks. However
+ * they go, the blocks let go wear {@link BLOCK_RELEASING_CLASS} while the
+ * app's fade runs, so the wash eases out rather than vanishing.
+ *
+ * In the kits: the selection is reachable by keyboard alone. The pointer's
+ * way in, the marquee, is the host's to opt into ({@link createBlockMarquee}),
+ * since it needs a surface around the editor to start from.
+ */
+const SelectedBlocks = defineExtension({
+    name: 'selectedBlocks',
+    keymap: () => ({
+        ArrowUp: stepBlocks(-1),
+        ArrowDown: stepBlocks(1),
+        'Shift-ArrowUp': extendBlocks(-1),
+        'Shift-ArrowDown': extendBlocks(1),
+        ArrowLeft: leaveBlocks('start'),
+        ArrowRight: leaveBlocks('end'),
+        Enter: leaveBlocks('head'),
+        Escape: leaveBlocks('head'),
+        Backspace: deleteBlocks,
+        Delete: deleteBlocks,
+        'Mod-a': selectAllBlocks,
+    }),
+    plugins: () => {
+        const key = new PluginKey('selectedBlocks');
+        let released = 0;
+        return [
+            new Plugin({
+                key,
+                // The blocks just let go, while their wash fades: the selection that
+                // held them is gone, so they are kept here — mapped through every
+                // change, dropped with any block deleted — until the fade is over.
+                state: {
+                    init: () => null,
+                    apply(tr, releasing, before, after) {
+                        const done = tr.getMeta(key);
+                        if (after.selection instanceof BlockSelection)
+                            return null;
+                        if (before.selection instanceof BlockSelection) {
+                            const set = blockDecorations(before.doc, before.selection, BLOCK_RELEASING_CLASS);
+                            return { id: ++released, set: set.map(tr.mapping, tr.doc) };
+                        }
+                        if (!releasing || done === releasing.id)
+                            return null;
+                        return { id: releasing.id, set: releasing.set.map(tr.mapping, tr.doc) };
+                    },
+                },
+                view: (view) => {
+                    const doc = view.dom.ownerDocument;
+                    // A press outside the editor, while blocks are selected: once it
+                    // has done what it does (moved focus, or kept it), the blocks go
+                    // unless the editor still has focus.
+                    const press = (event) => {
+                        if (!(view.state.selection instanceof BlockSelection))
+                            return;
+                        if (view.dom.contains(event.target))
+                            return;
+                        setTimeout(() => {
+                            if (!view.isDestroyed && !view.hasFocus())
+                                releaseBlockSelection(view);
+                        });
+                    };
+                    doc.addEventListener('mousedown', press, true);
+                    // A release begins: the releasing class goes as soon as the
+                    // animations the host's stylesheet gave it end — at once, with
+                    // none (no fade, reduced motion, a browser without the API).
+                    let watched = 0;
+                    const fadeOut = (id) => {
+                        const animations = (doc.getAnimations?.() ?? []).filter((animation) => {
+                            const target = animation.effect?.target;
+                            return !!target && view.dom.contains(target) && target.classList.contains(BLOCK_RELEASING_CLASS);
+                        });
+                        void Promise.all(animations.map((animation) => animation.finished.catch(() => { }))).then(() => {
+                            if (!view.isDestroyed && key.getState(view.state)?.id === id) {
+                                view.dispatch(view.state.tr.setMeta(key, id).setMeta('addToHistory', false));
+                            }
+                        });
+                    };
+                    return {
+                        update: () => {
+                            const releasing = key.getState(view.state);
+                            if (!releasing || releasing.id === watched)
+                                return;
+                            watched = releasing.id;
+                            fadeOut(releasing.id);
+                        },
+                        destroy: () => doc.removeEventListener('mousedown', press, true),
+                    };
+                },
+                props: {
+                    decorations(state) {
+                        const { selection } = state;
+                        if (selection instanceof BlockSelection) {
+                            return blockDecorations(state.doc, selection, BLOCK_SELECTED_CLASS);
+                        }
+                        return key.getState(state)?.set ?? null;
+                    },
+                    handleTextInput: (view) => view.state.selection instanceof BlockSelection,
+                    handleDOMEvents: {
+                        beforeinput(view, event) {
+                            if (!(view.state.selection instanceof BlockSelection))
+                                return false;
+                            if (!TYPING.test(event.inputType))
+                                return false;
+                            event.preventDefault();
+                            return true;
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});
+
+/**
+ * Presses a gesture has taken for itself — the block marquee's — so the
+ * editor's other press listeners (the inline atoms' drag) leave them alone.
+ * Internal: not part of the library's API.
+ */
+const claimed = new WeakSet();
+const claimPress = (event) => {
+    claimed.add(event);
+};
+const isClaimedPress = (event) => claimed.has(event);
+
 /** The class a text range puts on every inline atom it covers — an image,
     a button: the highlight the app draws, since the browser draws none. */
 const IN_SELECTION_CLASS = 'aee-atom--in-selection';
@@ -12976,6 +13796,9 @@ const InlineAtomSelection = defineExtension({
                     const down = (event) => {
                         if (!view.editable || event.button !== 0 || event.shiftKey || event.detail > 1)
                             return;
+                        // The block marquee's press: a box, not a range.
+                        if (isClaimedPress(event))
+                            return;
                         const atom = atomAt(view, event.target);
                         const { selection } = view.state;
                         // The selected atom's press is ProseMirror's: its drag moves it.
@@ -13064,8 +13887,12 @@ const InlineAtomSelection = defineExtension({
                     },
                     decorations(state) {
                         const { selection } = state;
-                        if (selection.empty || selection instanceof NodeSelection)
+                        // Selected blocks are lit whole (`SelectedBlocks`), atoms and all.
+                        if (selection.empty ||
+                            selection instanceof NodeSelection ||
+                            selection instanceof BlockSelection) {
                             return null;
+                        }
                         const decorations = [];
                         state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
                             if (isInlineAtom(node)) {
@@ -13526,7 +14353,7 @@ const ColumnResize = defineExtension({
         }),
     ],
 });
-const clamp$1 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+const clamp$2 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 const round1 = (n) => Math.round(n * 10) / 10;
 /** The declared width of each grid column (`null` = unspecified, shares the
     leftover) — read from the first cell in the column that declares one. */
@@ -13587,7 +14414,7 @@ function setColumnBoundary(tablePos, boundary, leftPct) {
         const pair = effective[boundary] + effective[boundary + 1];
         if (pair < MIN_COLUMN_PCT * 2)
             return false;
-        const left = round1(clamp$1(leftPct, MIN_COLUMN_PCT, pair - MIN_COLUMN_PCT));
+        const left = round1(clamp$2(leftPct, MIN_COLUMN_PCT, pair - MIN_COLUMN_PCT));
         const right = round1(pair - left);
         if (dispatch) {
             const tr = state.tr;
@@ -13640,15 +14467,15 @@ function setTableBox(tablePos, offsetPct, widthPct, absorb) {
             return false;
         const map = TableMap.get(table);
         const oldWidth = table.attrs['width'];
-        const offset = round1(clamp$1(offsetPct, 0, 100 - MIN_TABLE_PCT));
-        let width = round1(clamp$1(widthPct, MIN_TABLE_PCT, 100 - offset));
+        const offset = round1(clamp$2(offsetPct, 0, 100 - MIN_TABLE_PCT));
+        let width = round1(clamp$2(widthPct, MIN_TABLE_PCT, 100 - offset));
         if (dispatch) {
             const tr = state.tr;
             if (absorb && map.width > 1) {
                 const effective = effectiveWidths(table);
                 const absorbIndex = absorb === 'first' ? 0 : map.width - 1;
                 const others = 100 - effective[absorbIndex];
-                width = round1(clamp$1(width, minTableWidth(oldWidth, others), 100 - offset));
+                width = round1(clamp$2(width, minTableWidth(oldWidth, others), 100 - offset));
                 const factor = oldWidth / width;
                 const pcts = effective.map((pct, index) => index === absorbIndex ? 0 : round1(pct * factor));
                 pcts[absorbIndex] = round1(100 - pcts.reduce((sum, pct) => sum + pct, 0));
@@ -14023,7 +14850,7 @@ class TableView {
             return;
         const startX = event.clientX;
         const startLeft = effective.slice(0, boundary + 1).reduce((sum, width) => sum + width, 0);
-        const leftAt = (ev) => clamp$1(effective[boundary] + ((ev.clientX - startX) / tableWidth) * 100, MIN_COLUMN_PCT, pair - MIN_COLUMN_PCT);
+        const leftAt = (ev) => clamp$2(effective[boundary] + ((ev.clientX - startX) / tableWidth) * 100, MIN_COLUMN_PCT, pair - MIN_COLUMN_PCT);
         // Deferred commit: mid-drag ONLY the guide line moves, at full float
         // precision. The table itself must not reflow per pointermove — its text
         // rewrapping every frame reads as the grid flying apart (tried, reverted).
@@ -14079,8 +14906,8 @@ class TableView {
         const minWidth = minTableWidth(oldWidth, others);
         const pctAt = (ev) => ((ev.clientX - wrapperLeft) / wrapperWidth) * 100;
         const edgeAt = (ev) => side === 'left'
-            ? clamp$1(pctAt(ev), 0, right - minWidth)
-            : clamp$1(pctAt(ev), offset + minWidth, 100);
+            ? clamp$2(pctAt(ev), 0, right - minWidth)
+            : clamp$2(pctAt(ev), offset + minWidth, 100);
         const preview = (ev) => {
             const edge = edgeAt(ev);
             handle.style.left = `${edge}%`;
@@ -14230,7 +15057,7 @@ const ColumnsResize = defineExtension({
         }),
     ],
 });
-const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+const clamp$1 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 /**
  * `div.aee-columns-wrap (editorial gutter) > div.aee-columns-box (the email's
  * container style) > div.aee-columns (contentDOM) + div.aee-col-lines`.
@@ -14353,7 +15180,7 @@ class ColumnsView {
         const startX = event.clientX;
         const startLeft = caps.slice(0, boundary + 1).reduce((sum, cap) => sum + cap, 0);
         // px in the editor are px in the email: the box is the 600px container.
-        const leftAt = (ev) => clamp(caps[boundary] + (ev.clientX - startX), MIN_COLUMN_CAP, pair - MIN_COLUMN_CAP);
+        const leftAt = (ev) => clamp$1(caps[boundary] + (ev.clientX - startX), MIN_COLUMN_CAP, pair - MIN_COLUMN_CAP);
         const preview = (ev) => {
             line.style.left = `${startLeft - caps[boundary] + leftAt(ev)}px`;
         };
@@ -15082,6 +15909,10 @@ const withParagraph = (paragraph) => [
     Button,
     // Images and buttons selected like characters: a drag covers them.
     InlineAtomSelection,
+    // Whole blocks selected as blocks (Notion's): lit, and walked by its
+    // keys. Before the tables and gap-cursor, whose arrows it outranks while
+    // there is one.
+    SelectedBlocks,
     Table,
     TableRow,
     TableCell,
@@ -15138,6 +15969,29 @@ const emailExtensions = [
     // language swaps it for its own `createQuotedHistory({ labels })`.
     QuotedHistory,
 ];
+/**
+ * Plain text — a mail client's plain-text mode: the message as lines and
+ * nothing else. No marks, no blocks, no images, no tokens in the schema, so
+ * neither a shortcut (Mod-B has nothing to toggle) nor a paste (HTML is
+ * read down to its text) can bring formatting in. Lines are the email
+ * kit's `<div>` lines, Shift-Enter a `<br>` inside one, so what the editor
+ * publishes is still email HTML — `emailPlainText` reads it back as exactly
+ * the text written, the `text/plain` a plain-text message sends. The
+ * quoted history is kept beside it, as in the email kit.
+ *
+ * A host switches a message between the two by mounting a new editor on
+ * the other kit (a schema is fixed for an editor's life) with the content
+ * carried over: `plainTextHTML(emailPlainText(html))` on the way in.
+ */
+const plainTextExtensions = [
+    Document$1,
+    EmailParagraph,
+    Text,
+    HardBreak,
+    History,
+    QuotedHistory,
+    BaseKeymap,
+];
 /**
  * The parallel source-editor kit: the document is HTML source text, one
  * `codeLine` per line, with highlighting, linting and formatting instead of
@@ -15736,6 +16590,372 @@ function createAutocompletePlugin(options) {
     });
 }
 
+/** The class of the box a drag draws — the host paints it, in the same wash
+    as the blocks it lights ({@link BLOCK_SELECTED_CLASS}). */
+const BLOCK_MARQUEE_CLASS = 'aee-marquee';
+/** What a press on the surface may not start: its own controls. */
+const INTERACTIVE = 'button, a[href], input, textarea, select, label, summary, [role="button"], [contenteditable]';
+/** How close to the scroller's edge, in px, a held drag scrolls it — and
+    the fastest it goes, in px per frame, at (or past) the edge. */
+const EDGE = 40;
+const MAX_SPEED = 20;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/** The client box of what an element shows of its content: inside its
+    borders, without its scrollbars. */
+function viewport(element) {
+    const rect = element.getBoundingClientRect();
+    const left = rect.left + element.clientLeft;
+    const top = rect.top + element.clientTop;
+    return { left, top, right: left + element.clientWidth, bottom: top + element.clientHeight };
+}
+/** Whether a press landed on the element's scrollbar (outside its client
+    box but inside its border box). */
+function onScrollbar(element, event) {
+    const inner = viewport(element);
+    return event.clientX >= inner.right || event.clientY >= inner.bottom;
+}
+/** The nearest ancestor (or the element) that scrolls vertically. */
+function scrollerOf(element) {
+    for (let node = element; node; node = node.parentElement) {
+        const { overflowY } = getComputedStyle(node);
+        if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+            return node;
+        }
+    }
+    return null;
+}
+/** How far `scroller` (or, with none, the window) has scrolled. */
+function scrollOf(scroller) {
+    return scroller
+        ? { x: scroller.scrollLeft, y: scroller.scrollTop }
+        : { x: window.scrollX, y: window.scrollY };
+}
+/** Each marquee editor's start, for {@link beginBlockMarquee}. */
+const starts = new WeakMap();
+/**
+ * Notion's marquee: a drag from the empty room around the text draws a box,
+ * and every top-level block it touches is selected — a {@link BlockSelection},
+ * lit block by block in the box's own wash. Opt-in, with
+ * {@link SelectedBlocks} in the kit (which this needs for the keys and the
+ * lit blocks).
+ *
+ * **Where it starts.** A press on the surface outside the editor (its
+ * margin), or on the editor's own box between and below its blocks — never
+ * on a block: a press on text is the text's, and a drag across lines stays a
+ * text selection, as email users expect. Nor on a control of the surface's,
+ * a scrollbar, or with a modifier held. The press is kept from the browser
+ * and ProseMirror alike (no caret jump, no native selection), so a press
+ * released in place is placed here: the caret at the nearest spot in the
+ * text, as a click in the margin of a page puts it in Google Docs.
+ *
+ * **While it drags.** The box is a `div` ({@link BLOCK_MARQUEE_CLASS}) in the
+ * canvas — the surface, unless the host gives a larger one — against the
+ * pointer, clipped to the canvas's viewport, so it may reach over whatever
+ * frames the editor; held near the scroller's edge (or past it) it scrolls,
+ * and the box keeps its origin in the content. Each move hit-tests the
+ * top-level blocks' boxes (the one measured thing — a box drawn by a pointer
+ * has no other geometry) against what the box covers of the surface, and
+ * selects the run it touches; touching none, the selection the press found
+ * comes back. Only blocks are ever selected, wherever the box reaches.
+ * Escape cancels the drag.
+ */
+const createBlockMarquee = (options = {}) => {
+    const threshold = options.threshold ?? 4;
+    return defineExtension({
+        name: 'blockMarquee',
+        plugins: () => {
+            // The press handler of this editor's view (one per `plugins` call).
+            let begin = null;
+            return [
+                new Plugin({
+                    key: new PluginKey('blockMarquee'),
+                    view: (view) => {
+                        const surface = options.surface?.(view) ?? view.dom.parentElement ?? view.dom;
+                        const canvas = options.canvas?.(view) ?? surface;
+                        let gesture = null;
+                        /** The containing block the box is positioned against, and how
+                            its frame (the content's, scrolled) maps from the client. */
+                        const frame = (box) => {
+                            const host = box.offsetParent;
+                            if (!host || host === document.body || host === document.documentElement) {
+                                return { x: window.scrollX, y: window.scrollY };
+                            }
+                            const rect = host.getBoundingClientRect();
+                            return {
+                                x: host.scrollLeft - rect.left - host.clientLeft,
+                                y: host.scrollTop - rect.top - host.clientTop,
+                            };
+                        };
+                        const update = (current) => {
+                            const box = current.box;
+                            if (!box || view.isDestroyed)
+                                return;
+                            // The press, where the content has carried it since.
+                            const scroll = scrollOf(current.scroller);
+                            const origin = {
+                                x: current.pressed.x - (scroll.x - current.scrolledFrom.x),
+                                y: current.pressed.y - (scroll.y - current.scrolledFrom.y),
+                            };
+                            /** The box from the press to the pointer, clipped to `clip`. */
+                            const span = (clip) => {
+                                const pointer = {
+                                    x: clamp(current.pointer.x, clip.left, clip.right),
+                                    y: clamp(current.pointer.y, clip.top, clip.bottom),
+                                };
+                                return {
+                                    pointer,
+                                    left: Math.min(origin.x, pointer.x),
+                                    top: Math.min(origin.y, pointer.y),
+                                    right: Math.max(origin.x, pointer.x),
+                                    bottom: Math.max(origin.y, pointer.y),
+                                };
+                            };
+                            // Drawn on the canvas, as far as the pointer goes on it…
+                            const drawn = span(viewport(canvas));
+                            const offset = frame(box);
+                            box.style.left = `${drawn.left + offset.x}px`;
+                            box.style.top = `${drawn.top + offset.y}px`;
+                            box.style.width = `${drawn.right - drawn.left}px`;
+                            box.style.height = `${drawn.bottom - drawn.top}px`;
+                            // …but it selects what it covers of the surface: the blocks
+                            // the editor shows. Past the surface's edge, the scroll brings
+                            // the rest in (`autoScroll`).
+                            const area = span(viewport(surface));
+                            const { pointer } = area;
+                            const { doc } = view.state;
+                            const hits = [];
+                            doc.forEach((_node, pos) => {
+                                const dom = view.nodeDOM(pos);
+                                if (!(dom instanceof Element))
+                                    return;
+                                const rect = dom.getBoundingClientRect();
+                                if (rect.bottom > area.top &&
+                                    rect.top < area.bottom &&
+                                    rect.right > area.left &&
+                                    rect.left < area.right) {
+                                    hits.push(pos);
+                                }
+                            });
+                            let next = current.before;
+                            if (hits.length) {
+                                // Dragged upward, the head is the top block: Shift-arrows
+                                // then move the end the pointer was at.
+                                const upward = pointer.y < origin.y;
+                                const first = hits[0];
+                                const last = hits[hits.length - 1];
+                                next = upward
+                                    ? BlockSelection.create(doc, last, first)
+                                    : BlockSelection.create(doc, first, last);
+                            }
+                            else if (current.before.$anchor.doc !== doc) {
+                                return;
+                            }
+                            if (!next.eq(view.state.selection))
+                                view.dispatch(view.state.tr.setSelection(next));
+                        };
+                        /** Scrolls the scroller while the pointer is held at its edge,
+                            one step a frame, then hit-tests again. */
+                        const autoScroll = (current) => {
+                            current.frameRequest = null;
+                            const scroller = current.scroller;
+                            if (!scroller || gesture !== current || !current.moved)
+                                return;
+                            const edges = viewport(scroller);
+                            const y = current.pointer.y;
+                            let step = 0;
+                            if (y < edges.top + EDGE)
+                                step = -Math.min(MAX_SPEED, (edges.top + EDGE - y) / 2);
+                            else if (y > edges.bottom - EDGE) {
+                                step = Math.min(MAX_SPEED, (y - (edges.bottom - EDGE)) / 2);
+                            }
+                            if (!step)
+                                return;
+                            const before = scroller.scrollTop;
+                            scroller.scrollTop += step;
+                            if (scroller.scrollTop === before)
+                                return;
+                            update(current);
+                            current.frameRequest = requestAnimationFrame(() => autoScroll(current));
+                        };
+                        const start = (event, elsewhere) => {
+                            if (gesture || !view.editable)
+                                return false;
+                            if (event.button !== 0 || event.detail > 1)
+                                return false;
+                            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)
+                                return false;
+                            // The surface's scrollbar is the scroller's; a start point
+                            // elsewhere is the host's to judge.
+                            if (!elsewhere && onScrollbar(surface, event))
+                                return false;
+                            // No caret jump, no native selection, no focus leaving: the
+                            // press is the box's (or, released in place, placed below).
+                            event.preventDefault();
+                            claimPress(event);
+                            const pressed = { x: event.clientX, y: event.clientY };
+                            const scroller = scrollerOf(surface);
+                            const current = {
+                                pressed,
+                                scrolledFrom: scrollOf(scroller),
+                                pointer: pressed,
+                                moved: false,
+                                box: null,
+                                before: view.state.selection,
+                                scroller,
+                                frameRequest: null,
+                                stop: () => { },
+                            };
+                            const move = (moved) => {
+                                if (view.isDestroyed)
+                                    return finish();
+                                current.pointer = { x: moved.clientX, y: moved.clientY };
+                                if (!current.moved) {
+                                    if (Math.abs(current.pointer.x - pressed.x) < threshold &&
+                                        Math.abs(current.pointer.y - pressed.y) < threshold) {
+                                        return;
+                                    }
+                                    current.moved = true;
+                                    const box = document.createElement('div');
+                                    box.className = BLOCK_MARQUEE_CLASS;
+                                    box.setAttribute('aria-hidden', 'true');
+                                    box.style.position = 'absolute';
+                                    box.style.pointerEvents = 'none';
+                                    // The editor's scheme, wherever the box is drawn: the
+                                    // canvas may wear another (an app theme round a light
+                                    // paper), and the wash is a light-dark() pair.
+                                    box.style.colorScheme = getComputedStyle(view.dom).colorScheme;
+                                    canvas.appendChild(box);
+                                    current.box = box;
+                                    // The keys (Delete, Shift-arrows) go to the selection.
+                                    view.focus();
+                                }
+                                update(current);
+                                if (current.frameRequest === null) {
+                                    current.frameRequest = requestAnimationFrame(() => autoScroll(current));
+                                }
+                            };
+                            const scrolled = () => update(current);
+                            const up = () => {
+                                finish();
+                                // A click: the caret at the nearest spot in the text — the
+                                // point brought onto the editor's box when it fell outside.
+                                // Not from a start point elsewhere: a click beside a form is
+                                // no click in the text — it only lets selected blocks go,
+                                // as a press anywhere does (`SelectedBlocks`; this one kept
+                                // the editor's focus, so it is let go here).
+                                if (view.isDestroyed || current.moved)
+                                    return;
+                                if (elsewhere) {
+                                    releaseBlockSelection(view);
+                                    return;
+                                }
+                                const rect = view.dom.getBoundingClientRect();
+                                const found = view.posAtCoords({
+                                    left: clamp(pressed.x, rect.left + 1, rect.right - 1),
+                                    top: clamp(pressed.y, rect.top + 1, rect.bottom - 1),
+                                });
+                                const { doc } = view.state;
+                                const caret = found
+                                    ? Selection.near(doc.resolve(found.pos))
+                                    : pressed.y < rect.top
+                                        ? Selection.atStart(doc)
+                                        : Selection.atEnd(doc);
+                                view.focus();
+                                if (!caret.eq(view.state.selection)) {
+                                    view.dispatch(view.state.tr.setSelection(caret));
+                                }
+                            };
+                            const key = (pressedKey) => {
+                                if (pressedKey.key !== 'Escape')
+                                    return;
+                                pressedKey.preventDefault();
+                                pressedKey.stopPropagation();
+                                finish();
+                                if (!view.isDestroyed && !current.before.eq(view.state.selection)) {
+                                    if (current.before.$anchor.doc === view.state.doc) {
+                                        view.dispatch(view.state.tr.setSelection(current.before));
+                                    }
+                                }
+                            };
+                            const finish = () => {
+                                window.removeEventListener('mousemove', move);
+                                window.removeEventListener('mouseup', up);
+                                window.removeEventListener('keydown', key, true);
+                                window.removeEventListener('scroll', scrolled, true);
+                                if (current.frameRequest !== null)
+                                    cancelAnimationFrame(current.frameRequest);
+                                current.frameRequest = null;
+                                current.box?.remove();
+                                current.box = null;
+                                if (gesture === current)
+                                    gesture = null;
+                            };
+                            current.stop = finish;
+                            window.addEventListener('mousemove', move);
+                            window.addEventListener('mouseup', up);
+                            window.addEventListener('keydown', key, true);
+                            // Any scroll under the drag (the wheel, the autoscroll) moves
+                            // the content under a still pointer: the box follows.
+                            window.addEventListener('scroll', scrolled, true);
+                            gesture = current;
+                            return true;
+                        };
+                        // A press outside the editor: the surface's. The editor's own
+                        // presses come through `handleDOMEvents`, ahead of ProseMirror's.
+                        const outside = (event) => {
+                            const target = event.target;
+                            if (!target || view.dom.contains(target))
+                                return;
+                            const control = target.closest(INTERACTIVE);
+                            if (control && surface.contains(control))
+                                return;
+                            start(event, false);
+                        };
+                        begin = start;
+                        starts.set(view, start);
+                        surface.addEventListener('mousedown', outside);
+                        return {
+                            destroy() {
+                                surface.removeEventListener('mousedown', outside);
+                                gesture?.stop();
+                                starts.delete(view);
+                                begin = null;
+                            },
+                        };
+                    },
+                    props: {
+                        handleDOMEvents: {
+                            // The editor's own box — the room between and below its
+                            // blocks, never a block — starts the box. Returning true keeps
+                            // ProseMirror's own press handling (the caret) out of it.
+                            mousedown: (view, event) => event.target === view.dom && !!begin?.(event, false),
+                        },
+                    },
+                }),
+            ];
+        },
+    });
+};
+/**
+ * Starts the editor's marquee from a press anywhere else — a start point of
+ * the host's own: the room beside a page's text column, the empty room round
+ * a form — as Notion lets a drag start in a page's margins. The host decides
+ * the press is one (its own empty room, not a control); from there it is the
+ * surface's gesture in every way: the box on the canvas, the blocks it
+ * covers of the surface, the scroll, Escape. Released in place it puts no
+ * caret on a line (only the editor's own room does) — it only lets selected
+ * blocks go, as any press outside the editor does.
+ *
+ * Call it from the start point's `mousedown`. It returns whether the box
+ * started (and then took the press: `preventDefault`); `false` without
+ * {@link createBlockMarquee} in the editor, while one is already drawn, in a
+ * read-only editor, and for a press that is not a plain primary one (another
+ * button, a double click, a modifier held).
+ */
+function beginBlockMarquee(view, event) {
+    return starts.get(view)?.(event, true) ?? false;
+}
+
 /** Starts watching for {@link MenuScroll}; returns what stops it. */
 function watchMenuScroll(view, scroll, menu) {
     const mode = scroll ?? 'close';
@@ -18793,6 +20013,267 @@ const createSendIntent = (options) => {
     });
 };
 
+const placeholderKey = new PluginKey('placeholder');
+/** Replaces the placeholder's words — every empty line redraws at once.
+    Nothing enters the undo history. */
+const setPlaceholder = (text) => (state, dispatch) => {
+    if (!placeholderKey.get(state))
+        return false;
+    dispatch?.(state.tr.setMeta(placeholderKey, { text }).setMeta('addToHistory', false));
+    return true;
+};
+const isBare = (node) => !!node && node.isTextblock && !node.type.spec.code && node.content.size === 0;
+/** Whether the document is a single empty line. */
+const isDocEmpty = (doc) => doc.childCount === 1 && isBare(doc.firstChild);
+/** An image waiting for its file. */
+const isEmptyImage = (node) => node.type.name === 'image' && !node.attrs['src'];
+/** Containers that give the lines in them a kind: a change inside one may
+    re-kind a line it never touched (a line pushed off a list item's head). */
+const KIND_CONTAINERS = new Set(['blockquote', 'listItem', 'bulletList', 'orderedList']);
+/** What the line at `$pos` (resolved just before it) is. */
+const kindAt = (node, $pos) => {
+    const name = node.type.name;
+    if (name === 'heading' || name === 'tableCell')
+        return name;
+    const parent = $pos.parent.type.name;
+    if (parent === 'blockquote')
+        return 'quote';
+    if (parent === 'listItem' && $pos.index() === 0 && $pos.depth > 0) {
+        const list = $pos.node($pos.depth - 1).type.name;
+        if (list === 'bulletList' || list === 'orderedList')
+            return list;
+    }
+    return 'line';
+};
+const kindWords = (words, line) => {
+    if (line.kind === 'line')
+        return undefined;
+    if (line.kind !== 'heading')
+        return words[line.kind];
+    const heading = words.heading;
+    if (typeof heading === 'string' || heading === undefined)
+        return heading;
+    const level = line.node.attrs['level'] ?? 1;
+    return heading[Math.min(level, heading.length) - 1];
+};
+const lineWords = (text, line, show) => {
+    let always = '';
+    let caret = '';
+    if (typeof text === 'string') {
+        caret = text;
+    }
+    else if (typeof text === 'function') {
+        const words = text(line) ?? '';
+        if (line.kind === 'line')
+            caret = words;
+        else
+            always = words;
+    }
+    else if (text) {
+        const own = kindWords(text, line);
+        if (own !== undefined)
+            always = own;
+        else
+            caret = (line.docEmpty ? text.empty : undefined) ?? text.line ?? '';
+    }
+    if (!always && (show === 'all' || line.docEmpty))
+        [always, caret] = [caret, ''];
+    return { always, caret };
+};
+const lineDecoration = (node, pos, words, docEmpty) => Decoration.node(pos, pos + node.nodeSize, {
+    class: docEmpty ? 'aee-placeholder aee-placeholder-doc' : 'aee-placeholder',
+    'data-placeholder': words,
+}, 
+// The words again, for `aria-placeholder`; marks it a line's.
+{ line: words });
+/** The decorations that show without the caret, for the nodes overlapping
+    `from`–`to` (the whole document without them). */
+const scan = (state, text, show, from = 0, to = state.doc.content.size) => {
+    const { doc } = state;
+    const decorations = [];
+    const docEmpty = isDocEmpty(doc);
+    const image = text && typeof text === 'object' ? text.image : undefined;
+    doc.nodesBetween(from, to, (node, pos) => {
+        if (image && isEmptyImage(node)) {
+            // The frame's words, for its node view to read off the decoration.
+            decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, { placeholder: image }));
+            return false;
+        }
+        if (!node.isTextblock)
+            return true;
+        if (!isBare(node))
+            return !!image;
+        const kind = kindAt(node, doc.resolve(pos));
+        const { always } = lineWords(text, { node, pos, kind, docEmpty, state }, show);
+        if (always)
+            decorations.push(lineDecoration(node, pos, always, docEmpty));
+        return false;
+    });
+    return decorations;
+};
+/** Where `tr` changed its document, in the new document's positions. */
+const changedRanges = (tr) => {
+    let ranges = [];
+    for (const map of tr.mapping.maps) {
+        ranges = ranges.map(([from, to]) => [map.map(from, -1), map.map(to, 1)]);
+        map.forEach((_oldStart, _oldEnd, newStart, newEnd) => ranges.push([newStart, newEnd]));
+    }
+    return ranges;
+};
+/** A changed range grown to every line whose kind it may have changed: the
+    nodes it opens or closes (a list turned numbered changes only its
+    boundaries), and the innermost kind-giving container around it. */
+const widen = (doc, from, to) => {
+    const after = doc.nodeAt(from);
+    if (after && !after.isText)
+        to = Math.max(to, from + after.nodeSize);
+    const before = doc.resolve(to).nodeBefore;
+    if (before && !before.isText)
+        from = Math.min(from, to - before.nodeSize);
+    const $from = doc.resolve(from);
+    for (let depth = $from.sharedDepth(to); depth > 0; depth--) {
+        if (KIND_CONTAINERS.has($from.node(depth).type.name)) {
+            return [Math.min(from, $from.before(depth)), Math.max(to, $from.after(depth))];
+        }
+    }
+    return [from, to];
+};
+/**
+ * A placeholder on empty lines, Notion's way: the line the caret is on says
+ * what can be done there ("Type / for commands") and the hint goes as soon as
+ * a character is typed or the caret moves on, while an empty block of a kind
+ * says what it is ("Heading 1", "List", "Empty quote") wherever the caret is.
+ * Nothing of it is in the document — a node decoration puts a class and the
+ * words on the line:
+ *
+ *     <div class="aee-placeholder" data-placeholder="Type / for commands">
+ *
+ * and the host's stylesheet paints them (`content: attr(data-placeholder)`),
+ * so the look stays the host's. An empty body is also marked with
+ * `aee-placeholder-doc`, and the editable element carries the words as
+ * `aria-placeholder`, so a screen reader hears what the field is for. An
+ * image waiting for its file gets its words through a node decoration whose
+ * spec carries `placeholder`, which the image's node view puts in its frame.
+ *
+ * The words are the host's, in its language — the library words nothing.
+ * Hand them in as {@link PlaceholderOptions.text} and replace them with the
+ * `setPlaceholder` command whenever they change:
+ *
+ *     effect(() => editor.commands.setPlaceholder(this.placeholders()));
+ *
+ * Typing costs only the lines it touched: the decorations live in the
+ * plugin's state, mapped through each change and redone where it landed;
+ * new words redo them once.
+ *
+ * Code lines never show it: an empty line of source is just that. Neither
+ * does a read-only editor (an image frame keeps its words), nor the line
+ * mid-composition (an IME's text is not in the document yet).
+ */
+const createPlaceholder = (options = {}) => {
+    const show = options.show ?? 'caret';
+    return defineExtension({
+        name: 'placeholder',
+        commands: () => ({ setPlaceholder }),
+        plugins: () => {
+            let view;
+            /** A redraw: focus is not in the state, so its change is no transaction. */
+            const redraw = () => {
+                if (view)
+                    view.dispatch(view.state.tr.setMeta('addToHistory', false));
+                return false;
+            };
+            return [
+                new Plugin({
+                    key: placeholderKey,
+                    state: {
+                        init: (_config, state) => ({
+                            text: options.text,
+                            set: DecorationSet.create(state.doc, scan(state, options.text, show)),
+                        }),
+                        apply: (tr, value, oldState, state) => {
+                            const meta = tr.getMeta(placeholderKey);
+                            if (meta) {
+                                return {
+                                    text: meta.text,
+                                    set: DecorationSet.create(tr.doc, scan(state, meta.text, show)),
+                                };
+                            }
+                            if (!tr.docChanged)
+                                return value;
+                            // Into or out of an empty body every line's class changes: redo all.
+                            if (isDocEmpty(tr.doc) || isDocEmpty(oldState.doc)) {
+                                return {
+                                    ...value,
+                                    set: DecorationSet.create(tr.doc, scan(state, value.text, show)),
+                                };
+                            }
+                            let set = value.set.map(tr.mapping, tr.doc);
+                            for (const range of changedRanges(tr)) {
+                                const [from, to] = widen(tr.doc, ...range);
+                                const stale = set.find(from, to).filter((d) => d.from < to && d.to > from);
+                                set = set.remove(stale).add(tr.doc, scan(state, value.text, show, from, to));
+                            }
+                            return { ...value, set };
+                        },
+                    },
+                    props: {
+                        decorations(state) {
+                            const plugin = placeholderKey.getState(state);
+                            if (!plugin)
+                                return null;
+                            const { doc, selection } = state;
+                            if (view && !view.editable) {
+                                const frames = plugin.set.find(undefined, undefined, (spec) => !spec['line']);
+                                return frames.length ? DecorationSet.create(doc, frames) : null;
+                            }
+                            const { $from } = selection;
+                            const line = $from.parent;
+                            if (!isBare(line))
+                                return plugin.set;
+                            const pos = $from.before();
+                            // `find` also hands back the line before, which ends where this starts.
+                            const own = plugin.set
+                                .find(pos, pos + line.nodeSize, (spec) => !!spec['line'])
+                                .filter((decoration) => decoration.from === pos);
+                            // Mid-composition the caret's line is not empty, only not yet
+                            // in the document.
+                            if (view?.composing)
+                                return own.length ? plugin.set.remove(own) : plugin.set;
+                            if (own.length || show === 'all' || !selection.empty || !view?.hasFocus()) {
+                                return plugin.set;
+                            }
+                            const docEmpty = isDocEmpty(doc);
+                            const kind = kindAt(line, doc.resolve(pos));
+                            const { caret } = lineWords(plugin.text, { node: line, pos, kind, docEmpty, state }, show);
+                            return caret
+                                ? plugin.set.add(doc, [lineDecoration(line, pos, caret, docEmpty)])
+                                : plugin.set;
+                        },
+                        attributes(state) {
+                            if (!isDocEmpty(state.doc))
+                                return {};
+                            const line = placeholderKey
+                                .getState(state)
+                                ?.set.find(0, state.doc.firstChild.nodeSize, (spec) => !!spec['line'])[0];
+                            const words = line?.spec['line'];
+                            return words ? { 'aria-placeholder': words } : {};
+                        },
+                        handleDOMEvents: { focus: redraw, blur: redraw },
+                    },
+                    view: (editorView) => {
+                        view = editorView;
+                        return {
+                            destroy: () => {
+                                view = undefined;
+                            },
+                        };
+                    },
+                }),
+            ];
+        },
+    });
+};
+
 /** The expressions a string holds, trimmed — as the host is asked. */
 const expressionsIn = (text) => scanMergeTags(text).map((tag) => text.slice(tag.expr[0], tag.expr[1]).trim());
 /** The attributes that can hold a token: strings — never the authored
@@ -19084,5 +20565,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AUTHORED_ATTR, AUTHORED_SPEC_KEY, AUTHORED_STYLE_DEFAULTS_KEY, AuthoredEnter, BLOCKQUOTE_STYLE, BLOCK_MENU_FOCUS_KEY, BUTTON_FILL, BUTTON_STYLE, BaseKeymap, Blockquote, Bold, BulletList, Button, CARET_ROOM, CLIENT_LABELS, COLUMN_STARTING_LINES, COMMENT_TAG, CONTENT_ATTRS, CSS_SUPPORT, ClearFormatting, CodeLine, CodeLineIndent, Column, ColumnResize, Columns, ColumnsResize, DOCUMENT_CLASS, DOCUMENT_TAGS, DUAL_BACKGROUND_MIN_RATIO, DUAL_CONTRAST_DARK, DUAL_CONTRAST_LIGHT, DUAL_CONTRAST_MIN_RATIO, Divider, Document$1 as Document, DocumentStyles, EMAIL_ATTRIBUTES, EMAIL_CSS_PROPERTIES, EMAIL_SAFE_STYLE_PROPERTIES, EMAIL_SAFE_TAGS, EMAIL_TAGS, EMAIL_TAG_ATTRIBUTES, EmailParagraph, FILE_CHOOSER_POINTER_WAIT, FILL_TEXT_COLOR, FILL_TEXT_COLOR_LIGHT, FILL_TEXT_COLOR_RGB, FOLD_WIDTH, FORMAT_WIDTH, GMAIL_CLIP_BYTES, GUIDES_ACTIVE_CLASS, GUIDES_PEEK_CLASS, GUIDES_PEEK_DELAY_MS, Gapcursor, HEADING_SIZES, HardBreak, Heading, History, HtmlComment, HtmlCommentInline, HtmlElement, HtmlInline, HtmlLanguage, HtmlRaw, HtmlTextElement, HtmlVoid, HtmlVoidBlock, IMPORT_VIEWPORT_WIDTH, INDENT_MAX, INDENT_STEP, INLINE_TAGS, INLINE_VOID_TAGS, IN_SELECTION_CLASS, Image, InlineAtomSelection, InlineImageStore, InlineImages, Italic, LIST_STYLE, LayoutGuides, Link, ListItem, MAX_COLUMNS, MAX_IMAGE_WIDTH, MAX_MERGE_TAG_LENGTH, MAX_UNBROKEN_RUN, MIN_COLUMN_CAP, MIN_COLUMN_PCT, MIN_FONT_SIZE, MIN_IMAGE_WIDTH, MIN_TABLE_PCT, MJML_WORLDLY_HTML, MergeTag, NoTextDrag, OrderedList, PARSE_SCOPE_KEY, PLACEHOLDER_WIDTH, Paragraph, PasteHygiene, QuotedHistory, REFUSED_TAGS, RENDERING_CLIENTS, SECTION_CONTENT_MAX, SECTION_INSET, SECTION_PADDING, STACK_CLASS, STACK_RULE, Section, SplitKeepingMarks, TABLE_BLOCK_SPACING, TABLE_BORDER_COLOR, TABLE_CELL_PADDING, TABLE_SECTION_TAGS, TYPING_REST, Table, TableCell, TableRow, Text, TextStyle, UNSET_BUTTON_HREF, Underline, VOID_TAGS, acceptProposal, addColumn, addColumnAtEnd, addRowAtEnd, analyzeAngularExpression, angularDialect, angularRequiredFields, appendColumn, applyAuthoredAttributes, applyEmailVocabulary, attributeString, authoredAttribute, authoredMarkupOf, authoredViewAttributes, bareButtons, buttonStyle, canonicalHead, canonicalMergeTagInner, canonicalRender, caretCellPos, caretInsideMergeTag, claimedImageFiles, clearCells, clientList, columnCaps, columnWidths, completionContextAt, containerStyle, contrastRatio, correctStoredMistakes, createAngularExpressions, createBlockMenu, createBubbleMenu, createButtonEdit, createContentProposal, createContentStream, createDOMParser, createEditor, createHtmlAutocomplete, createHtmlLanguage, createImageDrag, createInlineImages, createMergeTagResolution, createOffsetMapper, createQuotedHistory, createSchema, createSendIntent, createSourceMarks, createSuggestionMenu, createTableHandles, declarationProperty, declaredBackground, decodeDataUrl, defaultBubbleShouldShow, defineExtension, defineMark, defineNode, deleteColumns, deleteFullySelected, discardProposal, distributePadding, docText, dropDeadOfficeClasses, dropHidden, dropMediaQueries, dropZeroSizedWhitespace, duplicateColumn, duplicateRow, editQuotedHistory, effectiveWidths, emailBackgroundPalette, emailDocument, emailExtensions, emailPlainText, emailSizeBudget, emailTextPalette, embedsAsLinks, entitySpans, escapeAttribute$2 as escapeAttribute, escapeText$1 as escapeText, expressionDialect, expressionDialectKey, extensionActions, extensionSuggestions, fillTextColor, filledPlaceholderAttrs, filterEmailStyle, findColumnContext, findColumnsContext, findCssIssues, findListDepth, findSectionContext, findTableContext, fitImageWidth, foldHTML, formatHTML, formatPct, forwardDocument, forwardQuote, hasBlockChildren$1 as hasBlockChildren, hasDocumentEnvelope, headingStyle, holdsBlock, holdsColumn, hrefProblem, htmlSourceExtensions, imageDropTarget, importLoss, importedDocument, inheritTextStyles, inheritedMarkup, inlineBootstrapTableBorders, inlineImageCids, inlineImageRegistry, inlineImagesKey, inlineStyles, insertHTML, insertMergeTag, isActionEnabled, isBlock$1 as isBlock, isBlockLevel, isBlockish, isBooleanAttribute, isEmailAttribute, isEmailCssProperty, isEmailTag, isFillTextColor, isInlineAtom, isMarkActive, isMergeTagExpression, isMergeTagPath, isNodeActive, isPadded, isProposing, isQuotedHistoryFolded, isSafeColor, isSafeFontFamily, isSafeFontSize, isSafeUrl$1 as isSafeUrl, isSectionImageUrl, isStreaming, italicStarInputRegex, italicStarPasteRegex, italicUnderscoreInputRegex, italicUnderscorePasteRegex, keepGmailRules, layoutBlockAt, linkClickPlugin, linkPastePlugin, linkRangeAt, lintHTML, lowerInlinesAroundBlocks, markAttrsOf, markStackingColumns, marksAcrossBreak, materializeComments, measureMenuPlacement, mediaMatches, mergeTagAt, mergeTagExpressions, mergeTagFields, mergeTagRanges, mergeTagResolutionPending, moveColumn, moveRow, normalizeCommentText, normalizeCss, normalizeHref, normalizeMergeTagText, noteOwnWidths, openFileChooser, openTag$1 as openTag, openTags, outlookColumns, paddingOf, pagedSource, parseAngularExpression, parseDocument, parseFontFamily, parseFontSize, parseHTML, parsePadding, parseRules, parseTextTransform, passesDualBackground, passesDualContrast, preserveExtensions, preservedAttributes, promoteInlineImages, promoteMergeTags, proposalRange, proposeContent, quotedHistory, readEnvelope, readImageFile, realizeComments, relativeLuminance, removeColumn, removeLastColumn, removeQuotedHistory, renderForClient, renderedPath, repairLinkSchemes, repairTables, replaceHTML, replyDocument, replyEnvelope, replyQuote, reviseProposal, rewriteInlineImageSources, richTextExtensions, ruleForScope, ruleScope, sanitizePastedHTML, scanHTML, scanMergeTags, scopeOf$1 as scopeOf, scopedDocumentCss, selectColumn, selectRow, selectedButton, selectedImage, selectedImageAlt, selectedMarkAtom, selectionInsideMergeTag, serializeDocument, serializeToHTML, setCellBackground, setColumnBackground, setColumnBoundary, setColumnsBoundary, setQuotedHistory, setSectionBackground, setSectionImage, setTableBox, setTableWidth, soleInlineAtom, splitDeclarations$2 as splitDeclarations, splitListItemKeepMarks, starInputRegex, starPasteRegex, stopProposal, streamContent, streamedRange, streamingRange, suggestionSectionTitles, tableStyle, textOffsetAt, textRegions, toEmailSafeColor, toInboundMessage, toggleList, trimInlineBoxes, underscoreInputRegex, underscorePasteRegex, unwrapLayoutTables, unwrapOfficeParagraphMarks, verbatimElement, videoPage, watchMenuScroll, withAttribute, withAuthoredMarkup, withQuoted, withQuotedHistory, withStyleDeclaration, withoutAttribute, withoutStyleDeclaration };
+export { AUTHORED_ATTR, AUTHORED_SPEC_KEY, AUTHORED_STYLE_DEFAULTS_KEY, AuthoredEnter, BLOCKQUOTE_STYLE, BLOCK_MARQUEE_CLASS, BLOCK_MENU_FOCUS_KEY, BLOCK_RELEASING_CLASS, BLOCK_SELECTED_CLASS, BUTTON_FILL, BUTTON_STYLE, BaseKeymap, BlockSelection, Blockquote, Bold, BulletList, Button, CARET_ROOM, CLIENT_LABELS, COLOR_SCHEME_META, COLOR_SCHEME_RULE, COLUMN_STARTING_LINES, COMMENT_TAG, CONTENT_ATTRS, CSS_SUPPORT, ClearFormatting, CodeLine, CodeLineIndent, Column, ColumnResize, Columns, ColumnsResize, DARK_FILL_CLASS, DARK_MODE_SURFACES, DARK_TEXT_CLASS, DOCUMENT_CLASS, DOCUMENT_TAGS, DUAL_BACKGROUND_MIN_RATIO, DUAL_CONTRAST_DARK, DUAL_CONTRAST_LIGHT, DUAL_CONTRAST_MIN_RATIO, Divider, Document$1 as Document, DocumentStyles, EMAIL_ATTRIBUTES, EMAIL_CSS_PROPERTIES, EMAIL_SAFE_STYLE_PROPERTIES, EMAIL_SAFE_TAGS, EMAIL_TAGS, EMAIL_TAG_ATTRIBUTES, EmailParagraph, FILE_CHOOSER_POINTER_WAIT, FILL_TEXT_COLOR, FILL_TEXT_COLOR_LIGHT, FILL_TEXT_COLOR_RGB, FOLD_WIDTH, FORMAT_WIDTH, GMAIL_CLIP_BYTES, GUIDES_ACTIVE_CLASS, GUIDES_PEEK_CLASS, GUIDES_PEEK_DELAY_MS, Gapcursor, HEADING_LEVELS, HEADING_SIZES, HEADING_SPACE_ABOVE, HEADING_SPACE_BELOW, HardBreak, Heading, History, HtmlComment, HtmlCommentInline, HtmlElement, HtmlInline, HtmlLanguage, HtmlRaw, HtmlTextElement, HtmlVoid, HtmlVoidBlock, IMPORT_VIEWPORT_WIDTH, INDENT_MAX, INDENT_STEP, INLINE_TAGS, INLINE_VOID_TAGS, IN_SELECTION_CLASS, Image, InlineAtomSelection, InlineImageStore, InlineImages, Italic, LIST_SPACE, LayoutGuides, Link, ListItem, MAX_COLUMNS, MAX_IMAGE_WIDTH, MAX_MERGE_TAG_LENGTH, MAX_UNBROKEN_RUN, MIN_COLUMN_CAP, MIN_COLUMN_PCT, MIN_FONT_SIZE, MIN_IMAGE_WIDTH, MIN_TABLE_PCT, MJML_WORLDLY_HTML, MergeTag, NoTextDrag, OrderedList, PARSE_SCOPE_KEY, PLACEHOLDER_WIDTH, Paragraph, PasteHygiene, QuotedHistory, REFUSED_TAGS, RENDERING_CLIENTS, SECTION_CONTENT_MAX, SECTION_INSET, SECTION_PADDING, STACK_CLASS, STACK_RULE, Section, SelectedBlocks, SplitKeepingMarks, TABLE_BLOCK_SPACING, TABLE_BORDER_COLOR, TABLE_CELL_PADDING, TABLE_SECTION_TAGS, TYPING_REST, Table, TableCell, TableRow, Text, TextStyle, UNSET_BUTTON_HREF, Underline, VOID_TAGS, acceptProposal, addColumn, addColumnAtEnd, addRowAtEnd, analyzeAngularExpression, angularDialect, angularRequiredFields, appendColumn, applyAuthoredAttributes, applyEmailVocabulary, attributeString, authoredAttribute, authoredMarkupOf, authoredViewAttributes, bareButtons, beginBlockMarquee, buttonStyle, canonicalHead, canonicalMergeTagInner, canonicalRender, caretCellPos, caretInsideMergeTag, claimedImageFiles, clearCells, clientList, columnCaps, columnWidths, completionContextAt, containerStyle, contrastRatio, correctStoredMistakes, createAngularExpressions, createBlockMarquee, createBlockMenu, createBubbleMenu, createButtonEdit, createContentProposal, createContentStream, createDOMParser, createEditor, createHtmlAutocomplete, createHtmlLanguage, createImageDrag, createInlineImages, createMergeTagResolution, createOffsetMapper, createPlaceholder, createQuotedHistory, createSchema, createSendIntent, createSourceMarks, createSuggestionMenu, createTableHandles, cssColorToHex, darkModeEditorCss, declarationProperty, declaredBackground, decodeDataUrl, defaultBubbleShouldShow, defineExtension, defineMark, defineNode, deleteColumns, deleteFullySelected, discardProposal, distributePadding, docText, dropDeadOfficeClasses, dropHidden, dropMediaQueries, dropZeroSizedWhitespace, duplicateColumn, duplicateRow, editQuotedHistory, effectiveWidths, emailBackgroundPalette, emailDarkModePalette, emailDocument, emailExtensions, emailPlainText, emailSizeBudget, emailTextPalette, embedsAsLinks, entitySpans, escapeAttribute$2 as escapeAttribute, escapeText$2 as escapeText, expressionDialect, expressionDialectKey, extensionActions, extensionSuggestions, fillTextColor, filledPlaceholderAttrs, filterEmailStyle, findColumnContext, findColumnsContext, findCssIssues, findListDepth, findSectionContext, findTableContext, fitImageWidth, foldHTML, formatHTML, formatPct, forwardDocument, forwardQuote, hasBlockChildren$1 as hasBlockChildren, hasDocumentEnvelope, headingStyle, holdsBlock, holdsColumn, hrefProblem, htmlSourceExtensions, imageDropTarget, importLoss, importedDocument, inheritTextStyles, inheritedMarkup, inlineBootstrapTableBorders, inlineImageCids, inlineImageRegistry, inlineImagesKey, inlineStyles, insertHTML, insertMergeTag, isActionEnabled, isBlock$1 as isBlock, isBlockLevel, isBlockish, isBooleanAttribute, isEmailAttribute, isEmailCssProperty, isEmailTag, isFillTextColor, isInlineAtom, isMarkActive, isMergeTagExpression, isMergeTagPath, isNodeActive, isPadded, isProposing, isQuotedHistoryFolded, isSafeColor, isSafeFontFamily, isSafeFontSize, isSafeUrl$1 as isSafeUrl, isSectionImageUrl, isStreaming, italicStarInputRegex, italicStarPasteRegex, italicUnderscoreInputRegex, italicUnderscorePasteRegex, keepGmailRules, layoutBlockAt, linkClickPlugin, linkPastePlugin, linkRangeAt, lintHTML, listStyle, lowerInlinesAroundBlocks, markAttrsOf, markDarkMode, markStackingColumns, marksAcrossBreak, materializeComments, measureMenuPlacement, mediaMatches, mergeTagAt, mergeTagExpressions, mergeTagFields, mergeTagRanges, mergeTagResolutionPending, moveColumn, moveRow, normalizeCommentText, normalizeCss, normalizeHref, normalizeMergeTagText, noteOwnWidths, openFileChooser, openTag$1 as openTag, openTags, outlookColumns, paddingOf, pagedSource, parseAngularExpression, parseDocument, parseFontFamily, parseFontSize, parseHTML, parsePadding, parseRules, parseTextTransform, passesDualBackground, passesDualContrast, placeholderKey, plainTextExtensions, plainTextHTML, preserveExtensions, preservedAttributes, promoteInlineImages, promoteMergeTags, proposalRange, proposeContent, quotedHistory, readEnvelope, readImageFile, realizeComments, relativeLuminance, releaseBlockSelection, removeColumn, removeLastColumn, removeQuotedHistory, renderForClient, renderedPath, repairLinkSchemes, repairTables, replaceHTML, replyDocument, replyEnvelope, replyQuote, resolveColorScheme, reviseProposal, rewriteInlineImageSources, richTextExtensions, ruleForScope, ruleScope, sanitizePastedHTML, scanHTML, scanMergeTags, scopeOf$1 as scopeOf, scopedDocumentCss, selectColumn, selectRow, selectedButton, selectedImage, selectedImageAlt, selectedMarkAtom, selectionInsideMergeTag, serializeDocument, serializeToHTML, setCellBackground, setColumnBackground, setColumnBoundary, setColumnsBoundary, setPlaceholder, setQuotedHistory, setSectionBackground, setSectionImage, setTableBox, setTableWidth, soleInlineAtom, splitDeclarations$2 as splitDeclarations, splitListItemKeepMarks, starInputRegex, starPasteRegex, stopProposal, streamContent, streamedRange, streamingRange, suggestionSectionTitles, tableStyle, textOffsetAt, textRegions, toEmailSafeColor, toInboundMessage, toggleLayoutList, toggleList, trimInlineBoxes, underscoreInputRegex, underscorePasteRegex, unwrapLayoutTables, unwrapOfficeParagraphMarks, verbatimElement, videoPage, watchMenuScroll, withAttribute, withAuthoredMarkup, withQuoted, withQuotedHistory, withStyleDeclaration, withoutAttribute, withoutStyleDeclaration };
 //# sourceMappingURL=h-k-dev-angular-email-editor.mjs.map