@aquera/nile-elements 2.0.16 → 2.0.18

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

@@ -3,11 +3,16 @@ import { addListNodes } from 'prosemirror-schema-list';
 import { tableNodes } from 'prosemirror-tables';
 import OrderedMap from 'orderedmap';
 import { EMBED_SANDBOX, EMBED_REFERRER_POLICY } from './plugins/embeds';
+import { sanitizeExtraStyleForWrite } from './email-css';
+import { sanitizeTableTextStyleForWrite } from './sanitize';
 
 export type Alignment = 'left' | 'center' | 'right' | 'justify';
 
 const ALIGN_VALUES: Alignment[] = ['left', 'center', 'right', 'justify'];
 
+/** Keywords a cell's `text-align` attr may hold (email-fidelity). */
+const CELL_ALIGN_KEYWORDS = new Set(['left', 'center', 'right', 'justify', 'start', 'end']);
+
 function getAlignFromDom(dom: HTMLElement): Alignment | null {
   const value = dom.style.textAlign || dom.getAttribute('align') || '';
   return (ALIGN_VALUES as string[]).includes(value) ? (value as Alignment) : null;
@@ -17,6 +22,40 @@ function alignStyle(align: Alignment | null): string | null {
   return align ? `text-align: ${align}` : null;
 }
 
+/** Image/figure width: a number is px, a `<n>%` string a percentage. */
+const IMAGE_PERCENT = /^(\d{1,3}(?:\.\d{1,2})?)%$/;
+
+export function imageWidthCss(width: number | string | null): string | null {
+  if (typeof width === 'number') return width > 0 ? `${width}px` : null;
+  if (typeof width === 'string') {
+    const match = IMAGE_PERCENT.exec(width.trim());
+    if (match) {
+      const n = parseFloat(match[1]);
+      if (n > 0 && n <= 100) return width.trim();
+    }
+  }
+  return null;
+}
+
+/** Reads an img/figure width: a valid `<n>%` keeps the string, else px rounds. */
+function imageWidthFromDom(styleWidth: string, attrWidth?: string): number | string | null {
+  const trimmed = styleWidth.trim();
+  // A percentage style width is kept only in range; an out-of-range/invalid one
+  // (e.g. '150%') is dropped rather than silently reinterpreted as px.
+  if (trimmed.endsWith('%')) {
+    const match = IMAGE_PERCENT.exec(trimmed);
+    if (match) {
+      const n = parseFloat(match[1]);
+      if (n > 0 && n <= 100) return trimmed;
+    }
+    return null;
+  }
+  const sw = parseFloat(styleWidth);
+  const aw = parseFloat(attrWidth ?? '');
+  const px = Number.isFinite(sw) ? Math.round(sw) : Number.isFinite(aw) ? Math.round(aw) : null;
+  return px && px > 0 ? px : null;
+}
+
 /** Indent depth in 40px steps, like CKEditor/Google Docs. */
 export const INDENT_STEP_PX = 40;
 export const MAX_INDENT = 8;
@@ -41,17 +80,36 @@ function getLineHeightFromDom(dom: HTMLElement): string | null {
   return raw;
 }
 
-/** Combined style string for align + indent + line-height textblock attrs. */
+/** Fidelity block margin, stored as a ready-to-emit declaration string. */
+function getMarginFromDom(dom: HTMLElement): string | null {
+  const s = dom.style;
+  if (s.margin) return `margin: ${s.margin}`;
+  const parts: string[] = [];
+  if (s.marginTop) parts.push(`margin-top: ${s.marginTop}`);
+  if (s.marginBottom) parts.push(`margin-bottom: ${s.marginBottom}`);
+  return parts.length ? parts.join('; ') : null;
+}
+
+/** Combined style string for margin + align + indent + line-height textblock attrs. */
 function blockStyle(attrs: {
   align?: Alignment | null;
   indent?: number;
   lineHeight?: string | null;
+  margin?: string | null;
+  extraStyle?: string | null;
 }): string | null {
   const parts: string[] = [];
+  if (attrs.margin) parts.push(attrs.margin);
   const align = alignStyle(attrs.align ?? null);
   if (align) parts.push(align);
   if (attrs.indent) parts.push(`margin-inline-start: ${attrs.indent * INDENT_STEP_PX}px`);
   if (attrs.lineHeight) parts.push(`line-height: ${attrs.lineHeight}`);
+  // Per-app extension declarations, re-validated against the permanent denylist
+  // + value grammar (the singleton schema can't see the per-app allowlist).
+  if (attrs.extraStyle) {
+    const safe = sanitizeExtraStyleForWrite(attrs.extraStyle);
+    if (safe) parts.push(safe);
+  }
   return parts.length ? parts.join('; ') : null;
 }
 
@@ -165,6 +223,8 @@ const nodes: Record<string, NodeSpec> = {
       align: { default: null },
       indent: { default: 0 },
       lineHeight: { default: null },
+      margin: { default: null },
+      extraStyle: { default: null },
     },
     parseDOM: [
       {
@@ -173,6 +233,8 @@ const nodes: Record<string, NodeSpec> = {
           align: getAlignFromDom(dom),
           indent: getIndentFromDom(dom),
           lineHeight: getLineHeightFromDom(dom),
+          margin: getMarginFromDom(dom),
+          extraStyle: dom.getAttribute('data-extra-style'),
         }),
       },
     ],
@@ -191,6 +253,8 @@ const nodes: Record<string, NodeSpec> = {
       align: { default: null },
       indent: { default: 0 },
       lineHeight: { default: null },
+      margin: { default: null },
+      extraStyle: { default: null },
     },
     parseDOM: [1, 2, 3, 4, 5, 6].map(level => ({
       tag: `h${level}`,
@@ -199,6 +263,8 @@ const nodes: Record<string, NodeSpec> = {
         align: getAlignFromDom(dom),
         indent: getIndentFromDom(dom),
         lineHeight: getLineHeightFromDom(dom),
+        margin: getMarginFromDom(dom),
+        extraStyle: dom.getAttribute('data-extra-style'),
       }),
     })),
     toDOM(node) {
@@ -262,10 +328,7 @@ const nodes: Record<string, NodeSpec> = {
     },
   },
 
-  /**
-   * ProseMirror's canonical inline image, extended with a `width` attr (px)
-   * written by the drag-resize handles.
-   */
+  /** Inline image with a `width` attr (px number or `<n>%`). */
   image: {
     inline: true,
     group: 'inline',
@@ -279,21 +342,12 @@ const nodes: Record<string, NodeSpec> = {
     parseDOM: [
       {
         tag: 'img[src]',
-        getAttrs: (dom: HTMLElement) => {
-          const styleWidth = parseFloat(dom.style.width);
-          const attrWidth = parseFloat(dom.getAttribute('width') ?? '');
-          const width = Number.isFinite(styleWidth)
-            ? Math.round(styleWidth)
-            : Number.isFinite(attrWidth)
-              ? Math.round(attrWidth)
-              : null;
-          return {
-            src: dom.getAttribute('src'),
-            alt: dom.getAttribute('alt'),
-            title: dom.getAttribute('title'),
-            width: width && width > 0 ? width : null,
-          };
-        },
+        getAttrs: (dom: HTMLElement) => ({
+          src: dom.getAttribute('src'),
+          alt: dom.getAttribute('alt'),
+          title: dom.getAttribute('title'),
+          width: imageWidthFromDom(dom.style.width, dom.getAttribute('width') ?? ''),
+        }),
       },
     ],
     toDOM(node) {
@@ -301,7 +355,8 @@ const nodes: Record<string, NodeSpec> = {
       const attrs: Record<string, string> = { src };
       if (alt) attrs.alt = alt;
       if (title) attrs.title = title;
-      if (width) attrs.style = `width: ${width}px`;
+      const css = imageWidthCss(width);
+      if (css) attrs.style = `width: ${css}`;
       return ['img', attrs];
     },
   },
@@ -331,16 +386,12 @@ const nodes: Record<string, NodeSpec> = {
         getAttrs: (dom: HTMLElement) => {
           const img = dom.querySelector('img[src]') as HTMLElement | null;
           if (!img) return false;
-          const styleWidth = parseFloat(img.style.width || dom.style.width);
           const align = dom.getAttribute('data-align');
           return {
             src: img.getAttribute('src'),
             alt: img.getAttribute('alt'),
             title: img.getAttribute('title'),
-            width:
-              Number.isFinite(styleWidth) && styleWidth > 0
-                ? Math.round(styleWidth)
-                : null,
+            width: imageWidthFromDom(img.style.width || dom.style.width),
             align: align === 'left' || align === 'center' || align === 'right' ? align : null,
           };
         },
@@ -351,7 +402,8 @@ const nodes: Record<string, NodeSpec> = {
       const figureAttrs: Record<string, string> = { class: 'nile-wysiwyg__figure' };
       if (align) figureAttrs['data-align'] = align;
       const styles: string[] = [];
-      if (width) styles.push(`width: ${width}px`);
+      const widthCss = imageWidthCss(width);
+      if (widthCss) styles.push(`width: ${widthCss}`);
       if (align === 'center') styles.push('margin-left: auto; margin-right: auto');
       else if (align === 'right') styles.push('margin-left: auto; margin-right: 0');
       if (styles.length) figureAttrs.style = styles.join('; ');
@@ -657,7 +709,20 @@ const nodes: Record<string, NodeSpec> = {
   },
 };
 
-/** Table nodes from prosemirror-tables, with cell background support. */
+/** A cell attr that reads and writes one inline-style declaration. */
+function cellStyleAttr(cssName: string) {
+  return {
+    default: null,
+    getFromDOM(dom: HTMLElement) {
+      return dom.style.getPropertyValue(cssName) || null;
+    },
+    setDOMAttr(value: unknown, attrs: Record<string, unknown>) {
+      if (value) attrs.style = `${(attrs.style as string) || ''}${cssName}: ${value};`;
+    },
+  };
+}
+
+/** Table nodes from prosemirror-tables, with cell background + email-layout support. */
 const tableNodeSpecs = tableNodes({
   tableGroup: 'block',
   cellContent: 'block+',
@@ -665,7 +730,13 @@ const tableNodeSpecs = tableNodes({
     background: {
       default: null,
       getFromDOM(dom) {
-        return (dom as HTMLElement).style.backgroundColor || null;
+        // Fidelity stashes the cell background on a data-attr (so it never
+        // becomes a bg mark); legacy/non-fidelity content keeps it in the style.
+        return (
+          (dom as HTMLElement).getAttribute('data-cell-bg') ||
+          (dom as HTMLElement).style.backgroundColor ||
+          null
+        );
       },
       setDOMAttr(value, attrs) {
         if (value) {
@@ -673,6 +744,55 @@ const tableNodeSpecs = tableNodes({
         }
       },
     },
+    // Padding is read per side so partial shorthands round-trip.
+    paddingTop: cellStyleAttr('padding-top'),
+    paddingRight: cellStyleAttr('padding-right'),
+    paddingBottom: cellStyleAttr('padding-bottom'),
+    paddingLeft: cellStyleAttr('padding-left'),
+    width: cellStyleAttr('width'),
+    valign: cellStyleAttr('vertical-align'),
+    borderTop: cellStyleAttr('border-top'),
+    borderRight: cellStyleAttr('border-right'),
+    borderBottom: cellStyleAttr('border-bottom'),
+    borderLeft: cellStyleAttr('border-left'),
+    borderRadius: cellStyleAttr('border-radius'),
+    // Cell text colour/font, carried on a data-attr so it inherits through the
+    // cell's style instead of spawning a span on every text run.
+    textStyle: {
+      default: null,
+      getFromDOM(dom: HTMLElement) {
+        return dom.getAttribute('data-cell-text-style') || null;
+      },
+      setDOMAttr(value: unknown, attrs: Record<string, unknown>) {
+        const safe = sanitizeTableTextStyleForWrite(value as string);
+        if (safe) attrs.style = `${(attrs.style as string) || ''}${safe};`;
+      },
+    },
+    // Cell text-align, carried on data-cell-align (never the live style) so
+    // flag-off output is unchanged; validated against the keyword set on write.
+    textAlign: {
+      default: null,
+      getFromDOM(dom: HTMLElement) {
+        return dom.getAttribute('data-cell-align') || null;
+      },
+      setDOMAttr(value: unknown, attrs: Record<string, unknown>) {
+        const v = String(value ?? '').toLowerCase();
+        if (CELL_ALIGN_KEYWORDS.has(v)) {
+          attrs.style = `${(attrs.style as string) || ''}text-align: ${v};`;
+        }
+      },
+    },
+    // Per-app extension declarations, re-validated on write-back.
+    extraStyle: {
+      default: null,
+      getFromDOM(dom: HTMLElement) {
+        return dom.getAttribute('data-extra-style') || null;
+      },
+      setDOMAttr(value: unknown, attrs: Record<string, unknown>) {
+        const safe = sanitizeExtraStyleForWrite(value as string);
+        if (safe) attrs.style = `${(attrs.style as string) || ''}${safe};`;
+      },
+    },
   },
 });
 
@@ -682,22 +802,75 @@ const tableNodeSpecs = tableNodes({
  * borderless, with dashed guides visible only while editing.
  */
 const baseTableSpec = tableNodeSpecs.table;
+
+/** Inline styles for a table's fidelity attrs; shared by toDOM and the live TableView. */
+export function tableStyles(attrs: Record<string, unknown>): string[] {
+  const { width, maxWidth, background, border, align, textStyle, extraStyle } = attrs;
+  const styles: string[] = [];
+  if (width) styles.push(`width: ${width}`);
+  if (maxWidth) styles.push(`max-width: ${maxWidth}`);
+  if (background) styles.push(`background-color: ${background}`);
+  if (border) styles.push(`border: ${border}`);
+  if (align === 'center') styles.push('margin-left: auto', 'margin-right: auto');
+  // Table-level font/colour/line-height, re-validated on write-back (same
+  // validators as the sanitizer) so cells/paragraphs inherit it through CSS.
+  if (textStyle) {
+    const safe = sanitizeTableTextStyleForWrite(textStyle as string);
+    if (safe) styles.push(safe);
+  }
+  // Per-app extension declarations, re-validated against the permanent denylist
+  // + value grammar on write-back (the singleton schema can't see the allowlist).
+  if (extraStyle) {
+    const safe = sanitizeExtraStyleForWrite(extraStyle as string);
+    if (safe) styles.push(safe);
+  }
+  return styles;
+}
 const tableSpec: NodeSpec = {
   ...baseTableSpec,
-  attrs: { ...(baseTableSpec.attrs ?? {}), layout: { default: false } },
+  attrs: {
+    ...(baseTableSpec.attrs ?? {}),
+    layout: { default: false },
+    width: { default: null },
+    maxWidth: { default: null },
+    background: { default: null },
+    border: { default: null },
+    align: { default: null },
+    textStyle: { default: null },
+    extraStyle: { default: null },
+  },
   parseDOM: [
     {
       tag: 'table',
       getAttrs: (dom: HTMLElement) => ({
         layout:
           dom.getAttribute('role') === 'presentation' || dom.hasAttribute('data-layout'),
+        width: dom.style.width || null,
+        maxWidth: dom.style.maxWidth || null,
+        extraStyle: dom.getAttribute('data-extra-style') || null,
+        // Table font/colour comes only from the fidelity data-attr (so flag-off
+        // tables keep today's no-table-text-style behaviour).
+        textStyle: dom.getAttribute('data-table-text-style') || null,
+        // Table background comes only from the fidelity data-attr.
+        background: dom.getAttribute('data-table-bg') || null,
+        border: dom.style.border || null,
+        // Centring comes from the fidelity data-attr (email `align="center"`) or
+        // from auto side margins written back by toDOM.
+        align:
+          dom.getAttribute('data-table-align') === 'center' ||
+          (dom.style.marginLeft === 'auto' && dom.style.marginRight === 'auto')
+            ? 'center'
+            : null,
       }),
     },
   ],
   toDOM(node) {
-    return node.attrs.layout
-      ? ['table', { role: 'presentation', 'data-layout': 'true' }, ['tbody', 0]]
-      : ['table', ['tbody', 0]];
+    const styles = tableStyles(node.attrs);
+    const attrs: Record<string, string> = node.attrs.layout
+      ? { role: 'presentation', 'data-layout': 'true' }
+      : {};
+    if (styles.length) attrs.style = styles.join('; ');
+    return ['table', attrs, ['tbody', 0]];
   },
 };
 

package/src/nile-wysiwyg-editor/engine/selection-state.ts

@@ -138,7 +138,9 @@ export function computeToolbarState(state: EditorState): ToolbarState {
       if (listStart === null) listStart = (node.attrs.order as number) ?? 1;
     } else if (node.type === schema.nodes.task_list) inTaskList = true;
     else if (node.type === schema.nodes.blockquote) inBlockquote = true;
-    else if (node.type === schema.nodes.table) {
+    else if (node.type === schema.nodes.table && !inTable) {
+      // Innermost table wins: a data table nested in an email layout table
+      // is not a layout table.
       inTable = true;
       tableLayout = !!node.attrs.layout;
     }

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

@@ -5,7 +5,13 @@ import {
   Schema,
   Slice,
 } from 'prosemirror-model';
-import { sanitizeHtml } from './sanitize';
+import { sanitizeHtml, relocateEmailContainers } from './sanitize';
+import { NormalizedAllowedStyles } from './email-css';
+import {
+  applyEmailRenderDefaults,
+  finishEmailTables,
+  EmailRenderDefaults,
+} from './email-render';
 
 const parserCache = new WeakMap<Schema, PMDOMParser>();
 const serializerCache = new WeakMap<Schema, DOMSerializer>();
@@ -29,24 +35,40 @@ function getSerializer(schema: Schema): DOMSerializer {
 }
 
 /** Parses an HTML string into a document node, sanitizing by default. */
-export function htmlToDoc(schema: Schema, html: string, sanitize = true): PMNode {
-  const clean = sanitize ? sanitizeHtml(html) : html;
+export function htmlToDoc(
+  schema: Schema,
+  html: string,
+  sanitize = true,
+  options?: { emailFidelity?: boolean; allowedStyles?: NormalizedAllowedStyles }
+): PMNode {
+  let clean = sanitize ? sanitizeHtml(html, options) : html;
+  // Lift carried container background/font declarations onto node-attr data
+  // hooks so they don't become per-run marks (see relocateEmailContainers).
+  if (options?.emailFidelity) clean = relocateEmailContainers(clean);
   const dom = new DOMParser().parseFromString(`<body>${clean}</body>`, 'text/html');
   return getParser(schema).parse(dom.body);
 }
 
 /** Parses an HTML string into a slice suitable for replaceSelection. */
-export function htmlToSlice(schema: Schema, html: string, sanitize = true): Slice {
-  const clean = sanitize ? sanitizeHtml(html) : html;
+export function htmlToSlice(
+  schema: Schema,
+  html: string,
+  sanitize = true,
+  options?: { emailFidelity?: boolean; allowedStyles?: NormalizedAllowedStyles }
+): Slice {
+  let clean = sanitize ? sanitizeHtml(html, options) : html;
+  if (options?.emailFidelity) clean = relocateEmailContainers(clean);
   const dom = new DOMParser().parseFromString(`<body>${clean}</body>`, 'text/html');
   return getParser(schema).parseSlice(dom.body, { preserveWhitespace: true });
 }
 
-/** Serializes a document node back to an HTML string. */
-export function docToHtml(doc: PMNode): string {
+/** Serializes a document to HTML; `emailDefaults` writes the editor's table rendering into it. */
+export function docToHtml(doc: PMNode, emailDefaults?: EmailRenderDefaults): string {
   const schema = doc.type.schema;
+  const source = emailDefaults ? applyEmailRenderDefaults(doc, emailDefaults) : doc;
   const container = document.createElement('div');
-  container.appendChild(getSerializer(schema).serializeFragment(doc.content));
+  container.appendChild(getSerializer(schema).serializeFragment(source.content));
+  if (emailDefaults) finishEmailTables(container);
   return container.innerHTML;
 }