@aquera/nile-elements 2.0.16 → 2.0.17

package/src/nile-wysiwyg-editor/nile-wysiwyg-editor-email-fidelity.test.ts

@@ -0,0 +1,357 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit';
+import '../index';
+import { TextSelection } from 'prosemirror-state';
+import type { NileWysiwygEditor } from './nile-wysiwyg-editor';
+
+async function editorFixture(template = html`<nile-wysiwyg-editor></nile-wysiwyg-editor>`) {
+  const el = await fixture<NileWysiwygEditor>(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: NileWysiwygEditor, data: Record<string, string>) {
+  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<HTMLElement>('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: NileWysiwygEditor, text: string) {
+  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: NileWysiwygEditor): boolean {
+  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: string) => new DOMParser().parseFromString(out, 'text/html').body;
+
+  async function load(value: string, 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] as HTMLElement).style.width).to.equal('120px');
+    expect((tds[1] as HTMLElement).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')] as HTMLElement[];
+    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') as HTMLElement;
+    expect(getComputedStyle(wrapper).marginTop).to.equal('0px');
+  });
+});

package/src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts

@@ -332,12 +332,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;
   }
@@ -391,7 +422,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;
   }
@@ -662,7 +693,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 {