@aquera/nile-elements 2.0.16 → 2.0.18

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

@@ -361,6 +361,111 @@ describe('nile-wysiwyg-editor', () => {
     expect(el.getHTML()).to.equal('<p><strong>bold</strong></p>');
   });
 
+  /** Types `text` one character at a time through handleTextInput, like a user. */
+  function typeChars(el: NileWysiwygEditor, text: string) {
+    const view = el.pmView!;
+    for (const ch of text) {
+      const { from, to } = view.state.selection;
+      const handled = view.someProp('handleTextInput', f =>
+        f(view, from, to, ch, () => view.state.tr.insertText(ch, from, to))
+      );
+      if (!handled) view.dispatch(view.state.tr.insertText(ch, from, to));
+    }
+  }
+
+  function selectText(el: NileWysiwygEditor, text: string) {
+    const view = el.pmView!;
+    let from = -1;
+    view.state.doc.descendants((node, pos) => {
+      if (from === -1 && node.isText && node.text!.includes(text)) {
+        from = pos + node.text!.indexOf(text);
+      }
+    });
+    view.dispatch(
+      view.state.tr.setSelection(TextSelection.create(view.state.doc, from, from + text.length))
+    );
+  }
+
+  it('typing over a fully linked selection keeps the link', async () => {
+    const el = await editorFixture();
+    el.value = '<p>Before <a href="https://x.test">Get discount</a> after</p>';
+    await el.updateComplete;
+    selectText(el, 'discount');
+    typeChars(el, 'deal');
+    expect(el.getHTML()).to.equal('<p>Before <a href="https://x.test">Get deal</a> after</p>');
+  });
+
+  it('keeps the link and inner marks when retyping a button label', async () => {
+    const el = await editorFixture();
+    el.value =
+      '<p><a href="#"><strong><span style="color: rgb(255, 255, 255);">Get discount</span></strong></a></p>';
+    await el.updateComplete;
+    selectText(el, 'Get discount');
+    typeChars(el, 'Shop');
+    expect(el.getHTML()).to.equal(
+      '<p><a href="#"><strong><span style="color: rgb(255, 255, 255);">Shop</span></strong></a></p>'
+    );
+  });
+
+  it('does not extend a link when typing after it without retyping', async () => {
+    const el = await editorFixture();
+    el.value = '<p><a href="https://x.test">link</a></p>';
+    await el.updateComplete;
+    const view = el.pmView!;
+    const end = view.state.doc.content.size - 1;
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, end)));
+    typeChars(el, 'X');
+    expect(el.getHTML()).to.equal('<p><a href="https://x.test">link</a>X</p>');
+  });
+
+  it('ends the retype run when the caret moves', async () => {
+    const el = await editorFixture();
+    el.value = '<p><a href="https://x.test">old</a> tail</p>';
+    await el.updateComplete;
+    selectText(el, 'old');
+    typeChars(el, 'new');
+    selectText(el, 'tail');
+    typeChars(el, 'end');
+    expect(el.getHTML()).to.equal('<p><a href="https://x.test">new</a> end</p>');
+  });
+
+  it('does not keep a link when the selection is only partly linked', async () => {
+    const el = await editorFixture();
+    el.value = '<p>pre <a href="https://x.test">link</a></p>';
+    await el.updateComplete;
+    selectText(el, 'pre ');
+    // Extend the selection over the link too: start is outside the link.
+    const view = el.pmView!;
+    const { from } = view.state.selection;
+    view.dispatch(
+      view.state.tr.setSelection(TextSelection.create(view.state.doc, from, view.state.doc.content.size - 1))
+    );
+    typeChars(el, 'Z');
+    expect(el.getHTML()).to.equal('<p>Z</p>');
+  });
+
+  for (const seq of ['---', '***', '___']) {
+    it(`turns "${seq}" in an empty paragraph into a horizontal rule`, async () => {
+      const el = await editorFixture();
+      el.value = '<p></p>';
+      await el.updateComplete;
+      const view = el.pmView!;
+      view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 1)));
+      typeChars(el, `${seq}next`);
+      expect(el.getHTML()).to.equal('<hr><p>next</p>');
+    });
+  }
+
+  it('leaves "---" alone when the paragraph has other text', async () => {
+    const el = await editorFixture();
+    el.value = '<p>a</p>';
+    await el.updateComplete;
+    const view = el.pmView!;
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 2)));
+    typeChars(el, '---');
+    expect(el.getHTML()).to.equal('<p>a---</p>');
+  });
+
   it('finds and replaces through the public API', async () => {
     const el = await editorFixture();
     el.value = '<p>red fox, red barn</p>';
@@ -750,4 +855,157 @@ describe('nile-wysiwyg-editor', () => {
       el.autosaveInterval = 0;
     });
   });
+
+  describe('allowedStyles (section F)', () => {
+    it('F1. parses the allowed-styles attribute into a Record', async () => {
+      const el = await editorFixture(
+        html`<nile-wysiwyg-editor
+          allowed-styles="td: letter-spacing; p: letter-spacing"
+        ></nile-wysiwyg-editor>`
+      );
+      expect(el.allowedStyles).to.deep.equal({
+        td: ['letter-spacing'],
+        p: ['letter-spacing'],
+      });
+    });
+
+    it('F2. re-parses the current value when allowedStyles is set', async () => {
+      const el = await editorFixture(
+        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
+      );
+      el.value = '<p style="letter-spacing:0.5px">hi</p>';
+      await el.updateComplete;
+      // Not allowed yet → extension prop not kept.
+      expect(el.getHTML()).to.not.include('letter-spacing');
+      el.allowedStyles = { p: ['letter-spacing'] };
+      await el.updateComplete;
+      expect(el.getHTML()).to.include('letter-spacing');
+    });
+
+    it('F3. warns once per bad entry and never throws', async () => {
+      const el = await editorFixture(
+        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
+      );
+      const warn = console.warn;
+      let count = 0;
+      console.warn = () => {
+        count += 1;
+      };
+      try {
+        el.allowedStyles = { td: ['position'], foo: ['x'] };
+        await el.updateComplete;
+      } finally {
+        console.warn = warn;
+      }
+      expect(count).to.be.greaterThan(0);
+    });
+
+    it('F4. the allowed-styles attribute is not reflected', async () => {
+      const el = await editorFixture(
+        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
+      );
+      el.allowedStyles = { td: ['letter-spacing'] };
+      await el.updateComplete;
+      expect(el.getAttribute('allowed-styles')).to.equal(null);
+    });
+  });
+
+  describe('email-fidelity live table view', () => {
+    it('applies every declaration of the table text style to the live table', async () => {
+      const el = await editorFixture(
+        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
+      );
+      el.value =
+        '<table role="presentation" style="font-family: Verdana, sans-serif; color: #112233; font-size: 18px"><tr><td><p>x</p></td></tr></table>';
+      await el.updateComplete;
+      const table = el.shadowRoot!.querySelector('.ProseMirror table') as HTMLTableElement;
+      expect(table.style.fontFamily).to.include('Verdana');
+      expect(table.style.color).to.equal('rgb(17, 34, 51)');
+      expect(table.style.fontSize).to.equal('18px');
+    });
+
+    it('lifts the column-resize min-width off nested layout tables', async () => {
+      const el = await editorFixture(
+        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
+      );
+      el.value =
+        '<table role="presentation" style="width: 100%"><tr><td><table role="presentation" style="width: 100%"><tr><td><p>a</p></td><td><p>b</p></td><td><p>c</p></td></tr></table></td></tr></table>';
+      await el.updateComplete;
+      const tables = el.shadowRoot!.querySelectorAll('.ProseMirror table');
+      const inner = tables[1] as HTMLTableElement;
+      expect(inner.hasAttribute('data-layout-table')).to.equal(true);
+      expect(getComputedStyle(inner).minWidth).to.equal('0px');
+    });
+  });
+
+  describe('long mention names', () => {
+    const LONG = [
+      'source.JobAssignmentAdditionalJobDetailsJobFunction',
+      'source.JobAssignmentAdditionalJobDetailsJobFunctionCode',
+      'source.JobAssignmentAdditionalJobDetailsJobFunctionEffectiveStartDate',
+    ];
+
+    it('shows long suggestions in full: wrapped, no sideways scroll, full name as a tooltip', async () => {
+      const el = await editorFixture();
+      el.mentions = { $: LONG.map(key => ({ key, label: key })) };
+      const view = el.pmView!;
+      view.dispatch(view.state.tr.insertText('$source.Job', 1));
+      await el.updateComplete;
+      const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
+      await list.updateComplete;
+      expect(list.open).to.equal(true);
+      const box = list.shadowRoot!.querySelector('.list') as HTMLElement;
+      expect(box.scrollWidth).to.be.at.most(box.clientWidth);
+      const labels = [...list.shadowRoot!.querySelectorAll('.item .label')] as HTMLElement[];
+      expect(labels.map(l => l.textContent)).to.deep.equal(LONG);
+      expect(labels.map(l => l.title)).to.deep.equal(LONG);
+      for (const label of labels) expect(label.scrollWidth).to.be.at.most(label.clientWidth + 1);
+    });
+
+    it('wraps a long mention chip inside a narrow table cell', async () => {
+      const el = await editorFixture(
+        html`<nile-wysiwyg-editor email-fidelity style="width: 600px"></nile-wysiwyg-editor>`
+      );
+      const key =
+        'source.ManagerOfManagerSecondLevelSupervisorOrganizationalAssignmentBusinessEmailElectronicAddressPrimary';
+      el.value = `<table role="presentation" style="width: 100%"><tr><td style="width: 50%"><p>Label</p></td><td style="width: 50%"><p><span class="nile-wysiwyg__mention" data-mention-trigger="$" data-mention-key="${key}" data-mention-label="${key}">$${key}</span></p></td></tr></table>`;
+      await el.updateComplete;
+      const chip = el.shadowRoot!.querySelector('.ProseMirror .nile-wysiwyg__mention') as HTMLElement;
+      const cell = chip.closest('td')!;
+      expect(chip.getBoundingClientRect().right).to.be.at.most(cell.getBoundingClientRect().right + 1);
+      expect(chip.getBoundingClientRect().height).to.be.greaterThan(30);
+    });
+
+    it('keeps a short mention chip on one line', async () => {
+      const el = await editorFixture();
+      el.value =
+        '<p><span class="nile-wysiwyg__mention" data-mention-trigger="$" data-mention-key="source.FirstName" data-mention-label="source.FirstName">$source.FirstName</span></p>';
+      await el.updateComplete;
+      const chip = el.shadowRoot!.querySelector('.ProseMirror .nile-wysiwyg__mention') as HTMLElement;
+      const lineHeight = parseFloat(getComputedStyle(chip).lineHeight) || 24;
+      expect(chip.getBoundingClientRect().height).to.be.below(lineHeight * 1.6);
+    });
+  });
+
+  describe('mention chip weight', () => {
+    const chip = (key: string) =>
+      `<span class="nile-wysiwyg__mention" data-mention-trigger="$" data-mention-key="${key}" data-mention-label="${key}">$${key}</span>`;
+    const weightOf = (el: NileWysiwygEditor, key: string) =>
+      getComputedStyle(
+        el.shadowRoot!.querySelector(`.ProseMirror [data-mention-key="${key}"]`)!
+      ).fontWeight;
+
+    it('keeps its default weight in plain text but follows bold, headings and explicit weights', async () => {
+      const el = await editorFixture(html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`);
+      el.value =
+        `<p>Dear <strong>${chip('first')}</strong>, ${chip('plain')}</p>` +
+        `<h2>${chip('heading')}</h2>` +
+        `<table><tr><td style="font-weight: normal">${chip('normalCell')}</td></tr></table>`;
+      await el.updateComplete;
+      expect(weightOf(el, 'plain')).to.equal('500');
+      expect(weightOf(el, 'first')).to.equal('700');
+      expect(Number(weightOf(el, 'heading'))).to.be.at.least(600);
+      expect(weightOf(el, 'normalCell')).to.equal('400');
+    });
+  });
 });

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

@@ -20,6 +20,7 @@ import {
   jsonToDoc,
   isDocEmpty,
   sanitizeHtml,
+  relocateEmailContainers,
   getCommand,
   getMarkRange,
   flattenToSingleParagraph,
@@ -47,7 +48,11 @@ import {
   clearFindTr,
   replaceActiveTr,
   replaceAllTr,
+  normalizeEmailAllowedStyles,
+  parseAllowedStylesAttr,
 } from './engine';
+import type { NormalizedAllowedStyles } from './engine';
+import type { EmailRenderDefaults } from './engine/email-render';
 import type { ToolbarState } from './engine/selection-state';
 import type { CommandAttrs, CommandName } from './engine/commands';
 import { selectedImageInfo } from './engine/commands';
@@ -274,6 +279,9 @@ export class NileWysiwygEditor extends NileElement {
   /** Disables the ":" emoji picker. */
   @property({ type: Boolean, attribute: 'no-emoji' }) noEmoji = false;
 
+  /** Hides the floating table toolbar; with `email-fidelity` it also hides in layout tables. */
+  @property({ type: Boolean, attribute: 'no-table-menu' }) noTableMenu = false;
+
   /** Maximum character count; further input is rejected. 0 = unlimited. */
   @property({ type: Number, attribute: 'maxlength' }) maxLength = 0;
 
@@ -365,6 +373,20 @@ export class NileWysiwygEditor extends NileElement {
   @property({ type: Boolean, attribute: 'no-markdown-paste' })
   noMarkdownPaste = false;
 
+  /** Opt-in mode for table-based email HTML; off by default (output unchanged). */
+  @property({ type: Boolean, attribute: 'email-fidelity', reflect: true })
+  emailFidelity = false;
+
+  /** Extra inline CSS to keep per tag under `email-fidelity`: `{ td: ['letter-spacing'] }` or `"td: letter-spacing"`. */
+  @property({
+    attribute: 'allowed-styles',
+    converter: {
+      fromAttribute: (value: string | null): Record<string, string[]> =>
+        parseAllowedStylesAttr(value ?? ''),
+    },
+  })
+  allowedStyles: Record<string, string[]> = {};
+
   /** Disables typography autocorrect (smart quotes, dashes, (c) → ©). */
   @property({ type: Boolean, attribute: 'no-text-transform' })
   noTextTransform = false;
@@ -431,6 +453,10 @@ export class NileWysiwygEditor extends NileElement {
 
   private view?: EditorView;
 
+  /** Validated `allowedStyles`, recomputed once per config change (so the
+   * drop warnings fire once, not on every paste). */
+  private normalizedAllowedStyles: NormalizedAllowedStyles = new Map();
+
   private mentionMatch: SuggestionMatch | null = null;
 
   private slashMatch: SuggestionMatch | null = null;
@@ -453,6 +479,11 @@ export class NileWysiwygEditor extends NileElement {
 
   private syncingValue = false;
 
+  /** Last raw HTML given to setContent; a re-parse reads it while the document is unedited. */
+  private lastSourceHtml = '';
+
+  private lastSerializedValue = '';
+
   private changeTimer?: ReturnType<typeof setTimeout>;
 
   private pendingChange = false;
@@ -590,10 +621,16 @@ export class NileWysiwygEditor extends NileElement {
   }
 
   protected updated(changed: PropertyValues): void {
-    if (changed.has('value') && this.view && !this.syncingValue) {
-      const current = docToHtml(this.view.state.doc);
-      if (current !== this.value) this.setContent(this.value);
+    // Normalize the allowlist first; a value change is external only if it differs from the serialized doc.
+    if (changed.has('allowedStyles')) {
+      this.normalizedAllowedStyles = normalizeEmailAllowedStyles(this.allowedStyles);
     }
+    const externalValueChange =
+      changed.has('value') &&
+      !!this.view &&
+      !this.syncingValue &&
+      this.serializeDoc(this.view.state.doc) !== this.value;
+    if (externalValueChange) this.setContent(this.value);
     this.syncingValue = false;
 
     if ((changed.has('disabled') || changed.has('readonly')) && this.view) {
@@ -618,6 +655,19 @@ export class NileWysiwygEditor extends NileElement {
     if (changed.has('noTextTransform') && this.view && !changed.has('value')) {
       this.view.updateState(this.buildState(this.view.state.doc));
     }
+    // Toggling fidelity re-parses the current value: the flag changes how the
+    // same HTML maps to the document model (container styles, cell layout…).
+    if (changed.has('emailFidelity') && this.view && !externalValueChange) {
+      this.setContent(this.reparseSource());
+    }
+    // A new allowlist re-parses so the newly-allowed properties take effect on
+    // already-loaded content (recovering them from the raw source when unedited).
+    else if (changed.has('allowedStyles') && this.view && !externalValueChange) {
+      this.setContent(this.reparseSource());
+    }
+    if (changed.has('noTableMenu') || changed.has('emailFidelity')) {
+      this.updateOverlays();
+    }
     // Lock page scrolling while fullscreen covers the viewport.
     if (changed.has('fullscreen')) {
       if (this.fullscreen) {
@@ -684,6 +734,8 @@ export class NileWysiwygEditor extends NileElement {
       getMaxLength: () => this.maxLength,
       getForcePlainText: () => this.pasteAsPlainText,
       getMarkdownPaste: () => !this.noMarkdownPaste,
+      getEmailFidelity: () => this.emailFidelity,
+      getAllowedStyles: () => this.normalizedAllowedStyles,
       getSanitize: () => this.sanitize,
       textTransform: !this.noTextTransform,
     });
@@ -703,10 +755,54 @@ export class NileWysiwygEditor extends NileElement {
     };
   }
 
+  /** 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(): string {
+    return this.value === this.lastSerializedValue ? this.lastSourceHtml : this.value;
+  }
+
+  /** The saved HTML; with email-fidelity it carries the editor's table rendering. */
+  private serializeDoc(doc: PMNode): string {
+    return docToHtml(doc, this.emailFidelity ? this.emailRenderDefaults() : undefined);
+  }
+
+  private renderProbe: HTMLElement | null = null;
+
+  /** Theme-resolved table border and header colours; null where the theme draws none. */
+  private emailRenderDefaults(): EmailRenderDefaults {
+    const root = this.shadowRoot;
+    if (!root || !this.isConnected) return { borderColor: null, headerBackground: null };
+    if (!this.renderProbe || !this.renderProbe.isConnected) {
+      const probe = document.createElement('span');
+      probe.setAttribute('aria-hidden', 'true');
+      probe.style.cssText =
+        'position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;' +
+        'border-top:1px solid var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, var(--ng-colors-border-primary)));' +
+        'background-color:var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary)));';
+      root.appendChild(probe);
+      this.renderProbe = probe;
+    }
+    const computed = getComputedStyle(this.renderProbe);
+    const background = computed.backgroundColor;
+    return {
+      borderColor: computed.borderTopStyle === 'solid' ? computed.borderTopColor : null,
+      headerBackground:
+        background && background !== 'transparent' && background !== 'rgba(0, 0, 0, 0)'
+          ? background
+          : null,
+    };
+  }
+
+  /** Email-fidelity options threaded to every sanitize/parse call. */
+  private emailOptions(): { emailFidelity: boolean; allowedStyles: NormalizedAllowedStyles } {
+    return { emailFidelity: this.emailFidelity, allowedStyles: this.normalizedAllowedStyles };
+  }
+
   private mountView(): void {
     if (this.view || !this.surfaceEl) return;
     let doc = this.value
-      ? htmlToDoc(defaultSchema, this.value, this.sanitize)
+      ? htmlToDoc(defaultSchema, this.value, this.sanitize, this.emailOptions())
       : undefined;
     if (doc && this.singleLine) doc = flattenToSingleParagraph(doc);
 
@@ -718,7 +814,11 @@ export class NileWysiwygEditor extends NileElement {
         // Word/Google Docs clipboard HTML gets normalized (real lists, no
         // mso noise) before the sanitizer clamps it to the schema.
         const cleaned = isOfficeHtml(pasted) ? cleanOfficeHtml(pasted) : pasted;
-        return this.sanitize ? sanitizeHtml(cleaned) : cleaned;
+        let out = this.sanitize ? sanitizeHtml(cleaned, this.emailOptions()) : cleaned;
+        // Lift container background/font off the markup so pasted email HTML
+        // doesn't bloat into per-run marks (fidelity only).
+        if (this.emailFidelity) out = relocateEmailContainers(out);
+        return out;
       },
       handleDOMEvents: {
         mousedown: () => {
@@ -849,7 +949,7 @@ export class NileWysiwygEditor extends NileElement {
   }
 
   private buildChangeDetail(doc: PMNode): WysiwygChangeDetail {
-    const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+    const value = isDocEmpty(doc) ? '' : this.serializeDoc(doc);
     return { value, json: docToJson(doc), content: value };
   }
 
@@ -870,7 +970,7 @@ export class NileWysiwygEditor extends NileElement {
 
   private syncFormValue(doc: PMNode): void {
     if (!this.internals) return;
-    const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+    const value = isDocEmpty(doc) ? '' : this.serializeDoc(doc);
     this.internals.setFormValue(value === '' ? null : value);
     this.updateValidity();
   }
@@ -979,7 +1079,12 @@ export class NileWysiwygEditor extends NileElement {
 
     if (this.tableMenuEl) {
       const showTable =
-        this.hasFocus && !!this.toolbarState && this.toolbarState.inTable && !panelOpen;
+        !this.noTableMenu &&
+        this.hasFocus &&
+        !!this.toolbarState &&
+        this.toolbarState.inTable &&
+        !(this.emailFidelity && this.toolbarState.tableLayout) &&
+        !panelOpen;
       this.tableMenuEl.open = showTable;
       if (showTable) {
         this.tableMenuEl.updateComplete.then(() =>
@@ -1790,7 +1895,7 @@ export class NileWysiwygEditor extends NileElement {
 
   public getHTML(): string {
     return this.view && !isDocEmpty(this.view.state.doc)
-      ? docToHtml(this.view.state.doc)
+      ? this.serializeDoc(this.view.state.doc)
       : '';
   }
 
@@ -1833,15 +1938,17 @@ export class NileWysiwygEditor extends NileElement {
       if (typeof content === 'string') this.value = content;
       return;
     }
+    if (typeof content === 'string') this.lastSourceHtml = content;
     let doc =
       typeof content === 'string'
-        ? htmlToDoc(defaultSchema, content, this.sanitize)
+        ? htmlToDoc(defaultSchema, content, this.sanitize, this.emailOptions())
         : jsonToDoc(defaultSchema, content);
     if (this.singleLine) doc = flattenToSingleParagraph(doc);
     this.view.updateState(this.buildState(doc));
     this.toolbarState = this.snapshotToolbar(this.view.state);
     this.syncingValue = true;
-    this.value = isDocEmpty(doc) ? '' : docToHtml(doc);
+    this.value = isDocEmpty(doc) ? '' : this.serializeDoc(doc);
+    this.lastSerializedValue = this.value;
     this.syncFormValue(doc);
     if (emitChange) {
       this.emit('nile-input', this.buildChangeDetail(doc));
@@ -1856,7 +1963,7 @@ export class NileWysiwygEditor extends NileElement {
   /** Parses and inserts HTML at the current selection. */
   public insertHTML(htmlContent: string): void {
     if (!this.view) return;
-    const slice = htmlToSlice(defaultSchema, htmlContent, this.sanitize);
+    const slice = htmlToSlice(defaultSchema, htmlContent, this.sanitize, this.emailOptions());
     this.view.dispatch(this.view.state.tr.replaceSelection(slice).scrollIntoView());
     this.view.focus();
   }

package/src/nile-wysiwyg-editor/ui/bookmark-panel.ts

@@ -37,7 +37,7 @@ export class NileWysiwygBookmarkPanel extends NileElement {
           gap: 8px;
           min-width: 280px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: var(--nile-wysiwyg-radius, 8px);
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
@@ -91,7 +91,7 @@ export class NileWysiwygBookmarkPanel extends NileElement {
 
         button.primary {
           background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
-          color: var(--ng-colors-text-white);
+          color: var(--nile-colors-white-base, var(--ng-colors-text-white));
         }
       `,
     ];

package/src/nile-wysiwyg-editor/ui/bubble-menu.ts

@@ -134,7 +134,7 @@ export class NileWysiwygBubbleMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid
             var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, var(--ng-colors-border-primary)));
           border-radius: var(--nile-wysiwyg-radius, 8px);

package/src/nile-wysiwyg-editor/ui/embed-menu.ts

@@ -70,7 +70,7 @@ export class NileWysiwygEmbedMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));

package/src/nile-wysiwyg-editor/ui/embed-panel.ts

@@ -42,7 +42,7 @@ export class NileWysiwygEmbedPanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

package/src/nile-wysiwyg-editor/ui/emoji-picker.ts

@@ -36,7 +36,7 @@ export class NileWysiwygEmojiPicker extends NileElement {
         .panel {
           width: 316px;
           padding: 8px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));

package/src/nile-wysiwyg-editor/ui/find-replace.ts

@@ -47,7 +47,7 @@ export class NileWysiwygFindBar extends NileElement {
           align-items: center;
           gap: 6px;
           padding: 8px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));

package/src/nile-wysiwyg-editor/ui/image-menu.ts

@@ -77,7 +77,7 @@ export class NileWysiwygImageMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));

package/src/nile-wysiwyg-editor/ui/image-panel.ts

@@ -64,7 +64,7 @@ export class NileWysiwygImagePanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

package/src/nile-wysiwyg-editor/ui/insert-menu.ts

@@ -45,7 +45,7 @@ export class NileWysiwygInsertMenu extends NileElement {
           overflow-y: auto;
           overscroll-behavior: contain;
           padding: 6px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));

package/src/nile-wysiwyg-editor/ui/link-editor.ts

@@ -48,7 +48,7 @@ export class NileWysiwygLinkEditor extends NileElement {
           gap: 8px;
           min-width: 280px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid
             var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, var(--ng-colors-border-primary)));
           border-radius: var(--nile-wysiwyg-radius, 8px);
@@ -96,7 +96,7 @@ export class NileWysiwygLinkEditor extends NileElement {
 
         button.primary {
           background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
-          color: var(--ng-colors-text-white);
+          color: var(--nile-colors-white-base, var(--ng-colors-text-white));
         }
 
         button.danger {

package/src/nile-wysiwyg-editor/ui/markdown-panel.ts

@@ -39,7 +39,7 @@ export class NileWysiwygMarkdownPanel extends NileElement {
           width: 460px;
           max-width: 90vw;
           padding: 14px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

package/src/nile-wysiwyg-editor/ui/math-panel.ts

@@ -43,7 +43,7 @@ export class NileWysiwygMathPanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);