@aquera/nile-elements 2.0.16 → 2.0.18

package/src/nile-wysiwyg-editor/engine/email-render.ts

@@ -0,0 +1,99 @@
+import { Fragment, Node as PMNode } from 'prosemirror-model';
+
+/** email-fidelity: writes the editor's data-table rendering into the saved HTML; layout tables keep their authored output. */
+
+/** Theme-resolved colours the editor draws data tables with; null = not drawn. */
+export interface EmailRenderDefaults {
+  borderColor: string | null;
+  headerBackground: string | null;
+}
+
+/** Kept in sync by hand with `.ProseMirror td, .ProseMirror th { padding: 6px 8px }`. */
+const CELL_PADDING: Record<string, string> = {
+  paddingTop: '6px',
+  paddingRight: '8px',
+  paddingBottom: '6px',
+  paddingLeft: '8px',
+};
+
+const CELL_BORDERS = ['borderTop', 'borderRight', 'borderBottom', 'borderLeft'];
+
+/** `.ProseMirror td > *` zeroes block margins inside cells. */
+const CELL_CHILD_MARGIN = 'margin-top: 0px; margin-bottom: 0px';
+
+type Context = 'data-table' | 'data-cell' | null;
+
+/** Returns a copy of `doc` with the editor's data-table rendering filled into node attrs. */
+export function applyEmailRenderDefaults(doc: PMNode, defaults: EmailRenderDefaults): PMNode {
+  return fill(doc, null, defaults);
+}
+
+function fill(node: PMNode, context: Context, defaults: EmailRenderDefaults): PMNode {
+  if (node.isLeaf) return node;
+  const name = node.type.name;
+  let attrs = node.attrs;
+  let childContext: Context = null;
+
+  if (name === 'table') {
+    if (!attrs.layout) {
+      childContext = 'data-table';
+      if (!attrs.width) attrs = { ...attrs, width: '100%' };
+    }
+  } else if (name === 'table_row') {
+    childContext = context;
+  } else if ((name === 'table_cell' || name === 'table_header') && context === 'data-table') {
+    attrs = cellDefaults(attrs, name === 'table_header', defaults);
+    childContext = 'data-cell';
+  } else if (context === 'data-cell' && 'margin' in attrs && !attrs.margin) {
+    attrs = { ...attrs, margin: CELL_CHILD_MARGIN };
+  }
+
+  const children: PMNode[] = [];
+  node.forEach(child => children.push(fill(child, childContext, defaults)));
+  return node.type.create(attrs, Fragment.fromArray(children), node.marks);
+}
+
+function cellDefaults(
+  attrs: Record<string, any>,
+  header: boolean,
+  defaults: EmailRenderDefaults
+): Record<string, any> {
+  const next = { ...attrs };
+  for (const [key, value] of Object.entries(CELL_PADDING)) if (!next[key]) next[key] = value;
+  if (!next.valign) next.valign = 'top';
+  if (defaults.borderColor) {
+    const border = `1px solid ${defaults.borderColor}`;
+    for (const key of CELL_BORDERS) if (!next[key]) next[key] = border;
+  }
+  // A resized column keeps its width in data-colwidth, which mail clients ignore.
+  const colwidth = next.colwidth as number[] | null;
+  if (!next.width && Array.isArray(colwidth) && colwidth.length && colwidth.every(w => w > 0)) {
+    next.width = `${colwidth.reduce((sum, w) => sum + w, 0)}px`;
+  }
+  if (header) {
+    if (!next.background && defaults.headerBackground) next.background = defaults.headerBackground;
+    if (!next.textAlign) next.textAlign = 'left';
+    const textStyle = (next.textStyle as string | null) ?? '';
+    if (!/font-weight/i.test(textStyle)) {
+      next.textStyle = textStyle ? `${textStyle}; font-weight: 600` : 'font-weight: 600';
+    }
+  }
+  return next;
+}
+
+/** Collapsed borders and no cell spacing on every table, fixed columns on data tables. */
+export function finishEmailTables(container: HTMLElement): void {
+  for (const table of Array.from(container.querySelectorAll('table'))) {
+    if (!table.hasAttribute('cellpadding')) table.setAttribute('cellpadding', '0');
+    if (!table.hasAttribute('cellspacing')) table.setAttribute('cellspacing', '0');
+    const style = table.getAttribute('style') ?? '';
+    const add: string[] = [];
+    if (!/(^|;)\s*border-collapse\s*:/i.test(style)) add.push('border-collapse: collapse');
+    const layout = table.getAttribute('role') === 'presentation';
+    if (!layout && !/(^|;)\s*table-layout\s*:/i.test(style)) add.push('table-layout: fixed');
+    if (add.length) {
+      const base = style.trim().replace(/;\s*$/, '');
+      table.setAttribute('style', base ? `${base}; ${add.join('; ')}` : add.join('; '));
+    }
+  }
+}

package/src/nile-wysiwyg-editor/engine/html-detect.ts

@@ -0,0 +1,26 @@
+/** Conservative check: does a text/plain paste look like HTML rather than prose or Markdown? */
+
+/** Block-level tags whose balanced open+close pair marks real HTML structure. */
+const BLOCK_TAGS = 'table|div|p|h1|h2|h3|h4|h5|h6|ul|ol|blockquote|section|body';
+
+const BALANCED_BLOCK = new RegExp(
+  `<(${BLOCK_TAGS})(?:\\s[^>]*)?>[\\s\\S]*?</\\1\\s*>`,
+  'i'
+);
+
+export function looksLikeHtml(text: string): boolean {
+  if (!text) return false;
+  // Skip leading whitespace and HTML comments so a doctype/`<html>` preamble
+  // behind a comment still counts.
+  let head = text.replace(/^\s+/, '');
+  while (head.startsWith('<!--')) {
+    const end = head.indexOf('-->');
+    if (end === -1) break;
+    head = head.slice(end + 3).replace(/^\s+/, '');
+  }
+  const lower = head.toLowerCase();
+  if (lower.startsWith('<!doctype html') || lower.startsWith('<html')) return true;
+  // A balanced block-level element anywhere is enough; the backreference keeps
+  // the open and close tag names matched.
+  return BALANCED_BLOCK.test(text);
+}

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

@@ -1,6 +1,15 @@
 export { createSchema, defaultSchema } from './schema';
 export type { Alignment } from './schema';
-export { sanitizeHtml, isSafeUrl } from './sanitize';
+export { sanitizeHtml, isSafeUrl, relocateEmailContainers } from './sanitize';
+export {
+  normalizeEmailAllowedStyles,
+  parseAllowedStylesAttr,
+  isExtensionPropValid,
+  isExtensionValueValid,
+  sanitizeExtraStyleForWrite,
+} from './email-css';
+export type { NormalizedAllowedStyles } from './email-css';
+export { looksLikeHtml } from './html-detect';
 export {
   htmlToDoc,
   htmlToSlice,

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

@@ -5,7 +5,7 @@ import {
   InputRule,
 } from 'prosemirror-inputrules';
 import { MarkType, Schema } from 'prosemirror-model';
-import { Plugin } from 'prosemirror-state';
+import { Plugin, TextSelection } from 'prosemirror-state';
 
 function escapeRegex(text: string): string {
   return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -128,6 +128,21 @@ function linkifyRule(schema: Schema): InputRule {
  * (**bold**, *italic*, `code`, ~~strike~~), and (unless disabled) the
  * typography autocorrect rules.
  */
+/** "---", "***" or "___" alone in a top-level paragraph → horizontal rule. */
+function horizontalRuleRule(schema: Schema): InputRule {
+  return new InputRule(/^(?:---|\*\*\*|___)$/, (state, _match, start) => {
+    const $start = state.doc.resolve(start);
+    const { paragraph, horizontal_rule: hr } = schema.nodes;
+    // The rule's two earlier characters must be the whole paragraph.
+    if ($start.parent.type !== paragraph || $start.parent.content.size !== 2) return null;
+    const index = $start.index(-1);
+    if (!$start.node(-1).canReplaceWith(index, index + 1, hr)) return null;
+    const before = $start.before();
+    const tr = state.tr.replaceWith(before, $start.after(), [hr.create(), paragraph.create()]);
+    return tr.setSelection(TextSelection.create(tr.doc, before + 2)).scrollIntoView();
+  });
+}
+
 export function buildInputRules(schema: Schema, options: InputRulesOptions = {}): Plugin {
   const transforms = options.textTransform === false ? [] : textTransformRules();
   return inputRules({
@@ -152,6 +167,8 @@ export function buildInputRules(schema: Schema, options: InputRulesOptions = {})
       ),
       // "```" → code block
       textblockTypeInputRule(/^```$/, schema.nodes.code_block),
+      // "---" / "***" / "___" → horizontal rule
+      horizontalRuleRule(schema),
       // "[] " or "[ ] " → checklist
       wrappingInputRule(/^\s*\[[ ]?\]\s$/, schema.nodes.task_list),
       // Inline marks. Bold before italic so '**' is never read as italic;

package/src/nile-wysiwyg-editor/engine/plugins/image-view.ts

@@ -1,6 +1,7 @@
 import { Node as PMNode } from 'prosemirror-model';
 import { EditorView, NodeView } from 'prosemirror-view';
 import { NodeSelection } from 'prosemirror-state';
+import { imageWidthCss } from '../schema';
 
 const MIN_WIDTH = 40;
 
@@ -92,7 +93,7 @@ export class ImageView implements NodeView {
     else this.img.removeAttribute('alt');
     if (title) this.img.title = title;
     else this.img.removeAttribute('title');
-    this.img.style.width = width ? `${width}px` : '';
+    this.img.style.width = imageWidthCss(width) ?? '';
   }
 
   update(node: PMNode): boolean {
@@ -183,7 +184,7 @@ export class FigureView implements NodeView {
     else this.img.removeAttribute('alt');
     if (title) this.img.title = title;
     else this.img.removeAttribute('title');
-    this.dom.style.width = width ? `${width}px` : '';
+    this.dom.style.width = imageWidthCss(width) ?? '';
     if (align) this.dom.setAttribute('data-align', align);
     else this.dom.removeAttribute('data-align');
     this.dom.classList.toggle(

package/src/nile-wysiwyg-editor/engine/plugins/link.ts

@@ -1,4 +1,5 @@
-import { Plugin } from 'prosemirror-state';
+import { Plugin, PluginKey, EditorState } from 'prosemirror-state';
+import { Mark } from 'prosemirror-model';
 import { isSafeUrl } from '../sanitize';
 
 const URL_PATTERN = /^https?:\/\/\S+$/i;
@@ -8,14 +9,69 @@ export interface LinkPluginOptions {
   onOpenLink?: (href: string) => void;
 }
 
+/** Where retyped link text continues: the caret position and the link it keeps. */
+interface RetypeState {
+  pos: number;
+  mark: Mark;
+}
+
+const retypeKey = new PluginKey<RetypeState | null>('nile-wysiwyg-link-retype');
+
+/** The link mark covering every text node in [from, to), or null. */
+function linkCovering(state: EditorState, from: number, to: number): Mark | null {
+  const type = state.schema.marks.link;
+  let mark: Mark | null = null;
+  let covered = true;
+  state.doc.nodesBetween(from, to, node => {
+    if (!covered || !node.isText) return;
+    const found = type.isInSet(node.marks);
+    if (!found || (mark && !found.eq(mark))) covered = false;
+    else mark = found;
+  });
+  return covered ? mark : null;
+}
+
 /**
  * Link behaviors that belong to the document, not the chrome:
  * - Mod/Ctrl-click opens the link.
  * - Pasting a bare URL over a text selection turns the selection into a link.
+ * - Typing over a selection that is entirely one link keeps the link, for the
+ *   replaced text and for the characters typed straight after it (the link mark
+ *   is non-inclusive, so without this the new label drops out of the link — an
+ *   email button renamed by retyping lost its href).
  */
 export function linkPlugin(options: LinkPluginOptions = {}): Plugin {
-  return new Plugin({
+  return new Plugin<RetypeState | null>({
+    key: retypeKey,
+    state: {
+      init: () => null,
+      apply(tr, prev) {
+        const meta = tr.getMeta(retypeKey) as RetypeState | null | undefined;
+        if (meta !== undefined) return meta;
+        if (!prev) return null;
+        // Any caret move, or an edit elsewhere, ends the retype run.
+        if (!tr.docChanged) return tr.selectionSet ? null : prev;
+        const pos = tr.mapping.map(prev.pos);
+        return tr.selection.empty && tr.selection.from === pos ? { ...prev, pos } : null;
+      },
+    },
     props: {
+      handleTextInput(view, from, to, text) {
+        const { state } = view;
+        let mark: Mark | null = null;
+        if (from < to) mark = linkCovering(state, from, to);
+        else {
+          const run = retypeKey.getState(state);
+          if (run && run.pos === from) mark = run.mark;
+        }
+        if (!mark) return false;
+        const end = from + text.length;
+        const tr = state.tr.insertText(text, from, to).addMark(from, end, mark);
+        tr.setMeta(retypeKey, { pos: end, mark });
+        view.dispatch(tr);
+        return true;
+      },
+
       handleClick(view, _pos, event) {
         if (!(event.metaKey || event.ctrlKey)) return false;
         const target = (event.target as HTMLElement | null)?.closest?.('a[href]');

package/src/nile-wysiwyg-editor/engine/plugins/paste.ts

@@ -1,7 +1,9 @@
 import { Plugin } from 'prosemirror-state';
 import { Slice, Fragment, Node as PMNode, Schema } from 'prosemirror-model';
 import { markdownToHtml, looksLikeMarkdown } from '../markdown-parse';
-import { htmlToSlice } from '../serializer';
+import { looksLikeHtml } from '../html-detect';
+import { htmlToDoc, htmlToSlice } from '../serializer';
+import { NormalizedAllowedStyles } from '../email-css';
 
 /**
  * Builds a slice of plain paragraphs from text, splitting on newlines. Open
@@ -36,6 +38,10 @@ export interface PasteOptions {
   getMarkdownPaste?: () => boolean;
   /** Read live: whether pasted HTML is sanitized. Defaults to on. */
   getSanitize?: () => boolean;
+  /** Read live: when true, HTML-looking plain text is parsed as HTML (email fidelity). */
+  getEmailFidelity?: () => boolean;
+  /** Read live: the validated per-app email-fidelity style allowlist. */
+  getAllowedStyles?: () => NormalizedAllowedStyles;
 }
 
 /**
@@ -47,20 +53,37 @@ export function pastePlugin(schema: Schema, options: PasteOptions = {}): Plugin
   return new Plugin({
     props: {
       handlePaste(view, event) {
-        if (options.getForcePlainText?.()) return false;
-        if (options.getMarkdownPaste && !options.getMarkdownPaste()) return false;
         // Only plain-text pastes qualify: an HTML flavor means the source
         // was already rich, and code blocks take text verbatim.
         const html = event.clipboardData?.getData('text/html') ?? '';
         const text = event.clipboardData?.getData('text/plain') ?? '';
         if (html.trim() || !text.trim()) return false;
         if (view.state.selection.$from.parent.type.spec.code) return false;
+        const forcePlain = options.getForcePlainText?.() ?? false;
+        const sanitize = options.getSanitize?.() ?? true;
+
+        // Precedence: paste-as-plain-text → HTML detection (fidelity) → Markdown.
+        if (looksLikeHtml(text)) {
+          if (options.getEmailFidelity?.() && !forcePlain) {
+            // Closed slice so the whole document (tables, blocks) lands intact
+            // rather than being opened and merged into the target paragraph.
+            const doc = htmlToDoc(schema, text, sanitize, {
+              emailFidelity: true,
+              allowedStyles: options.getAllowedStyles?.(),
+            });
+            const slice = new Slice(doc.content, 0, 0);
+            view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+          } else {
+            const slice = plainTextSlice(schema, text);
+            view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+          }
+          return true;
+        }
+
+        if (forcePlain) return false;
+        if (options.getMarkdownPaste && !options.getMarkdownPaste()) return false;
         if (!looksLikeMarkdown(text)) return false;
-        const slice = htmlToSlice(
-          schema,
-          markdownToHtml(text),
-          options.getSanitize?.() ?? true
-        );
+        const slice = htmlToSlice(schema, markdownToHtml(text), sanitize);
         view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
         return true;
       },

package/src/nile-wysiwyg-editor/engine/plugins/tables.ts

@@ -1,14 +1,9 @@
 import { Plugin } from 'prosemirror-state';
 import { Node as PMNode } from 'prosemirror-model';
 import { tableEditing, columnResizing, TableView } from 'prosemirror-tables';
+import { tableStyles } from '../schema';
 
-/**
- * TableView that also reflects the author's `class`/`id` onto the inner
- * `<table>` element (the base TableView leaves it bare and puts its own class on
- * the wrapper div). The attributes round-trip via the schema's toDOM on export;
- * this makes `table.grid …` style rules match in the live editor too. Passed to
- * `columnResizing` as its `View`, so column resizing keeps working.
- */
+/** TableView that also puts the author's class/id and fidelity table styles on the inner `<table>`. */
 class HtmlAttrTableView extends TableView {
   constructor(node: PMNode, defaultCellMinWidth: number) {
     super(node, defaultCellMinWidth);
@@ -21,6 +16,33 @@ class HtmlAttrTableView extends TableView {
     this.table.className = htmlClass ?? '';
     if (htmlId) this.table.id = htmlId;
     else this.table.removeAttribute('id');
+    // Email-fidelity attrs (width, max-width, background, border, centring).
+    // Width is only overridden when set, so column-resize sizing still applies.
+    const style = this.table.style;
+    // tableStyles() entries can hold several declarations ('color: x; font-family: y'
+    // for the table text style or an allowedStyles extension), so flatten them first.
+    const decls = tableStyles(node.attrs)
+      .flatMap(entry => entry.split(';'))
+      .map(decl => decl.trim())
+      .filter(decl => decl.includes(':'));
+    for (const prop of [
+      'max-width', 'background-color', 'border', 'margin-left', 'margin-right',
+      'color', 'font-family', 'font-size', 'font-weight', 'line-height',
+    ]) {
+      style.removeProperty(prop);
+    }
+    // Clear any per-app extension properties first so a value that changed (or an
+    // entry that was removed) doesn't linger from the previous application.
+    for (const decl of decls) style.removeProperty(decl.slice(0, decl.indexOf(':')).trim());
+    for (const decl of decls) {
+      const idx = decl.indexOf(':');
+      style.setProperty(decl.slice(0, idx).trim(), decl.slice(idx + 1).trim());
+    }
+    // A layout table with no width of its own (an email button) shrinks to fit
+    // under email-fidelity; the host CSS keys off this hook.
+    this.table.toggleAttribute('data-autowidth', Boolean(node.attrs.layout && !node.attrs.width));
+    // Lets the host CSS drop column resizing's min-width on layout tables.
+    this.table.toggleAttribute('data-layout-table', Boolean(node.attrs.layout));
   }
 
   update(node: PMNode): boolean {

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

@@ -948,6 +948,79 @@ describe('figure & image commands', () => {
   });
 });
 
+describe('image percentage widths (fix 1, global)', () => {
+  const ON = { emailFidelity: true } as const;
+
+  /** First <img> style.width after a full htmlToDoc→docToHtml round-trip. */
+  function imgWidth(html: string, on = false): string {
+    const doc = on
+      ? htmlToDoc(defaultSchema, html, true, ON)
+      : htmlToDoc(defaultSchema, html);
+    const out = docToHtml(doc);
+    const m = new DOMParser().parseFromString(out, 'text/html');
+    return m.querySelector('img')?.style.width ?? '';
+  }
+
+  it('round-trips width:100% as a percentage with the flag off', () => {
+    expect(imgWidth('<p><img src="https://x.co/i.png" style="width:100%"></p>')).to.equal('100%');
+  });
+
+  it('round-trips width:100% as a percentage with the flag on', () => {
+    expect(
+      imgWidth('<p><img src="https://x.co/i.png" style="width:100%"></p>', true)
+    ).to.equal('100%');
+  });
+
+  it('keeps a fractional percentage (50.5%)', () => {
+    expect(imgWidth('<p><img src="https://x.co/i.png" style="width:50.5%"></p>')).to.equal('50.5%');
+  });
+
+  it('still emits a pixel width for width:320px', () => {
+    expect(imgWidth('<p><img src="https://x.co/i.png" style="width:320px"></p>')).to.equal('320px');
+  });
+
+  it('falls back to the width attribute (px) when there is no style width', () => {
+    expect(imgWidth('<p><img src="https://x.co/i.png" width="1232"></p>')).to.equal('1232px');
+  });
+
+  it('drops an out-of-range percentage (150%)', () => {
+    const out = docToHtml(
+      htmlToDoc(defaultSchema, '<p><img src="https://x.co/i.png" style="width:150%"></p>')
+    );
+    expect(out).to.not.include('150%');
+    expect(out).to.not.include('width: 150');
+  });
+
+  it('drops a calc() width', () => {
+    const out = docToHtml(
+      htmlToDoc(
+        defaultSchema,
+        '<p><img src="https://x.co/i.png" style="width:calc(100% - 2px)"></p>',
+        true,
+        ON
+      )
+    );
+    expect(out).to.not.include('calc(');
+  });
+
+  it('round-trips a percentage width on a figure', () => {
+    const out = docToHtml(
+      htmlToDoc(
+        defaultSchema,
+        '<figure><img src="https://x.co/i.png" style="width:50%"><figcaption>c</figcaption></figure>'
+      )
+    );
+    expect(out).to.include('width: 50%');
+  });
+
+  it('serialize → parse → serialize is a fixpoint for a percentage width', () => {
+    const src = '<p><img src="https://x.co/i.png" style="width:100%"></p>';
+    const once = docToHtml(htmlToDoc(defaultSchema, src, true, ON));
+    const twice = docToHtml(htmlToDoc(defaultSchema, once, true, ON));
+    expect(twice).to.equal(once);
+  });
+});
+
 describe('paste from Office', () => {
   it('detects Word and Google Docs clipboard HTML', () => {
     expect(isOfficeHtml('<p class="MsoNormal">x</p>')).to.equal(true);