@aquera/nile-elements 2.0.15 → 2.0.17

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor-email-fidelity.test.js

@@ -0,0 +1,287 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit';
+import '../index';
+import { TextSelection } from 'prosemirror-state';
+async function editorFixture(template = html `<nile-wysiwyg-editor></nile-wysiwyg-editor>`) {
+    const el = await fixture(template);
+    await el.updateComplete;
+    return el;
+}
+/** A compact table-based email with cell padding and a 600px container. */
+const EMAIL_FIXTURE = '<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">' +
+    '<tr><td align="center" style="padding:32px 12px;">' +
+    '<table role="presentation" width="600" style="width:100%; max-width:600px; background-color:#ffffff; border:1px solid #d9dee4;">' +
+    '<tr><td style="padding:28px 40px; background-color:#1f3a5f;">' +
+    '<p style="margin:0; font-family:Georgia, serif; color:#ffffff;">Company Name</p>' +
+    '</td></tr>' +
+    '<tr><td style="padding:36px 40px; font-family:Arial, sans-serif; color:#2b2f36;">' +
+    '<p style="margin:0 0 18px 0;">Hello there.</p>' +
+    '</td></tr>' +
+    '</table></td></tr></table>';
+/** A full standalone HTML document, the kind that lands in text/plain. */
+const FULL_DOC = '<!doctype html><html><body>' +
+    '<table role="presentation"><tr><td style="padding:16px">Pasted cell</td></tr></table>' +
+    '</body></html>';
+/** Fire a paste through the ProseMirror view's handlePaste prop. */
+function firePaste(el, data) {
+    const view = el.pmView;
+    const dt = new DataTransfer();
+    for (const [type, value] of Object.entries(data))
+        dt.setData(type, value);
+    const event = new ClipboardEvent('paste', { clipboardData: dt });
+    return view.someProp('handlePaste', f => f(view, event, view.state.tr.doc.slice(0)));
+}
+describe('nile-wysiwyg-editor email-fidelity: property reflection', () => {
+    it('1. defaults emailFidelity to false', async () => {
+        const el = await editorFixture();
+        expect(el.emailFidelity).to.equal(false);
+        expect(el.hasAttribute('email-fidelity')).to.equal(false);
+    });
+    it('2. reflects the property to the kebab attribute', async () => {
+        const el = await editorFixture();
+        el.emailFidelity = true;
+        await el.updateComplete;
+        expect(el.hasAttribute('email-fidelity')).to.equal(true);
+    });
+    it('3. reads the attribute into the property', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`);
+        expect(el.emailFidelity).to.equal(true);
+    });
+});
+describe('nile-wysiwyg-editor email-fidelity: value parsing', () => {
+    it('4. keeps cell padding in value with the flag on', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`);
+        el.value = EMAIL_FIXTURE;
+        await el.updateComplete;
+        const doc = new DOMParser().parseFromString(el.value, 'text/html');
+        const padded = Array.from(doc.querySelectorAll('td')).some(td => td.style.padding !== '' || td.style.paddingTop !== '');
+        expect(padded, 'a td keeps padding').to.equal(true);
+    });
+    it('5. strips cell padding in value with the flag off', async () => {
+        const el = await editorFixture();
+        el.value = EMAIL_FIXTURE;
+        await el.updateComplete;
+        expect(el.value).to.not.include('padding');
+    });
+    it('6. re-parses value when the flag toggles on', async () => {
+        const el = await editorFixture();
+        el.value = EMAIL_FIXTURE;
+        await el.updateComplete;
+        expect(el.value).to.not.include('padding');
+        el.emailFidelity = true;
+        el.value = EMAIL_FIXTURE;
+        await el.updateComplete;
+        expect(el.value).to.match(/padding/);
+    });
+});
+describe('nile-wysiwyg-editor email-fidelity: paste', () => {
+    it('7. parses a text/plain-only HTML document when the flag is on', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`);
+        const handled = firePaste(el, { 'text/plain': FULL_DOC });
+        expect(handled).to.equal(true);
+        await el.updateComplete;
+        expect(el.getHTML()).to.include('<table');
+        expect(el.getHTML()).to.not.include('&lt;table');
+    });
+    it('8. inserts the HTML document literally when the flag is off', async () => {
+        const el = await editorFixture();
+        firePaste(el, { 'text/plain': FULL_DOC });
+        await el.updateComplete;
+        // No real table node — the markup is kept as literal text.
+        expect(el.getHTML()).to.not.include('<table');
+        expect(el.getText()).to.include('<table');
+    });
+    it('9. paste-as-plain-text wins over HTML detection', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor email-fidelity paste-as-plain-text></nile-wysiwyg-editor>`);
+        firePaste(el, { 'text/plain': FULL_DOC });
+        await el.updateComplete;
+        expect(el.getHTML()).to.not.include('<table');
+        expect(el.getText()).to.include('<table');
+    });
+    it('10. markdown text still goes through markdown with the flag on', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`);
+        firePaste(el, { 'text/plain': '# Heading\n\nSome **bold** text.' });
+        await el.updateComplete;
+        const out = el.getHTML();
+        expect(out).to.include('<h1>');
+        expect(out).to.include('<strong>');
+    });
+});
+/** Focuses the editor with the caret inside the first text that equals `text`. */
+async function caretIn(el, text) {
+    const view = el.pmView;
+    let pos = -1;
+    view.state.doc.descendants((node, at) => {
+        if (pos === -1 && node.isText && node.text === text)
+            pos = at + 1;
+        return pos === -1;
+    });
+    view.focus();
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos)));
+    await el.updateComplete;
+    await new Promise(r => setTimeout(r, 50));
+}
+function tableMenuOpen(el) {
+    return !!el.shadowRoot.querySelector('nile-wysiwyg-table-menu').hasAttribute('open');
+}
+const DATA_TABLE = '<table><tr><td>data cell</td></tr></table>';
+const LAYOUT_TABLE = '<table role="presentation"><tr><td><p>layout cell</p></td></tr></table>';
+const DATA_IN_LAYOUT = '<table role="presentation"><tr><td><table><tr><td>inner data</td></tr></table></td></tr></table>';
+describe('nile-wysiwyg-editor: table menu visibility', () => {
+    it('11. shows in a data table by default', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor .value=${DATA_TABLE}></nile-wysiwyg-editor>`);
+        await caretIn(el, 'data cell');
+        expect(tableMenuOpen(el)).to.equal(true);
+    });
+    it('12. no-table-menu hides it', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor no-table-menu .value=${DATA_TABLE}></nile-wysiwyg-editor>`);
+        expect(el.noTableMenu).to.equal(true);
+        await caretIn(el, 'data cell');
+        expect(tableMenuOpen(el)).to.equal(false);
+    });
+    it('13. toggling noTableMenu while focused closes and reopens it', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor .value=${DATA_TABLE}></nile-wysiwyg-editor>`);
+        await caretIn(el, 'data cell');
+        el.noTableMenu = true;
+        await el.updateComplete;
+        expect(tableMenuOpen(el)).to.equal(false);
+        el.noTableMenu = false;
+        await el.updateComplete;
+        expect(tableMenuOpen(el)).to.equal(true);
+    });
+    it('14. email-fidelity hides it inside a layout table', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor email-fidelity .value=${LAYOUT_TABLE}></nile-wysiwyg-editor>`);
+        await caretIn(el, 'layout cell');
+        expect(tableMenuOpen(el)).to.equal(false);
+    });
+    it('15. without email-fidelity a layout table still shows it (unchanged)', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor .value=${LAYOUT_TABLE}></nile-wysiwyg-editor>`);
+        await caretIn(el, 'layout cell');
+        expect(tableMenuOpen(el)).to.equal(true);
+    });
+    it('16. email-fidelity still shows it in a data table nested in a layout table', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor email-fidelity .value=${DATA_IN_LAYOUT}></nile-wysiwyg-editor>`);
+        await caretIn(el, 'inner data');
+        expect(tableMenuOpen(el)).to.equal(true);
+    });
+});
+describe('nile-wysiwyg-editor email-fidelity: saved HTML matches the editor', () => {
+    /** A table with no role="presentation" and no layout styles of its own. */
+    const DATA_TABLE = '<table><tbody><tr><td><p>Employee Number:</p></td><td><p>1342</p></td></tr></tbody></table>';
+    const AUTHORED = '<table style="width: 600px"><tbody><tr><td style="padding: 20px; vertical-align: middle">' +
+        '<p style="margin: 0 0 12px 0">Kept</p></td></tr></tbody></table>';
+    const LAYOUT = '<table role="presentation"><tbody><tr><td><p>layout cell</p></td></tr></tbody></table>';
+    const parse = (out) => new DOMParser().parseFromString(out, 'text/html').body;
+    async function load(value, fidelity = true) {
+        const el = await editorFixture(fidelity
+            ? html `<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
+            : html `<nile-wysiwyg-editor></nile-wysiwyg-editor>`);
+        el.value = value;
+        await el.updateComplete;
+        return el;
+    }
+    it('1. writes the editor table rendering into a data table that sets none', async () => {
+        const el = await load(DATA_TABLE);
+        const body = parse(el.getHTML());
+        const table = body.querySelector('table');
+        expect(table.getAttribute('cellpadding')).to.equal('0');
+        expect(table.getAttribute('cellspacing')).to.equal('0');
+        expect(table.style.width).to.equal('100%');
+        expect(table.style.borderCollapse).to.equal('collapse');
+        expect(table.style.tableLayout).to.equal('fixed');
+        const td = body.querySelector('td');
+        expect(td.style.padding).to.equal('6px 8px');
+        expect(td.style.verticalAlign).to.equal('top');
+        const p = body.querySelector('p');
+        expect(p.style.marginTop).to.equal('0px');
+        expect(p.style.marginBottom).to.equal('0px');
+    });
+    it('2. keeps values the content sets itself', async () => {
+        const el = await load(AUTHORED);
+        const body = parse(el.getHTML());
+        expect(body.querySelector('table').style.width).to.equal('600px');
+        const td = body.querySelector('td');
+        expect(td.style.padding).to.equal('20px');
+        expect(td.style.verticalAlign).to.equal('middle');
+        expect(body.querySelector('p').style.margin).to.equal('0px 0px 12px');
+    });
+    it('3. leaves layout-table cells as authored, adding only cellpadding/cellspacing and collapse', async () => {
+        const el = await load(LAYOUT);
+        const body = parse(el.getHTML());
+        const table = body.querySelector('table');
+        expect(table.getAttribute('cellpadding')).to.equal('0');
+        expect(table.style.borderCollapse).to.equal('collapse');
+        expect(table.style.tableLayout).to.equal('');
+        expect(table.style.width).to.equal('');
+        const td = body.querySelector('td');
+        expect(td.style.padding).to.equal('');
+        expect(td.style.verticalAlign).to.equal('');
+    });
+    it('4. without email-fidelity the output is unchanged', async () => {
+        const el = await load(DATA_TABLE, false);
+        const out = el.getHTML();
+        expect(out).to.not.include('cellpadding');
+        expect(out).to.not.include('padding');
+        expect(out).to.not.include('border-collapse');
+    });
+    it('5. is stable across save and reload', async () => {
+        const first = await load(DATA_TABLE);
+        const saved = first.getHTML();
+        const second = await load(saved);
+        expect(second.getHTML()).to.equal(saved);
+        expect(second.value).to.equal(saved);
+    });
+    it('6. writes cell borders and the header fill in the colours the theme draws', async () => {
+        const el = await editorFixture(html `<nile-wysiwyg-editor
+        email-fidelity
+        style="--nile-wysiwyg-table-border: rgb(1, 2, 3); --nile-wysiwyg-table-header-bg: rgb(4, 5, 6)"
+      ></nile-wysiwyg-editor>`);
+        el.value =
+            '<table><tbody><tr><th><p>Attribute</p></th></tr><tr><td><p>Email</p></td></tr></tbody></table>';
+        await el.updateComplete;
+        const body = parse(el.getHTML());
+        const td = body.querySelector('td');
+        expect(td.style.borderTop).to.equal('1px solid rgb(1, 2, 3)');
+        expect(td.style.borderLeft).to.equal('1px solid rgb(1, 2, 3)');
+        const th = body.querySelector('th');
+        expect(th.style.backgroundColor).to.equal('rgb(4, 5, 6)');
+        expect(th.style.textAlign).to.equal('left');
+        expect(th.style.fontWeight).to.equal('600');
+        const again = await load(el.getHTML());
+        expect(parse(again.getHTML()).querySelector('td').style.borderTop).to.equal('1px solid rgb(1, 2, 3)');
+    });
+    it('6b. keeps an imported cell border across two saves', async () => {
+        const first = await load('<table role="presentation"><tbody><tr><td style="border: 1px solid #d9dee4"><p>x</p></td></tr></tbody></table>');
+        const second = await load(first.getHTML());
+        const td = parse(second.getHTML()).querySelector('td');
+        expect(td.style.borderTop).to.equal('1px solid rgb(217, 222, 228)');
+        expect(td.style.borderRight).to.equal('1px solid rgb(217, 222, 228)');
+        expect(second.getHTML()).to.equal(first.getHTML());
+    });
+    it('7. writes no border when the theme draws none', async () => {
+        const el = await load(DATA_TABLE);
+        expect(el.getHTML()).to.not.include('border-top');
+    });
+    it('8. writes a resized column width onto its cells', async () => {
+        const el = await load('<table><tbody><tr><td data-colwidth="120"><p>a</p></td><td><p>b</p></td></tr></tbody></table>');
+        const tds = parse(el.getHTML()).querySelectorAll('td');
+        expect(tds[0].style.width).to.equal('120px');
+        expect(tds[1].style.width).to.equal('');
+    });
+    it('9. draws layout-table cells the way a mail client does, data cells as before', async () => {
+        const el = await load(LAYOUT + DATA_TABLE);
+        const cells = [...el.shadowRoot.querySelectorAll('.ProseMirror td')];
+        const layoutCell = cells.find(c => c.textContent === 'layout cell');
+        const dataCell = cells.find(c => c.textContent === '1342');
+        expect(getComputedStyle(layoutCell).padding).to.equal('0px');
+        expect(getComputedStyle(layoutCell).verticalAlign).to.equal('middle');
+        expect(getComputedStyle(dataCell).padding).to.equal('6px 8px');
+        expect(getComputedStyle(dataCell).verticalAlign).to.equal('top');
+    });
+    it('10. adds no editor-only margin around tables', async () => {
+        const el = await load(DATA_TABLE);
+        const wrapper = el.shadowRoot.querySelector('.ProseMirror .tableWrapper');
+        expect(getComputedStyle(wrapper).marginTop).to.equal('0px');
+    });
+});
+//# sourceMappingURL=nile-wysiwyg-editor-email-fidelity.test.js.map

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor-email-fidelity.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-wysiwyg-editor-email-fidelity.test.js","sourceRoot":"","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor-email-fidelity.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect } from '@open-wc/testing';\nimport { html } from 'lit';\nimport '../index';\nimport { TextSelection } from 'prosemirror-state';\nimport type { NileWysiwygEditor } from './nile-wysiwyg-editor';\n\nasync function editorFixture(template = html`<nile-wysiwyg-editor></nile-wysiwyg-editor>`) {\n  const el = await fixture<NileWysiwygEditor>(template);\n  await el.updateComplete;\n  return el;\n}\n\n/** A compact table-based email with cell padding and a 600px container. */\nconst EMAIL_FIXTURE =\n  '<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">' +\n  '<tr><td align=\"center\" style=\"padding:32px 12px;\">' +\n  '<table role=\"presentation\" width=\"600\" style=\"width:100%; max-width:600px; background-color:#ffffff; border:1px solid #d9dee4;\">' +\n  '<tr><td style=\"padding:28px 40px; background-color:#1f3a5f;\">' +\n  '<p style=\"margin:0; font-family:Georgia, serif; color:#ffffff;\">Company Name</p>' +\n  '</td></tr>' +\n  '<tr><td style=\"padding:36px 40px; font-family:Arial, sans-serif; color:#2b2f36;\">' +\n  '<p style=\"margin:0 0 18px 0;\">Hello there.</p>' +\n  '</td></tr>' +\n  '</table></td></tr></table>';\n\n/** A full standalone HTML document, the kind that lands in text/plain. */\nconst FULL_DOC =\n  '<!doctype html><html><body>' +\n  '<table role=\"presentation\"><tr><td style=\"padding:16px\">Pasted cell</td></tr></table>' +\n  '</body></html>';\n\n/** Fire a paste through the ProseMirror view's handlePaste prop. */\nfunction firePaste(el: NileWysiwygEditor, data: Record<string, string>) {\n  const view = el.pmView!;\n  const dt = new DataTransfer();\n  for (const [type, value] of Object.entries(data)) dt.setData(type, value);\n  const event = new ClipboardEvent('paste', { clipboardData: dt });\n  return view.someProp('handlePaste', f => f(view, event, view.state.tr.doc.slice(0)));\n}\n\ndescribe('nile-wysiwyg-editor email-fidelity: property reflection', () => {\n  it('1. defaults emailFidelity to false', async () => {\n    const el = await editorFixture();\n    expect(el.emailFidelity).to.equal(false);\n    expect(el.hasAttribute('email-fidelity')).to.equal(false);\n  });\n\n  it('2. reflects the property to the kebab attribute', async () => {\n    const el = await editorFixture();\n    el.emailFidelity = true;\n    await el.updateComplete;\n    expect(el.hasAttribute('email-fidelity')).to.equal(true);\n  });\n\n  it('3. reads the attribute into the property', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`\n    );\n    expect(el.emailFidelity).to.equal(true);\n  });\n});\n\ndescribe('nile-wysiwyg-editor email-fidelity: value parsing', () => {\n  it('4. keeps cell padding in value with the flag on', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`\n    );\n    el.value = EMAIL_FIXTURE;\n    await el.updateComplete;\n    const doc = new DOMParser().parseFromString(el.value, 'text/html');\n    const padded = Array.from(doc.querySelectorAll<HTMLElement>('td')).some(\n      td => td.style.padding !== '' || td.style.paddingTop !== ''\n    );\n    expect(padded, 'a td keeps padding').to.equal(true);\n  });\n\n  it('5. strips cell padding in value with the flag off', async () => {\n    const el = await editorFixture();\n    el.value = EMAIL_FIXTURE;\n    await el.updateComplete;\n    expect(el.value).to.not.include('padding');\n  });\n\n  it('6. re-parses value when the flag toggles on', async () => {\n    const el = await editorFixture();\n    el.value = EMAIL_FIXTURE;\n    await el.updateComplete;\n    expect(el.value).to.not.include('padding');\n\n    el.emailFidelity = true;\n    el.value = EMAIL_FIXTURE;\n    await el.updateComplete;\n    expect(el.value).to.match(/padding/);\n  });\n});\n\ndescribe('nile-wysiwyg-editor email-fidelity: paste', () => {\n  it('7. parses a text/plain-only HTML document when the flag is on', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`\n    );\n    const handled = firePaste(el, { 'text/plain': FULL_DOC });\n    expect(handled).to.equal(true);\n    await el.updateComplete;\n    expect(el.getHTML()).to.include('<table');\n    expect(el.getHTML()).to.not.include('&lt;table');\n  });\n\n  it('8. inserts the HTML document literally when the flag is off', async () => {\n    const el = await editorFixture();\n    firePaste(el, { 'text/plain': FULL_DOC });\n    await el.updateComplete;\n    // No real table node — the markup is kept as literal text.\n    expect(el.getHTML()).to.not.include('<table');\n    expect(el.getText()).to.include('<table');\n  });\n\n  it('9. paste-as-plain-text wins over HTML detection', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor email-fidelity paste-as-plain-text></nile-wysiwyg-editor>`\n    );\n    firePaste(el, { 'text/plain': FULL_DOC });\n    await el.updateComplete;\n    expect(el.getHTML()).to.not.include('<table');\n    expect(el.getText()).to.include('<table');\n  });\n\n  it('10. markdown text still goes through markdown with the flag on', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`\n    );\n    firePaste(el, { 'text/plain': '# Heading\\n\\nSome **bold** text.' });\n    await el.updateComplete;\n    const out = el.getHTML();\n    expect(out).to.include('<h1>');\n    expect(out).to.include('<strong>');\n  });\n});\n\n/** Focuses the editor with the caret inside the first text that equals `text`. */\nasync function caretIn(el: NileWysiwygEditor, text: string) {\n  const view = el.pmView!;\n  let pos = -1;\n  view.state.doc.descendants((node, at) => {\n    if (pos === -1 && node.isText && node.text === text) pos = at + 1;\n    return pos === -1;\n  });\n  view.focus();\n  view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos)));\n  await el.updateComplete;\n  await new Promise(r => setTimeout(r, 50));\n}\n\nfunction tableMenuOpen(el: NileWysiwygEditor): boolean {\n  return !!el.shadowRoot!.querySelector('nile-wysiwyg-table-menu')!.hasAttribute('open');\n}\n\nconst DATA_TABLE = '<table><tr><td>data cell</td></tr></table>';\nconst LAYOUT_TABLE = '<table role=\"presentation\"><tr><td><p>layout cell</p></td></tr></table>';\nconst DATA_IN_LAYOUT =\n  '<table role=\"presentation\"><tr><td><table><tr><td>inner data</td></tr></table></td></tr></table>';\n\ndescribe('nile-wysiwyg-editor: table menu visibility', () => {\n  it('11. shows in a data table by default', async () => {\n    const el = await editorFixture(html`<nile-wysiwyg-editor .value=${DATA_TABLE}></nile-wysiwyg-editor>`);\n    await caretIn(el, 'data cell');\n    expect(tableMenuOpen(el)).to.equal(true);\n  });\n\n  it('12. no-table-menu hides it', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor no-table-menu .value=${DATA_TABLE}></nile-wysiwyg-editor>`\n    );\n    expect(el.noTableMenu).to.equal(true);\n    await caretIn(el, 'data cell');\n    expect(tableMenuOpen(el)).to.equal(false);\n  });\n\n  it('13. toggling noTableMenu while focused closes and reopens it', async () => {\n    const el = await editorFixture(html`<nile-wysiwyg-editor .value=${DATA_TABLE}></nile-wysiwyg-editor>`);\n    await caretIn(el, 'data cell');\n    el.noTableMenu = true;\n    await el.updateComplete;\n    expect(tableMenuOpen(el)).to.equal(false);\n    el.noTableMenu = false;\n    await el.updateComplete;\n    expect(tableMenuOpen(el)).to.equal(true);\n  });\n\n  it('14. email-fidelity hides it inside a layout table', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor email-fidelity .value=${LAYOUT_TABLE}></nile-wysiwyg-editor>`\n    );\n    await caretIn(el, 'layout cell');\n    expect(tableMenuOpen(el)).to.equal(false);\n  });\n\n  it('15. without email-fidelity a layout table still shows it (unchanged)', async () => {\n    const el = await editorFixture(html`<nile-wysiwyg-editor .value=${LAYOUT_TABLE}></nile-wysiwyg-editor>`);\n    await caretIn(el, 'layout cell');\n    expect(tableMenuOpen(el)).to.equal(true);\n  });\n\n  it('16. email-fidelity still shows it in a data table nested in a layout table', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor email-fidelity .value=${DATA_IN_LAYOUT}></nile-wysiwyg-editor>`\n    );\n    await caretIn(el, 'inner data');\n    expect(tableMenuOpen(el)).to.equal(true);\n  });\n});\n\ndescribe('nile-wysiwyg-editor email-fidelity: saved HTML matches the editor', () => {\n  /** A table with no role=\"presentation\" and no layout styles of its own. */\n  const DATA_TABLE =\n    '<table><tbody><tr><td><p>Employee Number:</p></td><td><p>1342</p></td></tr></tbody></table>';\n  const AUTHORED =\n    '<table style=\"width: 600px\"><tbody><tr><td style=\"padding: 20px; vertical-align: middle\">' +\n    '<p style=\"margin: 0 0 12px 0\">Kept</p></td></tr></tbody></table>';\n  const LAYOUT =\n    '<table role=\"presentation\"><tbody><tr><td><p>layout cell</p></td></tr></tbody></table>';\n\n  const parse = (out: string) => new DOMParser().parseFromString(out, 'text/html').body;\n\n  async function load(value: string, fidelity = true) {\n    const el = await editorFixture(\n      fidelity\n        ? html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`\n        : html`<nile-wysiwyg-editor></nile-wysiwyg-editor>`\n    );\n    el.value = value;\n    await el.updateComplete;\n    return el;\n  }\n\n  it('1. writes the editor table rendering into a data table that sets none', async () => {\n    const el = await load(DATA_TABLE);\n    const body = parse(el.getHTML());\n    const table = body.querySelector('table')!;\n    expect(table.getAttribute('cellpadding')).to.equal('0');\n    expect(table.getAttribute('cellspacing')).to.equal('0');\n    expect(table.style.width).to.equal('100%');\n    expect(table.style.borderCollapse).to.equal('collapse');\n    expect(table.style.tableLayout).to.equal('fixed');\n    const td = body.querySelector('td')!;\n    expect(td.style.padding).to.equal('6px 8px');\n    expect(td.style.verticalAlign).to.equal('top');\n    const p = body.querySelector('p')!;\n    expect(p.style.marginTop).to.equal('0px');\n    expect(p.style.marginBottom).to.equal('0px');\n  });\n\n  it('2. keeps values the content sets itself', async () => {\n    const el = await load(AUTHORED);\n    const body = parse(el.getHTML());\n    expect(body.querySelector('table')!.style.width).to.equal('600px');\n    const td = body.querySelector('td')!;\n    expect(td.style.padding).to.equal('20px');\n    expect(td.style.verticalAlign).to.equal('middle');\n    expect(body.querySelector('p')!.style.margin).to.equal('0px 0px 12px');\n  });\n\n  it('3. leaves layout-table cells as authored, adding only cellpadding/cellspacing and collapse', async () => {\n    const el = await load(LAYOUT);\n    const body = parse(el.getHTML());\n    const table = body.querySelector('table')!;\n    expect(table.getAttribute('cellpadding')).to.equal('0');\n    expect(table.style.borderCollapse).to.equal('collapse');\n    expect(table.style.tableLayout).to.equal('');\n    expect(table.style.width).to.equal('');\n    const td = body.querySelector('td')!;\n    expect(td.style.padding).to.equal('');\n    expect(td.style.verticalAlign).to.equal('');\n  });\n\n  it('4. without email-fidelity the output is unchanged', async () => {\n    const el = await load(DATA_TABLE, false);\n    const out = el.getHTML();\n    expect(out).to.not.include('cellpadding');\n    expect(out).to.not.include('padding');\n    expect(out).to.not.include('border-collapse');\n  });\n\n  it('5. is stable across save and reload', async () => {\n    const first = await load(DATA_TABLE);\n    const saved = first.getHTML();\n    const second = await load(saved);\n    expect(second.getHTML()).to.equal(saved);\n    expect(second.value).to.equal(saved);\n  });\n\n  it('6. writes cell borders and the header fill in the colours the theme draws', async () => {\n    const el = await editorFixture(\n      html`<nile-wysiwyg-editor\n        email-fidelity\n        style=\"--nile-wysiwyg-table-border: rgb(1, 2, 3); --nile-wysiwyg-table-header-bg: rgb(4, 5, 6)\"\n      ></nile-wysiwyg-editor>`\n    );\n    el.value =\n      '<table><tbody><tr><th><p>Attribute</p></th></tr><tr><td><p>Email</p></td></tr></tbody></table>';\n    await el.updateComplete;\n    const body = parse(el.getHTML());\n    const td = body.querySelector('td')!;\n    expect(td.style.borderTop).to.equal('1px solid rgb(1, 2, 3)');\n    expect(td.style.borderLeft).to.equal('1px solid rgb(1, 2, 3)');\n    const th = body.querySelector('th')!;\n    expect(th.style.backgroundColor).to.equal('rgb(4, 5, 6)');\n    expect(th.style.textAlign).to.equal('left');\n    expect(th.style.fontWeight).to.equal('600');\n    const again = await load(el.getHTML());\n    expect(parse(again.getHTML()).querySelector('td')!.style.borderTop).to.equal(\n      '1px solid rgb(1, 2, 3)'\n    );\n  });\n\n  it('6b. keeps an imported cell border across two saves', async () => {\n    const first = await load(\n      '<table role=\"presentation\"><tbody><tr><td style=\"border: 1px solid #d9dee4\"><p>x</p></td></tr></tbody></table>'\n    );\n    const second = await load(first.getHTML());\n    const td = parse(second.getHTML()).querySelector('td')!;\n    expect(td.style.borderTop).to.equal('1px solid rgb(217, 222, 228)');\n    expect(td.style.borderRight).to.equal('1px solid rgb(217, 222, 228)');\n    expect(second.getHTML()).to.equal(first.getHTML());\n  });\n\n  it('7. writes no border when the theme draws none', async () => {\n    const el = await load(DATA_TABLE);\n    expect(el.getHTML()).to.not.include('border-top');\n  });\n\n  it('8. writes a resized column width onto its cells', async () => {\n    const el = await load(\n      '<table><tbody><tr><td data-colwidth=\"120\"><p>a</p></td><td><p>b</p></td></tr></tbody></table>'\n    );\n    const tds = parse(el.getHTML()).querySelectorAll('td');\n    expect((tds[0] as HTMLElement).style.width).to.equal('120px');\n    expect((tds[1] as HTMLElement).style.width).to.equal('');\n  });\n\n  it('9. draws layout-table cells the way a mail client does, data cells as before', async () => {\n    const el = await load(LAYOUT + DATA_TABLE);\n    const cells = [...el.shadowRoot!.querySelectorAll('.ProseMirror td')] as HTMLElement[];\n    const layoutCell = cells.find(c => c.textContent === 'layout cell')!;\n    const dataCell = cells.find(c => c.textContent === '1342')!;\n    expect(getComputedStyle(layoutCell).padding).to.equal('0px');\n    expect(getComputedStyle(layoutCell).verticalAlign).to.equal('middle');\n    expect(getComputedStyle(dataCell).padding).to.equal('6px 8px');\n    expect(getComputedStyle(dataCell).verticalAlign).to.equal('top');\n  });\n\n  it('10. adds no editor-only margin around tables', async () => {\n    const el = await load(DATA_TABLE);\n    const wrapper = el.shadowRoot!.querySelector('.ProseMirror .tableWrapper') as HTMLElement;\n    expect(getComputedStyle(wrapper).marginTop).to.equal('0px');\n  });\n});\n"]}

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.js

@@ -331,12 +331,43 @@ export const styles = css `
     cursor: col-resize;
   }
 
+  /* --- Email fidelity: an unsized layout table (e.g. a button) fits its
+     content, as it does in mail clients, instead of the 100% default. --- */
+  :host([email-fidelity]) .ProseMirror table[data-autowidth] {
+    width: auto;
+  }
+
+  /* Column resizing sets an inline min-width of 100px per column; on a nested
+     layout table (e.g. a row of social icons) that overflows the cell holding it. */
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] {
+    min-width: 0 !important;
+  }
+
+  /* Email fidelity: the wrapper is editor-only (it holds the resize handles), so
+     its margin would add space the saved email doesn't have. */
+  :host([email-fidelity]) .ProseMirror .tableWrapper {
+    margin: 0;
+  }
+
+  /* Email fidelity: draw unstyled layout-table cells like a mail client (no padding, centred, no header fill). */
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > td,
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {
+    padding: 0;
+    vertical-align: middle;
+  }
+
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {
+    background: none;
+  }
+
   /* --- Layout tables (role="presentation"): borderless output, dashed
      guides while editing so the structure stays visible. --- */
   .ProseMirror table[data-layout] td,
   .ProseMirror table[data-layout] th {
-    border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
-    background: transparent;
+    /* Draw the editing guide with an inset outline, not a border/background, so
+       author-set cell borders and backgrounds (email fidelity) are preserved. */
+    outline: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
+    outline-offset: -1px;
     font-weight: inherit;
     text-align: inherit;
   }
@@ -390,7 +421,7 @@ export const styles = css `
     width: 9px;
     height: 9px;
     background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
-    border: 1.5px solid var(--ng-colors-bg-primary);
+    border: 1.5px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-radius: 2px;
     z-index: 2;
   }
@@ -661,7 +692,17 @@ export const styles = css `
     background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));
     color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));
     font-weight: 500;
-    white-space: nowrap;
+    /* Short mentions stay on one line; a long one (e.g. a deep field path) wraps
+       inside its container instead of overflowing a table cell or the editor. */
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+
+  /* The chip's 500 is only a default — bold, headings and an explicit
+     font-weight from the content win, so the chip looks the way it exports. */
+  .ProseMirror :is(strong, b, h1, h2, h3, h4, h5, h6, th, [style*='font-weight'])
+    span.nile-wysiwyg__mention {
+    font-weight: inherit;
   }
 
   .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-wysiwyg-editor.css.js","sourceRoot":"","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+zBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    font-family: var(\n      --nile-wysiwyg-font-family,\n      var(\n        --nile-font-family-sans-serif,\n        var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n      )\n    );\n  }\n\n  .nile-wysiwyg {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-border-color,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))\n      );\n    border-radius: var(\n      --nile-wysiwyg-radius,\n      var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))\n    );\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n    box-sizing: border-box;\n  }\n\n  /* --- Fullscreen (distraction-free) mode --- */\n  :host([fullscreen]) {\n    position: fixed;\n    inset: 0;\n    z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  :host([fullscreen]) .nile-wysiwyg {\n    height: 100%;\n    border: none;\n    border-radius: 0;\n  }\n\n  :host([fullscreen]) .nile-wysiwyg__surface {\n    max-height: none;\n  }\n\n  :host([disabled]) .nile-wysiwyg {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    background: var(\n      --nile-wysiwyg-disabled-bg,\n      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))\n    );\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .ProseMirror {\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  .nile-wysiwyg__surface {\n    flex: 1;\n    overflow-y: auto;\n    max-height: var(--nile-wysiwyg-max-height, none);\n  }\n\n  /* --- ProseMirror base rules (inlined from prosemirror-view/style) --- */\n  .ProseMirror {\n    position: relative;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n    white-space: break-spaces;\n    -webkit-font-variant-ligatures: none;\n    font-variant-ligatures: none;\n    font-feature-settings: 'liga' 0;\n    outline: none;\n    padding: var(--nile-wysiwyg-content-padding, 12px);\n    min-height: var(--nile-wysiwyg-min-height, 160px);\n    font-size: var(--nile-wysiwyg-font-size, inherit);\n    line-height: var(--nile-wysiwyg-line-height, inherit);\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    color: var(\n      --nile-wysiwyg-color,\n      var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    );\n    box-sizing: border-box;\n    border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))\n      var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));\n  }\n\n  .ProseMirror pre {\n    white-space: pre-wrap;\n  }\n\n  .ProseMirror li {\n    position: relative;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection {\n    caret-color: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: 2px solid\n      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));\n  }\n\n  /* Gap cursor (inlined from prosemirror-gapcursor/style) */\n  .ProseMirror-gapcursor {\n    display: none;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .ProseMirror-gapcursor:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: -2px;\n    width: 20px;\n    border-top: 1px solid currentColor;\n    animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;\n  }\n\n  @keyframes nile-wysiwyg-cursor-blink {\n    to {\n      visibility: hidden;\n    }\n  }\n\n  .ProseMirror-focused .ProseMirror-gapcursor {\n    display: block;\n  }\n\n  /* --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- */\n  .nile-wysiwyg__empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n    user-select: none;\n    opacity: 0.7;\n    color: var(\n      --nile-wysiwyg-placeholder-color,\n      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))\n    );\n  }\n\n  /* --- Document content typography --- */\n  .ProseMirror > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Legacy nile-rich-text-editor typography */\n  .ProseMirror p {\n    margin: 1em 0;\n  }\n\n  .ProseMirror h1,\n  .ProseMirror h2,\n  .ProseMirror h3,\n  .ProseMirror h4,\n  .ProseMirror h5,\n  .ProseMirror h6 {\n    font-weight: bold;\n  }\n\n  .ProseMirror h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n  }\n  .ProseMirror h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n  }\n  .ProseMirror h3 {\n    font-size: 1.17em;\n    margin: 1em 0;\n  }\n  .ProseMirror h4 {\n    font-size: 1em;\n    margin: 1.33em 0;\n  }\n  .ProseMirror h5 {\n    font-size: 0.83em;\n    margin: 1.67em 0;\n  }\n  .ProseMirror h6 {\n    font-size: 0.67em;\n    margin: 2.33em 0;\n  }\n\n  .ProseMirror blockquote {\n    margin: 0.5em 0;\n    padding: 0.25em 0 0.25em 1em;\n    border-left: 3px solid\n      var(\n        --nile-wysiwyg-blockquote-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    color: var(\n      --nile-wysiwyg-blockquote-color,\n      var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))\n    );\n  }\n\n  .ProseMirror ul,\n  .ProseMirror ol {\n    list-style-position: outside;\n    padding-inline-start: 24px;\n  }\n\n  .ProseMirror hr {\n    border: none;\n    border-top: 1px solid\n      var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));\n    margin: 1em 0;\n  }\n\n  /* Legacy: brand color, no underline */\n  .ProseMirror a {\n    color: var(\n      --nile-wysiwyg-link-color,\n      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))\n    );\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .ProseMirror code.nile-wysiwyg__inline-code {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border-radius: 4px;\n    padding: 0.1em 0.35em;\n  }\n\n  /* --- Code blocks --- */\n  .ProseMirror pre.nile-wysiwyg__code-block {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n    border-radius: 6px;\n    padding: 12px 14px;\n    margin: 0.5em 0;\n    overflow-x: auto;\n  }\n\n  /* --- Tables (rules required by prosemirror-tables) --- */\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 0.5em 0;\n  }\n\n  .ProseMirror table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .ProseMirror td,\n  .ProseMirror th {\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-table-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    padding: 6px 8px;\n    min-width: 1em;\n  }\n\n  .ProseMirror th {\n    background: var(\n      --nile-wysiwyg-table-header-bg,\n      var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))\n    );\n    font-weight: 600;\n    text-align: left;\n  }\n\n \n  .ProseMirror td > *,\n  .ProseMirror th > * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: -2px;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n\n  /* --- Layout tables (role=\"presentation\"): borderless output, dashed\n     guides while editing so the structure stays visible. --- */\n  .ProseMirror table[data-layout] td,\n  .ProseMirror table[data-layout] th {\n    border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n    background: transparent;\n    font-weight: inherit;\n    text-align: inherit;\n  }\n\n  /* --- Bookmarks: invisible anchors get a flag marker while editing --- */\n  .ProseMirror a[data-bookmark] {\n    display: inline-block;\n    vertical-align: baseline;\n    cursor: default;\n    text-decoration: none;\n  }\n\n  .ProseMirror a[data-bookmark]::after {\n    content: '⚑';\n    font-size: 12px;\n    line-height: 1;\n    padding: 0 1px;\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: '';\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));\n    pointer-events: none;\n  }\n\n  /* --- Images (ProseMirror's standard inline image node) --- */\n  .ProseMirror img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 4px;\n  }\n\n  /* --- Image resize handles --- */\n  .ProseMirror .nile-wysiwyg__image-resizer {\n    position: relative;\n    display: inline-block;\n    line-height: 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle {\n    display: none;\n    position: absolute;\n    width: 9px;\n    height: 9px;\n    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border: 1.5px solid var(--ng-colors-bg-primary);\n    border-radius: 2px;\n    z-index: 2;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected img {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }\n\n  /* --- Captioned figures --- */\n  .ProseMirror figure.nile-wysiwyg__figure {\n    margin: 0.75em 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure img {\n    width: 100%;\n    display: block;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__figcaption {\n    font-size: 0.85em;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    text-align: center;\n    padding: 4px 8px;\n    line-height: 1.4;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {\n    content: 'Add a caption…';\n    float: left;\n    width: 100%;\n    pointer-events: none;\n    color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n    margin-bottom: -1.4em;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--selected {\n    border-radius: 4px;\n  }\n\n  /* --- Embeds --- */\n  .ProseMirror div.nile-wysiwyg__embed {\n    position: relative;\n    aspect-ratio: 16 / 9;\n    /* Default size; an inline width from drag-resize overrides it, capped by\n       max-width. overflow stays visible so the resize handles aren't clipped\n       (rounding lives on the iframe). */\n    width: min(640px, 100%);\n    max-width: 100%;\n    margin: 0.75em 0;\n    border-radius: 8px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n    border-radius: 8px;\n    /* Editing mode: the first click selects the node instead of hitting the\n       iframe; once selected (or in readonly) the video is interactive. */\n    pointer-events: none;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,\n  :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {\n    pointer-events: auto;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  /* A live resize drag must not lose mousemove to the embedded document. */\n  .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {\n    pointer-events: none !important;\n  }\n\n  /* --- Code highlighting (hljs tokens) ---\n     Each hue routes through an --ng-componentcolors-utility-* token, which the\n     token layer remaps to its lighter 400 step in the dark theme. Hardcoding the\n     one-light palette here left syntax unreadable on the dark code surface. --- */\n  .ProseMirror .hljs-comment,\n  .ProseMirror .hljs-quote {\n    color: var(--ng-componentcolors-utility-gray-500);\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-keyword,\n  .ProseMirror .hljs-selector-tag,\n  .ProseMirror .hljs-formula,\n  .ProseMirror .hljs-doctag {\n    color: var(--ng-componentcolors-utility-purple-600);\n  }\n\n  .ProseMirror .hljs-section,\n  .ProseMirror .hljs-name,\n  .ProseMirror .hljs-selector-id,\n  .ProseMirror .hljs-selector-class,\n  .ProseMirror .hljs-deletion,\n  .ProseMirror .hljs-subst,\n  .ProseMirror .hljs-tag {\n    color: var(--ng-componentcolors-utility-error-600);\n  }\n\n  .ProseMirror .hljs-literal,\n  .ProseMirror .hljs-built_in,\n  .ProseMirror .hljs-bullet {\n    color: var(--ng-componentcolors-utility-blue-600);\n  }\n\n  .ProseMirror .hljs-string,\n  .ProseMirror .hljs-regexp,\n  .ProseMirror .hljs-addition,\n  .ProseMirror .hljs-attribute,\n  .ProseMirror .hljs-meta .hljs-string {\n    color: var(--ng-componentcolors-utility-green-600);\n  }\n\n  .ProseMirror .hljs-attr,\n  .ProseMirror .hljs-variable,\n  .ProseMirror .hljs-template-variable,\n  .ProseMirror .hljs-type,\n  .ProseMirror .hljs-selector-attr,\n  .ProseMirror .hljs-selector-pseudo,\n  .ProseMirror .hljs-number {\n    color: var(--ng-componentcolors-utility-orange-600);\n  }\n\n  .ProseMirror .hljs-symbol,\n  .ProseMirror .hljs-meta,\n  .ProseMirror .hljs-link,\n  .ProseMirror .hljs-operator,\n  .ProseMirror .hljs-title,\n  .ProseMirror .hljs-title.class_,\n  .ProseMirror .hljs-title.function_ {\n    color: var(--ng-componentcolors-utility-indigo-600);\n  }\n\n  .ProseMirror .hljs-emphasis {\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-strong {\n    font-weight: bold;\n  }\n\n  /* --- Checklists --- */\n  .ProseMirror ul.nile-wysiwyg__task-list {\n    list-style: none;\n    padding-inline-start: 4px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {\n    /* Center on the first text line: (1 line box - checkbox height) / 2. */\n    margin: calc((1em * 1.45 - 14px) / 2) 0 0;\n    width: 14px;\n    height: 14px;\n    flex: none;\n    cursor: pointer;\n    accent-color: var(\n      --nile-colors-primary-600,\n      var(--ng-componentcolors-utility-blue-600)\n    );\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* The content's paragraph margins (legacy 1em) push text below the\n     checkbox — strip them at the edges of each item. */\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {\n    margin-bottom: 0;\n  }\n\n  .ProseMirror ul.nile-wysiwyg__task-list > li + li {\n    margin-top: 0.35em;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n    text-decoration: line-through;\n  }\n\n  /* --- Counter footer --- */\n  .nile-wysiwyg__counter {\n    padding: 4px 12px 6px;\n    text-align: right;\n    font-size: 12px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n  }\n\n  .nile-wysiwyg__counter.over {\n    color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));\n    font-weight: 600;\n  }\n\n  /* --- Author <style> block (from HTML source) ---\n     Applied live by StyleBlockView (a hidden <style> host, scoped to the\n     content); the block renders nothing in the editor. */\n  .nile-wysiwyg__style-block {\n    display: none;\n  }\n\n  /* --- Sticky toolbar ---\n     Pins to the top of the scroll container. Note: sticky anchors to the\n     container's PADDING box, so if the scroll container has top padding, a\n     band of content shows above the toolbar — set --nile-wysiwyg-sticky-top\n     (or remove the container's top padding) to compensate. The opaque\n     background makes the pinned bar self-backing so content can never bleed\n     through it. */\n  :host([sticky-toolbar]) nile-wysiwyg-toolbar {\n    position: sticky;\n    top: var(--nile-wysiwyg-sticky-top, 0);\n    z-index: 12;\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  /* --- Mentions & suggestions --- */\n  .ProseMirror span.nile-wysiwyg__mention {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));\n    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));\n    font-weight: 500;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Merge fields --- */\n  .ProseMirror span.nile-wysiwyg__merge-field {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(\n      --nile-wysiwyg-merge-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    color: var(\n      --nile-wysiwyg-merge-color,\n      var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))\n    );\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.9em;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Math --- */\n  .ProseMirror span.nile-wysiwyg__math {\n    display: inline-block;\n    padding: 0 2px;\n    font-family: \"Cambria Math\", \"Latin Modern Math\", serif;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math--block {\n    display: block;\n    text-align: center;\n    margin: 8px 0;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border-radius: 3px;\n  }\n\n  /* Format painter armed: hint the next selection will be painted. */\n  .ProseMirror.nile-wysiwyg--painting {\n    cursor: cell;\n  }\n\n  .ProseMirror .nile-wysiwyg__suggestion {\n    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n    border-radius: 3px;\n  }\n\n  /* --- Find & replace highlights --- */\n  .ProseMirror .nile-wysiwyg__find-match {\n    background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));\n    border-radius: 2px;\n  }\n\n  .ProseMirror .nile-wysiwyg__find-active {\n    background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));\n  }\n\n  /* --- Upload placeholder --- */\n  .nile-wysiwyg__upload-placeholder {\n    display: inline-block;\n    padding: 6px 12px;\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    border-radius: 6px;\n    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n    font-size: 0.85em;\n  }\n\n  /* --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.\n     Serialized output carries data-list-style=\"multilevel\"; consumers\n     rendering it outside the editor need these same counter rules. --- */\n  .ProseMirror ol[data-list-style='multilevel'],\n  .ProseMirror ol[data-list-style='multilevel'] ol {\n    list-style: none;\n    counter-reset: nile-multilevel;\n  }\n\n  .ProseMirror ol[data-list-style='multilevel'] > li,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li {\n    counter-increment: nile-multilevel;\n  }\n\n  /* The number sits inside the item's first paragraph so it shares a line. */\n  .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {\n    content: counters(nile-multilevel, '.') '. ';\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* --- Show blocks: dashed outlines + tag labels while editing --- */\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre,\n  .nile-wysiwyg--show-blocks .ProseMirror figure,\n  .nile-wysiwyg--show-blocks .ProseMirror ul,\n  .nile-wysiwyg--show-blocks .ProseMirror ol,\n  .nile-wysiwyg--show-blocks .ProseMirror li,\n  .nile-wysiwyg--show-blocks .ProseMirror table {\n    outline: 1px dashed\n      var(\n        --nile-wysiwyg-block-outline,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n      );\n    outline-offset: -1px;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre {\n    position: relative;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0 3px;\n    font-family: system-ui, sans-serif;\n    font-size: 9px;\n    font-weight: 600;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.5px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    border-radius: 0 0 4px 0;\n    pointer-events: none;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }\n`;\n"]}
+{"version":3,"file":"nile-wysiwyg-editor.css.js","sourceRoot":"","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAw2BxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    font-family: var(\n      --nile-wysiwyg-font-family,\n      var(\n        --nile-font-family-sans-serif,\n        var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n      )\n    );\n  }\n\n  .nile-wysiwyg {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-border-color,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))\n      );\n    border-radius: var(\n      --nile-wysiwyg-radius,\n      var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))\n    );\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n    box-sizing: border-box;\n  }\n\n  /* --- Fullscreen (distraction-free) mode --- */\n  :host([fullscreen]) {\n    position: fixed;\n    inset: 0;\n    z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  :host([fullscreen]) .nile-wysiwyg {\n    height: 100%;\n    border: none;\n    border-radius: 0;\n  }\n\n  :host([fullscreen]) .nile-wysiwyg__surface {\n    max-height: none;\n  }\n\n  :host([disabled]) .nile-wysiwyg {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    background: var(\n      --nile-wysiwyg-disabled-bg,\n      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))\n    );\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .ProseMirror {\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  .nile-wysiwyg__surface {\n    flex: 1;\n    overflow-y: auto;\n    max-height: var(--nile-wysiwyg-max-height, none);\n  }\n\n  /* --- ProseMirror base rules (inlined from prosemirror-view/style) --- */\n  .ProseMirror {\n    position: relative;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n    white-space: break-spaces;\n    -webkit-font-variant-ligatures: none;\n    font-variant-ligatures: none;\n    font-feature-settings: 'liga' 0;\n    outline: none;\n    padding: var(--nile-wysiwyg-content-padding, 12px);\n    min-height: var(--nile-wysiwyg-min-height, 160px);\n    font-size: var(--nile-wysiwyg-font-size, inherit);\n    line-height: var(--nile-wysiwyg-line-height, inherit);\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    color: var(\n      --nile-wysiwyg-color,\n      var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    );\n    box-sizing: border-box;\n    border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))\n      var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));\n  }\n\n  .ProseMirror pre {\n    white-space: pre-wrap;\n  }\n\n  .ProseMirror li {\n    position: relative;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection {\n    caret-color: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: 2px solid\n      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));\n  }\n\n  /* Gap cursor (inlined from prosemirror-gapcursor/style) */\n  .ProseMirror-gapcursor {\n    display: none;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .ProseMirror-gapcursor:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: -2px;\n    width: 20px;\n    border-top: 1px solid currentColor;\n    animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;\n  }\n\n  @keyframes nile-wysiwyg-cursor-blink {\n    to {\n      visibility: hidden;\n    }\n  }\n\n  .ProseMirror-focused .ProseMirror-gapcursor {\n    display: block;\n  }\n\n  /* --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- */\n  .nile-wysiwyg__empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n    user-select: none;\n    opacity: 0.7;\n    color: var(\n      --nile-wysiwyg-placeholder-color,\n      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))\n    );\n  }\n\n  /* --- Document content typography --- */\n  .ProseMirror > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Legacy nile-rich-text-editor typography */\n  .ProseMirror p {\n    margin: 1em 0;\n  }\n\n  .ProseMirror h1,\n  .ProseMirror h2,\n  .ProseMirror h3,\n  .ProseMirror h4,\n  .ProseMirror h5,\n  .ProseMirror h6 {\n    font-weight: bold;\n  }\n\n  .ProseMirror h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n  }\n  .ProseMirror h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n  }\n  .ProseMirror h3 {\n    font-size: 1.17em;\n    margin: 1em 0;\n  }\n  .ProseMirror h4 {\n    font-size: 1em;\n    margin: 1.33em 0;\n  }\n  .ProseMirror h5 {\n    font-size: 0.83em;\n    margin: 1.67em 0;\n  }\n  .ProseMirror h6 {\n    font-size: 0.67em;\n    margin: 2.33em 0;\n  }\n\n  .ProseMirror blockquote {\n    margin: 0.5em 0;\n    padding: 0.25em 0 0.25em 1em;\n    border-left: 3px solid\n      var(\n        --nile-wysiwyg-blockquote-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    color: var(\n      --nile-wysiwyg-blockquote-color,\n      var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))\n    );\n  }\n\n  .ProseMirror ul,\n  .ProseMirror ol {\n    list-style-position: outside;\n    padding-inline-start: 24px;\n  }\n\n  .ProseMirror hr {\n    border: none;\n    border-top: 1px solid\n      var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));\n    margin: 1em 0;\n  }\n\n  /* Legacy: brand color, no underline */\n  .ProseMirror a {\n    color: var(\n      --nile-wysiwyg-link-color,\n      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))\n    );\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .ProseMirror code.nile-wysiwyg__inline-code {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border-radius: 4px;\n    padding: 0.1em 0.35em;\n  }\n\n  /* --- Code blocks --- */\n  .ProseMirror pre.nile-wysiwyg__code-block {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n    border-radius: 6px;\n    padding: 12px 14px;\n    margin: 0.5em 0;\n    overflow-x: auto;\n  }\n\n  /* --- Tables (rules required by prosemirror-tables) --- */\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 0.5em 0;\n  }\n\n  .ProseMirror table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .ProseMirror td,\n  .ProseMirror th {\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-table-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    padding: 6px 8px;\n    min-width: 1em;\n  }\n\n  .ProseMirror th {\n    background: var(\n      --nile-wysiwyg-table-header-bg,\n      var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))\n    );\n    font-weight: 600;\n    text-align: left;\n  }\n\n \n  .ProseMirror td > *,\n  .ProseMirror th > * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: -2px;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n\n  /* --- Email fidelity: an unsized layout table (e.g. a button) fits its\n     content, as it does in mail clients, instead of the 100% default. --- */\n  :host([email-fidelity]) .ProseMirror table[data-autowidth] {\n    width: auto;\n  }\n\n  /* Column resizing sets an inline min-width of 100px per column; on a nested\n     layout table (e.g. a row of social icons) that overflows the cell holding it. */\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] {\n    min-width: 0 !important;\n  }\n\n  /* Email fidelity: the wrapper is editor-only (it holds the resize handles), so\n     its margin would add space the saved email doesn't have. */\n  :host([email-fidelity]) .ProseMirror .tableWrapper {\n    margin: 0;\n  }\n\n  /* Email fidelity: draw unstyled layout-table cells like a mail client (no padding, centred, no header fill). */\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > td,\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {\n    background: none;\n  }\n\n  /* --- Layout tables (role=\"presentation\"): borderless output, dashed\n     guides while editing so the structure stays visible. --- */\n  .ProseMirror table[data-layout] td,\n  .ProseMirror table[data-layout] th {\n    /* Draw the editing guide with an inset outline, not a border/background, so\n       author-set cell borders and backgrounds (email fidelity) are preserved. */\n    outline: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n    outline-offset: -1px;\n    font-weight: inherit;\n    text-align: inherit;\n  }\n\n  /* --- Bookmarks: invisible anchors get a flag marker while editing --- */\n  .ProseMirror a[data-bookmark] {\n    display: inline-block;\n    vertical-align: baseline;\n    cursor: default;\n    text-decoration: none;\n  }\n\n  .ProseMirror a[data-bookmark]::after {\n    content: '⚑';\n    font-size: 12px;\n    line-height: 1;\n    padding: 0 1px;\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: '';\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));\n    pointer-events: none;\n  }\n\n  /* --- Images (ProseMirror's standard inline image node) --- */\n  .ProseMirror img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 4px;\n  }\n\n  /* --- Image resize handles --- */\n  .ProseMirror .nile-wysiwyg__image-resizer {\n    position: relative;\n    display: inline-block;\n    line-height: 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle {\n    display: none;\n    position: absolute;\n    width: 9px;\n    height: 9px;\n    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border: 1.5px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: 2px;\n    z-index: 2;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected img {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }\n\n  /* --- Captioned figures --- */\n  .ProseMirror figure.nile-wysiwyg__figure {\n    margin: 0.75em 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure img {\n    width: 100%;\n    display: block;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__figcaption {\n    font-size: 0.85em;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    text-align: center;\n    padding: 4px 8px;\n    line-height: 1.4;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {\n    content: 'Add a caption…';\n    float: left;\n    width: 100%;\n    pointer-events: none;\n    color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n    margin-bottom: -1.4em;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--selected {\n    border-radius: 4px;\n  }\n\n  /* --- Embeds --- */\n  .ProseMirror div.nile-wysiwyg__embed {\n    position: relative;\n    aspect-ratio: 16 / 9;\n    /* Default size; an inline width from drag-resize overrides it, capped by\n       max-width. overflow stays visible so the resize handles aren't clipped\n       (rounding lives on the iframe). */\n    width: min(640px, 100%);\n    max-width: 100%;\n    margin: 0.75em 0;\n    border-radius: 8px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n    border-radius: 8px;\n    /* Editing mode: the first click selects the node instead of hitting the\n       iframe; once selected (or in readonly) the video is interactive. */\n    pointer-events: none;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,\n  :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {\n    pointer-events: auto;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  /* A live resize drag must not lose mousemove to the embedded document. */\n  .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {\n    pointer-events: none !important;\n  }\n\n  /* --- Code highlighting (hljs tokens) ---\n     Each hue routes through an --ng-componentcolors-utility-* token, which the\n     token layer remaps to its lighter 400 step in the dark theme. Hardcoding the\n     one-light palette here left syntax unreadable on the dark code surface. --- */\n  .ProseMirror .hljs-comment,\n  .ProseMirror .hljs-quote {\n    color: var(--ng-componentcolors-utility-gray-500);\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-keyword,\n  .ProseMirror .hljs-selector-tag,\n  .ProseMirror .hljs-formula,\n  .ProseMirror .hljs-doctag {\n    color: var(--ng-componentcolors-utility-purple-600);\n  }\n\n  .ProseMirror .hljs-section,\n  .ProseMirror .hljs-name,\n  .ProseMirror .hljs-selector-id,\n  .ProseMirror .hljs-selector-class,\n  .ProseMirror .hljs-deletion,\n  .ProseMirror .hljs-subst,\n  .ProseMirror .hljs-tag {\n    color: var(--ng-componentcolors-utility-error-600);\n  }\n\n  .ProseMirror .hljs-literal,\n  .ProseMirror .hljs-built_in,\n  .ProseMirror .hljs-bullet {\n    color: var(--ng-componentcolors-utility-blue-600);\n  }\n\n  .ProseMirror .hljs-string,\n  .ProseMirror .hljs-regexp,\n  .ProseMirror .hljs-addition,\n  .ProseMirror .hljs-attribute,\n  .ProseMirror .hljs-meta .hljs-string {\n    color: var(--ng-componentcolors-utility-green-600);\n  }\n\n  .ProseMirror .hljs-attr,\n  .ProseMirror .hljs-variable,\n  .ProseMirror .hljs-template-variable,\n  .ProseMirror .hljs-type,\n  .ProseMirror .hljs-selector-attr,\n  .ProseMirror .hljs-selector-pseudo,\n  .ProseMirror .hljs-number {\n    color: var(--ng-componentcolors-utility-orange-600);\n  }\n\n  .ProseMirror .hljs-symbol,\n  .ProseMirror .hljs-meta,\n  .ProseMirror .hljs-link,\n  .ProseMirror .hljs-operator,\n  .ProseMirror .hljs-title,\n  .ProseMirror .hljs-title.class_,\n  .ProseMirror .hljs-title.function_ {\n    color: var(--ng-componentcolors-utility-indigo-600);\n  }\n\n  .ProseMirror .hljs-emphasis {\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-strong {\n    font-weight: bold;\n  }\n\n  /* --- Checklists --- */\n  .ProseMirror ul.nile-wysiwyg__task-list {\n    list-style: none;\n    padding-inline-start: 4px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {\n    /* Center on the first text line: (1 line box - checkbox height) / 2. */\n    margin: calc((1em * 1.45 - 14px) / 2) 0 0;\n    width: 14px;\n    height: 14px;\n    flex: none;\n    cursor: pointer;\n    accent-color: var(\n      --nile-colors-primary-600,\n      var(--ng-componentcolors-utility-blue-600)\n    );\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* The content's paragraph margins (legacy 1em) push text below the\n     checkbox — strip them at the edges of each item. */\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {\n    margin-bottom: 0;\n  }\n\n  .ProseMirror ul.nile-wysiwyg__task-list > li + li {\n    margin-top: 0.35em;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n    text-decoration: line-through;\n  }\n\n  /* --- Counter footer --- */\n  .nile-wysiwyg__counter {\n    padding: 4px 12px 6px;\n    text-align: right;\n    font-size: 12px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n  }\n\n  .nile-wysiwyg__counter.over {\n    color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));\n    font-weight: 600;\n  }\n\n  /* --- Author <style> block (from HTML source) ---\n     Applied live by StyleBlockView (a hidden <style> host, scoped to the\n     content); the block renders nothing in the editor. */\n  .nile-wysiwyg__style-block {\n    display: none;\n  }\n\n  /* --- Sticky toolbar ---\n     Pins to the top of the scroll container. Note: sticky anchors to the\n     container's PADDING box, so if the scroll container has top padding, a\n     band of content shows above the toolbar — set --nile-wysiwyg-sticky-top\n     (or remove the container's top padding) to compensate. The opaque\n     background makes the pinned bar self-backing so content can never bleed\n     through it. */\n  :host([sticky-toolbar]) nile-wysiwyg-toolbar {\n    position: sticky;\n    top: var(--nile-wysiwyg-sticky-top, 0);\n    z-index: 12;\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  /* --- Mentions & suggestions --- */\n  .ProseMirror span.nile-wysiwyg__mention {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));\n    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));\n    font-weight: 500;\n    /* Short mentions stay on one line; a long one (e.g. a deep field path) wraps\n       inside its container instead of overflowing a table cell or the editor. */\n    max-width: 100%;\n    overflow-wrap: anywhere;\n  }\n\n  /* The chip's 500 is only a default — bold, headings and an explicit\n     font-weight from the content win, so the chip looks the way it exports. */\n  .ProseMirror :is(strong, b, h1, h2, h3, h4, h5, h6, th, [style*='font-weight'])\n    span.nile-wysiwyg__mention {\n    font-weight: inherit;\n  }\n\n  .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Merge fields --- */\n  .ProseMirror span.nile-wysiwyg__merge-field {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(\n      --nile-wysiwyg-merge-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    color: var(\n      --nile-wysiwyg-merge-color,\n      var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))\n    );\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.9em;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Math --- */\n  .ProseMirror span.nile-wysiwyg__math {\n    display: inline-block;\n    padding: 0 2px;\n    font-family: \"Cambria Math\", \"Latin Modern Math\", serif;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math--block {\n    display: block;\n    text-align: center;\n    margin: 8px 0;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border-radius: 3px;\n  }\n\n  /* Format painter armed: hint the next selection will be painted. */\n  .ProseMirror.nile-wysiwyg--painting {\n    cursor: cell;\n  }\n\n  .ProseMirror .nile-wysiwyg__suggestion {\n    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n    border-radius: 3px;\n  }\n\n  /* --- Find & replace highlights --- */\n  .ProseMirror .nile-wysiwyg__find-match {\n    background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));\n    border-radius: 2px;\n  }\n\n  .ProseMirror .nile-wysiwyg__find-active {\n    background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));\n  }\n\n  /* --- Upload placeholder --- */\n  .nile-wysiwyg__upload-placeholder {\n    display: inline-block;\n    padding: 6px 12px;\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    border-radius: 6px;\n    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n    font-size: 0.85em;\n  }\n\n  /* --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.\n     Serialized output carries data-list-style=\"multilevel\"; consumers\n     rendering it outside the editor need these same counter rules. --- */\n  .ProseMirror ol[data-list-style='multilevel'],\n  .ProseMirror ol[data-list-style='multilevel'] ol {\n    list-style: none;\n    counter-reset: nile-multilevel;\n  }\n\n  .ProseMirror ol[data-list-style='multilevel'] > li,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li {\n    counter-increment: nile-multilevel;\n  }\n\n  /* The number sits inside the item's first paragraph so it shares a line. */\n  .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {\n    content: counters(nile-multilevel, '.') '. ';\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* --- Show blocks: dashed outlines + tag labels while editing --- */\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre,\n  .nile-wysiwyg--show-blocks .ProseMirror figure,\n  .nile-wysiwyg--show-blocks .ProseMirror ul,\n  .nile-wysiwyg--show-blocks .ProseMirror ol,\n  .nile-wysiwyg--show-blocks .ProseMirror li,\n  .nile-wysiwyg--show-blocks .ProseMirror table {\n    outline: 1px dashed\n      var(\n        --nile-wysiwyg-block-outline,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n      );\n    outline-offset: -1px;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre {\n    position: relative;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0 3px;\n    font-family: system-ui, sans-serif;\n    font-size: 9px;\n    font-weight: 600;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.5px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    border-radius: 0 0 4px 0;\n    pointer-events: none;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }\n`;\n"]}

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.d.ts

@@ -114,6 +114,8 @@ export declare class NileWysiwygEditor extends NileElement {
     noSlashCommands: boolean;
     /** Disables the ":" emoji picker. */
     noEmoji: boolean;
+    /** Hides the floating table toolbar; with `email-fidelity` it also hides in layout tables. */
+    noTableMenu: boolean;
     /** Maximum character count; further input is rejected. 0 = unlimited. */
     maxLength: number;
     /** Always show the word/character counter footer (implied by maxlength). */
@@ -138,6 +140,10 @@ export declare class NileWysiwygEditor extends NileElement {
     pasteAsPlainText: boolean;
     /** Disables Markdown detection on plain-text pastes. */
     noMarkdownPaste: boolean;
+    /** Opt-in mode for table-based email HTML; off by default (output unchanged). */
+    emailFidelity: boolean;
+    /** Extra inline CSS to keep per tag under `email-fidelity`: `{ td: ['letter-spacing'] }` or `"td: letter-spacing"`. */
+    allowedStyles: Record<string, string[]>;
     /** Disables typography autocorrect (smart quotes, dashes, (c) → ©). */
     noTextTransform: boolean;
     /** Expands the editor to fill the viewport. Esc exits. */
@@ -172,6 +178,9 @@ export declare class NileWysiwygEditor extends NileElement {
     private mathPanelEl;
     private markdownPanelEl;
     private view?;
+    /** Validated `allowedStyles`, recomputed once per config change (so the
+     * drop warnings fire once, not on every paste). */
+    private normalizedAllowedStyles;
     private mentionMatch;
     private slashMatch;
     private emojiMatch;
@@ -183,6 +192,9 @@ export declare class NileWysiwygEditor extends NileElement {
     private internals?;
     private defaultValue;
     private syncingValue;
+    /** Last raw HTML given to setContent; a re-parse reads it while the document is unedited. */
+    private lastSourceHtml;
+    private lastSerializedValue;
     private changeTimer?;
     private pendingChange;
     /** Body overflow value before fullscreen locked it; null = not locked. */
@@ -214,6 +226,17 @@ export declare class NileWysiwygEditor extends NileElement {
      * computeToolbarState can't know about (e.g. the paste-as-plain-text toggle).
      */
     private snapshotToolbar;
+    /** HTML to re-parse when fidelity / the allowlist changes: the raw source when
+     * the document is still unedited (so a newly-allowed property can be recovered),
+     * otherwise the current serialized value (so user edits are kept). */
+    private reparseSource;
+    /** The saved HTML; with email-fidelity it carries the editor's table rendering. */
+    private serializeDoc;
+    private renderProbe;
+    /** Theme-resolved table border and header colours; null where the theme draws none. */
+    private emailRenderDefaults;
+    /** Email-fidelity options threaded to every sanitize/parse call. */
+    private emailOptions;
     private mountView;
     /**
      * True while a drag-selection is in progress with the format painter armed.