domma-cms 1.10.11 → 1.10.13

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [1.10.13] - 2026-10-24
+
+- **Built against domma-js 0.57.0** - see [its release notes](https://github.com/pinpointzero73/domma/releases/tag/v0.57.0).
+- **Tab stays inside open slideovers, modals and dialogs** in the admin and on the site, and focus goes back where it was when they close. The page editor's Insert buttons still reach the editor behind their slideover.
+
+## [1.10.12] - 2026-10-24
+
+- **Email with untidy HTML looks as it should.** The reader now reads a message with the same HTML5 rules a browser uses, so badly nested tables (a `<div>` between a table and its rows - British Gas, BT, Ocean Finance) keep their coloured panels instead of spilling out of them. One broken declaration in an inline style no longer throws the rest of that style away. Background pictures count as blocked images: the "Load images" notice now offers them and loads them, where before they were always stripped. Across a 15,600-message mailbox, text the sender's own design shows went missing in 16 messages, down from 3,481 before 1.10.8.
+
 ## [1.10.11] - 2026-10-24
 
 - Load admin screens and plugin views only when opened, and let the first screen render while navigation data loads. Sidebar badges refresh in the background, reuse recent account-scoped results and share one authenticated request instead of a request per Tool.

package/admin/dist/domma/domma-tools.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Tools CSS v0.56.0
+ * Domma Tools CSS v0.57.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-10-24T16:15:31.974Z
- * Commit: f768320
+ * Built: 2026-10-24T20:07:52.274Z
+ * Commit: 8ca8224
  */
 
 /*!

package/admin/dist/domma/domma-tools.min.js

@@ -1,9 +1,9 @@
 /*!
- * Domma Tools v0.56.0
+ * Domma Tools v0.57.0
  * Developer tools: Theme Roller & Page Roller
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-10-24T16:15:16.245Z
- * Commit: f768320
+ * Built: 2026-10-24T20:07:34.562Z
+ * Commit: 8ca8224
  *
  * Requires: domma.min.js
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.10.11",
+  "version": "1.10.13",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",
@@ -86,7 +86,7 @@
     "bcryptjs": "^3.0.3",
     "css-select": "^7.0.0",
     "dom-serializer": "^3.1.1",
-    "domma-js": "0.56.0",
+    "domma-js": "0.57.0",
     "dotenv": "^17.2.3",
     "fastify": "5.12.7",
     "gray-matter": "^4.0.3",
@@ -95,6 +95,8 @@
     "mailparser": "^3.12.2",
     "marked": "^15.0.0",
     "nodemailer": "10.2.0",
+    "parse5": "^8.0.1",
+    "parse5-htmlparser2-tree-adapter": "^8.0.1",
     "postcss": "^8.5.31",
     "sanitize-html": "^2.18.1",
     "sharp": "^0.35.5",

package/plugins/_lib/mail/render.js

@@ -29,6 +29,8 @@ import {createHash} from 'node:crypto';
 import {selectAll} from 'css-select';
 import {render as renderDom} from 'dom-serializer';
 import {DomUtils, parseDocument} from 'htmlparser2';
+import {parse as parseHtml5} from 'parse5';
+import {adapter as domAdapter} from 'parse5-htmlparser2-tree-adapter';
 import postcss from 'postcss';
 import sanitizeHtml from 'sanitize-html';
 
@@ -65,20 +67,79 @@ function specificity(selector) {
 }
 
 /**
- * Drop the parts of a `background` shorthand that load something, keeping its
- * colour. `background:#d97757 url(x.png) no-repeat` becomes `#d97757 no-repeat`.
+ * An inline style reduced to well-formed `name:value` declarations, names in
+ * lower case. Splits on `;` outside quotes and brackets (a data: URI has one
+ * inside), and drops any piece with no name or no colon.
+ *
+ * `background` and `background-image` lose whatever would load, unless remote
+ * images are allowed, when a plain http(s) `url()` stays - so a design drawn
+ * on a background picture comes back with "Load images" like any other.
+ *
+ * @param   {string} style
+ * @param   {{allowRemoteImages: boolean, blocked: {count: number}}} options
+ * @returns {string}
+ */
+function tidyStyle(style, options) {
+    const pieces = [];
+    let current = '', quote = '', depth = 0;
+    for (const ch of style) {
+        if (quote) {
+            if (ch === quote) quote = '';
+        } else if (ch === '"' || ch === "'") {
+            quote = ch;
+        } else if (ch === '(') {
+            depth += 1;
+        } else if (ch === ')') {
+            depth = Math.max(0, depth - 1);
+        } else if (ch === ';' && depth === 0) {
+            pieces.push(current);
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    pieces.push(current);
+    return pieces
+        .map((piece) => piece.match(/^\s*([a-zA-Z-][\w-]*)\s*:([\s\S]*)$/))
+        .filter((match) => match && match[2].trim())
+        .map((match) => {
+            const prop = match[1].toLowerCase();
+            let value = match[2].trim();
+            if (prop === 'background' || prop === 'background-image') {
+                value = backgroundValue(value, options);
+            }
+            return value ? `${prop}:${value}` : '';
+        })
+        .filter(Boolean)
+        .join(';');
+}
+
+/** A `url()` the reader may load once remote images are allowed: plain http(s), nothing nested. */
+const REMOTE_URL = /^url\(\s*(['"]?)https?:\/\/[^'"()\s\\]+\1\s*\)$/i;
+
+/**
+ * A background value with the parts that load something cut out, keeping its
+ * colour: `#d97757 url(x.png) no-repeat` becomes `#d97757 no-repeat`. With
+ * remote images allowed, a plain http(s) `url()` is kept instead. Each one cut
+ * counts as a blocked image, so the "Load images" notice offers it.
  *
  * @param   {string} value
+ * @param   {{allowRemoteImages: boolean, blocked: {count: number}}} options
  * @returns {string}
  */
-function stripBackgroundLoads(value) {
+function backgroundValue(value, options) {
     if (value.includes('\\')) return '';
-    return value.replace(/\b(url|image|image-set|element|cross-fade|expression)\s*\((?:[^()]|\([^()]*\))*\)/gi, '').trim();
+    return value.replace(/\b(url|image|image-set|element|cross-fade|expression)\s*\((?:[^()]|\([^()]*\))*\)/gi, (loader) => {
+        if (options.allowRemoteImages && REMOTE_URL.test(loader)) return loader;
+        if (/^url/i.test(loader)) options.blocked.count += 1;
+        return '';
+    }).replace(/\s{2,}/g, ' ').trim();
 }
 
 /**
- * Move a message's `<style>` rules onto the elements they match, and tidy the
- * inline styles the sanitiser is about to judge.
+ * Repair a message's markup the way a browser would, move its `<style>` rules
+ * onto the elements they match, and tidy the inline styles the sanitiser is
+ * about to judge.
  *
  * Mail clients have done this for years because so much mail needs it: a
  * button is often `<a class="button">` with its colours in the head, plus a
@@ -92,14 +153,23 @@ function stripBackgroundLoads(value) {
  * sanitiser's allowlist afterwards.
  *
  * @param   {string} html
- * @returns {string}
+ * @param   {{allowRemoteImages: boolean}} options
+ * @returns {{html: string, blockedBackgrounds: number}}
  */
-function inlineStyles(html) {
+function inlineStyles(html, {allowRemoteImages}) {
+    const blocked = {count: 0};
     let dom;
     try {
-        dom = parseDocument(html);
+        // The browser's own HTML5 parser, not htmlparser2's. A lot of mail is
+        // malformed - a <div> between a <table> and its rows - and browsers
+        // repair it by moving the stray element out. htmlparser2 keeps it
+        // where it was, the sanitiser then drops the table tags around it,
+        // and the coloured cells a design is built from end up outside any
+        // table. Repaired here, the sanitiser reads the same tree a browser
+        // would have drawn.
+        dom = parseHtml5(html, {treeAdapter: domAdapter});
     } catch {
-        return html;
+        return {html, blockedBackgrounds: 0};
     }
 
     const pending = new Map();
@@ -176,32 +246,24 @@ function inlineStyles(html) {
         DomUtils.appendChild(body, div);
     }
 
-    // CSS property names are case-insensitive, the sanitiser's allowlist is
-    // not: `COLOR: #000000` (Outlook-era templates) was dropped, and a sheet
-    // rule we had just inlined then won instead of it.
-    const shouted = DomUtils.findAll((node) => /(^|;)\s*[a-z-]*[A-Z][\w-]*\s*:/.test(node.attribs?.style ?? ''), dom.children);
-    for (const element of shouted) {
-        element.attribs.style = element.attribs.style.replace(
-            /(^|;)(\s*)([\w-]+)(\s*:)/g,
-            (match, lead, space, prop, colon) => `${lead}${space}${prop.toLowerCase()}${colon}`
-        );
+    // Read every inline style the way a browser does before the sanitiser
+    // judges it. Property names are case-insensitive but its allowlist is not
+    // (`COLOR: #000000` was dropped, and an inlined sheet colour won), and one
+    // broken declaration (`color:#fff; centre; ...`) made it throw the whole
+    // attribute away, where a browser skips just that one.
+    // The legacy `background="picture.jpg"` attribute becomes the style it
+    // means, so it is judged - and offered by "Load images" - the same way.
+    for (const element of DomUtils.findAll((node) => Boolean(node.attribs?.background), dom.children)) {
+        const src = element.attribs.background.trim();
+        delete element.attribs.background;
+        if (!src) continue;
+        element.attribs.style = [`background-image:url("${src.replace(/"/g, '')}")`, element.attribs.style ?? ''].filter(Boolean).join(';');
     }
-
-    // A background shorthand loses only what would load; its colour stays.
-    const backgrounds = DomUtils.findAll((node) => /background\s*:/i.test(node.attribs?.style ?? ''), dom.children);
-    for (const element of backgrounds) {
-        element.attribs.style = element.attribs.style.replace(
-            /(^|;)(\s*background\s*:)([^;]*)/gi,
-            (match, lead, prop, value) => {
-                const kept = stripBackgroundLoads(value);
-                return kept ? `${lead}${prop}${kept}` : lead;
-            }
-        );
+    for (const element of DomUtils.findAll((node) => Boolean(node.attribs?.style), dom.children)) {
+        element.attribs.style = tidyStyle(element.attribs.style, {allowRemoteImages, blocked});
     }
 
-    // Untouched mail goes to the sanitiser exactly as it arrived.
-    if (!pending.size && !bodyStyle && !shouted.length && !backgrounds.length) return html;
-    return renderDom(dom);
+    return {html: renderDom(dom), blockedBackgrounds: blocked.count};
 }
 
 /**
@@ -234,9 +296,16 @@ function inlineImageMap(attachments, maxBytes) {
  * @returns {{html: string, blockedImages: number}}
  */
 function sanitiseBody(html, options) {
-    let blockedImages = 0;
-
-    const clean = sanitizeHtml(inlineStyles(html), {
+    const {html: repaired, blockedBackgrounds} = inlineStyles(html, {allowRemoteImages: options.allowRemoteImages});
+    let blockedImages = blockedBackgrounds;
+    // inlineStyles() has already cut out anything that loads, bar the plain
+    // http(s) url() it keeps when remote images are allowed; this refuses
+    // whatever got past it.
+    const background = options.allowRemoteImages
+        ? /^(?![\s\S]*(\\|\b(image|image-set|element|cross-fade|expression)\s*\(|\burl\s*\(\s*(?!['"]?https?:\/\/)))[\s\S]*$/i
+        : /^(?![\s\S]*(\\|\b(url|image|image-set|element|cross-fade|expression)\s*\())[\s\S]*$/i;
+
+    const clean = sanitizeHtml(repaired, {
         allowedTags: ALLOWED_TAGS,
         allowedAttributes: {
             // target/rel are added by transformTags below, and attribute
@@ -262,9 +331,8 @@ function sanitiseBody(html, options) {
                 'color': [/^.*$/],
                 'background-color': [/^.*$/],
                 // The shorthand is how a lot of mail colours its buttons.
-                // inlineStyles() has already cut out anything that loads; this
-                // refuses whatever got past it.
-                'background': [/^(?![\s\S]*(\\|\b(url|image|image-set|element|cross-fade|expression)\s*\())[\s\S]*$/i],
+                'background': [background],
+                ...(options.allowRemoteImages ? {'background-image': [background]} : {}),
                 'border-radius': [/^.*$/],
                 'border-top': [/^.*$/],
                 'border-right': [/^.*$/],