@aquera/nile-elements 1.9.6 → 1.9.7

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

@@ -0,0 +1,163 @@
+import { expect } from '@open-wc/testing';
+import { TextSelection } from 'prosemirror-state';
+import {
+  defaultSchema,
+  htmlToDoc,
+  docToHtml,
+  createEditorState,
+  getCommand,
+  isExcelHtml,
+  isOfficeHtml,
+  cleanOfficeHtml,
+  armFormatPainter,
+  applyFormatPainter,
+  isFormatPainterArmed,
+  disarmFormatPainter,
+} from './index';
+
+/** Editor state with the whole document selected. */
+function stateWithAllSelected(html: string) {
+  const doc = htmlToDoc(defaultSchema, html);
+  const state = createEditorState({ doc });
+  const selection = TextSelection.create(state.doc, 1, state.doc.content.size - 1);
+  return state.apply(state.tr.setSelection(selection));
+}
+
+/** Runs a command against a state and returns the resulting state. */
+function run(state: ReturnType<typeof stateWithAllSelected>, name: Parameters<typeof getCommand>[1], attrs?: Parameters<typeof getCommand>[2]) {
+  let next = state;
+  const command = getCommand(state, name, attrs);
+  command?.(state, tr => {
+    next = state.apply(tr);
+  });
+  return next;
+}
+
+describe('changeCase command', () => {
+  it('uppercases the selection', () => {
+    const state = run(stateWithAllSelected('<p>Hello world</p>'), 'changeCase', { textCase: 'upper' });
+    expect(docToHtml(state.doc)).to.equal('<p>HELLO WORLD</p>');
+  });
+
+  it('lowercases the selection', () => {
+    const state = run(stateWithAllSelected('<p>HELLO</p>'), 'changeCase', { textCase: 'lower' });
+    expect(docToHtml(state.doc)).to.equal('<p>hello</p>');
+  });
+
+  it('title-cases the selection', () => {
+    const state = run(stateWithAllSelected('<p>hello brave world</p>'), 'changeCase', { textCase: 'title' });
+    expect(docToHtml(state.doc)).to.equal('<p>Hello Brave World</p>');
+  });
+
+  it('sentence-cases the selection', () => {
+    const state = run(stateWithAllSelected('<p>hello. there is more. ok</p>'), 'changeCase', {
+      textCase: 'sentence',
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>Hello. There is more. Ok</p>');
+  });
+
+  it('preserves marks across the transform', () => {
+    const state = run(stateWithAllSelected('<p><strong>bold</strong> plain</p>'), 'changeCase', {
+      textCase: 'upper',
+    });
+    expect(docToHtml(state.doc)).to.equal('<p><strong>BOLD</strong> PLAIN</p>');
+  });
+
+  it('is a no-op with an empty selection', () => {
+    const doc = htmlToDoc(defaultSchema, '<p>hello</p>');
+    const state = createEditorState({ doc });
+    expect(getCommand(state, 'changeCase', { textCase: 'upper' })!(state, () => {})).to.be.false;
+  });
+});
+
+describe('merge field', () => {
+  it('inserts a merge-field node', () => {
+    const doc = htmlToDoc(defaultSchema, '<p></p>');
+    let state = createEditorState({ doc });
+    state = state.apply(
+      state.tr.setSelection(TextSelection.create(state.doc, 1))
+    );
+    const state2 = run(state, 'insertMergeField', { id: 'first_name', label: 'First name' });
+    const out = docToHtml(state2.doc);
+    expect(out).to.include('data-merge-field="first_name"');
+    expect(out).to.include('First name');
+  });
+
+  it('round-trips through HTML', () => {
+    const html = '<p><span data-merge-field="email" data-merge-label="Email">Email</span></p>';
+    expect(docToHtml(htmlToDoc(defaultSchema, html))).to.include('data-merge-field="email"');
+  });
+});
+
+describe('math', () => {
+  it('inserts a math node', () => {
+    const doc = htmlToDoc(defaultSchema, '<p></p>');
+    let state = createEditorState({ doc });
+    state = state.apply(state.tr.setSelection(TextSelection.create(state.doc, 1)));
+    const state2 = run(state, 'insertMath', { latex: 'a^2 + b^2', mathDisplay: 'block' });
+    const out = docToHtml(state2.doc);
+    expect(out).to.include('data-math="a^2 + b^2"');
+    expect(out).to.include('data-math-display="block"');
+  });
+
+  it('round-trips through HTML', () => {
+    const html = '<p><span data-math="x/y" data-math-display="inline">x/y</span></p>';
+    expect(docToHtml(htmlToDoc(defaultSchema, html))).to.include('data-math="x/y"');
+  });
+});
+
+describe('format painter', () => {
+  it('copies marks from one selection and applies to the next', () => {
+    // <p>BOLD plain</p> — arm over the bold word, then apply to "plain".
+    const doc = htmlToDoc(defaultSchema, '<p><strong>bold</strong> plain</p>');
+    let state = createEditorState({ doc });
+    // Select the bold word (positions 1..5).
+    state = state.apply(state.tr.setSelection(TextSelection.create(state.doc, 1, 5)));
+    state = state.apply(armFormatPainter(state)!);
+    expect(isFormatPainterArmed(state)).to.be.true;
+
+    // Select "plain" (positions 6..11) and apply.
+    state = state.apply(state.tr.setSelection(TextSelection.create(state.doc, 6, 11)));
+    const applyTr = applyFormatPainter(state);
+    expect(applyTr).to.not.be.null;
+    state = state.apply(applyTr!);
+
+    // "plain" (6..11) becomes bold; the space at 5 stays plain, so the two
+    // bold runs render as separate <strong> tags.
+    expect(docToHtml(state.doc)).to.equal('<p><strong>bold</strong> <strong>plain</strong></p>');
+    expect(isFormatPainterArmed(state)).to.be.false;
+  });
+
+  it('disarms without applying', () => {
+    const doc = htmlToDoc(defaultSchema, '<p><strong>bold</strong></p>');
+    let state = createEditorState({ doc });
+    state = state.apply(state.tr.setSelection(TextSelection.create(state.doc, 1, 5)));
+    state = state.apply(armFormatPainter(state)!);
+    state = state.apply(disarmFormatPainter(state));
+    expect(isFormatPainterArmed(state)).to.be.false;
+  });
+});
+
+describe('Excel paste', () => {
+  const excel =
+    '<html xmlns:x="urn:schemas-microsoft-com:office:excel"><body>' +
+    '<table><tr>' +
+    '<td align="center" bgcolor="#ffff00" style="mso-number-format:General">Total</td>' +
+    '</tr></table></body></html>';
+
+  it('is detected as Excel and Office HTML', () => {
+    expect(isExcelHtml(excel)).to.be.true;
+    expect(isOfficeHtml(excel)).to.be.true;
+  });
+
+  it('preserves cell background and alignment', () => {
+    const cleaned = cleanOfficeHtml(excel);
+    const doc = htmlToDoc(defaultSchema, cleaned);
+    const out = docToHtml(doc);
+    expect(out).to.include('Total');
+    // Alignment survives on the wrapped paragraph.
+    expect(out).to.match(/text-align:\s*center/);
+    // Background survives on the cell.
+    expect(out.toLowerCase()).to.include('background-color');
+  });
+});

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

@@ -0,0 +1,156 @@
+/**
+ * HTML sanitization pre-pass. The ProseMirror schema is the real whitelist —
+ * anything it can't parse is dropped — but this pass removes actively
+ * dangerous content (scripts, event handlers, javascript: URLs) before the
+ * string ever touches a live DOM, and strips style declarations down to the
+ * set the schema understands.
+ */
+
+import { isAllowedEmbedSrc } from './plugins/embeds';
+
+/** Elements removed together with their content. */
+const DROP_WITH_CONTENT = new Set([
+  'script', 'style', 'frame', 'frameset', 'object', 'embed',
+  'applet', 'form', 'input', 'textarea', 'select', 'button', 'meta', 'link',
+  'base', 'title', 'noscript', 'template', 'svg', 'math', 'canvas', 'audio',
+  'video', 'dialog', 'slot',
+]);
+
+/** Elements kept as-is (with filtered attributes). Extended in later phases. */
+const ALLOWED_TAGS = new Set([
+  'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'ul', 'ol', 'li',
+  'br', 'hr', 'a', 'b', 'strong', 'i', 'em', 'u', 's', 'strike', 'del',
+  'span', 'code', 'sub', 'sup', 'div', 'font',
+  'pre', 'figure', 'figcaption', 'img', 'iframe',
+  'table', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th', 'colgroup', 'col',
+]);
+
+/** Attributes allowed per tag (on top of GLOBAL_ATTRS). */
+const TAG_ATTRS: Record<string, Set<string>> = {
+  a: new Set(['href', 'title', 'target', 'rel', 'id', 'name', 'data-bookmark']),
+  table: new Set(['role', 'data-layout']),
+  ol: new Set(['start', 'type', 'data-list-style']),
+  ul: new Set(['data-task-list']),
+  figure: new Set(['data-align']),
+  li: new Set(['data-task-item', 'data-checked']),
+  span: new Set([
+    'data-mention-trigger', 'data-mention-key', 'data-mention-label',
+    'data-merge-field', 'data-merge-label', 'data-math', 'data-math-display',
+  ]),
+  pre: new Set(['data-language']),
+  img: new Set(['src', 'alt', 'title', 'width', 'height']),
+  td: new Set(['colspan', 'rowspan', 'data-colwidth']),
+  th: new Set(['colspan', 'rowspan', 'data-colwidth']),
+  col: new Set(['span', 'width']),
+  div: new Set(['data-embed-provider', 'data-width', 'data-align']),
+  iframe: new Set(['src', 'title', 'frameborder', 'allowfullscreen', 'allow']),
+};
+
+const GLOBAL_ATTRS = new Set(['style', 'align']);
+
+/** Style declarations the schema can represent. Everything else is noise. */
+const ALLOWED_STYLES = new Set([
+  'color', 'background-color', 'font-family', 'font-size', 'font-style',
+  'font-weight', 'text-align', 'text-decoration', 'text-decoration-line',
+  'vertical-align', 'margin-left', 'margin-inline-start', 'list-style-type',
+  'line-height',
+]);
+
+const SAFE_URL_PROTOCOLS = ['http:', 'https:', 'mailto:', 'tel:', 'ftp:'];
+
+export function isSafeUrl(url: string, allowDataImage = false): boolean {
+  const trimmed = url.trim();
+  if (trimmed === '') return false;
+  // Relative URLs and fragments have no protocol — safe.
+  if (/^(#|\/|\.\/|\.\.\/)/.test(trimmed)) return true;
+  const match = /^([a-z][a-z0-9+.-]*):/i.exec(trimmed);
+  if (!match) return true;
+  const protocol = `${match[1].toLowerCase()}:`;
+  if (SAFE_URL_PROTOCOLS.includes(protocol)) return true;
+  if (allowDataImage && protocol === 'data:') {
+    // Raster images only — data:image/svg+xml can carry scripts.
+    return /^data:image\/(png|gif|jpe?g|webp|avif|bmp);/i.test(trimmed);
+  }
+  return false;
+}
+
+/** Size styles allowed only where they are part of the document model. */
+const SIZED_TAGS: Record<string, Set<string>> = {
+  img: new Set(['width', 'height']),
+  figure: new Set(['width', 'margin-right']),
+  div: new Set(['width', 'max-width']),
+};
+
+function filterStyle(value: string, tag: string): string {
+  const extra = SIZED_TAGS[tag];
+  return value
+    .split(';')
+    .map(decl => decl.trim())
+    .filter(decl => {
+      const name = decl.slice(0, decl.indexOf(':')).trim().toLowerCase();
+      if (!ALLOWED_STYLES.has(name) && !(extra && extra.has(name))) return false;
+      // Defense in depth: CSS url()/expression() smuggling.
+      return !/url\s*\(|expression\s*\(/i.test(decl);
+    })
+    .join('; ');
+}
+
+function sanitizeElement(el: Element): void {
+  const tag = el.tagName.toLowerCase();
+  const allowed = TAG_ATTRS[tag];
+  for (const attr of Array.from(el.attributes)) {
+    const name = attr.name.toLowerCase();
+    const keep =
+      (GLOBAL_ATTRS.has(name) || (allowed !== undefined && allowed.has(name))) &&
+      !name.startsWith('on');
+    if (!keep) {
+      el.removeAttribute(attr.name);
+      continue;
+    }
+    if (name === 'style') {
+      const filtered = filterStyle(attr.value, tag);
+      if (filtered) el.setAttribute('style', filtered);
+      else el.removeAttribute('style');
+    } else if (name === 'href' || name === 'src') {
+      // Raster data: URLs are allowed on images only.
+      if (!isSafeUrl(attr.value, tag === 'img')) el.removeAttribute(attr.name);
+    } else if (name === 'target') {
+      if (attr.value === '_blank') el.setAttribute('rel', 'noopener noreferrer');
+      else el.removeAttribute('target');
+    }
+  }
+}
+
+function walk(node: Element): void {
+  for (const child of Array.from(node.children)) {
+    const tag = child.tagName.toLowerCase();
+    if (DROP_WITH_CONTENT.has(tag)) {
+      child.remove();
+      continue;
+    }
+    // iframes are allowed ONLY for allowlisted embed providers.
+    if (tag === 'iframe' && !isAllowedEmbedSrc(child.getAttribute('src') ?? '')) {
+      child.remove();
+      continue;
+    }
+    if (!ALLOWED_TAGS.has(tag)) {
+      // Unknown wrapper (article, section, table for now, …): keep its
+      // content, drop the element itself.
+      walk(child);
+      child.replaceWith(...Array.from(child.childNodes));
+      continue;
+    }
+    sanitizeElement(child);
+    walk(child);
+  }
+}
+
+/**
+ * Sanitizes an HTML string. Parsing happens in an inert document created by
+ * DOMParser, so embedded scripts never execute and images never load.
+ */
+export function sanitizeHtml(html: string): string {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  walk(doc.body);
+  return doc.body.innerHTML;
+}